/*
 * Estilos del portal de identidad.
 *
 * Se sirven como archivo estático, sin paso de compilación: en F1 son dos
 * pantallas y un layout, y montar Vite + Tailwind para esto añadiría un
 * `package-lock.json`, una etapa de Node en la imagen y una clase de fallo de
 * despliegue a cambio de nada. Cuando llegue la administración (F2) con su
 * interfaz propia, se replantea.
 *
 * La paleta se define una vez arriba y se reescribe entera para modo oscuro.
 * Nada de colores sueltos por el archivo: si un color no está en una variable,
 * es que no debería estar ahí.
 */

:root {
    --fondo: #f6f7f9;
    --superficie: #ffffff;
    --borde: #dfe3e8;
    --texto: #1a1d21;
    --texto-tenue: #5c6470;
    --acento: #2f6f4f;
    --acento-texto: #ffffff;
    --error: #b3261e;
    --error-fondo: #fdecea;
    --ok: #2f6f4f;
    --ok-fondo: #e8f3ec;
    --radio: 10px;
    --sombra: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px rgb(16 24 40 / 6%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #14171a;
        --superficie: #1c2024;
        --borde: #2e343a;
        --texto: #e8eaed;
        --texto-tenue: #9aa3ad;
        --acento: #3f8f66;
        --acento-texto: #ffffff;
        --error: #f2b8b5;
        --error-fondo: #3b1d1b;
        --ok: #8fd6ab;
        --ok-fondo: #16301f;
        --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.portal {
    width: 100%;
    max-width: 380px;
}

.portal__marca {
    text-align: center;
    margin-bottom: 20px;
}

.portal__marca strong {
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
}

.portal__marca span {
    display: block;
    color: var(--texto-tenue);
    font-size: 0.875rem;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 28px;
}

.tarjeta h1 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 600;
}

.tarjeta__ayuda {
    margin: 0 0 20px;
    color: var(--texto-tenue);
    font-size: 0.875rem;
}

.campo {
    margin-bottom: 16px;
}

.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.campo input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo);
    color: var(--texto);
    font: inherit;
}

.campo input:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: var(--acento);
}

/* El código TOTP se lee de un vistazo si los dígitos están separados. */
.campo__codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem;
    letter-spacing: 0.3em;
    text-align: center;
}

.boton {
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--acento);
    color: var(--acento-texto);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.boton:hover {
    filter: brightness(1.08);
}

.boton:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

/* A dónde vuelve el navegador. Es el dato que de verdad se está autorizando,
   así que se destaca y se lee fácil — en monoespaciada, porque un dominio se
   compara carácter a carácter. */
.destino {
    margin: 0 0 20px;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo);
    font-size: 0.8125rem;
    color: var(--texto-tenue);
}

.destino strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--texto);
    word-break: break-all;
}

/* Cancelar no es la acción principal: tiene que existir y verse, sin competir
   con Continuar por la atención de quien solo quiere entrar. */
.boton--secundario {
    margin-top: 8px;
    background: transparent;
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-weight: 500;
}

.boton--secundario:hover {
    filter: none;
    color: var(--texto);
    border-color: var(--texto-tenue);
}

/* Confirmación, no error: verde y sin el peso visual del aviso rojo. */
.aviso--ok {
    background: var(--ok-fondo);
    color: var(--ok);
}

.nota {
    margin: 16px 0 0;
    color: var(--texto-tenue);
    font-size: 0.8125rem;
}

/* El QR de la matrícula. Fondo blanco explícito: el SVG lo lleva, pero si el
   navegador lo ignorara el QR quedaría ilegible en modo oscuro. */
.qr {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 8px;
}

.qr svg {
    width: 100%;
    max-width: 220px;
    height: auto;
}

/* Los códigos de recuperación, en monoespaciada y en dos columnas: se leen y se
   copian mucho mejor, y son para apuntarlos a mano. */
.codigos {
    list-style: none;
    margin: 0 0 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
}

@media (max-width: 420px) {
    .codigos {
        grid-template-columns: 1fr;
    }
}

.aviso {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--error-fondo);
    color: var(--error);
    font-size: 0.875rem;
}

.pie {
    color: var(--texto-tenue);
    font-size: 0.75rem;
    text-align: center;
    max-width: 380px;
}

/* Pantalla de inicio: lista de productos con derecho. */
.productos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.productos li {
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo);
    font-size: 0.9375rem;
}

.salir {
    margin-top: 20px;
}

.salir button {
    width: 100%;
    padding: 9px 16px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: transparent;
    color: var(--texto-tenue);
    font: inherit;
    cursor: pointer;
}

.salir button:hover {
    color: var(--texto);
    border-color: var(--texto-tenue);
}