/* ===========================================================================
   Hacker Squad — sistema de diseño
   Fuente única de verdad para tienda y backend. No escribir color, tamaño ni
   espaciado a mano en las plantillas: todo sale de estos tokens.

   La identidad NO es Back Market. De allí tomamos la estructura (configurador,
   filtros, prueba social); el lenguaje visual es nuestro:
     · amarillo señal sobre negro, no pastel sobre blanco
     · esquinas de 10px, no cápsulas de 24px
     · monoespaciada para todo dato técnico — es lo que nos hace creíbles
   =========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --hs-amarillo:      #ffcd2f;   /* del logo. Es la acción, no la decoración */
  --hs-amarillo-osc:  #e5b41a;
  --hs-amarillo-tenue:rgba(255,205,47,.07);
  --hs-negro:         #101014;   /* casi negro: el negro puro cansa la vista */
  --hs-negro-suave:   #1c1c22;

  /* --- Superficies ------------------------------------------------------ */
  --fondo:            #ffffff;
  --fondo-alt:        #f6f6f4;   /* gris cálido, no azulado */
  --fondo-oscuro:     var(--hs-negro);
  --tarjeta:          #ffffff;
  --borde:            #e4e4e0;
  --borde-fuerte:     #c9c9c3;

  /* --- Texto ------------------------------------------------------------ */
  --texto:            #101014;
  --texto-medio:      #5c5c66;
  --texto-tenue:      #8a8a94;
  --texto-inv:        #ffffff;
  /* Texto secundario sobre fondo negro. El blanco puro a media opacidad se
     ve sucio sobre #101014; este gris cálido sí pasa contraste. */
  --texto-inv-suave:  #c2c2bd;

  /* --- Semánticos ------------------------------------------------------- */
  --ok:               #0f7a5a;
  --ok-fondo:         #e6f4ef;
  --alerta:           #b45309;
  --alerta-fondo:     #fef3e2;
  --alerta-borde:     #f0dca0;
  --error:            #c1272d;
  --error-fondo:      #fdeaea;
  --info:             #1d4ed8;
  --info-fondo:       #eaf0fe;

  /* --- Tipografía ------------------------------------------------------- */
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

  --t-xs:   12px;  --i-xs:   16px;
  --t-sm:   14px;  --i-sm:   20px;
  --t-base: 16px;  --i-base: 24px;
  --t-lg:   18px;  --i-lg:   28px;
  --t-xl:   22px;  --i-xl:   30px;
  --t-2xl:  28px;  --i-2xl:  36px;
  --t-3xl:  38px;  --i-3xl:  46px;
  --t-4xl:  52px;  --i-4xl:  58px;

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-fuerte: 700;

  /* --- Espaciado (escala de 4) ------------------------------------------ */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e8: 32px;  --e10: 40px;
  --e12: 48px; --e16: 64px; --e20: 80px;

  /* --- Bordes y sombras ------------------------------------------------- */
  --r-sm:  6px;
  --r:     10px;   /* el radio de la casa */
  --r-lg:  14px;
  --r-full: 999px;

  --sombra-1: 0 1px 2px rgba(16,16,20,.06);
  --sombra-2: 0 2px 8px rgba(16,16,20,.08);
  --sombra-3: 0 8px 24px rgba(16,16,20,.12);
  --anillo:   0 0 0 3px rgba(255,205,47,.45);

  --ancho: 1240px;
  --ancho-cab: 1680px;
  --canal: 32px;   /* margen lateral mínimo, en cualquier página */
  --trans: 140ms cubic-bezier(.2,0,.2,1);
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
/* Un display explícito gana sobre el atributo hidden y el elemento sigue
   ocupando su sitio, invisible pero empujando. Esto lo zanja de una vez. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: var(--i-base);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-semi); letter-spacing: -.02em; }
h1 { font-size: var(--t-3xl); line-height: var(--i-3xl); }
h2 { font-size: var(--t-2xl); line-height: var(--i-2xl); }
h3 { font-size: var(--t-xl);  line-height: var(--i-xl); }
h4 { font-size: var(--t-lg);  line-height: var(--i-lg); }
p  { margin: 0 0 var(--e4); }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--anillo); border-radius: var(--r-sm); }

/* El margen lateral se define con el ANCHO, no con el padding.
   Antes usaba padding-left/right y bastaba con que una página escribiera
   `padding: 40px 0` para que el contenido quedara pegado al borde del
   navegador. Con `width: min()` el canalón es intocable: una página puede
   poner el padding vertical que quiera y el margen lateral se respeta. */
.hs-contenedor {
  width: min(100% - 2 * var(--canal), var(--ancho));
  margin-inline: auto;
}
.cab-ancho {
  width: min(100% - 2 * var(--canal), var(--ancho-cab));
  margin-inline: auto;
  padding-left: 0; padding-right: 0;
}
.hs-mono { font-family: var(--fuente-mono); font-size: .92em; letter-spacing: -.01em; }
.hs-tenue { color: var(--texto-medio); }

/* --- Botones ------------------------------------------------------------- */
.hs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  border: 1px solid transparent; border-radius: var(--r);
  font-size: var(--t-sm); font-weight: var(--peso-semi);
  cursor: pointer; transition: var(--trans); white-space: nowrap;
}
.hs-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Amarillo sobre negro: la acción principal. Solo una por pantalla. */
.hs-btn--principal { background: var(--hs-amarillo); color: var(--hs-negro); }
.hs-btn--principal:hover:not(:disabled) { background: var(--hs-amarillo-osc); }

.hs-btn--oscuro { background: var(--hs-negro); color: var(--texto-inv); }
.hs-btn--oscuro:hover:not(:disabled) { background: var(--hs-negro-suave); }

.hs-btn--borde { background: var(--fondo); border-color: var(--borde-fuerte); }
.hs-btn--borde:hover:not(:disabled) { border-color: var(--hs-negro); }

.hs-btn--plano { background: transparent; color: var(--texto-medio); padding: var(--e2) var(--e3); }
.hs-btn--plano:hover:not(:disabled) { color: var(--texto); background: var(--fondo-alt); }

.hs-btn--grande { padding: var(--e4) var(--e6); font-size: var(--t-base); }
.hs-btn--ancho  { width: 100%; }

/* --- Etiquetas ----------------------------------------------------------- */
.hs-etiqueta {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 3px var(--e2); border-radius: var(--r-sm);
  font-size: var(--t-xs); line-height: var(--i-xs); font-weight: var(--peso-semi);
  background: var(--fondo-alt); color: var(--texto-medio);
}
.hs-etiqueta--marca  { background: var(--hs-amarillo); color: var(--hs-negro); }
.hs-etiqueta--ok     { background: var(--ok-fondo);     color: var(--ok); }
.hs-etiqueta--alerta { background: var(--alerta-fondo); color: var(--alerta); }
.hs-etiqueta--info   { background: var(--info-fondo);   color: var(--info); }

/* --- Tarjetas ------------------------------------------------------------ */
.hs-tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); transition: var(--trans);
}
.hs-tarjeta--clic:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }

/* --- Opciones del configurador ------------------------------------------
   El control central de la ficha. Sencillo a propósito: dos decisiones y
   listo. Cada opción muestra su precio para que se vea qué cuesta subir. */
.hs-opciones { display: grid; gap: var(--e2); }
.hs-opcion {
  display: flex; align-items: flex-start; gap: var(--e3);
  width: 100%; text-align: left;
  padding: var(--e4); background: var(--fondo);
  border: 1.5px solid var(--borde); border-radius: var(--r);
  cursor: pointer; transition: var(--trans);
}
.hs-opcion:hover { border-color: var(--borde-fuerte); }
.hs-opcion[aria-pressed="true"],
.hs-opcion.esta-activa {
  border-color: var(--hs-negro);
  background: var(--hs-amarillo-tenue);
}
.hs-opcion:disabled { opacity: .4; cursor: not-allowed; background: var(--fondo-alt); }
.hs-opcion__marca {
  flex: none; width: 18px; height: 18px; margin-top: 3px;
  border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-full);
  position: relative; transition: var(--trans);
}
.hs-opcion[aria-pressed="true"] .hs-opcion__marca,
.hs-opcion.esta-activa .hs-opcion__marca {
  border-color: var(--hs-negro); background: var(--hs-negro);
}
.hs-opcion[aria-pressed="true"] .hs-opcion__marca::after,
.hs-opcion.esta-activa .hs-opcion__marca::after {
  content: ""; position: absolute; inset: 4px;
  background: var(--hs-amarillo); border-radius: var(--r-full);
}
.hs-opcion__cuerpo { flex: 1; min-width: 0; }
.hs-opcion__titulo { font-size: var(--t-sm); font-weight: var(--peso-semi); }
.hs-opcion__ayuda  { font-size: var(--t-xs); line-height: var(--i-xs); color: var(--texto-medio); margin-top: 2px; }
.hs-opcion__precio { flex: none; font-size: var(--t-sm); font-weight: var(--peso-semi); }

/* Casilla cuadrada para los complementos (se pueden marcar varios). */
.hs-opcion--casilla .hs-opcion__marca { border-radius: var(--r-sm); }
.hs-opcion--casilla[aria-pressed="true"] .hs-opcion__marca::after {
  inset: 0; border-radius: 0; background: none;
  content: "✓"; color: var(--hs-amarillo);
  font-size: 13px; font-weight: var(--peso-fuerte);
  display: grid; place-items: center;
}

/* --- Precio -------------------------------------------------------------- */
.hs-precio { font-size: var(--t-2xl); font-weight: var(--peso-fuerte); letter-spacing: -.03em; }
.hs-precio--sm { font-size: var(--t-lg); }
.hs-precio__antes { font-size: var(--t-sm); color: var(--texto-tenue); text-decoration: line-through; font-weight: var(--peso-normal); }

/* --- Campos -------------------------------------------------------------- */
.hs-campo {
  width: 100%; padding: var(--e3) var(--e4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r);
  background: var(--fondo); font-size: var(--t-sm); transition: var(--trans);
}
.hs-campo:focus { border-color: var(--hs-negro); box-shadow: var(--anillo); outline: none; }
.hs-etiqueta-campo {
  display: block; margin-bottom: var(--e2);
  font-size: var(--t-sm); font-weight: var(--peso-medio);
}

/* --- Rejilla de productos ------------------------------------------------ */
.hs-rejilla { display: grid; gap: var(--e5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .hs-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .hs-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .hs-rejilla { grid-template-columns: 1fr; } }

/* --- Barra de filtros ---------------------------------------------------- */
.hs-filtros {
  display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2);
  scrollbar-width: none;
}
.hs-filtros::-webkit-scrollbar { display: none; }
.hs-filtro {
  flex: none; padding: var(--e2) var(--e4);
  border: 1px solid var(--borde); border-radius: var(--r-full);
  background: var(--fondo); font-size: var(--t-sm); font-weight: var(--peso-medio);
  cursor: pointer; transition: var(--trans);
}
.hs-filtro:hover { border-color: var(--hs-negro); }
.hs-filtro.esta-activa { background: var(--hs-negro); color: var(--texto-inv); border-color: var(--hs-negro); }

/* --- Utilidades ---------------------------------------------------------- */
.hs-fila { display: flex; align-items: center; gap: var(--e3); }
.hs-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.hs-oculto-movil { }
@media (max-width: 760px) {
  :root { --canal: 16px; }
  .hs-oculto-movil { display: none !important; }
}
.hs-solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Estado vacío -------------------------------------------------------
   Antes era una línea de texto gris y un botón suelto: se veía a medio
   hacer. Un estado vacío es una oportunidad de decir algo, no un error. */
.hs-vacio { max-width: 520px; margin: 0 auto; padding: var(--e16) var(--e5);
  text-align: center; }
.hs-vacio__arte { width: 160px; margin: 0 auto var(--e6); }
.hs-vacio__arte svg { width: 100%; display: block; }
.hs-vacio h2 { font-size: var(--t-xl); line-height: var(--i-xl); margin-bottom: var(--e3); }
.hs-vacio p { color: var(--texto-medio); font-size: var(--t-base);
  line-height: var(--i-base); margin-bottom: var(--e8); }
.hs-vacio__acciones { display: flex; gap: var(--e3); justify-content: center;
  flex-wrap: wrap; }

/* --- Contador circular --------------------------------------------------
   El número dentro de un círculo. Un componente porque estaba copiado en
   cuatro sitios y en los cuatro salía descentrado hacia abajo: heredaban
   el line-height de 24px del cuerpo, que es más alto que el círculo, así
   que `place-items: center` centraba una caja de 24px dentro de una de 17.
   `line-height: 1` es lo que lo arregla; el resto es cosmética. */
.hs-contador {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;                     /* <- lo importante */
  font-variant-numeric: tabular-nums; /* el 1 no baila frente al 8 */
  font-weight: var(--peso-fuerte);
  border-radius: var(--r-full);
  background: var(--hs-amarillo); color: var(--hs-negro);
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px;
}
.hs-contador--grande { min-width: 30px; height: 30px; font-size: var(--t-sm); }
.hs-contador--oscuro { background: var(--hs-negro); color: var(--hs-amarillo); }
.hs-contador--apagado { background: var(--borde); color: var(--texto-medio); }