/* ═══════════════════════════════════════════════════════════════
   The Fantasy Basket — common.css
   Variables de tema y componentes compartidos. Incluir en <head>:
   <link rel="stylesheet" href="common.css"/>
   Las páginas pueden seguir teniendo su propio <style>; si definen
   las mismas variables, las suyas mandan (cascada normal de CSS).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FAFAF8;--sf:#FFFFFF;--sf2:#F5F4F0;--sf3:#ECEAE5;
  --bd:rgba(0,0,0,.08);--bdh:rgba(0,0,0,.16);
  --tx:#1A1A18;--tx2:#6B6A65;--tx3:#9E9D98;--tx4:#9E9D98;
  --or:#F97316;--ord:#C2520D;--orb:#FFF4EE;
  --tl:#0891B2;--tlb:#E0F7FA;--gr:#16A34A;--grd:#D1FAE5;--re:#DC2626;
  --ye:#D97706;--yeb:#FEF3C7;
  --r:14px;--rs:9px;
}
body.dark{
  --bg:#0F0F0D;--sf:#181816;--sf2:#222220;--sf3:#2A2A28;
  --bd:rgba(255,255,255,.08);--bdh:rgba(255,255,255,.18);
  --tx:#F0EDE6;--tx2:#9E9B92;--tx3:#5C5A54;--tx4:#5C5A54;
  --or:#F97316;--ord:#C2520D;--orb:#3D1F0A;
  --tl:#06B6D4;--tlb:#0C2A30;--gr:#5DBB63;--grd:#1A3B1C;--re:#E05555;
  --ye:#EAB308;--yeb:#3A2E08;
}

/* Spinner de carga */
.spinner{width:30px;height:30px;border:3px solid var(--bd);border-top-color:var(--or);
  border-radius:50%;animation:tfb-spin .8s linear infinite;margin:0 auto 14px}
@keyframes tfb-spin{to{transform:rotate(360deg)}}

/* Estados vacíos / cargando */
.state{text-align:center;padding:50px 20px;color:var(--tx2)}

/* Gate premium */
.gate{max-width:380px;margin:60px auto;text-align:center;background:var(--sf);
  border:1px solid var(--bd);border-radius:var(--r);padding:30px}
.gate a{color:var(--or);font-weight:600;text-decoration:none}

/* Botón de tema */
.theme{background:var(--sf);border:1px solid var(--bd);border-radius:99px;
  width:34px;height:34px;cursor:pointer;font-size:15px}

/* Chips de filtro */
.chip{background:var(--sf);border:1px solid var(--bd);border-radius:99px;padding:7px 13px;
  font-size:11px;font-weight:600;font-family:'DM Mono',monospace;color:var(--tx2);
  cursor:pointer;transition:all .15s}
.chip.on{background:var(--orb);border-color:var(--or);color:var(--ord)}
