/* Minification failed. Returning unminified contents.
(17,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(25,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(70,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(71,17): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(139,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(144,21): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(164,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
 */
/* =============================================================
   Passkeys (WebAuthn/FIDO2): botón de "Entrar con passkey" en el
   login y pantalla de registro al terminar el inicio de sesión.

   Todos los colores salen de los tokens --neutral-* / --resolution-blue-*.
   El modo oscuro funciona con un "flip" de esos tokens (ver DarkMode.css),
   así que estas reglas se adaptan solas y no hace falta duplicarlas bajo
   [data-theme="dark"]. El icono usa currentColor por el mismo motivo.
   ============================================================= */

/* --- Separador "o" entre el login con contraseña y el de passkey --- */
.adm-passkey__separator {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    color: var(--neutral-600);
}

.adm-passkey__separator::before,
.adm-passkey__separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--neutral-300);
}

/* --- Botón de entrar con passkey --- */
.adm-passkey__login-container {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
}

.adm-passkey__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
}

.adm-passkey__button svg {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

/* --- Modal que ofrece registrar una passkey --- */

/* Ilustración de seguridad (escudo + huella) del encabezado del modal.
   El fondo usa --neutral-200 y NO un tono de --resolution-blue: en este sistema
   --resolution-blue-100 no es un tinte pálido sino un azul saturado (#657AFB), así que
   serviría de fondo para el icono azul. --neutral-200 se voltea solo en modo oscuro
   (queda gris oscuro) y mantiene el contraste con el icono en ambos temas. */
.adm-passkey-modal__illustration {
    display: flex;
    justify-content: center;
    margin-bottom: 1.6rem;
}

.adm-passkey-modal__illustration-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.8rem;
    height: 8.8rem;
    border-radius: 50%;
    background-color: var(--neutral-200);
    color: var(--resolution-blue-500);
}

.adm-passkey-modal__illustration-circle svg {
    width: 4.8rem;
    height: 4.8rem;
}

/* El campo del nombre del dispositivo ocupa todo el ancho del modal.
   Hace falta el min-width porque Site.css declara un tope global
   `input, select, textarea { max-width: 280px }`, pensado para los formularios de pantalla
   completa. Se anula con min-width y no con `max-width: none` ni con !important porque, cuando
   ambos entran en conflicto, el ancho usado es max(min-width, min(max-width, width)) (CSS 2.1
   §10.4): el min-width gana siempre y no hay que pelear especificidades. */
.adm-passkey-modal__name-input {
    min-width: 100%;
}

/* Pie del modal con tres acciones.

   POR QUÉ LOS BOTONES SALÍAN DESALINEADOS: Layout.css declara un `.btn { margin-bottom: 10px }`
   global (para que los botones de las barras de herramientas respiren al partirse en dos líneas),
   y Bootstrap lo revierte SOLO a partir del segundo botón del pie, con
   `.modal-footer .btn + .btn { margin-bottom: 0 }`. Resultado: el primer botón conserva los 10px
   de margen inferior y el segundo no, y como son inline-block alineados por `vertical-align`,
   ese margen extra desplaza al primero respecto del segundo. Por eso no compartían el borde
   superior. Se corrige poniendo el margen en cero para TODOS los botones de este pie (ver la
   regla de abajo) y separándolos con `gap`.

   Bootstrap 3 le pone además a .modal-footer un clearfix con ::before/::after; dentro de un
   contenedor flex esos pseudoelementos se vuelven items y abren huecos fantasma, por eso se apagan.

   `align-items: stretch` (el valor inicial, explícito aquí porque es intencional) iguala la altura
   de los botones de cada fila, así que comparten borde superior e inferior aunque alguno lleve un
   texto más largo y se parta en dos líneas. */
.adm-passkey-modal__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.2rem;
}

.adm-passkey-modal__footer::before,
.adm-passkey-modal__footer::after {
    display: none;
}

/* El segundo selector existe solo para ganarle en especificidad a
   `.modal-footer .btn + .btn { margin-bottom: 0; margin-left: 5px }` de Bootstrap (0,3,0): sin él,
   el último botón sumaría esos 5px al gap y quedaría más separado que el resto. */
.modal-footer.adm-passkey-modal__footer .btn,
.modal-footer.adm-passkey-modal__footer .adm-passkey-modal__footer-actions .btn {
    margin: 0;
}

.adm-passkey-modal__footer-actions {
    display: flex;
    align-items: stretch;
    gap: 1.2rem;
    margin-left: auto;
}

/* "No volver a preguntar" es la acción menos deseable de las tres: se deja como texto para que
   no compita visualmente con "Registrar passkey". */
.adm-passkey-modal__never {
    padding-left: 0;
    padding-right: 0;
    color: var(--neutral-600);
}

    .adm-passkey-modal__never:hover,
    .adm-passkey-modal__never:focus {
        color: var(--neutral-800);
    }

/* En pantallas angostas las tres acciones no caben en una línea: se apilan a lo ancho para que
   ninguna quede cortada. */
@media (max-width: 480px) {
    .adm-passkey-modal__footer,
    .adm-passkey-modal__footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .adm-passkey-modal__footer-actions {
        width: 100%;
        margin-left: 0;
    }
}

/* --- Lista de passkeys en Preferencias --- */
.adm-passkey-list__empty {
    color: var(--neutral-600);
}

.adm-passkey-list__device-name {
    font-weight: 500;
}

.adm-passkey-list__actions {
    margin-bottom: 1.2rem;
}