/* ============================================================
   CARDONA-FLIX · Temas (claros, legibles) · v2 2026-10-27
   Mantiene el fondo y las letras ORIGINALES (todo se lee).
   Solo cambia: barra lateral, botones, acentos y tipografía.
   Activación: <html data-cf-theme="...">
   clasico (original) | midnight | emerald | neon | turquoise
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&family=Plus+Jakarta+Sans:wght@400;600;800&family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Sans:wght@400;600;700&display=swap');

/* 1 · CINE MEDIANOCHE — acento coral/rosa, barra vino */
html[data-cf-theme="midnight"]{
 --blue:#e11d48;--violet:#f43f5e;
 --side-blue-1:#1a0820;--side-blue-2:#4a1030;--side-blue-3:#6a1238;--nav:#1a0820}
html[data-cf-theme="midnight"] body{font-family:'Sora',system-ui,sans-serif}
html[data-cf-theme="midnight"] .auth-showcase{background:linear-gradient(135deg,#0a0f24,#20123f 52%,#3a0f2e)!important}

/* 2 · ESMERALDA Y ORO — acento esmeralda/oro, barra verde */
html[data-cf-theme="emerald"]{
 --blue:#059669;--violet:#b8860b;
 --side-blue-1:#07271c;--side-blue-2:#0b3a28;--side-blue-3:#13341f;--nav:#07271c}
html[data-cf-theme="emerald"] body{font-family:'Plus Jakarta Sans',system-ui,sans-serif}
html[data-cf-theme="emerald"] .auth-showcase{background:linear-gradient(135deg,#04140f,#0b2e22 52%,#143a26)!important}

/* 3 · MORADO NEÓN — acento morado/magenta, barra morada */
html[data-cf-theme="neon"]{
 --blue:#7c3aed;--violet:#db2777;
 --side-blue-1:#1b0833;--side-blue-2:#2a0a4a;--side-blue-3:#4a0e5e;--nav:#1b0833}
html[data-cf-theme="neon"] body{font-family:'Space Grotesk',system-ui,sans-serif}
html[data-cf-theme="neon"] .auth-showcase{background:linear-gradient(135deg,#0d0618,#2a0a4a 52%,#4a0e5e)!important}

/* 4 · TURQUESA TECH — acento turquesa/cian, barra teal */
html[data-cf-theme="turquoise"]{
 --blue:#0d9488;--violet:#0891b2;
 --side-blue-1:#052a2a;--side-blue-2:#073640;--side-blue-3:#0a2a3a;--nav:#052a2a}
html[data-cf-theme="turquoise"] body{font-family:'IBM Plex Sans',system-ui,sans-serif}
html[data-cf-theme="turquoise"] .auth-showcase{background:linear-gradient(135deg,#041619,#073640 52%,#0a2a3a)!important}

/* Botón principal y enlace de acceso: usan los dos colores del tema */
html[data-cf-theme="midnight"] .btn-primary,html[data-cf-theme="midnight"] .btn.btn-primary,html[data-cf-theme="midnight"] .auth-main-btn,
html[data-cf-theme="emerald"] .btn-primary,html[data-cf-theme="emerald"] .btn.btn-primary,html[data-cf-theme="emerald"] .auth-main-btn,
html[data-cf-theme="neon"] .btn-primary,html[data-cf-theme="neon"] .btn.btn-primary,html[data-cf-theme="neon"] .auth-main-btn,
html[data-cf-theme="turquoise"] .btn-primary,html[data-cf-theme="turquoise"] .btn.btn-primary,html[data-cf-theme="turquoise"] .auth-main-btn{
 background:linear-gradient(90deg,var(--blue),var(--violet))!important;color:#fff!important;border:0!important}

/* Botón flotante del selector (abajo a la DERECHA, no tapa el menú) */
#cfThemeFab{position:fixed;right:18px;bottom:18px;z-index:2147483000;width:48px;height:48px;border-radius:50%;
 border:0;cursor:pointer;color:#fff;font-size:20px;display:grid;place-items:center;
 background:linear-gradient(135deg,var(--blue,#1967ff),var(--violet,#6937ff));box-shadow:0 8px 22px rgba(0,0,0,.28)}
#cfThemePanel{position:fixed;right:18px;bottom:76px;z-index:2147483000;display:none;width:250px;padding:14px;
 border-radius:16px;background:#fff;border:1px solid #e5e9f2;color:#182033;box-shadow:0 20px 50px rgba(20,30,70,.25);font-family:system-ui,sans-serif}
#cfThemePanel.show{display:block}
#cfThemePanel h4{margin:0 0 4px;font-size:14px;color:#182033}
#cfThemePanel p{margin:0 0 10px;font-size:11px;color:#667085}
.cf-theme-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;margin:5px 0;border-radius:11px;
 border:1px solid #e5e9f2;background:#fff;color:#182033;cursor:pointer;font-size:13px;font-weight:700;text-align:left}
.cf-theme-opt:hover{border-color:#9aa6bf}
.cf-theme-opt.on{outline:2px solid #1967ff}
.cf-theme-sw{width:34px;height:22px;border-radius:7px;flex:0 0 34px;border:1px solid #0001}