/* ==========================================================================
   Selector de estilo en directo (demo para que la clienta elija).
   Cada bloque pisa las variables de :root de style.css.
   Para fijar uno: copiar sus valores al :root de style.css y borrar temas.css,
   temas.js, el <aside class="temas"> de home.php y el script inline del head.
   ========================================================================== */

/* --- Lujo (por defecto): negro + oro --- */
:root[data-tema="lujo"]{}

/* --- Minimalista: blanco, negro y aire --- */
:root[data-tema="minimalista"]{
  --acc:#111111; --acc-2:#111111; --acc-3:#444444; --acc-d:#111111; --acc-ink:#111111;
  --acc-grad:linear-gradient(135deg,#111111,#111111); --on-acc:#ffffff;
  --bg:#ffffff; --bg-alt:#f6f6f6; --surface:#ffffff; --ink:#111111; --txt:#2b2b2b; --muted:#666666; --line:#e6e6e6;
  --inv:#ffffff; --inv-2:#fafafa; --inv-3:#f4f4f4; --on-inv:#111111; --on-inv-2:#444444; --on-inv-3:#666666;
  --r:6px; --r-btn:6px; --r-ico:6px; --r-chip:6px;
  --shadow:0 1px 3px rgba(0,0,0,.08); --card-shadow:0 0 0 1px #e6e6e6;
  --f-text:Inter,system-ui,sans-serif; --f-title:Inter,system-ui,sans-serif; --f-brand:Inter,system-ui,sans-serif;
  --t-weight:600; --t-spacing:-.035em;
}
:root[data-tema="minimalista"] .card,
:root[data-tema="minimalista"] .card::before,
:root[data-tema="minimalista"] .card::after{animation:none}
:root[data-tema="minimalista"] .card::before,
:root[data-tema="minimalista"] .card::after{display:none}
:root[data-tema="minimalista"] .sec-dark{background:var(--bg-alt)}
:root[data-tema="minimalista"] .sec-dark .card{background:var(--surface)}

/* --- Rústico: lino, madera y ocre --- */
:root[data-tema="rustico"]{
  --acc:#b5793a; --acc-2:#e0b07a; --acc-3:#f3d9b5; --acc-d:#8a5525; --acc-ink:#8a5525;
  --acc-grad:linear-gradient(135deg,#8a5525 0%,#c98f4e 45%,#e0b07a 75%,#b5793a 100%); --on-acc:#2a1c12;
  --bg:#f6efe4; --bg-alt:#efe4d3; --surface:#fffaf2; --ink:#3b2a1e; --txt:#4a3a2c; --muted:#6f5a48; --line:#e3d5bf;
  --inv:#3b2a1e; --inv-2:#4a3526; --inv-3:#56402e; --on-inv:#f6efe4; --on-inv-2:#e3d5bf; --on-inv-3:#cdbba1;
  --r:12px; --r-btn:10px; --r-ico:10px; --r-chip:10px;
  --shadow:0 18px 40px -22px rgba(59,42,30,.55); --card-shadow:0 14px 30px -18px rgba(59,42,30,.45);
  --f-text:Nunito,system-ui,sans-serif; --f-title:"Playfair Display",Georgia,serif; --f-brand:"Playfair Display",Georgia,serif;
  --t-weight:700; --t-spacing:-.01em;
}

/* --- Futurista: noche, neón dorado y líneas finas --- */
:root[data-tema="futurista"]{
  --acc:#f6c445; --acc-2:#ffe17a; --acc-3:#fff6c8; --acc-d:#22d3ee; --acc-ink:#f6c445;
  --acc-grad:linear-gradient(120deg,#22d3ee 0%,#f6c445 45%,#ffe17a 70%,#22d3ee 100%); --on-acc:#03050b;
  --bg:#070a12; --bg-alt:#0b1020; --surface:#0f1629; --ink:#eef4ff; --txt:#c7d3e8; --muted:#94a3bf; --line:#1e2a44;
  --inv:#03050b; --inv-2:#0b1222; --inv-3:#111a30; --on-inv:#ffffff; --on-inv-2:#b9c7e0; --on-inv-3:#8ea0bf;
  --r:4px; --r-btn:4px; --r-ico:4px; --r-chip:4px;
  --shadow:0 0 40px -12px rgba(34,211,238,.35); --card-shadow:0 0 30px -14px rgba(246,196,69,.45);
  --f-text:"Exo 2",system-ui,sans-serif; --f-title:Orbitron,"Exo 2",sans-serif; --f-brand:Orbitron,"Exo 2",sans-serif;
  --t-weight:700; --t-spacing:.01em; --t-scale:.82;
}
:root[data-tema="futurista"] .btn{text-transform:uppercase;letter-spacing:.08em;font-size:.86rem}

/* --- Elegante: marfil, champán y serifa fina --- */
:root[data-tema="elegante"]{
  --acc:#b89b5e; --acc-2:#e2cc9a; --acc-3:#f5ead2; --acc-d:#8c7240; --acc-ink:#7d6436;
  --acc-grad:linear-gradient(135deg,#8c7240 0%,#e2cc9a 40%,#b89b5e 70%,#f5ead2 100%); --on-acc:#1c1a17;
  --bg:#fbf8f3; --bg-alt:#f3ede3; --surface:#ffffff; --ink:#1c1a17; --txt:#2d2a26; --muted:#6e675d; --line:#e6dccb;
  --inv:#1c1a17; --inv-2:#26231f; --inv-3:#2f2b26; --on-inv:#fbf8f3; --on-inv-2:#d9cfbf; --on-inv-3:#b8ad9b;
  --r:0px; --r-btn:0px; --r-ico:0px; --r-chip:0px;
  --shadow:0 20px 50px -30px rgba(28,26,23,.5); --card-shadow:0 16px 40px -28px rgba(28,26,23,.45);
  --f-text:Jost,system-ui,sans-serif; --f-title:"Cormorant Garamond",Georgia,serif; --f-brand:"Cormorant Garamond",Georgia,serif;
  --t-weight:600; --t-spacing:0; --t-scale:1.18;
}
:root[data-tema="elegante"] .card{animation:none}

/* --- Mediterráneo: azul mar, blanco y arena --- */
:root[data-tema="mediterraneo"]{
  --acc:#d9a441; --acc-2:#f2cf7e; --acc-3:#fbe8bd; --acc-d:#a87824; --acc-ink:#8f661c;
  --acc-grad:linear-gradient(135deg,#a87824 0%,#f2cf7e 45%,#d9a441 75%,#fbe8bd 100%); --on-acc:#0f2a4a;
  --bg:#ffffff; --bg-alt:#f2f7fb; --surface:#ffffff; --ink:#0f2a4a; --txt:#24364d; --muted:#556679; --line:#dbe6f0;
  --inv:#0f2a4a; --inv-2:#143560; --inv-3:#1a4073; --on-inv:#ffffff; --on-inv-2:#cfe0f2; --on-inv-3:#a9c2dd;
  --r:22px; --r-btn:999px; --r-ico:50%; --r-chip:999px;
  --shadow:0 24px 60px -28px rgba(15,42,74,.45); --card-shadow:0 18px 40px -22px rgba(15,42,74,.35);
  --f-text:"Nunito Sans",system-ui,sans-serif; --f-title:Poppins,system-ui,sans-serif; --f-brand:Poppins,system-ui,sans-serif;
  --t-weight:700; --t-spacing:-.02em;
}

/* --- Panel lateral --- */
.temas{position:fixed;top:50%;right:0;z-index:80;width:270px;transform:translate(100%,-50%);transition:transform .3s cubic-bezier(.2,.7,.2,1);font-family:Manrope,system-ui,sans-serif;direction:ltr}
.temas.abierto{transform:translate(0,-50%)}
.temas__tirador{position:absolute;right:100%;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;padding:16px 9px;border:0;border-radius:8px 0 0 8px;background:var(--acc-grad);color:var(--on-acc);font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow)}
.temas__panel{padding:18px;background:#ffffff;color:#111;border:1px solid #e6e1d6;border-right:0;border-radius:14px 0 0 14px;box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}
.temas__titulo{margin:0 0 10px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6b72}
.temas__grupo{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.temas__grupo button{display:grid;justify-items:center;gap:6px;padding:10px 4px;border:1px solid #e6e1d6;border-radius:10px;background:#faf8f4;color:#111;font-size:.95rem;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.temas__grupo button::before{content:"";width:36px;height:36px;border-radius:50%;border:1px solid #ddd;background:conic-gradient(var(--m1) 0 33%,var(--m2) 0 66%,var(--m3) 0)}
.temas__grupo button:hover{transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(0,0,0,.4)}
.temas__grupo button[aria-pressed="true"]{border-color:#c9a24a;box-shadow:0 0 0 2px #c9a24a}