/* Euro Rastro · modo oscuro permanente (gris oscuro)
   Se carga al final para ajustar los colores pensados para fondo claro.
   Las bandas de cabecera, "Vende tu carro" y pie quedan un tono más oscuro. */
:root {
  --bg: #17191C;
  --surface: #202327;
  --surface-2: #272B30;
  --line: #33383E;
  --ink: #0F1113;          /* bandas oscuras */
  --text: #E8EBE5;
  --ink-2: #C2C7BE;
  --muted: #959B91;
  --brand: #7CC242;
  --accent: #4C8422;
  --accent-hover: #5A9A2A;
  --soft: #22301A;
  --soft-ink: #B7E28C;
  --warn-bg: #3B2F12; --warn-ink: #F3D38A;
  --bad-bg: #3D211D; --bad-ink: #F4AFA4;
  --info-bg: #1A2C40; --info-ink: #A6CBF2;
  --well: #E2E5DF;         /* fondo claro para fotos de piezas recortadas */
  color-scheme: dark;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); }
a { color: var(--brand); }
.eyebrow, .how .n, .crumb, .price.q, .f-ico, .ptabs button:hover, .ptabs button[aria-pressed="true"] { color: var(--brand); }
.link-all, .brand-btn:hover, .empty strong, .ccirc, .subnav .nav a:hover, .subnav .nav a[aria-current="page"] { color: var(--text); }
.finder, .sell-card, .finder-strip .finder, dialog, .allcats summary, .allcats-menu button { color: var(--text); }

/* Botones */
.btn-ghost { color: var(--text); border-color: #5A6068; }
.btn-ghost:hover { background: var(--text); color: #111315; border-color: var(--text); }
.btn-soft { background: var(--soft); color: var(--soft-ink); }
.btn-soft:hover { background: #2B3C20; }
.btn-danger { border-color: #6B3A33; }
.icon-btn { background: var(--surface-2); color: var(--text); }
.icon-btn:hover { border-color: var(--text); }

/* Campos */
.input, select.input, textarea.input { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.input::placeholder { color: #7D837A; }
.check span { background: var(--surface-2); color: var(--ink-2); }
.check input:checked + span { background: var(--brand); color: #0F1113; border-color: var(--brand); }
.hs-cat option, select option { background: #202327; color: var(--text); }

/* Etiquetas y detalles */
.pill { background: #2B2F35; color: var(--ink-2); }
.pill.dark { background: #3A3F45; color: #fff; }
.part-num, .pd-num code { background: #2A2E33; color: var(--ink-2); }
.toast { border: 1px solid var(--line); }
.tabs { background: #16181B; }
.tab { color: var(--muted); }
.tab[aria-selected="true"] { background: var(--surface-2); color: var(--text); }
.tab-ind { background: var(--surface-2); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.subnav { background: var(--surface); }
.allcats summary { background: var(--surface-2); }
.allcats-menu { background: var(--surface); box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); }
.allcats-menu button:hover { background: var(--soft); }
.allcats-menu img { background: var(--well); border-radius: 6px; padding: 2px; }
.cat-arrow, .cc-wrap .cat-arrow { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.cat-arrow:hover, .cc-wrap .cat-arrow:hover { background: var(--brand); color: #0F1113; border-color: var(--brand); }
.chip-x { background: var(--soft); color: var(--soft-ink); }

/* Fotos de piezas recortadas: platos claros sobre el fondo oscuro */
.ph.cut { background-color: var(--well); }
.ccirc .circle { background: var(--well); }
.ccirc:hover .circle, .ccirc:focus-visible .circle { background: #EEF6E5; }
.part, .car, .how > div, .feats li, .kv div, .stat, .panel, .car-card { border-color: var(--line); }
.part:hover, .car:hover, .car-card:hover, .how > div:hover { box-shadow: 0 16px 34px -18px rgba(0,0,0,.8); }

/* Catálogo */
.cpill { background: var(--surface-2); color: var(--ink-2); }
.cpill:hover { border-color: var(--text); }
.cpill[aria-pressed="true"] { background: var(--brand); color: #0F1113; border-color: var(--brand); }
.cpill .n { background: #2E3238; color: var(--muted); }
.cpill[aria-pressed="true"] .n { background: #0F1113; color: var(--brand); }
.bigsearch { background: var(--surface-2); border: 1px solid var(--line); }
.bigsearch input { color: var(--text); }
.side-help .btn { background: var(--surface); }
.skel { background: linear-gradient(90deg, #24272C 25%, #2C3035 50%, #24272C 75%); background-size: 200% 100%; }

/* Mapa dibujado */
.map-static { background-color: #22262A; background-image: linear-gradient(#2E3338 2px, transparent 2px), linear-gradient(90deg, #2E3338 2px, transparent 2px), linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); }
.map-static::before { background: #33383E; box-shadow: 0 0 0 3px #2A2E33; }

/* Panel */
.seg button { background: var(--surface-2); color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--brand); color: #0F1113; border-color: var(--brand); }
.row:hover, tbody tr:hover { background: #262A2F; }
.bar { background: #2E3238; }
.group-title { background: #1C1F23; color: var(--brand); }
.stat.hot { background: var(--soft); border-color: var(--brand); }
.login-card { color: var(--text); }