@layer base, componentes, estilo, marca;
/* Hoja base del host del local (Fase 2b, 7.3 del informe). La usan la web del cliente, el panel, el acceso y la cocina. No lleva colores, familias, radios ni sombras escritos a mano: solo tokens que definen las hojas de los cuatro estilos (capa estilo) y /marca.css (capa marca). El orden de capas de la primera linea manda sobre el orden de los <link>. */
@layer base{
:root{--marca-suave:color-mix(in oklch, var(--marca-relleno) 14%, var(--superficie))}
[data-ambito]{--marca-suave:color-mix(in oklch, var(--marca-relleno) 14%, var(--superficie))}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
[hidden]{display:none!important}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem;scroll-padding-bottom:6rem}
body{min-height:100dvh;font-family:var(--fuente-texto);font-size:1rem;line-height:1.5;color:var(--tinta);background:var(--fondo);-webkit-font-smoothing:antialiased}
body.panel,body.cocina{display:flex;flex-direction:column}
img,video{max-width:100%;height:auto}
svg{flex:none}
a{color:var(--tinta);text-decoration:underline;text-underline-offset:.15em}
:root[data-superficie="web"] a{color:var(--marca-texto)}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4,h5,h6{font-family:var(--fuente-titulos);font-weight:800;line-height:1.15}
h1{font-size:clamp(1.4rem,2.5vw,2rem);margin-bottom:.75rem}
h2{font-size:1.2rem;margin-block:1.25rem .5rem}
h3{font-size:1.05rem;margin-block:1rem .35rem}
h4{font-size:1rem;margin-block:.75rem .3rem}
p,ul,ol,dl,blockquote,figure,pre,table{margin-block:.5rem}
ul,ol{padding-left:1.25rem}
li+li{margin-top:.2rem}
code,kbd,samp,pre{font-family:var(--fuente-datos);font-size:.95em}
pre{overflow-x:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}
fieldset{min-width:0;border:1px solid var(--linea);border-radius:var(--radio-s)}
legend{font-weight:700}
summary{cursor:pointer}
small{font-size:.9375rem}
canvas,iframe{max-width:100%}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
dialog{margin:auto}
dialog::backdrop{background:color-mix(in srgb, var(--tinta-oscura) 55%, transparent)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
}
@layer componentes{
/* --- Utilidades y estructura --- */
.contenedor{width:min(100% - 2rem,64rem);margin-inline:auto;padding-block:1rem 2rem}
.estrecho{width:min(100% - 2rem,42rem)}
.entradilla{color:var(--tinta-2);font-size:1.05rem;margin-bottom:1rem}
.nota,.detalle,.meta{color:var(--tinta-2);font-size:.92rem}
th .nota{font-weight:400}
.cargando,.vacio,.sin-datos{color:var(--tinta-2)}
.vacio{font-size:.9rem;padding:.5rem 0}
.icono{width:1.15em;height:1.15em;fill:currentColor;vertical-align:middle}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.enlace-cuenta{display:inline-flex;align-items:center;min-height:44px;margin-inline-start:auto;padding-inline:.5rem}
.saltar-contenido{position:absolute;left:-999px;top:0;z-index:30;padding:.75rem 1rem;border-radius:var(--radio-s);background:var(--superficie);color:var(--tinta);text-decoration:none}
.saltar-contenido:focus{left:.5rem;top:.5rem}
.honeypot,.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.panel-contenido{flex:1;width:100%;padding:clamp(1rem,3vw,2rem)}
.panel-seccion{margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--linea)}
.panel-seccion:last-child{border-bottom:0}
.panel-formulario{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));align-items:start;gap:.25rem 1rem;margin:.75rem 0 1.5rem}
.panel-formulario .campo{margin-bottom:.5rem}
.panel-formulario .acciones{grid-column:1/-1}
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.75rem;color:var(--tinta-2);font-size:.9rem}
.migas a{color:inherit}
/* --- Cabecera de la web del cliente y pie --- */
.cabecera-publica,.cabecera-local,.cabecera-simple{background:var(--fondo);border-bottom:1px solid var(--linea);padding-block:.75rem}
.cabecera-publica .contenedor,.cabecera-local .contenedor,.cabecera-simple .contenedor{padding-block:0}
.cabecera-carta{background:var(--fondo);border-bottom:1px solid var(--linea)}
.cabecera-carta>.contenedor{padding-bottom:0}
.cabecera-carta>nav.contenedor{padding-block:0 1rem}
.cabecera-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding-block:.5rem}
.cabecera-simple h1{margin-bottom:0;font-size:clamp(1.2rem,3.5vw,1.6rem)}
.volver{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:600}
:root[data-superficie="web"] .volver{color:var(--marca-texto)}
.marca{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:0;color:var(--tinta);font-family:var(--fuente-titulos);font-size:1.35rem;font-weight:800;letter-spacing:.01em}
.marca .logo,.logo[data-logo-tono]{width:48px;height:48px;padding:0;border-radius:var(--radio-s);object-fit:contain}
.logo[data-logo-tono="oscuro"]{padding:6px;background:var(--placa-clara)}
.logo[data-logo-tono="claro"]{padding:6px;background:var(--placa-oscura)}
.panel-marca .logo,.cocina-marca .logo{width:40px;height:40px}
.selector-idioma{display:inline-flex;gap:.15rem;padding:.15rem;border:1px solid var(--linea-control);border-radius:var(--radio-boton)}
.selector-idioma a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.2rem .6rem;border-radius:var(--radio-boton);color:var(--tinta);font-weight:600;font-size:.9rem;text-decoration:none}
.selector-idioma a[aria-current="true"]{background:var(--marca-relleno);color:var(--marca-sobre)}
.portada img{display:block;width:100%;max-height:42vh;object-fit:cover}
.estado-local{position:relative;margin-block:.75rem .5rem;padding-left:1.5rem;color:var(--tinta);font-weight:600}
.estado-local::before{content:"";position:absolute;left:0;top:.4em;width:.75rem;height:.75rem;border-radius:50%;background:var(--tinta-2)}
.estado-local--abierto::before{background:var(--ok-fondo);border:2px solid var(--ok-tinta)}
.estado-local--pausa::before,.estado-local--completo::before{background:var(--atencion-fondo);border:2px solid var(--atencion-tinta)}
.estado-local--cierre::before,.estado-local--cerrado::before{background:var(--peligro-fondo);border:2px solid var(--peligro-tinta)}
.aviso-alergias{margin-block:.5rem;padding:.6rem .9rem;border:1px solid var(--aviso-borde);border-left-width:4px;border-radius:var(--radio-s);background:var(--aviso-fondo);color:var(--aviso-tinta)}
.aviso-alergias a{color:inherit}
.nav-categorias{position:sticky;top:0;z-index:10;background:var(--fondo);border-block:1px solid var(--linea);overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-categorias ul{display:flex;gap:.25rem;width:max-content;min-width:100%;margin:0;padding:.35rem max(.5rem,calc((100% - 64rem)/2));list-style:none}
.nav-categorias li+li{margin-top:0}
.nav-categorias a{display:inline-flex;align-items:center;min-height:44px;padding:.25rem .85rem;border-radius:var(--radio-boton);color:var(--tinta);font-weight:600;text-decoration:none;white-space:nowrap}
.nav-categorias a:hover,.nav-categorias a[aria-current="true"]{background:color-mix(in srgb, var(--tinta) 10%, transparent)}
.pie{border-top:1px solid var(--linea);margin-top:2rem;padding:1.5rem max(1rem,calc((100% - 64rem)/2));color:var(--tinta-2);font-size:.95rem}
.pie nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:.5rem}
.pie a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
/* --- Cabecera, contenido y pie del panel y de la cocina --- */
.panel-cabecera{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;padding:.75rem clamp(1rem,3vw,2rem);background:var(--barra);color:var(--tinta);border-bottom:1px solid var(--linea)}
.panel-marca{color:inherit;font-family:var(--fuente-titulos);font-size:1.1rem;font-weight:800;text-decoration:none}
.panel-nav{display:flex;flex-wrap:wrap;gap:.25rem}
.panel-nav a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .75rem;border-radius:var(--radio-s);color:inherit;text-decoration:none}
.panel-nav a:hover{background:color-mix(in srgb, var(--tinta) 10%, transparent)}
.panel-nav a[aria-current="page"]{background:color-mix(in srgb, var(--tinta) 14%, transparent);font-weight:700}
.panel-cuenta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:auto;color:var(--tinta-2)}
.panel-actor{color:inherit}
.panel-enlace{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.panel-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.75rem clamp(1rem,3vw,2rem);border-top:1px solid var(--linea);background:var(--barra);color:var(--tinta-2);font-size:.9rem}
.panel-pie a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.cocina-cabecera{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;padding:.7rem clamp(1rem,2.5vw,2rem);background:var(--barra);color:var(--tinta);border-bottom:2px solid var(--linea)}
.cocina-marca{color:inherit;font-family:var(--fuente-titulos);font-size:1.1rem;font-weight:600}
.cocina-etiqueta{display:block;color:var(--tinta-2);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.cocina-puesto{font-size:1.25rem}
.cocina-espera{margin-left:auto;padding:.15rem .9rem;border:2px solid var(--linea-control);border-radius:var(--radio-boton);background:var(--fondo);color:var(--tinta);font-family:var(--fuente-datos);font-size:1.35rem;font-weight:700}
.cocina-reloj{font-family:var(--fuente-datos);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.cocina-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cocina-selector{display:flex;gap:.25rem;padding:.45rem clamp(1rem,2.5vw,2rem);background:var(--barra);color:var(--tinta);border-bottom:1px solid var(--linea);overflow-x:auto}
.cocina-selector a{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .95rem;border-radius:var(--radio-boton);color:inherit;font-weight:600;text-decoration:none;white-space:nowrap}
.cocina-selector a:hover{background:color-mix(in srgb, var(--tinta) 10%, transparent)}
.cocina-selector a[aria-current="page"]{background:var(--accion);color:var(--accion-tinta)}
.cocina-contenido{display:flex;flex:1;flex-direction:column;gap:1rem;padding:1rem clamp(1rem,2.5vw,2rem) 2rem;padding-bottom:max(2rem,env(safe-area-inset-bottom))}
/* --- Botones --- */
.boton,.boton-principal{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;padding:.55rem 1rem;overflow:hidden;border:2px solid var(--accion);border-radius:var(--radio-boton);background:var(--accion);color:var(--accion-tinta);font:inherit;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
.boton:hover,.boton-principal:hover{filter:brightness(1.08)}
.boton:active,.boton-principal:active{filter:brightness(.95)}
.boton[disabled],:root:not([data-vista-previa]) .boton[aria-disabled="true"],.boton-principal[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.boton-secundario{background:transparent;border-color:var(--linea-control);color:var(--tinta)}
.boton-secundario:hover{background:color-mix(in srgb, var(--tinta) 10%, transparent);filter:none}
.boton-borde{background:transparent;border-color:var(--accion);color:var(--accion)}
.boton-borde:hover{background:color-mix(in srgb, var(--accion) 12%, transparent);filter:none}
.boton-peligro{background:var(--peligro-tinta);border-color:var(--peligro-tinta);color:var(--peligro-fondo)}
.boton-marca{background:var(--marca-relleno);border-color:var(--marca-relleno);color:var(--marca-sobre)}
.boton-pequeno{min-height:44px;padding:.3rem .7rem;font-size:.9375rem}
.boton-enlace{min-height:44px;padding:.4rem .25rem;border:0;background:none;color:var(--accion);font:inherit;text-decoration:underline;cursor:pointer}
.boton-icono{min-width:44px;min-height:44px;padding:.4rem;border:1px solid transparent;background:transparent;color:inherit}
.boton-icono:hover{background:color-mix(in srgb, var(--tinta) 10%, transparent);filter:none}
.boton-cantidad{width:44px;height:44px;padding:0;border:2px solid var(--linea-control);border-radius:50%;background:var(--superficie);color:var(--tinta);font-size:1.3rem;font-weight:700;line-height:1}
.boton-cantidad:hover{background:color-mix(in srgb, var(--tinta) 10%, transparent);filter:none}
.boton-cantidad[disabled]{opacity:.5}
.boton-cesta{width:100%;min-height:52px;font-size:1.05rem}
.boton-confirmar{width:100%;min-height:52px;font-size:1.05rem}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-block:.75rem}
.acciones-cesta{flex-direction:column}
.acciones-cesta .boton{width:100%}
.acciones-pedido .boton-confirmar{width:100%}
/* --- Campos, selectores, casillas, opciones e interruptores --- */
.campo{display:flex;flex-direction:column;gap:.3rem;max-width:32rem;margin-block:.75rem}
.campo>label[for],.campo>legend{font-weight:600}
.campo-casilla{flex-direction:row}
.campo-casilla label{font-weight:400}
.ajustes>nav a{padding-block:.65rem}
input[type="color"]{width:4rem;height:44px}
.fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));align-items:end;gap:.5rem .75rem}
.fila-campos .campo{max-width:none;margin-bottom:.5rem}
.campo-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem}
.campo-dia{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
[data-tramo]{align-items:flex-end}
[data-anadir-tramo]{align-self:flex-start}
.contador{color:var(--tinta-2);font-size:.85rem;text-align:right}
.error-campo{margin-block:.25rem;padding:.15rem .4rem;border-left:4px solid var(--peligro-tinta);border-radius:var(--radio-s);background:var(--peligro-fondo);color:var(--peligro-tinta);font-size:.9rem;font-weight:600}
.error-campo:empty{display:none}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),select,textarea{width:100%;min-height:44px;padding:.5rem .65rem;border:1px solid var(--linea-control);border-radius:var(--radio-s);background:var(--superficie);color:var(--tinta);font:inherit}
textarea{min-height:3.5rem;resize:vertical}
select{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--tinta-2);opacity:1}
input[type="checkbox"],input[type="radio"]{width:24px;height:24px;accent-color:var(--accion);cursor:pointer}
::file-selector-button{min-height:44px;margin-right:.6rem;padding:0 1rem;border:2px solid var(--linea-control);border-radius:var(--radio-boton);background:transparent;color:var(--tinta);font:inherit;font-weight:700}
.casilla,.campo-casilla,.opcion,.opcion-linea,.lista-filtro label,.grupo-opciones .opcion{display:flex;align-items:flex-start;gap:.6rem;min-height:44px;cursor:pointer}
.casilla input,.campo-casilla input,.opcion input,.opcion-linea input,.lista-filtro input,.grupo-opciones .opcion input{flex:0 0 auto;margin-top:.15rem}
.opcion-linea{align-items:center;font-weight:400}
.opcion-linea input{margin-top:0}
.opciones{display:flex;flex-wrap:wrap;gap:.4rem}
.opcion{padding:.45rem .7rem;border:1px solid var(--linea-control);border-radius:var(--radio-m);background:var(--superficie);color:var(--tinta);font-weight:600;text-decoration:none}
.opcion:hover{background:color-mix(in srgb, var(--tinta) 8%, transparent)}
.opcion.elegida,.opcion[aria-current="true"],.opcion[aria-checked="true"],.opcion[aria-selected="true"],.opcion[aria-pressed="true"]{border-color:var(--tinta);border-width:2px;background:color-mix(in srgb, var(--tinta) 10%, transparent);font-weight:700}
.opcion-texto{min-width:0}
.opcion[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.opciones-en-linea{display:flex;flex-wrap:wrap;gap:.5rem 1rem}
.lista-filtro{display:grid;grid-template-columns:1fr;gap:.15rem;margin:.5rem 0;padding:0;list-style:none}
.lista-filtro label{align-items:center}
.grupo-opciones{margin-block:.75rem;padding:.6rem .75rem .75rem;border:1px solid var(--linea);border-radius:var(--radio-s)}
.grupo-opciones legend{padding-inline:.25rem;font-weight:700}
.grupo-requisito{color:var(--tinta-2);font-weight:400}
.grupo-opciones .opcion{padding-block:.35rem;border:0;background:transparent}
.grupo-opciones .opcion input[disabled]+.opcion-texto,.grupo-opciones .opcion input[disabled]~.opcion-texto{color:var(--tinta-2);text-decoration:line-through}
.interruptor,[role="switch"]{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem .7rem;border:1px solid var(--linea-control);border-radius:var(--radio-boton);background:transparent;color:var(--tinta);font:inherit;font-weight:600;cursor:pointer}
.interruptor{padding:0;border:0}
[role="switch"]::before{content:"";width:.9rem;height:.9rem;border:2px solid currentColor;border-radius:50%;background:transparent}
[role="switch"][aria-checked="true"]{background:var(--accion);border-color:var(--accion);color:var(--accion-tinta)}
[role="switch"][aria-checked="true"]::before{background:currentColor}
/* --- Pestanas --- */
.pestanas{display:none;gap:.35rem;margin-bottom:.75rem}
.pestana{flex:1;min-height:44px;padding:.5rem .6rem;border:1px solid var(--linea-control);border-radius:var(--radio-boton);background:transparent;color:var(--tinta);font:inherit;font-weight:600;cursor:pointer}
.pestana:hover,.pestana.activa,.pestana[aria-selected="true"]{background:var(--accion);border-color:var(--accion);color:var(--accion-tinta)}
.vistas-pedidos{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 1rem;border-bottom:2px solid var(--linea)}
.pestana-vista{min-height:44px;padding:.5rem 1rem;border:1px solid transparent;border-bottom:3px solid transparent;border-radius:var(--radio-m) var(--radio-m) 0 0;background:transparent;color:var(--tinta);font:inherit;font-weight:700;cursor:pointer}
.pestana-vista.activa,.pestana-vista[aria-selected="true"]{border-color:var(--linea);border-bottom-color:var(--accion);color:var(--tinta)}
.contador-vista{display:inline-block;min-width:1.5rem;margin-left:.25rem;padding:0 .35rem;border-radius:var(--radio-boton);background:color-mix(in srgb, currentColor 15%, transparent);font-family:var(--fuente-datos);font-variant-numeric:tabular-nums}
.menus-tabs{margin-top:1rem}
.menus-tablist{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:1rem;border-bottom:1px solid var(--linea)}
.menus-tablist [role="tab"]{min-height:44px;padding:.5rem .9rem;border:1px solid transparent;border-bottom:0;border-radius:var(--radio-m) var(--radio-m) 0 0;background:transparent;color:var(--tinta);font:inherit;font-weight:600;cursor:pointer}
.menus-tablist [role="tab"]:hover{background:color-mix(in srgb, var(--tinta) 8%, transparent)}
.menus-tablist [role="tab"][aria-selected="true"]{background:var(--superficie);border-color:var(--linea);border-bottom:3px solid var(--accion);color:var(--tinta)}
/* --- Tablas --- */
table{width:100%;border-collapse:collapse}
caption{padding-bottom:.5rem;font-weight:600;text-align:left}
th,td{padding:.5rem;border-bottom:1px solid var(--linea);text-align:left;vertical-align:baseline}
thead th{color:var(--tinta-2);font-size:.85rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.tabla-scroll{overflow-x:auto;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-m)}
.tabla-scroll>table{margin:0}
.tabla-clientes .acciones{margin-top:0}
.telefono-cliente{font-family:var(--fuente-datos);font-variant-numeric:tabular-nums}
.tabla-produccion th,.tabla-produccion td{padding:.45rem .6rem}
.tabla-produccion .numero,.tabla-resumen .numero{text-align:right;font-family:var(--fuente-datos);font-variant-numeric:tabular-nums}
.tabla-resumen{font-size:.92rem}
.tabla-resumen th,.tabla-resumen td{padding:.4rem .45rem}
.tabla-resumen td:not(:first-child),.tabla-resumen th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-resumen--senales td:first-child,.tabla-resumen--senales th:first-child,.tabla-resumen--unidades td:not(:last-child),.tabla-resumen--unidades th:not(:last-child){text-align:left;white-space:normal}
.tabla-resumen tbody th[scope="row"]{font-weight:600}
.tabla-resumen .fila-total th,.tabla-resumen .fila-total td{border-top:2px solid var(--linea);border-bottom:0;font-weight:700}
.calendario-menus th,.calendario-menus td{vertical-align:middle}
.calendario-menus .acciones{margin-top:0}
/* --- Avisos y banners --- */
.aviso{margin-block:.75rem;padding:.75rem 1rem;border:1px solid var(--linea);border-left:4px solid var(--info-tinta);border-radius:var(--radio-s);background:var(--info-fondo);color:var(--info-tinta)}
.aviso a{color:inherit}
.aviso--ok{border-left-color:var(--ok-tinta);background:var(--ok-fondo);color:var(--ok-tinta)}
.aviso--peligro{border-left-color:var(--peligro-tinta);background:var(--peligro-fondo);color:var(--peligro-tinta)}
.aviso--atencion{border-left-color:var(--atencion-tinta);background:var(--atencion-fondo);color:var(--atencion-tinta)}
.aviso-error{margin-block:1rem;padding:1rem;border:2px solid var(--peligro-tinta);border-radius:var(--radio-s);background:var(--peligro-fondo);color:var(--peligro-tinta)}
.aviso-error h2{margin-top:0;color:inherit;font-size:1.05rem}
.aviso-error ul{margin-top:.35rem;padding-left:1.2rem}
.aviso-final{margin-block:1rem;padding:.9rem 1rem;border:2px solid var(--linea);border-radius:var(--radio-s);background:var(--superficie)}
.banner,.banner-soporte,.banner-conexion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem 1rem;border-bottom:1px solid var(--linea);background:var(--atencion-fondo);color:var(--atencion-tinta);font-weight:600}
.banner-conexion{background:var(--peligro-fondo);color:var(--peligro-tinta)}
.estado-conexion{color:var(--tinta-2);font-size:.9rem}
.lista-ventajas{margin:1rem 0 1.5rem;padding-left:1.25rem}
.lista-ventajas li{margin-bottom:.5rem}
/* --- Etiquetas, estados y chips --- */
.etiqueta{display:inline-flex;align-items:center;gap:.25rem;padding:.05rem .55rem;border:1px solid transparent;border-radius:var(--radio-boton);background:color-mix(in srgb, var(--tinta) 10%, transparent);color:var(--tinta);font-size:.8rem;font-weight:700}
.etiqueta--aviso{border-color:var(--aviso-borde);background:var(--aviso-fondo);color:var(--aviso-tinta)}
.etiqueta--peligro{border-color:var(--peligro-tinta);background:var(--peligro-fondo);color:var(--peligro-tinta)}
.etiqueta--ok{border-color:var(--ok-tinta);background:var(--ok-fondo);color:var(--ok-tinta)}
.etiqueta-agotado{display:inline-block;align-self:flex-start;padding:.1rem .5rem;border-radius:var(--radio-s);background:var(--tinta);color:var(--fondo);font-size:.82rem;font-weight:700}
.etiqueta-estado{display:inline-block;padding:.2rem .7rem;border-radius:var(--radio-boton);background:var(--accion);color:var(--accion-tinta);font-weight:700}
.estado-plantilla,.estado-personalizado,.estado-sin-menu,.estado-no-se-ofrece{border:1px solid var(--ok-tinta);background:var(--ok-fondo);color:var(--ok-tinta)}
.estado-personalizado{border-color:var(--info-tinta);background:var(--info-fondo);color:var(--info-tinta)}
.estado-sin-menu{border-color:var(--peligro-tinta);background:var(--peligro-fondo);color:var(--peligro-tinta)}
.estado-no-se-ofrece{border-color:var(--linea-control);background:var(--superficie-2);color:var(--tinta-2)}
}
@layer componentes{
/* --- Tarjetas y tarjeta de pedido --- */
.tarjeta{padding:.75rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie);box-shadow:var(--sombra)}
.tarjeta+.tarjeta{margin-top:1rem}
.tarjeta--aviso{background:var(--aviso-fondo);color:var(--aviso-tinta)}
.tarjeta-pedido{display:flex;flex-direction:column;gap:.45rem;padding:.8rem .9rem;border:1px solid var(--linea);border-left:6px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra)}
.tarjeta-pedido[data-estado="recibido"]{border-left-color:var(--atencion-tinta)}
.tarjeta-pedido[data-estado="aceptado"]{border-left-color:var(--info-tinta)}
.tarjeta-pedido[data-estado="listo"]{border-left-color:var(--ok-tinta)}
.tarjeta-pedido[data-estado="rechazado"],.tarjeta-pedido[data-estado="cancelado"],.tarjeta-pedido[data-estado="no_presentado"]{border-left-color:var(--peligro-tinta)}
.pedido-cabecera{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .5rem}
.pedido-numero{font-family:var(--fuente-titulos);font-size:1.6rem;font-weight:800;line-height:1}
.pedido-hora{margin-left:auto;text-align:right;color:var(--tinta-2);font-family:var(--fuente-datos);font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.pedido-hora .meta{display:block}
.pedido-cliente{display:flex;align-items:center;gap:.5rem;min-width:0}
.pedido-inicial{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--linea);border-radius:50%;background:var(--superficie-2);color:var(--tinta);font-family:var(--fuente-datos);font-weight:700;text-transform:uppercase}
.pedido-cliente .pedido-nombre{min-width:0;font-weight:700;overflow-wrap:anywhere}
.pedido-etiquetas,.tarjeta-pedido .etiquetas{display:flex;flex-wrap:wrap;gap:.3rem}
.pedido-lineas,.tarjeta-pedido .lineas{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;list-style:none}
.tarjeta-pedido .lineas li+li{margin-top:0}
.pedido-linea{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem;min-width:0}
.pedido-linea .pedido-nombre{flex:1 1 8rem;min-width:0;font-weight:600;overflow-wrap:anywhere}
.pedido-cantidad{flex:none;font-family:var(--fuente-datos);font-weight:700;font-variant-numeric:tabular-nums}
.pedido-miniatura,.cocina-miniatura{order:-1;flex:none;align-self:center;width:40px;height:40px;border-radius:var(--radio-s);background:var(--superficie-2);object-fit:cover}
.pedido-detalle{flex-basis:100%;color:var(--tinta-2);font-size:.9rem}
.pedido-alergenos{flex:none;align-self:center;padding:.05rem .45rem;border:1px solid var(--aviso-borde);border-radius:var(--radio-s);background:var(--aviso-fondo);color:var(--aviso-tinta);font-size:.9375rem;font-weight:700}
.pedido-tareas,.tareas-pedido{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.tarea{display:inline-flex;align-items:center;gap:.35rem;min-height:32px;padding:.15rem .5rem;border:1px solid var(--linea-control);border-radius:var(--radio-boton);font-size:.85rem;font-weight:700}
.tarea .boton{min-height:44px;margin:-.15rem -.5rem -.15rem 0;padding:.1rem .7rem;font-size:.9375rem}
.tarea--pendiente{border-color:var(--atencion-tinta);background:var(--atencion-fondo);color:var(--atencion-tinta)}
.tarea--hecho,.tarea--forzado{border-color:var(--ok-tinta);background:var(--ok-fondo);color:var(--ok-tinta)}
.tarea--cancelado{border-color:var(--peligro-tinta);color:var(--peligro-tinta);text-decoration:line-through}
.pedido-pago{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .75rem;color:var(--tinta-2);font-size:.95rem}
.pedido-pago strong{margin-left:auto;color:var(--tinta);font-family:var(--fuente-datos);font-size:1.1rem}
.pedido-senal,.senal{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.4rem .6rem;border:1px solid var(--linea);border-left:5px solid var(--atencion-tinta);border-radius:var(--radio-s);background:var(--superficie-2)}
.pedido-senal--recibida,.senal--recibida{border-left-color:var(--ok-tinta)}
.pedido-senal--devuelta,.pedido-senal--a_devolver,.pedido-senal--cancelada,.senal--devuelta,.senal--a_devolver,.senal--fallida{border-left-color:var(--peligro-tinta)}
.pedido-senal-texto,.senal-texto{font-weight:700}
.senal .acciones{width:100%;margin-top:.3rem}
.explicacion-senal{color:var(--atencion-tinta);font-weight:600}
.pedido-acciones,.tarjeta-pedido .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:auto;padding-top:.25rem}
.pedido-acciones .boton{flex:1 1 auto}
.pedido-acciones .boton-icono{flex:0 0 auto}
.notas,.tarjeta-pedido .notas{padding:.35rem .5rem;border-radius:var(--radio-s);background:var(--superficie-2);font-size:.9rem}
/* --- Cocina: tickets y pantalla por puesto --- */
.cocina-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1rem}
.cocina-tarjeta,.ticket-cocina{display:flex;flex-direction:column;gap:.6rem;padding:1rem 1.1rem;border:2px solid var(--linea);border-top:6px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie);color:var(--tinta);font-size:1.125rem}
.cocina-tarjeta--ya{border-top-color:var(--atencion-tinta)}
.cocina-ya{order:1;margin-left:auto}
.cocina-tarjeta--ya .cocina-hora{order:2;flex-basis:100%;margin:0;text-align:right}
.cocina-tarjeta .pedido-miniatura{width:64px;height:64px}
.cocina-tarjeta-cabecera{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .9rem}
.cocina-numero{font-family:var(--fuente-titulos);font-size:1.6rem;font-weight:800;line-height:1}
.cocina-nombre{flex:1;font-size:1.2rem;font-weight:600}
.cocina-hora{margin-left:auto;font-family:var(--fuente-datos);font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.cocina-cuando{margin-left:.35rem;color:var(--tinta-2);font-size:1.125rem;font-weight:500}
.cocina-contexto{color:var(--tinta-2);font-size:1.125rem}
.cocina-platos{display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none}
.cocina-plato{padding-top:.55rem;border-top:1px dashed var(--linea)}
.cocina-cantidad{font-size:1.5rem;font-weight:700}
.cocina-detalle{color:var(--tinta-2)}
.cocina-alergenos{margin-top:.35rem;padding:.2rem .5rem;border:1px solid var(--aviso-borde);border-left:5px solid var(--aviso-tinta);border-radius:var(--radio-s);background:var(--aviso-fondo);color:var(--aviso-tinta);font-weight:700}
.cocina-alerta{display:inline-block;width:1.4em;height:1.4em;margin-right:.35em;border-radius:50%;background:var(--aviso-tinta);color:var(--aviso-fondo);font-weight:700;line-height:1.4em;text-align:center}
.cocina-trazas{margin-top:.2rem;color:var(--tinta-2);font-size:1.125rem}
.cocina-nota{margin-top:.35rem;padding:.2rem .5rem;border-left:5px solid var(--atencion-tinta);background:var(--atencion-fondo);color:var(--atencion-tinta);font-weight:600}
.cocina-nota-pedido{margin-top:0}
.cocina-otros,.cocina-proximos,.detalle-cancelados{padding-top:.5rem;border-top:1px solid var(--linea);color:var(--tinta-2);font-size:.98rem}
.cocina-proximos{font-weight:600}
.cocina-hecho{min-height:56px;margin-top:auto;padding:.5rem 1rem;border:2px solid var(--accion);border-radius:var(--radio-boton);background:var(--accion);color:var(--accion-tinta);font:inherit;font-family:var(--fuente-titulos);font-size:1.3rem;font-weight:800;letter-spacing:.02em;cursor:pointer}
.cocina-hecho:hover{filter:brightness(1.08)}
.cocina-hecho:disabled{opacity:.6;cursor:progress}
.cocina-vacio{padding:2rem;border:2px dashed var(--linea);border-radius:var(--radio-m);background:var(--superficie);color:var(--tinta-2);font-size:1.3rem;text-align:center}
.cocina-pie{padding:.85rem 1rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.cocina-pie h2{color:var(--tinta-2);font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase}
.cocina-hechos{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:.4rem 0;padding:0;list-style:none}
.cocina-hecho-fila{display:flex;align-items:center;gap:.5rem;padding:.2rem .3rem .2rem .8rem;border:1px solid var(--linea);border-radius:var(--radio-boton);font-size:1rem}
.cocina-hecho-puesto,.cocina-hecho-vacio{color:var(--tinta-2);font-size:.9rem}
.cocina-cancelados{margin-top:.4rem;color:var(--peligro-tinta);font-weight:700}
.cocina-cancelado{text-decoration:line-through}
.cocina-pausa,.menu-pausa,.usuario-menu-pausa{position:relative;display:inline-block}
.cocina-pausa>summary{list-style:none;cursor:pointer}
.cocina-pausa>summary::-webkit-details-marker{display:none}
.cocina-pausa-menu,.opciones-pausa{position:absolute;z-index:20;top:calc(100% + .35rem);left:0;display:flex;flex-direction:column;gap:.35rem;min-width:12rem;padding:.5rem;border:1px solid var(--linea-control);border-radius:var(--radio-m);background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra)}
.cocina-pausa-menu{right:0;left:auto;width:min(22rem,90vw);padding:.9rem}
.cocina-pausa-botones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
/* --- Panel de pedidos --- */
.cabecera-pedidos h1{margin-bottom:.5rem}
.barra-pedidos{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.5rem 0;margin-bottom:.75rem}
.estado-recepcion{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.punto{display:inline-block;width:.8rem;height:.8rem;border:2px solid var(--superficie);border-radius:50%;background:var(--tinta-2)}
.punto--abierto{background:var(--ok-tinta);border-color:var(--ok-fondo)}
.punto--pausa{background:var(--peligro-tinta);border-color:var(--peligro-fondo)}
.estado-espera{font-family:var(--fuente-datos);font-weight:700;font-variant-numeric:tabular-nums}
.estado-pausa{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border:1px solid var(--atencion-tinta);border-radius:var(--radio-boton);background:var(--atencion-fondo);color:var(--atencion-tinta);font-weight:700}
.atajos{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0}
.lista-pedidos{display:flex;flex-direction:column;gap:.75rem}
.panel-columnas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:1rem}
.columna{padding:.75rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.columna h2{margin-top:0;color:var(--tinta-2);font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.hechos{margin-top:1.5rem;padding:.75rem 1rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.resumen-hechos{margin-bottom:.5rem;font-weight:600}
.grupo-dia{margin-bottom:1.25rem}
.grupo-dia>h2{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:1.1rem}
.ficha-cliente{margin:.35rem 0 .5rem;color:var(--tinta);font-weight:600;white-space:pre-line}
.fila-telefono{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem}
.fila-telefono label{flex-basis:100%}
.fila-telefono input{flex:1 1 12rem;width:auto}
.lista-articulos{display:flex;flex-direction:column;gap:.5rem;max-height:42vh;padding-right:.25rem;overflow-y:auto}
.articulo{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.articulo-datos{flex:1 1 14rem;min-width:0}
.articulo-nombre{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-weight:700}
.articulo .detalle{color:var(--tinta-2);font-size:.85rem}
.selector-menu,.pasos-menu{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:flex-start;gap:.4rem}
.paso-menu{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.9rem;font-weight:600}
.lineas-nuevo{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.75rem}
.linea-nuevo{padding:.55rem .7rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.linea-cabecera{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.cantidad-linea{min-width:1.5rem;font-family:var(--fuente-datos);font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.total-nuevo,.total-linea{margin-bottom:.5rem;font-family:var(--fuente-datos);font-size:1.15rem;font-weight:700}
.cobro-senal{margin-top:.35rem;padding:.35rem .6rem;border-radius:var(--radio-s);background:var(--ok-fondo);color:var(--ok-tinta);font-weight:700}
.resumen-produccion{margin:.5rem 0 .75rem;font-weight:700}
.buscador{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;margin-bottom:1rem}
.buscador .campo{min-width:min(22rem,100%);margin-bottom:0}
.estado-cliente{display:inline-block;padding:.05rem .55rem;border:1px solid var(--ok-tinta);border-radius:var(--radio-boton);background:var(--ok-fondo);color:var(--ok-tinta);font-size:.8rem;font-weight:700;white-space:nowrap}
.estado-cliente--bloqueado{border-color:var(--peligro-tinta);background:var(--peligro-fondo);color:var(--peligro-tinta)}
.columnas-plantilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:start;gap:.75rem}
.columna-plantilla{padding:.75rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.columna-plantilla h3{margin-top:0;color:var(--tinta-2);font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
/* --- Dialogos --- */
dialog{max-width:min(90vw,32rem);padding:1.25rem;border:1px solid var(--linea);border-radius:var(--radio-l);background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra)}
.dialogo,dialog.dialogo{width:min(100% - 1.5rem,34rem);max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--linea);border-radius:var(--radio-l);background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra);overflow:hidden}
.dialogo-cuerpo{position:relative;max-height:calc(100dvh - 2rem);padding:1.1rem 1rem 1.25rem;overflow-y:auto}
.dialogo-cuerpo h2{margin-top:0;padding-right:2.5rem}
.dialogo-cuerpo>section{min-width:0}
.dialogo-cuerpo h3{margin-bottom:.5rem;font-size:1rem;letter-spacing:.02em;text-transform:uppercase}
.boton-cerrar{position:absolute;top:.5rem;right:.5rem;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--linea-control);border-radius:50%;background:var(--superficie);color:var(--tinta);font-size:1.4rem;line-height:1;cursor:pointer}
.boton-cerrar:hover{background:color-mix(in srgb, var(--tinta) 10%, transparent)}
.dialogo-foto{width:100%;max-height:13rem;margin-bottom:.5rem;border-radius:var(--radio-s);object-fit:cover}
.dialogo-acciones{display:flex;gap:.5rem;margin-top:1rem}
.dialogo-acciones .boton{flex:1}
.dialogo-ancho{width:min(94vw,72rem);max-width:min(94vw,72rem)}
.dialogo-completo,dialog.dialogo-completo{width:min(96vw,78rem);max-width:96vw;max-height:94vh;padding:0;overflow:hidden}
.dialogo-completo::backdrop{background:color-mix(in srgb, var(--tinta-oscura) 60%, transparent)}
.dialogo-completo form{display:flex;flex-direction:column;min-height:0;max-height:94vh}
.dialogo-cabecera{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--linea);background:var(--fondo)}
.dialogo-cabecera h2{margin:0;font-size:1.2rem}
.dialogo-completo .dialogo-cuerpo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1.25rem;max-height:none;padding:1rem 1.1rem 1.4rem;overflow-y:auto}
/* --- Menus desplegables --- */
.menu-desplegable{position:relative;display:inline-block}
.menu-desplegable [role="menu"],.menu-lista{position:absolute;z-index:20;top:calc(100% + .35rem);left:0;display:flex;flex-direction:column;gap:.25rem;min-width:12rem;margin:0;padding:.4rem;border:1px solid var(--linea-control);border-radius:var(--radio-m);background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra);list-style:none}
.menu-desplegable [role="menuitem"],.menu-lista a,.menu-lista button{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.35rem .6rem;border:0;border-radius:var(--radio-s);background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.menu-desplegable [role="menuitem"]:hover,.menu-desplegable [role="menuitem"]:focus-visible,.menu-lista a:hover,.menu-lista button:hover{background:color-mix(in srgb, var(--tinta) 10%, transparent)}
/* --- Paginacion y esqueletos de carga --- */
.paginacion{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin-block:1rem;padding:0;list-style:none}
.paginacion a,.paginacion button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .6rem;border:1px solid var(--linea-control);border-radius:var(--radio-s);background:var(--superficie);color:var(--tinta);text-decoration:none}
.paginacion a:hover,.paginacion button:hover{background:color-mix(in srgb, var(--tinta) 10%, transparent)}
.paginacion [aria-current="page"],.paginacion .actual{border-color:var(--accion);background:var(--accion);color:var(--accion-tinta);font-weight:700}
.paginacion :disabled{opacity:.5;cursor:not-allowed}
.esqueleto{border-radius:var(--radio-s);background:var(--superficie-2);animation:latido 1.4s ease-in-out infinite}
.esqueleto-linea{height:.9rem;margin-block:.35rem}
.esqueleto-tarjeta{min-height:6rem}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.55}}
}
@layer componentes{
/* --- Web del cliente: carta, ficha de plato, cesta y pedido --- */
.categoria{margin-top:1.25rem}
.categoria>h2{margin-top:1rem;padding-bottom:.35rem;border-bottom:2px solid var(--linea)}
:root[data-superficie="web"] .categoria>h2{border-bottom-color:var(--marca-relleno)}
.categoria-descripcion{margin-bottom:.5rem;color:var(--tinta-2)}
.lista-platos{display:grid;gap:.75rem;margin-top:.75rem;padding:0;list-style:none}
.plato{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:.75rem;width:100%;padding:.6rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie);color:var(--tinta);font:inherit;text-align:left;cursor:pointer}
button.plato:hover{border-color:var(--linea-control);background:color-mix(in srgb, var(--tinta) 5%, transparent)}
.plato--no-disponible{background:var(--superficie-2);cursor:default}
.plato-foto{width:84px;height:84px;border-radius:var(--radio-s);background:var(--superficie-2);object-fit:cover}
.plato-foto--vacia{display:block;border:1px dashed var(--linea)}
.plato-info{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.plato-nombre{font-size:1.02rem;font-weight:700}
.plato-descripcion{color:var(--tinta-2);font-size:.94rem}
.plato-alergenos{display:inline-block;padding:.05rem .45rem;border:1px solid var(--aviso-borde);border-radius:var(--radio-s);background:var(--aviso-fondo);color:var(--aviso-tinta);font-size:1rem;font-weight:700}
.plato-alergenos::before{content:"!";display:inline-grid;place-items:center;margin-right:.3em;width:1.4em;height:1.4em;border-radius:50%;background:var(--aviso-tinta);color:var(--aviso-fondo);font-weight:700}
.plato-alergenos .etiqueta{padding:0;border:0;background:transparent;color:inherit;font-size:inherit;font-weight:600}
.plato-precio{font-family:var(--fuente-datos);font-weight:700;white-space:nowrap}
.plato-mas{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--accion);border-radius:50%;color:var(--accion);font-size:1.4rem;font-weight:700;line-height:1}
.estado-filtro{min-height:1.5rem;margin-top:.75rem;color:var(--tinta-2);font-weight:600}
.precio-base{font-weight:700}
.suplemento{color:var(--tinta-2)}
.cantidad{display:flex;align-items:center;gap:.6rem;margin-block:1rem 0}
.cantidad-etiqueta{font-weight:700}
.cantidad-valor{min-width:2.2rem;font-family:var(--fuente-datos);font-size:1.1rem;font-weight:700;text-align:center}
.lineas-cesta,.lineas-resumen,.envases-lista{display:grid;gap:.6rem;padding:0;list-style:none}
.linea-cesta{padding:.9rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.linea-cesta h2{margin:0;font-size:1.05rem}
.linea-detalle{margin-top:.2rem;color:var(--tinta-2);font-size:.92rem}
.linea-pie{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-top:.75rem}
.linea-importe,.lineas-resumen .importe,.comprobante-lineas .importe{margin-left:auto;font-family:var(--fuente-datos);font-weight:700;white-space:nowrap}
.totales{display:grid;gap:.35rem;margin-block:1rem;padding:.9rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie-2)}
.totales>div{display:flex;justify-content:space-between;gap:1rem}
.totales dt{color:var(--tinta-2)}
.totales dd{font-family:var(--fuente-datos);font-weight:600}
.totales .total{padding-top:.35rem;border-top:1px solid var(--linea);font-size:1.15rem}
.totales .total dt,.totales .total dd{color:var(--tinta);font-weight:700}
.resumen-pedido,.resumen-pedido h3{margin-top:0}
.lineas-resumen li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem;padding-bottom:.5rem;border-bottom:1px solid var(--linea)}
.lineas-resumen li+li{margin-top:0}
.lineas-resumen .aviso{flex-basis:100%;margin-block:.25rem 0;padding:.4rem .6rem}
.franjas{margin-top:.5rem}
.privacidad{margin-block:1rem;padding:.75rem .9rem;border:1px solid var(--linea);border-radius:var(--radio-s);background:var(--superficie-2)}
.privacidad summary{display:flex;align-items:center;min-height:44px;font-weight:600;cursor:pointer}
.privacidad p{margin-block:.4rem;font-size:.95rem}
.contenedor-seguimiento{max-width:42rem}
.estado-actual{margin-block:.5rem 1rem}
.pasos{display:grid;gap:.2rem;margin-block:1rem;padding:0;list-style:none}
.paso{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.6rem;min-height:44px;padding:.35rem .5rem;border-radius:var(--radio-s)}
.paso[data-hecho="si"]{background:var(--superficie-2)}
.paso-marca{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border:2px solid var(--linea-control);border-radius:50%;background:var(--superficie);color:var(--superficie);font-weight:700}
.paso[data-hecho="si"] .paso-marca{border-color:var(--ok-tinta);background:var(--ok-fondo);color:var(--ok-tinta)}
.paso-texto{font-weight:600}
.paso[data-hecho="no"] .paso-texto{color:var(--tinta-2);font-weight:400}
.paso-detalle{color:var(--tinta-2);font-size:.9rem;text-align:right}
.comprobante{margin-top:1.5rem;padding:1rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.comprobante-aviso{margin-block:.35rem .75rem;padding:.5rem .75rem;border:2px dashed var(--tinta-2);border-radius:var(--radio-s);text-align:center}
.comprobante-local{color:var(--tinta-2);font-size:.95rem}
.comprobante-lineas{width:100%;margin-top:.9rem;border-collapse:collapse}
.comprobante-lineas th,.comprobante-lineas td{padding:.5rem .35rem;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.comprobante th:not(:first-child),.comprobante td:not(:first-child){text-align:right;white-space:nowrap}
.comprobante-envases{margin-top:1rem}
.envases-lista li{display:flex;justify-content:space-between;gap:1rem}
.comprobante-pie{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--linea);color:var(--tinta-2);font-size:.92rem}
.comprobante-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem}
.instalar{margin-block:1.5rem;padding:1rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie-2)}
.instalar h2{margin-top:0;font-size:1.05rem}
.codigo-error{color:var(--tinta-2);font-size:3rem;font-weight:700}
.texto-legal h1,.texto-legal h2,.texto-legal h3{margin-top:1.5rem}
.texto-legal ul,.texto-legal ol{padding-left:1.4rem}
/* --- Acceso, vinculacion de tablets y soporte --- */
.acceso{max-width:34rem;margin-inline:auto;padding-block:1.5rem 2rem}
.acceso-caja{margin-top:1rem;padding:clamp(1rem,3vw,1.75rem);border:1px solid var(--linea);border-radius:var(--radio-l);background:var(--superficie)}
.acceso-form{margin:1rem 0}
.acceso-separador{display:flex;align-items:center;gap:.75rem;margin:1rem 0;color:var(--tinta-2)}
.acceso-separador::before,.acceso-separador::after{content:"";flex:1;height:1px;background:var(--linea)}
.acceso-nota{margin-top:1rem;color:var(--tinta-2);font-size:.95rem}
.acceso-codigo{font-family:var(--fuente-datos);font-size:2rem;font-weight:700;letter-spacing:.35em;font-variant-numeric:tabular-nums}
.acceso-tabla{margin-top:.75rem}
.acceso-tabla caption{padding-bottom:.5rem;font-weight:600;text-align:left}
.lista-acciones{margin:.5rem 0;padding:0;list-style:none}
.lista-acciones li{padding:.35rem 0;border-bottom:1px solid var(--linea)}
.lista-acciones li:last-child{border-bottom:0}
[data-enlace-acceso] a{word-break:break-all}
/* --- Ayuda y novedades --- */
.documento-ayuda{max-width:72ch;margin-bottom:1.5rem}
.documento-ayuda h2{margin-top:1.75rem}
.documento-ayuda h3{margin-block:1.25rem .4rem;font-size:1.05rem}
.documento-ayuda code{padding:.1rem .3rem;border-radius:var(--radio-s);background:var(--superficie-2);font-size:.95em}
.documento-ayuda pre{padding:.75rem 1rem;border-radius:var(--radio-m);background:var(--superficie-2);overflow-x:auto}
.documento-ayuda pre code{padding:0;background:none}
.documento-ayuda blockquote{padding-left:1rem;border-left:4px solid var(--linea);color:var(--tinta-2)}
.documento-ayuda hr{margin-block:1.5rem;border:0;border-top:1px solid var(--linea)}
.lista-ayuda{max-width:72ch;margin:0 0 1.5rem;padding:0;list-style:none}
.lista-ayuda li{padding:.75rem 1rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.lista-ayuda li+li{margin-top:.5rem}
.lista-ayuda a{display:inline-block;min-height:44px;color:var(--accion);font-weight:600}
.lista-ayuda-resumen{display:block;margin-top:.2rem;color:var(--tinta-2);font-size:.95rem}
.indice-novedades{margin-bottom:1.5rem}
.indice-novedades ul{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;padding:0;list-style:none}
.indice-novedades a{display:inline-flex;align-items:center;min-height:44px;color:var(--accion)}
.bloque-novedades{padding-top:.5rem;border-top:1px solid var(--linea)}
/* --- Editor de menus --- */
.menu-encabezado{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.5rem}
.menu-encabezado h1{margin-bottom:0}
.menus-panel{padding:clamp(.75rem,2vw,1.25rem);border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.menus-panel>h2{margin-top:0}
.menus-dias{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:1rem}
.menus-dias button{min-height:44px;padding:.4rem .8rem;border:1px solid var(--linea-control);border-radius:var(--radio-boton);background:transparent;color:var(--tinta);font:inherit;cursor:pointer}
.menus-dias button[aria-pressed="true"]{border-color:var(--accion);background:var(--accion);color:var(--accion-tinta);font-weight:600}
.grupo-editor,.variante-editor,.paso-editor{margin-bottom:.75rem;padding:.75rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--fondo)}
.variante-editor{background:var(--superficie)}
.paso-editor{background:var(--superficie-2)}
.grupo-editor h3,.variante-editor h3,.paso-editor h4{margin-top:0;font-size:1rem}
.plato-fila{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem auto;align-items:center;gap:.35rem;margin-bottom:.4rem}
.plato-fila label{font-size:.85rem;font-weight:600}
.plato-fila .boton{padding:.25rem .6rem}
/* --- Resumen del dia --- */
.resumen-app{max-width:74rem;margin-inline:auto}
.resumen-cabecera{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.75rem 1.5rem;margin-bottom:1.25rem}
.resumen-titulo{grid-column:1/-1}
.resumen-sobrelinea{color:var(--tinta-2);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.resumen-cabecera h1,.resumen-cabecera .campo{margin-bottom:0}
.resumen-cabecera .campo{min-width:min(15rem,100%)}
.resumen-cabecera .acciones{align-self:end;margin-top:0}
.resumen-ayuda{grid-column:1/-1;color:var(--tinta-2);font-size:.9rem}
.resumen-bloque{margin-bottom:1.25rem;padding:1rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.resumen-bloque-cabecera{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;margin-bottom:.75rem}
.resumen-bloque-cabecera h2,.resumen-bloque>h2:first-child{margin-top:0}
.resumen-bloque h3{color:var(--tinta-2);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.resumen-cifra{font-family:var(--fuente-datos);font-weight:700;font-variant-numeric:tabular-nums}
.resumen-intro{max-width:65ch;margin-bottom:.75rem;color:var(--tinta-2)}
.resumen-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.resumen-datos>div{padding:.6rem .75rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--fondo)}
.resumen-datos dt{color:var(--tinta-2);font-size:.85rem;font-weight:600}
.resumen-datos dd{font-family:var(--fuente-datos);font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;font-variant-numeric:tabular-nums}
.resumen-datos .resumen-dato--destacado{border-color:var(--accion);background:color-mix(in srgb, var(--accion) 10%, var(--superficie))}
.resumen-columnas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:1rem}
.resumen-columnas--dos{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.resumen-nota{color:var(--tinta-2);font-size:.9rem}
/* --- Pantallas grandes y moviles --- */
@media (min-width:640px){
.lista-platos{grid-template-columns:repeat(2,minmax(0,1fr))}
.lista-filtro{grid-template-columns:repeat(2,minmax(0,1fr))}
.acciones-cesta{flex-direction:row;align-items:center}
.acciones-cesta .boton{width:auto}
}
@media (min-width:960px){
.contenedor-pedido form{display:grid;grid-template-columns:minmax(0,1fr) 22rem;align-items:start;gap:0 2rem}
.contenedor-pedido form>section,.contenedor-pedido form>.honeypot,.contenedor-pedido form>.acciones-pedido,.contenedor-pedido form>.nota{grid-column:1}
.contenedor-pedido form>.resumen-pedido{grid-column:2;grid-row:1/span 8;position:sticky;top:1rem;margin-top:0;padding:1rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.boton-cesta{display:flex;width:fit-content;min-width:24rem;margin-inline:auto}
}
@media (max-width:900px){
.panel-columnas{grid-template-columns:minmax(0,1fr)}
.pestanas{display:flex}
.panel-columnas.pestanas-activas>.columna{display:none}
.panel-columnas.pestanas-activas>.columna.visible{display:block}
.vistas-pedidos{position:sticky;top:0;z-index:5;background:var(--fondo)}
.dialogo-completo .dialogo-cuerpo{grid-template-columns:minmax(0,1fr)}
dialog.dialogo-completo{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
.dialogo-completo form{height:100dvh;max-height:100dvh}
.lista-articulos{max-height:34vh}
.resumen-cabecera,.resumen-datos,.resumen-columnas,.resumen-columnas--dos,.columnas-plantilla{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
.cocina-espera,.cocina-hora{margin-left:0}
.cocina-lista{grid-template-columns:minmax(0,1fr)}
}
}
@layer componentes{
/* --- Barra de la cesta --- */
body[data-pagina="carta"]{padding-bottom:6rem}
.barra-cesta{position:fixed;right:0;bottom:0;left:0;z-index:12;padding:.6rem max(1rem,calc((100% - 64rem)/2));background:var(--barra);color:var(--tinta);border-top:1px solid var(--linea)}
.plato-item{min-width:0}
.senal--pendiente{border-left-color:var(--atencion-tinta)}
/* --- Comprobante en pantalla (la impresion va en impresion.css) --- */
.comprobante-cuerpo{padding:1rem;background:var(--fondo);color:var(--tinta)}
.comprobante-cuerpo .comprobante{max-width:190mm;margin-inline:auto}
.comprobante-cabecera .comprobante-local{color:inherit;font-size:1.15rem;font-weight:700}
.comprobante-cabecera{margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--linea)}
.comprobante-cabecera h1{font-size:1.15rem;margin:.5rem 0 .2rem}
.comprobante-detalle{color:var(--tinta-2);font-size:.85rem}
.comprobante-iva,.comprobante-pago,.comprobante-totales{margin-top:.8rem}
.comprobante-iva h2,.comprobante-envases h2{margin:.4rem 0;font-size:1rem}
.comprobante-plastico{color:var(--tinta-2);font-size:.85rem}
.comprobante-totales{padding-top:.4rem;border-top:1px solid var(--linea)}
.comprobante-totales div{display:flex;justify-content:space-between;gap:1rem;padding:.1rem 0}
.comprobante-totales dd{font-family:var(--fuente-datos);white-space:nowrap}
.comprobante-total{margin-top:.25rem;padding-top:.25rem;border-top:1px solid var(--linea);font-size:1.15rem;font-weight:700}
}
@layer componentes{
/* --- Piezas nuevas de la F2b: inicial, alerta, cuando y acciones de seguimiento --- */
.logo-inicial{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--marca-suave);color:var(--tinta);font-family:var(--fuente-titulos);font-size:1.25rem;font-weight:800;line-height:1}
.marca .logo-inicial{width:48px;height:48px;font-size:1.5rem}
.pedido-alerta{display:inline-flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;margin-right:.3em;border-radius:50%;background:var(--aviso-tinta);color:var(--aviso-fondo);font-size:.9em;font-weight:700;line-height:1}
.pedido-cuando{color:var(--tinta-2);font-size:.95rem;font-weight:600}
.comprobante-importe{font-family:var(--fuente-datos);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.acciones-seguimiento{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-block:1rem}
/* --- Ajustes > Marca: tarjetas de estilo y muestras de color --- */
.estilos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1rem;margin-block:1rem}
.estilo-tarjeta{display:flex;flex-direction:column;gap:.35rem;padding:.75rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie);color:var(--tinta)}
.estilo-tarjeta:focus-visible,.estilo-tarjeta[aria-checked="true"],.estilo-tarjeta.en-uso{border-color:var(--accion);border-width:2px;background:color-mix(in srgb, var(--accion) 8%, var(--superficie))}
.estilo-tarjeta-miniatura{width:100%;aspect-ratio:3/2;border-radius:var(--radio-s);background:var(--superficie-2);object-fit:cover;object-position:top}
.estilo-tarjeta-nombre{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.25rem 0 0;font-size:1.05rem}
.estilo-tarjeta-frase,.estilo-tarjeta-modo{margin:0;color:var(--tinta-2);font-size:.9375rem}
.estilo-tarjeta-modo{margin-bottom:.25rem}
.estilo-tarjeta>.boton{margin-top:auto}
.muestra-color{width:24px;height:24px;vertical-align:middle}
.avisos-fotos{margin-block:.75rem}
/* --- Banda de vista previa --- */
.vista-previa-banda{margin:0;padding:.4rem 1rem;background:var(--atencion-fondo);color:var(--atencion-tinta);font-weight:700;text-align:center}
[data-vista-previa] :is(a,button):not([disabled]){opacity:1}
/* --- Dialogo de vista previa de los estilos --- */
.previsualizacion[open]{display:flex;flex-direction:column;overflow:hidden}
.previsualizacion .dialogo-cabecera{flex:none}
.previsualizacion-pestanas{display:flex;flex-wrap:wrap;gap:.25rem;margin:0;padding:.5rem 1rem 0;border-bottom:1px solid var(--linea)}
.previsualizacion-pestanas [role="tab"]{min-height:44px;padding:.4rem .9rem;border:1px solid transparent;border-bottom:3px solid transparent;border-radius:var(--radio-m) var(--radio-m) 0 0;background:transparent;color:var(--tinta);font:inherit;font-weight:600;cursor:pointer}
.previsualizacion-pestanas [role="tab"][aria-selected="true"]{border-color:var(--linea);border-bottom-color:var(--accion)}
.previsualizacion-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:1rem;min-height:0;padding:1rem;overflow:auto}
.previsualizacion-marco{border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--fondo);overflow:hidden}
.previsualizacion-marco iframe{display:block;border:0}
.previsualizacion-lado{min-width:0}
.previsualizacion-acciones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--linea);background:var(--fondo)}
/* --- Muestrario de componentes (solo en desarrollo) --- */
.muestrario{width:min(100% - 2rem,72rem);margin-inline:auto;padding-block:1rem 2rem}
.muestrario-cabecera{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1rem}
.muestrario-cabecera nav{display:flex;flex-wrap:wrap;gap:.35rem}
.muestrario-seccion{margin-block:1.5rem;padding:1rem;border:1px solid var(--linea);border-radius:var(--radio-m);background:var(--superficie)}
.muestrario-seccion>h2{margin-top:0}
@media (max-width:900px){
.previsualizacion-cuerpo{grid-template-columns:minmax(0,1fr)}
}
}



.previsualizacion-marco{position:relative;min-height:min(62vh,520px)}
.previsualizacion-marco iframe{position:absolute;inset:0;width:100%;height:100%}
.previsualizacion-marco iframe[data-pantalla="carta"]{left:50%;width:min(390px,100%);transform:translateX(-50%)}
.previsualizacion-marco iframe[data-pantalla="panel"],
.previsualizacion-marco iframe[data-pantalla="cocina"]{inset:auto;top:0;left:0;width:1280px;max-width:none;height:800px;transform:scale(.5);transform-origin:top left}
@media (max-width:700px){.previsualizacion-marco iframe:not([data-pantalla="carta"]){transform:scale(.25)}}
@media (min-width: 90rem){.previsualizacion-marco iframe[data-pantalla="panel"],.previsualizacion-marco iframe[data-pantalla="cocina"]{transform:scale(.62)}}