/* Base común de los cinco prototipos.
   Neutros puros (sin crema), un solo acento naranja de señalización,
   IBM Plex Sans: tipografía de ingeniería, abierta, con cifras tabulares. */

:root {
  color-scheme: light dark;
  --bg: #f7f7f6;
  --surface: #ffffff;
  --surface-2: #efefed;
  --line: #e2e2df;
  --ink: #18181a;
  --ink-2: #55565b;
  --ink-3: #75767b;
  --accent: #d9480f;         /* naranja de señalización, no terracota */
  --accent-ink: #b33a0b;
  --accent-soft: #fdeee6;
  --ok: #1c7c46;
  --no: #b42318;
  --screen: #cfd8d3;          /* pantalla e-paper de las siluetas */
  --screen-lit: #9fc3ff;
  --fija: #2563a8;
  --portatil: #d9480f;
  --modulo: #1c7c46;
  --antena: #6d4bb0;
  --accesorio: #8a6a24;
  --radius: 10px;
  --f: "IBM Plex Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111113; --surface: #19191c; --surface-2: #232327; --line: #2e2e33;
    --ink: #f2f2f0; --ink-2: #b6b7bb; --ink-3: #8e8f94;
    --accent: #ff7a3d; --accent-ink: #ff9a66; --accent-soft: #3a2014;
    --ok: #4ec07e; --no: #ff7b6e; --screen: #4a5650; --screen-lit: #4f7dc9;
    --fija: #5b95dd; --portatil: #ff7a3d; --modulo: #4ec07e; --antena: #a58ae6; --accesorio: #c9a35a;
  }
}
:root[data-theme="dark"] {
  --bg: #111113; --surface: #19191c; --surface-2: #232327; --line: #2e2e33;
  --ink: #f2f2f0; --ink-2: #b6b7bb; --ink-3: #8e8f94;
  --accent: #ff7a3d; --accent-ink: #ff9a66; --accent-soft: #3a2014;
  --ok: #4ec07e; --no: #ff7b6e; --screen: #4a5650; --screen-lit: #4f7dc9;
  --fija: #5b95dd; --portatil: #ff7a3d; --modulo: #4ec07e; --antena: #a58ae6; --accesorio: #c9a35a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f); font-feature-settings: "tnum" 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Barra superior común ---------- */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  display: flex; align-items: center; gap: 20px;
  height: 56px; padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.marca svg { width: 22px; height: 22px; color: var(--accent); }
.barra nav { display: flex; gap: 18px; font-size: 14px; color: var(--ink-2); overflow-x: auto; }
.barra nav a { text-decoration: none; white-space: nowrap; padding: 6px 0; }
.barra nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.barra .espacio { flex: 1; }
.barra .fecha { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.barra nav { min-width: 0; flex: 0 1 auto; scrollbar-width: none; }
.barra nav::-webkit-scrollbar { display: none; }
.barra .tema, .barra .marca { flex: none; }
/* En pantallas angostas la barra deja el nombre y la fecha para que quepan las cinco páginas y el tema. */
@media (max-width: 760px) {
  .barra { gap: 14px; padding: 0 12px 0 16px; }
  .barra .fecha, .marca span { display: none; }
  .barra nav { gap: 14px; }
}

/* Conmutador de tema: sol y luna (patrón web.dev «Building a theme switch component»). */
.tema { --size: 36px; inline-size: var(--size); block-size: var(--size); border: 0; background: none; padding: 7px; border-radius: 50%; cursor: pointer; color: var(--ink-2); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tema:hover { color: var(--ink); background: var(--surface-2); }
.tema svg { inline-size: 100%; block-size: 100%; stroke-linecap: round; }
.tema .sol, .tema .luna circle, .tema .rayos { transform-origin: center; transition: transform .45s cubic-bezier(.5,1.25,.75,1.25), opacity .3s; }
.tema .sol { fill: currentColor; }
.tema .rayos { stroke: currentColor; stroke-width: 2; }
[data-theme="dark"] .tema .sol { transform: scale(1.75); }
[data-theme="dark"] .tema .rayos { opacity: 0; transform: rotate(-25deg); }
[data-theme="dark"] .tema .luna circle { transform: translateX(-7px); }
@media (hover: none) { .tema { --size: 44px; } }

/* ---------- Piezas comunes ---------- */
.silueta { display: block; width: 100%; height: auto; color: var(--ink-2); }
.silueta .cuerpo { fill: var(--surface-2); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.silueta .trazo { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.silueta .pantalla { fill: var(--screen); stroke: currentColor; stroke-width: 1.2; }
.silueta .brillo { fill: var(--screen-lit); stroke: currentColor; stroke-width: 1.2; }
.silueta .acento { fill: var(--acento, var(--accent)); stroke: none; }
.silueta .tecla { fill: var(--surface); stroke: currentColor; stroke-width: .8; }

.si, .no { display: inline-flex; align-items: center; gap: 6px; }
.si svg, .no svg { width: 18px; height: 18px; flex: none; }
.si svg { color: var(--ok); }
.no svg { color: var(--ink-3); }
.sin-dato { color: var(--ink-3); font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-primario { background: var(--ink); color: var(--bg); }
.btn-primario:hover { background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
.btn-secundario { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-secundario:hover { border-color: var(--ink-3); }
.btn svg { width: 16px; height: 16px; }

.etiqueta-capa { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.etiqueta-capa i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }

select, input[type="search"], input[type="number"] {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 40px;
}
select { padding-right: 28px; }

.pie-proto { max-width: 1200px; margin: 48px auto 32px; padding: 0 24px; font-size: 13px; color: var(--ink-3); }

.precio { text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.precio:hover { text-decoration: underline; text-underline-offset: 3px; }
.sub { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; user-select: none; }
.interruptor input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; margin: 0; transition: background .2s; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .2s; }
.interruptor input:checked { background: var(--ink); }
.interruptor input:checked::after { transform: translateX(16px); }
.segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: 999px; overflow-x: auto; max-width: 100%; }
.segmentado button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.segmentado button[aria-pressed="true"], .segmentado button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.segmentado .cuenta { color: var(--ink-3); font-weight: 400; margin-left: 4px; }

/* Fotos de producto: siempre sobre blanco, también en tema oscuro, como en una tienda. */
.foto-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.marco-foto { background: #ffffff; border-radius: 14px; display: grid; place-items: center; overflow: hidden; }
.marco-foto .silueta { color: #55565b; }
.marco-foto .silueta .cuerpo { fill: #efefed; }
.celda-mejor { font-weight: 700; color: var(--ink); }
.celda-mejor .si svg, .celda-mejor .no svg { stroke-width: 2.4; }
.texto-dato{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.contra .texto-dato{color:var(--accent-ink)}

/* ---------- Ficha completa (gráficas y catálogo) ---------- */
.ficha-grupo { margin-top: 18px; break-inside: avoid; }
.ficha-grupo h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 2px; color: var(--ink); }
.ficha-grupo dl { margin: 0; }
.ficha-grupo dl div { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ficha-grupo dt { color: var(--ink-2); }
.ficha-grupo dd { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ficha-grupo dd .si svg, .ficha-grupo dd .no svg { width: 15px; height: 15px; }