/* =============================================================================
   Pantalla de acceso
   -----------------------------------------------------------------------------
   Sin un solo color literal: todo sale de los tokens de UI_Controles, así que el
   login sigue el tema claro/oscuro sin código adicional.
   ============================================================================= */

.st-login {
    /* El acceso tiene dos campos y admite una proporción más cómoda que los
       mantenimientos densos. Los colores y estados siguen siendo globales. */
    --st-field-gap: var(--st-space-3);
    --st-field-label-font-size: var(--st-fs-base);
    --st-field-message-font-size: var(--st-fs-sm);
    --st-textbox-height: var(--st-input-height);
    --st-textbox-padding-x: var(--st-input-padding-x);
    --st-textbox-font-size: var(--st-input-font-size);

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background-color: var(--st-surface);
}

.st-login__card {
    display: flex;
    width: 100%;
    max-width: 940px;
    min-height: 560px;
    background-color: var(--st-surface-raised);
    border: 1px solid var(--st-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--st-shadow-md);
}

/* ---------- Columna del formulario ---------- */

.st-login__form {
    flex: 0 0 46%;
    display: flex;
    flex-direction: column;
    padding: 36px 34px;
    box-sizing: border-box;
}

.st-login__marca {
    margin-bottom: 22px;
}

.st-login__logo {
    height: 30px;
    width: auto;
}

.st-login__marca-texto {
    font-family: var(--st-font-display);
    font-size: var(--st-fs-lg);
    font-weight: var(--st-fw-semibold);
    color: var(--st-text-heading);
}

.st-login__bajada {
    margin: 4px 0 0;
}

.st-login__campos {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-5);
    margin: 26px 0 18px;
}

/* ---------- Zona de avisos ----------
   Va arriba del botón: es donde el ojo vuelve después de hacer clic y fallar.
   El contenedor NO reserva alto fijo — un hueco permanente en un formulario de
   dos campos se lee como algo que falta cargar. El salto al aparecer es
   preferible al vacío constante. */

.st-login__avisos {
    margin-bottom: 14px;
}

.st-login__aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--st-space-3);
    padding: 10px 12px;
    border: 1px solid;
    border-radius: var(--st-border-radius);
    font-size: var(--st-fs-sm);
    line-height: var(--st-lh-normal);
}

.st-login__aviso .st-icon { margin-top: 2px; }

.st-login__aviso-detalle {
    display: block;
    margin-top: 2px;
    color: var(--st-text-secondary);
    font-size: var(--st-fs-xs);
}

/* Tres severidades porque los mensajes no pesan igual. Si todos fueran rojos,
   la gente aprende a ignorar el rojo. */

.st-login__aviso--error {
    border-color: var(--st-danger);
    background-color: var(--st-danger-soft);
    color: var(--st-danger);
}

.st-login__aviso--warning {
    border-color: var(--st-warning);
    background-color: var(--st-warning-soft);
    color: var(--st-warning);
}

.st-login__aviso--exito {
    border-color: var(--st-success);
    background-color: var(--st-success-soft);
    color: var(--st-success);
}

.st-login__aviso--info {
    border-color: var(--st-info);
    background-color: var(--st-info-soft);
    color: var(--st-info);
}

/* Botón principal en azul estructural, no en turquesa: el turquesa es el color
   del foco, y si además fuera el del botón el ojo no sabría dónde está parado. */
.st-login__boton {
    height: var(--st-input-height);
    padding: 0 20px;
    border: 0;
    border-radius: var(--st-border-radius);
    background-color: var(--st-text-heading);
    color: var(--st-text-on-accent);
    font-family: var(--st-font-ui);
    font-size: var(--st-fs-base);
    font-weight: var(--st-fw-medium);
    cursor: pointer;
    transition: opacity var(--st-transition);
}

.st-login__boton:hover:not(:disabled) { opacity: .9; }
.st-login__boton:disabled { opacity: .55; cursor: default; }
.st-login__boton:focus-visible { outline: var(--st-focus-outline); outline-offset: 2px; }

/* El botón como ancla, para las pantallas de dispositivo. Un <a> no se centra
   solo dentro de su caja como sí lo hace un <button>. */
.st-login__boton--enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    text-decoration: none;
}

/* ---- Mantener la sesión iniciada ------------------------------------------
   La aclaración va DEBAJO y atenuada, no al lado de la etiqueta. Al lado
   compite con ella y se lee como parte de la opción; debajo se lee como lo que
   es, una advertencia que la persona puede saltear si ya sabe lo que hace.   */
.st-login__recordar {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "check texto"
        ".     nota";
    align-items: center;
    gap: 0 var(--st-space-3);
    margin-top: var(--st-space-4);
    cursor: pointer;
    user-select: none;
}

.st-login__recordar input {
    grid-area: check;
    width: 16px;
    height: 16px;
    display: grid;
    place-content: center;
    margin: 0;
    border: 1px solid var(--st-border-strong);
    border-radius: 3px;
    background-color: var(--st-surface-raised);
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color var(--st-transition), background-color var(--st-transition);
}

.st-login__recordar input::before {
    content: "";
    width: 8px;
    height: 4px;
    border-bottom: 2px solid var(--st-text-on-accent);
    border-left: 2px solid var(--st-text-on-accent);
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform var(--st-transition);
}

.st-login__recordar input:hover { border-color: var(--st-accent); }

.st-login__recordar input:checked {
    border-color: var(--st-accent);
    background-color: var(--st-accent);
}

.st-login__recordar input:checked::before {
    transform: rotate(-45deg) scale(1);
}

.st-login__recordar input:focus-visible {
    outline: var(--st-focus-outline);
    outline-offset: 2px;
}

.st-login__recordar span {
    grid-area: texto;
    font-size: var(--st-fs-base);
    color: var(--st-text);
}

.st-login__recordar small {
    grid-area: nota;
    font-size: var(--st-fs-xs);
    color: var(--st-text-muted);
}

.st-login__enlaces {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: var(--st-fs-sm);
}

.st-login__enlaces a,
.st-panel__enlace {
    color: var(--st-accent);
    text-decoration: none;
}

.st-login__enlaces a:hover,
.st-panel__enlace:hover { text-decoration: underline; }

.st-login__pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-space-4);
    margin-top: auto;
    padding-top: 26px;
    font-size: var(--st-fs-xs);
    color: var(--st-text-muted);
}

.st-login__pie a { color: var(--st-text-muted); text-decoration: none; }
.st-login__pie a:hover { color: var(--st-accent); }

/* ---------- Panel de novedades ---------- */

.st-login__panel {
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    box-sizing: border-box;
    background-color: var(--st-surface-alt);
}

/* ---------- Esqueleto de carga ----------
   Reproduce la FORMA de lo que viene, no un girador genérico. La diferencia
   importa: con un girador el contenido aparece de golpe y reacomoda todo, y ese
   salto es lo que se percibe como "feo" — más que la espera en sí.

   Los huesos usan color-mix sobre el token del tema, así que el esqueleto sigue
   el modo claro y oscuro sin declarar un solo color propio. */

.st-panel__esqueleto {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.st-hueso {
    background-color: color-mix(in srgb, var(--st-text-muted) 22%, transparent);
    border-radius: var(--st-border-radius-sm);
    animation: st-pulso 1.4s ease-in-out infinite;
}

.st-hueso--badge {
    width: 92px;
    height: 22px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.st-hueso--titulo {
    height: 20px;
    margin-bottom: 8px;
}

.st-hueso--linea {
    height: 12px;
    margin-bottom: 8px;
}

/* Una línea más corta al final de cada bloque: los párrafos reales no terminan
   justo en el borde, y sin esto el esqueleto se ve artificial. */
.st-hueso--corto { width: 62%; }

.st-hueso--media {
    flex: 1 1 auto;
    min-height: 90px;
    margin: 20px 0;
}

.st-hueso--punto {
    width: 22px;
    height: 4px;
    border-radius: 2px;
}

/* Desfase entre piezas: si todas laten al unísono parece un parpadeo de error,
   y escalonadas se lee como movimiento. */
.st-hueso--titulo { animation-delay: .08s; }
.st-hueso--linea { animation-delay: .16s; }
.st-hueso--media { animation-delay: .24s; }

@keyframes st-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* Sin animación para quien pidió menos movimiento. Las formas se quedan
   quietas y siguen comunicando que algo está por llegar. */
@media (prefers-reduced-motion: reduce) {
    .st-hueso { animation: none; opacity: .75; }
}

/* Texto solo para lectores de pantalla. */
.st-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* El contenido es la caja que rota. Ocupa todo el alto disponible para que el
   flex:1 de la ilustración o del cuerpo siga funcionando dentro. */
.st-panel__contenido {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    animation: st-panel-entra .4s ease both;
}

/* Un desplazamiento de 8 px además del fundido: el movimiento hace que se lea
   como "llegó algo nuevo" y no como un parpadeo. */
@keyframes st-panel-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Para quien pidió menos movimiento, el contenido aparece sin animación.
   La rotación sigue funcionando: lo que se quita es el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .st-panel__contenido { animation: none; }
}

.st-panel__badge {
    align-self: flex-start;
    padding: 4px 12px;
    margin-bottom: 16px;
    border-radius: 20px;
    background-color: var(--st-surface-raised);
    color: var(--st-text-secondary);
    font-size: var(--st-fs-xs);
    font-weight: var(--st-fw-medium);
}

/* El tipo decide el color, no quien carga el contenido. Un aviso del SRI no
   compite con el botón de ingresar. */
.st-panel__badge--comunicado {
    background-color: var(--st-warning-soft);
    color: var(--st-warning);
}

.st-panel__badge--aviso {
    background-color: var(--st-danger-soft);
    color: var(--st-danger);
}

.st-panel__titulo {
    margin: 0 0 8px;
    font-family: var(--st-font-display);
    font-size: var(--st-fs-xl);
    font-weight: var(--st-fw-semibold);
    line-height: var(--st-lh-tight);
    letter-spacing: -.01em;
    color: var(--st-text-heading);
}

.st-panel__cuerpo {
    margin: 0;
    font-size: var(--st-fs-base);
    line-height: var(--st-lh-normal);
    color: var(--st-text-secondary);
}

/* EL PUNTO CLAVE: cuando no hay ilustración, el texto se queda con el espacio
   sobrante y el panel se ve completo. Cuando sí la hay, crece la ilustración. */
.st-panel__cuerpo--crece { flex: 1 1 auto; }

.st-panel__media {
    flex: 1 1 auto;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    color: var(--st-accent);
}

.st-panel__media img {
    max-width: 100%;
    max-height: 260px;
    height: auto;
    object-fit: contain;
}

.st-panel__enlace {
    font-size: var(--st-fs-sm);
    margin-bottom: 18px;
}

.st-panel__vacio {
    margin: auto 0;
}

.st-panel__puntos {
    display: flex;
    gap: var(--st-space-2);
    margin-top: auto;
}

.st-panel__punto {
    width: 22px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background-color: var(--st-surface-raised);
    cursor: pointer;
    transition: background-color var(--st-transition);
}

.st-panel__punto.is-activo { background-color: var(--st-accent); }
.st-panel__punto:focus-visible { outline: var(--st-focus-outline); outline-offset: 3px; }

/* ---------- Modal de dispositivo pendiente ----------
   Se superpone al login en vez de reemplazarlo: al cerrarlo la persona ya está
   en el formulario, sin tener que encontrar el camino de vuelta. */

.st-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: var(--st-overlay);
    animation: st-modal-fondo .2s ease both;
}

.st-modal__caja {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px 28px 26px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--st-surface-raised);
    border-radius: 16px;
    box-shadow: var(--st-shadow-md);
    animation: st-modal-caja .25s ease both;
}

.st-modal__icono {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--st-surface-alt);
    color: var(--st-secondary);
}

.st-modal__titulo {
    margin: 0 0 14px;
    font-family: var(--st-font-display);
    font-size: var(--st-fs-xl);
    font-weight: var(--st-fw-semibold);
    line-height: var(--st-lh-tight);
    letter-spacing: -.01em;
    color: var(--st-text-heading);
}

.st-modal__texto {
    margin: 0 0 12px;
    font-size: var(--st-fs-base);
    line-height: var(--st-lh-normal);
    color: var(--st-text-secondary);
}

.st-modal__texto strong { color: var(--st-text); }

.st-modal__nota {
    margin: 18px 0 22px;
    text-align: left;
}

/* La X va dentro de la caja y no del encabezado: hay dos títulos distintos según
   el caso y el botón tiene que quedar en el mismo lugar en los dos. */
.st-modal__cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--st-border-radius-sm);
    background: transparent;
    color: var(--st-text-muted);
    cursor: pointer;
    transition: color var(--st-transition), background-color var(--st-transition);
}

.st-modal__cerrar:hover {
    color: var(--st-text);
    background-color: var(--st-surface-alt);
}

.st-modal__cerrar:focus-visible {
    outline: var(--st-focus-outline);
    outline-offset: 2px;
}

.st-modal__texto--dato {
    padding: 10px 14px;
    border-radius: var(--st-border-radius-sm);
    background-color: var(--st-surface-alt);
    color: var(--st-text);
}

@keyframes st-modal-fondo { from { opacity: 0; } to { opacity: 1; } }

@keyframes st-modal-caja {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .st-modal, .st-modal__caja { animation: none; }
}

/* ---------- Móvil ----------
   El panel desaparece: el acceso es la tarea y la ilustración es acompañamiento.
   Por eso la columna izquierda lleva el logo y el nombre del producto — si la
   identidad viviera solo en el panel, en el teléfono nadie sabría dónde está. */

@media (max-width: 820px) {
    .st-login { padding: 0; align-items: stretch; }

    .st-login__card {
        max-width: none;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .st-login__form { flex: 1 1 auto; padding: 28px 22px; }
    .st-login__panel { display: none; }
}