/*
 * 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;
    }
}