/*
    C1: el aspecto de las pantallas de acceso que NO son el ingreso.

    Login.razor.css existe desde siempre y esta aislado por componente: sus reglas solo alcanzan a
    Login.razor. Las pantallas del segundo factor usan las mismas clases -page-container,
    login-box, message-box- y por eso salian sin estilo, con el formulario pegado al borde
    izquierdo.

    Se podria haber copiado aquel archivo dos veces, una por pantalla, que es lo que la
    convencion de Blazor empuja a hacer. Se hizo asi en su lugar: UNA copia, colgada de la clase
    .acceso para que no alcance a nada mas, enlazada en App.razor. El ingreso no se toca.
*/

.acceso.page-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(15, 163, 148, 0.55) 0%, rgba(15, 163, 148, 0) 45%),
        linear-gradient(135deg, #00756C 0%, #0A4A45 55%, #062E2B 100%);
}

.acceso .login-container {
    display: flex;
    width: 100%;
    max-width: 920px;
    min-height: 540px;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.acceso .login-box {
    flex: 0 0 46%;
    max-width: none;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: #FFFFFF;
    border-radius: 0;
    box-shadow: none;
}

.acceso .logo {
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 0 4px;
}

.acceso .login-box hr {
    border: 0;
    border-top: 1px solid #E3ECEA;
    opacity: 1;
    margin: 20px 0 28px;
}

.acceso .form-floating {
    margin-bottom: 16px;
}

.acceso .form-floating > .form-control {
    height: 58px;
    border: 1px solid #D5DDDB;
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 15px;
}

.acceso .form-floating > .form-control:focus {
    border-color: #00A99D;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.18);
}

.acceso .form-label {
    font-size: 14px;
    color: #6B7072;
}

.acceso .checkbox label {
    font-size: 14px;
    color: #4A4D50;
}

.acceso .form-check-input:checked {
    background-color: #00A99D;
    border-color: #00A99D;
}

.acceso .btn-primary {
    width: 100%;
    padding: 13px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: none;
    border-radius: 10px;
    background-color: #00A99D;
    border-color: #00A99D;
}

.acceso .btn-primary:hover, .acceso .btn-primary:focus, .acceso .btn-primary:active {
    background-color: #00857C;
    border-color: #00857C;
}

.acceso .message-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    background-image: url('/images/bg-login.jpg');
    background-size: cover;
    background-position: center;
}

.acceso .message-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 72px 40px 40px;
    border-radius: 0;
    text-align: left;
    background: linear-gradient(to top, rgba(4, 40, 37, 0.88) 0%, rgba(4, 40, 37, 0) 100%);
}

.acceso .message-box p {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .acceso .message-box {
        display: none;
    }

    .acceso .login-box {
        flex: 1;
        padding: 40px 28px;
    }
}

/* El rotulo flotante de Bootstrap pinta una franja blanca detras del texto; sobre el campo
   claro se veia como un parche. Y el autocompletado de Chrome lo pintaba de lila. */
.acceso .form-floating > .form-control {
    background-color: #FFFFFF;
}

.acceso .form-floating > label::after {
    background-color: transparent !important;
}

.acceso .form-floating > .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    -webkit-text-fill-color: #2F3133;
}

.acceso .position-relative {
    position: relative;
}

.acceso .toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #6c757d;
    font-size: 18px;
    outline: none !important; /* Fuerza la eliminación del contorno */
    border: none;
}

    .acceso .toggle-password:hover {
        color: #495057;
        outline: none !important; /* Asegúrate de sobrescribir cualquier regla */
        box-shadow: none !important; /* Si aparece una sombra, también elimínala */
    }

    /*  EL FOCO DEL TECLADO VUELVE. Aqui habia `outline: none !important` tambien en
        `:focus-visible`, que es precisamente el selector que el navegador usa cuando se llega con
        el TABULADOR. Quien navega con teclado llegaba al ojo de la contrasena y no veia donde
        estaba. El arreglo de un contorno feo es pintarlo bien, no quitarlo.

        `:focus` sigue sin contorno a proposito: ese salta tambien con el raton, y ahi sobra. */
    .acceso .toggle-password:focus {
        outline: none;
        box-shadow: none;
    }

    .acceso .toggle-password:focus-visible {
        outline: 2px solid var(--gt-acento, #00857C);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* =============================================================================================
   EL MODO OSCURO DE LAS PANTALLAS DEL SEGUNDO FACTOR

   Lo mismo que se le anadio a Login.razor.css, y por el mismo motivo: se vio EN PRODUCCION que
   con el sistema en oscuro la tarjeta seguia blanca mientras sus campos salian negros. Este
   archivo tiene los colores a pelo y no tenia una sola consulta de esquema; los campos se
   oscurecian porque `gtech-tokens.css` carga despues y pisa `.form-control` de Bootstrap, pero
   `.login-container` es una clase de estas pantallas y ningun token la alcanzaba.

   Se anade como capa: el modo claro no se toca.
   ============================================================================================= */

@media (prefers-color-scheme: dark) {

    .acceso .login-container,
    .acceso .login-box {
        background: var(--gt-superficie, #1d1f22);
    }

    .acceso .login-box hr {
        border-top-color: var(--gt-borde, #34383c);
    }

    .acceso .form-floating > .form-control {
        border-color: var(--gt-borde, #34383c);
        background-color: var(--gt-fondo, #16181a);
        color: var(--gt-texto, #eceded);
    }

    .acceso .form-floating > .form-control:focus {
        background-color: var(--gt-fondo, #16181a);
    }

    .acceso .form-floating > label,
    .acceso .form-label {
        color: var(--gt-texto-suave, #a8adb2);
    }

    .acceso .checkbox label {
        color: var(--gt-texto, #eceded);
    }

    .acceso .form-floating > .form-control:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px var(--gt-fondo, #16181a) inset;
        -webkit-text-fill-color: var(--gt-texto, #eceded);
    }

    .acceso .toggle-password {
        color: var(--gt-texto-suave, #a8adb2);
    }

        .acceso .toggle-password:hover {
            color: var(--gt-texto, #eceded);
        }
}