/* Pantallas de autenticacion de Identity.Server.
   Deliberadamente sin dependencia de Bootstrap (D6/D9 en design.md):
   estas pantallas son la puerta de entrada al sistema y deben funcionar
   con el minimo de piezas posible. --acento lo inyecta _LayoutAuth.cshtml
   por instancia (D5); el resto de la paleta es fija de la familia Signus. */

:root {
    --auth-panel-from: #1e2129;
    --auth-panel-to: #2b3040;
    --auth-line: #d7dae0;
    --auth-ink: #1e2130;
    --auth-muted: #6b7280;
    --auth-enlace: #0b7bb0; /* fijo, no depende de --acento (D7): --acento no cumple AA en texto */
    --auth-error: #b42318;
    --auth-error-bg: #fef3f2;
    /* Opaco y fijo: 15.96:1 sobre blanco, 3.53:1 sobre el boton (--acento por defecto) --
       cumple el minimo de 3:1 no-textual (SC 1.4.11) contra los dos fondos donde aparece.
       No usar un color translucido aca: compuesto sobre blanco quedaba muy por debajo de 3:1. */
    --auth-focus-ring: var(--auth-ink);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body.auth-body {
    margin: 0;
    background: #fff;
    color: var(--auth-ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

/* ---- panel de la entidad ---- */

.auth-panel {
    background: linear-gradient(158deg, var(--auth-panel-from) 0%, var(--auth-panel-to) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    flex: 0 0 auto;
}

.auth-panel__logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    object-fit: contain;
    /* Sin respaldo circular: el escudo real (D3 anticipaba uno) trae su propia silueta
       radial con transparencia, y un circulo detras lo recorta en vez de realzarlo. Los
       tonos claros del escudo -- dorado, blanco, verde claro -- ya separan del carbon por
       si solos. */
}

.auth-panel__mid {
    min-width: 0;
}

.auth-panel__entidad {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow-wrap: break-word; /* nombre de entidad viene de configuracion, largo variable */
}

.auth-panel__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11.5px;
    color: #cfe6f5;
    overflow-wrap: break-word; /* nombre de instancia viene de configuracion, largo variable */
}

.auth-panel__chip i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7fd3f7;
    display: block;
}

.auth-panel__copy {
    display: none; /* en la banda movil no entra; vuelve en >=768px */
}

/* ---- columna del formulario ---- */

.auth-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 28px 20px;
}

.auth-form__content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.auth-form__content h2 {
    margin: 0 0 4px;
    font-size: 21px;
    letter-spacing: -0.02em;
}

.auth-form__content .auth-subtitle {
    color: var(--auth-muted);
    font-size: 13.5px;
    margin: 0 0 20px;
}

/* ---- campos ---- */

.auth-field {
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
    transition: color 120ms ease;
}

/* Resalta el label del campo activo (paridad con el login anterior). Fijo en --auth-enlace,
   no en --acento (D7): el acento por instancia no esta garantizado a cumplir AA como texto. */
.auth-field:focus-within label {
    color: var(--auth-enlace);
}

.auth-field input[type="text"],
.auth-field input[type="password"],
.auth-field input[type="email"] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--auth-line);
    border-radius: 7px;
    background: #fff;
    padding: 0 12px;
    font-size: 14px;
    color: var(--auth-ink);
}

.auth-field input:focus-visible {
    outline: 3px solid var(--auth-focus-ring);
    outline-offset: 1px;
    border-color: var(--acento, #0277bd);
}

/* ---- boton de mostrar/ocultar contrasenia (lo revela auth.js, ver D6) ---- */

.auth-field__control {
    position: relative;
}

/* La clase la agrega auth.js: sin JS el input no reserva espacio para un boton
   que nunca va a aparecer. */
.auth-field input.has-reveal {
    padding-right: 44px;
}

.auth-reveal {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 42px;
    border: 0;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--auth-muted);
    border-radius: 7px;
}

.auth-reveal:hover {
    color: var(--auth-ink);
}

.auth-reveal:focus-visible {
    outline: 3px solid var(--auth-focus-ring);
    outline-offset: -1px;
}

/* `display:flex` en .auth-reveal le gana al `hidden` de los <svg> hijos, que por defecto
   solo vale display:none. Sin estas reglas se ven los dos iconos superpuestos. */
.auth-reveal[hidden],
.auth-reveal svg[hidden] {
    display: none;
}

.auth-field-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--auth-error);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 18px;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
    min-width: 0; /* flex item: sin esto, no se achica por debajo de su ancho natural (D8) */
}

.auth-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
}

.auth-check input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--auth-focus-ring);
    outline-offset: 2px;
}

.auth-link {
    color: var(--auth-enlace);
    font-size: 13px;
    text-decoration: none;
    min-width: 0; /* flex item de .auth-row: idem .auth-check */
    overflow-wrap: break-word;
}

.auth-link:hover,
.auth-link:focus-visible {
    text-decoration: underline;
}

.auth-link:focus-visible {
    outline: 3px solid var(--auth-focus-ring);
    outline-offset: 2px;
}

/* ---- boton principal: unico elemento que usa el acento de instancia ---- */

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 7px;
    background: var(--acento, #0277bd);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.auth-btn:hover {
    color: #fff;
    filter: brightness(0.94);
}

.auth-btn:focus-visible {
    outline: 3px solid var(--auth-focus-ring);
    outline-offset: 2px;
}

/* Feedback en vivo: deshabilitado (ej. "Esperando confirmación de tu dispositivo...") se veía
   IDÉNTICO a habilitado -- sin esto, no había forma de notar que algo estaba pasando. */
.auth-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.auth-btn:disabled:hover {
    filter: none;
}

/* ---- boton secundario de solo texto (ej. "Ahora no" del ofrecimiento de passkey) ---- */

.auth-btn-texto {
    width: 100%;
    height: 40px;
    border: 0;
    background: none;
    color: var(--auth-muted);
    font-size: 13.5px;
    cursor: pointer;
}

.auth-btn-texto:hover {
    color: var(--auth-ink);
}

.auth-btn-texto:focus-visible {
    outline: 3px solid var(--auth-focus-ring);
    outline-offset: 2px;
}

/* ---- acceso-passkey: pantalla de ofrecimiento post-login (D2) ---- */

.auth-passkey-ofrecimiento {
    text-align: center;
}

.auth-passkey-hero {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--acento, #0277bd) 12%, #fff);
    color: var(--acento, #0277bd);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.auth-passkey-beneficios {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
}

.auth-passkey-beneficios li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13.5px;
    color: #4b5563;
    margin-bottom: 9px;
}

.auth-passkey-tick {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #e6f6ed;
    color: #067647;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    margin-top: 1px;
}

/* Feedback en vivo: el login sin esto se veia identico llegando desde "Crear llave de acceso"
   que de forma normal -- este badge deja claro en que flujo esta el usuario. */
.auth-contexto-llave {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 0 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e4f1fa;
    background: color-mix(in srgb, var(--acento, #0277bd) 12%, #fff);
    color: var(--acento, #0277bd);
    font-size: 12px;
    font-weight: 700;
}

/* mejoras-experiencia-llaves-acceso (D1): jerarquia MENOR que el boton "Llave de acceso" --
   Ingresar es la accion primaria, Llave de acceso la alternativa, Crear llave de acceso un
   enlace secundario con texto de contexto, para no competir visualmente con las otras dos. */
.auth-passkey-crear {
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--auth-muted);
}

.auth-passkey-explicacion {
    margin-top: 14px;
    font-size: 12px;
    color: var(--auth-muted);
}

.auth-passkey-explicacion summary {
    color: var(--auth-enlace);
    cursor: pointer;
    text-align: center;
}

.auth-passkey-explicacion p {
    margin: 8px 0 0;
    line-height: 1.5;
}

/* mejoras-experiencia-llaves-acceso (D4): breadcrumb "Mi cuenta > Seguridad > Llaves de acceso"
   arriba del H2 -- misma pantalla que /Passkey/MisDispositivos, la URL pública estable queda
   para la Fase B (tarea 1.2). */
.auth-migas {
    font-size: 12px;
    color: var(--auth-muted);
    margin: 0 0 4px;
}

.auth-dispositivos-vacio {
    color: var(--auth-muted);
    font-size: 13.5px;
}

.auth-dispositivos-lista {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-top: 1px solid var(--auth-line);
}

.auth-dispositivos-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--auth-line);
}

.auth-dispositivos-apodo {
    font-size: 14px;
    font-weight: 600;
}

.auth-dispositivos-meta {
    font-size: 12px;
    color: var(--auth-muted);
    margin-top: 2px;
}

.auth-dispositivos-quitar {
    width: auto;
    height: auto;
    padding: 6px 4px;
    color: var(--auth-error);
    flex: 0 0 auto;
}

.auth-passkey-anticipo {
    color: var(--auth-muted);
    font-size: 12px;
    margin: 10px 0 0;
}

/* ---- bloque de alerta (D9): errores de validacion / mensajes del servidor ---- */

.auth-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--auth-error-bg);
    border: 1px solid #fda29b;
    border-left: 3px solid var(--auth-error);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 18px;
    font-size: 13.5px;
    color: #7a271a;
}

/* Feedback en vivo (testcontrat01): asp-validation-summary renderiza un <ul><li>, que sin esto
   se ve con el bullet "•" default del user-agent y desalineado del ícono "!" -- las demas
   pantallas (reset password, passkey) usan un <div> plano y no tienen este problema. */
.auth-alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* acceso-passkey: bug real encontrado en verificacion manual -- un elemento con [hidden] Y una
   clase que fija `display` queda IGUAL visible, porque una regla de autor (esta) le gana en la
   cascada a la regla `[hidden] { display: none }` del user-agent, sin importar el atributo.
   Antes de esto, cada data-passkey-*-error nacia visible (vacio) en vez de oculto. */
.auth-alert[hidden] {
    display: none;
}

.auth-alert--success {
    background: #ecfdf3;
    border-color: #6ce9a6;
    border-left-color: #067647;
    color: #05603a;
}

.auth-alert__icon {
    flex: 0 0 auto;
    font-weight: 700;
}

/* ---- espacio reservado para Google / passkey (no se emite HTML todavia) ---- */

.auth-oauth-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--auth-muted); /* #9aa1ac original daba 2.60:1 sobre blanco, no cumple AA */
    font-size: 11px;
    letter-spacing: 0.04em;
}

.auth-oauth-sep::before,
.auth-oauth-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--auth-line);
}

.auth-oauth-group {
    display: flex;
    gap: 10px;
}

/* Mismo bug de [hidden] vs display:flex que .auth-alert -- estos dos nacen hidden en el
   markup (D2/D5: solo passkey-login.js los revela si el navegador soporta WebAuthn), asi que
   sin este override quedarian visibles tambien en navegadores sin soporte. */
.auth-oauth-sep[hidden],
.auth-oauth-group[hidden] {
    display: none;
}

.auth-oauth-btn {
    flex: 1;
    height: 41px;
    border: 1px solid var(--auth-line);
    border-radius: 7px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
    color: #374151;
}

.auth-oauth-btn:focus-visible {
    outline: 3px solid var(--auth-focus-ring);
    outline-offset: 2px;
}

/* ---- acciones secundarias bajo un formulario (ej. "volver a iniciar sesion") ---- */

.auth-secondary-action {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
}

/* ---- logo del proveedor, al pie de la columna del formulario ---- */

.auth-vendor {
    flex: 0 0 auto;
    border-top: 1px solid #eceef1;
    /* auto (no un valor fijo): absorbe todo el espacio libre de la columna y ancla el pie
       al fondo, sin necesidad de que .auth-form__content crezca -- asi el formulario puede
       quedar centrado verticalmente Y el pie abajo, que son objetivos que compiten si se
       resuelven manipulando el flex-grow del contenido. */
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-vendor span {
    font-size: 11px;
    color: var(--auth-muted); /* #9aa1ac original daba 2.60:1 sobre blanco, no cumple AA */
    letter-spacing: 0.02em;
    min-width: 0;
}

.auth-vendor img {
    /* 32px: por debajo de ~28 el wordmark "SYSTEMS" del logo deja de ser legible
       (es el elemento mas fino de la marca). */
    height: 32px;
    width: auto;
}

/* ============ >=768px: el panel deja de ser banda y pasa a columna lateral ============ */

@media (min-width: 768px) {
    .auth-shell {
        flex-direction: row;
    }

    .auth-panel {
        flex: 0 0 38%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: 40px 38px;
        gap: 0;
    }

    .auth-panel__logo {
        /* 132px: el escudo del Cesar tiene rayos, corona de estrellas y un blason central
           con paisaje/figuras -- por debajo de ~110px el centro se vuelve una mancha. Es
           el asset el que fija este minimo, no una preferencia estetica. */
        width: 132px;
        height: 132px;
    }

    .auth-panel__entidad {
        font-size: 24px;
        margin-top: 18px;
    }

    .auth-panel__chip {
        margin-top: 12px;
        font-size: 12px;
    }

    .auth-panel__copy {
        display: block;
        margin: 0;
        /* #7b8a9c original daba 3.72:1 contra el extremo claro del degradado (#2b3040),
           no cumple AA (4.5:1) justo donde este texto vive, al pie del panel */
        color: #a9bccd;
        font-size: 11.5px;
    }

    .auth-form {
        padding: 40px 48px;
    }

    .auth-form__content {
        /* auto arriba y abajo centra el bloque verticalmente en el espacio que queda
           libre; el pie se ancla aparte con su propio margin-top:auto. */
        flex: 0 0 auto;
        margin: auto 0;
    }
}

/* ============ >=992px: panel al 45%, igual que la maqueta aprobada ============ */

@media (min-width: 992px) {
    .auth-panel {
        flex: 0 0 45%;
        padding: 44px 44px;
    }
}