/* ═══════════════════════════════════════════════════════════════════════════
   QUÍMICA MARCELO — muestra del pedido
   Móvil primero: se llega escaneando un QR de papel, parado en el mostrador.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFÍAS (autoalojadas, sin CDN) ────────────────────────────────── */

/* Sólo el peso 800: la condensada se usa siempre en titular, y un peso que no
   se usa es peso que igual hay que subir al servidor. */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('assets/fonts/barlowcondensed-800-latin.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
/* IBM Plex Sans y no Inter: nació como tipografía técnica e industrial, que es
   el registro de una distribuidora química. Inter es la fuente por defecto de
   todo el software de los últimos años y no dice nada del rubro. Las dos tienen
   números tabulares, que es lo que la columna de precios necesita. */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('assets/fonts/ibmplexsans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('assets/fonts/ibmplexsans-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('assets/fonts/ibmplexsans-700-latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── TOKENS ─────────────────────────────────────────────────────────────── */

:root {
  /* Marca. Muestreados del logo, no inventados. */
  --azul:        #021B3C;
  --azul-claro:  #0A2E5C;
  --azul-linea:  #16406F;
  --amarillo:    #F0B006;
  --naranja:     #F16C19;   /* ⚠️ SÓLO detalles chicos. Nunca en bloque grande. */
  --blanco:      #FFFFFF;

  /* Superficies de trabajo. La lista densa vive en claro: 40 renglones sobre
     azul serían agotadores de leer. El azul es el marco, no el fondo. */
  --fondo:       #F1F4F7;
  --superficie:  #FFFFFF;
  --linea:       #DFE5EC;
  --texto:       #0E1B2A;
  --texto-suave: #5A6B7D;

  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --cuerpo:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radio: 10px;
  --barra-alto: 68px;
  --ancho: 1080px;
}

/* ── BASE ───────────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
  overflow-x: hidden;            /* red de seguridad: nunca scroll horizontal */
  -webkit-font-smoothing: antialiased;
}

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

/* iOS hace zoom al enfocar un campo de menos de 16px. Con esto no. */
input, select { font-size: 16px; }

:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
  border-radius: 4px;
}
.sobre-azul :focus-visible { outline-color: var(--amarillo); }

.limite { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }

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

/* ── ENCABEZADO ─────────────────────────────────────────────────────────── */

.tope {
  position: sticky; top: 0; z-index: 30;
  background: var(--azul);       /* exacto al fondo cocido del PNG del logo */
  border-bottom: 1px solid var(--azul-linea);
}
.tope .limite { display: flex; align-items: center; gap: 10px; height: 54px; }

.tope img { height: 34px; width: auto; display: block; }

.tope-nombre {
  font-family: var(--display);
  font-weight: 800; font-size: 20px; letter-spacing: .01em;
  color: var(--blanco); text-transform: uppercase; line-height: 1;
}
.tope-nombre span { color: var(--amarillo); }

/* Hero: compacto a propósito. Esto no es una landing, es un talonario de
   pedidos — el que entra vino a pedir, no a leer. */
.hero {
  position: relative;
  background: var(--azul);
  overflow: hidden;
}
/* hero-web.jpg = la banda recortada y comprimida (106 KB). El original de
   3,1 MB queda en assets/ para impresión, ⛔ no se sirve a la web: esta página
   se abre con datos móviles parado en un mostrador. */
.hero-foto {
  position: absolute; inset: 0;
  background: url('assets/hero-web.jpg') center 45% / cover no-repeat;
  opacity: .5;
}
.hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,27,60,.92) 0%, rgba(2,27,60,.72) 55%, rgba(2,27,60,.96) 100%);
}
.hero .limite { position: relative; padding-top: 22px; padding-bottom: 22px; }

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 11vw, 60px);
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--blanco);
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--amarillo); display: block; }

.hero p {
  margin: 12px 0 0;
  max-width: 34em;
  color: #C3D4E6;
  font-size: 14.5px;
}

.rubros {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(240,176,6,.35);
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  color: var(--blanco); text-transform: uppercase;
}

/* ── AVISO DE MUESTRA ───────────────────────────────────────────────────── */

.aviso-muestra {
  background: var(--amarillo);
  color: var(--azul);
  font-weight: 700; font-size: 12.5px;
  text-align: center;
  padding: 8px 16px;
}

/* ── CATEGORÍAS ─────────────────────────────────────────────────────────── */

.categorias {
  position: sticky; top: 54px; z-index: 20;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.categorias-scroll {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.categorias-scroll::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: var(--blanco);
}

/* ── LISTA DE PRODUCTOS ─────────────────────────────────────────────────── */

.lista { padding: 14px 16px calc(var(--barra-alto) + 28px); max-width: var(--ancho); margin: 0 auto; }

.producto {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 13px 14px;
  margin-bottom: 10px;
}
/* Un producto ya cargado se marca en el propio número, que es el dato que
   importa, y no con una barra de color al costado de la tarjeta. */
.producto.en-pedido { border-color: var(--azul); }

.producto-cabeza { display: flex; align-items: baseline; gap: 12px; }

.producto-nombre {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 15.5px; line-height: 1.25;
}
.producto-presentacion {
  display: block;
  font-weight: 400; font-size: 12.5px; color: var(--texto-suave);
  margin-top: 2px;
}
.producto-precio {
  flex: none;
  font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.producto-precio small {
  display: block; text-align: right;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--texto-suave); text-transform: uppercase;
}

/* El rinde es argumento de plata para un comercio, no una nota al pie. */
.rinde {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 9px;
  background: #FFF6DC;
  border: 1px solid #F3DFA0;
  border-radius: 6px;
  font-size: 12px; font-weight: 600; color: #6B4E00;
}

.producto-controles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px;
}

select.variante {
  flex: 1 1 150px; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--linea); border-radius: 8px;
  background: var(--superficie);
}
select.variante.falta { border-color: var(--naranja); background: #FFF3EB; }

.envase {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--texto-suave);
  cursor: pointer;
}
.envase input { width: 17px; height: 17px; accent-color: var(--azul); margin: 0; }

.envase-incluido {
  font-size: 12.5px; font-weight: 600; color: var(--texto-suave);
  background: var(--fondo); border-radius: 6px; padding: 5px 9px;
}

/* Selector de cantidad: el corazón del talonario. Blancos de toque grandes. */
.cantidad { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.cantidad button {
  width: 40px; height: 40px;
  border: 1px solid var(--linea); background: var(--superficie);
  font-size: 20px; font-weight: 600; line-height: 1;
  color: var(--azul); cursor: pointer;
}
.cantidad button:first-child { border-radius: 8px 0 0 8px; }
.cantidad button:last-child  { border-radius: 0 8px 8px 0; background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.cantidad button:disabled { opacity: .35; cursor: default; }
.cantidad output {
  min-width: 42px; height: 40px;
  display: grid; place-items: center;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.cantidad output.cargado {
  background: var(--azul); color: var(--blanco);
  border-color: var(--azul);
}

.nota-renglon {
  margin-top: 9px;
  font-size: 12.5px; font-weight: 600;
  color: #A24608;
  background: #FFF3EB; border: 1px solid #F5C7A6;
  padding: 6px 9px; border-radius: 6px;
}
.nota-renglon::before { content: '⚠ '; color: var(--naranja); }
.nota-cargado {
  margin-top: 9px; font-size: 12.5px; color: var(--texto-suave);
}

/* ── BARRA DE PEDIDO (fija abajo en celular) ────────────────────────────── */

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--azul);
  border-top: 1px solid var(--azul-linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra .limite {
  display: flex; align-items: center; gap: 12px;
  height: var(--barra-alto);
}
.barra-total { flex: 1; min-width: 0; color: var(--blanco); }
.barra-total b {
  display: block;
  font-size: 21px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.barra-total span { font-size: 12px; color: #9FB6CE; }

.boton {
  flex: none;
  padding: 13px 20px;
  border: 0; border-radius: 8px;
  background: var(--amarillo); color: var(--azul);
  font-weight: 700; font-size: 15px;
  cursor: pointer;
}
.boton:disabled { background: #26456B; color: #8AA3BF; cursor: default; }
.boton-ancho { width: 100%; }

/* ── HOJA DEL PEDIDO ────────────────────────────────────────────────────── */

.hoja[hidden] { display: none; }
.hoja {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(2,27,60,.55);
}
.hoja-caja {
  background: var(--superficie);
  border-radius: 16px 16px 0 0;
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: subir .22s ease-out;
}
@keyframes subir { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }

.hoja-cabeza {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-bottom: 1px solid var(--linea);
}
.hoja-cabeza h2 {
  flex: 1; margin: 0;
  font-family: var(--display); font-weight: 800; font-size: 24px;
  text-transform: uppercase; letter-spacing: .01em;
}
.cerrar {
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--linea); background: var(--superficie);
  font-size: 20px; line-height: 1; cursor: pointer;
}

.hoja-cuerpo { overflow-y: auto; padding: 4px 16px 16px; }
.hoja-pie { border-top: 1px solid var(--linea); padding: 14px 16px; background: var(--superficie); }

.renglon {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.renglon-texto { flex: 1; min-width: 0; }
.renglon-texto b { font-weight: 600; }
.renglon-detalle { display: block; font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.renglon-sub { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quitar {
  border: 0; background: none; padding: 4px;
  color: var(--texto-suave); cursor: pointer; font-size: 13px;
  text-decoration: underline;
}

.total-linea {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0 4px;
  font-family: var(--display); font-weight: 800; font-size: 27px;
  text-transform: uppercase;
}
.total-linea span { font-variant-numeric: tabular-nums; }

.campo { margin-top: 12px; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); margin-bottom: 5px; }
.campo input {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie);
}
.campo input.falta { border-color: var(--naranja); background: #FFF3EB; }

.aviso {
  margin-top: 12px; padding: 10px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  background: #FFF3EB; color: #A24608; border: 1px solid #F5C7A6;
}
.aviso.info { background: var(--fondo); color: var(--texto-suave); border-color: var(--linea); }

.copiar-caja { margin-top: 12px; }
.copiar-caja textarea {
  width: 100%; min-height: 130px; padding: 10px;
  border: 1px solid var(--linea); border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: 12.5px;
  resize: vertical;
}

.vacio { padding: 34px 8px; text-align: center; color: var(--texto-suave); }

/* ── PIE ────────────────────────────────────────────────────────────────── */

.pie {
  background: var(--azul); color: #8AA3BF;
  padding: 22px 16px calc(var(--barra-alto) + 22px);
  font-size: 12.5px; text-align: center;
}
.pie a { color: var(--amarillo); }

/* ── PANTALLA ANCHA ─────────────────────────────────────────────────────── */

@media (min-width: 860px) {
  body { font-size: 15.5px; }

  .contenido {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 22px;
    max-width: var(--ancho); margin: 0 auto; padding: 0 16px;
    align-items: start;
  }
  .lista { padding: 18px 0 40px; max-width: none; }

  /* En pantalla ancha el pedido es panel al costado y la barra fija se va. */
  .barra { display: none; }
  .hoja {
    position: sticky; top: 122px; inset: auto;
    display: block; background: none; z-index: 10;
    margin: 18px 0 40px;
  }
  .hoja[hidden] { display: block; }
  .hoja-caja {
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    max-height: calc(100vh - 150px);
    animation: none;
  }
  .cerrar { display: none; }
  .pie { padding-bottom: 22px; }
}

/* ── MOVIMIENTO REDUCIDO ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}