/* ==================================================================
   zcli_externo.css · Capa visual común de la zona de clientes
   ------------------------------------------------------------------
   Misma familia visual que las páginas públicas: fondo nocturno,
   navegación encapsulada, portadas contenidas y tarjetas con borde fino.
   No altera estructura, comportamiento, AJAX ni estados funcionales.
   Fidelity conserva azul/cian; DoYouWin conserva negro/dorado.
   ================================================================== */

:root {
    --zext-fondo: #11172D;
    --zext-fondo-2: #171E38;
    --zext-superficie: #1B2442;
    --zext-superficie-2: #253052;
    --zext-superficie-3: #303D63;
    --zext-borde: rgba(125, 145, 255, 0.44);
    --zext-borde-suave: rgba(173, 183, 255, 0.24);
    --zext-tinta: #F8F9FF;
    --zext-tinta-2: rgba(239, 242, 255, 0.78);
    --zext-tinta-3: rgba(220, 225, 250, 0.58);
    --zext-acento: #6674FF;
    --zext-acento-claro: #8792FF;
    --zext-cian: #4CE7FF;
    --zext-sobre-acento: #FFFFFF;
    --zext-ok: #58D9A2;
    --zext-ok-fondo: rgba(88, 217, 162, 0.12);
    --zext-aviso: #FFB767;
    --zext-aviso-fondo: rgba(255, 183, 103, 0.12);
    --zext-error: #FF8493;
    --zext-error-fondo: rgba(255, 132, 147, 0.12);
    --zext-info-fondo: rgba(76, 231, 255, 0.10);
    --zext-hero-1: #192044;
    --zext-hero-2: #202B53;
    --zext-hero-3: #293A6B;
    --zext-radio: 24px;
    --zext-radio-tarjeta: 14px;
    --zext-sombra: 0 18px 60px rgba(0, 0, 0, 0.28);
    --zext-sombra-tarjeta: 0 8px 18px -14px rgba(151, 161, 255, 0.58), 0 2px 6px -4px rgba(151, 161, 255, 0.42);

    /* Las pantallas ya consumen estas variables. La capa cambia sus valores. */
    --zcli-primary: var(--zext-superficie-2);
    --zcli-accent: var(--zext-acento);
    --zcli-accent-light: var(--zext-acento-claro);
    --zcli-success: var(--zext-ok);
    --zcli-warning: var(--zext-aviso);
    --zcli-danger: var(--zext-error);
    --zcli-surface: var(--zext-fondo);
    --zcli-card: var(--zext-superficie);
    --zcli-text: var(--zext-tinta);
    --zcli-text-muted: var(--zext-tinta-2);
    --zcli-border: var(--zext-borde-suave);
    --zcli-radius: var(--zext-radio-tarjeta);
    --zcli-shadow: var(--zext-sombra-tarjeta);
    --zcli-shadow-hover: var(--zext-sombra);
}

html[data-tema="doyouwin"] {
    --zext-fondo: #171716;
    --zext-fondo-2: #1D1C1A;
    --zext-superficie: #252421;
    --zext-superficie-2: #302E29;
    --zext-superficie-3: #3A372F;
    --zext-borde: rgba(245, 197, 24, 0.40);
    --zext-borde-suave: rgba(245, 197, 24, 0.22);
    --zext-tinta: #F7F7F3;
    --zext-tinta-2: rgba(247, 247, 243, 0.76);
    --zext-tinta-3: rgba(247, 247, 243, 0.54);
    --zext-acento: #F5C518;
    --zext-acento-claro: #FFD84D;
    --zext-cian: #F5C518;
    --zext-sobre-acento: #090909;
    --zext-hero-1: #24231F;
    --zext-hero-2: #2D2B25;
    --zext-hero-3: #3B3420;
}

* { scrollbar-color: var(--zext-borde) var(--zext-fondo-2); }

body {
    color: var(--zext-tinta);
    background:
        radial-gradient(circle at 12% 8%, rgba(103, 119, 228, 0.24), transparent 28rem),
        radial-gradient(circle at 88% 28%, rgba(62, 190, 224, 0.15), transparent 30rem),
        var(--zext-fondo);
}

html[data-tema="doyouwin"] body {
    background:
        radial-gradient(circle at 12% 8%, rgba(245, 197, 24, 0.13), transparent 28rem),
        radial-gradient(circle at 88% 28%, rgba(173, 132, 0, 0.11), transparent 30rem),
        var(--zext-fondo);
}

/* ── Acceso ───────────────────────────────────────────────────── */
.login-card {
    max-width: 460px;
    margin: 24px;
    background: var(--zext-superficie);
    border: 1px solid var(--zext-borde);
    border-radius: var(--zext-radio);
    box-shadow: inset 0 12px 54px rgba(86, 153, 219, 0.10), var(--zext-sombra);
}

.login-header {
    padding: 2.25rem 2rem;
    background:
        radial-gradient(80% 150% at 100% 0%, rgba(76, 231, 255, 0.18), transparent 65%),
        linear-gradient(135deg, var(--zext-hero-1), var(--zext-hero-3));
    border-bottom: 1px solid var(--zext-borde-suave);
}

html[data-tema="doyouwin"] .login-header {
    background:
        radial-gradient(80% 150% at 100% 0%, rgba(245, 197, 24, 0.14), transparent 65%),
        linear-gradient(135deg, var(--zext-hero-1), var(--zext-hero-3));
}

.login-header h2 { color: var(--zext-tinta); font-weight: 700; letter-spacing: -0.025em; }
.login-header h2 i { color: var(--zext-cian); }
.login-body { color: var(--zext-tinta); background: var(--zext-superficie); }
.login-body .text-muted { color: var(--zext-tinta-2) !important; }
.btn-zcli {
    color: var(--zext-sobre-acento);
    background: linear-gradient(135deg, var(--zext-acento-claro), var(--zext-acento));
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(83, 103, 238, 0.28);
}
html[data-tema="doyouwin"] .btn-zcli { box-shadow: 0 10px 28px rgba(245, 197, 24, 0.18); }

/* ── Navegación encapsulada ───────────────────────────────────── */
.zcli-navbar,
.zcli-topbar {
    width: calc(100% - 32px);
    max-width: 1180px;
    margin: 14px auto 0;
    top: 14px;
    color: var(--zext-tinta);
    background: rgba(27, 36, 66, 0.90);
    border: 1px solid var(--zext-borde-suave);
    border-radius: 18px;
    box-shadow: var(--zext-sombra-tarjeta);
    backdrop-filter: blur(16px);
}

html[data-tema="doyouwin"] .zcli-navbar,
html[data-tema="doyouwin"] .zcli-topbar { background: rgba(37, 36, 33, 0.94); }

.zcli-navbar-inner { min-height: 58px; padding: 0.55rem 0.85rem; }
.zcli-topbar { padding: 0.55rem 0.75rem; }
.zcli-brand,
.zcli-topbar-inner { color: var(--zext-tinta); }
.zcli-brand-icon,
.zcli-user-avatar {
    color: var(--zext-cian);
    background: var(--zext-info-fondo);
    border: 1px solid var(--zext-borde-suave);
}
.zcli-nav a { color: var(--zext-tinta-2); border: 1px solid transparent; border-radius: 10px; }
.zcli-nav a:hover { color: var(--zext-tinta); background: var(--zext-superficie-2); border-color: var(--zext-borde-suave); }
.zcli-nav a.active {
    color: var(--zext-tinta);
    background: var(--zext-superficie-3);
    border-color: var(--zext-borde-suave);
    box-shadow: var(--zext-sombra-tarjeta);
}
.btn-logout { color: var(--zext-tinta-2); border-color: var(--zext-borde-suave); border-radius: 999px; }
.btn-logout:hover { color: var(--zext-tinta); background: var(--zext-error-fondo); border-color: var(--zext-error); }

/* ── Portadas ──────────────────────────────────────────────────── */
.zcli-hero {
    width: calc(100% - 32px);
    max-width: 1180px;
    margin: 16px auto 0;
    padding: 2.4rem 1.5rem 3rem;
    color: var(--zext-tinta);
    background:
        radial-gradient(70% 120% at 96% 15%, rgba(61, 116, 224, 0.30), transparent 62%),
        radial-gradient(62% 100% at 5% 100%, rgba(76, 57, 184, 0.26), transparent 65%),
        linear-gradient(135deg, var(--zext-hero-1), var(--zext-hero-2) 52%, var(--zext-hero-3));
    border: 1px solid var(--zext-borde);
    border-radius: var(--zext-radio);
    box-shadow: inset 0 12px 54px rgba(86, 153, 219, 0.22), var(--zext-sombra);
}

html[data-tema="doyouwin"] .zcli-hero {
    background:
        radial-gradient(70% 120% at 96% 15%, rgba(245, 197, 24, 0.14), transparent 62%),
        radial-gradient(62% 100% at 5% 100%, rgba(119, 91, 0, 0.16), transparent 65%),
        linear-gradient(135deg, var(--zext-hero-1), var(--zext-hero-2) 55%, var(--zext-hero-3));
    box-shadow: inset 0 12px 54px rgba(245, 197, 24, 0.08), var(--zext-sombra);
}

.zcli-hero::after { display: none; }
.zcli-hero h1 { color: var(--zext-tinta); font-weight: 700; letter-spacing: -0.025em; }
.zcli-hero p { color: var(--zext-tinta-2); opacity: 1; }
.zcli-container { color: var(--zext-tinta); }
.zcli-container > h2 { color: var(--zext-tinta); font-weight: 700 !important; letter-spacing: -0.025em; }
.zcli-container > h2 i { color: var(--zext-cian) !important; }

/* ── Tarjetas y superficies ───────────────────────────────────── */
.vehicle-card,
.form-card,
.step-card,
.wizard-card,
.info-card,
.thanks-card,
.fl-card,
.fl-kpi,
.centro-info,
.status-pill,
.option-card {
    color: var(--zext-tinta);
    background: var(--zext-superficie);
    border-color: var(--zext-borde-suave);
    box-shadow: var(--zext-sombra-tarjeta);
}

.vehicle-card:hover,
.fl-kpi:hover,
.option-card:hover { border-color: var(--zext-borde); box-shadow: var(--zext-sombra); }

.vehicle-header,
.form-card-header,
.step-header {
    color: var(--zext-tinta);
    background: var(--zext-superficie-2);
    border-color: var(--zext-borde-suave);
}

.form-card-header i,
.step-header i { color: var(--zext-cian); }
.vehicle-name,
.status-value,
.slide-question,
.option-text,
.info-title { color: var(--zext-tinta); }
.vehicle-name small,
.status-label,
.fl-muted,
.fl-kpi span,
.info-text,
.obs-helper,
.progress-step { color: var(--zext-tinta-2); }

.vehicle-plate,
.fl-plate {
    color: var(--zext-tinta);
    background: var(--zext-superficie-3);
    border: 1px solid var(--zext-borde);
}
.step-num {
    color: var(--zext-sobre-acento);
    background: linear-gradient(135deg, var(--zext-acento-claro), var(--zext-acento));
}
.fl-kpi.activo { border-color: var(--zext-acento); box-shadow: 0 0 0 2px var(--zext-acento); }

/* ── Formularios y acciones ───────────────────────────────────── */
.form-control,
.form-select,
.obs-textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="search"],
textarea,
select {
    color: var(--zext-tinta);
    background-color: var(--zext-superficie-2);
    border-color: var(--zext-borde-suave);
    border-radius: 10px;
}
.form-control:focus,
.form-select:focus,
.obs-textarea:focus,
input:focus,
textarea:focus,
select:focus {
    color: var(--zext-tinta);
    background-color: var(--zext-superficie-3);
    border-color: var(--zext-acento-claro);
    box-shadow: 0 0 0 4px rgba(102, 116, 255, 0.16);
}
html[data-tema="doyouwin"] .form-control:focus,
html[data-tema="doyouwin"] .form-select:focus,
html[data-tema="doyouwin"] .obs-textarea:focus,
html[data-tema="doyouwin"] input:focus,
html[data-tema="doyouwin"] textarea:focus,
html[data-tema="doyouwin"] select:focus { box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.14); }
.form-floating > label,
.form-check-label { color: var(--zext-tinta-2); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label { color: var(--zext-tinta-2); }
.form-floating > label::after { background: transparent !important; }
.form-control::placeholder,
.obs-textarea::placeholder { color: var(--zext-tinta-3); }
.login-body input:-webkit-autofill,
.login-body input:-webkit-autofill:hover,
.login-body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--zext-tinta);
    caret-color: var(--zext-tinta);
    -webkit-box-shadow: 0 0 0 1000px var(--zext-superficie-2) inset;
    transition: background-color 9999s ease-out 0s;
}
.form-check-input { background-color: var(--zext-superficie-2); border-color: var(--zext-borde); }
.form-check-input:checked { background-color: var(--zext-acento); border-color: var(--zext-acento); }

.btn-save,
.btn-cita,
.btn-next,
.btn-zcli-primary {
    color: var(--zext-sobre-acento);
    background: linear-gradient(135deg, var(--zext-acento-claro), var(--zext-acento));
    border-color: transparent;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(83, 103, 238, 0.24);
}
.btn-save:hover,
.btn-cita:hover,
.btn-next:hover:not(:disabled),
.btn-zcli-primary:hover { color: var(--zext-sobre-acento); background: linear-gradient(135deg, var(--zext-acento-claro), var(--zext-acento)); filter: brightness(1.05); }
.btn-zcli-outline,
.btn-prev {
    color: var(--zext-acento-claro);
    background: transparent;
    border-color: var(--zext-borde);
    border-radius: 999px;
}
.btn-zcli-outline:hover,
.btn-prev:hover:not(:disabled) { color: var(--zext-tinta); background: var(--zext-superficie-2); border-color: var(--zext-acento-claro); }
.btn-send { color: var(--zext-fondo); background: var(--zext-ok); }
.btn-send:hover:not(:disabled) { color: var(--zext-fondo); background: var(--zext-ok); }

/* ── Cita, estados, encuesta y flota ──────────────────────────── */
.matricula-btn,
.hour-btn,
.cal-nav button {
    color: var(--zext-tinta);
    background: var(--zext-superficie-2);
    border-color: var(--zext-borde-suave);
}
.matricula-btn:hover,
.matricula-btn.selected,
.hour-btn:hover,
.hour-btn.selected,
.cal-nav button:hover { color: var(--zext-tinta); background: var(--zext-superficie-3); border-color: var(--zext-acento-claro); }
.matricula-btn small,
.cal-day-header { color: var(--zext-tinta-2); }
.cal-day.disabled { color: var(--zext-tinta-3); }
.cal-day.available { color: var(--zext-ok); background: var(--zext-ok-fondo); border: 1px solid rgba(88, 217, 162, 0.24); }
.cal-day.available:hover { background: rgba(88, 217, 162, 0.18); }
.cal-day.selected { color: var(--zext-sobre-acento) !important; background: var(--zext-acento) !important; }
#stepConfirmar .rounded { color: var(--zext-tinta); background: var(--zext-info-fondo) !important; border-color: var(--zext-borde) !important; }

.status-icon.green,
.fl-ok { color: var(--zext-ok); background: var(--zext-ok-fondo); }
.status-icon.orange,
.fl-aviso { color: var(--zext-aviso); background: var(--zext-aviso-fondo); }
.status-icon.red,
.fl-mal { color: var(--zext-error); background: var(--zext-error-fondo); }
.status-icon.blue,
.fl-info,
.info-icon { color: var(--zext-cian); background: var(--zext-info-fondo); }
.status-icon.gray,
.fl-gris { color: var(--zext-tinta-2); background: var(--zext-superficie-2); }

.option-card:hover { background: var(--zext-superficie-2); }
.option-card.selected { background: var(--zext-superficie-3); border-color: var(--zext-acento); box-shadow: 0 0 0 3px rgba(102, 116, 255, 0.12); }
.star { color: var(--zext-borde); }
.star.lit { color: var(--zext-aviso); }
.star.preview { color: var(--zext-acento-claro); }
.star-label { color: var(--zext-acento-claro); background: var(--zext-superficie-2); }
.progress-bar-bg,
.dot { background: var(--zext-superficie-3); }
.progress-bar-fill { background: linear-gradient(90deg, var(--zext-acento), var(--zext-cian)); }
.progress-percent { color: var(--zext-cian); }
.dot.active { background: var(--zext-acento); }
.dot.done { background: var(--zext-acento-claro); }
.thanks-card { background: var(--zext-ok-fondo); border-color: rgba(88, 217, 162, 0.28); }
.thanks-title { color: var(--zext-ok); }
.thanks-text { color: var(--zext-tinta-2); }
.thanks-icon { color: var(--zext-fondo); background: var(--zext-ok); }

.fl-tabla th { color: var(--zext-tinta-2); border-color: var(--zext-borde-suave); }
.fl-tabla td,
.fl-ampl { color: var(--zext-tinta); border-color: var(--zext-borde-suave); }
.fl-paginas { color: var(--zext-tinta-2); }

/* Modal de intervenciones: conserva su estructura y solo cambia la piel. */
#modalInter { background: rgba(0, 0, 0, 0.72) !important; backdrop-filter: blur(6px); }
#modalInter > div {
    color: var(--zext-tinta);
    background: var(--zext-superficie) !important;
    border: 1px solid var(--zext-borde);
    border-radius: var(--zext-radio) !important;
    box-shadow: var(--zext-sombra);
}
#modalInter > div > div:first-child { background: var(--zext-superficie-2) !important; border-color: var(--zext-borde-suave) !important; }
#modalInter button { color: var(--zext-tinta-2) !important; }

.alert-danger { color: var(--zext-error); background: var(--zext-error-fondo); border-color: rgba(255, 132, 147, 0.30); }
.text-primary { color: var(--zext-cian) !important; }
.text-muted { color: var(--zext-tinta-2) !important; }
.text-danger { color: var(--zext-error) !important; }
a { color: var(--zext-cian); }
a:hover { color: var(--zext-acento-claro); }

/* ── Navegación móvil ──────────────────────────────────────────── */
.zcli-mobile-nav {
    color: var(--zext-tinta);
    background: rgba(27, 36, 66, 0.97);
    border-color: var(--zext-borde-suave);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
}
html[data-tema="doyouwin"] .zcli-mobile-nav { background: rgba(37, 36, 33, 0.98); }
.zcli-mobile-nav a { color: var(--zext-tinta-2); }
.zcli-mobile-nav a.active { color: var(--zext-cian); }

@media (max-width: 768px) {
    .zcli-navbar,
    .zcli-topbar,
    .zcli-hero { width: calc(100% - 20px); margin-top: 10px; border-radius: 18px; }
    .zcli-navbar { top: 10px; }
    .zcli-navbar-inner { min-height: 54px; }
    .zcli-hero { padding: 1.75rem 1rem 2rem; }
    .zcli-container { padding-inline: 10px; }
    .login-card { margin: 14px; border-radius: 18px; }
    .login-header,
    .login-body { padding: 1.5rem; }
    .vehicle-card,
    .form-card,
    .step-card,
    .wizard-card,
    .fl-card,
    .fl-kpi { border-radius: 12px; }
    .fl-tabla tr { background: var(--zext-superficie-2); border-color: var(--zext-borde-suave); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}