/* ============================================================ Fácil Clinic — Theme System v5 (CSS ONLY — Determinista) Sin JS, sin localStorage, sin prefers-color-scheme. Tema explícito via atributo data-theme en . ============================================================ */ /* --- Light (default, aplica SIEMPRE sin data-theme) --- */ :root{ --bg-primary:#f1f5f9;--bg-secondary:#fff;--bg-tertiary:#e2e8f0; --bg-card:#fff;--bg-card-hover:#f8fafc; --bg-glass:rgba(255,255,255,.92); --text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#64748b;--text-muted:#94a3b8; --border-primary:#e2e8f0;--border-secondary:#f1f5f9; --accent-blue:#2563eb;--accent-purple:#7c3aed;--accent-pink:#be185d; --gradient-brand:linear-gradient(135deg,#2563eb,#7c3aed,#db2777); --shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 16px rgba(0,0,0,.08); --shadow-lg:0 12px 40px rgba(0,0,0,.1);--shadow-glow:0 0 40px rgba(37,99,235,.1); --orb-opacity:.04;--grid-opacity:.2;--glass-blur:blur(10px); } /* --- Dark — SOLO cuando el HTML tiene data-theme="dark" --- */ [data-theme="dark"]{ --bg-primary:#12122a;--bg-secondary:#1a1a38;--bg-tertiary:#222248; --bg-card:rgba(255,255,255,.05);--bg-card-hover:rgba(255,255,255,.09); --bg-glass:rgba(22,22,48,.88); --text-primary:#e5e7eb;--text-secondary:#a5b4cc;--text-tertiary:#7e8aa2;--text-muted:#5a6680; --border-primary:rgba(255,255,255,.1);--border-secondary:rgba(255,255,255,.06); --shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 12px 40px rgba(0,0,0,.5);--shadow-glow:0 0 40px rgba(59,130,246,.08); --orb-opacity:.07;--grid-opacity:.35;--glass-blur:blur(20px); } /* --- Theme Toggle (estilo fijo, visible en ambos temas) --- */ .theme-toggle{display:flex;align-items:center;gap:2px;background:#e2e8f0;border-radius:.5rem;padding:3px} [data-theme="dark"] .theme-toggle{background:#2d2d50} .theme-btn{ display:flex;align-items:center;justify-content:center;width:2rem;height:2rem; border:1px solid transparent;background:transparent;border-radius:.375rem; color:#64748b;font-size:.875rem;cursor:pointer;transition:all .15s;line-height:1; font-family:inherit;padding:0 } .theme-btn:hover{color:#0f172a;background:rgba(0,0,0,.05)} .theme-btn.active{background:#fff;color:#1e40af;border-color:#e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.1)} [data-theme="dark"] .theme-btn{color:#94a3b8} [data-theme="dark"] .theme-btn:hover{color:#e5e7eb;background:rgba(255,255,255,.06)} [data-theme="dark"] .theme-btn.active{background:#3b3b6a;color:#93c5fd;border-color:#4a4a7a;box-shadow:0 1px 3px rgba(0,0,0,.3)}