/* ============================================================
   variables.css — variables de color/tema y reset base,
   compartidas por TODAS las páginas del sitio.
   ============================================================ */

:root {
    --bg: #ffffff;
    --bg-elevada: #f5f6fb;
    --bg-elevada-hover: #ebedf7;
    --texto: #14152b;
    --texto-muted: #5c5e78;
    --linea: rgba(30, 33, 166, 0.12);
    --azul: #1E21A6;
    --azul-hover: #15187e;
    --ember: #F7941E;
    --ember-hover: #dd8210;
    --texto-sobre-azul: #ffffff;
    --texto-sobre-ember: #241300;
    --whatsapp: #25d366;
    --whatsapp-dark: #1ea952;
    --sombra: rgba(20, 21, 43, 0.14);
    --error: #d92d20;
  }

html[data-tema="oscuro"] {
    --bg: #0b0c1e;
    --bg-elevada: #14152c;
    --bg-elevada-hover: #1c1e3d;
    --texto: #f1f1fa;
    --texto-muted: #9294b8;
    --linea: rgba(130, 140, 255, 0.18);
    --azul: #4d52e0;
    --azul-hover: #6266e0;
    --ember: #ffab3d;
    --ember-hover: #ffbd66;
    --texto-sobre-azul: #ffffff;
    --texto-sobre-ember: #1a0f00;
    --sombra: rgba(0, 0, 0, 0.5);
    --error: #f97066;
  }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    transition: background 0.2s ease, color 0.2s ease;
  }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

/* ============================================================
   Escala de escritorio: agranda todo el sitio ~15% (texto,
   paddings, iconos, tarjetas) solo en pantallas de escritorio.
   Se usa "zoom" en vez de font-size porque escala todo el layout
   de forma proporcional sin importar si un valor está en px o rem
   — la mayoría de paddings/anchos del sitio están en px fijos.
   No afecta a móvil/tablet (por debajo de 1024px).
   ============================================================ */
@media (min-width: 1024px) {
  body { zoom: 1.05; }
}

/* ============================================================
   Barras de scroll: estilo consistente en todo el sitio (en vez
   de la barra gris/blanca por defecto del navegador). Cubre:
   galería de miniaturas de producto, drawer lateral, resultados
   del buscador, lista del carrito, chips de categoría y la
   vitrina de la portada.
   ============================================================ */
.galeria-miniaturas,
.drawer,
.resultados-busqueda,
.carrito-lista,
.categorias,
.drawer-cat-col-izq,
.drawer-cat-col-der,
.drawer-cat-resultado-lista,
.franja-scroll,
.vitrina-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
}
.galeria-miniaturas::-webkit-scrollbar,
.drawer::-webkit-scrollbar,
.resultados-busqueda::-webkit-scrollbar,
.carrito-lista::-webkit-scrollbar,
.categorias::-webkit-scrollbar,
.drawer-cat-col-izq::-webkit-scrollbar,
.drawer-cat-col-der::-webkit-scrollbar,
.drawer-cat-resultado-lista::-webkit-scrollbar,
.franja-scroll::-webkit-scrollbar,
.vitrina-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.galeria-miniaturas::-webkit-scrollbar-track,
.drawer::-webkit-scrollbar-track,
.resultados-busqueda::-webkit-scrollbar-track,
.carrito-lista::-webkit-scrollbar-track,
.categorias::-webkit-scrollbar-track,
.drawer-cat-col-izq::-webkit-scrollbar-track,
.drawer-cat-col-der::-webkit-scrollbar-track,
.drawer-cat-resultado-lista::-webkit-scrollbar-track,
.franja-scroll::-webkit-scrollbar-track,
.vitrina-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.galeria-miniaturas::-webkit-scrollbar-thumb,
.drawer::-webkit-scrollbar-thumb,
.resultados-busqueda::-webkit-scrollbar-thumb,
.carrito-lista::-webkit-scrollbar-thumb,
.categorias::-webkit-scrollbar-thumb,
.drawer-cat-col-izq::-webkit-scrollbar-thumb,
.drawer-cat-col-der::-webkit-scrollbar-thumb,
.drawer-cat-resultado-lista::-webkit-scrollbar-thumb,
.franja-scroll::-webkit-scrollbar-thumb,
.vitrina-wrap::-webkit-scrollbar-thumb {
  background: var(--linea);
  border-radius: 999px;
}
.galeria-miniaturas::-webkit-scrollbar-thumb:hover,
.drawer::-webkit-scrollbar-thumb:hover,
.resultados-busqueda::-webkit-scrollbar-thumb:hover,
.carrito-lista::-webkit-scrollbar-thumb:hover,
.categorias::-webkit-scrollbar-thumb:hover,
.drawer-cat-col-izq::-webkit-scrollbar-thumb:hover,
.drawer-cat-col-der::-webkit-scrollbar-thumb:hover,
.drawer-cat-resultado-lista::-webkit-scrollbar-thumb:hover,
.franja-scroll::-webkit-scrollbar-thumb:hover,
.vitrina-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--azul);
}