/* ═══════════════════════════════════════════════════════════════════════
   Dulce Nevado · helado artesanal de Cayambe

   EL MUNDO: la libreta de fiado. El cuaderno cuadriculado donde toda tienda
   del Ecuador anota quién debe cuánto. Papel, cuadrícula, tinta de esfero y
   la raya roja del margen. Es lo que este sistema reemplaza.

   Los cuatro colores salen del manual de marca, medidos del propio archivo.
   Aquí no son "colores de marca" puestos encima: tienen oficio.

     morado   #774898   la tinta. Todo está escrito con esto.
     fucsia   #e62a76   la raya del margen. Marca dónde estás. Nunca rellena.
     turquesa #00a8b5   lo que debe distinguirse de la tinta sin ser la raya.
     amarillo #fbb901   lo mismo, del otro lado.

   El color de verdad lo traen los productos: la foto del sabor. La libreta es
   tinta sobre papel, y lo que se ve a color es lo que se vende.

   Una sola familia tipográfica, Archivo, para títulos, cifras, etiquetas y
   datos. Un producto en el que la gente hace una tarea no necesita pareja de
   display y texto; necesita una grotesca bien afinada que no cambie de voz.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* la marca, tal cual el manual */
  --morado:    #774898;
  --morado-2:  #603a7c;
  --fucsia:    #e62a76;
  --fucsia-2:  #c81f62;
  --turquesa:  #00a8b5;
  /* El turquesa del manual sobre papel no llega a leerse en letra chica: 2.7
     de contraste. Este es el mismo color oscurecido hasta poder escribir con
     él, igual que --morado-2 y --fucsia-2 hacen con los suyos. */
  --turquesa-2: #0a6570;
  --mango:     #fbb901;
  --lila:      #a97fc9;
  --limon:     #fbb901;

  /* papel y tinta. El papel es papel, no gris de aplicación. */
  --tinta:     #241a2e;
  --tinta-2:   #63566f;
  --tinta-3:   #948aa0;
  --papel:     #ffffff;
  --fondo:     #fcfbfd;
  --fondo-2:   #f5f2f8;
  --riel:      #f7f4fa;
  --linea:     #e2dae9;
  --linea-fina:#eee9f3;

  /* La cuadrícula del cuaderno. No es decoración: es el módulo. */
  --cuadro:    22px;
  --cuadro-tinta: rgba(119, 72, 152, .055);

  /* estados: otro idioma, no el acento */
  --ok:        #16704f;
  --ok-fondo:  #e2f2eb;
  --mal:       #c02434;
  --mal-fondo: #fbe7e9;
  --ojo:       #7d5806;
  --ojo-fondo: #fdf1d4;

  /* Sombras con desplazamiento y difuminado de verdad. Un halo de color sin
     desplazamiento es decoración, no profundidad. */
  --sombra-1: 0 1px 2px rgba(36, 26, 46, .06);
  --sombra-2: 0 8px 24px -6px rgba(36, 26, 46, .14);
  --sombra-3: 0 24px 64px -12px rgba(36, 26, 46, .3);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-full: 999px;

  --sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: var(--sans);
  --mono: "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* Escala fija, no fluida: el dueño mira siempre en el mismo teléfono. */
  --t-xs:  0.72rem;
  --t-sm:  0.82rem;
  --t-base:0.94rem;
  --t-md:  1.06rem;
  --t-lg:  1.25rem;
  --t-xl:  1.5rem;
  --t-2xl: 1.85rem;
  --t-3xl: 2.3rem;

  --sale:  cubic-bezier(.23, 1, .32, 1);
  --mueve: cubic-bezier(.77, 0, .175, 1);
  --toque: cubic-bezier(.32, .72, 0, 1);
}

/* En oscuro el papel se vuelve tinta y la tinta se vuelve papel. La raya del
   margen no cambia de oficio. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --morado: #c9a8e2; --morado-2: #dcc2ef;
    --fucsia: #ff5f96; --fucsia-2: #ff85ae;
    --turquesa: #3ed0da; --turquesa-2: #8ee7ee; --mango: #ffc93c;
    --lila: #c9a8e2; --limon: #ffc93c;
    --tinta: #f4eff8; --tinta-2: #b7a9c5; --tinta-3: #857a92;
    --papel: #241c2e; --fondo: #191223; --fondo-2: #2b2138;
    --riel: #1f1729; --linea: #3b2f4a; --linea-fina: #302542;
    --cuadro-tinta: rgba(201, 168, 226, .05);
    --ok: #4fc79a; --ok-fondo: #102e26; --mal: #ff808d; --mal-fondo: #391b21;
    --ojo: #e8bf62; --ojo-fondo: #32270e;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .45);
    --sombra-2: 0 8px 24px -6px rgba(0, 0, 0, .55);
    --sombra-3: 0 24px 64px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-tema="oscuro"] {
  --morado: #c9a8e2; --morado-2: #dcc2ef;
  --fucsia: #ff5f96; --fucsia-2: #ff85ae;
  --turquesa: #3ed0da; --turquesa-2: #8ee7ee; --mango: #ffc93c;
  --lila: #c9a8e2; --limon: #ffc93c;
  --tinta: #f4eff8; --tinta-2: #b7a9c5; --tinta-3: #857a92;
  --papel: #241c2e; --fondo: #191223; --fondo-2: #2b2138;
  --riel: #1f1729; --linea: #3b2f4a; --linea-fina: #302542;
  --cuadro-tinta: rgba(201, 168, 226, .05);
  --ok: #4fc79a; --ok-fondo: #102e26; --mal: #ff808d; --mal-fondo: #391b21;
  --ojo: #e8bf62; --ojo-fondo: #32270e;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .45);
  --sombra-2: 0 8px 24px -6px rgba(0, 0, 0, .55);
  --sombra-3: 0 24px 64px -12px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--tinta);
  display: flex;
  min-height: 100dvh;
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* es un libro: las columnas cuadran */
}

/* La cuadrícula del cuaderno, bajo todo, a bajísimo contraste. */
main {
  background-image:
    linear-gradient(var(--cuadro-tinta) 1px, transparent 1px),
    linear-gradient(90deg, var(--cuadro-tinta) 1px, transparent 1px);
  background-size: var(--cuadro) var(--cuadro);
  background-position: -1px -1px;
}
/* Sin nada escrito no hay libreta: la cuadrícula es el papel de una hoja que
   se está usando. Mientras se espera al servidor —al arrancar y en cada
   cambio de pantalla— el fondo se queda liso, y así el momento en blanco no
   promete un sistema a quien todavía no lo ha abierto. */
main:empty { background-image: none; }

/* Los títulos no cambian de familia: cambian de ancho y de peso. Archivo trae
   el eje de ancho, así que un encabezado se estrecha en vez de gritar. */
.cabecera h2, .marca h1, .interpretacion, .vacio strong, dialog h2,
.cifra-mayor, .cifra-media, .tira-datos dd, .metrica .valor {
  font-family: var(--sans);
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: -.02em;
}
.num, td.num, input[type="number"], .cifra { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════ superficies del navegador ═══
   Lo que no dibujamos también es parte del diseño. Estos cinco salen del
   papel y la tinta, no de los grises de fábrica. */
::selection { background: color-mix(in srgb, var(--fucsia) 22%, transparent); color: var(--tinta); }
:root { accent-color: var(--fucsia); caret-color: var(--fucsia); }
* { scrollbar-color: var(--linea) transparent; scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 2px; border-radius: 3px; }
a { color: var(--fucsia); text-underline-offset: .18em; text-decoration-thickness: 1px; }



/* ══════════════════════════════════════════════════════════ riel lateral */
#menu {
  width: 236px;
  flex-shrink: 0;
  background: var(--riel);
  border-right: 1px solid var(--linea);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.marca { padding: 4px 10px 26px; display: flex; align-items: center; gap: 11px; }

#menu-lista {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0;
  position: relative;
}
/* La raya del margen. Es lo único que se mueve en todo el sistema: viaja a la
   pantalla en la que estás, como el dedo que baja por el renglón de la
   libreta. Comunica estado, que es lo único que un producto puede animar. */
#menu-lista::before {
  content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 1px;
  background: var(--fucsia);
  transform: translateY(var(--raya-y, 0)) scaleY(var(--raya-alto, 0));
  transform-origin: 0 0;
  opacity: var(--raya-visible, 0);
  transition: transform 240ms var(--sale), opacity 160ms var(--sale);
}

/* El botón de menú solo existe en pantallas angostas. */
#menu-alternar {
  all: unset;
  display: none; margin-left: auto; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: var(--r-full);
  background: var(--morado); color: #fff; cursor: pointer;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
#menu-alternar svg { width: 15px; height: 15px; fill: currentColor; }
#menu-alternar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.marca .cono { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.marca h1 {
  font-size: 18px; font-weight: 800; line-height: 1.05; color: var(--morado);
}
.marca .sublinea {
  font-size: 9.5px; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
}

#menu-lista button {
  all: unset;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--tinta-2);
  display: flex; gap: 10px; align-items: center;
  padding-left: 16px;
  transition: background 140ms var(--sale), color 140ms var(--sale);
}
@media (hover: hover) and (pointer: fine) {
  #menu-lista button:hover { background: var(--fondo-2); color: var(--tinta); }
}
#menu-lista button.activo { color: var(--tinta); font-weight: 650; background: none; }
#menu .grupo {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--tinta-3); padding: 20px 12px 7px; font-weight: 700;
}
#menu .pie-menu { margin-top: auto; padding-top: 18px; }

#quien-soy {
  padding: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 600;
  border-top: 1px solid var(--linea); color: var(--tinta);
}
#quien-soy span {
  display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--tinta-3); font-weight: 700; margin-top: 2px;
}
#quien-soy:empty { display: none; }

#chip-pedidos:empty { display: none; }
#chip-pedidos {
  margin-left: auto; background: var(--limon); color: #1a1119;
  border-radius: var(--r-full); padding: 1px 8px; font-size: 11px; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════ lienzo */
main { flex: 1; padding: 40px 48px 90px; max-width: 1280px; min-width: 0; }

.cabecera {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 28px; flex-wrap: wrap; gap: 16px;
}
.cabecera h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; line-height: 1.02; }
.cabecera .acciones { flex: 0 0 auto; justify-content: flex-end; }
.cabecera p {
  color: var(--tinta-2); font-size: var(--t-base); margin-top: 6px;
  max-width: 62ch;
}

/* ══════════════════════════════════════════════════════════════ piezas */
/* Una libreta no tiene tarjetas. Las secciones se separan con una raya y con
   aire; la caja solo aparece donde la elevación dice algo de verdad, como en
   un diálogo. Encima del encabezado va más aire que debajo. */
.tarjeta {
  border-top: 1px solid var(--linea);
  padding: 26px 0 4px;
  margin-bottom: 20px;
}
.tarjeta + .tarjeta { margin-top: -4px; }
/* En caja alta y muy espaciado un título de sección se lee como antetítulo.
   Aquí es un título: mismo idioma que el resto, solo que en tinta plena. */
.tarjeta h3 {
  font-size: var(--t-md); font-weight: 700; margin-bottom: 14px;
  color: var(--tinta); letter-spacing: -.012em;
  display: flex; align-items: center; gap: 8px;
}

.rejilla {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

.metrica {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 18px 20px 17px; transition: border-color .14s ease;
}
.metrica:hover { border-color: var(--tinta-3); }
.metrica .etiqueta {
  font-size: 9.5px; color: var(--tinta-3); text-transform: uppercase;
  letter-spacing: .16em; font-weight: 700;
}
.metrica .valor { font-size: 30px; margin-top: 7px; line-height: 1; }
.metrica .pie { font-size: 11.5px; color: var(--tinta-2); margin-top: 6px; }
.positivo { color: var(--ok); }
.negativo { color: var(--mal); }

/* ══════════════════════════════════════════════════════════════ tablas */
.tabla-envuelta { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinta-3); padding: 0 12px 10px; border-bottom: 2px solid var(--morado);
  font-weight: 700; white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--linea-fina); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--fondo-2); }
.num { text-align: right; white-space: nowrap; }
th.num { text-align: right; }
.tenue { color: var(--tinta-2); font-size: 12.5px; }
.fuerte { font-weight: 650; }

/* ═════════════════════════════════════════════════════════ marcas/tags */
.marca-tipo {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-full);
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--fondo-2); color: var(--tinta-2); white-space: nowrap;
}
.t-venta, .t-cobro, .t-aporte { background: var(--ok-fondo); color: var(--ok); }
.t-compra     { background: color-mix(in srgb, var(--lila) 26%, transparent); color: #6b3fa0; }
.t-gasto, .t-pago, .t-retiro { background: var(--mal-fondo); color: var(--mal); }
.t-produccion { background: var(--ojo-fondo); color: var(--ojo); }
.t-ajuste     { background: var(--ojo-fondo); color: var(--ojo); }
.t-merma      { background: var(--mal-fondo); color: var(--mal); }
/* Una casilla con su texto al lado, alineados por la primera linea: el texto
   puede envolverse en dos renglones y la casilla se queda arriba, junto a la
   palabra que la nombra, en vez de irse al centro. */
.casilla { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.casilla input[type="checkbox"] { width: auto; margin: 2px 0 0; flex: none; }
.casilla > span { font-weight: 600; }

/* Se compra el dia que se usa. No es alarma ni error — es como trabaja la
   fruta — asi que va en gris, no en rojo. */
.t-dia        { background: color-mix(in srgb, var(--texto) 9%, transparent); color: var(--tenue); }

.e-nuevo      { background: var(--limon); color: #1a1119; }
.e-preparando { background: color-mix(in srgb, var(--lila) 26%, transparent); color: #6b3fa0; }
.e-entregado  { background: var(--ok-fondo); color: var(--ok); }
.e-cancelado  { background: var(--fondo-2); color: var(--tinta-3); }

/* ═════════════════════════════════════════════════════════════ botones */
/* Un enlace que hace de botón (el de WhatsApp, por ejemplo) se ve igual: al
   que lo toca no le importa si por dentro es <a> o <button>. */
a.accion { text-decoration: none; display: inline-block; }
button.accion, a.accion {
  all: unset;
  /* `all: unset` también tira el border-box global, y entonces un botón al
     100% mide 100% MÁS su relleno y se sale de su caja. Se devuelve aquí. */
  box-sizing: border-box;
  background: var(--tinta); color: var(--fondo);
  padding: 10px 18px; border-radius: var(--r-sm);
  cursor: pointer; font-weight: 650; font-size: 13.5px; text-align: center;
  white-space: nowrap;
  transition: opacity 160ms var(--sale), transform 160ms var(--sale),
              background-color 160ms var(--sale), border-color 160ms var(--sale);
}
/* El hover solo donde hay puntero: en el celular se dispara al tocar y deja
   el boton pegado en su estado de hover. */
@media (hover: hover) and (pointer: fine) {
  button.accion:hover, a.accion:hover { opacity: .88; }
}
/* Encogerlo al presionar es lo que hace que el boton conteste. Un pixel de
   desplazamiento no se siente; un 3% de escala si. */
button.accion:active, a.accion:active { transform: scale(.97); }
button.accion:disabled { opacity: .3; cursor: not-allowed; }
button.principal, a.principal { background: var(--fucsia); color: #fff; }
button.principal:hover, a.principal:hover { background: var(--fucsia-2); opacity: 1; }
button.suave, a.suave {
  background: transparent; color: var(--tinta); border: 1px solid var(--linea);
}
button.suave:hover, a.suave:hover { background: var(--fondo-2); opacity: 1; border-color: var(--tinta-3); }
button.mini, a.mini { padding: 6px 11px; font-size: 12px; }

/* ═════════════════════════════════════════════════════════ formularios */
input, select, textarea {
  font-family: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: var(--papel); color: var(--tinta); width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--fucsia);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fucsia) 20%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
label {
  display: block; font-size: 9.5px; color: var(--tinta-3); margin-bottom: 6px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
}
.campo { margin-bottom: 15px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1; min-width: 132px; }
.fila > .fijo { flex: 0 0 auto; min-width: 0; }

/* ══════════════════════════════════════════════════════════════ captura */
#captura-caja { position: relative; }
#texto-captura {
  font-family: var(--display); font-size: 21px; font-weight: 600;
  padding: 22px 64px 22px 22px; border-radius: var(--r-lg);
  border: 2px solid var(--linea); resize: none; min-height: 80px; line-height: 1.35;
  background: var(--papel); letter-spacing: -.02em;
}
#texto-captura:focus {
  border-color: var(--fucsia);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fucsia) 15%, transparent);
}
.botones-captura { position: absolute; right: 14px; top: 18px; }
#boton-dictar {
  all: unset; cursor: pointer; font-size: 19px; padding: 8px 10px;
  border-radius: 50%; line-height: 1;
}
#boton-dictar:hover { background: var(--fondo-2); }
#boton-dictar.grabando { background: var(--mal-fondo); animation: latido 1.1s infinite; }
@keyframes latido { 50% { opacity: .35; } }

.ejemplos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.ejemplos button {
  all: unset; cursor: pointer; font-size: 12.5px; padding: 6px 13px;
  border-radius: var(--r-full); background: var(--fondo-2); color: var(--tinta-2);
  transition: opacity .12s var(--sale), transform .12s var(--sale);
}
.ejemplos button:hover { background: var(--fucsia); color: #fff; }

.borrador { border-top: 2px solid var(--fucsia); }
.borrador.incompleto { border-top-color: var(--limon); }
.borrador.error { border-top-color: var(--mal); }
.interpretacion { font-size: 25px; margin: 14px 0 6px; line-height: 1.2; }
.efectos { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 16px 0; }
.efectos li { font-size: 13.5px; color: var(--tinta-2); padding-left: 22px; position: relative; }
.efectos li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 2px;
  background: var(--fucsia); border-radius: 2px;
}
.pregunta {
  background: var(--fondo-2); border-radius: var(--r); padding: 14px 15px; margin-top: 12px;
}

/* ══════════════════════════════════════════════════════════════ avisos */
.aviso {
  padding: 13px 16px; border-radius: var(--r); font-size: 13.5px; margin-bottom: 16px;
  line-height: 1.5;
}
.aviso.malo  { background: var(--mal-fondo); color: var(--mal); }
.aviso.bueno { background: var(--ok-fondo);  color: var(--ok); }
.aviso.ojo   { background: var(--ojo-fondo); color: var(--ojo); }

.brindis {
  position: fixed; bottom: 26px; right: 26px; z-index: 99; max-width: 380px;
  box-shadow: var(--sombra-2); margin: 0;
  animation: entra .22s var(--sale);
}
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }

.vacio { text-align: center; padding: 50px 20px; color: var(--tinta-2); font-size: 13.5px; }
.vacio strong { display: block; font-size: 21px; color: var(--tinta); margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════ asiento */
.asiento {
  font-family: var(--mono); font-size: 12px;
  background: var(--fondo-2); border-radius: var(--r); padding: 15px 17px; margin-top: 14px;
}
.asiento .titulo {
  font-weight: 700; margin-bottom: 11px; color: var(--tinta);
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
}
.asiento table { font-size: 12px; }
.asiento td { padding: 3px 8px; border: none; }
.asiento tbody tr:hover { background: transparent; }
.sangria { padding-left: 32px !important; }

/* ═════════════════════════════════════════════════════════════ pestañas */
.pestanas { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.pestanas button {
  all: unset; cursor: pointer; padding: 7px 15px; border-radius: var(--r-full);
  font-size: 12.5px; color: var(--tinta-2); background: var(--fondo-2);
  font-weight: 600; transition: opacity .12s var(--sale), transform .12s var(--sale); text-transform: capitalize;
}
.pestanas button:hover { color: var(--tinta); }
.pestanas button.activo { background: var(--fucsia); color: #fff; }

/* ═════════════════════════════════════════════════════════════ gráfica */
.barra-grafica { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin-top: 14px; }
.barra-grafica div {
  flex: 1; min-height: 3px; border-radius: 3px 3px 0 0;
  background: var(--lila); transition: background .12s ease;
}
.barra-grafica div:hover { background: var(--fucsia); }

/* ═════════════════════════════════════════════════════════════ buscador */
.buscador { position: relative; flex: 1; min-width: 210px; }
.buscador input {
  padding-left: 13px; border: none; border-bottom: 2px solid var(--linea);
  border-radius: 0; background: transparent; font-size: 16px; padding-bottom: 9px;
}
.buscador input:focus { box-shadow: none; border-bottom-color: var(--fucsia); }

/* ═══════════════════════════════════════════════════════════════ modal */
dialog {
  border: none; border-radius: var(--r-lg); padding: 28px 30px; max-width: 700px; width: 92%;
  box-shadow: var(--sombra-3); background: var(--papel); color: var(--tinta);
  max-height: 88vh; overflow-y: auto;
}
dialog::backdrop { background: rgba(26, 17, 25, .55); backdrop-filter: blur(3px); }

/* ═════════════════════════════════════════════════ pantalla de acceso */
.acceso { min-height: 82dvh; display: grid; place-items: center; padding: 20px; }
.acceso-caja {
  width: 100%; max-width: 400px; background: var(--papel);
  border-radius: var(--r-lg); padding: 40px 34px 32px;
  box-shadow: var(--sombra-2); text-align: left;
}
.acceso-caja h2 { font-family: var(--display); font-size: 32px; font-weight: 800; margin-bottom: 4px; }
.cono-grande { width: 62px; height: 62px; margin: 0 auto 22px; display: block; }
.acceso-caja .aviso { margin: 4px 0 12px; }
.acceso-caja a { color: var(--fucsia); font-weight: 600; }

/* ═══════════════════════════════════════════════════ catálogo y fotos */
/* El catálogo es una vitrina: el tendero tiene que poder barrer los sabores
   con el pulgar. Con una sola columna la foto ocupaba la pantalla entera del
   teléfono y para llegar al cuarto sabor había que bajar tres veces. */
.rejilla-catalogo {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
.sabor {
  background: var(--papel); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--linea); transition: transform .14s ease, box-shadow .14s ease;
}
/* Solo con ratón: en el teléfono el :hover se queda pegado después de tocar. */
@media (hover: hover) and (pointer: fine) {
  .sabor:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
}
.sabor .foto {
  width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  background: linear-gradient(155deg, #f7c6d8, #d9b8f0);
  display: grid; place-items: center;
}
.sabor .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sabor .foto .sinfoto { font-size: 34px; opacity: .45; }
.sabor .cuerpo { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 3px; }
.sabor h4 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.sabor .precio { font-size: 27px; color: var(--fucsia); line-height: 1.1; margin-top: 2px; }
/* La cantidad es lo único que se toca en la tarjeta, así que ocupa todo el
   ancho y mide lo que mide un dedo. Los 16px no son estéticos: por debajo de
   eso Safari en iPhone hace zoom al enfocar y descuadra la página. */
.sabor .cuanto { margin-top: 11px; margin-bottom: 5px; }
.sabor input {
  width: 100%; text-align: center; font-size: 16px; padding: 11px 10px;
  letter-spacing: normal; text-transform: none;
}

/* En el celular son dos columnas fijas, no las que quepan: a 360px de pantalla
   `auto-fill` no encuentra sitio para dos y cae a una sola, que es justo lo
   que había que arreglar. El corte está en 480px porque ahí las dos columnas
   forzadas miden lo mismo que las dos que la rejilla arma por su cuenta: se
   pasa de un modo al otro sin que la tarjeta cambie de tamaño.
   La foto conserva su 3/4: es el recorte con el que están tomadas las 12, y
   cuadrarlas les comería un cuarto de la paleta. */
@media (max-width: 480px) {
  .rejilla-catalogo { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sabor .cuerpo { padding: 11px 12px 13px; }
  .sabor h4 { font-size: 14px; }
  .sabor .precio { font-size: 22px; }
  .sabor .cuanto { margin-top: 9px; }
}

.carrito {
  position: sticky; bottom: 20px; margin-top: 22px;
  background: var(--fucsia); color: #fff;
  border-radius: var(--r-lg); padding: 16px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: var(--sombra-2);
}
.carrito .total { font-family: var(--display); font-size: 26px; font-weight: 800; }
.carrito .detalle { flex: 1; font-size: 12.5px; opacity: .85; }
.carrito button.accion { background: #fff; color: var(--fucsia); }
.carrito button.accion:hover { background: var(--limon); color: #1a1119; opacity: 1; }

.espera { text-align: center; padding: 60px 24px; }
/* ═════════════════════════════════════════════════════════════ iconos ═══ */
/* Trazos de Phosphor (MIT). Van al tamaño de la letra que los rodea y toman
   su color, así que nunca se despegan del texto al que acompañan. Sin esta
   regla un SVG sin alto se estira hasta donde le dejen. */
.icono {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  vertical-align: -.19em; display: inline-block;
}
.aviso .icono { width: 1.05em; height: 1.05em; vertical-align: -.16em; }

.espera .icono { width: 62px; height: 62px; margin: 0 auto 16px; display: block; }
.espera h2 { font-family: var(--display); font-size: 30px; font-weight: 800; margin-bottom: 8px; }

.miniatura {
  width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover;
  background: var(--fondo-2); display: block;
}
.miniatura-vacia {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: linear-gradient(155deg, #f7c6d8, #d9b8f0);
  display: grid; place-items: center; font-size: 15px;
}
.celda-producto { display: flex; align-items: center; gap: 11px; }

/* ═══════════════════════════════════════════════════════════ accesible */
:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 2px; }
/* Movimiento reducido no es cero movimiento: lo que ayuda a entender —el
   color, la opacidad— se queda. Lo que se desplaza, se va. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════ responsive */
@media (max-width: 880px) {
  body { flex-direction: column; }

  /* En el celular el riel se convierte en una barra con su botón de menú.
     Antes era una tira horizontal: se veían tres pantallas y el resto —
     Inventario, Resultados, Ajustes, Salir — quedaba fuera del borde. */
  #menu {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 20;
    padding: 0; gap: 0; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--linea);
  }
  .marca { padding: 11px 14px; }
  .marca .sublinea { display: none; }
  .marca h1 { font-size: 16px; }
  #menu-alternar { display: flex; }

  #menu-lista {
    display: none;
    padding: 2px 10px 14px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    border-top: 1px solid var(--linea);
  }
  #menu.abierto #menu-lista { display: flex; }
  #menu-lista button { white-space: nowrap; }
  #menu .grupo { padding: 14px 12px 6px; }
  #menu .pie-menu { margin-top: 10px; }
  main { padding: 22px 16px 70px; }
  .cabecera h2 { font-size: 26px; }
  /* Los botones de la cabecera se reparten a lo ancho en vez de caer
     uno por renglon y empujar la tabla fuera de la pantalla. */
  .cabecera .acciones { flex: 1 0 100%; justify-content: flex-start; }
  .tarjeta { padding: 18px; }
  .tabla-envuelta { margin: 0 -18px; padding: 0 18px; }
  .metrica .valor { font-size: 26px; }
  #texto-captura { font-size: 18px; }
  .interpretacion { font-size: 20px; }
}

@media print {
  #menu, button, .ejemplos, .brindis { display: none !important; }
  body { background: #fff; }
  .tarjeta { border-color: #ddd; break-inside: avoid; }
}

/* ══════════════════════════════════════════════════ campo de clave ═══ */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 72px; }
.campo-clave .ver-clave {
  all: unset;
  /* Ocupa todo el alto del campo: en el celular hay que poder darle con el dedo. */
  position: absolute; right: 5px; top: 5px; bottom: 5px;
  display: flex; align-items: center;
  padding: 0 11px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-2);
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
.campo-clave .ver-clave:hover { background: var(--fondo-2); color: var(--tinta); }
.campo-clave .ver-clave[aria-pressed="true"] { color: var(--fucsia); }
.campo-clave .ver-clave:focus-visible {
  background: var(--fondo-2); color: var(--tinta);
  outline: 2px solid var(--fucsia); outline-offset: 1px;
}

/* ═════════════════════════════════════════════ cargar existencias ═══ */
/* Sin tabla: en el celular una tabla de tres columnas obliga a arrastrar
   de lado y el campo del costo queda fuera de la pantalla. */
.lista-existencias {
  max-height: 52dvh; overflow-y: auto;
  border-top: 1px solid var(--linea-fina);
  border-bottom: 1px solid var(--linea-fina);
}
.linea-existencia {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 12px 2px; border-bottom: 1px solid var(--linea-fina);
}
.linea-existencia:last-child { border-bottom: none; }
.linea-existencia .ex-nombre { flex: 1 1 100%; line-height: 1.3; }
.linea-existencia .campo { flex: 1 1 128px; margin-bottom: 0; }

@media (min-width: 560px) {
  .linea-existencia .ex-nombre { flex: 1 1 180px; }
  .linea-existencia .campo { flex: 0 1 140px; }
}

/* ══════════════════════════════════ atajos y formularios directos ═══ */
.atajos { display: flex; flex-wrap: wrap; gap: 10px; }
.atajo {
  all: unset;
  padding: 13px 18px; border-radius: var(--r);
  border: 1px solid var(--linea); background: var(--fondo-2);
  color: var(--tinta); font-weight: 650; font-size: 14.5px;
  cursor: pointer; text-align: center; flex: 1 1 140px;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.atajo:hover { border-color: var(--fucsia); color: var(--fucsia); background: var(--papel); }
.atajo:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 2px; }

.linea-producto {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 10px 0; border-bottom: 1px solid var(--linea-fina);
}
.linea-producto:last-of-type { border-bottom: none; }
.linea-producto .campo { flex: 1 1 130px; margin-bottom: 0; }
.linea-producto .campo:first-child { flex: 2 1 190px; }
.linea-producto .quitar-linea { flex: 0 0 auto; margin-bottom: 4px; }

/* La ✕ se apoya arriba a la derecha de su línea: en el celular, puesta en el
   flujo, caía sola en un renglón aparte. */
.linea-producto { position: relative; }
.linea-producto .quitar-linea { position: absolute; top: 2px; right: 0; margin: 0; }
#f-productos .linea-producto:only-child .quitar-linea { display: none; }

/* ═══════════════════════════════════════════════════════════ la portada ═══
   Los colores salen del logo: el morado de la letra manda, el fucsia sigue
   siendo lo que se toca, y el turquesa y el amarillo de las tres paletas
   aparecen de a poco. */

.portada {
  max-width: 940px; margin: 0 auto; padding: 0 var(--aire) 40px;
  --aire: 24px;
}
@media (max-width: 880px) { .portada { --aire: 18px; padding-bottom: 92px; } }

/* ---- lo primero que se ve ------------------------------------------
   Partido, no centrado: a la izquierda lo que se dice y lo que se toca, a la
   derecha la paleta. La foto es el argumento; el texto solo lo nombra. */
.pt-hero {
  display: grid; align-items: center; gap: clamp(24px, 5vw, 56px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  padding: clamp(28px, 5vw, 64px) 0 clamp(36px, 6vw, 72px);
}
.pt-hero.sin-foto { grid-template-columns: 1fr; max-width: 62ch; }

.pt-logo { max-width: 300px; width: 84%; height: auto; display: block; margin-bottom: 6px; }
.pt-hero h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02; margin-top: 16px;
  text-wrap: balance; color: var(--tinta);
}
.pt-pitch {
  max-width: 46ch; margin-top: 16px; color: var(--tinta-2);
  font-size: 17px; line-height: 1.58; text-wrap: pretty;
}
.pt-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pt-acciones .accion { flex: 0 0 auto; text-decoration: none; }
.accion.plano { background: none; border-color: transparent; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
  .accion.plano:hover { color: var(--fucsia); background: var(--fondo-2); }
}

/* La paleta se apoya sobre un halo de sus propios colores, no sobre una caja. */
.pt-visual { position: relative; isolation: isolate; }
.pt-visual::before {
  content: ''; position: absolute; z-index: -1;
  inset: -8% -6% -10% -6%; border-radius: 50%;
  background:
    radial-gradient(60% 60% at 30% 26%, color-mix(in oklab, var(--mango) 42%, transparent), transparent 70%),
    radial-gradient(64% 64% at 74% 70%, color-mix(in oklab, var(--turquesa) 38%, transparent), transparent 72%),
    radial-gradient(70% 70% at 52% 50%, color-mix(in oklab, var(--fucsia) 26%, transparent), transparent 74%);
  filter: blur(28px);
}
.pt-visual img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-lg);
}

/* ---- secciones */
.pt-seccion { margin-top: 40px; }
.pt-seccion > h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  font-size: 22px; color: var(--tinta); margin-bottom: 18px; text-wrap: balance;
}
.pt-nota { color: var(--tinta-2); font-size: 14px; margin-top: -8px; }

/* ---- promociones: son la novedad, se ven distinto */
.pt-promos-rejilla {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.pt-promo {
  position: relative; isolation: isolate;
  padding: 24px 26px 22px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--turquesa) 13%, var(--papel));
  border: 1px solid color-mix(in srgb, var(--turquesa) 36%, transparent);
  transition: border-color 260ms var(--sale);
}
/* El charco de luz que sigue al cursor. La idea es del original; el color no.
   Un blanco al 25% sobre papel no se ve, así que aquí el charco es el celeste
   —el color que la sección ya tiene— y lo único que hace es encenderlo donde
   está el puntero.
   Va en z-index negativo dentro del aislamiento de la tarjeta: así se pinta
   sobre el fondo pero por debajo del texto, que es lo único que hay que poder
   leer. */
.pt-promo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 260ms var(--sale);
  background: radial-gradient(200px circle at var(--foco-x, 50%) var(--foco-y, 50%),
    color-mix(in srgb, var(--turquesa) 42%, transparent), transparent 68%);
}
/* Solo donde hay cursor de verdad. En el celular no hay puntero que seguir, y
   atarlo al dedo dejaría la luz encendida donde se tocó por última vez. */
@media (hover: hover) and (pointer: fine) {
  .pt-promo:hover::before { opacity: 1; }
  .pt-promo:hover { border-color: color-mix(in srgb, var(--turquesa) 62%, transparent); }
}
/* La sección entera de promociones va en celeste, el turquesa del manual
   rebajado hasta pastel: se distingue de las hojas blancas sin gritar, y es
   el color del hielo, que es de lo que está hecho el producto. */
/* Con `.portada .pt-promos` a secas esto no pintaba nada: la regla de las
   hojas es igual de específica y está más abajo en el archivo, así que ganaba
   ella y la sección se quedaba blanca. La clase de la hoja va en el selector
   para desempatar donde se ve, y no con un !important escondido. */
.portada .pt-seccion.pt-promos {
  background: color-mix(in srgb, var(--turquesa) 7%, var(--papel));
  border-color: color-mix(in srgb, var(--turquesa) 26%, transparent);
}
.portada .pt-promos > h3::after {
  content: 'vigente'; margin-left: 10px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--turquesa-2);
  border: 1px solid color-mix(in srgb, var(--turquesa) 48%, transparent);
  border-radius: var(--r-full); padding: 3px 9px; vertical-align: .18em;
}
.portada .pt-promos > h3 { display: flex; align-items: center; }
.pt-promo h4 {
  font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.02em; color: var(--tinta);
}
.pt-promo p { color: var(--tinta-2); margin-top: 6px; font-size: 14.5px; }
.pt-hasta {
  display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--turquesa-2);
}

/* ---- sabores */
.pt-vitrina {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 172px);
  gap: 14px; margin: 18px calc(var(--aire) * -1) 0;
  padding: 2px var(--aire) 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
.pt-sabor { text-align: center; scroll-snap-align: start; }
.pt-sabor img, .pt-sin-foto {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-lg); background: var(--fondo-2); display: block;
}
.pt-sabor figcaption {
  margin-top: 9px; font-weight: 600; font-size: 14px; color: var(--tinta);
}

/* ---- testimonios */
/* El primer testimonio pesa más que los demás. Tres cajas iguales no son una
   recomendación, son un formulario. */
.pt-testimonios-lista {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.pt-testimonios-lista > :first-child { grid-column: 1 / -1; }
.pt-testimonio {
  background: var(--fondo-2); border-radius: var(--r-lg); padding: 26px 28px;
  border: 1px solid var(--linea-fina);
}
.pt-testimonios-lista > :first-child p { font-size: clamp(19px, 2.4vw, 25px); }
.pt-testimonio p {
  font-family: var(--display); font-size: 18px; font-weight: 600;
  line-height: 1.42; letter-spacing: -.015em; color: var(--tinta); text-wrap: pretty;
}
.pt-testimonio p::before { content: '“'; color: var(--morado); }
.pt-testimonio p::after  { content: '”'; color: var(--morado); }
.pt-testimonio footer { margin-top: 14px; font-size: 13px; }
.pt-testimonio footer strong { display: block; color: var(--tinta); }
.pt-testimonio footer span { color: var(--tinta-3); }

/* ---- cómo se pide */
.pt-pasos { list-style: none; counter-reset: paso; display: grid; gap: 12px; }
.pt-pasos li {
  counter-increment: paso;
  /* rejilla y no flex: el numero ocupa las dos filas y el titulo no se parte
     por la mitad cuando la pantalla es angosta */
  display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; align-items: baseline;
  padding: 16px 20px; border: 1px solid var(--linea); border-radius: var(--r-lg);
  background: var(--papel);
}
.pt-pasos li::before {
  content: counter(paso); font-family: var(--display); font-weight: 800;
  font-size: 20px; color: var(--morado); grid-row: 1 / span 2; min-width: 18px;
}
.pt-pasos strong { display: block; color: var(--tinta); }
.pt-pasos span { color: var(--tinta-2); font-size: 14.5px; }

/* ---- los datos duros */
.pt-datos { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pt-datos > div { padding: 14px 0; border-top: 1px solid var(--linea-fina); }
.pt-datos dt {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--tinta-3);
}
.pt-datos dd { margin-top: 5px; color: var(--tinta); font-size: 15px; }

/* ---- pie */
.pt-pie { margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--morado); }
.pt-contacto { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pt-contacto a { color: var(--tinta); font-weight: 600; font-size: 14.5px; }
.pt-cierre {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin-top: 20px;
}
.pt-cierre > span {
  font-family: var(--display); font-weight: 700; color: var(--tinta-3); font-size: 14px;
}

/* ═════════════════════════════════════════ editar la portada (dueño) ═══ */
.pt-logo-previo {
  flex: 0 0 auto; min-width: 180px; min-height: 76px;
  display: grid; place-items: center; padding: 12px 16px;
  border: 1px dashed var(--linea); border-radius: var(--r);
}
.pt-logo-previo img { max-width: 200px; max-height: 64px; height: auto; }

.pt-elegir { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-elegir-uno {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 13px 7px 9px; border-radius: var(--r-full);
  border: 1px solid var(--linea); background: var(--papel);
  font-size: 14px; transition: border-color .12s ease, background .12s ease;
}
.pt-elegir-uno.elegido { border-color: var(--fucsia); background: var(--fondo-2); }
.pt-elegir-uno img { width: 30px; height: 30px; border-radius: var(--r-sm); object-fit: cover; }
.pt-elegir-uno em { font-size: 11px; font-style: normal; }

.pt-testimonio-editar {
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 18px 20px; margin-bottom: 12px;
}
.pt-testimonio-editar.apagado { opacity: .55; }


/* ══════════════════════════════════════════════ el resumen del panel ═══
   La utilidad manda y las dos cifras que la forman se leen como su cuenta.
   El efectivo va al lado porque contesta otra pregunta: si alcanza mañana. */
.resumen {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.resumen > div {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 24px 26px 22px;
}
.resumen-figura, .resumen-efectivo { display: flex; flex-direction: column; }
.etiqueta {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--tinta-3);
}
.cifra-mayor {
  font-family: var(--display); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(40px, 7vw, 62px); line-height: .95; margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.cifra-media {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(28px, 4.4vw, 38px); line-height: 1; margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.resumen .pie { font-size: 12.5px; color: var(--tinta-2); margin-top: 8px; }
.resumen-cuenta {
  margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--tinta-2);
}
.resumen-cuenta b { color: var(--tinta); font-variant-numeric: tabular-nums; }

.reparto { display: grid; gap: 1px; margin-top: 16px; }
.reparto > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--linea-fina);
}
.reparto dt { font-size: 13px; color: var(--tinta-2); }
.reparto dd { font-size: 14px; font-weight: 600; }

/* Lo que no es titular no lleva caja: separa el aire y una línea. */
.tira-datos {
  display: grid; gap: 0 30px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tira-datos > div { padding: 16px 0; border-top: 2px solid var(--morado); }
.tira-datos dt {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--tinta-3);
}
.tira-datos dd {
  text-align: left;
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: 27px; line-height: 1.05; margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.tira-datos small { display: block; font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; }

@media (max-width: 720px) {
  .resumen { grid-template-columns: 1fr; }
  .resumen > div { padding: 20px 20px 18px; }
  .tira-datos { gap: 0; }
}

/* ════════════════════════════════════════════════ el único movimiento ═══
   Las secciones entran al asomarse. Se anima porque dice algo: que hay más
   abajo. Nada más de la portada se mueve, y nada del sistema tampoco: lo que
   se usa cien veces al día tiene que aparecer, no llegar. */
.revelar {
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms var(--sale), transform 520ms var(--sale);
}
.revelar.visible { opacity: 1; transform: none; }

/* Los sabores entran en cascada corta detrás de su sección. */
.revelar .pt-sabor, .revelar .pt-promo, .revelar .pt-testimonio, .revelar .pt-pasos li {
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--sale), transform 420ms var(--sale);
}
.revelar.visible .pt-sabor, .revelar.visible .pt-promo,
.revelar.visible .pt-testimonio, .revelar.visible .pt-pasos li {
  opacity: 1; transform: none;
}
.revelar.visible :is(.pt-sabor, .pt-promo, .pt-testimonio, .pt-pasos li):nth-child(1) { transition-delay: 40ms; }
.revelar.visible :is(.pt-sabor, .pt-promo, .pt-testimonio, .pt-pasos li):nth-child(2) { transition-delay: 90ms; }
.revelar.visible :is(.pt-sabor, .pt-promo, .pt-testimonio, .pt-pasos li):nth-child(3) { transition-delay: 140ms; }
.revelar.visible :is(.pt-sabor, .pt-promo, .pt-testimonio, .pt-pasos li):nth-child(n+4) { transition-delay: 180ms; }

@media (max-width: 880px) {
  .pt-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 14px; }
  .pt-visual { order: -1; }
  /* Con techo de alto: la paleta se sigue viendo entera y el botón de crear
     cuenta no se va debajo del pliegue, que es lo único que la portada pide. */
  .pt-visual img { max-height: 32dvh; width: auto; margin-inline: auto; }
  .pt-visual::before { inset: -4% 12% -6% 12%; }
  .pt-logo { width: 66%; max-width: 210px; }
  .pt-hero h2 { margin-top: 10px; }
  .pt-pitch { margin-top: 10px; font-size: 15.5px; }
  .pt-acciones { margin-top: 20px; gap: 8px; }
  .pt-acciones .accion { flex: 1 1 100%; text-align: center; }
}

/* ════════════════════════════════════════ el libro por dentro ═══
   La doble raya del total es una convención real de la contabilidad de papel.
   Cuesta nada y dice "esto se suma" sin una palabra. */
tr.total td, .fila-total {
  border-top: 1px solid var(--tinta);
  box-shadow: inset 0 -3px 0 -2px var(--tinta);
  font-weight: 700; padding-top: 12px;
}

/* Las etiquetas de dato sí van en versalitas: son etiquetas de una ficha, no
   antetítulos de un encabezado. Pero se quedan cortas y en tinta suave. */
.etiqueta, .tira-datos dt, .pt-datos dt, #quien-soy span, .reparto dt {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-3);
}

/* Las cifras del panel se estrechan en vez de gritar. */
.cifra-mayor { font-size: var(--t-3xl); line-height: 1; }
.cifra-media { font-size: var(--t-2xl); line-height: 1; }
.tira-datos dd { font-size: var(--t-xl); }

/* El resumen deja de ser dos cajas y pasa a ser el asiento del mes: la
   utilidad arriba y su cuenta debajo, separadas por la raya, no por un borde. */
.resumen > div {
  background: none; border: none; border-top: 2px solid var(--morado);
  border-radius: 0; padding: 18px 0 4px;
}
.resumen-cuenta { padding-top: 14px; border-top: 1px solid var(--linea-fina); }
.tira-datos > div { border-top: 1px solid var(--linea); }


/* ══════════════════════════════════ el suelo vivo de la portada ═══
   El shader ya no vive dentro del hero: es una capa fija del tamaño de la
   pantalla, detrás de todo. Encerrado en el hero se leía como un rectángulo,
   que es justo lo que no se quería.

   Va teñido con el lila del isotipo, así que lo que se mueve de fondo es el
   propio fondo del logo. */
#fondo-portada {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--fondo-2);
}

/* El nevado. Es el nombre del negocio y es lo que se ve desde Cayambe todos
   los días, así que el fondo dejó de ser un lila bonito y pasó a ser un
   lugar. Va debajo de la iridiscencia, no en vez de ella: el shader le da el
   movimiento de color y la foto le da el sitio.
   La deriva dura minuto y medio y recorre menos del dos por ciento de la
   pantalla. Si se nota, está mal hecha: lo que tiene que pasar es que la
   página no parezca del todo quieta. */
#fondo-portada .nevado {
  position: absolute; inset: -3%; z-index: 0;
  background: url('/nevado.jpg') 50% 58% / cover no-repeat;
  transform: scale(1.02);
  animation: derivar 96s ease-in-out infinite alternate;
}
@keyframes derivar {
  from { transform: scale(1.02) translate3d(-0.9%,  0.5%, 0); }
  to   { transform: scale(1.07) translate3d( 0.9%, -0.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #fondo-portada .nevado { animation: none; transform: scale(1.04); }
}

/* La iridiscencia deja de ser el suelo y pasa a ser una capa de color encima
   del nevado: en luz suave tiñe sin tapar, que es justo lo que hacía antes
   cuando abajo no había nada. */
#fondo-portada .iridiscencia {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  opacity: .4; mix-blend-mode: soft-light;
}
/* Sin soporte de mezcla, el shader se rebaja y ya: mejor pálido que tapando
   la montaña. */
@supports not (mix-blend-mode: soft-light) {
  #fondo-portada .iridiscencia { opacity: .22; }
}

/* Un velo de papel encima. Sin él, el contraste de cada texto dependería de
   la banda que le tocara debajo, y el shader tiene bandas claras y oscuras.
   El 72% no es un gusto: es el velo más liviano que deja el nevado a la vista
   y aun así aguanta el peor cruce posible —el píxel más oscuro de la foto con
   una banda negra del shader encima— en 4.5 de contraste para el texto
   secundario y 11 para el titular. Medido, no estimado. */
#fondo-portada::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: color-mix(in srgb, var(--fondo) 72%, transparent);
}
/* En oscuro el riesgo se da vuelta: el velo es tinta, y lo que puede dejar sin
   contraste al texto claro ya no es la sombra de la montaña sino la nieve. Se
   sube el velo hasta que el peor cruce vuelve a pasar de 4.5. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) #fondo-portada::after {
    background: color-mix(in srgb, var(--fondo) 84%, transparent);
  }
}
:root[data-tema="oscuro"] #fondo-portada::after {
  background: color-mix(in srgb, var(--fondo) 84%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  #fondo-portada::after { background: rgba(252, 251, 253, .76); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) #fondo-portada::after { background: rgba(25, 18, 35, .86); }
  }
  :root[data-tema="oscuro"] #fondo-portada::after { background: rgba(25, 18, 35, .86); }
}

/* El hero vuelve a ser papel: sin caja propia, sin velo oscuro, y el texto en
   tinta como el resto de la página. */
.pt-hero {
  position: relative; isolation: auto; overflow: visible;
  background: none; border-radius: 0;
  padding: clamp(24px, 4vw, 52px) 0 clamp(30px, 4vw, 48px);
  margin-bottom: 0;
}
.pt-hero::after { content: none; }
.pt-hero h2 { color: var(--tinta); }
.pt-hero .pt-pitch { color: var(--tinta-2); }
.pt-hero .accion.plano { color: var(--tinta-2); }
.pt-hero .accion.suave {
  background: var(--papel); color: var(--tinta); border-color: var(--linea);
}
@media (hover: hover) and (pointer: fine) {
  .pt-hero .accion.suave:hover { background: var(--fondo-2); }
  .pt-hero .accion.plano:hover { color: var(--fucsia); background: var(--papel); }
}
.pt-hero .pt-visual::before { display: none; }
.pt-hero .pt-visual img { box-shadow: 0 16px 40px -14px rgba(36, 26, 46, .38); }

/* ══════════════════════════════════════════ el carrusel de sabores ═══
   Ocupa el hueco donde iba la foto suelta. La imagen del HTML se queda
   debajo: si no hay WebGL o el shader no compila, el hero conserva su
   paleta en vez de un hueco. */
.pt-visual.con-carrusel { position: relative; }
.pt-visual.con-carrusel > img { visibility: hidden; }
.morph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border-radius: var(--r-lg);
  box-shadow: 0 16px 40px -14px rgba(36, 26, 46, .38);
}

.morph-mandos {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
}
.morph-nombre {
  flex: 1; text-align: center; margin: 0;
  font-size: var(--t-sm); font-weight: 650; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.morph-flecha {
  all: unset;
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  border-radius: var(--r-full); font-size: 20px; line-height: 1;
  color: #fff; background: rgba(0, 0, 0, .32);
  backdrop-filter: blur(6px);
  transition: background 160ms var(--sale), transform 160ms var(--sale);
}
@media (hover: hover) and (pointer: fine) {
  .morph-flecha:hover { background: rgba(0, 0, 0, .5); }
}
.morph-flecha:active { transform: scale(.94); }
.morph-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.morph-puntos {
  position: absolute; left: 0; right: 0; bottom: -22px;
  display: flex; justify-content: center; gap: 6px;
}
.morph-puntos button {
  all: unset;
  width: 18px; height: 6px; border-radius: var(--r-full); cursor: pointer;
  position: relative; flex: 0 0 auto;
}
.morph-puntos button::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; background: color-mix(in srgb, var(--tinta) 24%, transparent);
  transform: scaleX(.333); transform-origin: center;
  transition: transform 160ms var(--sale), background-color 160ms var(--sale);
}
.morph-puntos button[aria-selected="true"]::before {
  background: var(--fucsia); transform: scaleX(1);
}
.morph-puntos button:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 3px; }

/* Cuando la iridiscencia se apaga sola por falta de cuadros, el hero vuelve a
   su fondo de tinta y nada se ve roto. */
.pt-hero.sin-iridiscencia::after { background: rgba(26, 18, 34, .92); }

@media (max-width: 880px) {
  .morph-puntos { bottom: -20px; }
  .pt-hero { padding-bottom: clamp(44px, 7vw, 60px); }
}

/* La cuadrícula de cuaderno no entra en la portada: esa es la herramienta.
   Aquí el suelo lo pinta el shader. */
:root[data-portada] main, body:has(.portada) main {
  background-image: none; background-color: transparent;
}
/* Si no hay WebGL el shader no monta, y ahí sí hace falta un suelo. */
:root[data-portada] body, body:has(.portada) { background-color: var(--fondo-2); }

/* ─────────────────────────────── las secciones, cada una en su papel ─────
   Sobre el campo lila, cada sección es una hoja. No son tarjetas repetidas de
   icono y título: son paneles de ancho completo, cada uno con su propio
   contenido y su propia altura. */
.portada .pt-seccion {
  background: var(--papel);
  border: 1px solid var(--linea-fina);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 38px) clamp(20px, 3vw, 36px);
  margin-top: 16px;
  box-shadow: 0 10px 30px -14px rgba(36, 26, 46, .22);
}
.portada .pt-seccion > h3 {
  font-size: var(--t-xl); font-weight: 700;
  font-variation-settings: "wdth" 88; letter-spacing: -.022em;
  color: var(--tinta); margin-bottom: 16px;
}

/* La vitrina sangra hasta el borde de su hoja, no hasta el de la página. */
.portada .pt-vitrina {
  margin-inline: calc(clamp(20px, 3vw, 36px) * -1);
  padding-inline: clamp(20px, 3vw, 36px);
}

/* El pie también es una hoja, para que la página cierre y no se desvanezca. */
.pt-pie {
  background: var(--papel);
  border: 1px solid var(--linea-fina);
  border-top: 2px solid var(--morado);
  border-radius: var(--r-lg);
  margin-top: 16px; padding: 26px clamp(20px, 3vw, 36px) 22px;
  box-shadow: 0 10px 30px -14px rgba(36, 26, 46, .22);
}

/* Los testimonios y las promociones ya no necesitan su propia caja: la hoja
   de la sección es su caja. Se distinguen por dentro con la raya y el aire. */
.portada .pt-testimonio {
  background: var(--fondo-2); border-color: transparent;
}

/* ═════════════════════════════════════ el botón de WhatsApp, flotante ═══
   Fuera de la columna de contenido y fuera de la fila de botones: es el
   canal de siempre, no una acción de la página. Discreto hasta que se lo
   busca. */
.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--papel); color: var(--morado);
  border: 1px solid var(--linea);
  box-shadow: 0 6px 18px -6px rgba(36, 26, 46, .28);
  transition: transform 160ms var(--sale), box-shadow 160ms var(--sale),
              color 160ms var(--sale);
}
.wa svg { width: 25px; height: 25px; }
@media (hover: hover) and (pointer: fine) {
  .wa:hover { color: var(--fucsia); box-shadow: 0 10px 24px -8px rgba(36, 26, 46, .34); }
}
.wa:active { transform: scale(.94); }
.wa:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 3px; }

/* ══════════════════════════════════════ cómo funciona ═══
   Dos cosas distintas contestan la misma pregunta del tendero, y por eso
   viven en la misma hoja pero no de la misma forma:

   · Los tres pasos son una secuencia, y van apilados: cada ficha se queda
     pegada arriba y la siguiente se le monta encima. El orden deja de ser
     un número escrito y pasa a ser lo que hace la página al bajar.
   · Los datos duros no son secuencia, son referencia. Se consultan sueltos,
     así que se quedan en cuadros, debajo. Apilarlos sería obligar a pasar
     por el horario para llegar al pedido mínimo. */
/* Esta sección entra sin moverse: un `transform` en el padre convierte al
   padre en la referencia de `sticky`, y las fichas se pegarían a la hoja en
   vez de a la pantalla mientras durase la animación de entrada. */
.pt-comofunciona.revelar { transform: none; }

/* Dónde para la pila. No es decoración: cuanto más arriba se pegue, más
   página hace falta por debajo para que la tercera ficha alcance a tapar a la
   segunda, y esta sección es la última antes del pie. Pegándola a media
   pantalla el apilado se completa con el sitio que ya hay, sin añadir un
   vacío que no dice nada. */
.pt-pila { --arriba: 30vh; display: grid; gap: 20px; margin-bottom: 22px; }
.pt-carta {
  position: sticky;
  background: var(--fondo-2);
  border: 1px solid var(--linea-fina);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 28px);
  /* Se encoge desde arriba, que es el borde que se queda a la vista. */
  transform-origin: 50% 0;
  box-shadow: 0 -6px 18px -12px rgba(36, 26, 46, .3);
}
/* El escalón: cada ficha para doce píxeles más abajo que la anterior, y ese
   sobrante es lo que deja ver que hay algo debajo. */
.pt-carta:nth-child(1) { top: var(--arriba); z-index: 1; }
.pt-carta:nth-child(2) { top: calc(var(--arriba) + 12px); z-index: 2; }
.pt-carta:nth-child(3) { top: calc(var(--arriba) + 24px); z-index: 3; }
/* El velo que apaga la ficha mientras la tapan. Va en una capa aparte porque
   bajarle la opacidad a la ficha entera dejaría ver la de abajo a través. */
.pt-carta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--papel); pointer-events: none;
  opacity: calc(var(--tapada, 0) * .5);
}
.pt-carta h4 {
  font-size: var(--t-lg); font-weight: 700; color: var(--tinta);
  font-variation-settings: "wdth" 88; letter-spacing: -.02em;
}
.pt-carta p { font-size: var(--t-base); color: var(--tinta-2); margin-top: 6px; max-width: 46ch; }

.pt-cuadros {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.pt-cuadro {
  background: var(--fondo-2); border-radius: var(--r);
  padding: 18px 20px 16px; border: 1px solid var(--linea-fina);
}
.pt-cuadro h4 {
  font-size: var(--t-base); font-weight: 700; color: var(--tinta);
  letter-spacing: -.01em;
}
.pt-cuadro p { font-size: var(--t-sm); color: var(--tinta-2); margin-top: 5px; }
.pt-carta .pt-num {
  display: block; font-size: var(--t-lg); font-weight: 800;
  font-variation-settings: "wdth" 88; color: var(--fucsia);
  line-height: 1; margin-bottom: 8px;
}
.pt-dato { background: var(--papel); }
.pt-dato h4 { color: var(--tinta-2); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .1em; }
.pt-dato p { color: var(--tinta); font-size: var(--t-base); font-weight: 600; margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════ clientes */

/* Las zonas como filtro. En el celular se desbordan a lo ancho en vez de
   apilarse en cinco renglones que empujan la tabla fuera de la pantalla. */
.chips-zona {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.chips-zona::-webkit-scrollbar { display: none; }
.chip-zona {
  flex: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta-2);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.chip-zona:hover { border-color: var(--tinta-3); color: var(--tinta); }
.chip-zona.activo { background: var(--morado); border-color: var(--morado); color: #fff; }
.chip-zona.activo .tenue { color: rgba(255,255,255,.72); }

/* Los cuatro números de la ficha. A 400px caben dos por fila; más abajo, uno.
   Nunca tres, que dejarían un hueco impar al final. */
.metricas-ficha {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.metricas-ficha > div {
  background: var(--fondo-2); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 12px 14px;
}
.metricas-ficha .etiqueta {
  font-size: 9.5px; color: var(--tinta-3); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 700; display: block;
}
.metricas-ficha strong { display: block; font-size: 21px; line-height: 1.1; margin-top: 6px; }
.metricas-ficha .tenue { font-size: 11.5px; display: block; margin-top: 3px; }

.datos-ficha td { padding: 9px 0; }
.datos-ficha td:first-child { width: 110px; }