/* Tienda pública: catálogo, pedido y envío por WhatsApp. Sin fuentes ni recursos externos (la CSP solo admite 'self').
   Los tokens y la escala de espaciado salen de estilos.css, el panel del administrador. */

:root {
  /* Colores: tema claro */
  --bg: #f4f6fa;
  --superficie: #ffffff;
  --superficie-2: #eef2f8;
  --foto-tile: #eef0f3; /* fondo del tile de las fotos de producto; igual al color horneado en la imagen */
  --texto: #0f172a;
  --texto-suave: #526072;
  --linea: #dde3ec;
  --borde-campo: #7b889c; /* borde de campos y botones: 3:1 contra el fondo y las superficies (WCAG 1.4.11) */
  --acento: #1d4ed8;
  --acento-fuerte: #1e40af;
  --acento-suave: #eef2ff;
  --texto-sobre-acento: #ffffff;
  --ok-fondo: #dcfce7;
  --ok-texto: #14532d;
  --aviso-fondo: #fef3c7;
  --aviso-texto: #78350f;
  --aviso-borde: #f3d38a;
  --error-fondo: #fee2e2;
  --error-texto: #7f1d1d;
  --error-borde: #fca5a5;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --sombra-alta: 0 6px 16px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.07);

  /* Espaciado: escala de 4 y 8 px */
  --esp-4: 4px;
  --esp-8: 8px;
  --esp-12: 12px;
  --esp-16: 16px;
  --esp-24: 24px;
  --esp-32: 32px;
  --esp-48: 48px;

  /* Forma y texto */
  --radio: 12px;
  --objetivo: 44px; /* alto y ancho mínimos de todo lo que se toca */
  --ancho-max: 1100px;
  --alto-cabecera: 72px; /* alto del menú fijo; tienda.js lo reemplaza por el real, que cambia con el texto y el ancho */
  --tam-13: 0.8125rem;
  --tam-14: 0.875rem;
  --tam-16: 1rem;
  --tam-20: 1.25rem;
  --tam-24: 1.5rem;
  --tam-32: 2rem;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-fija: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --transicion: 150ms ease;

  color-scheme: light;
}

/* Tema oscuro: lo pide el sistema, salvo que la página fije el tema claro con data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --superficie: #121b2e;
    --superficie-2: #1a2540;
    --foto-tile: #eef0f3;
    --texto: #e8edf7;
    --texto-suave: #a9b5c9;
    --linea: #2a3650;
    --borde-campo: #7f8da6;
    --acento: #8ab4ff;
    --acento-fuerte: #b0cdff;
    --acento-suave: #172447;
    --texto-sobre-acento: #0b1220;
    --ok-fondo: #11331f;
    --ok-texto: #a7f3c4;
    --aviso-fondo: #3a2a07;
    --aviso-texto: #fde8a6;
    --aviso-borde: #6b4e12;
    --error-fondo: #3d1414;
    --error-texto: #fecaca;
    --error-borde: #7f2d2d;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --sombra-alta: 0 10px 24px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

/* Tema oscuro fijado por la página. Mismos valores que el bloque anterior: una prueba lo comprueba. */
:root[data-theme="dark"] {
  --bg: #0b1220;
  --superficie: #121b2e;
  --superficie-2: #1a2540;
  --foto-tile: #eef0f3;
  --texto: #e8edf7;
  --texto-suave: #a9b5c9;
  --linea: #2a3650;
  --borde-campo: #7f8da6;
  --acento: #8ab4ff;
  --acento-fuerte: #b0cdff;
  --acento-suave: #172447;
  --texto-sobre-acento: #0b1220;
  --ok-fondo: #11331f;
  --ok-texto: #a7f3c4;
  --aviso-fondo: #3a2a07;
  --aviso-texto: #fde8a6;
  --aviso-borde: #6b4e12;
  --error-fondo: #3d1414;
  --error-texto: #fecaca;
  --error-borde: #7f2d2d;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --sombra-alta: 0 10px 24px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* El menú fijo no tapa lo que recibe el foco ni a dónde lleva un enlace interno. tienda.js pone aquí su alto real. */
  scroll-padding-top: calc(var(--alto-cabecera) + var(--esp-8));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--tam-16);
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

a {
  color: var(--acento);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.solo-lector {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--esp-16);
  top: -100px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo);
  padding: var(--esp-8) var(--esp-16);
  border-radius: var(--radio);
  background: var(--acento);
  color: var(--texto-sobre-acento);
}

.saltar:focus {
  top: var(--esp-16);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--esp-16);
}

/* Cabecera fija con el acceso al pedido */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie);
}

/* Con poco alto (celular de lado) el menú fijo se comería la pantalla: ahí se desplaza con la página */
@media (max-height: 559px) {
  .cabecera {
    position: static;
  }
}

/* Si el título y el acceso al pedido no caben en una fila (pantalla angosta o texto muy grande), el acceso baja a otra */
.cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4) var(--esp-12);
  min-height: 64px;
  padding-block: var(--esp-8);
}

.marca-grupo {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--esp-12);
  min-width: 0;
}

/* Logo: un cuadro con el acento y, dentro, el teléfono con un rayo (celulares «express») */
.marca-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--acento);
  color: var(--texto-sobre-acento);
  box-shadow: var(--sombra);
}

.marca {
  flex: 1 1 8rem;
  min-width: 0;
  font-size: var(--tam-16);
  font-weight: 700;
  line-height: 1.25;
}

.enlace-pedido {
  flex: none;
}

.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--esp-8);
  border-radius: 999px;
  background: var(--texto-sobre-acento);
  color: var(--acento);
  font-size: var(--tam-13);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.intro {
  max-width: 60ch;
  padding-block: var(--esp-24) var(--esp-8);
  color: var(--texto-suave);
}

.seccion {
  display: flex;
  flex-direction: column;
  gap: var(--esp-12);
  padding-block: var(--esp-24);
}

.seccion > h2 {
  font-size: var(--tam-20);
  line-height: 1.3;
}

.seccion-angosta {
  max-width: 760px;
}

/* Los títulos reciben el foco por código al cambiar de paso: no necesitan anillo */
.seccion h2:focus {
  outline: none;
}

.ayuda {
  color: var(--texto-suave);
  font-size: var(--tam-14);
}

/* Botones y campos */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  min-width: var(--objetivo);
  min-height: var(--objetivo);
  padding: var(--esp-8) var(--esp-16);
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.btn-primario {
  background: var(--acento);
  color: var(--texto-sobre-acento);
}

.btn-primario:hover {
  background: var(--acento-fuerte);
}

.btn-secundario {
  border-color: var(--borde-campo);
  background: var(--superficie);
  color: var(--texto);
}

.btn-secundario:hover {
  background: var(--acento-suave);
}

.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover,
.btn:disabled {
  border-color: var(--linea);
  background: var(--superficie-2);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  min-width: 0;
}

.campo label {
  font-size: var(--tam-14);
  font-weight: 600;
}

.control {
  display: block;
  width: 100%;
  min-height: var(--objetivo);
  padding: var(--esp-8) var(--esp-12);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
}

textarea.control {
  min-height: 96px;
  resize: vertical;
}

.control::placeholder {
  color: var(--texto-suave);
  opacity: 1;
}

.control:focus-visible {
  border-color: var(--acento);
  outline-offset: 0;
}

.ayuda-campo {
  color: var(--texto-suave);
  font-size: var(--tam-13);
}

.campos-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-16);
}

/* Campo trampa para bots: fuera de la vista, sin foco y sin lector de pantalla */
.trampa {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Filtros del catálogo: una barra de búsqueda con su propia superficie */
.filtros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-12);
  padding: var(--esp-16);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

/* Tarjetas de producto */
.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--esp-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--esp-12);
  min-width: 0;
  padding: var(--esp-16);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overflow-wrap: anywhere;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

/* Elevación sutil al pasar el puntero; en pantallas táctiles no aplica */
@media (hover: hover) {
  .tarjeta:hover {
    transform: translateY(-2px);
    border-color: var(--borde-campo);
    box-shadow: var(--sombra-alta);
  }
}

/* Marcador de imagen del producto (hasta que haya foto real): miniatura enmarcada arriba de la tarjeta */
.tarjeta-imagen {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  overflow: hidden;
}

.tarjeta-imagen svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tarjeta-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  background: var(--foto-tile);
}

.ph-cuerpo {
  fill: var(--superficie);
  stroke: var(--texto-suave);
  stroke-width: 3;
}

.ph-pantalla {
  fill: var(--texto-suave);
  fill-opacity: 0.1;
}

.ph-detalle {
  fill: var(--texto-suave);
  fill-opacity: 0.55;
}

.ph-inicial {
  font-family: var(--fuente);
  font-weight: 700;
  font-size: 46px;
  fill-opacity: 0.92;
}

.tarjeta-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-8);
}

.tarjeta-titulo {
  font-size: var(--tam-16);
  font-weight: 700;
  line-height: 1.3;
}

.tarjeta-marca {
  display: block;
  color: var(--texto-suave);
  font-size: var(--tam-14);
  font-weight: 600;
}

.etiqueta {
  display: inline-block;
  padding: var(--esp-4) var(--esp-8);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: var(--tam-13);
  font-weight: 600;
  line-height: 1.2;
}

.etiqueta-ok {
  background: var(--ok-fondo);
  color: var(--ok-texto);
}

.etiqueta-aviso {
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
}

.etiqueta-error {
  background: var(--error-fondo);
  color: var(--error-texto);
}

.tarjeta-descripcion {
  color: var(--texto-suave);
  font-size: var(--tam-14);
}

.tarjeta-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4) var(--esp-8);
  font-size: var(--tam-14);
}

.especificaciones {
  border-top: 1px solid var(--linea);
}

.especificaciones > summary {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  min-height: var(--objetivo);
  color: var(--acento);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.especificaciones > summary::-webkit-details-marker {
  display: none;
}

/* Flecha dibujada con bordes: se ve igual en todos los navegadores y no la lee el lector de pantalla */
.especificaciones > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transicion);
}

.especificaciones[open] > summary::before {
  transform: rotate(45deg);
}

.lista-especificaciones {
  display: grid;
  gap: var(--esp-8);
  padding-bottom: var(--esp-8);
  font-size: var(--tam-14);
}

.lista-especificaciones dt {
  color: var(--texto-suave);
  font-size: var(--tam-13);
}

.lista-especificaciones dd {
  margin: 0;
}

.tarjeta-pie {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  margin-top: auto;
}

.precio {
  font-size: var(--tam-24);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.precio-nota {
  color: var(--texto-suave);
  font-size: var(--tam-13);
}

.tarjeta-en-pedido {
  color: var(--ok-texto);
  background: var(--ok-fondo);
  padding: var(--esp-4) var(--esp-8);
  border-radius: var(--radio);
  font-size: var(--tam-14);
  font-weight: 600;
}

/* Avisos, errores y estados vacíos */
.aviso {
  padding: var(--esp-12) var(--esp-16);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  font-size: var(--tam-14);
}

.errores {
  padding: var(--esp-12) var(--esp-16);
  border: 1px solid var(--error-borde);
  border-radius: var(--radio);
  background: var(--error-fondo);
  color: var(--error-texto);
  font-size: var(--tam-14);
}

.errores:empty {
  display: none;
}

.errores p {
  font-weight: 600;
}

.errores ul {
  margin: var(--esp-8) 0 0;
  padding-left: var(--esp-24);
}

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-12);
  padding: var(--esp-24);
  border: 1px dashed var(--borde-campo);
  border-radius: var(--radio);
  color: var(--texto-suave);
  text-align: center;
}

.aviso-global {
  margin-block: var(--esp-16) 0;
}

/* Paneles, pedido y totales */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--esp-16);
  padding: var(--esp-16);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.lineas {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linea {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  padding-block: var(--esp-12);
  border-bottom: 1px solid var(--linea);
}

.linea:first-child {
  padding-top: 0;
}

/* Cada fila de la línea (nombre y total; cantidad y quitar) baja lo que no le cabe en vez de salirse de la pantalla */
.linea-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-8) var(--esp-12);
}

.linea-info {
  flex: 1 1 8rem;
  min-width: 0;
}

.linea-nombre {
  font-weight: 600;
}

.linea-precio {
  color: var(--texto-suave);
  font-size: var(--tam-14);
}

.linea-total {
  flex: none;
  margin-left: auto;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.linea-quitar {
  flex: none;
  margin-left: auto;
}

.cantidad {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--esp-4);
}

.btn-cantidad {
  flex: none;
  width: var(--objetivo);
  height: var(--objetivo);
  padding: 0;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--tam-20);
  line-height: 1;
  cursor: pointer;
}

.btn-cantidad:hover {
  background: var(--acento-suave);
}

.btn-cantidad[aria-disabled="true"],
.btn-cantidad[aria-disabled="true"]:hover {
  border-color: var(--linea);
  background: var(--superficie-2);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.entrada-cantidad {
  flex: none;
  width: 64px;
  min-height: var(--objetivo);
  padding: var(--esp-8) var(--esp-4);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.entrada-cantidad::-webkit-outer-spin-button,
.entrada-cantidad::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.entrada-cantidad:focus-visible {
  border-color: var(--acento);
  outline-offset: 0;
}

.resumen {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
}

.resumen > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-4) var(--esp-12);
}

.resumen dt {
  color: var(--texto-suave);
}

.resumen dd {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.resumen .resumen-total {
  padding-top: var(--esp-8);
  border-top: 1px solid var(--linea);
  font-size: var(--tam-20);
  font-weight: 700;
}

.resumen .resumen-total dt {
  color: var(--texto);
}

.codigo-pedido {
  font-size: var(--tam-20);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.texto-pedido {
  font-family: var(--fuente-fija);
  font-size: var(--tam-14);
  line-height: 1.5;
  white-space: pre-wrap;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-8);
}

.acciones .btn {
  flex: 1 1 auto;
}

.pie {
  margin-top: var(--esp-24);
  padding-block: var(--esp-24) var(--esp-48);
  border-top: 1px solid var(--linea);
  color: var(--texto-suave);
  font-size: var(--tam-14);
}

/* Pantallas medianas y grandes */
@media (min-width: 640px) {
  .filtros {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .campos-fila {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campo-ancho {
    grid-column: 1 / -1;
  }

  .panel {
    padding: var(--esp-24);
  }
}

@media (min-width: 720px) {
  .contenedor {
    padding-inline: var(--esp-24);
  }

  .marca {
    font-size: var(--tam-20);
  }

  .acciones .btn {
    flex: 0 0 auto;
  }
}

/* Movimiento reducido: sin transiciones ni animaciones */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}