/* Cuál Portátil — tema global (se carga en TODAS las páginas, después de styles.css).
   Mundo: azul tinta de noche, un acento violeta para lo activo, teal para puntuaciones y ámbar
   solo para comprar. Se cambian los tokens de :root, así que todo componente que ya usaba
   variables hereda el tema; aquí solo se corrige lo que dependía de colores fijos. */

:root {
  color-scheme: dark;
  --ink:        #e9ecff;
  --ink-2:      #c9cfee;
  --muted:      #a3abc8;
  --muted-2:    #8d95b6;
  --paper:      #0d1226;
  --card:       #141a36;
  --line:       #2a3160;
  --line-2:     #1a2145;

  --accent:     #8b7cff;
  --accent-ink: #0d1226;
  --accent-dk:  #b3a9ff;
  --accent-sf:  rgba(139, 124, 255, .14);

  --good:       #62d9a3;
  --good-sf:    rgba(98, 217, 163, .12);
  --bad:        #ff8f8f;
  --bad-sf:     rgba(255, 143, 143, .12);
  --warn:       #ffd079;
  --warn-sf:    rgba(255, 208, 121, .12);
  --gold:       #ffd079;

  --serif: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh:    0 4px 14px rgba(0, 0, 0, .35);
  --sh-lg: 0 14px 34px rgba(0, 0, 0, .45);
}

h1, h2, h3, h4 { letter-spacing: -.02em; }
h1 { font-weight: 700; }
h2 { font-weight: 700; }
body { background: var(--paper); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Cabecera ----------------------------------------------------------- */
.skip-link { background: var(--accent); color: var(--accent-ink); }
.site-head { background: rgba(13, 18, 38, .96); border-bottom-color: var(--line); }
.brand-mark { background: var(--accent); color: var(--accent-ink); }
.brand-name { color: #fff; }
.burger span { background: #fff; }
.nav-top { color: var(--ink-2); }
.nav-top:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-panel { background: #151b36; border-color: var(--line); }
.nav-panel a { color: var(--ink-2); }
.nav-panel a:hover { background: var(--accent-sf); color: #fff; }
.nav-panel a[aria-current="page"] { color: var(--accent-dk); }
.nav-list a.nav-cta, .nav-list a.nav-cta:hover, .nav-list a.nav-cta:focus { background: var(--accent); color: var(--accent-ink); }
.nav-list a.nav-cta:hover { background: var(--accent-dk); }
.cmp-count { background: var(--accent-ink); color: #fff; }
@media (max-width: 900px) {
  .nav { background: #0f1530; border-color: var(--line); }
}
.demo-bar { border-bottom-color: rgba(255, 208, 121, .3); }
.demo-bar strong { color: #ffe2a8; }

/* ---- Botones y piezas con tinta como fondo ----------------------------------- */
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, .06); }
.btn-cmp { border-color: var(--line); }
.btn-cmp:hover { background: rgba(139, 124, 255, .24); }
.btn-cmp.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.card:hover { border-color: #4a5388; }
.card-rank, .slot-x { background: var(--accent); color: var(--accent-ink); }
.pick-lbl { background: var(--accent-sf); color: #d6d1ff; }
.pick--1 .pick-lbl { background: var(--accent); color: var(--accent-ink); }
.pc-pro { border-color: rgba(98, 217, 163, .35); }
.pc-con { border-color: rgba(255, 143, 143, .35); }
.cmp-veredicto, .nota-box { border-color: var(--line); }
.rd-area { fill: rgba(139, 124, 255, .22); }
.trust-warn { color: var(--ink); }

/* ---- Fotos: lámina oscura para que el producto destaque -------------------------------- */
.card-media, .pick-media, .vs-media { background: linear-gradient(180deg, #1c2452 0%, #121838 100%); }
.slot img { background: #1c2452; }
.ficha-media { background: linear-gradient(180deg, #1c2452 0%, #121838 100%); border-color: var(--line); }
img[src*=".svg"] { border-radius: 10px; }

/* ---- Pie ----------------------------------------------------------------- */
.site-foot { background: #090d1d; color: #b3badb; border-top: 1px solid var(--line); }
.foot-disclosure { background: rgba(255, 255, 255, .04); }
.foot-bottom p { color: #939bbd; }

/* ---- Formularios nativos ---------------------------------------------------------------- */
select, input[type="text"], input[type="search"] { background: var(--card); color: var(--ink); border-color: var(--line); }
option { background: #151b36; color: var(--ink); }
.buy-bar { background: rgba(13, 18, 38, .97); border-top-color: var(--line); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #2a3160; border-radius: 8px; border: 3px solid var(--paper); }