/* =====================================================================
   Modo oscuro de la tienda (Panel → Ajustes → Tienda → Apariencia).
   Se carga después de style.css y components.css y solo cambia colores.
   El panel de administración no lo usa.
   ===================================================================== */
:root {
  color-scheme: dark;                 /* barras de scroll y controles nativos oscuros */
  --bg: #0e0e12;                      /* fondo de la página */
  --bg-soft: #1d1d25;                 /* superficies suaves */
  --card: #16161c;                    /* tarjetas */
  --line: #2c2c37;
  --text: #ececf1;
  --ink-2: #c9c9d3;
  --muted: #9d9daa;
  --input: #121218;
  --input-line: #3a3a47;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
}

body { background: var(--bg); color: var(--text); }
a { color: inherit; }
.success-text { color: #4ade80; }
.stars-off { color: #3f3f4a; }

/* ---------- Botones ---------- */
.btn { color: var(--text); }
.btn-light { background: var(--bg-soft); border-color: var(--input-line); color: var(--text); }
.btn-light:hover { border-color: #8b8b98; }
.btn-outline { border-color: var(--text); color: var(--text); }
.btn-outline:hover, .product-card:hover .card-cta { background: var(--text); color: var(--bg); }
.link-button { color: var(--ink-2); }

/* ---------- Avisos ---------- */
.alert-success { background: rgba(22,163,74,.14); border-color: rgba(74,222,128,.35); color: #86efac; }
.alert-error   { background: rgba(220,38,38,.14); border-color: rgba(248,113,113,.35); color: #fca5a5; }
.alert-info    { background: rgba(59,130,246,.14); border-color: rgba(147,197,253,.35); color: #93c5fd; }
.alert-warning { background: rgba(217,119,6,.14); border-color: rgba(252,211,77,.35); color: #fcd34d; }

/* ---------- Formularios ---------- */
input, select, textarea { color: var(--text); }
.field input, .field select, .field textarea, .sort-form select, .qty-input,
.coupon-row input, .ship-quote-row input, .newsletter-form input, .account-offer-form input,
.branch-search, .filters input, .filters select {
  background: var(--input); border-color: var(--input-line); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--text); border-color: var(--text); }
.field input:disabled { background: var(--bg-soft); color: var(--muted); }
.field.invalid input, .field.invalid select { background: rgba(220,38,38,.12); border-color: #f87171; }
.field-error { color: #fca5a5; }
::placeholder { color: #6f6f7c; }
/* El buscador del encabezado sigue blanco (se destaca sobre el fondo oscuro). */
.search input { color: #18181b; }

/* ---------- Menú ---------- */
.dropdown { background: var(--bg-soft); box-shadow: var(--shadow); }
.dropdown a { color: var(--text); }
.dropdown a:hover { background: #2a2a35; color: #fff; }

/* ---------- Buscador en vivo ---------- */
.search-results { background: var(--bg-soft); color: var(--text); box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.search-item:hover, .search-item.active { background: #2a2a35; }
.search-item img { background: var(--card); }
.search-all { border-top-color: var(--line); }

/* ---------- Tarjetas y superficies ---------- */
.card, .product-card, .combo-card, .review-card, .sizes-card, .keyword-chip { background: var(--card); border-color: var(--line); }
.product-card-name { color: var(--ink-2); }
.product-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.5); }
.price-boxes { border-color: var(--line); }
.price-box + .price-box { border-color: var(--line); }
.price-box-transfer { background: rgba(22,163,74,.12); }
.price-box-transfer strong, .price-box-transfer .price-box-label { color: #4ade80; }
.card-delivery { background: rgba(6,182,212,.12); color: #67e8f9; }
.card-combo, .combo-nudge { background: rgba(245,158,11,.1); border-color: rgba(252,211,77,.4); color: #fcd34d; }
.benefits div, .perks-grid div { background: var(--bg-soft); }

/* ---------- Listados ---------- */
.chip { border-color: var(--line); }
.chip:hover { border-color: var(--text); }
.chip-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.pagination a, .pagination span { border-color: var(--line); }
.pagination .current { background: var(--text); color: var(--bg); border-color: var(--text); }
.combo-promo { background: var(--card); border: 1px solid var(--line); }
.combo-promo-tiers div { background: var(--bg-soft); }

/* ---------- Ficha de producto ---------- */
.gallery-thumbs button.active { border-color: var(--text); }
.size-picker span { border-color: var(--input-line); }
.size-picker input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.delivery-promise { background: rgba(6,182,212,.08); border-color: rgba(103,232,249,.3); }
.ship-quote { border-color: var(--line); }
.ship-quote-result li { border-top-color: var(--line); }
.product-perks { background: var(--bg-soft); color: var(--ink-2); }
.review { border-bottom-color: var(--line); }

/* ---------- Combo ---------- */
.combo-mark::before { background: var(--card); border-color: #52525e; }
.combo-mark.reached::before { border-color: transparent; }
.combo-mark-pct { background: #24242e; color: var(--muted); }   /* escalones todavía no alcanzados */
.combo-mark.preview-reached .combo-mark-pct { background: rgba(139,92,246,.2); color: #c4b5fd; }
.combo-mark.preview-reached::before { border-color: #a78bfa; }
.combo-preview { background: rgba(22,163,74,.12); color: #86efac; }
.combo-dock { background: var(--bg-soft); border: 1px solid var(--line); }

/* ---------- Carrito, checkout y pedidos ---------- */
.cart-item { border-bottom-color: var(--line); }
.summary { background: var(--card); border: 1px solid var(--line); }
.summary-item { border-bottom-color: var(--line); }
.summary-row.total, .coupon-box { border-top-color: var(--line); }
.delivery-option { border-color: var(--line); }
.delivery-option:has(input:checked) { border-color: var(--text); background: var(--bg-soft); }
.delivery-option input { accent-color: var(--text); }
.branch-list { background: var(--input); border-color: var(--input-line); }
.branch-option { border-bottom-color: var(--line); }
.branch-option:hover { background: var(--bg-soft); }
.branch-option strong { color: var(--text); }
.branch-option:has(input:checked) { background: rgba(225,29,72,.16); }
.branch-selected { background: rgba(225,29,72,.12); }
.pay-box { background: rgba(217,119,6,.1); border-color: rgba(252,211,77,.35); }
.transfer-box { background: rgba(22,163,74,.08); border-color: rgba(74,222,128,.3); }
.account-offer { background: rgba(59,130,246,.08); border-color: rgba(147,197,253,.3); }
.table th { color: var(--muted); border-bottom-color: var(--line); }
.table td { border-bottom-color: var(--line); }
.timeline li.done { color: var(--text); }
.history li { border-left-color: var(--line); }

/* ---------- Guía de talles ---------- */
.sizes-table-pretty { border-color: #3a3a47; }
.sizes-table-pretty thead th + th { border-left-color: #3a3a47; }
.sizes-table-pretty tbody th { background: rgba(236,72,153,.16); color: #fbcfe8; }
.sizes-table-pretty tbody td { color: var(--text); border-color: rgba(236,72,153,.18); }
.sizes-table-pretty tbody th { border-top-color: rgba(236,72,153,.18); }
.sizes-table-pretty tbody tr:nth-child(even) td { background: rgba(236,72,153,.06); }
.sizes-table-pretty tr.is-match th, .sizes-table-pretty tr.is-match td { background: var(--text) !important; color: var(--bg); }
.size-finder { background: rgba(236,72,153,.07); border-color: rgba(249,168,212,.4); }
.size-finder-input { background: var(--input); border-color: var(--text); }
.size-finder-input input { color: var(--text); }
.shirt-diagram path:first-of-type { fill: #2a2a34; stroke: #4b4b58; }
.shirt-diagram path:nth-of-type(2) { stroke: #4b4b58; }
.sizes-tips { border-top-color: var(--line); }

/* ---------- Varios ---------- */
.keyword-chip { color: var(--text); }
.keyword-chip:hover { background: #2a2a35; border-color: var(--text); color: #fff; }
.rich-text th { background: #27272f; }
.rich-text th, .rich-text td { border-color: var(--line); }
.newsletter { background: var(--card); border-top-color: var(--line); }
.newsletter p { color: var(--ink-2); }
.site-footer { border-top: 1px solid var(--line); }
.to-top { background: var(--text); color: var(--bg); }
.result-icon { background: var(--bg-soft); }
.img-placeholder { background: var(--line); }