/* FASE 11.2 — Temas. Las variables (colores, tipografías, sombras) las inyecta includes/themes.php;
   aquí van los ajustes por tema y los controles comunes. "futurista" no necesita ajustes: es el diseño base. */

/* ---- Selector de apariencia para visitantes (pie de página) ---- */
.tsw{display:flex;align-items:center;gap:.5rem;font-size:.8rem;opacity:.85}
.tsw-b{width:22px;height:22px;border-radius:50%;border:2px solid rgb(var(--ov)/.35);background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);cursor:pointer;padding:0;transition:transform .2s,border-color .2s}
.tsw-b:hover{transform:scale(1.15)}.tsw-b.on{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}
.tsw-b:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* ---- Barra de vista previa (solo equipo) ---- */
.tpv{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:60;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center;padding:.6rem 1.1rem;border-radius:99px;background:var(--surface);color:var(--text);border:1px solid var(--primary);box-shadow:0 10px 40px var(--sh2);font-size:.9rem;max-width:calc(100vw - 1.5rem)}
.tpv a{color:var(--primary);font-weight:700}
@media(max-width:600px){.tpv{left:.6rem;right:5.2rem;bottom:.8rem;transform:none;border-radius:14px;justify-content:space-between;gap:.4rem .9rem;padding:.55rem .8rem;font-size:.82rem}}

/* ============================================================
   TEMAS CLAROS (Clásico y Clínico): se apagan los efectos "neón" que solo se ven bien sobre fondo oscuro
   ============================================================ */
[data-mode=light] .bub,[data-mode=light] .scan,[data-mode=light] #fx,[data-mode=light] .orb{display:none}
[data-mode=light] body::before{opacity:.5}
[data-mode=light] body::after{filter:invert(1);opacity:.5}
[data-mode=light] .cta{animation:none;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--primary) 60%,transparent)}
[data-mode=light] .cta::after{display:none}
[data-mode=light] .brand .i{filter:none}
[data-mode=light] .sec::after,[data-mode=light] .ring::after{box-shadow:none}
[data-mode=light] .nav{background:color-mix(in srgb,var(--surface) 84%,transparent)}
[data-mode=light] .card,[data-mode=light] .tcard,[data-mode=light] .chip{box-shadow:0 8px 26px -14px var(--sh2);background:color-mix(in srgb,var(--surface) 94%,transparent)}
[data-mode=light] a.card:hover{box-shadow:0 18px 36px -16px var(--sh2)}
[data-mode=light] .card::before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--primary) 8%,transparent),transparent 60%)}
[data-mode=light] .scard:hover,[data-mode=light] .scard:focus-within,[data-mode=light] .scard.open{box-shadow:0 20px 40px -18px var(--sh2)}
[data-mode=light] .wcard.act{box-shadow:0 22px 46px -18px var(--sh2)}
[data-mode=light] .scard,[data-mode=light] .gtile{color:#fff}
[data-mode=light] .phero::before{background:radial-gradient(60% 130% at 50% 0%,color-mix(in srgb,var(--primary) 9%,transparent),transparent)}
[data-mode=light] .slides::after{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 96%,transparent) 5%,color-mix(in srgb,var(--bg) 80%,transparent) 55%,color-mix(in srgb,var(--bg) 52%,transparent))}
[data-mode=light] .phero.hasbg .slides::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 93%,transparent))}
[data-mode=light] .foot{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--primary) 6%,transparent))}
[data-mode=light] .wa{box-shadow:0 8px 22px -6px #0b8f6488}

/* ============================================================
   CLÁSICO — marfil, azul marino y dorado; títulos en serif; botones rectangulares con esquinas suaves
   ============================================================ */
[data-theme=clasico] h1,[data-theme=clasico] h2,[data-theme=clasico] h3,[data-theme=clasico] h4{font-weight:700;letter-spacing:0}
[data-theme=clasico] .brand{font-weight:700;letter-spacing:.06em}
[data-theme=clasico] .hero h1{line-height:1.08}
[data-theme=clasico] .sec::after{background:var(--accent);width:72px;height:2px}
[data-theme=clasico] .cta,[data-theme=clasico] .nav nav a.cta{border-radius:8px}
[data-theme=clasico] .card,[data-theme=clasico] .tcard,[data-theme=clasico] .promo{border-radius:12px}
[data-theme=clasico] .scard,[data-theme=clasico] .wcard,[data-theme=clasico] .gtile{border-radius:14px}
[data-theme=clasico] .hello,[data-theme=clasico] .eyebrow{border-radius:6px}
[data-theme=clasico] .chip{border-radius:10px}
[data-theme=clasico] .chips li{border-radius:6px}
[data-theme=clasico] input,[data-theme=clasico] textarea,[data-theme=clasico] select{border-radius:8px}
[data-theme=clasico] .phero{border-bottom-color:color-mix(in srgb,var(--accent) 45%,transparent)}
[data-theme=clasico] .foot{border-top:2px solid color-mix(in srgb,var(--accent) 55%,transparent)}
[data-theme=clasico] .promo{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--accent) 50%,transparent)}

/* ============================================================
   CLÍNICO — blanco azulado, azul y turquesa; tipografía limpia; mucho aire y sombras suaves
   ============================================================ */
[data-theme=clinico] h1,[data-theme=clinico] h2,[data-theme=clinico] h3,[data-theme=clinico] h4{font-weight:800;letter-spacing:-.02em}
[data-theme=clinico] .brand{font-weight:800;letter-spacing:-.01em}
[data-theme=clinico] body::after{opacity:.3}
[data-theme=clinico] body::after{opacity:.3}
[data-theme=clinico] .sec::after{background:var(--accent)}
[data-theme=clinico] .card,[data-theme=clinico] .tcard{border-color:rgb(var(--ov)/.09)}
[data-theme=clinico] .eyebrow,[data-theme=clinico] .hello{background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
[data-theme=clinico] .promo{background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),color-mix(in srgb,var(--accent) 8%,var(--surface)))}

/* ============================================================
   ELEGANTE — azul noche con dorado; títulos en serif de mayor tamaño; sin esferas ni parpadeos
   ============================================================ */
[data-theme=elegante] .bub{display:none}
[data-theme=elegante] .orb{opacity:.3}
[data-theme=elegante] body::before{opacity:.6}
[data-theme=elegante] body::after{opacity:.5}
[data-theme=elegante] h1,[data-theme=elegante] h2,[data-theme=elegante] h3,[data-theme=elegante] h4{font-weight:700;letter-spacing:.005em}
[data-theme=elegante] .brand{letter-spacing:.08em}
[data-theme=elegante] .hero h1{font-size:clamp(2.7rem,5.8vw,4.8rem);line-height:1.05}
[data-theme=elegante] .phero h1{font-size:clamp(2.4rem,5.2vw,3.9rem)}
[data-theme=elegante] .wrap h2.sec,[data-theme=elegante] h2.sec{font-size:clamp(2.2rem,4.2vw,3.4rem);letter-spacing:0}
[data-theme=elegante] .card h3,[data-theme=elegante] .scard h3{font-size:1.55rem}
[data-theme=elegante] .cta,[data-theme=elegante] .nav nav a.cta{border-radius:6px;animation:none;box-shadow:0 8px 24px -10px color-mix(in srgb,var(--primary) 70%,transparent)}
[data-theme=elegante] .card,[data-theme=elegante] .tcard,[data-theme=elegante] .promo{border-radius:12px}
[data-theme=elegante] .scard,[data-theme=elegante] .wcard,[data-theme=elegante] .gtile{border-radius:14px}
[data-theme=elegante] .hello,[data-theme=elegante] .eyebrow{border-radius:6px}
[data-theme=elegante] .chips li{border-radius:6px}
[data-theme=elegante] .sec::after{height:2px;width:72px;box-shadow:none}

/* ---- Panel > Apariencia ---- */
.thgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1rem 0}
.thcard{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:.8rem;border:2px solid rgb(var(--ov)/.15);border-radius:16px;cursor:pointer;background:rgb(var(--ov)/.04);transition:border-color .2s,box-shadow .2s}
.thcard:hover{border-color:rgb(var(--ov)/.35)}
.thcard input{position:absolute;opacity:0;pointer-events:none}
.thcard:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.thcard:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:3px}
.thprev{border-radius:10px;padding:1rem;min-height:130px;display:flex;flex-direction:column;gap:.45rem;justify-content:center;border:1px solid rgb(0 0 0/.15)}
.thprev b{font-size:1.45rem;line-height:1.1}
.thbtn{display:inline-block;padding:.35rem .9rem;font-size:.8rem;font-weight:600;width:max-content}
.thsw{display:flex;gap:.35rem}.thsw i{width:20px;height:20px;border-radius:50%;border:1px solid rgb(var(--ov)/.3)}
.thinfo p{margin:.2rem 0 0;font-size:.9rem;opacity:.8}
.thcard .mini{align-self:flex-start;margin-top:auto}

/* Elegante: la serif usa cifras "antiguas" (el 1 parece I y el 0 una O); se piden cifras alineadas */
[data-theme=elegante] h1,[data-theme=elegante] h2,[data-theme=elegante] h3,[data-theme=elegante] h4,[data-theme=elegante] .brand,[data-theme=elegante] .stats b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}

/* Temas claros: textos de color sobre fondos tintados necesitan algo más de contraste (WCAG AA) */
[data-mode=light] .wlab{opacity:1}
[data-mode=light] .side nav a[aria-current],[data-mode=light] .side .grp .items a[aria-current],[data-mode=light] .side .grp[data-active]>summary{color:color-mix(in srgb,var(--primary) 78%,var(--text))}
[data-mode=light] .checks li a{opacity:1}
[data-mode=light] .ok a{color:color-mix(in srgb,var(--primary) 78%,var(--text))}
[data-mode=light] .checks li.bad{opacity:1}