/* Generado por diseno/build.js desde diseno/fuente/bundle.css. No editar a mano. */
/* Horno — componentes base (v2). Prefijo h-. Todo lee tokens de tokens.css.
   Marca: el servidor inyecta <style id="marca-negocio"> con --marca, --on-marca, --marca-texto,
   --marca-tint, --marca-borde y --marca-fuente para claro y oscuro (ver derivar-marca.js). */

:root{--marca-fuente:var(--font-ui);color-scheme:light}
[data-theme="oscuro"]{color-scheme:dark}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:22px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--marca-texto)}
.h-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
span.h-mono{white-space:nowrap}
.h-muted{color:var(--muted)}
.h-chico{font-size:14px;line-height:20px}
.h-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* «Saltar al contenido»: lo primero de toda página; se ve solo al recibir el foco con Tab (Navegacion). */
.h-saltar{position:fixed;left:var(--space-3);top:var(--space-3);z-index:90;display:inline-flex;align-items:center;min-height:var(--control);padding:0 var(--space-4);border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);font-weight:600;text-decoration:none}
.h-saltar:not(:focus){width:1px;height:1px;min-height:0;padding:0;border:0;box-shadow:none;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.h-eyebrow{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h-h1{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.h-h2{font-size:18px;line-height:24px;font-weight:600;text-wrap:balance}
.h-link{color:var(--marca-texto);font-weight:600;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.h-fila-flex{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

/* ---------- Íconos: <i class="h-i h-i--buscar"></i> toma el color del texto ---------- */
.h-i{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:-4px}
.h-i--lg{width:22px;height:22px}
.h-i--xl{width:28px;height:28px}
.h-i--inicio{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 9.5V20h12V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E")}
.h-i--reloj{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.h-i--calendario{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E")}
.h-i--chat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E")}
.h-i--caja{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='11' rx='2'/%3E%3Cpath d='M7 9V5h10v4M7 13h2M11 13h2M15 13h2M7 16h10'/%3E%3C/svg%3E")}
.h-i--horno{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M4 8h16'/%3E%3Crect x='7' y='11' width='10' height='7' rx='1'/%3E%3Cpath d='M8 5.5h.01M11 5.5h.01'/%3E%3C/svg%3E")}
.h-i--lista{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E")}
.h-i--inventario{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8l8-4 8 4v8l-8 4-8-4z'/%3E%3Cpath d='M4 8l8 4 8-4M12 12v8'/%3E%3C/svg%3E")}
.h-i--receta{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14a4 4 0 1 1 1.4-7.8A4 4 0 0 1 15.6 6.2 4 4 0 1 1 17 14v6H7z'/%3E%3Cpath d='M7 17h10'/%3E%3C/svg%3E")}
.h-i--compras{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.5 11h11L21 7H6.5'/%3E%3Ccircle cx='9' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E")}
.h-i--clientes{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6 6 0 0 1 3 5.5'/%3E%3C/svg%3E")}
.h-i--catalogo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.h-i--factura{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E")}
.h-i--billete{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6.5 9.5v.01M17.5 14.5v.01'/%3E%3C/svg%3E")}
.h-i--reportes{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16v-4M12 16V8M16 16v-6'/%3E%3C/svg%3E")}
.h-i--ajustes{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E")}
.h-i--marca{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.4 0 2-.9 2-1.8 0-1-.9-1.5-.9-2.4 0-.9.8-1.6 1.8-1.6H17a4 4 0 0 0 4-4C21 6.6 17 3 12 3z'/%3E%3Ccircle cx='7.5' cy='11' r='1'/%3E%3Ccircle cx='10' cy='7.5' r='1'/%3E%3Ccircle cx='14.5' cy='7.5' r='1'/%3E%3C/svg%3E")}
.h-i--usuario{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.h-i--candado{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.h-i--tienda{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1.5-5h13L20 9'/%3E%3Cpath d='M4 9a2.7 2.7 0 0 0 5.3 0 2.7 2.7 0 0 0 5.4 0 2.7 2.7 0 0 0 5.3 0'/%3E%3Cpath d='M5 11v9h14v-9M10 20v-5h4v5'/%3E%3C/svg%3E")}
.h-i--entrega{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E")}
.h-i--ubicacion{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.h-i--telefono{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.h-i--buscar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.h-i--imprimir{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V4h10v5M7 17H5v-7h14v7h-2M7 14h10v6H7z'/%3E%3C/svg%3E")}
.h-i--salir{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E")}
.h-i--alerta{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E")}
.h-i--info{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.5'/%3E%3C/svg%3E")}
.h-i--error{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16v.5'/%3E%3C/svg%3E")}
.h-i--check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}
.h-i--cerrar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.h-i--mas{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.h-i--menos{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.h-i--derecha{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.h-i--izquierda{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.h-i--abajo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E")}
.h-i--arriba{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15l7-7 7 7'/%3E%3C/svg%3E")}
.h-i--regresar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14l-5-5 5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E")}
.h-i--sin-red{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M8.5 16.5a5 5 0 0 1 7 0M5 12.5a10 10 0 0 1 4-2.4M19 12.5a10 10 0 0 0-3.2-2.1M2 8.8a15 15 0 0 1 4.3-2.6M22 8.8A15 15 0 0 0 11 5'/%3E%3Cpath d='M12 20h.01'/%3E%3C/svg%3E")}
.h-i--foto{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E")}
.h-i--subir{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v4h16v-4'/%3E%3C/svg%3E")}
.h-i--copiar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E")}
.h-i--enviar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M10 13l11-10'/%3E%3C/svg%3E")}
.h-i--sonido{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E")}
.h-i--pausa{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E")}
.h-i--puntos{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3Ccircle cx='19' cy='12' r='1.3'/%3E%3C/svg%3E")}
.h-i--ojo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.h-i--merma{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E")}
.h-i--editar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E")}
.h-i--estrella{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E")}
.h-i--enlace{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.h-i--mesa{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='4' rx='1'/%3E%3Cpath d='M6 10v10M18 10v10M6 15h12'/%3E%3C/svg%3E")}
.h-i--porcentaje{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5L5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E")}
.h-ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Botones: primario (uno por zona) > secundario > fantasma; peligro solo si es irreversible ---------- */
.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control);padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;background:none;font-size:15px;line-height:20px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--ink);transition:background-color .15s,border-color .15s,box-shadow .15s,transform .1s}
.h-btn:active{transform:translateY(1px)}
.h-btn[disabled],.h-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.h-btn--primario{background:var(--marca);color:var(--on-marca);border-color:var(--marca-borde)}
.h-btn--primario:hover{box-shadow:inset 0 0 0 100px rgba(255,255,255,.12)}
[data-theme="oscuro"] .h-btn--primario:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,.14)}
.h-btn--secundario{background:var(--surface);border-color:var(--border-control)}
.h-btn--secundario:hover{background:var(--surface-soft)}
.h-btn--fantasma{color:var(--muted)}
.h-btn--fantasma:hover{background:var(--surface-soft);color:var(--ink)}
.h-btn--peligro{background:var(--alerta);color:var(--on-alerta)}
.h-btn--peligro:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,.1)}
.h-btn--tap{min-height:var(--tap);padding:0 var(--space-5);font-size:16px}
.h-btn--grande{min-height:var(--tap-grande);padding:0 var(--space-6);font-size:18px}
.h-btn--bloque{width:100%}
.h-btn--icono{width:var(--control);padding:0}
.h-btn--tap.h-btn--icono{width:var(--tap)}
.h-btn__sub{display:block;font-size:13px;font-weight:500;opacity:.9}
.h-btn--dos-lineas{flex-direction:column;gap:0;line-height:22px;padding-block:var(--space-2)}
.h-spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:h-spin .7s linear infinite;flex:none}
@keyframes h-spin{to{transform:rotate(360deg)}}

/* ---------- Estados: punto + palabra. Etapa y pago son dos ejes distintos ---------- */
.h-est{display:inline-flex;justify-self:start;align-items:center;gap:6px;min-height:24px;padding:0 8px;border-radius:var(--radius-sm);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;background:var(--surface-soft);color:var(--neutro);border:1px solid transparent}
.h-est::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:currentColor;flex:none}
.h-est--espera{background:var(--espera-tint);color:var(--espera)}
.h-est--proceso{background:var(--proceso-tint);color:var(--proceso)}
.h-est--ok{background:var(--ok-tint);color:var(--ok)}
.h-est--alerta{background:var(--alerta-tint);color:var(--alerta)}
.h-est--cerrado{background:transparent;color:var(--cerrado);border-color:var(--border)}
.h-est--marca{background:var(--marca-tint);color:var(--marca-texto)}
.h-est--marca::before{display:none}
.h-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-full);background:var(--surface-soft);color:var(--ink);font-family:var(--font-mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.h-count--alerta{background:var(--alerta);color:var(--on-alerta)}
.h-count--marca{background:var(--marca);color:var(--on-marca)}
/* Montos: el saldo normal es neutro; alerta solo si está vencido (siempre con palabra) */
.h-monto{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.h-monto--saldo{color:var(--ink);font-weight:600}
.h-monto--pagado{color:var(--ok);font-weight:600}
.h-monto--vencido{color:var(--alerta);font-weight:600}
/* Horas: la urgencia se mide contra la hora de entrega */
.h-hora{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.h-hora--hoy{color:var(--proceso)}
.h-hora--atrasada{color:var(--alerta)}
.h-hora--cocina{font-size:20px;line-height:26px}

/* ---------- Superficies ---------- */
.h-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.h-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}
.h-panel--compacto{padding:var(--space-4)}
.h-stack{display:grid;gap:var(--space-3)}
.h-stack--4{gap:var(--space-4)}
.h-stack--6{gap:var(--space-6)}

/* ---------- Campos ---------- */
.h-field{display:grid;gap:6px;align-content:start}
.h-label{font-size:14px;line-height:20px;font-weight:600}
.h-help{font-size:14px;line-height:20px;color:var(--muted)}
.h-input,.h-select,.h-textarea{width:100%;min-height:var(--control);padding:0 12px;border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font-size:15px}
.h-select{-webkit-appearance:none;appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7d85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
.h-textarea{min-height:88px;padding:10px 12px;resize:vertical}
.h-input::placeholder,.h-textarea::placeholder{color:var(--muted)}
.h-input:focus,.h-select:focus,.h-textarea:focus{outline:2px solid var(--foco);outline-offset:0;border-color:var(--foco)}
.h-input--tap,.h-select--tap{min-height:var(--tap);font-size:16px}
.h-input--monto{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}
.h-input--busqueda{padding-left:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7d85' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px 50%;background-size:18px}
.h-field--error .h-input,.h-field--error .h-select,.h-field--error .h-textarea{border-color:var(--alerta)}
.h-field--error .h-help{color:var(--alerta);font-weight:600}
.h-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:600;line-height:22px}
.h-check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--marca)}
.h-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.h-switch input{-webkit-appearance:none;appearance:none;width:44px;height:26px;border-radius:var(--radius-full);background:var(--surface-soft);border:1px solid var(--border-control);position:relative;cursor:pointer;margin:0;flex:none;transition:background-color .15s}
.h-switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s,background-color .15s}
.h-switch input:checked{background:var(--marca);border-color:var(--marca-borde)}
.h-switch input:checked::after{transform:translateX(18px);background:var(--on-marca)}
.h-file{display:grid;justify-items:center;gap:6px;padding:var(--space-6) var(--space-4);border:1.5px dashed var(--border-control);border-radius:var(--radius-lg);background:var(--surface);text-align:center;cursor:pointer}
.h-file:hover{background:var(--surface-soft)}
.h-file input{position:absolute;width:1px;height:1px;opacity:0}

/* ---------- Cantidad ---------- */
.h-qty{display:inline-flex;justify-self:start;align-items:center;border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface)}
.h-qty button{width:40px;height:38px;border:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:var(--radius-md)}
.h-qty button:hover{background:var(--surface-soft)}
.h-qty button[disabled]{opacity:.35;cursor:not-allowed}
.h-qty button:focus-visible{outline-offset:-2px}
.h-qty output{min-width:32px;text-align:center;font-family:var(--font-mono);font-weight:600}
.h-qty--tap button{width:48px;height:46px}

/* ---------- Segmentado (una sola elección, 2 a 5 opciones) ---------- */
.h-seg{display:inline-flex;padding:3px;gap:2px;background:var(--surface-soft);border-radius:var(--radius-md);max-width:100%;overflow-x:auto}
.h-seg button{min-height:34px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.h-seg button:hover{color:var(--ink)}
.h-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--border-control),var(--shadow-sm)}
.h-seg button:focus-visible{outline-offset:-2px}
.h-seg .h-count{background:var(--surface)}
.h-seg .h-count--alerta{background:var(--alerta);color:var(--on-alerta)}
.h-seg--tap button{min-height:42px;font-size:15px;padding:0 var(--space-4)}
.h-seg--bloque{display:flex;width:100%}
.h-seg--bloque button{flex:1}

/* ---------- Resúmenes (stat) ---------- */
.h-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-3)}
.h-kpi{display:grid;gap:2px;align-content:start;text-align:left;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
button.h-kpi{border-color:var(--border-control);cursor:pointer}
button.h-kpi:hover{background:var(--surface-soft)}
.h-kpi__v{font-size:24px;line-height:30px;font-weight:600;font-variant-numeric:normal}
.h-kpi__l{font-size:14px;line-height:20px;color:var(--muted)}
.h-kpi__d{font-size:13px;line-height:18px;color:var(--muted)}
.h-kpi__d--sube{color:var(--ok)}
.h-kpi__d--baja{color:var(--alerta)}
.h-kpi[aria-pressed="true"]{border-color:var(--marca-borde);box-shadow:inset 0 0 0 1px var(--marca-borde);background:var(--marca-tint)}
.h-kpi--alerta .h-kpi__v{color:var(--alerta)}

/* ---------- Medidor: la pista es un tint del mismo tono ---------- */
.h-meter{--m:var(--neutro);--mt:var(--surface-soft);height:8px;border-radius:var(--radius-full);background:var(--mt);overflow:hidden}
.h-meter > i{display:block;height:100%;border-radius:inherit;background:var(--m)}
.h-meter--ok{--m:var(--ok);--mt:var(--ok-tint)}
.h-meter--proceso{--m:var(--proceso);--mt:var(--proceso-tint)}
.h-meter--alerta{--m:var(--alerta);--mt:var(--alerta-tint)}
.h-meter--grueso{height:12px}

/* ---------- Tabla ---------- */
.h-tablewrap{overflow-x:auto;max-width:100%;position:relative}
.h-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.h-table th{text-align:left;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.h-table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
.h-table tbody tr:last-child td{border-bottom:0}
.h-table .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.h-table--clic tbody tr{cursor:pointer}
.h-table--clic tbody tr:hover td{background:var(--surface-soft)}
.h-table tr[aria-selected="true"] td,.h-table--clic tbody tr[aria-selected="true"]:hover td{background:var(--marca-tint)}

/* ---------- Avisos ---------- */
.h-alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:14px;line-height:20px;background:var(--surface-soft);color:var(--ink)}
.h-alert > .h-i{margin-top:1px}
.h-alert b{display:block;font-size:15px;line-height:22px}
.h-alert .h-btn{margin-top:var(--space-2)}
.h-alert--alerta{background:var(--alerta-tint)}
.h-alert--alerta > .h-i,.h-alert--alerta b{color:var(--alerta)}
.h-alert--ok{background:var(--ok-tint)}
.h-alert--ok > .h-i,.h-alert--ok b{color:var(--ok)}
.h-alert--proceso{background:var(--proceso-tint)}
.h-alert--proceso > .h-i,.h-alert--proceso b{color:var(--proceso)}
.h-alert--espera{background:var(--espera-tint)}
.h-alert--espera > .h-i,.h-alert--espera b{color:var(--espera)}
/* Banda: estado que dura (pedidos pausados, WhatsApp caído). Arriba de la página, con su acción */
.h-banda{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:10px var(--space-5);font-size:14px;line-height:20px;background:var(--proceso-tint);color:var(--ink);border-bottom:1px solid var(--border)}
.h-banda > .h-i{color:var(--proceso)}
.h-banda > span{flex:1 1 240px}
.h-banda b{font-weight:600}
.h-banda .h-btn{margin-left:auto}
.h-banda--bloque{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-4)}
.h-banda--alerta{background:var(--alerta-tint)}
.h-banda--alerta > .h-i{color:var(--alerta)}
.h-banda--espera{background:var(--espera-tint)}
.h-banda--espera > .h-i{color:var(--espera)}
/* Toast: confirma y ofrece deshacer (8 s). Nunca Deshacer sobre algo fiscal */
.h-toast{position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%,16px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:var(--space-4);min-height:var(--tap);padding:6px 6px 6px var(--space-4);border-radius:var(--radius-md);background:var(--ink);color:var(--bg);box-shadow:var(--shadow-lg);font-size:15px;font-weight:600;transition:opacity .2s,transform .2s;z-index:70;width:max-content;max-width:min(560px,calc(100% - 32px))}
/* Solo su botón recibe toques: lo que queda debajo del texto se sigue pudiendo tocar */
.h-toast.is-on{opacity:1;transform:translate(-50%,0)}
.h-toast.is-on button{pointer-events:auto}
/* Por encima del fondo de un modal (Cancelar y Deshacer se tocan con una hoja abierta) y, con un modal abierto, arriba al centro: no tapa sus botones */
body:has(.h-overlay.is-on) .h-toast{top:calc(var(--space-4) + env(safe-area-inset-top,0px));bottom:auto;transform:translate(-50%,-16px)}
body:has(.h-overlay.is-on) .h-toast.is-on{transform:translate(-50%,0)}
.h-toast button{min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-sm);background:none;border:1px solid currentColor;color:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
/* Barra de deshacer fija (cocina): dura hasta la siguiente acción */
.h-deshacer{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:var(--space-4);min-height:var(--tap-grande);padding:8px var(--space-5) calc(8px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);font-size:16px;font-weight:600;transform:translateY(100%);transition:transform .2s}
.h-deshacer.is-on{transform:none}
.h-deshacer span{flex:1;min-width:0}
.h-deshacer button{min-height:var(--tap);padding:0 var(--space-5);border-radius:var(--radius-md);border:1px solid currentColor;background:none;color:inherit;font-size:16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.h-empty{padding:var(--space-8) var(--space-6);text-align:center;color:var(--muted);border:1px dashed var(--border-control);border-radius:var(--radius-lg)}
.h-empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.h-skel{background:linear-gradient(90deg,var(--surface-soft),var(--border),var(--surface-soft));background-size:200% 100%;animation:h-skel 1.2s ease-in-out infinite;border-radius:var(--radius-sm)}
@keyframes h-skel{to{background-position:-200% 0}}
.h-overlay{position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;padding:var(--space-4);z-index:60}
.h-overlay.is-on{display:flex}
.h-modal{width:100%;max-width:460px;max-height:calc(100% - 32px);overflow:auto;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-6)}
.h-modal h2,.h-modal h3{font-size:20px;line-height:26px;font-weight:600;margin-bottom:var(--space-2)}
.h-modal--suelto{max-height:none}
.h-modal__acciones{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.h-opciones{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.h-opcion{display:flex;gap:10px;align-items:flex-start;padding:var(--space-3);border:1px solid var(--border-control);border-radius:var(--radius-md);cursor:pointer}
.h-opcion:has(input:checked){border-color:var(--marca-borde);background:var(--marca-tint)}
.h-opcion input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--marca);flex:none}
.h-cita{padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface-soft);font-size:14px;line-height:20px}

/* ---------- Marca del negocio ---------- */
.h-marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.h-marca__logo{width:38px;height:38px;border-radius:var(--radius-md);background:var(--marca);color:var(--on-marca);border:1px solid var(--marca-borde);display:inline-flex;align-items:center;justify-content:center;font-family:var(--marca-fuente);font-size:20px;font-weight:600;flex:none;overflow:hidden}
.h-marca__logo img{width:100%;height:100%;object-fit:cover}
.h-marca__logo--lg{width:64px;height:64px;font-size:30px;border-radius:var(--radius-lg)}
.h-marca__txt{display:grid;min-width:0}
.h-marca__nombre{font-family:var(--marca-fuente);font-size:17px;line-height:22px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-marca__lugar{font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Foto de producto: sin foto, la inicial sobre el tint de marca */
.h-thumb{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:100%;border-radius:var(--radius-md);background:var(--marca-tint);color:var(--marca-texto);font-family:var(--marca-fuente);font-size:22px;font-weight:600;overflow:hidden;flex:none}
.h-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-thumb--43{aspect-ratio:4/3}

/* ---------- Marco de operación (caja, cocina, reparto): sin menú, controles de 48 px ---------- */
.h-op .h-btn{min-height:var(--tap);font-size:16px}
.h-op .h-btn--icono{width:var(--tap)}
.h-op .h-input,.h-op .h-select{min-height:var(--tap);font-size:16px}
.h-op .h-seg button{min-height:42px;font-size:15px}
.h-op .h-qty button{width:48px;height:46px}
.h-op .h-toast button{min-height:var(--control)}
.h-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--surface);border-bottom:1px solid var(--border)}
.h-top__in{min-height:64px;padding:8px var(--space-5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.h-top__titulo{font-size:18px;line-height:24px;font-weight:600}
.h-top__der{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.h-tabs{display:flex;gap:4px;overflow-x:auto;max-width:100%}
.h-tab{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 var(--space-4);border:0;border-radius:var(--radius-md);background:none;color:var(--muted);font-size:16px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.h-tab:hover{background:var(--surface-soft);color:var(--ink)}
.h-tab[aria-selected="true"],.h-tab[aria-current="page"]{background:var(--marca-tint);color:var(--marca-texto)}
.h-conn{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--radius-full);font-size:13px;line-height:18px;font-weight:600;background:var(--ok-tint);color:var(--ok);white-space:nowrap}
.h-conn::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.h-conn--reconectando{background:var(--proceso-tint);color:var(--proceso)}
.h-conn--reconectando::before{animation:h-pulso 1s ease-in-out infinite}
.h-conn--sin-red{background:var(--proceso-tint);color:var(--proceso)}
.h-conn--off{background:var(--alerta-tint);color:var(--alerta)}
@keyframes h-pulso{50%{opacity:.25}}
.h-avatar{width:36px;height:36px;border-radius:50%;background:var(--marca-tint);color:var(--marca-texto);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border:0;flex:none}

/* ---------- Marco de administración: menú lateral; abajo en móvil con «Más» ---------- */
.h-admin{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100%}
.h-side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border);padding:var(--space-4) var(--space-3) 0;display:flex;flex-direction:column;gap:2px}
.h-side > .h-marca{padding:4px 8px 12px}
.h-sucursal{margin:0 0 var(--space-3)}
.h-sucursal .h-select{font-weight:600}
.h-side__grupo{padding:var(--space-4) 10px 4px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h-nav{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border:0;border-radius:var(--radius-md);background:none;color:var(--muted);text-decoration:none;font-size:15px;font-weight:600;cursor:pointer;text-align:left;width:100%}
.h-nav:hover{background:var(--surface-soft);color:var(--ink)}
.h-nav[aria-current="page"]{background:var(--marca-tint);color:var(--marca-texto)}
.h-nav .h-count{margin-left:auto}
/* Pie fijo del menú: la persona (abre «Mi cuenta») y Salir; el resto del menú se desplaza encima */
.h-side__pie{position:sticky;bottom:0;margin:auto calc(-1*var(--space-3)) 0;padding:var(--space-2) var(--space-3) var(--space-3);background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;gap:var(--space-1)}
.h-side__yo{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:4px 8px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.h-side__yo:hover{background:var(--surface-soft)}
.h-side__quien{display:grid;min-width:0}
.h-side__nombre{font-size:14px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-side__cuenta{font-size:12px;line-height:16px;color:var(--muted)}
/* Si el menú no cabe, se desplaza encima del pie; mientras quede algo abajo, un degradado lo dice */
.h-side__pie::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;background:linear-gradient(to bottom,transparent,var(--surface));pointer-events:none;opacity:0;transition:opacity .15s}
.h-side--sigue .h-side__pie::before{opacity:1}
.h-solo-movil{display:none}
.h-nav__corto{display:none}
.h-page{padding:var(--space-6) var(--space-8) var(--space-12);max-width:var(--content-max);width:100%;min-width:0}
.h-pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.h-pagehead h1{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.h-pagehead p{margin-top:4px;color:var(--muted)}
.h-pagehead__acc{display:flex;flex-wrap:wrap;gap:var(--space-2)}
@media (max-width:760px){
  .h-admin{grid-template-columns:minmax(0,1fr)}
  .h-side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:30;flex-direction:row;justify-content:space-around;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));border-right:0;border-top:1px solid var(--border);overflow:visible}
  .h-side > .h-marca,.h-sucursal,.h-side__grupo,.h-side__pie,.h-solo-escritorio{display:none}
  .h-solo-movil{display:flex}
  .h-nav__largo{display:none}
  .h-nav__corto{display:inline}
  .h-nav{flex-direction:column;justify-content:center;min-height:56px;padding:4px 2px;gap:2px;font-size:13px;line-height:16px;flex:1;position:relative;text-align:center;white-space:nowrap;min-width:0}
  .h-nav .h-i{width:24px;height:24px}
  .h-nav[aria-current="page"]{background:none}
  .h-nav[aria-current="page"]::before{content:"";position:absolute;top:-5px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--marca-texto)}
  .h-nav .h-count{position:absolute;top:2px;left:calc(50% + 6px);margin:0;min-width:20px;height:20px;padding:0 5px;font-size:13px;line-height:20px;box-shadow:0 0 0 2px var(--surface)}
  .h-nav__corto,.h-nav > span{font-size:inherit}
  /* La barra de cada puesto (pantallas.js, BARRA_TELEFONO): el servidor pone su lugar en data-barra. */
  .h-nav[data-barra="1"]{order:1}
  .h-nav[data-barra="2"]{order:2}
  .h-nav[data-barra="3"]{order:3}
  .h-nav[data-barra="4"]{order:4}
  .h-nav[data-barra="5"]{order:5}
  .h-page{padding:var(--space-5) var(--space-4) calc(88px + env(safe-area-inset-bottom,0px))}
  .h-admin ~ .h-toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .h-top__in{padding:8px var(--space-4)}
  .h-pagehead h1{font-size:24px;line-height:30px}
}


/* ---------- Modo celular: el panel en el teléfono (docs/diseno/celular.md) ----------
   Vale hasta 760 px y solo con body.h-celular (las pantallas del panel). La computadora y la
   tableta no cambian, ni la página del cliente, ni la caja, la cocina o el reparto (.h-op).
   html.h-escribiendo: hay un campo con el foco (base.js); --teclado: lo que tapa el teclado
   en iOS (visualViewport). En Android, interactive-widget=resizes-content achica la vista. */
@media (max-width:760px){
  /* Texto de 16 px; nada por debajo de 13 */
  .h-celular{font-size:var(--texto-celular);line-height:24px}
  .h-celular .h-eyebrow,.h-celular .h-table th,.h-celular .h-marca__lugar,.h-celular .h-msg small,.h-celular .h-dia,.h-celular .h-chart text{font-size:var(--texto-minimo);line-height:18px}
  .h-celular .h-est{min-height:28px;font-size:var(--texto-minimo);line-height:18px}
  .h-celular .h-count{min-width:24px;height:24px;font-size:var(--texto-minimo)}
  .h-celular .h-nav .h-count{min-width:20px;height:20px;font-size:var(--texto-minimo)}
  .h-celular .h-nav{font-size:var(--texto-minimo)}
  /* Lo que se toca: 48 px (también los enlaces y los chips, P-50) y campos de 16 px */
  .h-celular .h-btn{min-height:var(--tap);font-size:16px}
  .h-celular .h-btn--icono{width:var(--tap)}
  .h-celular .h-input,.h-celular .h-select{min-height:var(--tap)}
  .h-celular .h-input,.h-celular .h-select,.h-celular .h-textarea{font-size:var(--texto-celular)}
  /* Base sin pisar a la pantalla: con :where, el CSS de la pantalla (que carga después) manda. */
  :where(.h-celular) .h-seg button{min-height:48px;font-size:15px}
  .h-celular .h-btn--grande{min-height:var(--tap-grande);font-size:18px}
  /* Un rótulo de tabla de 13 px puede partirse: no estira la tabla */
  .h-celular .h-table th{white-space:normal}
  .h-celular .h-qty button{width:48px;height:48px}
  /* El botón apagado se lee (4.5:1 o más): fondo suave y texto muted, sin transparencia */
  .h-celular .h-btn[disabled],.h-celular .h-btn[aria-disabled="true"]{opacity:1;background:var(--surface-soft);border-color:var(--border);color:var(--muted);box-shadow:none}
  /* El motivo del botón apagado, encima de él en el pie (de la hoja o de la página) */
  .h-celular .h-modal__acciones > .h-falta,.h-celular .h-pie-fijo > .h-falta{flex:1 1 100%;order:-1;text-align:center}
  .h-celular .h-pie-fijo:has(> .h-falta){flex-wrap:wrap}
  .h-celular .h-modal__acciones:has(> .h-falta){flex-wrap:wrap}
  .h-celular .h-toast button{min-height:48px}
  .h-celular .h-check{min-height:var(--tap);align-items:center}
  .h-celular .h-check input{width:24px;height:24px}
  .h-celular .h-opcion{min-height:var(--tap);align-items:center}
  .h-celular .h-switch{min-height:var(--tap)}
  .h-celular .h-link{display:inline-flex;align-items:center;min-height:48px;vertical-align:middle}
  .h-celular .h-lista > a,.h-celular .h-lista > button{min-height:56px}
  .h-celular .h-kpi{min-height:var(--tap)}
  /* La conexión se ve solo cuando no hay red */
  .h-celular .h-conn:not(.h-conn--sin-red):not(.h-conn--off):not(.h-conn--reconectando){display:none}
  /* Sin las ayudas largas: la frase bajo el título y lo marcado .h-help--larga. Se quedan el
     motivo de un botón inactivo, los avisos de dinero y los vacíos. */
  .h-celular .h-pagehead h1 + p:not([id]),.h-celular .h-help--larga{display:none}
  .h-celular .h-field--error .h-help--larga,.h-celular .h-help--larga[role="alert"]:not(:empty){display:block}
  .h-celular .h-pagehead{margin-bottom:var(--space-4)}
  .h-celular .h-pagehead h1{font-size:24px;line-height:30px}
  /* Al escribir, la barra se va (y el pie de una hoja deja la zona segura: el teclado la tapa) */
  .h-escribiendo .h-celular .h-side,.h-tarea .h-celular .h-side{display:none}
  .h-tarea .h-celular .h-page{padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom,0px))}

  /* Una sola hoja que sube desde abajo, para toda ventana y para «Más» (App.modal) */
  .h-celular .h-overlay{bottom:var(--teclado,0px)}
  .h-celular .h-overlay:not(.h-overlay--hoja){align-items:flex-end;padding:0}
  .h-celular .h-modal:not(.h-modal--hoja){max-width:none;max-height:calc(100dvh - var(--teclado,0px) - 24px);padding:0 var(--space-4);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overscroll-behavior:contain}
  .h-celular .h-modal:not(.h-modal--hoja):not(:has(> .h-modal__acciones)){padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom,0px))}
  .h-celular .h-modal__cab{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--space-2);margin:0 calc(-1*var(--space-4)) var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .h-celular .h-modal__cab h2{flex:1;min-width:0;margin:0}
  .h-celular .h-modal__cab h2:focus{outline:none}
  .h-celular .h-modal__cerrar{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--tap);min-height:var(--tap);padding:0 10px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font-size:16px;font-weight:600;cursor:pointer}
  .h-celular .h-modal__cerrar:hover{background:var(--surface-soft)}
  .h-celular .h-modal__cerrar .h-i{width:24px;height:24px}
  .h-celular .h-modal__cab > .h-modal__cerrar:first-child{margin-left:calc(-1*var(--space-2))}
  .h-celular .h-modal__acciones{position:sticky;bottom:0;z-index:2;flex-wrap:nowrap;margin:var(--space-5) calc(-1*var(--space-4)) 0;padding:12px var(--space-4) calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border)}
  .h-celular .h-modal__acciones > .h-btn{flex:1 1 0;min-width:0;white-space:normal}
  .h-celular .h-modal__acciones > .h-btn--primario{flex-grow:2}
  /* Con tres botones o más, el principal baja a su propia fila, abajo y a todo el ancho */
  .h-celular .h-modal__acciones:has(> :nth-child(3)){flex-wrap:wrap}
  .h-celular .h-modal__acciones:has(> :nth-child(3)) > .h-btn--primario{order:9;flex-basis:100%}
  /* La tarea a pantalla completa (App.modal({ hoja: true })): Volver arriba, su botón fijo abajo */
  /* Conserva el relleno de 24 px de la hoja (lo cuentan las pantallas); su cabecera queda fija
     arriba solo si tiene Volver (una hoja `fijo` no lo lleva) */
  .h-celular .h-modal--hoja.h-modal{overscroll-behavior:contain}
  .h-celular .h-modal--hoja .h-modal__cab{top:calc(-1*var(--space-6));margin:calc(-1*var(--space-6)) calc(-1*var(--space-6)) var(--space-2);padding:var(--space-2) var(--space-6) var(--space-2) var(--space-3);border-radius:0}
  .h-celular .h-modal--hoja .h-modal__cab:not(:has(.h-modal__cerrar)){position:static;padding:var(--space-4) var(--space-6) 0}
  .h-celular .h-modal--hoja .h-modal__acciones{padding:12px var(--space-6) calc(12px + env(safe-area-inset-bottom,0px))}
  .h-escribiendo .h-celular .h-modal__acciones,.h-escribiendo .h-celular .h-modal--hoja .h-modal__acciones{padding-bottom:12px}
  /* Con «Volver» arriba, el botón que solo cierra no se repite abajo (App.modal lo marca) */
  .h-celular .h-modal--hoja .h-modal__cancelar{display:none}
  .h-celular .h-modal--hoja .h-modal__acciones:not(:has(> :not(.h-modal__cancelar))){display:none}
  .h-celular .h-toast{max-width:calc(100% - 2 * var(--space-4))}

  /* Un pie fijo de página (Guardar de un formulario largo). Sin barra abajo (plataforma,
     operación, una tarea a pantalla completa) va al borde con la zona segura; con la barra,
     encima de ella; al escribir, encima del teclado, y la página crece lo que el teclado tapa
     (base.js sube el campo enfocado sobre el pie). */
  .h-celular .h-pie-fijo{position:sticky;bottom:0;z-index:20;display:flex;gap:var(--space-2);margin:var(--space-5) calc(-1*var(--space-4)) 0;padding:12px var(--space-4) calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border)}
  :where(html:not(.h-tarea):not(.h-escribiendo)) .h-celular:where(:has(> .h-admin > .h-side)) .h-pie-fijo{bottom:calc(var(--barra-celular) + env(safe-area-inset-bottom,0px));padding-bottom:12px}
  .h-celular .h-pie-fijo > .h-btn{flex:1 1 0;min-width:0}
  .h-celular .h-pie-fijo > .h-btn--primario{flex-grow:2}
  .h-escribiendo .h-celular .h-pie-fijo{bottom:var(--teclado,0px);padding-bottom:12px}
  .h-escribiendo .h-celular:has(.h-pie-fijo){padding-bottom:var(--teclado,0px)}

  /* Un segmentado que en el teléfono son chips que bajan de fila (.h-seg--chips) */
  .h-celular .h-seg--chips{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0;background:none;overflow:visible;border-radius:0}
  .h-celular .h-seg--chips > button{min-height:var(--tap);padding:0 var(--space-4);border:1px solid var(--border-control);border-radius:var(--radius-full);background:var(--surface);color:var(--ink);font-size:15px;box-shadow:none}
  .h-celular .h-seg--chips > button[aria-pressed="true"]{background:var(--marca-tint);border-color:var(--marca-borde);box-shadow:inset 0 0 0 1px var(--marca-borde);color:var(--marca-texto)}
  .h-celular .h-seg--chips > button[aria-pressed="true"]::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
  /* El aviso pasajero va encima del pie fijo de la página (y del teclado al escribir) */
  .h-celular:has(.h-pie-fijo):not(:has(.h-overlay.is-on)) .h-toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  :where(html:not(.h-tarea):not(.h-escribiendo)) .h-celular:where(:has(> .h-admin > .h-side)):has(.h-pie-fijo):not(:has(.h-overlay.is-on)) .h-toast{bottom:calc(var(--barra-celular) + 88px + env(safe-area-inset-bottom,0px))}
  .h-escribiendo .h-celular:has(.h-pie-fijo):not(:has(.h-overlay.is-on)) .h-toast{bottom:calc(var(--teclado,0px) + 88px)}
  /* La tarea a pantalla completa como vista de la página (no una ventana), con
     App.tareaCompleta(true): su cabecera con «‹ Volver» fija arriba, el contenido, su pie
     fijo (.h-pie-fijo) y el aviso arriba mientras dura */
  .h-celular .h-tarea-vista__cab{position:sticky;top:0;z-index:21;display:flex;align-items:center;gap:var(--space-2);margin:calc(-1*var(--space-5)) calc(-1*var(--space-4)) var(--space-3);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2);background:var(--surface);border-bottom:1px solid var(--border)}
  .h-celular .h-tarea-vista__cab h1,.h-celular .h-tarea-vista__cab h2{flex:1;min-width:0;margin:0;font-size:20px;line-height:26px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .h-tarea .h-celular .h-toast{top:calc(var(--space-4) + env(safe-area-inset-top,0px));bottom:auto}
  /* La lista en vez de la tabla: .h-table--tarjetas, cada fila una tarjeta y cada celda con su
     rótulo (data-etiqueta). La primera celda es el título. */
  .h-celular .h-tablewrap:has(> .h-table--tarjetas){overflow:visible}
  .h-celular .h-table--tarjetas,.h-celular .h-table--tarjetas tbody{display:block}
  .h-celular .h-table--tarjetas thead{display:none}
  .h-celular .h-table--tarjetas tr{display:grid;gap:2px var(--space-3);min-height:56px;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
  .h-celular .h-table--tarjetas tbody tr:last-child{border-bottom:0}
  .h-celular .h-table--tarjetas td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:0;border:0;font-size:15px;line-height:22px;text-align:left}
  .h-celular .h-table--tarjetas td:first-child{font-size:17px;line-height:24px;font-weight:600}
  .h-celular .h-table--tarjetas td[data-etiqueta]::before{content:attr(data-etiqueta);color:var(--muted);font-weight:400;font-family:var(--font-ui);flex:none}
  .h-celular .h-table--tarjetas td:empty{display:none}
  .h-celular .h-table--tarjetas .num{text-align:right}

  /* Las secciones plegadas de un formulario largo: un campo por fila */
  .h-celular .h-campos{grid-template-columns:minmax(0,1fr)}
  .h-celular .h-seccion__b{min-height:56px;padding:0 var(--space-4);cursor:pointer}
  .h-celular .h-seccion__b::after{content:"";width:18px;height:18px;flex:none;margin-left:auto;background:currentColor;-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat;transition:transform .15s}
  .h-celular .h-seccion__b[aria-expanded="true"]::after{transform:rotate(180deg)}
  .h-celular .h-seccion__b[aria-expanded="false"] + .h-seccion__c,.h-celular .h-seccion:has(> .h-seccion__t > .h-seccion__b[aria-expanded="false"]) > .h-seccion__c,.h-celular .h-seccion[data-plegada] > .h-seccion__c{display:none}
  .h-celular .h-seccion__b[aria-expanded="false"] .h-seccion__resumen{display:block}
  .h-celular .h-seccion__b:has(.h-seccion__resumen)::after{margin-left:var(--space-2)}
}

/* ---------- Piezas del modo celular (Patrones): solo cambian algo donde se usan ---------- */
/* Chips que bajan de fila: filtros a la vista, ninguno escondido a la derecha. Lo elegido no
   depende solo del color: borde por dentro y el ícono de check. */
.h-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.h-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 var(--space-4);border:1px solid var(--border-control);border-radius:var(--radius-full);background:var(--surface);color:var(--ink);font-size:15px;line-height:20px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.h-chip:hover{background:var(--surface-soft)}
.h-chip .h-i--check{display:none}
.h-chip[aria-pressed="true"],.h-chip[aria-current="page"]{background:var(--marca-tint);border-color:var(--marca-borde);box-shadow:inset 0 0 0 1px var(--marca-borde);color:var(--marca-texto)}
.h-chip[aria-pressed="true"] .h-i--check,.h-chip[aria-current="page"] .h-i--check{display:inline-block}
.h-chip .h-count:not(.h-count--alerta):not(.h-count--marca){background:var(--surface-soft)}
/* Un chip que es una casilla: <label class="h-chip"><input type="checkbox"><i class="h-i h-i--check"></i>Sin gluten</label>; la casilla cubre el chip */
.h-chip:has(> input){position:relative}
.h-chip > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.h-chip:has(> input:checked){background:var(--marca-tint);border-color:var(--marca-borde);box-shadow:inset 0 0 0 1px var(--marca-borde);color:var(--marca-texto)}
.h-chip:has(> input:checked) .h-i--check{display:inline-block}
.h-chip:has(> input:focus-visible){outline:2px solid var(--foco);outline-offset:2px}
/* La tarjeta con el paso que sigue (App.pasoQueSigue): el pedido y un solo botón. Sin paso,
   la tarjeta entera abre el pedido y lleva la flecha. */
.h-pedido__paso{width:100%;margin-top:var(--space-2)}
.h-pedido__paso.h-btn--grande{font-size:17px}
.h-pedido__ir{display:flex;align-items:center;gap:var(--space-2);color:var(--muted)}
.h-pedido__ir > .h-i--derecha{margin-left:auto}
/* Formularios largos: campos en rejilla (uno por fila en el teléfono) y secciones que se
   pliegan solo en el teléfono (App.plegables). En la computadora la sección se ve entera y su
   botón es solo el título. */
.h-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3) var(--space-4)}
.h-seccion__t{margin:0}
.h-seccion__b{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:default}
/* La sección como fieldset (un grupo de campos con nombre): <fieldset class="h-seccion"><legend class="h-seccion__t"> */
fieldset.h-seccion{min-width:0;margin:0;padding:0;border:0}
legend.h-seccion__t{width:100%;padding:0}
/* Plegada, su resumen a la derecha del título («3 de 5 listos», «Encendido»); solo en el teléfono */
.h-seccion__resumen{display:none;flex:0 1 auto;max-width:45%;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:15px;line-height:20px;font-weight:400}
/* La barra de avance de un asistente (alta): «Paso 2 de 5 · Marca» y un tramo por paso */
.h-avance{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-3)}
.h-avance__t{min-width:0;font-size:16px;line-height:22px;font-weight:600}
.h-avance__t span{color:var(--muted);font-weight:400}
.h-avance__barra{grid-column:1/-1;display:flex;gap:4px;margin:0;padding:0;list-style:none}
.h-avance__barra li{flex:1;height:10px;border-radius:var(--radius-full);background:var(--border-control)}
.h-avance__barra li.is-hecho{background:var(--marca)}
.h-avance__barra li[aria-current="step"]{background:var(--marca-tint);box-shadow:inset 0 0 0 2px var(--marca-borde)}
.h-avance__barra li.is-espera{background:var(--proceso)}
.h-avance__barra li.is-saltado{background:repeating-linear-gradient(-45deg,var(--muted) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--muted)}
.h-avance__aparte{grid-column:1/-1;font-size:14px;line-height:20px;color:var(--muted)}
/* La fila de interruptor: el nombre y su detalle a la izquierda, el interruptor a la derecha; toda la fila se toca */
.h-interruptores{display:grid}
.h-interruptor{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-2) 0;border-bottom:1px solid var(--border);cursor:pointer}
.h-interruptor:last-child{border-bottom:0}
.h-interruptor > span:first-child{display:grid;min-width:0}
.h-interruptor b{font-weight:600}
.h-interruptor small{font-size:14px;line-height:20px;color:var(--muted)}
/* La casilla como fila con borde (una línea que se marca): toda la fila se toca, 56 px */
.h-check--fila{align-items:center;min-height:56px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface)}
.h-check--fila:has(input:checked){border-color:var(--marca-borde);box-shadow:inset 0 0 0 1px var(--marca-borde);background:var(--marca-tint)}
.h-check--fila input{width:24px;height:24px}
/* La fila de lista con foto, línea chica y valor a la derecha: <a> en .h-lista con .h-lista__foto y .h-lista__valor */
.h-lista__foto{width:48px;flex:none}
.h-lista__valor{flex:none;margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
/* El motivo de un botón apagado, a la vista: «Marca Revisé el pago», «Elige cómo paga» */
.h-falta{margin:0;font-size:14px;line-height:20px;color:var(--muted)}
/* «Con cuidado»: lo que no se deshace (dar de baja, borrar), al final y aparte */
.h-cuidado{display:grid;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border)}
.h-cuidado__t{font-size:var(--texto-minimo);line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--alerta)}
:root{--check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E")}
/* El botón «‹ Volver» de la cabecera de una tarea a pantalla completa */
.h-tarea-vista__volver{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 10px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font-size:16px;font-weight:600;cursor:pointer;text-decoration:none}
:root{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
/* «Más» del teléfono: arriba la sucursal y la pausa, después las secciones en cuadros por
   grupo, y al final la persona, «Mi cuenta» y «Salir» (que pregunta antes). */
.h-overlay.h-mas-fondo{align-items:flex-end;padding:0}
.h-mas__arriba{display:grid;gap:var(--space-3);margin-bottom:var(--space-2)}
.h-mas__grupo{margin:var(--space-4) 2px var(--space-2)}
.h-mas__cuadros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.h-mas__cuadros > a{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font-weight:600;line-height:20px;text-decoration:none;overflow-wrap:anywhere}
.h-mas__cuadros > a:hover{background:var(--surface-soft)}
.h-mas__cuadros > a[aria-current="page"]{background:var(--marca-tint);border-color:var(--marca-borde);box-shadow:inset 0 0 0 1px var(--marca-borde);color:var(--marca-texto)}
.h-mas__cuadros .h-i{width:24px;height:24px}
.h-mas__yo{display:grid;gap:var(--space-2);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border)}
.h-mas__quien{display:flex;align-items:center;gap:10px;padding:0 var(--space-1);font-weight:600}
.h-mas__salir{display:grid;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface-soft)}
.h-mas__salir > div{display:flex;gap:var(--space-2)}
.h-mas__salir .h-btn{flex:1}

/* ---------- Modo celular angosto: Android con la letra grande (16-10) ----------
   Con la letra del sistema en «mediana-grande» o más, Chrome agranda la página y un teléfono de
   360 px queda en 300 o 277 px por dentro: todo sale apiñado. Hasta 340 px, las piezas comunes
   le dejan más lugar al contenido: menos relleno, el título en una línea, la barra de avance más
   fina y el pie más bajo. Lo que se toca sigue en 44 px o más. A 360 px y en la computadora no
   cambia nada. */
@media (max-width:340px){
  /* Si la página se sale de lado, Chrome agranda la vista y lo fijo crece con ella: las hojas y la
     barra se quedan en la pantalla (100vw × 100dvh); sin dvh, la regla no aplica y queda como antes */
  .h-celular .h-overlay{right:max(0px,100% - 100vw);bottom:calc(var(--teclado,0px) + max(0px,100% - 100dvh))}
  .h-celular .h-side{right:max(0px,100% - 100vw);bottom:max(0px,100% - 100dvh);gap:0;padding-left:0;padding-right:0}
  /* La barra de abajo: cada casilla mide lo que su palabra (44 px o más) y el aire se reparte
     igual, así «Confirmar» o «Mostrador» no se montan sobre la de al lado */
  .h-celular .h-side > .h-nav{flex:1 1 auto;width:auto;min-width:44px;padding:var(--space-1) 0;font-weight:500;letter-spacing:-.02em}
  /* La hoja (tarea a pantalla completa): relleno de 16 px en vez de 24. Las pantallas lo cuentan
     con --space-6, así que se cambia la variable y todo lo que va al borde la sigue */
  .h-celular .h-modal--hoja{--space-6:16px}
  /* La cabecera: más baja, el título a 18 px y en una línea en la hoja; Cerrar y Volver a 44 px */
  .h-celular .h-modal__cab,.h-celular .h-modal--hoja .h-modal__cab{padding-top:var(--space-1);padding-bottom:var(--space-1)}
  .h-celular .h-modal--hoja .h-modal__cab:not(:has(.h-modal__cerrar)){padding-top:var(--space-3)}
  .h-celular .h-modal__cab h2{font-size:18px;line-height:24px;text-wrap:balance}
  .h-celular .h-modal--hoja .h-modal__cab h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .h-celular .h-modal__cerrar{min-width:48px;min-height:48px;padding:0 6px;gap:var(--space-1)}
  .h-celular .h-modal__cab > .h-modal__cerrar:first-child{margin-left:calc(-1 * var(--space-1))}
  /* El pie de la hoja y el de la página: más bajo, botones de 44 px, lado a lado si caben y si
     no, uno por fila (el principal abajo) */
  .h-celular .h-modal__acciones{flex-wrap:wrap;margin-top:var(--space-4)}
  .h-celular .h-modal__acciones,.h-celular .h-modal--hoja .h-modal__acciones,.h-celular .h-pie-fijo{padding-top:var(--space-2);padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0px))}
  .h-escribiendo .h-celular .h-modal__acciones,.h-escribiendo .h-celular .h-modal--hoja .h-modal__acciones,.h-escribiendo .h-celular .h-pie-fijo,:where(html:not(.h-tarea):not(.h-escribiendo)) .h-celular:where(:has(> .h-admin > .h-side)) .h-pie-fijo{padding-bottom:var(--space-2)}
  .h-celular .h-pie-fijo{flex-wrap:wrap}
  .h-celular .h-modal__acciones > .h-btn,.h-celular .h-pie-fijo > .h-btn{flex:1 1 auto;white-space:normal}
  .h-celular .h-modal__acciones > .h-btn--primario,.h-celular .h-pie-fijo > .h-btn--primario{flex-grow:2}
  .h-celular .h-modal__acciones > .h-btn:not(.h-btn--grande),.h-celular .h-pie-fijo > .h-btn:not(.h-btn--grande){min-height:48px;padding:0 var(--space-3)}
  /* El paso de un asistente: «Paso 2 de 3 · Qué pidió» en una línea y la barra fina */
  .h-celular .h-avance{gap:6px var(--space-2)}
  .h-celular .h-avance__t{font-size:15px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .h-celular .h-avance__barra{gap:3px}
  .h-celular .h-avance__barra li{height:6px}
  /* Los chips: menos aire entre ellos y por dentro */
  .h-celular .h-chips,.h-celular .h-seg--chips{gap:6px}
  .h-celular .h-chip,.h-celular .h-seg--chips > button{min-height:48px;padding:0 var(--space-3)}
  /* El título de la página, uno para todas */
  .h-celular .h-pagehead h1{font-size:22px;line-height:28px}
  /* Más: el ícono arriba y el nombre abajo, así «Producción» o «Inventario» caben enteros */
  .h-celular .h-mas__grupo{margin:var(--space-3) 2px 6px}
  .h-celular .h-mas__cuadros > a{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:6px 10px}
}

/* ---------- Página del cliente ---------- */
.h-cliente{max-width:440px;margin:0 auto;background:var(--bg);min-height:100%}
.h-cliente__hd{padding:var(--space-4);background:var(--surface);border-bottom:1px solid var(--border)}
.h-cliente__titulo{font-family:var(--marca-fuente);font-size:30px;line-height:36px;font-weight:500;color:var(--marca-texto);text-wrap:balance}
.h-pasos{display:flex;align-items:center;gap:var(--space-2);font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.h-pasos ol{display:flex;gap:6px;flex:1}
.h-pasos li{flex:1;height:4px;border-radius:var(--radius-full);background:var(--border)}
.h-pasos li.is-hecho,.h-pasos li[aria-current="step"]{background:var(--marca)}
.h-pie{position:sticky;bottom:0;padding:var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);display:grid;gap:var(--space-2)}

/* ---------- Patrones ---------- */
/* Tarjeta de pedido (cocina, reparto, por retirar) */
.h-pedido{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-3) var(--space-4) var(--space-4);display:grid;gap:4px;transition:opacity .2s,box-shadow .3s}
.h-pedido__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.h-pedido__que{font-size:20px;line-height:26px;font-weight:600;margin-top:2px}
.h-pedido__det{padding:6px 8px;border-radius:var(--radius-sm);background:var(--proceso-tint);color:var(--ink);font-size:15px;line-height:22px}
.h-pedido__quien{font-size:14px;line-height:20px;color:var(--muted)}
.h-pedido .h-btn{margin-top:var(--space-2)}
.h-pedido--nuevo{box-shadow:0 0 0 2px var(--espera),var(--shadow-sm)}
.h-pedido--actualizado{animation:h-flash 1.6s ease-out 1}
.h-pedido.is-saliendo{opacity:0}
@keyframes h-flash{0%{box-shadow:0 0 0 3px var(--foco)}100%{box-shadow:0 0 0 0 transparent}}
/* Fila de agenda */
.h-fila{display:grid;grid-template-columns:104px minmax(0,1fr) 200px 150px auto;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
.h-fila:last-child{border-bottom:0}
.h-fila__quien b{display:block}
.h-fila__etapa,.h-fila__pago{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:14px;line-height:20px}
.h-fila__quien span{font-size:14px;line-height:20px;color:var(--muted)}
.h-fila__acc{justify-self:end}
@media (max-width:900px){
  .h-fila{grid-template-columns:96px minmax(0,1fr);row-gap:6px}
  .h-fila .h-hora{font-size:14px}
  .h-fila__etapa,.h-fila__pago{grid-column:2}
  .h-fila__acc{grid-column:1/-1;justify-self:stretch}
  .h-fila__acc .h-btn{width:100%}
}
/* Producto en caja */
.h-prod{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px var(--space-3);align-items:center;min-height:var(--tap-grande);padding:10px;text-align:left;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer}
.h-prod:hover{border-color:var(--border-control)}
.h-prod .h-thumb{grid-row:span 3;width:56px;font-size:20px}
.h-prod__n{font-size:15px;line-height:20px;font-weight:600}
.h-prod__p{font-family:var(--font-mono);font-size:15px;line-height:20px;font-weight:600}
.h-prod__e{font-size:13px;line-height:18px;color:var(--muted)}
.h-prod__e--poco{color:var(--proceso);font-weight:600}
.h-prod[disabled]{cursor:not-allowed;background:var(--surface-soft);box-shadow:none}
.h-prod[disabled] .h-thumb{opacity:.5}
.h-prod[disabled] .h-prod__n,.h-prod[disabled] .h-prod__p{color:var(--muted)}
.h-prod > .h-count{position:absolute;top:6px;right:6px}
/* Salón: la cuadrícula (una lista por sección) y la mesa. La mesa entera se toca (64 px o más): nombre con su
   número en mono, estado con punto y palabra (y un segundo estado, «Listo en cocina»), quién atiende y desde
   hace cuánto, y el total. Una columna por dentro, para que a 400 px quepan dos mesas por fila.
   El borde es el de .h-prod (border; border-control al pasar el ratón). Libre va punteada en border-control y sin sombra;
   la palabra «Libre» sigue ahí. Ver Salon */
.h-mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-2)}
.h-mesas > li{display:grid;min-width:0}
.h-mesa{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;align-content:start;gap:4px;min-height:var(--tap-grande);padding:10px 12px;text-align:left;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--ink);font:inherit;cursor:pointer}
.h-mesa:hover{border-color:var(--border-control)}
.h-mesa__n{font-size:18px;line-height:24px;font-weight:600;white-space:nowrap}
.h-mesa__est{display:flex;flex-wrap:wrap;gap:4px}
.h-mesa__quien{font-size:14px;line-height:20px;color:var(--muted);overflow-wrap:anywhere}
.h-mesa__monto{font-family:var(--font-mono);font-size:15px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.h-mesa--libre{border-style:dashed;border-color:var(--border-control);background:transparent;box-shadow:none}
.h-mesa[aria-pressed="true"]{border-color:var(--marca-borde);background:var(--marca-tint);box-shadow:inset 0 0 0 1px var(--marca-borde)}
.h-mesa[disabled]{cursor:not-allowed;background:var(--surface-soft);box-shadow:none}
/* Día en el calendario del cliente */
.h-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.h-dia{display:grid;justify-items:center;gap:0;min-height:var(--tap-grande);padding:6px 0;border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;font-size:12px;line-height:16px;color:var(--muted)}
.h-dia b{font-family:var(--font-mono);font-size:18px;line-height:24px;color:var(--ink)}
.h-dia[aria-pressed="true"]{background:var(--marca);border-color:var(--marca-borde);color:var(--on-marca)}
.h-dia[aria-pressed="true"] b{color:var(--on-marca)}
.h-dia[disabled]{cursor:not-allowed;background:transparent;border-style:dashed;border-color:var(--border)}
.h-dia[disabled] b{color:var(--muted);text-decoration:line-through}
/* Columna de tablero */
.h-col{background:var(--surface-soft);border-radius:var(--radius-lg);padding:var(--space-3);display:grid;gap:var(--space-2);align-content:start;min-width:0}
.h-col__h{display:flex;align-items:center;gap:8px;padding:2px 4px 6px;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.h-col__h .h-count{margin-left:auto;background:var(--surface)}
/* Líneas de dinero */
.h-lineas{display:grid;gap:6px}
.h-lineas > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.h-lineas > div > :last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.h-lineas__total{padding-top:8px;border-top:1px solid var(--border);font-weight:600}
/* Lista navegable con flecha */
.h-lista{display:grid;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.h-lista > a,.h-lista > button{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:10px var(--space-4);border:0;border-bottom:1px solid var(--border);background:none;text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;width:100%}
.h-lista > :last-child{border-bottom:0}
.h-lista > a:hover,.h-lista > button:hover{background:var(--surface-soft)}
.h-lista > a:focus-visible,.h-lista > button:focus-visible{outline-offset:-2px}
.h-lista > a[aria-current="page"]{background:var(--marca-tint)}
.h-lista__txt{flex:1;min-width:0;display:grid}
.h-lista__txt small{font-size:14px;line-height:20px;color:var(--muted)}
.h-lista > a > .h-i--derecha,.h-lista > button > .h-i--derecha{color:var(--muted)}
/* Conversación */
.h-chat{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}
.h-msg{max-width:78%;padding:8px 12px;border-radius:var(--radius-lg);font-size:15px;line-height:21px;background:var(--surface);border:1px solid var(--border)}
.h-msg small{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--muted)}
.h-msg--cliente{align-self:flex-start;border-bottom-left-radius:4px}
.h-msg--bot{align-self:flex-end;background:var(--surface-soft);border-bottom-right-radius:4px}
.h-msg--equipo{align-self:flex-end;background:var(--marca-tint);border-color:transparent;border-bottom-right-radius:4px}
.h-msg--sistema{align-self:center;max-width:none;background:none;border:0;padding:2px;font-size:13px;color:var(--muted)}
/* Línea de tiempo (seguimiento) */
.h-tiempo{display:grid;gap:0}
.h-tiempo li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:var(--space-3);padding-bottom:var(--space-4)}
.h-tiempo li::before{content:"";position:absolute;left:13px;top:26px;bottom:0;width:2px;background:var(--border)}
.h-tiempo li:last-child::before{display:none}
.h-tiempo__p{width:28px;height:28px;border-radius:50%;border:2px solid var(--border-control);background:var(--surface);display:grid;place-items:center;color:var(--on-marca)}
.h-tiempo li.is-hecho .h-tiempo__p{background:var(--marca);border-color:var(--marca-borde)}
.h-tiempo li[aria-current="step"] .h-tiempo__p{border-color:var(--marca-borde);box-shadow:0 0 0 4px var(--marca-tint)}
.h-tiempo li.is-hecho::before{background:var(--marca)}
.h-tiempo b{display:block}
.h-tiempo small{font-size:14px;line-height:20px;color:var(--muted)}
/* Montos rápidos y vuelto (caja) */
.h-rapidos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.h-rapidos button{min-height:var(--tap);border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface);font-family:var(--font-mono);font-size:15px;font-weight:600;cursor:pointer}
.h-rapidos button[aria-pressed="true"]{background:var(--marca-tint);border-color:var(--marca-borde);color:var(--marca-texto)}
.h-vuelto{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--ok-tint)}
.h-vuelto b{font-family:var(--font-mono);font-size:28px;line-height:34px;font-weight:600;color:var(--ok)}

/* ---------- Gráficas ---------- */
.h-chart{display:grid;gap:var(--space-3);min-width:0}
.h-chart__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.h-chart svg{display:block;width:100%;height:auto;overflow:visible}
.h-chart text{font-family:var(--font-ui);font-size:12px;fill:var(--muted)}
.h-chart .h-chart__grid{stroke:var(--grid);stroke-width:1;shape-rendering:crispEdges}
.h-chart .h-chart__eje{stroke:var(--eje);stroke-width:1;shape-rendering:crispEdges}
.h-chart .h-chart__marca{fill:var(--dato-1)}
.h-chart .h-chart__marca:hover,.h-chart .h-chart__marca:focus{fill-opacity:.8;outline:none}
.h-chart .h-chart__valor{fill:var(--ink);font-weight:600}
.h-leyenda{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:14px;line-height:20px}
.h-leyenda span{display:inline-flex;align-items:center;gap:6px}
.h-leyenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.h-tip{position:absolute;pointer-events:none;z-index:20;padding:8px 10px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-size:13px;line-height:18px;white-space:nowrap}
.h-tip b{display:block;font-size:15px;line-height:20px}

/* ---------- Ticket térmico (80 mm y 58 mm), blanco y negro ---------- */
.h-ticket{width:302px;padding:14px 12px;background:#ffffff;color:#000000;font-family:var(--font-mono);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
.h-ticket--58{width:219px;font-size:11px;line-height:15px}
.h-ticket__c{text-align:center}
.h-ticket__g{font-size:15px;line-height:20px;font-weight:600}
.h-ticket__l{display:flex;justify-content:space-between;gap:8px}
.h-ticket__hr{border:0;border-top:1px dashed #000000;margin:8px 0}
.h-ticket__qr{width:96px;height:96px;margin:8px auto;display:block}
@media print{
  @page{margin:0}
  body{background:#ffffff}
  .h-top,.h-side,.h-toast,.h-deshacer,.h-banda,.h-saltar,.h-no-imprimir{display:none!important}
  .h-ticket{width:72mm;padding:0;box-shadow:none}
  .h-ticket--58{width:48mm}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}