/*
 * Pantallas de acceso (login, registro, recuperar, resetear) con el estilo del landing.
 * Se carga después de auth.css. Conserva el panel con mapa y las tarjetas de vidrio,
 * con la paleta "Pacific Maritime" (navy + celeste + verde) y modo claro / oscuro.
 * El tema lo pone js/tema.js (clases "dark" y "dark-mode" en <html>).
 */

body.auth-page {
    font-family: 'Inter', system-ui, sans-serif;
    background: #f8f9ff;
}

/* ── Panel izquierdo: navy marítimo sobre el mapa ── */
.auth-panel-left {
    background-color: #001428;
}

.auth-panel-left-overlay {
    background:
        radial-gradient(circle at 20% 30%, rgba(56, 169, 255, 0.18) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(104, 219, 169, 0.10) 0%, transparent 60%),
        linear-gradient(to bottom, rgba(0, 26, 61, 0.45) 0%, rgba(0, 20, 40, 0.92) 100%);
}

.auth-brand {
    text-decoration: none;
}

.auth-brand-logo {
    border-color: rgba(92, 184, 255, 0.45);
    background: rgba(0, 26, 61, 0.85);
    box-shadow: 0 0 16px rgba(56, 169, 255, 0.28);
    overflow: hidden;
}

.auth-brand-logo-img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    border-radius: 6px;
}

.auth-brand-name {
    font-weight: 800;
}

.auth-brand-name span {
    color: #5cb8ff;
}

/* Tarjetas de vidrio */
.auth-stat-widget {
    background: rgba(0, 26, 61, 0.72);
    border-color: rgba(92, 184, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 10, 25, 0.45);
}

.auth-stat-widget:hover {
    border-color: rgba(92, 184, 255, 0.42);
}

.auth-stat-icon.green  { background: rgba(104, 219, 169, 0.14); border-color: rgba(104, 219, 169, 0.32); color: #68dba9; }
.auth-stat-icon.blue   { background: rgba(92, 184, 255, 0.14);  border-color: rgba(92, 184, 255, 0.32);  color: #5cb8ff; }
.auth-stat-icon.purple { background: rgba(147, 204, 255, 0.14); border-color: rgba(147, 204, 255, 0.32); color: #93ccff; }
.auth-stat-icon.cyan   { background: rgba(56, 169, 255, 0.14);  border-color: rgba(56, 169, 255, 0.32);  color: #38a9ff; }

.auth-stat-label {
    color: rgba(176, 201, 232, 0.75);
}

.auth-stat-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.auth-stat-subtext {
    color: rgba(176, 201, 232, 0.6);
}

.auth-hero-title {
    font-weight: 800;
}

.auth-hero-title .accent {
    background: linear-gradient(135deg, #5cb8ff 0%, #68dba9 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.auth-feature-header.auto { color: #5cb8ff; }
.auth-feature-header.vis  { color: #93ccff; }
.auth-feature-header.cum  { color: #68dba9; }
.auth-capsule-icon.blue   { color: #5cb8ff; }
.auth-capsule-icon.purple { color: #93ccff; }

/* ── Panel derecho y tarjeta del formulario ── */
.auth-panel-right {
    background: radial-gradient(circle at 50% 0%, #ffffff 0%, #eff4ff 55%, #e5eeff 100%);
}

.auth-card {
    border: 1px solid #dce9ff;
    box-shadow: 0 20px 25px -5px rgba(15, 41, 66, 0.10), 0 8px 10px -6px rgba(15, 41, 66, 0.04);
}

.auth-card-title { color: #001a3d; font-weight: 800; }
.auth-card-subtitle { color: #43474d; }
.auth-field-label { color: #74777e; }

.auth-input-wrap input.auth-input:focus,
.auth-captcha-input:focus {
    border-color: #0072c6;
    box-shadow: 0 0 0 3px rgba(0, 114, 198, 0.14);
}

.auth-input-wrap input.auth-input:focus ~ .auth-input-icon,
.auth-btn-toggle-pw:hover {
    color: #0072c6;
}

.auth-field-link,
.auth-captcha-refresh,
.auth-footer-text a,
.auth-sub-footer-link a,
.auth-btn-validate {
    color: #0072c6;
}

.auth-field-link:hover,
.auth-captcha-refresh:hover {
    color: #0b3566;
}

.auth-captcha-img-wrap {
    background: #001a3d;
    border-color: rgba(92, 184, 255, 0.25);
}

.auth-secure-capsule { background: #ecf3ff; border-color: #c4e1ff; }
.auth-secure-capsule .shield-icon { color: #0072c6; }
.auth-capsule-title { color: #0b3566; }
.auth-capsule-desc { color: #0072c6; }

.auth-button,
.auth-recovery .auth-button {
    background: linear-gradient(135deg, #0b3566 0%, #0072c6 100%);
    box-shadow: 0 8px 24px rgba(0, 114, 198, 0.28);
}

.auth-login .auth-button:hover,
.auth-recovery .auth-button:hover,
.auth-button:hover {
    box-shadow: 0 12px 30px rgba(0, 114, 198, 0.38);
}

.auth-section-header { color: #0072c6; background-color: #e1ecff; border-color: #c4e1ff; }

/* ── Barra superior: volver al inicio + selector de tema ── */
.acceso-barra {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 30;
}

.acceso-volver {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #43474d;
    text-decoration: none;
    transition: color 0.2s ease;
}

.acceso-volver:hover { color: #001a3d; }

.acceso-volver svg,
.acceso-tema svg {
    width: 1rem;
    height: 1rem;
}

.acceso-tema {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: #e5eeff;
}

.acceso-tema button {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #43474d;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.acceso-tema button:hover { color: #001a3d; }

.acceso-tema button[aria-pressed="true"] {
    background: #ffffff;
    color: #0072c6;
    box-shadow: 0 1px 3px rgba(15, 41, 66, 0.12);
}

/* ── Modo oscuro ── */
:root.dark body.auth-page { background: #08162a; color: #e6eefb; }
:root.dark .auth-panel-left { background-color: #000d1c; }
:root.dark .auth-panel-right { background: radial-gradient(circle at 50% 0%, #0e2138 0%, #08162a 70%); }

:root.dark .auth-card {
    background: #0e2138;
    border-color: #1c3a5e;
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.45);
}

:root.dark .auth-card-title { color: #e3ecf8; }
:root.dark .auth-card-subtitle { color: #b6c2d1; }
:root.dark .auth-field-label,
:root.dark .auth-captcha-label { color: #8d96a3; }

:root.dark .auth-input-wrap input.auth-input,
:root.dark .auth-captcha-input,
:root.dark .auth-captcha-box,
:root.dark .auth-btn-validate {
    background: #0b1b30;
    border-color: #24466e;
    color: #e6eefb;
}

:root.dark .auth-input-wrap input.auth-input::placeholder,
:root.dark .auth-captcha-input::placeholder { color: #5f7187; }

:root.dark .auth-input-wrap input.auth-input.readonly-state {
    background-color: #15304f !important;
    color: #b6c2d1 !important;
}

:root.dark .auth-input-wrap input.auth-input:focus,
:root.dark .auth-captcha-input:focus {
    border-color: #5cb8ff;
    box-shadow: 0 0 0 3px rgba(92, 184, 255, 0.18);
}

:root.dark .auth-input-icon,
:root.dark .auth-btn-toggle-pw { color: #8d96a3; }

:root.dark .auth-input-wrap input.auth-input:focus ~ .auth-input-icon,
:root.dark .auth-btn-toggle-pw:hover,
:root.dark .auth-field-link,
:root.dark .auth-captcha-refresh,
:root.dark .auth-footer-text a,
:root.dark .auth-sub-footer-link a,
:root.dark .auth-btn-validate { color: #5cb8ff; }

:root.dark .auth-secure-capsule { background: rgba(0, 114, 198, 0.12); border-color: #1c3a5e; }
:root.dark .auth-secure-capsule .shield-icon,
:root.dark .auth-capsule-desc { color: #5cb8ff; }
:root.dark .auth-capsule-title { color: #e3ecf8; }

:root.dark .auth-status-badge { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.3); }
:root.dark .auth-status-text { color: #6ee7b7; }

:root.dark .auth-button,
:root.dark .auth-recovery .auth-button {
    background: linear-gradient(135deg, #1757a0 0%, #1a8fe3 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

:root.dark .auth-card-footer { border-color: #1c3a5e; color: #8d96a3; }
:root.dark .auth-sub-footer-link,
:root.dark .auth-top-back-link,
:root.dark .auth-validation-subtext { color: #b6c2d1; }
:root.dark .auth-section-header { color: #5cb8ff; background-color: rgba(0, 114, 198, 0.15); border-color: #1c3a5e; }

:root.dark .acceso-volver { color: #b6c2d1; }
:root.dark .acceso-volver:hover { color: #ffffff; }
:root.dark .acceso-tema { background: #15304f; }
:root.dark .acceso-tema button { color: #b6c2d1; }
:root.dark .acceso-tema button:hover { color: #ffffff; }
:root.dark .acceso-tema button[aria-pressed="true"] { background: #0e2138; color: #5cb8ff; }

/* Titular al tamaño del landing para que no quede bajo las tarjetas flotantes */
.auth-hero-title {
    font-size: clamp(2.25rem, 3.4vw, 3rem);
    line-height: 1.1;
}

/* Tarjetas en zigzag: dejan aire a la marca y al titular (más largo que el anterior) */
#stat-embarques { top: 31%; }
#stat-cumplimiento { top: 35%; right: 10%; }
#stat-tiempo { top: 43%; left: 8%; right: auto; }

/* Etiquetas técnicas con el gris del diseño (#74777e), más legible que el slate claro anterior */
.auth-captcha-label,
.auth-card-footer,
.auth-footer-shield,
.auth-validation-subtext { color: #74777e; }

/* Recuperar: el enlace a iniciar sesión va a la izquierda; a la derecha queda la barra (Inicio + tema) */
.auth-recovery .auth-top-back-link {
    top: 1.6rem;
    right: auto;
    left: 2.5rem;
}

/* Celular / tablet: la barra y el enlace de volver van en el flujo, arriba de la tarjeta */
@media (max-width: 900px) {
    .acceso-barra {
        position: static;
        align-self: stretch;
        justify-content: flex-end;
        margin-bottom: 1rem;
    }

    .auth-recovery .auth-top-back-link {
        position: static;
        align-self: flex-start;
        margin-bottom: 1rem;
    }
}

/* Celular angosto: la tarjeta cabe en 320-480 px sin desplazamiento lateral */
@media (max-width: 480px) {
    .auth-card {
        padding: 1.75rem 1.25rem;
        border-radius: 1.25rem;
    }

    .auth-captcha-row {
        flex-wrap: wrap;
    }

    .auth-captcha-input {
        min-width: 0;
        flex: 1 1 8rem;
    }
}

/* ════════════════════════════════════════════
   LOGIN: imagen más amplia y todo dentro de la pantalla (sin scroll)
   ════════════════════════════════════════════ */
@media (min-width: 901px) {
    body.auth-login {
        height: 100vh;
        overflow: hidden;
    }

    .auth-login .auth-panel-container,
    .auth-login .auth-panel-left,
    .auth-login .auth-panel-right {
        height: 100vh;
        min-height: 0;
    }

    /* El panel del mapa ocupa ~60 % del ancho */
    .auth-login .auth-panel-left { flex: 1.6; }
    .auth-login .auth-panel-right {
        flex: 1;
        min-width: 460px;
        padding: 1.25rem 2rem 3.25rem;
        overflow-y: auto; /* solo en pantallas muy bajas; el resto no necesita desplazarse */
    }

    /* Tarjeta compacta */
    .auth-login .auth-card { padding: 1.75rem 2.25rem; }
    .auth-login .auth-card-title { font-size: 1.65rem; margin-bottom: 0.3rem; }
    .auth-login .auth-card-subtitle { margin-bottom: 1.25rem; }
    .auth-login .auth-field { margin-bottom: 0.85rem; }
    .auth-login .auth-captcha-box { padding: 0.75rem 1rem; margin-bottom: 0.85rem; }
    .auth-login .auth-secure-capsule { padding: 0.6rem 0.9rem; margin-bottom: 1rem; }
    .auth-login .auth-card-footer { margin-top: 1rem; padding-top: 0.75rem; }
    .auth-login #auth-register-footer { bottom: 1.1rem; }
}

/* Pantallas bajas (≤ 880 px de alto): tarjetas en la franja superior y titular algo menor */
@media (min-width: 901px) and (max-height: 880px) {
    .auth-login #stat-despachos     { top: 8%;  right: 7%; left: auto; }
    .auth-login #stat-cumplimiento  { top: 20%; right: 7%; left: auto; }
    .auth-login #stat-tiempo        { top: 32%; right: 7%; left: auto; }
    .auth-login #stat-embarques     { top: 35%; left: 8%;  right: auto; }
    .auth-login .auth-hero-title    { font-size: 2.4rem; margin-bottom: 0.6rem; }
    .auth-login .auth-hero-block    { padding-bottom: 0.5rem; }
}

/* Login sin marco: el formulario va directo sobre el panel (sin borde, sombra ni fondo de tarjeta) */
.auth-login .auth-card,
:root.dark .auth-login .auth-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Botón estándar (igual que en el panel): azul plano, radio 12 px, sin sombra ni mayúsculas espaciadas */
.auth-button,
.auth-recovery .auth-button,
:root.dark .auth-button,
:root.dark .auth-recovery .auth-button {
    background: #0072c6;
    border-radius: 12px;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.95rem;
    font-weight: 700;
}
.auth-button:hover,
.auth-login .auth-button:hover,
.auth-recovery .auth-button:hover {
    background: #0b3566;
    box-shadow: none;
}
:root.dark .auth-button:hover { background: #1a8fe3; }