/* ══════════════════════════════════════════════════════════════════
   ibica-login.css  —  Diseño adaptado a iBica-Frontend aesthetic
   ══════════════════════════════════════════════════════════════════ */

html, body {
    min-height: 100%;
    margin: 0;
}

body {
    font-family: var(--font-dm-sans, 'DM Sans'), sans-serif;
    font-weight: 400;
    font-size: 14px;
    margin: 0;
    padding: 0;
    background-color: #f6f7f7;
    background-image: none;
}

/* ─── Layout principal ────────────────────────────────────────────── */

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#form1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ─── Header ──────────────────────────────────────────────────────── */

#login-header {
    display: none;
}

.logo-header {
    max-height: 50px;
    width: auto;
}

/* En login de mutual el logo de iBica no se muestra: solo queda el de la mutual (.marca-mutuales, ver PersonalizarLogin() de Scripts/Personalizados2/<mutual>/login.js), que se agranda */
html.is-mutual .logo-header {
    display: none;
}

/* Bloque de marca arriba del formulario: leyenda "Ideado para los clientes de <Mutual>" y
   debajo el logo de la mutual. El texto lo reescribe Scripts/marca-mutual.js; el <img> lo
   trae el login.js de cada mutual. Los `col-*` de Bootstrap que arrastra el markup viejo le
   ponen float y padding lateral: acá se neutralizan para poder centrarlo. */
html.is-mutual .marca-mutuales {
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 12px;
    text-align: center;
    font-size: 13px;
    line-height: 1.35;
    color: #6b7a7a;
}

    html.is-mutual .marca-mutuales strong {
        display: block;
        font-weight: 600;
        color: #3d4848;
    }

html.is-mutual .marca-mutuales img {
    width: 110px !important;
    height: auto !important;
    margin-top: 8px;
}

/* ─── Leyenda de bienvenida del banner ───────────────────────────────────
   "Bienvenid@ al Homebanking de <marca>". La escribe Scripts/marca-mutual.js dentro de
   `.login-banner`, o sea a la izquierda y SOBRE la imagen de fondo: ahi el espacio ya esta
   libre y no le come lugar a los campos del formulario.

   OJO: estas reglas NO van scopeadas a `html.is-mutual`. El saludo se muestra tambien en
   iBica sin mutual (ahi la marca es "Bica", ver MARCA_IBICA en marca-mutual.js). Lo que
   sigue siendo exclusivo del blanqueo es la leyenda del panel ("Ideado para los clientes
   de ..."), que va en `.marca-mutuales`. */
.login-banner {
    /* El banner es un espaciador sin contenido propio: sin `align-self: stretch` se encoge
       al alto de la leyenda (`.main` alinea a flex-start) y no se puede anclar abajo. */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 9vh 6vw;
    box-sizing: border-box;
    pointer-events: none;
}

.leyenda-mutual {
    max-width: 540px;
    color: #ffffff;
    font-size: clamp(18px, 2.1vw, 32px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.01em;
    /* La imagen de fondo la elige cada mutual y puede ser clara: la sombra es lo que
       garantiza que el texto se lea igual sobre cualquiera de ellas. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

    .leyenda-mutual strong {
        display: block;
        font-weight: 700;
    }

/* iBica sin mutual: los 5 fondos (FondoPix*) son claros — blanco y gris con algunos
   cuadros teal—, asi que el blanco de arriba queda ilegible (se probo: no se lee en
   ninguno de los 5). Va el teal oscuro de la paleta del login, con halo claro en vez de
   sombra oscura: el halo es lo que la sostiene en los pocos cuadros oscuros que el patron
   mete en esa esquina. En las mutuales NO se toca: ahi el fondo es una foto propia. */
html:not(.is-mutual) .leyenda-mutual {
    color: #075F6B;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 14px rgba(255, 255, 255, 0.7);
}

/* ─── Área de contenido centrado ──────────────────────────────────── */

.main {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    position: relative;
    overflow: hidden;
    /*background-color: #f6f7f7;*/
    /* Fondo de respaldo si el slider no carga las imágenes */
    /*background-image: url('http://www.bancobica.com.ar/images/Fondos/FondoPix.png');*/
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 0;
}

/* ─── Fondo animado: slider que alterna entre imágenes ───────────── */

.slider-wrap-back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.single-slide-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: slider-animation 25s infinite ease-in-out;
}

#fondo-1 {
    background-image: url('https://www.bancobica.com.ar/images/Fondos/FondoPix2.png');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 0;
}
#fondo-2 {
    animation-delay: 5s;
    background-image: url('https://www.bancobica.com.ar/images/Fondos/FondoPix3.png');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 0;
}
#fondo-3 {
    animation-delay: 10s;
    background-image: url('https://www.bancobica.com.ar/images/Fondos/FondoPix6.png');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 0;
}
#fondo-4 {
    animation-delay: 15s;
    background-image: url('https://www.bancobica.com.ar/images/Fondos/FondoPix7.png');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 0;
}
#fondo-5 {
    animation-delay: 20s;
    background-image: url('https://www.bancobica.com.ar/images/Fondos/FondoPix.png');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 0;
}

@keyframes slider-animation {
    0% { opacity: 0; }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}

/* En login de mutual se muestra solo el fondo propio de la mutual (ver Personalizados2/<mutual>/login.css), sin el slider de fondos de iBica */
html.is-mutual .slider-wrap-back {
    display: none;
}

/* Cada Personalizados2/<mutual>/login.css pone su propia imagen de fondo en body
   pero ninguna define background-size: sin esto, en pantallas más anchas que la
   imagen quedan bandas del color de fondo llano a los costados, y el footer
   (semitransparente, con blur) se ve "cortado" en vez de ir de punta a punta. */
html.is-mutual body {
    background-size: cover;
    background-repeat: no-repeat;
}

html.is-mutual #MenuHerramientas {
    display: none;
}
/* visibility:hidden (no display:none): oculta los íconos pero conserva el
   espacio de la columna, para que el footer no se achique en mutuales */
html.is-mutual #social {
    visibility: hidden;
}

/* ─── Panel izquierdo: espaciador que empuja la card a la derecha ──── */

.login-banner {
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
}

/* ─── Panel derecho: formulario ──────────────────────────────────── */

.login-form-panel {
    flex: 0 0 auto;
    align-self: center;
    width: 420px;
    max-width: 90%;
    margin: 40px 64px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px;
    border-radius: 16px;
    box-shadow: 0 10px 40px -4px rgba(0,0,0,0.18);
    -webkit-box-shadow: 0 10px 40px -4px rgba(0,0,0,0.18);
    -moz-box-shadow: 0 10px 40px -4px rgba(0,0,0,0.18);
    box-sizing: border-box;
    overflow-x: hidden;
    z-index: 100
}

.login-form-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── Espaciado compacto entre campos del login ───────────────────── */

#LoginUser_pnlData > div,
#LoginUser_pnlPassword > div {
    margin-bottom: 0px;
}

    #LoginUser_pnlData .row {
        margin-bottom: 14px;
    }

#panel-login .col-espaciado {
    margin-bottom: 1px;
}

    .main label {
        font-weight: 500;
        font-size: 13px;
    }

    .main a.btn:hover, .main a.btn:active, .main a.btn:focus {
        color: #ffffff;
        text-decoration: none !important;
        outline: none !important;
    }

/* ─── Texto de bienvenida (oculto) ───────────────────────────────── */

.texto-fondo {
    display: none !important;
}

/* ─── Panel login → tarjeta centrada ─────────────────────────────── */

#panel-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
}

    /* Mensajes de validación (Bootstrap .alert) */
    #panel-login .alert {
        font-size: 11px;
        padding: 2px 0;
        color: #fe4238;
        border: 0;
        background: transparent;
        position: static;
        display: block;
        margin-top: 4px;
        box-shadow: none;
        border-radius: 0;
    }

        #panel-login .alert::before {
            content: "! ";
            font-weight: 600;
            color: #fe4238;
        }

    #panel-login span.rotulo {
        text-transform: none;
        color: #3d4848;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        display: block;
        margin-bottom: 2px;
    }

    /* Inputs, selects y número (clase Bootstrap form-control) */
    #panel-login .form-control {
        color: #172a2e;
        border: 1px solid #c2cdcb;
        background: #ffffff;
        box-shadow: none;
        font-weight: 400;
        font-size: 14px;
        border-radius: 12px;
        padding: 10px 12px;
        min-height: 44px;
        transition: border-color 0.15s ease;
    }

        #panel-login .form-control:focus {
            border-color: #00BA92;
            box-shadow: 0 0 0 2px rgba(0, 186, 146, 0.2);
            outline: none;
        }

/* En login de mutual, el foco de los inputs usa el color primario de la mutual (--btn-mutual-color, definido en Personalizados2/<mutual>/login.css) en vez del teal de marca de iBica */
html.is-mutual #panel-login .form-control:focus {
    border-color: var(--btn-mutual-color, #00BA92);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-mutual-color, #00BA92) 20%, transparent);
}

        #panel-login .form-control::placeholder {
            color: #778a88;
        }

    /* Fallback para selectores de tipo explícito */
    #panel-login input[type=number],
    #panel-login input[type=password],
    #panel-login input[type=text],
    #panel-login select {
        border-radius: 12px;
        min-height: 44px;
    }

    #panel-login select {
        /* Bootstrap fija height:30px y line-height:30px en select.input-sm; con
           box-sizing:border-box y el padding de .form-control (10px), el texto
           de las opciones queda cortado arriba/abajo en pantallas chicas o con
           zoom alto. height:auto + !important en estas 4 propiedades elimina
           ese conflicto sin depender de vh/clamp, así que no afecta el alto
           general del panel. */
        height: auto !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-right: 32px !important;
        line-height: 1.4 !important;
    }

    /* Tipo de documento + DNI unidos en un solo control */
    #panel-login .tipodoc-nrodoc-group {
        display: flex;
        align-items: stretch;
    }

        #panel-login .tipodoc-select {
            flex: 0 0 auto;
            width: 78px;
            border-radius: 12px 0 0 12px !important;
            border-right: none;
            padding-right: 22px !important;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath d='M1 1l4 4 4-4' fill='none' stroke='%233d4848' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 10px center !important;
            background-size: 10px 6px !important;
        }

        #panel-login .nrodoc-input {
            flex: 1 1 auto;
            min-width: 0;
            border-radius: 0 12px 12px 0 !important;
        }

        #panel-login .tipodoc-select:focus {
            position: relative;
            z-index: 1;
        }

    /* Links dentro del panel */
    #panel-login .link-version-anterior,
    #panel-login a {
        color: #075F6B;
        text-decoration: underline;
        border-width: 0;
        background-color: transparent;
    }

/* En login de mutual, "Recuperar contraseña" va en gris neutro en vez del teal de marca de iBica */
html.is-mutual #panel-login a {
    color: lightslategray;
}

/* ─── Paneles internos (pnlData / pnlPassword) ────────────────────── */

#LoginUser_pnlData,
#LoginUser_pnlPassword {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
}

.panel-centrado {
    width: 100%;
    max-width: 500px;
    margin: 0;
}

/* ─── Título de tarjeta (espejo de <Card text="..."> del Frontend) ─── */

.card-title {
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 16px;
    color: #172a2e;
    line-height: 1.4;
    text-align:center
}

/* Logo dentro del panel (se oculta porque se muestra en el header) */
.logo-ibica {
    display: none;
}

/* ─── Mensaje de error de login ───────────────────────────────────── */

.text-error-login {
    color: #fe4238;
    font-weight: 600;
    font-size: 13px;
    max-width: 100%;
    text-align: center;
    margin: 10 !important;
    padding: 0;
    line-height: 1.4;
}

    .text-error-login ul {
        list-style-type: none;
        padding-left: 0;
        text-align: center;
        margin: 0;
    }

/* ─── Etiquetas ───────────────────────────────────────────────────── */

.rotulo {
    text-transform: none;
    color: #3d4848;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    display: block;
    margin-bottom: 1px;
}

.alert-login {
    font-weight: 400 !important;
}

/* ─── Toggle "ver contraseña" (ojo) ──────────────────────────────── */

.password-wrapper {
    position: relative;
    width: 100%;
}

    .password-wrapper .form-control {
        padding-right: 42px;
    }

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #778a88;
    transition: color 0.15s ease;
}

    .password-toggle:hover,
    .password-toggle:focus {
        color: #075F6B;
        outline: none;
    }

    .password-toggle .material-icons {
        font-size: 20px;
        line-height: 1;
    }

/* ─── Checkbox "recordar" ─────────────────────────────────────────── */

#panel-login .checkbox-recordar-wrap {
    margin-top: -6px;
    margin-bottom: 20px;
}

.checkbox-recordar {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .checkbox-recordar input[type="checkbox"] {
        margin: 0;
        cursor: pointer;
    }

    .checkbox-recordar label {
        margin: 0;
        font-size: 13px;
        font-weight: 400;
        color: #3d4848;
        cursor: pointer;
    }

body.theme-dark .checkbox-recordar label {
    color: #c9d4d3;
}

/* ─── Botones ─────────────────────────────────────────────────────── */

.btn-success {
    background-color: #075F6B;
    border-color: #075F6B;
    border-width: 2px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active {
        background-color: #0D6978;
        border-color: #0D6978;
        color: #ffffff !important;
    }

.btn-login {
    font-weight: 500 !important;
    margin-bottom: 12px;
    padding: 10px 20px;
    background-color: #00B3A1;
    border-color: #00B3A1
}

.btn-login:hover {
    border-color: #004D4F;
    background-color: #004D4F
}

.btn-volver {
    font-weight: 500 !important;
    margin-bottom: 12px;
    padding: 10px 20px;
}

.btn-volver:hover {
    border-color: #004D4F;
    background-color: #004D4F
}

.btn-download {
    min-height: 44px;
    background-color: transparent;
    color: #00B3A1;
    border-color: #00B3A1;
    border-width: 2px;
    border-radius: 12px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .btn-download:hover,
    .btn-download:focus,
    .btn-download:active {
        background-color: #f1f4f4;
        color: #075F6B !important;
        border-color: #075F6B;
        text-decoration: none;
    }

/* ─── Footer ──────────────────────────────────────────────────────── */

#footer-login {
    color: #ffffff;
    background: rgba(7, 30, 34, 0.30) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
    height: auto;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

    #footer-login #logoBB {
        width: 100px;
    }

    #footer-login #social .img-cuadrada {
        height: 29px;
        border-radius: 15px;
        margin: 2px;
    }

    #footer-login a:hover {
        color: #ffffff;
        text-decoration: none;
    }

#logoBB {
    width: 100px;
}

#social .img-cuadrada {
    height: 29px;
    border-radius: 15px;
    margin: 2px;
}

.logo-copyright {
    font-size: 14px !important;
}

.login .container-fluid {
    padding: 16px;
}

.font16 {
    font-size: 16px !important;
}

.footer-accesibilidad {
    font-size: 10px;
    padding-left: 25px;
}

/* ─── Quitar spinner nativo de inputs numéricos ───────────────────── */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}


/* ─── Animación del spinner de carga (usar desde ibica.css) ───────── */

@keyframes spinner {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ─── Mensaje de sesión caducada ──────────────────────────────────── */

#message {
    background: #ffffff;
    border: 1px solid #c2cdcb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin: 24px auto;
    max-width: 400px;
}

/* ─── Panel de alerta antifraude (estilos en Personalizados2/ibica) ── */

#pnlAlerta {
    display: none;
}

/* ─── Sello GoDaddy ───────────────────────────────────────────────── */

#siteseal img {
    height: 35px;
}

/* ─── Responsive ──────────────────────────────────────────────────── */

/* Desktop: el layout se ajusta al alto de la pantalla. En vez de scrollear,
   los elementos se encogen (tamaños fluidos con clamp + vh) para entrar
   completos y que el footer siempre quede visible. No aplica en mobile. */
@media (min-width: 768px) {
    .page {
        height: 100vh;
    }

    .main {
        overflow: hidden;
    }

    .login-form-panel {
        align-self: center;
        margin-top: clamp(6px, 3vh, 40px);
        margin-bottom: clamp(6px, 3vh, 40px);
        padding-top: clamp(14px, 3vh, 36px);
        padding-bottom: clamp(14px, 3vh, 36px);
    }

    .login-form-top {
        margin-bottom: clamp(6px, 2.2vh, 20px) !important;
    }

    .logo-header {
        max-height: 35px;
        margin: 20px 10px 10px 10px;
    }

    #panel-login .form-control,
    #panel-login input[type=number],
    #panel-login input[type=password],
    #panel-login input[type=text],
    #panel-login select {
        min-height: clamp(34px, 5.5vh, 44px) !important;
        cursor: pointer;
    }

    /* El select nativo necesita más piso que un input: su altura debe alcanzar
       para padding + line-height del texto de las opciones, o el navegador
       renderiza sólo la mitad superior/inferior del glifo (texto "cortado" en
       algunas PCs con poca altura de viewport, donde el clamp de arriba cae
       cerca de su mínimo). */
    #panel-login select {
        min-height: clamp(38px, 5.5vh, 44px) !important;
    }

    #panel-login .btn {
        padding-top: clamp(6px, 1.4vh, 10px);
        padding-bottom: clamp(6px, 1.4vh, 10px);
    }
}

@media (max-width: 991px) {
    #footer-login {
        height: auto;
        padding: 15px;
    }

        #footer-login div {
            text-align: center;
        }

    .footer-accesibilidad {
        font-size: 10px;
        padding-left: 15px;
    }
}

@media (max-width: 767px) {
    .main {
        flex-direction: column;
        align-items: stretch;
    }

    /* En mobile el banner es una franja de 150px que ademas queda solapada 28px por la
       tarjeta: no hay lugar para la leyenda sin que compita con la imagen de fondo. Ahi la
       marca la lleva lo que esta arriba del formulario: el logo de i-Bica (.logo-header) o,
       en una mutual, su bloque .marca-mutuales. */
    .leyenda-mutual {
        display: none;
    }

    .login-banner {
        display: block;
        flex: 0 0 auto;
        width: 100%;
        min-height: 150px;
        height: 150px;
        /* Revierte el bloque de escritorio, que estira el banner y ancla la leyenda abajo. */
        align-self: auto;
        padding: 0;
    }

    .login-form-panel {
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 0;
        margin: -28px 0 0 0;
        align-self: auto;
        flex: 1;
        justify-content: flex-start;
        padding: 8px 20px 32px;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    }

    .login-form-top {
        margin-bottom: 28px;
        margin-top: 8px;
    }

    .login-form-top .logo-header {
        max-height: 50px;
    }

    #panel-login {
        justify-content: flex-start;
        align-items: stretch;
    }

    .panel-centrado {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #footer-login {
        height: auto;
        padding: 15px;
    }

    #MenuHerramientas {
        display: none;
    }

    #logos img {
        max-width: 49%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Modo oscuro
   ══════════════════════════════════════════════════════════════════ */

body.theme-dark {
    background-color: #0f1e20;
}

body.theme-dark .login-form-panel {
    background: #172a2e;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

body.theme-dark #panel-login {
    background: transparent;
}

body.theme-dark .card-title {
    color: #e0eceb;
}

body.theme-dark .rotulo,
body.theme-dark #panel-login span.rotulo {
    color: #8fb8b3;
}

body.theme-dark .main label {
    color: #8fb8b3;
}

body.theme-dark #panel-login .form-control {
    background: #1e3338;
    border-color: #3a5558;
    color: #e0eceb;
    box-shadow: none;
}

    body.theme-dark #panel-login .form-control:focus {
        border-color: #00b3a1;
        box-shadow: 0 0 0 2px rgba(0, 179, 161, 0.2);
    }

html.is-mutual body.theme-dark #panel-login .form-control:focus {
    border-color: var(--btn-mutual-color, #00b3a1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-mutual-color, #00b3a1) 20%, transparent);
}

    body.theme-dark #panel-login .form-control::placeholder {
        color: #4a7a75;
    }

body.theme-dark #panel-login input[type=number],
body.theme-dark #panel-login input[type=password],
body.theme-dark #panel-login input[type=text],
body.theme-dark #panel-login select {
    background-color: #1e3338;
    border-color: #3a5558;
    color: #e0eceb;
}

body.theme-dark #panel-login .tipodoc-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e0eceb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px 6px !important;
}

body.theme-dark .text-error-login {
    color: #ff7570;
}

body.theme-dark #panel-login .alert {
    color: #ff7570;
}

    body.theme-dark #panel-login .alert::before {
        color: #ff7570;
    }

html.is-mutual body.theme-dark #panel-login a {
    color: lightslategray;
}

body.theme-dark #panel-login a,
body.theme-dark #panel-login .link-version-anterior {
    color: #00b3a1;
}

body.theme-dark .btn-success {
    background-color: #0a8697;
    border-color: #0a8697;
    color: #ffffff !important;
}

    body.theme-dark .btn-success:hover,
    body.theme-dark .btn-success:focus,
    body.theme-dark .btn-success:active {
        background-color: #0d9aac;
        border-color: #0d9aac;
        color: #ffffff !important;
    }

body.theme-dark .btn-download {
    background-color: transparent;
    color: #00b3a1;
    border-color: #00b3a1;
}

body.theme-dark .btn-login{
    background-color: #00b3a1;
    border-color: #00b3a1;
}

    body.theme-dark .btn-login:hover {
        background-color: #004D4F;
        border-color: #004D4F;
    }

    body.theme-dark .btn-volver:hover {
        background-color: #004D4F;
        border-color: #004D4F;
    }

    body.theme-dark .btn-download:hover,
    body.theme-dark .btn-download:focus,
    body.theme-dark .btn-download:active {
        background-color: #0a8697;
        border-color: #0a8697;
        color: #ffffff !important;
    }

body.theme-dark #footer-login {
    background: rgba(10, 22, 24, 0.5) !important;
}

body.theme-dark #message {
    background: #172a2e;
    border-color: #2a4448;
    color: #e0eceb;
}

body.theme-dark .password-toggle {
    color: #4a7a75;
}

    body.theme-dark .password-toggle:hover,
    body.theme-dark .password-toggle:focus {
        color: #00b3a1;
    }

/* ─── Spinner con el color de la mutual ───────────────────────────────
   El SVG `img/loading-v4.svg` pinta con `var(--color-primary)`, que define `mutual.css` —
   y mutual.css NO se carga acá: esta pantalla usa `Personalizados2/<mutual>/login.css`, que
   trae el hex de marca en `--btn-mutual-color`. Se deriva la variable en vez de sumar
   mutual.css, que arrastra las reglas de layout del sitio interno.
   El reemplazo del <img> por el SVG inline lo hace un script en la propia página: un <img>
   aísla el documento y no hereda custom properties (mismo motivo que en Site.Master y que
   en la variante "v4" de ILoading del front React). */
html.is-mutual {
    --color-primary: var(--btn-mutual-color, #075F6B);
}