/* Costeo de platillos — Cocina Tres Comales
   Papel de estraza, cartulinas fosforescentes de mercado y vajilla de talavera. */
:root {
  --estraza: #D4B48A;
  --estraza-claro: #E6CFA8;
  --estraza-oscuro: #B8956A;
  --tinta: #2B1B12;
  --tinta-suave: #4E3826;
  --rosa: #C4185C;
  --rosa-osc: #9E0F49;
  --nopal: #2E7D32;
  --cempasuchil: #E8A317;
  --chile: #B3261E;
  --chile-texto: #8E1A14;
  --ambar-texto: #6E4800;
  --talavera: #1F4E9B;
  --fosfo-rosa: #FF6FAE;
  --fosfo-amarillo: #F6F03A;
  --fosfo-verde: #86F06E;
  --papel: #FFFDF6;
  --barra: 120px;
  --tabbar: 62px;
  --f-rotulo: 'Shrikhand', 'Georgia', serif;
  --f-cuerpo: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-plumon: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f-ticket: 'Courier Prime', 'Courier New', monospace;
  --radio: 14px;
  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .09 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='.55'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--f-cuerpo); font-size: 16px; line-height: 1.45; color: var(--tinta);
  background-color: var(--estraza);
  background-image:
    var(--textura),
    radial-gradient(ellipse at 20% 0%, rgba(255,240,210,.45), transparent 60%);
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; }
a { color: var(--rosa-osc); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--talavera); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .6rem 1rem; z-index: 100; }
.saltar:focus { left: .5rem; top: .5rem; }
[hidden] { display: none !important; }

/* ── Barra superior ───────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 40; background: var(--tinta); color: #F7EBD6; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.demo-banner { background: #2b2620; color: #f2ece1; text-align: center; font-size: .8rem; line-height: 1.35; padding: .35rem .9rem; letter-spacing: .01em; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 640px) { .demo-banner { font-size: .88rem; } }
.barra-in { display: flex; align-items: center; gap: .6rem; padding: .5rem max(1rem, env(safe-area-inset-left)); max-width: 1180px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; min-width: 0; flex: 1; }
.marca-comales { width: 46px; flex: none; background: #F7EBD6; border-radius: 10px; padding: 3px 4px; }
.marca-txt { display: flex; flex-direction: column; min-width: 0; }
.marca-txt strong { font-family: var(--f-rotulo); font-weight: 400; font-size: 1.12rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFE7A6; }
.marca-txt small { font-size: .76rem; opacity: .85; white-space: nowrap; }
.pestanas { display: none; }
.barra-acc { display: flex; gap: .35rem; flex: none; }
.icono { display: inline-flex; align-items: center; gap: .35rem; min-width: 42px; height: 42px; justify-content: center; border: 1.5px solid rgba(247,235,214,.35); background: transparent; color: #F7EBD6; border-radius: 999px; cursor: pointer; padding: 0 .6rem; }
.icono svg { width: 22px; height: 22px; }
.icono:hover { background: rgba(255,255,255,.08); }
.icono-txt span { display: none; font-size: .85rem; }
.icono .tache { display: none; }
.icono.mudo .ondas { display: none; }
.icono.mudo .tache { display: inline; }
@media (min-width: 900px) {
  .pestanas { display: flex; gap: .25rem; margin: 0 auto; }
  .pestanas a { color: #F7EBD6; text-decoration: none; padding: .45rem .9rem; border-radius: 999px; font-weight: 600; }
  .pestanas a[aria-current="page"] { background: var(--rosa); color: #fff; }
  .pestanas a:hover:not([aria-current="page"]) { background: rgba(255,255,255,.08); }
  .marca { flex: none; }
  .icono-txt span { display: inline; }
}

/* ── Estructura ───────────────────────────────────────────────── */
main { display: block; max-width: 1180px; margin: 0 auto; padding: 0 1rem; outline: none; }
.intro { padding: 1.4rem 0 1rem; max-width: 46rem; }
.intro h1 { font-family: var(--f-rotulo); font-weight: 400; font-size: clamp(2rem, 8.5vw, 3.3rem); line-height: 1.02; margin: 0 0 .55rem; letter-spacing: .005em; color: var(--tinta); }
.intro h1 em { font-style: normal; color: var(--rosa-osc); text-shadow: 2px 2px 0 rgba(43,27,18,.12); }
.intro p { margin: 0; font-size: 1.02rem; color: var(--tinta-suave); max-width: 40rem; }
h2 { font-family: var(--f-rotulo); font-weight: 400; font-size: 1.45rem; line-height: 1.1; margin: 0 0 .4rem; }
h3 { margin: 0 0 .5rem; font-size: 1.05rem; }

.tarjeta {
  background: var(--estraza-claro); border-radius: var(--radio); padding: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 0 rgba(43,27,18,.12), 0 8px 18px -10px rgba(43,27,18,.45);
  border: 1px solid rgba(43,27,18,.12);
}
.tablero { display: grid; gap: 1rem; }
.col-sim { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 900px) {
  .tablero { grid-template-columns: minmax(320px, 400px) 1fr; align-items: start; }
  .col-sim { position: sticky; top: calc(var(--barra) + 1rem); }
}

/* ── Botones, chips, cartulinas ───────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.05rem;
  border-radius: 999px; border: 2px solid var(--rosa); background: var(--rosa); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 var(--rosa-osc); transition: transform .08s, box-shadow .08s;
}
.boton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rosa-osc); }
.boton:disabled { opacity: .5; cursor: default; }
.boton-borde { background: transparent; color: var(--tinta); border-color: var(--tinta); box-shadow: 0 3px 0 rgba(43,27,18,.35); }
.boton-borde:active { box-shadow: 0 1px 0 rgba(43,27,18,.35); }
.boton-peligro { color: var(--chile-texto); border-color: var(--chile-texto); }
.boton-borde-claro { background: transparent; color: #F7EBD6; border-color: #F7EBD6; box-shadow: none; }
.boton-cara { background: var(--tinta); border-color: var(--tinta); box-shadow: 0 3px 0 #000; }

.chip { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-weight: 700; font-size: .82rem; line-height: 1.4; white-space: nowrap; }
.chip-verde { background: var(--nopal); color: #fff; }
.chip-amarillo { background: var(--cempasuchil); color: var(--tinta); }
.chip-rojo { background: var(--chile); color: #fff; }
.t-verde { color: var(--nopal); } .t-amarillo { color: var(--ambar-texto); } .t-rojo { color: var(--chile-texto); }

/* Cartulina fosforescente con precio a plumón, como en el mercado */
.cartulina {
  display: inline-flex; align-items: baseline; gap: .15rem; font-family: var(--f-plumon); background: var(--fosfo-amarillo); color: var(--tinta);
  padding: .1rem .5rem .05rem; border-radius: 3px; transform: rotate(-1.5deg); box-shadow: 1px 2px 0 rgba(43,27,18,.25); line-height: 1.25;
}
.cartulina small { font-family: var(--f-cuerpo); font-size: .7rem; font-weight: 600; margin-left: .1rem; }
.cartulina s { font-size: .78em; opacity: .85; text-decoration-thickness: 2px; }
.cartulina-chica { font-size: 1.05rem; }
.vacio { color: var(--tinta-suave); font-style: italic; margin: .4rem 0; }
.vacio-grande { list-style: none; padding: 1.5rem 1rem; text-align: center; display: grid; gap: .8rem; justify-items: center; }

/* ── Cuenta semanal ───────────────────────────────────────────── */
.cuenta { background: var(--tinta); color: #F7EBD6; border: 0; }
.cuenta-tit { margin: 0; font-size: .9rem; opacity: .85; }
.cuenta-total { margin: .1rem 0 .3rem; font-family: var(--f-rotulo); font-size: clamp(2.1rem, 10vw, 2.7rem); line-height: 1.05; color: #FFE7A6; }
.cuenta-total.late { animation: late .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes late { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.cuenta-dif { margin: 0 0 .5rem; font-weight: 700; padding: .35rem .6rem; border-radius: 8px; font-size: .92rem; }
.cuenta-dif.pierde { background: var(--chile); color: #fff; }
.cuenta-dif.gana { background: var(--nopal); color: #fff; }
.cuenta-conteo { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .5rem; }
.cuenta-nota { margin: 0; font-size: .78rem; opacity: .75; }

/* ── Simulador ────────────────────────────────────────────────── */
.sim h2 { color: var(--rosa-osc); }
.sim-ayuda { margin: 0 0 .8rem; color: var(--tinta-suave); font-size: .93rem; }
.sim-fila { display: grid; grid-template-columns: 1fr 9.6rem; gap: .3rem .8rem; align-items: center; padding: .55rem 0; }
.sim-fila + .sim-fila { border-top: 1px dashed rgba(43,27,18,.25); }
.sim-fila label { display: flex; justify-content: space-between; gap: .5rem; font-weight: 700; grid-column: 1 / -1; }
.sim-pct { font-variant-numeric: tabular-nums; min-width: 3.4rem; text-align: right; }
.sim-pct.sube { color: var(--chile-texto); } .sim-pct.baja { color: var(--nopal); }
.sim-fila input[type=range] { grid-column: 1; }
.sim-precio { grid-column: 2; font-size: 1.05rem; white-space: nowrap; justify-self: end; }
#sim-principal .sim-fila { padding-top: 0; }
#sim-principal .sim-fila label { font-size: 1.1rem; }
#sim-principal .sim-precio { font-size: 1.3rem; background: var(--fosfo-rosa); }
.sim-mas { margin-top: .3rem; border-top: 1px dashed rgba(43,27,18,.3); }
.sim-mas summary { cursor: pointer; padding: .7rem 0; font-weight: 600; color: var(--talavera); list-style: none; }
.sim-mas summary::before { content: '▸ '; display: inline-block; transition: transform .2s; }
.sim-mas[open] summary::before { transform: rotate(90deg); }
.sim-mas summary::-webkit-details-marker { display: none; }
.sim-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.guia-pollo #sim-principal .sim-fila { animation: llama 1.6s ease-in-out infinite; border-radius: 10px; }
@keyframes llama { 0%, 100% { box-shadow: 0 0 0 0 rgba(196,24,92,0); } 50% { box-shadow: 0 0 0 6px rgba(196,24,92,.28); } }

/* Deslizadores: riel de estraza, relleno rosa, perilla de comal */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; cursor: pointer; margin: 0; touch-action: pan-y; }
input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--rosa) var(--p, 50%), rgba(43,27,18,.2) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--rosa) var(--p, 50%), rgba(43,27,18,.2) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a4636, var(--tinta) 60%); border: 3px solid var(--fosfo-amarillo); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); border: 3px solid var(--fosfo-amarillo); }

/* ── Lista del menú ───────────────────────────────────────────── */
.lista-cab { display: flex; justify-content: space-between; align-items: end; gap: .8rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.lista-cab h2 { margin: 0; }
.orden { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--tinta-suave); }
.orden select, .desp-precio select { background: var(--estraza-claro); border: 1.5px solid rgba(43,27,18,.35); border-radius: 8px; padding: .35rem .5rem; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fila { border-radius: var(--radio); background: var(--estraza-claro); border: 1px solid rgba(43,27,18,.12); box-shadow: 0 2px 0 rgba(43,27,18,.12); position: relative; overflow: hidden; transition: background-color .35s, border-color .35s; }
.fila::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--nopal); transition: background-color .35s; }
.fila.est-amarillo::before { background: var(--cempasuchil); }
.fila.est-rojo { background: #F2C6B8; border-color: rgba(179,38,30,.55); }
.fila.est-rojo::before { background: var(--chile); }
.fila.sacude { animation: sacude .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes sacude { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px) rotate(-.6deg); } 40%, 60% { transform: translateX(7px) rotate(.6deg); } }
.fila-a { display: grid; grid-template-columns: 54px 1fr auto; gap: .65rem; align-items: center; padding: .6rem .7rem .6rem .9rem; color: inherit; text-decoration: none; }
.fila-a:hover .fila-nom { text-decoration: underline; text-decoration-thickness: 2px; }
.fila-plato { width: 54px; height: 54px; }
.fila-plato svg { width: 54px; height: 54px; display: block; border-radius: 50%; filter: drop-shadow(0 2px 2px rgba(43,27,18,.3)); }
.fila-txt { display: grid; gap: .15rem; min-width: 0; }
.fila-nom { font-weight: 700; line-height: 1.2; }
.fila-det { font-size: .82rem; color: var(--tinta-suave); }
.fila-det b { color: var(--tinta); font-weight: 600; }
.barra-margen { position: relative; height: 7px; border-radius: 999px; background: rgba(43,27,18,.15); margin-top: .25rem; overflow: visible; }
.barra-margen i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--nopal); transition: width .25s, background-color .35s; }
.est-amarillo .barra-margen i { background: var(--cempasuchil); }
.est-rojo .barra-margen i { background: var(--chile); }
.barra-margen em { position: absolute; top: -2px; width: 2px; height: 11px; background: rgba(43,27,18,.45); }
.fila-gan { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.fila-gan small { font-size: .72rem; color: var(--tinta-suave); }
.fila-gan b { font-size: 1.12rem; line-height: 1; }
.est-rojo .fila-gan b { color: var(--chile-texto); }
.boton-nuevo { margin: .9rem 0 0; width: 100%; }
@media (min-width: 600px) { .boton-nuevo { width: auto; } }

/* ── Cierre y pie ─────────────────────────────────────────────── */
.cierre { margin: 2.5rem 0 1rem; }
.cierre-in { background: var(--rosa); color: #fff; border-radius: 22px; padding: 1.6rem 1.3rem; position: relative; overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(43,27,18,.8); }
.cierre-in::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 14px dotted rgba(255,231,166,.35); }
.cierre-pre { margin: 0 0 .3rem; font-weight: 600; opacity: .9; }
.cierre h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); color: #FFE7A6; max-width: 30rem; }
.cierre p { max-width: 34rem; }
.boton-wa { background: #0F7A6E; border-color: #0F7A6E; box-shadow: 0 3px 0 #0B5E55; margin: .4rem 0 .6rem; }
.boton-wa:hover { background: #0B6359; }
.cierre-tel { font-size: .95rem; margin: 0; }
.cierre-tel a { color: #fff; font-weight: 700; }
.pie { text-align: center; padding: 1rem 1.25rem 1.6rem; color: var(--tinta-suave); }
.pie .credito { margin: 0 0 .35rem; font-size: .85rem; color: var(--tinta); }
.pie .credito a { color: var(--tinta); font-weight: 600; }
.pie-nota { margin: 0; font-size: .78rem; }

/* Botón fijo discreto */
.escribenos { position: fixed; right: .75rem; bottom: calc(var(--tabbar) + .7rem + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: .3rem;
  background: var(--tinta); color: #F7EBD6; text-decoration: none; font-size: .8rem; padding: .45rem .8rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(43,27,18,.35); border: 1.5px solid #FFE7A6; }
.escribenos b { color: #FFE7A6; }
.escribenos span { display: none; }
@media (min-width: 420px) { .escribenos span { display: inline; } }
body:has(.guia:not([hidden])) .escribenos { display: none; }

/* Barra de pestañas (celular) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(3, 1fr); height: calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: var(--tinta); box-shadow: 0 -2px 10px rgba(0,0,0,.2); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; color: #CDBBA0; text-decoration: none; font-size: .78rem; font-weight: 600; }
.tabbar svg { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: #FFE7A6; }
.tabbar a[aria-current="page"] svg { color: var(--fosfo-rosa); }
@media (min-width: 900px) {
  .tabbar { display: none; }
  body { padding-bottom: 0; }
  .escribenos { bottom: 1rem; right: 1rem; font-size: .88rem; }
}
.con-editor .tabbar, .con-editor .escribenos { display: none; }

/* ── Editor «Arma el plato» ───────────────────────────────────── */
.capa-editor { position: fixed; left: 0; right: 0; bottom: 0; top: var(--barra); z-index: 38; overflow-y: auto; overscroll-behavior: contain;
  background: var(--estraza); background-image: var(--textura); -webkit-overflow-scrolling: touch; }
.con-editor { overflow: hidden; }
.ed { max-width: 1180px; margin: 0 auto; padding: 0 1rem 2rem; }
.ed-top { display: flex; align-items: center; gap: .5rem; padding: .6rem 0; }
.ed-volver { flex: none; font-weight: 700; color: var(--tinta); text-decoration: none; padding: .45rem .7rem; border-radius: 999px; border: 2px solid var(--tinta); }
.ed-nombre { flex: 1; min-width: 0; font-family: var(--f-rotulo); font-size: 1.2rem; background: transparent; border: 0; border-bottom: 2px dashed rgba(43,27,18,.4); padding: .2rem .1rem; color: var(--tinta); }
.ed-nombre:focus { border-bottom-color: var(--rosa-osc); }
.boton-ticket { flex: none; background: var(--talavera); border-color: var(--talavera); box-shadow: 0 3px 0 #133466; padding: .5rem .85rem; font-size: .92rem; }
.ed-escena { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1.15fr 1fr; gap: .4rem; align-items: center;
  margin: 0 -1rem; padding: .3rem 1rem .5rem; background: var(--estraza); background-image: var(--textura); border-bottom: 2px dashed rgba(43,27,18,.25); }
.plato-wrap { position: relative; aspect-ratio: 300 / 315; }
.plato-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ed-vacio { position: absolute; left: 1rem; width: 52%; top: 46%; text-align: center; font-family: var(--f-plumon); font-size: 1rem; margin: 0; pointer-events: none; color: var(--tinta-suave); }
.pz { transition: transform .38s cubic-bezier(.34,1.45,.64,1); }
.pz-in.entra { animation: cae .5s cubic-bezier(.34,1.56,.64,1) both; transform-box: fill-box; transform-origin: center; }
@keyframes cae { 0% { opacity: 0; transform: translateY(-34px) scale(1.5); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.pz.sale { transition: opacity .25s; opacity: 0; }
.vapor path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: 0; filter: url(#difumina); }
.humea .vapor path { animation: vapor 3.4s ease-in-out infinite; }
.humea .vapor path:nth-child(2) { animation-delay: 1.1s; }
.humea .vapor path:nth-child(3) { animation-delay: 2.2s; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(10px) scaleY(.8); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-60px) scaleY(1.15); } }

.medidor { text-align: center; }
.medidor-tit { margin: 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.medidor-svg { width: 100%; display: block; overflow: visible; }
.medidor-svg text { font-size: 12px; fill: var(--tinta-suave); font-family: var(--f-cuerpo); font-weight: 600; }
.aguja { transform-origin: 110px 112px; transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.medidor-pct { margin: -.1rem 0 0; font-family: var(--f-rotulo); font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1; }
.medidor-est { margin: .15rem 0; display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-weight: 700; font-size: .85rem; background: var(--nopal); color: #fff; }
.med-amarillo .medidor-est { background: var(--cempasuchil); color: var(--tinta); }
.med-rojo .medidor-est { background: var(--chile); }
.med-verde .medidor-pct { color: var(--nopal); } .med-amarillo .medidor-pct { color: var(--ambar-texto); } .med-rojo .medidor-pct { color: var(--chile-texto); }
.medidor-gan { margin: .1rem 0 0; font-size: .82rem; }
.medidor.salta { animation: late .5s cubic-bezier(.34,1.56,.64,1); }

.ed-panel { display: grid; gap: .8rem; padding-top: .9rem; }
.ed-panel h3 small { font-weight: 500; color: var(--tinta-suave); }
.precio-ctl { display: flex; align-items: center; gap: .5rem; }
.paso { min-width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--tinta); background: var(--papel); font-weight: 700; cursor: pointer; font-size: 1.05rem; }
.paso:active { transform: translateY(1px); }
.precio-campo { font-size: 1.7rem; padding: .1rem .6rem; background: var(--fosfo-verde); }
.precio-campo input { width: 4.2ch; border: 0; background: transparent; font-family: var(--f-plumon); font-size: inherit; padding: 0; -moz-appearance: textfield; }
.precio-campo input::-webkit-outer-spin-button, .precio-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-resumen { margin: .7rem 0 0; font-size: .95rem; }
.justo-lbl { display: block; margin-bottom: .2rem; }
.justo-lbl b { font-size: 1.15rem; color: var(--rosa-osc); }
.justo-res { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-top: .4rem; }
.justo-res p { margin: 0; }
.ings { list-style: none; margin: 0 0 .7rem; padding: 0; }
.ing { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "nom nom quitar" "cant costo costo"; gap: .3rem .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed rgba(43,27,18,.25); }
.ing-nom { grid-area: nom; font-weight: 600; line-height: 1.2; }
.ing-nom small { display: block; font-weight: 400; font-size: .76rem; color: var(--tinta-suave); }
.ing-cant { grid-area: cant; display: flex; align-items: center; gap: .3rem; }
.ing-cant .paso { min-width: 42px; height: 42px; }
.ing-cant input { width: 4.6rem; height: 40px; text-align: center; border: 1.5px solid rgba(43,27,18,.35); border-radius: 10px; background: var(--papel); font-weight: 700; }
.ing-cant em { font-style: normal; font-size: .85rem; color: var(--tinta-suave); width: 1.9rem; }
.ing-costo { grid-area: costo; justify-self: end; font-weight: 700; }
.ing-quitar { grid-area: quitar; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: var(--chile-texto); cursor: pointer; justify-self: end; }
.ing-quitar:hover { background: rgba(179,38,30,.1); }
.agregar { position: relative; }
.agregar input, .desp-herr input[type=search] { width: 100%; min-height: 46px; padding: .55rem .8rem; border-radius: 12px; border: 2px solid var(--tinta); background: var(--papel); }
.sugerencias { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .3rem; }
.sugerencias button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: .5rem; padding: .6rem .8rem; border-radius: 10px; border: 1.5px solid rgba(43,27,18,.25); background: var(--papel); cursor: pointer; font-weight: 600; }
.sugerencias button small { font-weight: 400; color: var(--tinta-suave); }
.sugerencias button:hover, .sugerencias button:focus-visible { border-color: var(--rosa); }
.mas-fila { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .3rem 0 .6rem; }
.mas-fila input { width: 6rem; min-height: 42px; text-align: center; border: 1.5px solid rgba(43,27,18,.35); border-radius: 10px; background: var(--papel); font-weight: 700; }
.segmento { display: inline-flex; border: 2px solid var(--tinta); border-radius: 999px; overflow: hidden; }
.segmento button { border: 0; background: transparent; padding: .45rem .8rem; cursor: pointer; font-weight: 600; min-height: 40px; }
.segmento button[aria-checked="true"] { background: var(--tinta); color: #FFE7A6; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; padding-top: .3rem; }

@media (max-width: 899px) {
  .ed-top .boton-ticket { font-size: .85rem; padding: .45rem .7rem; }
}
@media (max-width: 599px) {
  .ed-top { flex-wrap: wrap; }
  .ed-nombre { order: 3; flex-basis: 100%; }
  .ed-top .boton-ticket { margin-left: auto; }
}
@media (min-width: 900px) {
  .ed-cuerpo { display: grid; grid-template-columns: 1.4fr minmax(360px, 460px); gap: 2rem; align-items: start; }
  .ed-top { position: sticky; top: 0; z-index: 4; background: var(--estraza); background-image: var(--textura); }
  .ed-escena { position: sticky; top: 4.4rem; grid-template-columns: 1.35fr 1fr; gap: 1rem; margin: 0; padding: 0; border: 0; background: none; }
  .plato-wrap { width: 100%; max-height: calc(100vh - var(--barra) - 6rem); }
  .medidor { max-width: 260px; margin: 0 auto; }
  .ed-vacio { left: 0; width: 57%; top: 46%; font-size: 1.2rem; }
  .ed-panel { padding-top: 0; }
  .ed-nombre { font-size: 1.6rem; }
}

/* ── Ticket ───────────────────────────────────────────────────── */
.capa-ticket { position: fixed; inset: 0; z-index: 60; background: rgba(28,17,10,.82); display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 1rem 1rem 2rem; }
.ticketera { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; }
.impresora { width: 100%; height: 54px; border-radius: 16px 16px 10px 10px; background: linear-gradient(#4A3A30, #231710); position: relative; box-shadow: 0 6px 14px rgba(0,0,0,.4); z-index: 2; }
.ranura { position: absolute; left: 7%; right: 7%; bottom: 10px; height: 8px; border-radius: 4px; background: #0d0805; box-shadow: inset 0 2px 3px #000; }
.led { position: absolute; right: 16px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--fosfo-verde); box-shadow: 0 0 8px var(--fosfo-verde); }
.ticket-salida { width: 86%; overflow: hidden; margin-top: -12px; padding-bottom: 14px; }
.ticket-papel { background: var(--papel); color: var(--tinta); padding: 22px 12px 26px; box-shadow: 0 8px 16px rgba(0,0,0,.35);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x; }
.ticket-papel.imprime { animation: imprime 1.6s steps(18, end) both; }
@keyframes imprime { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.ticket-papel pre { margin: 0; font-family: var(--f-ticket); font-size: clamp(10.5px, 3.45vw, 13px); line-height: 1.45; white-space: pre; overflow: hidden; }
.ticket-papel .b { font-weight: 700; }
.ticket-papel .t-amarillo { color: #8A5A00; }
.ticket-botones { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .6rem; }

/* ── Mapa ─────────────────────────────────────────────────────── */
.mapa-cuerpo { display: grid; gap: 1rem; }
@media (min-width: 900px) { .mapa-cuerpo { grid-template-columns: 1.3fr 1fr; align-items: start; } .mapa-lienzo { position: sticky; top: calc(var(--barra) + 1rem); } }
.mapa-lienzo { padding: .5rem; }
#mapa-svg { width: 100%; display: block; overflow: visible; }
#mapa-svg rect { opacity: .55; }
rect.q-renta { fill: #9BD08A; } rect.q-consentidos { fill: #F5C96A; } rect.q-joyas { fill: #9DB7E4; } rect.q-estorban { fill: #E9A08F; }
#mapa-svg .q-tit { font-family: var(--f-rotulo); font-size: 12px; fill: var(--tinta); opacity: .75; }
#mapa-svg .eje { font-size: 10px; fill: var(--tinta-suave); font-weight: 600; }
#mapa-svg .eje-cero { stroke: var(--chile); stroke-dasharray: 4 3; }
.punto { cursor: pointer; transition: transform .5s cubic-bezier(.34,1.3,.64,1); }
.punto circle { stroke: var(--papel); stroke-width: 2.5; transition: r .2s; }
.punto.q-renta circle { fill: var(--nopal); } .punto.q-consentidos circle { fill: #B97A00; } .punto.q-joyas circle { fill: var(--talavera); } .punto.q-estorban circle { fill: var(--chile); }
.punto text { font-size: 9.5px; font-weight: 700; fill: var(--tinta); paint-order: stroke; stroke: rgba(255,248,235,.85); stroke-width: 3px; stroke-linejoin: round; }
.punto.sel circle { stroke: var(--tinta); stroke-width: 3; }
.punto:focus-visible { outline: none; } .punto:focus-visible circle { stroke: var(--rosa); stroke-width: 4; }
.ficha-pista { margin: 0; padding: 1rem; border: 2px dashed rgba(43,27,18,.35); border-radius: var(--radio); text-align: center; font-family: var(--f-plumon); }
.ficha { border-radius: var(--radio); padding: 1rem; background: var(--papel); border-left: 8px solid var(--nopal); box-shadow: 0 6px 16px -10px rgba(43,27,18,.6); }
.ficha.q-consentidos { border-left-color: var(--cempasuchil); } .ficha.q-joyas { border-left-color: var(--talavera); } .ficha.q-estorban { border-left-color: var(--chile); }
.ficha-q { margin: 0; font-family: var(--f-rotulo); color: var(--rosa); font-size: 1.05rem; }
.ficha h3 { margin: .2rem 0; font-size: 1.15rem; }
.ficha-num { margin: 0 0 .6rem; font-size: .85rem; color: var(--tinta-suave); }
.ficha-rec { margin: 0 0 .8rem; font-size: 1.02rem; }
.mapa-grupos { display: grid; gap: .6rem; margin-top: 1rem; }
@media (min-width: 560px) and (max-width: 899px) { .mapa-grupos { grid-template-columns: 1fr 1fr; } }
.grupo { background: var(--estraza-claro); border-radius: var(--radio); padding: .7rem .8rem; border-top: 5px solid var(--nopal); }
.grupo.q-consentidos { border-top-color: var(--cempasuchil); } .grupo.q-joyas { border-top-color: var(--talavera); } .grupo.q-estorban { border-top-color: var(--chile); }
.grupo h3 { font-family: var(--f-rotulo); font-weight: 400; font-size: 1rem; display: flex; justify-content: space-between; }
.grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.grupo button { border: 1.5px solid rgba(43,27,18,.3); background: var(--papel); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; font-size: .85rem; min-height: 36px; }

/* ── Despensa ─────────────────────────────────────────────────── */
.desp-herr { display: flex; gap: .6rem; margin-bottom: 1rem; position: sticky; top: var(--barra); z-index: 5; padding: .5rem 0; background: var(--estraza); background-image: var(--textura); }
.desp-herr .boton { flex: none; }
.desp-lista { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .desp-lista { grid-template-columns: 1fr 1fr; align-items: start; } }
.desp-cat h3 { font-family: var(--f-rotulo); font-weight: 400; font-size: 1.15rem; margin-bottom: .4rem; }
.desp-cat ul { list-style: none; margin: 0; padding: 0; background: var(--estraza-claro); border-radius: var(--radio); border: 1px solid rgba(43,27,18,.12); }
.desp-item { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "nom precio mas" "meta precio mas"; gap: .1rem .5rem; align-items: center; padding: .55rem .7rem; }
.desp-item + .desp-item { border-top: 1px dashed rgba(43,27,18,.25); }
.desp-nom { grid-area: nom; border: 0; background: transparent; font-weight: 600; padding: .2rem 0; min-width: 0; text-overflow: ellipsis; width: 100%; border-bottom: 1.5px dashed transparent; }
.desp-nom:hover, .desp-nom:focus { border-bottom-color: rgba(43,27,18,.4); outline: none; }
.desp-meta { grid-area: meta; font-size: .76rem; color: var(--tinta-suave); }
.desp-precio { grid-area: precio; font-size: 1.15rem; }
.desp-item:nth-child(3n+2) .desp-precio { background: var(--fosfo-rosa); transform: rotate(1.2deg); }
.desp-item:nth-child(3n+3) .desp-precio { background: var(--fosfo-verde); transform: rotate(-.6deg); }
.desp-precio input { width: 4.4ch; border: 0; background: transparent; font-family: var(--f-plumon); font-size: inherit; padding: 0; -moz-appearance: textfield; }
.desp-precio input::-webkit-outer-spin-button, .desp-precio input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.desp-precio select { font-family: var(--f-cuerpo); font-size: .72rem; font-weight: 600; background: transparent; border: 0; padding: 0 .1rem; }
.desp-mas { grid-area: mas; position: relative; }
.desp-mas summary { list-style: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 1.2rem; }
.desp-mas summary::-webkit-details-marker { display: none; }
.desp-mas summary:hover { background: rgba(43,27,18,.1); }
.desp-mas > div { position: absolute; right: 0; top: 44px; z-index: 6; width: min(280px, 80vw); background: var(--papel); border-radius: 12px; padding: .8rem; display: grid; gap: .6rem; box-shadow: 0 10px 24px rgba(43,27,18,.35); }
.desp-mas label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; }
.desp-mas select, .desp-mas input { min-height: 40px; border: 1.5px solid rgba(43,27,18,.35); border-radius: 8px; background: #fff; padding: .3rem .5rem; font-weight: 400; }
.ajustes { margin-top: 1.4rem; }
.ajustes p { color: var(--tinta-suave); margin: .2rem 0 .7rem; }
.aj-campos { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.aj-campos label { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.aj-campos input { width: 4rem; min-height: 40px; text-align: center; border: 1.5px solid rgba(43,27,18,.35); border-radius: 8px; background: var(--papel); font-weight: 700; }
.aj-campos p { margin: 0; font-weight: 600; color: var(--tinta); }

/* ── Guía, diálogos y avisos ──────────────────────────────────── */
.guia { position: fixed; left: .75rem; right: .75rem; bottom: calc(var(--tabbar) + .7rem + env(safe-area-inset-bottom)); z-index: 45; background: var(--fosfo-amarillo); color: var(--tinta);
  border-radius: 14px; padding: .8rem 1rem; box-shadow: 0 10px 24px rgba(43,27,18,.4); max-width: 420px; transform: rotate(-.6deg); animation: aparece .4s cubic-bezier(.34,1.56,.64,1); }
.guia-paso { margin: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.guia-tit { margin: .1rem 0; font-family: var(--f-plumon); font-size: 1.25rem; line-height: 1.2; }
.guia-txt { margin: 0 0 .5rem; font-size: .92rem; }
.guia-ok { border: 2px solid var(--tinta); background: transparent; border-radius: 999px; padding: .3rem .8rem; font-weight: 700; cursor: pointer; min-height: 38px; }
.con-editor .guia { bottom: 1rem; }
@media (min-width: 900px) { .guia { left: auto; right: 1rem; bottom: 4rem; } }
@keyframes aparece { from { opacity: 0; transform: translateY(20px) rotate(-.6deg); } }
.capa-dialogo { position: fixed; inset: 0; z-index: 70; background: rgba(28,17,10,.7); display: grid; place-items: center; padding: 1rem; }
.dialogo { background: var(--estraza-claro); border-radius: 18px; padding: 1.3rem; max-width: 380px; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.dialogo p { margin: 0 0 1rem; }
.dialogo-bot { display: flex; gap: .6rem; flex-wrap: wrap; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 1rem + env(safe-area-inset-bottom)); z-index: 80; transform: translate(-50%, 140%); opacity: 0;
  background: var(--tinta); color: #F7EBD6; border-radius: 14px; padding: .7rem 1rem; display: flex; gap: .8rem; align-items: center; width: max-content; max-width: calc(100vw - 1.5rem);
  box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .3s cubic-bezier(.34,1.4,.64,1), opacity .2s; pointer-events: none; font-size: .93rem; }
.toast.ver { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast button { border: 0; background: var(--fosfo-amarillo); color: var(--tinta); border-radius: 999px; padding: .3rem .8rem; font-weight: 700; cursor: pointer; flex: none; }
.con-editor .toast { bottom: 1rem; }
@media (min-width: 900px) { .toast { bottom: 1.2rem; } }
.sin-js { position: fixed; inset: auto 1rem 5rem; background: var(--chile); color: #fff; padding: 1rem; border-radius: 12px; z-index: 90; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .humea .vapor path { animation: none; }
}

/* ── Barra flotante del pollo (celular) ───────────────────────── */
.sim-flota { position: fixed; left: 0; right: 0; top: var(--barra); z-index: 36; background: var(--estraza-claro); padding: .45rem 1rem .2rem;
  border-bottom: 2px solid var(--rosa); box-shadow: 0 6px 14px -8px rgba(43,27,18,.6); transform: translateY(-110%); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .2s; }
.sim-flota.ver { transform: none; opacity: 1; pointer-events: auto; }
.flota-fila { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .9rem; }
.flota-fila label { font-weight: 700; }
.flota-fila .sube { color: var(--chile-texto); } .flota-fila .baja { color: var(--nopal); }
.flota-total em { font-style: normal; color: var(--chile-texto); font-weight: 700; }
@media (min-width: 900px) { .sim-flota { display: none; } }
@media (max-width: 899px) {
  .intro { padding: 1rem 0 .8rem; }
  .intro h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .intro p { font-size: .95rem; }
}

@media (max-width: 899px) {
  .guia { display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; align-items: center; padding: .55rem .8rem; }
  .guia-paso { grid-column: 1; font-size: .68rem; }
  .guia-tit { grid-column: 1; font-size: 1.05rem; }
  .guia-txt { grid-column: 1; margin: 0; font-size: .85rem; line-height: 1.3; }
  .guia-ok { grid-column: 2; grid-row: 1 / span 3; font-size: .82rem; padding: .25rem .65rem; }
}
.sim-flota { padding-top: .6rem; }
/* Que la guía nunca tape lo último de la página */
body:has(.guia:not([hidden])) .ed { padding-bottom: 9rem; }
body:has(.guia:not([hidden])) .pie { padding-bottom: 8rem; }

/* Objetivos táctiles cómodos (crítica de accesibilidad) */
#orden { min-height: 42px; }
.desp-nom { min-height: 40px; }
.desp-precio input { min-height: 36px; }
.desp-precio select { min-height: 36px; padding: 0 .3rem; }
.escribenos { min-height: 42px; }
.marca { min-height: 44px; }
input[type=range] { height: 42px; }
.lista { padding-bottom: 4.5rem; }
body:has(.sim-flota.ver) .escribenos { display: none; }
.punto.punto circle.toque { fill: transparent; stroke: none; }