/* Verdu: sistema de diseño.
   Idea central: el cartelito de precio de la verdulería. Todo lo demás, sobrio.
   Colores y letras en variables; los colores del comercio pueden venir de Ajustes. */

@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage.woff2) format("woff2"); font-weight: 600 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url(../fonts/atkinson-next.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  /* paleta */
  --verde: #1F6B3A;        /* marca y estructura */
  --verde-hondo: #154A28;
  --verde-suave: #E1EFE2;
  --tomate: #C8361B;       /* ofertas y llamadas a la acción */
  --tomate-hondo: #A52A13;
  --tomate-suave: #FBE4DC;
  --zanahoria: #EE8A2A;    /* llegó hoy, de temporada (nunca como texto) */
  --zanahoria-suave: #FCEBD6;
  --ambar: #8A5A00; --ambar-suave: #FAEFD2;
  --azul: #2A5690; --azul-suave: #E2EAF6;
  --bg: #FAF5EA;           /* crema papel */
  --surface: #FFFFFF;
  --surface2: #F3EEE2;
  --ink: #1E2A22;
  --muted: #56645A;
  --line: #E2DACB;
  --line-fuerte: #CFC5B2;
  --papel: #FFFDF6;        /* el cartelito siempre es de papel */
  --papel-ink: #1E2A22;
  --sombra: 0 1px 2px rgba(40, 52, 30, .08), 0 6px 18px rgba(40, 52, 30, .08);
  --sombra-alta: 0 10px 40px rgba(25, 40, 20, .22);
  --foco: #1F6B3A;
  /* letras */
  --display: "Bricolage", "Arial Narrow", system-ui, sans-serif;
  --body: "Atkinson", "Segoe UI", system-ui, sans-serif;
  /* medidas */
  --r-chico: .5rem; --r: .875rem; --r-grande: 1.375rem;
  --toque: 3rem;           /* 48 px: lo mínimo para un dedo */
  --tabbar: 4.25rem;
  --ancho: 36rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --verde: #277A45; --verde-hondo: #8FDCA8; --verde-suave: #1C3324;
    --tomate: #C8361B; --tomate-hondo: #FF8A70; --tomate-suave: #3A2019;
    --zanahoria: #F09A45; --zanahoria-suave: #3A2B17;
    --ambar: #E9BC56; --ambar-suave: #352B14; --azul: #8DB2EA; --azul-suave: #1C2A3E;
    --bg: #111914; --surface: #18231C; --surface2: #1F2C23; --ink: #ECF2EA; --muted: #A3B2A6;
    --line: #2C3B31; --line-fuerte: #3D5043;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
    --sombra-alta: 0 10px 40px rgba(0, 0, 0, .5);
    --foco: #7FD49A;
  }
}
/* Letra grande: sube tamaños y contraste. Usa rem, así también respeta la letra del sistema. */
html[data-letra="grande"] { font-size: 118.75%; --muted: #3E4A41; --line: #C9BEA8; --line-fuerte: #9F9480; }
@media (prefers-color-scheme: dark) { html[data-letra="grande"]:not([data-tema="claro"]) { --muted: #C9D5CB; --line: #46594B; --line-fuerte: #6A8070; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.5; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--verde-hondo); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: .5rem; top: -4rem; z-index: 50; background: var(--ink); color: var(--bg); padding: .75rem 1rem; border-radius: var(--r-chico); }
.saltar:focus { top: .5rem; }
svg { width: 1.375rem; height: 1.375rem; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wa-ico { fill: currentColor; stroke: none; }

h1, h2, h3 { font-family: var(--display); font-stretch: 85%; margin: 0; line-height: 1.1; text-wrap: balance; }
h1 { font-size: 1.875rem; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.3125rem; font-weight: 700; }
h3 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0; }
.chico { font-size: .875rem; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.fuerte { font-weight: 700; }
.mal-txt { color: var(--tomate-hondo); font-weight: 700; }
.ok-txt { color: var(--verde-hondo); font-weight: 700; }

/* ---------- estructura ---------- */
main { max-width: var(--ancho); margin: 0 auto; padding: 1rem 1rem calc(var(--tabbar) + 6.5rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 1rem; }
.pila { display: flex; flex-direction: column; gap: .75rem; }
.fila { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.crece { flex: 1; min-width: 0; }

/* barra de arriba: nombre del comercio y cómo está hoy */
.appbar { background: var(--verde-hondo); color: #FFFDF6; padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1rem .75rem; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .appbar { background: #0B120D; border-bottom: 1px solid var(--line); } }
.appbar-in { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; gap: .5rem; }
.marca { flex: 1; min-width: 0; display: flex; align-items: center; gap: .625rem; text-decoration: none; color: inherit; }
.marca img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--papel); }
.marca b { display: block; font-family: var(--display); font-stretch: 80%; font-weight: 800; font-size: 1.375rem; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca span { display: block; font-size: .8125rem; opacity: .85; }
.appbar .btn-icono { color: #FFFDF6; background: rgba(255, 255, 255, .1); border-color: transparent; }
.appbar .btn-icono[aria-pressed="true"] { background: #FFFDF6; color: var(--verde-hondo); }
.hoy { max-width: var(--ancho); margin: .625rem auto 0; display: flex; gap: .375rem; flex-wrap: wrap; font-size: .875rem; }
.hoy span { background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .25rem .625rem; display: inline-flex; align-items: center; gap: .375rem; }
.hoy span svg { width: 1rem; height: 1rem; }
.hoy .cerrado { background: var(--tomate); }
.sin-senal { background: var(--ambar-suave); color: var(--ink); border-bottom: 1px solid var(--line); text-align: center; font-size: .875rem; padding: .5rem 1rem; font-weight: 600; }

/* barra de pestañas (abajo en el celular, arriba en la compu) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar-in { max-width: var(--ancho); margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--tabbar); }
.tabbar button { border: 0; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; font-size: .8125rem; font-weight: 700; position: relative; min-width: 0; padding: 0 .125rem; }
.tabbar button span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar button[aria-current="page"] { color: var(--verde-hondo); }
.tabbar button[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--verde); }
.badge { position: absolute; top: .375rem; left: calc(50% + .375rem); min-width: 1.25rem; height: 1.25rem; border-radius: .625rem; background: var(--tomate); color: #fff; font-size: .75rem; font-weight: 800; display: grid; place-items: center; padding: 0 .3rem; font-variant-numeric: tabular-nums; }
.pie { text-align: center; padding: .5rem 0 0; display: flex; justify-content: center; gap: .25rem; flex-wrap: wrap; }

/* ---------- botones ---------- */
.btn { min-height: var(--toque); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1.125rem; border-radius: var(--r); border: 1.5px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; background: var(--tomate); color: #fff; }
.btn:hover { background: var(--tomate-hondo); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .btn:hover { background: #B12E15; } }
.btn:disabled { opacity: .45; cursor: default; }
.btn-ancho { width: 100%; }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { background: var(--verde-hondo); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .btn-verde:hover { background: #1F6B3A; } }
.btn-sec { background: var(--surface); color: var(--ink); border-color: var(--line-fuerte); }
.btn-sec:hover { background: var(--surface2); }
.btn-sec.activo { background: var(--verde-suave); border-color: var(--verde); color: var(--verde-hondo); }
.btn-suave { background: var(--verde-suave); color: var(--verde-hondo); }
.btn-suave:hover { background: var(--verde-suave); filter: brightness(.96); }
.btn-peligro { background: var(--surface); color: var(--tomate-hondo); border-color: var(--tomate); }
.btn-peligro:hover, .btn-peligro.activo { background: var(--tomate-suave); }
.btn-wa { background: #25D366; color: #08341A; }
.btn-wa:hover { background: #1FBE5B; }
.btn-chico { min-height: var(--toque); padding: .375rem .875rem; font-size: .9375rem; }
.btn-link { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: var(--toque); padding: 0 .5rem; font-size: .9375rem; }
.btn-link:hover { background: none; color: var(--ink); }
.btn-icono { width: var(--toque); height: var(--toque); flex: none; display: inline-grid; place-items: center; border-radius: var(--r); border: 1.5px solid var(--line-fuerte); background: var(--surface); color: var(--ink); padding: 0; }
.btn-icono:hover { background: var(--surface2); }

/* ---------- superficies ---------- */
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-grande); padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.tarjeta > h2 + .chico { margin-top: -.375rem; }
.aviso { border-radius: var(--r); padding: .875rem 1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--verde-suave); }
.aviso b:first-child { font-size: 1.0625rem; }
.aviso.ojo { background: var(--ambar-suave); }
.aviso.mal { background: var(--tomate-suave); }
.aviso.info { background: var(--azul-suave); }
.aviso.papel { background: var(--surface2); }
.aviso .fila.entre { row-gap: .25rem; }
.aviso-linea { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding-top: .5rem; border-top: 1px solid rgba(0, 0, 0, .07); }

/* chips y etiquetas */
.chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .125rem 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: var(--toque); border: 1.5px solid var(--line-fuerte); background: var(--surface); color: var(--ink); border-radius: 999px; padding: .375rem 1rem; font-size: .9375rem; font-weight: 700; display: inline-flex; align-items: center; gap: .375rem; }
.chip[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.chip.chip-oferta[aria-pressed="false"] { border-color: var(--tomate); color: var(--tomate-hondo); }
.pill { font-size: .8125rem; font-weight: 700; border-radius: 999px; padding: .1875rem .625rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.p-pesar { background: var(--ambar-suave); color: var(--ambar); }
.p-espera { background: var(--azul-suave); color: var(--azul); }
.p-pago { background: var(--verde-suave); color: var(--verde-hondo); }
.p-debe { background: var(--tomate-suave); color: var(--tomate-hondo); }
.p-cancel { background: var(--surface2); color: var(--muted); }
.p-fijo { background: var(--zanahoria-suave); color: var(--ink); }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: .3125rem; font-size: .9375rem; font-weight: 700; min-width: 0; }
.campo .chico { font-weight: 400; }
input[type=text], input[type=number], input[type=search], input[type=password], input[type=tel], input[type=email], select, textarea {
  min-height: var(--toque); font-size: 1rem; font-weight: 500; padding: .625rem .75rem; border-radius: var(--r-chico); border: 1.5px solid var(--line-fuerte); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
textarea { line-height: 1.4; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--verde); outline: 2px solid var(--verde); outline-offset: 0; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form .ancho { grid-column: 1 / -1; }
.subir { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--toque); border: 2px dashed var(--line-fuerte); border-radius: var(--r); padding: .75rem; color: var(--verde-hondo); font-weight: 700; text-align: center; background: var(--surface2); position: relative; flex: 1; cursor: pointer; }
.subir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subir:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.miniatura { width: 4.5rem; height: 4.5rem; border-radius: var(--r-chico); object-fit: cover; flex: none; }
.interruptor { position: relative; width: 3.5rem; height: 2rem; flex: none; border-radius: 1rem; border: 0; background: var(--line-fuerte); padding: 0; }
.interruptor::after { content: ""; position: absolute; top: .25rem; left: .25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.interruptor[aria-checked="true"] { background: var(--verde); }
.interruptor[aria-checked="true"]::after { left: 1.75rem; }
.elegir { display: grid; gap: .5rem; }
.opcion { display: flex; align-items: center; gap: .75rem; min-height: var(--toque); border: 1.5px solid var(--line-fuerte); border-radius: var(--r); padding: .625rem .875rem; background: var(--surface); text-align: left; width: 100%; font-weight: 600; }
.opcion small { display: block; font-weight: 400; font-size: .875rem; color: var(--muted); }
.opcion[aria-pressed="true"], .opcion[aria-checked="true"] { border-color: var(--verde); background: var(--verde-suave); box-shadow: inset 0 0 0 1px var(--verde); }
.opcion:disabled { opacity: .6; cursor: default; }
.opcion .marca-op { width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid var(--line-fuerte); flex: none; display: grid; place-items: center; }
.opcion[aria-pressed="true"] .marca-op, .opcion[aria-checked="true"] .marca-op { border-color: var(--verde); background: var(--verde); color: #fff; }
.opcion .marca-op svg { width: .875rem; height: .875rem; stroke-width: 3; }

/* ---------- vidriera ---------- */
.pegado { position: sticky; top: 0; z-index: 15; background: var(--bg); margin: 0 -1rem; padding: .625rem 1rem .5rem; display: flex; flex-direction: column; gap: .5rem; border-bottom: 1px solid transparent; }
.pegado.con-borde { border-bottom-color: var(--line); box-shadow: 0 6px 12px -10px rgba(0, 0, 0, .3); }
.buscador { position: relative; }
.buscador svg { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.buscador input { padding-left: 2.75rem; border-radius: 999px; background: var(--surface); }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: .25rem; }
.titulo-seccion h2 { font-size: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 34rem) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html[data-letra="grande"] .grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 42%); gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; scrollbar-width: thin; }
.carrusel > * { scroll-snap-align: start; }

.prod { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.prod-media { position: relative; }
.prod-foto { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--surface2); aspect-ratio: 1 / 1; }
.prod-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-foto img.cargando { opacity: 0; }
.prod-foto img { transition: opacity .25s; }
.prod.out .prod-foto img { filter: grayscale(1); opacity: .5; }
.prod-cuerpo { padding: 1.25rem .625rem .625rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; }
.prod-nombre { font-weight: 700; font-size: 1rem; line-height: 1.25; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); }
.prod-nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.prod.out .prod-nombre { color: var(--muted); }
.marcas { position: absolute; top: .5rem; left: .5rem; right: 3.75rem; display: flex; gap: .25rem; flex-wrap: wrap; pointer-events: none; }
.cartel-suelto { position: relative; flex: none; padding-top: .25rem; }
.cartel-suelto .cartel { position: relative; left: auto; bottom: auto; }
.hoja-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding-right: 3rem; }
.marca-prod { font-size: .75rem; font-weight: 800; border-radius: .375rem; padding: .125rem .5rem; background: var(--zanahoria); color: #2A1A08; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); display: inline-flex; align-items: center; gap: .25rem; }
.marca-prod svg { width: .875rem; height: .875rem; stroke-width: 2.4; }
.marca-prod.temporada { background: #FFFDF6; color: #1F6B3A; }
.marca-prod.nuevo { background: var(--verde); color: #fff; }
.fav { position: absolute; top: .375rem; right: .375rem; width: var(--toque); height: var(--toque); border-radius: 50%; border: 0; background: rgba(255, 253, 246, .92); color: var(--muted); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.fav[aria-pressed="true"] { color: var(--tomate); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.quedan { align-self: flex-start; font-size: .8125rem; font-weight: 800; color: var(--ambar); background: var(--ambar-suave); border-radius: 999px; padding: .125rem .625rem; }

/* El cartelito: papel, agujerito y número grande. Va encimado sobre la foto. */
.cartel { position: absolute; left: .5rem; bottom: -1rem; z-index: 2; display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: .3rem; max-width: calc(100% - 1rem);
  background: var(--papel); color: var(--papel-ink); border: 1.5px solid var(--papel-ink); border-radius: .375rem .375rem .375rem .375rem; padding: .25rem .625rem .25rem 1.25rem; box-shadow: 2px 3px 0 rgba(30, 42, 34, .18); transform: rotate(-1.5deg); line-height: 1.1; }
.cartel::before { content: ""; position: absolute; left: .45rem; top: 50%; width: .4rem; height: .4rem; margin-top: -.2rem; border-radius: 50%; background: var(--surface2); border: 1.5px solid var(--papel-ink); }
.cartel b { font-family: var(--display); font-stretch: 92%; font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cartel small { font-size: .75rem; font-weight: 600; }
.cartel s { font-family: var(--display); font-size: .875rem; width: 100%; color: #56645A; }
.cartel-oferta s { color: #fff; }
.cartel em { font-style: normal; position: absolute; right: -.5rem; top: -.75rem; background: var(--zanahoria); color: #2A1A08; font-weight: 800; font-size: .75rem; border-radius: 999px; padding: .0625rem .4375rem; transform: rotate(4deg); border: 1.5px solid var(--papel-ink); }
.cartel-oferta { background: var(--tomate); color: #fff; border-color: var(--tomate-hondo); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .cartel-oferta { border-color: #7A1E0D; } }
.cartel-oferta::before { border-color: #fff; }
.cartel-ask b, .cartel-no b { font-size: 1rem; }
.cartel-ask, .cartel-no { font-weight: 800; font-size: 1rem; }
.cartel-no { background: var(--surface2); color: var(--muted); border-color: var(--line-fuerte); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cartel { transform: none; } }

/* selector de cantidad */
.paso { display: flex; align-items: center; gap: .375rem; margin-top: auto; }
.paso .btn-icono { width: 2.75rem; height: var(--toque); border-radius: var(--r-chico); }
.paso-n { flex: 1; text-align: center; font-family: var(--display); font-stretch: 92%; font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.paso-grande .btn-icono { width: var(--toque); }
.paso-grande .paso-n { font-size: 1.375rem; }
.paso .btn { font-size: .9375rem; padding: .5rem .5rem; }
.atajos { display: flex; gap: .375rem; flex-wrap: wrap; }
.atajos .chip { min-width: 4.25rem; justify-content: center; font-family: var(--display); font-stretch: 92%; font-size: 1.0625rem; }

/* barra flotante del carrito */
.barra-carrito { position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--tabbar) + .75rem + env(safe-area-inset-bottom, 0px)); z-index: 19; max-width: calc(var(--ancho) - 2rem); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.5rem; background: var(--tomate); color: #fff; border: 0; border-radius: var(--r); padding: .625rem 1.125rem; font-weight: 700; font-size: 1.0625rem; box-shadow: var(--sombra-alta); text-align: left; }
.barra-carrito .num { font-family: var(--display); font-stretch: 92%; font-size: 1.375rem; }
.barra-carrito small { display: block; font-weight: 500; font-size: .8125rem; opacity: .9; }

/* ---------- hoja inferior ---------- */
#hoja { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.velo { position: absolute; inset: 0; background: rgba(12, 20, 14, .5); }
.hoja-caja { position: relative; background: var(--bg); width: 100%; max-width: var(--ancho); max-height: 92vh; max-height: 92dvh; border-radius: var(--r-grande) var(--r-grande) 0 0; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); }
.hoja-asa { width: 2.75rem; height: .3125rem; border-radius: 3px; background: var(--line-fuerte); margin: .625rem auto 0; flex: none; }
.hoja-x { position: absolute; top: .5rem; right: .5rem; z-index: 3; }
.hoja-cuerpo { overflow-y: auto; padding: .5rem 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; overscroll-behavior: contain; }
.hoja-cuerpo > h2:first-child, .hoja-cuerpo > .hoja-cab:first-child { padding-right: 3rem; }
.hoja-foto { max-width: none; width: calc(100% + 2rem); margin: -.5rem -1rem 0; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface2); }
body.con-hoja { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hoja-caja { animation: subir .22s cubic-bezier(.2, .8, .3, 1); }
  .velo { animation: aparecer .2s ease-out; }
  @keyframes subir { from { transform: translateY(40%); opacity: .4; } }
  @keyframes aparecer { from { opacity: 0; } }
}

/* aviso corto */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar) + 5rem + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--ink); color: var(--bg); border-radius: var(--r); padding: .75rem 1rem; font-size: .9375rem; font-weight: 600; width: max-content; max-width: calc(100% - 2rem); box-shadow: var(--sombra-alta); }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toastIn .2s ease-out; } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, .5rem); } } }

/* línea de tiempo */
.tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tiempo li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .75rem; position: relative; padding-bottom: .875rem; }
.tiempo li:last-child { padding-bottom: 0; }
.tiempo li::before { content: ""; position: absolute; left: .8125rem; top: 1.75rem; bottom: 0; width: 2px; background: var(--line-fuerte); }
.tiempo li:last-child::before { display: none; }
.tiempo li.hecho::before { background: var(--verde); }
.tiempo .punto { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--line-fuerte); background: var(--surface); display: grid; place-items: center; }
.tiempo .punto svg { width: 1rem; height: 1rem; stroke-width: 3; }
.tiempo .hecho .punto { background: var(--verde); border-color: var(--verde); color: #fff; }
.tiempo .actual .punto { border-color: var(--tomate); box-shadow: 0 0 0 4px var(--tomate-suave); }
.tiempo .falta b { color: var(--muted); font-weight: 600; }
.tiempo-h { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tiempo p { font-size: .9375rem; color: var(--muted); margin-top: .125rem; }
.tiempo .actual p { color: var(--ink); }

/* carrito y pedidos */
.pasos { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { flex: 1; font-size: .8125rem; font-weight: 700; color: var(--muted); border-top: 4px solid var(--line-fuerte); padding-top: .375rem; counter-increment: paso; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasos li::before { content: counter(paso) ". "; }
.pasos li.hecho { border-color: var(--verde); color: var(--verde-hondo); }
.pasos li[aria-current] { border-color: var(--tomate); color: var(--ink); }
.linea { display: grid; grid-template-columns: 3.75rem 1fr; gap: .75rem; padding: .875rem 0; border-top: 1px solid var(--line); }
.linea:first-child { border-top: 0; padding-top: 0; }
.linea > img { width: 3.75rem; height: 3.75rem; border-radius: var(--r-chico); object-fit: cover; background: var(--surface2); }
.linea-cab { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.linea-extra { margin-top: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.estimado { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-weight: 700; }
.estimado b { font-family: var(--display); font-stretch: 85%; font-size: 1.875rem; font-variant-numeric: tabular-nums; }
.ajuste { display: flex; gap: .625rem; align-items: flex-start; background: var(--papel); color: var(--papel-ink); border: 1.5px dashed var(--line-fuerte); border-radius: var(--r); padding: .75rem .875rem; font-size: .9375rem; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .ajuste { background: var(--surface2); color: var(--ink); } }
.ajuste svg { color: var(--verde); margin-top: .0625rem; }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla td, .tabla th { padding: .5rem 0; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.tabla th { font-size: .875rem; color: var(--muted); font-weight: 700; }
.tabla td:last-child, .tabla th:last-child { text-align: right; white-space: nowrap; padding-left: .5rem; font-weight: 700; }
.tabla tr:first-child td, .tabla tr:first-child th { border-top: 0; }
.balanza { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; background: var(--surface2); }
.balanza-vacia { aspect-ratio: 16 / 7; border-radius: var(--r); background: var(--surface2); border: 2px dashed var(--line-fuerte); display: grid; place-items: center; color: var(--muted); text-align: center; padding: 1rem; font-size: .9375rem; }
.total-final { display: flex; justify-content: space-between; align-items: baseline; }
.total-final b { font-family: var(--display); font-stretch: 85%; font-size: 2.25rem; font-variant-numeric: tabular-nums; }
.copiar { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1.5px solid var(--line-fuerte); border-radius: var(--r); padding: .25rem .25rem .25rem .875rem; }
.copiar code { flex: 1; font-family: var(--body); font-weight: 800; font-size: 1.0625rem; overflow-wrap: anywhere; }
.exito { text-align: center; align-items: center; padding: 1.5rem 1rem; }
.exito .sello { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; }
.exito .sello svg { width: 2.5rem; height: 2.5rem; stroke-width: 2.6; }
@media (prefers-reduced-motion: no-preference) { .exito .sello { animation: sello .4s cubic-bezier(.3, 1.5, .5, 1); } @keyframes sello { from { transform: scale(.4); opacity: 0; } } }

/* ---------- panel de la verdulería ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .75rem; display: flex; flex-direction: column; gap: .125rem; text-align: left; color: var(--ink); min-height: 6rem; }
button.kpi:hover { border-color: var(--verde); }
.kpi b { font-family: var(--display); font-stretch: 80%; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .875rem; color: var(--muted); font-weight: 600; }
.kpi.urge b { color: var(--tomate-hondo); }
.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis-4 .kpi b { font-size: 1.625rem; }
.accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.accesos .btn { justify-content: flex-start; text-align: left; }
.vuelta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.cupo { display: flex; flex-direction: column; gap: .5rem; background: var(--surface2); border-radius: var(--r); padding: .625rem .75rem; }
.cupo .r { display: flex; align-items: center; gap: .5rem; }
.cupo .lbl { flex: 1; font-weight: 700; font-size: .9375rem; }
.cupo .n { min-width: 2rem; text-align: center; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ped { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .875rem; display: flex; flex-direction: column; gap: .625rem; }
.ped-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ped-cab b { font-size: 1.0625rem; }
.nota-linea { display: inline-flex; gap: .25rem; align-items: center; font-size: .875rem; font-weight: 700; color: var(--ink); background: var(--zanahoria-suave); border-radius: .375rem; padding: .0625rem .5rem; margin: .25rem .25rem 0 0; }
.rep-linea { display: inline-flex; font-size: .875rem; font-weight: 600; color: var(--azul); background: var(--azul-suave); border-radius: .375rem; padding: .0625rem .5rem; margin: .25rem .25rem 0 0; }
.prodrow { display: grid; grid-template-columns: 3.25rem 1fr; gap: .75rem; align-items: start; padding: .875rem 0; border-top: 1px solid var(--line); }
.prodrow:first-child { border-top: 0; }
.prodrow img { width: 3.25rem; height: 3.25rem; border-radius: var(--r-chico); object-fit: cover; }
.ctl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .5rem; align-items: end; }
.ctl .ancho { grid-column: 1 / -1; }
.mini { display: flex; flex-direction: column; gap: .1875rem; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.mini input { padding: .5rem .625rem; }
.diarow { display: grid; grid-template-columns: 1fr; gap: .375rem; align-items: center; padding: .625rem 0; border-top: 1px solid var(--line); }
.diarow:first-child { border-top: 0; }
.diarow.off .chk img { filter: grayscale(1); opacity: .5; }
.diarow.off b { color: var(--muted); }
.dia-ctl { display: flex; gap: .5rem; align-items: flex-end; padding-left: 2.25rem; }
.dia-ctl .chip { flex: none; }
.dia-ctl .chip[aria-pressed="true"] { background: var(--zanahoria); border-color: var(--zanahoria); color: #2A1A08; }
.dia-ctl .mini { flex: 1; max-width: 9rem; }
.chk { display: flex; align-items: center; gap: .75rem; cursor: pointer; min-width: 0; min-height: var(--toque); }
.chk input { width: 1.5rem; height: 1.5rem; accent-color: var(--verde); flex: none; }
.chk img { width: 2.75rem; height: 2.75rem; border-radius: var(--r-chico); object-fit: cover; flex: none; }
.chk span { display: flex; flex-direction: column; min-width: 0; }
.barra-fija { position: sticky; bottom: calc(var(--tabbar) + .5rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .625rem .75rem; box-shadow: var(--sombra-alta); z-index: 5; }
.vec { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: .75rem .125rem; color: var(--ink); min-height: var(--toque); }
.vec:hover { background: var(--surface2); }
.vec-a, .vec-b { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.vec-b { align-items: flex-end; font-variant-numeric: tabular-nums; }
.hist { display: flex; flex-direction: column; gap: .25rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.hist:first-of-type { border-top: 0; }
.fotobtn { position: relative; border: 0; padding: 0; background: none; width: 3.25rem; height: 3.25rem; border-radius: var(--r-chico); overflow: hidden; }
.fotobtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nombrebtn { border: 0; background: none; padding: 0; color: var(--ink); font-size: 1rem; text-align: left; text-decoration: underline; text-decoration-color: var(--line-fuerte); text-underline-offset: 3px; min-height: 2rem; }
.total-input input { font-size: 1.75rem; font-weight: 800; min-height: 3.75rem; text-align: center; }
details > summary { cursor: pointer; font-weight: 700; color: var(--verde-hondo); min-height: var(--toque); display: flex; align-items: center; }
.hoja-impresa { display: flex; flex-direction: column; gap: .75rem; }
.esqueleto { background: linear-gradient(90deg, var(--surface2) 25%, var(--line) 50%, var(--surface2) 75%); background-size: 200% 100%; border-radius: var(--r); }
@media (prefers-reduced-motion: no-preference) { .esqueleto { animation: brillo 1.4s linear infinite; } @keyframes brillo { to { background-position: -200% 0; } } }
.esq-prod { aspect-ratio: 3 / 4.4; }

/* ---------- compu: más ancho y las pestañas arriba ---------- */
@media (min-width: 56rem) {
  :root { --ancho: 76rem; }
  .appbar { padding: 1rem 1.75rem .875rem; }
  .marca b { font-size: 1.75rem; }
  .tabbar { position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 0; }
  .tabbar-in { display: flex; height: 3.5rem; padding: 0 1.25rem; gap: .25rem; }
  .tabbar button { flex-direction: row; gap: .5rem; padding: 0 1rem; font-size: 1rem; }
  .tabbar button[aria-current="page"]::before { top: auto; bottom: 0; left: .5rem; right: .5rem; border-radius: 3px 3px 0 0; }
  .badge { position: static; }
  main { padding: 1.5rem 1.75rem 7rem; gap: 1.25rem; }
  h1 { font-size: 2.25rem; }
  .barra-carrito { left: auto; right: 1.75rem; bottom: 1.75rem; width: 24rem; margin: 0; }
  .toast { bottom: 1.75rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
  .carrusel { grid-auto-columns: 12rem; }
  .pegado { margin: 0; padding: .75rem 0 .5rem; flex-direction: row; align-items: center; top: 3.5rem; }
  .pegado .buscador { width: 22rem; flex: none; }
  body[data-screen="cart"] main, body[data-screen="mine"] main, body[data-screen="login"] main, body[data-screen="upload"] main, body[data-screen="edit"] main { max-width: 42rem; }
  .hoja-caja { border-radius: var(--r-grande); margin-bottom: 4vh; max-height: 88vh; }
  #hoja { align-items: center; }
  .dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
  .vueltas { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.25rem; align-items: start; }
  .prods { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .prods > :nth-child(2) { border-top: 0; }
  .kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .accesos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- celular chico ---------- */
@media (max-width: 23rem) {
  main { padding-left: .75rem; padding-right: .75rem; }
  .pegado { margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; }
  .grid { gap: .5rem; }
  .kpi b { font-size: 2rem; }
  .form { grid-template-columns: 1fr; }
}

/* ---------- impresión: hojas de armado y reparto ---------- */
@media print {
  :root { --bg: #fff; --surface: #fff; --surface2: #fff; --ink: #000; --muted: #333; --line: #999; }
  .appbar, .tabbar, .barra-carrito, .toast, #hoja, .no-imprimir, .sin-senal { display: none !important; }
  main { max-width: none; padding: 0; }
  .tarjeta, .ped { break-inside: avoid; border-color: #999; }
  body { font-size: 12pt; }
}

/* ---------- combos y cajón ---------- */
.mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 100%; height: 100%; gap: 2px; background: var(--papel); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.combo.cajon { border: 2px solid var(--verde); }
.combo .cartel { background: var(--verde-suave); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .combo .cartel { background: var(--papel); } }
.linea-extra select { font-size: .9375rem; }
.linea-extra { gap: .375rem; }
.linea-extra .campo { font-size: .8125rem; color: var(--muted); gap: .1875rem; }
.linea-extra .campo .chico { font-size: .8125rem; display: inline; }
.linea-cab .num, .estimado span.num { font-family: var(--display); font-stretch: 92%; font-size: 1.125rem; font-weight: 700; }

/* mis pedidos */
.pedido > .fila h2 { font-size: 1.1875rem; }
.pedido details { border-top: 1px solid var(--line); }
.copiar .chico { flex: none; }
.titulo-seccion .btn-chico { flex: none; }

/* ajustes */
.colores { border: 0; padding: 0; margin: 0; }
.colores legend { margin-bottom: .375rem; }
.color-op { width: var(--toque); height: var(--toque); border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line-fuerte); color: #fff; display: grid; place-items: center; }
.color-op[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.vuelta-aj { grid-template-columns: 1fr 1fr 7rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
@media (max-width: 23rem) { .vuelta-aj { grid-template-columns: 1fr 1fr; } }
input[type=time] { min-height: var(--toque); font-size: 1rem; padding: .5rem; border-radius: var(--r-chico); border: 1.5px solid var(--line-fuerte); background: var(--surface); color: var(--ink); width: 100%; }

/* consultas de precio en el panel */
.consulta { flex-wrap: wrap; }
.consulta .ancho-total { width: 100%; grid-template-columns: 1fr 1fr; }
.consulta .chk { font-size: .9375rem; }

/* ---------- arreglos de la auditoría ---------- */
/* A1: el corazón y las etiquetas van arriba de la foto */
.fav { z-index: 3; }
.marcas { z-index: 2; }
/* B1: etiquetas en un solo renglón */
.marca-prod { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* A2: la foto de la ficha no empuja el botón fuera de pantalla */
.hoja-foto { max-height: 40vh; max-height: 40dvh; }
/* B2: en la ficha, el cartelito va debajo del nombre */
.hoja-cab { flex-direction: column; align-items: flex-start; gap: .5rem; }
/* M1: nombres tocables de 48 px */
.prod-nombre { min-height: var(--toque); display: flex; align-items: center; }
.nombrebtn { min-height: var(--toque); }
/* M2: más y menos de 48 px; link de ayuda tocable */
.paso .btn-icono { width: var(--toque); }
.link-toque { display: inline-block; padding: .75rem 0; }
/* M3: el interruptor se ve igual pero se toca en 48 px */
.interruptor { box-sizing: content-box; border: .5rem solid transparent; background-clip: padding-box; }
/* M4: foco claro sobre la barra verde */
.appbar :focus-visible { outline-color: #FFFDF6; }
/* M6: pasos y títulos que no se cortan con letra grande */
.pasos li { white-space: normal; overflow: visible; }
.marca { overflow: hidden; }

/* En celulares chicos, "De temporada" es solo la hojita (el texto queda para lectores de pantalla). */
@media (max-width: 26rem) { .marca-prod.temporada .marca-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 56rem) { .hoja-caja { max-width: 40rem; } }
.combo .marcas { right: .5rem; }