/* ==================================================================
   cssexterno.css · Capa visual de las páginas públicas de /secure
   ------------------------------------------------------------------
   Inspirada en la composición de DeepInfra: fondo nocturno, navegación
   encapsulada, portadas contenidas, tarjetas con borde fino y etiquetas
   redondeadas. No cambia contenido, estructura ni comportamiento.

   Fidelity conserva azul/cian. DoYouWin conserva negro/dorado.
   Esta hoja carga después de publico.css y del estilo propio del login.
   ================================================================== */

:root {
    --ext-fondo: #040320;
    --ext-fondo-2: #07062A;
    --ext-superficie: #0C0B31;
    --ext-superficie-2: #151442;
    --ext-superficie-3: #1B1A50;
    --ext-borde: rgba(105, 124, 235, 0.38);
    --ext-borde-suave: rgba(151, 161, 255, 0.18);
    --ext-tinta: #F8F9FF;
    --ext-tinta-2: rgba(239, 242, 255, 0.78);
    --ext-tinta-3: rgba(220, 225, 250, 0.58);
    --ext-acento: #6674FF;
    --ext-acento-claro: #8792FF;
    --ext-cian: #4CE7FF;
    --ext-sobre-acento: #FFFFFF;
    --ext-hero-1: #08062E;
    --ext-hero-2: #0A0A3C;
    --ext-hero-3: #101554;
    --ext-radio: 24px;
    --ext-radio-tarjeta: 14px;
    --ext-sombra: 0 18px 60px rgba(0, 0, 0, 0.28);
    --ext-sombra-tarjeta: 0 8px 18px -14px rgba(151, 161, 255, 0.58), 0 2px 6px -4px rgba(151, 161, 255, 0.42);

    /* Paleta de publico.css, llevada al sistema nocturno. */
    --pb-indigo: var(--ext-acento);
    --pb-indigo-oscuro: var(--ext-acento-claro);
    --pb-indigo-claro: #9BA4FF;
    --pb-noche: var(--ext-fondo);
    --pb-cian: var(--ext-cian);
    --pb-cian-texto: var(--ext-cian);
    --pb-cian-suave: rgba(76, 231, 255, 0.12);
    --pb-indigo-suave: rgba(102, 116, 255, 0.14);
    --pb-fondo: var(--ext-fondo);
    --pb-superficie: var(--ext-superficie);
    --pb-borde: var(--ext-borde-suave);
    --pb-borde-fuerte: var(--ext-borde);
    --pb-tinta: var(--ext-tinta);
    --pb-tinta-2: var(--ext-tinta-2);
    --pb-tinta-3: var(--ext-tinta-3);
    --pb-sobre-oscuro: var(--ext-tinta);
    --pb-sobre-oscuro-2: var(--ext-tinta-2);
    --pb-ok: #58D9A2;
    --pb-ok-suave: rgba(88, 217, 162, 0.12);
    --pb-error: #FF8493;
    --pb-error-suave: rgba(255, 132, 147, 0.12);
    --pb-aviso: #FFB767;
    --pb-aviso-suave: rgba(255, 183, 103, 0.12);
    --pb-radio: var(--ext-radio-tarjeta);
    --pb-radio-sm: 10px;
    --pb-sombra: var(--ext-sombra-tarjeta);
    --pb-sombra-alta: var(--ext-sombra);

    /* Paleta que usa el login en su estilo integrado. */
    --primary: var(--ext-acento);
    --primary-dark: var(--ext-fondo);
    --primary-light: var(--ext-acento-claro);
    --accent: var(--ext-cian);
    --accent-hover: #83EEFF;
    --accent-border: #1FC7E4;
    --surface: var(--ext-superficie);
    --surface-glass: rgba(12, 11, 49, 0.96);
    --text: var(--ext-tinta);
    --text-light: var(--ext-tinta-2);
    --border: var(--ext-borde);
    --shadow: rgba(0, 0, 0, 0.32);
}

html[data-tema="doyouwin"] {
    --ext-fondo: #050505;
    --ext-fondo-2: #0A0A0A;
    --ext-superficie: #111111;
    --ext-superficie-2: #181818;
    --ext-superficie-3: #202020;
    --ext-borde: rgba(245, 197, 24, 0.34);
    --ext-borde-suave: rgba(245, 197, 24, 0.16);
    --ext-tinta: #F7F7F3;
    --ext-tinta-2: rgba(247, 247, 243, 0.76);
    --ext-tinta-3: rgba(247, 247, 243, 0.54);
    --ext-acento: #F5C518;
    --ext-acento-claro: #FFD84D;
    --ext-cian: #F5C518;
    --ext-sobre-acento: #090909;
    --ext-hero-1: #080808;
    --ext-hero-2: #0D0D0D;
    --ext-hero-3: #171300;

    --pb-indigo: var(--ext-acento);
    --pb-indigo-oscuro: var(--ext-acento-claro);
    --pb-indigo-claro: #FFE27A;
    --pb-noche: var(--ext-fondo);
    --pb-cian: var(--ext-cian);
    --pb-cian-texto: var(--ext-acento-claro);
    --pb-cian-suave: rgba(245, 197, 24, 0.12);
    --pb-indigo-suave: rgba(245, 197, 24, 0.12);
    --pb-fondo: var(--ext-fondo);
    --pb-superficie: var(--ext-superficie);
    --pb-borde: var(--ext-borde-suave);
    --pb-borde-fuerte: var(--ext-borde);
    --pb-tinta: var(--ext-tinta);
    --pb-tinta-2: var(--ext-tinta-2);
    --pb-tinta-3: var(--ext-tinta-3);
    --pb-sobre-oscuro: var(--ext-tinta);
    --pb-sobre-oscuro-2: var(--ext-tinta-2);

    --primary: var(--ext-acento);
    --primary-dark: var(--ext-fondo);
    --primary-light: var(--ext-acento-claro);
    --accent: var(--ext-acento);
    --accent-hover: var(--ext-acento-claro);
    --accent-border: #C99D00;
    --surface: var(--ext-superficie);
    --surface-glass: rgba(17, 17, 17, 0.97);
    --text: var(--ext-tinta);
    --text-light: var(--ext-tinta-2);
    --border: var(--ext-borde);
}

body {
    color: var(--ext-tinta);
    background:
        radial-gradient(70rem 42rem at 12% -8%, rgba(72, 89, 210, 0.22), transparent 62%),
        radial-gradient(58rem 36rem at 95% 16%, rgba(41, 99, 210, 0.16), transparent 64%),
        var(--ext-fondo);
}

html[data-tema="doyouwin"] body {
    background:
        radial-gradient(64rem 38rem at 14% -6%, rgba(245, 197, 24, 0.10), transparent 62%),
        radial-gradient(52rem 34rem at 96% 18%, rgba(154, 118, 0, 0.08), transparent 66%),
        var(--ext-fondo);
}

/* ── Navegación encapsulada ─────────────────────────────────────── */
.cabecera {
    top: 0;
    padding-top: 14px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.cabecera.con-sombra {
    border: 0;
    box-shadow: none;
}

.cabecera-fila {
    min-height: 66px;
    padding: 9px 18px;
    border: 1px solid var(--ext-borde-suave);
    border-radius: 999px;
    background: rgba(21, 20, 66, 0.88);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.20);
    backdrop-filter: saturate(1.25) blur(18px);
    -webkit-backdrop-filter: saturate(1.25) blur(18px);
}

html[data-tema="doyouwin"] .cabecera,
html[data-tema="doyouwin"] .cabecera.con-sombra { background: transparent; box-shadow: none; }
html[data-tema="doyouwin"] .cabecera-fila { background: rgba(17, 17, 17, 0.92); }

.marca-fidelity { color: var(--ext-tinta); }
.marca-crm { color: var(--ext-cian); }
.menu a:not(.btn) { color: var(--ext-tinta-2); }
.menu a:not(.btn):hover,
.menu a[aria-current="page"] { color: var(--ext-tinta); background: rgba(102, 116, 255, 0.14); }

html[data-tema="doyouwin"] .menu a:not(.btn):hover,
html[data-tema="doyouwin"] .menu a[aria-current="page"] { color: var(--ext-acento-claro); background: rgba(245, 197, 24, 0.10); }

.menu-boton {
    color: var(--ext-tinta);
    background: var(--ext-superficie-2);
    border-color: var(--ext-borde);
}

/* ── Botones y etiquetas ────────────────────────────────────────── */
.btn,
.etiqueta,
.chapa,
.redes a {
    border-radius: 999px;
}

.btn { border-width: 1px; }
.btn-indigo,
.btn-cian {
    color: var(--ext-sobre-acento);
    background: linear-gradient(135deg, var(--ext-acento-claro), var(--ext-acento));
    box-shadow: 0 10px 26px rgba(83, 103, 238, 0.28);
}

.btn-indigo:hover,
.btn-cian:hover {
    color: var(--ext-sobre-acento);
    background: linear-gradient(135deg, var(--ext-acento-claro), var(--ext-acento));
    box-shadow: 0 13px 34px rgba(83, 103, 238, 0.38);
}

html[data-tema="doyouwin"] .btn-indigo,
html[data-tema="doyouwin"] .btn-cian,
html[data-tema="doyouwin"] .btn-indigo:hover,
html[data-tema="doyouwin"] .btn-cian:hover {
    color: var(--ext-sobre-acento);
    background: linear-gradient(135deg, var(--ext-acento-claro), var(--ext-acento));
    box-shadow: 0 10px 28px rgba(245, 197, 24, 0.20);
}

.btn-borde,
.btn-cristal {
    color: var(--ext-tinta);
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--ext-borde);
}

.btn-borde:hover,
.btn-cristal:hover {
    color: var(--ext-tinta);
    background: rgba(255, 255, 255, 0.075);
    border-color: var(--ext-acento-claro);
}

.etiqueta,
.chapa {
    color: var(--ext-acento-claro);
    background: rgba(102, 116, 255, 0.12);
    border-color: rgba(135, 146, 255, 0.32);
}

html[data-tema="doyouwin"] .etiqueta,
html[data-tema="doyouwin"] .chapa { color: var(--ext-acento-claro); background: rgba(245, 197, 24, 0.10); border-color: rgba(245, 197, 24, 0.30); }

/* ── Portadas contenidas ────────────────────────────────────────── */
.portada {
    width: calc(100% - 48px);
    max-width: var(--pb-ancho);
    margin: 16px auto 0;
    padding-block: 76px 92px;
    border: 1px solid var(--ext-borde);
    border-radius: var(--ext-radio);
    background:
        radial-gradient(70% 120% at 96% 15%, rgba(61, 116, 224, 0.34), transparent 62%),
        radial-gradient(62% 100% at 5% 100%, rgba(76, 57, 184, 0.30), transparent 65%),
        linear-gradient(135deg, var(--ext-hero-1) 0%, var(--ext-hero-2) 52%, var(--ext-hero-3) 100%);
    box-shadow: inset 0 12px 54px rgba(86, 153, 219, 0.26), inset 0 -26px 20px rgba(76, 89, 211, 0.06), var(--ext-sombra);
}

.portada.compacta { padding-block: 64px 76px; }
.portada::before { opacity: 0.58; background-size: 52px 52px; }
.portada-centro { max-width: 860px; }
.portada h1 { font-weight: 600; letter-spacing: -0.035em; }
.portada h1 .resalte { color: var(--ext-cian); }

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

/* ── Superficies, tarjetas y bloques ────────────────────────────── */
.cifras,
.tarjeta,
.pregunta,
.formulario-caja,
.mapa,
.indice,
.fase,
.cita,
.destacado,
.opcion-check {
    background: var(--ext-superficie);
    border-color: var(--ext-borde-suave);
    box-shadow: var(--ext-sombra-tarjeta);
}

.cifras {
    margin-top: -42px;
    border-radius: var(--ext-radio-tarjeta);
}

.cifra + .cifra,
.dato + .dato,
.tabla-legal th,
.tabla-legal td { border-color: var(--ext-borde-suave); }

.tarjeta,
.pregunta,
.fase { border-radius: var(--ext-radio-tarjeta); }
.tarjeta.viva:hover,
a.tarjeta:hover { border-color: var(--ext-borde); box-shadow: var(--ext-sombra); }

.seccion { padding-block: 76px; }
.seccion.blanca {
    background: rgba(12, 11, 49, 0.44);
    border-color: var(--ext-borde-suave);
}
html[data-tema="doyouwin"] .seccion.blanca { background: rgba(17, 17, 17, 0.58); }

.panel-oscuro,
.llamada {
    border: 1px solid var(--ext-borde);
    border-radius: var(--ext-radio);
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(76, 100, 220, 0.22), transparent 64%),
        var(--ext-superficie);
    box-shadow: var(--ext-sombra);
}

html[data-tema="doyouwin"] .panel-oscuro,
html[data-tema="doyouwin"] .llamada {
    border-color: var(--ext-borde);
    background: radial-gradient(70% 120% at 100% 0%, rgba(245, 197, 24, 0.10), transparent 64%), var(--ext-superficie);
}

.icono { background: var(--ext-superficie-2); border-color: var(--ext-borde-suave); }
.icono.oscuro,
html[data-tema="doyouwin"] .icono.oscuro { background: var(--ext-superficie-3); color: var(--ext-cian); border-color: var(--ext-borde-suave); }
.cliente,
.ficha-fila { background: rgba(255, 255, 255, 0.035); border-color: var(--ext-borde-suave); }

.tabla-legal { border-color: var(--ext-borde-suave); }
.tabla-legal th,
.nota { background: var(--ext-superficie-2); }

/* ── Formularios ────────────────────────────────────────────────── */
.campo input,
.campo select,
.campo textarea,
.opcion-check,
.ventana {
    color: var(--ext-tinta);
    background: var(--ext-superficie-2);
    border-color: var(--ext-borde-suave);
}

.campo input::placeholder,
.campo textarea::placeholder { color: var(--ext-tinta-3); }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--ext-borde); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--ext-acento-claro); box-shadow: 0 0 0 4px rgba(102, 116, 255, 0.16); }

html[data-tema="doyouwin"] .campo input:focus,
html[data-tema="doyouwin"] .campo select:focus,
html[data-tema="doyouwin"] .campo textarea:focus { box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.14); }

/* ── Pie ────────────────────────────────────────────────────────── */
.pie {
    margin-top: 64px;
    background: rgba(7, 6, 42, 0.92);
    border-top: 1px solid var(--ext-borde-suave);
}
html[data-tema="doyouwin"] .pie { background: var(--ext-fondo-2); }
.pie-final { border-color: var(--ext-borde-suave); }

/* ── Login: la misma familia visual ─────────────────────────────── */
.login-wrapper {
    max-width: 1180px;
    min-height: 660px;
    overflow: hidden;
    background: var(--ext-superficie);
    border: 1px solid var(--ext-borde);
    border-radius: var(--ext-radio);
    box-shadow: inset 0 12px 54px rgba(86, 153, 219, 0.12), var(--ext-sombra);
}

.brand-panel {
    background:
        radial-gradient(90% 70% at 80% 0%, rgba(76, 114, 226, 0.34), transparent 65%),
        linear-gradient(145deg, var(--ext-hero-1), var(--ext-hero-3));
    border-right: 1px solid var(--ext-borde-suave);
}

.brand-panel::before {
    opacity: 0.52;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
}

.logo-container {
    background: rgba(12, 11, 49, 0.74);
    border: 1px solid var(--ext-borde-suave);
    border-radius: 18px;
    box-shadow: var(--ext-sombra-tarjeta);
}

.brand-fidelity { color: var(--ext-tinta); }

.feature-icon {
    color: var(--ext-cian);
    background: var(--pb-cian-suave);
    border: 1px solid var(--ext-borde-suave);
}

.feature-icon svg {
    width: 21px;
    height: 21px;
    display: block;
}

.login-panel { background: var(--ext-superficie); }
.login-header h2,
label { color: var(--ext-tinta); }
.login-header p,
.footer-link { color: var(--ext-tinta-2); }

input[type="text"],
input[type="password"] {
    color: var(--ext-tinta);
    background: var(--ext-superficie-2);
    border-color: var(--ext-borde-suave);
    border-radius: 10px;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--ext-acento-claro);
    background: var(--ext-superficie-3);
    box-shadow: 0 0 0 4px rgba(102, 116, 255, 0.16);
}

input::placeholder { color: var(--ext-tinta-3); }
.login-panel input:-webkit-autofill,
.login-panel input:-webkit-autofill:hover,
.login-panel input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ext-tinta);
    caret-color: var(--ext-tinta);
    -webkit-box-shadow: 0 0 0 1000px var(--ext-superficie-2) inset;
    transition: background-color 9999s ease-out 0s;
}
.input-icon { color: var(--ext-acento-claro); }
.input-icon svg { width: 18px; height: 18px; display: block; }
.btn-login {
    color: var(--ext-sobre-acento);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ext-acento-claro), var(--ext-acento));
    box-shadow: 0 10px 28px rgba(83, 103, 238, 0.30);
}
.btn-login:hover { box-shadow: 0 14px 36px rgba(83, 103, 238, 0.42); }
.login-footer { border-color: var(--ext-borde-suave); }
.footer-link:hover { color: var(--ext-tinta); }
.powered-by { opacity: 0.72; }
.powered-by img { filter: brightness(0) invert(1); opacity: 0.72; }

html[data-tema="doyouwin"] .login-wrapper { box-shadow: inset 0 12px 54px rgba(245, 197, 24, 0.06), var(--ext-sombra); }
html[data-tema="doyouwin"] .brand-panel {
    background: radial-gradient(90% 70% at 80% 0%, rgba(245, 197, 24, 0.12), transparent 65%), linear-gradient(145deg, var(--ext-fondo-2), var(--ext-hero-3));
    border-color: var(--ext-borde-suave);
}
html[data-tema="doyouwin"] .logo-container { background: rgba(8, 8, 8, 0.76); border-color: var(--ext-borde-suave); }
html[data-tema="doyouwin"] .login-panel { background: var(--ext-superficie); }
html[data-tema="doyouwin"] input[type="text"],
html[data-tema="doyouwin"] input[type="password"] { color: var(--ext-tinta); background: var(--ext-superficie-2); border-color: var(--ext-borde-suave); }
html[data-tema="doyouwin"] input[type="text"]:focus,
html[data-tema="doyouwin"] input[type="password"]:focus { background: var(--ext-superficie-3); border-color: var(--ext-acento); box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.14); }
html[data-tema="doyouwin"] .btn-login,
html[data-tema="doyouwin"] .btn-login:hover { color: var(--ext-sobre-acento); background: linear-gradient(135deg, var(--ext-acento-claro), var(--ext-acento)); box-shadow: 0 10px 28px rgba(245, 197, 24, 0.20); }
html[data-tema="doyouwin"] .login-footer { border-color: var(--ext-borde-suave); }
html[data-tema="doyouwin"] .footer-link { color: var(--ext-tinta-2); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .cabecera { padding: 10px 12px 0; }
    .cabecera-fila { border-radius: 18px; }
    .menu {
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        background: var(--ext-superficie);
        border-color: var(--ext-borde);
        box-shadow: var(--ext-sombra);
    }
    .portada { width: calc(100% - 24px); margin-top: 12px; padding-block: 64px 76px; }
    .portada.compacta { padding-block: 54px 64px; }
    .login-wrapper { min-height: 0; }
    .brand-panel { border-right: 0; border-bottom: 1px solid var(--ext-borde-suave); }
}

@media (max-width: 640px) {
    .envoltura { padding-inline: 18px; }
    .cabecera-fila { min-height: 58px; padding: 7px 10px 7px 14px; }
    .marca-simbolo { width: 34px; height: 34px; }
    .marca-texto { font-size: 17px; }
    .marca-dyw img { height: 32px; }
    .portada { border-radius: 18px; padding-block: 50px 60px; }
    .portada.compacta { padding-block: 46px 54px; }
    .portada h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
    .cifras { margin-top: 18px; }
    .seccion { padding-block: 58px; }
    .tarjeta,
    .formulario-caja { padding: 22px; }
    .login-wrapper { border-radius: 18px; }
    .login-panel { padding-inline: 24px; }
}

@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;
    }
}