/* =============================================================================
 * TechnoSense-Caelum — modules/acceso.css
 * -----------------------------------------------------------------------------
 * Lo propio de Caelum sobre la tarjeta de la familia (modules/login.css, copia
 * fiel de Wx). Solo tokens de theme.css: ningún color se escribe aquí.
 *   · el sufijo del wordmark: --solar-500 en claro y --sky-600 en oscuro
 *     (ESTILO_TECHNOSENSE §12 y el kit de marca de Caelum);
 *   · el botón de tema, la cuenta elegida del paso 2 y los datos del inicio.
 * ============================================================================= */

.login-brand .logo .sufijo { color: var(--solar-500); }
[data-theme="dark"] .login-brand .logo .sufijo { color: var(--sky-600); }

/* ---- Botón de tema: arriba a la derecha, fuera de la tarjeta ---- */
.tema-boton {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: 10;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sky-700);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.tema-boton:hover { border-color: var(--sky-600); color: var(--sky-900); }
.tema-boton .sol { display: none; }
[data-theme="dark"] .tema-boton .sol { display: block; }
[data-theme="dark"] .tema-boton .luna { display: none; }

/* ---- Paso 2: la cuenta que se escribió en el paso 1 ---- */
.cuenta-elegida {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding: 0.6rem 0.9rem;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
}
.cuenta-elegida .etiqueta {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.cuenta-elegida .valor {
    display: block;
    color: var(--ink);
    font-weight: var(--fw-medium);
    overflow-wrap: anywhere;
}
.cuenta-elegida a { flex: none; color: var(--sky-600); font-weight: var(--fw-medium); text-decoration: none; }
.cuenta-elegida a:hover { text-decoration: underline; }

/* ---- Textos de apoyo dentro de la tarjeta ---- */
.login-nota {
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    text-align: center;
}
.login-nota a { color: var(--sky-600); text-decoration: none; }
.login-nota a:hover { text-decoration: underline; }
.campo-ayuda { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }

/* ---- Inicio y panel provisional: datos de la sesión ---- */
.datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-6);
    font-size: var(--fs-sm);
}
.datos dt { color: var(--muted); }
.datos dd { color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.saludo { margin-bottom: var(--sp-4); color: var(--ink-soft); text-align: center; }
.saludo strong { color: var(--ink); }

/* ---- Aviso neutro («Tu sesión se cerró»): ni error ni éxito ---- */
.alert-aviso {
    background: var(--sky-100);
    border-color: var(--line);
    color: var(--sky-900);
}

/* ---- Móvil: iOS agranda la página al enfocar un campo de menos de 16 px
   (la misma regla de Aqua, modules/panel.css). En la copia de Wx miden 15.2. ---- */
@media (max-width: 640px) {
    .login-card input { font-size: 16px; }
}