/* ===========================================================================
   KORI — sistema de diseño
   Paleta tomada del logo: rojo #BB291B y amarillo #ECBC49.
   Tipografía: Outfit para títulos y cifras (geométrica y pesada, como el
   wordmark), Inter para texto y tablas (números tabulares que alinean).
   Pensado para tablet a pleno sol: contraste alto y botones grandes.
   =========================================================================== */

:root{
  /* Tipografía */
  --fuente-titulo:'Outfit','Trebuchet MS',system-ui,sans-serif;
  --fuente-texto:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Marca */
  --rojo:#bb291b;
  --rojo-hondo:#9c2013;
  --rojo-claro:#d9432f;
  --rojo-suave:#fbeae7;
  --amarillo:#ecbc49;
  --amarillo-hondo:#d2a036;
  --amarillo-suave:#fdf3dd;

  /* Superficies e tinta */
  --negro:#1c1714;
  --tinta:#1c1714;
  --tinta-media:#5d554b;
  --apagado:#8a8073;
  --papel:#faf6f0;
  --papel-hondo:#f2ebe0;
  --blanco:#ffffff;
  --linea:#ebe3d6;
  --linea-fuerte:#dbd1c0;

  /* Estados */
  --verde:#12805c;
  --verde-suave:#e4f4ed;
  --azul:#2f5fd0;
  --azul-suave:#eef2fc;

  /* Forma */
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --sombra-1:0 1px 2px rgba(28,23,20,.05), 0 2px 6px rgba(28,23,20,.05);
  --sombra-2:0 2px 4px rgba(28,23,20,.04), 0 16px 32px -12px rgba(28,23,20,.16);
  --anillo:0 0 0 3px rgba(236,188,73,.45);
}

*{box-sizing:border-box}
/* Sin esto, una regla como .pos{display:grid} le gana al atributo hidden. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:var(--fuente-texto);
  background:var(--papel);
  color:var(--tinta);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  font-feature-settings:'cv05' 1;
}
a{color:var(--rojo);text-underline-offset:2px}
a:hover{color:var(--rojo-hondo)}

h1,h2,.cifra,.marca,.total b{font-family:var(--fuente-titulo)}
h1{font-size:1.9rem;font-weight:700;letter-spacing:-.025em;margin:0 0 .5rem;line-height:1.15}
h2{font-size:1.3rem;font-weight:700;letter-spacing:-.015em;margin:2rem 0 .7rem;line-height:1.2}
h3{
  font-family:var(--fuente-texto);font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--apagado);
  margin:1.4rem 0 .5rem;
}
p{margin:.5rem 0}
code{background:var(--papel-hondo);padding:.12em .4em;border-radius:6px;font-size:.88em;
     font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- Cabecera ----------
   Fondo claro a propósito: el rojo del logo sobre negro cae a 3:1 y se apaga;
   sobre blanco da 6:1 y se ve como en el empaque. La cinta de abajo es la
   única licencia decorativa: dos colores de marca en 3 píxeles. */
.barra{
  background:var(--blanco);
  display:flex;align-items:center;gap:.15rem;
  padding:.55rem .9rem;position:sticky;top:0;z-index:30;flex-wrap:wrap;
  border-bottom:1px solid var(--linea);
  box-shadow:0 1px 0 rgba(28,23,20,.02), 0 6px 16px -12px rgba(28,23,20,.3);
}
.barra::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,var(--rojo) 0 38%,var(--amarillo) 38% 100%);
}
.barra .marca{display:flex;align-items:center;margin-right:.9rem}
.barra .marca img{height:24px;width:auto;display:block}
.barra a{
  color:var(--tinta-media);text-decoration:none;padding:.5rem .8rem;
  border-radius:var(--r-s);font-size:.92rem;white-space:nowrap;font-weight:600;
  transition:background .12s ease,color .12s ease;
}
.barra a:hover{background:var(--papel-hondo);color:var(--tinta)}
.barra a.activo{background:var(--rojo);color:#fff;box-shadow:0 2px 8px -2px rgba(187,41,27,.5)}
.barra .derecha{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.barra .quien{color:var(--apagado);font-size:.82rem;font-weight:500}
.barra .derecha a{font-weight:500;color:var(--apagado);padding:.4rem .6rem}

/* ---------- Contenedores ---------- */
.contenido{max-width:1120px;margin:0 auto;padding:1.6rem 1.1rem 5rem}
.contenido.ancho{max-width:1340px}
.centrado{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.2rem;
          background:radial-gradient(1200px 600px at 50% -10%, #fff 0%, var(--papel) 60%)}
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-m);padding:1.3rem;box-shadow:var(--sombra-1);
}
.ancho-medio{max-width:430px;width:100%;padding:0;overflow:hidden;box-shadow:var(--sombra-2)}
/* Solo los hijos directos llevan el margen lateral: lo que va dentro del
   formulario ya queda alineado con él. */
.ancho-medio > .formulario,.ancho-medio > h1,.ancho-medio > p,
.ancho-medio > .alerta,.ancho-medio > .separador,
.ancho-medio > .lista-simple,.ancho-medio > .importante,
.ancho-medio > .boton{margin-left:1.6rem;margin-right:1.6rem}
.ancho-medio > h1{margin-top:1.5rem;font-size:1.5rem}
.ancho-medio > *:last-child{margin-bottom:1.6rem}
.rejilla{display:grid;gap:1rem}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.fila{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.fila.fin{justify-content:flex-end}
.separador{height:1px;background:var(--linea);margin:1.2rem 0}

/* ---------- Indicadores ---------- */
.dato{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:1rem 1.15rem;box-shadow:var(--sombra-1);position:relative;overflow:hidden;
}
.dato .rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
              color:var(--apagado);font-weight:700}
.dato .cifra{font-size:2rem;font-weight:700;letter-spacing:-.03em;margin-top:.25rem;
             line-height:1.05;font-variant-numeric:tabular-nums}
.dato .pie{font-size:.82rem;color:var(--apagado);margin-top:.25rem}
.dato.destacado{
  background:linear-gradient(150deg,var(--rojo-claro) 0%,var(--rojo) 45%,var(--rojo-hondo) 100%);
  color:#fff;border-color:transparent;box-shadow:0 10px 26px -12px rgba(187,41,27,.75);
}
.dato.destacado .rotulo{color:#f7cfc9}
.dato.destacado .pie{color:#f2c3bc}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:1px solid var(--linea-fuerte);background:var(--blanco);color:var(--tinta);
  padding:.72rem 1.15rem;border-radius:12px;font-size:.98rem;font-weight:600;
  font-family:var(--fuente-texto);cursor:pointer;text-decoration:none;min-height:48px;
  transition:transform .06s ease,box-shadow .15s ease,background .15s ease;
  box-shadow:var(--sombra-1);
}
.boton:hover{background:var(--papel)}
.boton:active{transform:translateY(1px);box-shadow:none}
.boton:focus-visible{outline:none;box-shadow:var(--anillo)}
.boton.principal{
  background:linear-gradient(180deg,#f2c65c 0%,var(--amarillo) 55%,#e3b03c 100%);
  border-color:var(--amarillo-hondo);color:var(--negro);
  box-shadow:0 1px 2px rgba(28,23,20,.08), 0 8px 18px -10px rgba(210,160,54,.9);
}
.boton.principal:hover{background:linear-gradient(180deg,#f5cd6c 0%,#eec152 55%,#e0ad38 100%)}
.boton.oscuro{background:var(--negro);border-color:var(--negro);color:#fff}
.boton.oscuro:hover{background:#2c2521}
.boton.peligro{background:#fff;border-color:#e7b8b1;color:var(--rojo-hondo)}
.boton.peligro:hover{background:var(--rojo-suave)}
.boton.fantasma{background:transparent;border-color:transparent;box-shadow:none;color:var(--tinta-media)}
.boton.fantasma:hover{background:var(--papel-hondo)}
.boton.ancho-total{width:100%}
.boton.chico{padding:.4rem .7rem;min-height:36px;font-size:.85rem;border-radius:9px}
.boton:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- Formularios ---------- */
.formulario{display:grid;gap:1rem}
label{display:block;font-weight:600;font-size:.9rem;color:var(--tinta)}
label small{display:block;font-weight:400;color:var(--apagado);margin-top:.25rem;line-height:1.45}
input[type=text],input[type=password],input[type=number],input[type=email],
input[type=date],input[type=time],input[type=tel],select,textarea{
  width:100%;padding:.7rem .8rem;margin-top:.35rem;
  border:1px solid var(--linea-fuerte);border-radius:11px;background:var(--blanco);
  font:inherit;font-size:1rem;color:var(--tinta);min-height:46px;
  transition:border-color .12s ease,box-shadow .12s ease;
}
input::placeholder,textarea::placeholder{color:#b3a99a}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amarillo-hondo);box-shadow:var(--anillo)}
input[type=number]{font-variant-numeric:tabular-nums}
textarea{min-height:84px;line-height:1.5}
.casilla{display:flex;gap:.65rem;align-items:flex-start;font-weight:400}
.casilla input{margin-top:.2rem;width:20px;height:20px;flex:0 0 auto;accent-color:var(--rojo)}
.casilla span{font-size:.9rem;color:var(--tinta-media);line-height:1.5}

/* ---------- Tablas ---------- */
.tabla-caja{
  overflow-x:auto;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-m);box-shadow:var(--sombra-1);
}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:.72rem .85rem;text-align:left;border-bottom:1px solid var(--linea);white-space:nowrap}
thead th{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--apagado);
  font-weight:700;background:var(--papel);border-bottom:1px solid var(--linea-fuerte);
  position:sticky;top:0;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s ease}
tbody tr:hover{background:var(--papel)}
td strong{font-weight:600}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tenue{color:var(--apagado)}

/* ---------- Barras de datos ---------- */
.barra-dato{background:var(--papel-hondo);border-radius:6px;height:10px;overflow:hidden;min-width:70px}
.barra-dato i{display:block;height:100%;background:var(--negro);border-radius:6px;
              transition:width .4s cubic-bezier(.2,.7,.3,1)}
.barra-dato.acento i{background:linear-gradient(90deg,var(--amarillo) 0%,var(--amarillo-hondo) 100%)}
.barra-dato.baja i{background:#cbc2b2}

/* ---------- Avisos ---------- */
.alerta{padding:.85rem 1rem;border-radius:12px;margin:.7rem 0;font-size:.92rem;
        border:1px solid;line-height:1.5}
.alerta.ok{background:var(--verde-suave);border-color:#bfe3d5;color:#0c5c43}
.alerta.error{background:var(--rojo-suave);border-color:#f0c6c0;color:var(--rojo-hondo)}
.alerta.aviso{background:var(--amarillo-suave);border-color:#f0dcab;color:#7a5807}
.alerta.info{background:var(--azul-suave);border-color:#ccd8f4;color:#274193}
.importante{background:var(--amarillo-suave);border-left:4px solid var(--amarillo-hondo);
            padding:.85rem 1rem;border-radius:0 12px 12px 0;font-size:.92rem}
.etiqueta{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.7rem;
          font-weight:700;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle}
.etiqueta.verde{background:var(--verde-suave);color:var(--verde)}
.etiqueta.amarilla{background:var(--amarillo-suave);color:#7a5807}
.etiqueta.roja{background:var(--rojo-suave);color:var(--rojo-hondo)}
.etiqueta.gris{background:var(--papel-hondo);color:var(--apagado)}
.lista-simple{padding-left:1.2rem;font-size:.92rem;color:var(--tinta-media)}
.lista-simple li{margin:.2rem 0}
.apagado{color:var(--apagado);font-size:.92rem}

/* ---------- Marca en pantallas de entrada ----------
   Banda roja a sangre dentro de la tarjeta: es el momento de marca más
   fuerte del sistema y lo primero que ve el operario cada mañana. */
.marca-grande{
  background:linear-gradient(150deg,var(--rojo-claro) 0%,var(--rojo) 50%,var(--rojo-hondo) 100%);
  margin:0 0 1.4rem;padding:1.7rem 1.6rem 1.5rem;
}
.marca-grande img{height:38px;width:auto;display:block}

/* ---------- El tablero de cuentas abiertas ----------
   Tarjetas grandes, porque esto se toca con el dedo en la calle y a veces
   con guante. El tiempo de espera va en grande y cambia de color: a los
   veinte minutos deja de ser un dato y pasa a ser un aviso. */
.tablero{max-width:1340px;margin:0 auto;padding:1rem}
.tablero-cab{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.tablero-cab h1{margin:0;font-size:1.5rem}
.tablero-cab p{margin:.15rem 0 0}
.tablero-cab .boton.grande{margin-left:auto;font-size:1.05rem;padding:.9rem 1.6rem}
.tablero-tarjetas{display:grid;gap:.8rem;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cta-tarjeta{
  background:var(--blanco);border:1.5px solid var(--linea);border-radius:var(--r-m);
  padding:.9rem 1rem;text-align:left;cursor:pointer;display:flex;flex-direction:column;
  gap:.45rem;box-shadow:var(--sombra-1);font:inherit;color:inherit;width:100%;
}
.cta-tarjeta:hover{border-color:var(--amarillo)}
.cta-tarjeta .cta-arriba{display:flex;align-items:baseline;gap:.5rem}
.cta-tarjeta .cta-nombre{font-weight:800;font-size:1.1rem;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-tarjeta .cta-portal{flex:none;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:#EDE4FA;color:#5B3A9E;border-radius:999px;padding:3px 8px}
.cta-tarjeta .cta-que{font-size:.88rem;color:var(--gris);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cta-tarjeta .cta-abajo{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  margin-top:.1rem}
.cta-tarjeta .cta-plata{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.cta-tarjeta .cta-rato{font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gris)}
.cta-tarjeta.tibia{border-color:var(--amarillo)}
.cta-tarjeta.tibia .cta-rato{color:#8a6d1f}
.cta-tarjeta.caliente{border-color:var(--rojo)}
.cta-tarjeta.caliente .cta-rato{color:var(--rojo)}
.cta-tarjeta .cta-abonado{font-size:.8rem;color:#1F7A3A;font-weight:700}
.tablero-vacio{background:var(--blanco);border:1px dashed var(--linea);border-radius:var(--r-m);
  padding:2rem 1rem;text-align:center}
.tablero-vacio p{margin:.2rem 0}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1fr 360px;gap:1rem;max-width:1340px;margin:0 auto;padding:1rem}
@media (max-width:880px){.pos{grid-template-columns:1fr}}
.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;align-content:start}
.producto{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:.95rem .9rem;text-align:left;cursor:pointer;min-height:104px;
  display:flex;flex-direction:column;justify-content:space-between;font:inherit;
  box-shadow:var(--sombra-1);transition:transform .06s ease,box-shadow .15s ease,border-color .15s ease;
}
.producto:hover{border-color:var(--amarillo-hondo);box-shadow:var(--sombra-2)}
.producto:active{transform:translateY(1px);background:var(--amarillo-suave)}
.producto .cat{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--apagado);font-weight:700}
.producto .nom{display:block;font-family:var(--fuente-titulo);font-weight:600;font-size:1.05rem;line-height:1.2;margin-top:.2rem}
.producto .pre{display:block;color:var(--tinta-media);font-size:.95rem;margin-top:.5rem;
               font-variant-numeric:tabular-nums;font-weight:600}
.producto .texto{display:block}
/* Foto del producto: ayuda a que el operario acierte de un vistazo. */
.producto .foto{
  display:block;width:100%;height:84px;border-radius:10px;margin-bottom:.6rem;
  background:var(--papel-hondo) center/cover no-repeat;
}

/* Agotado: cocina lo marcó y ya no se puede vender. Se deja a la vista,
   tachado, porque esconderlo haría creer que se borró del catálogo. */
.producto.agotado{opacity:.45;filter:grayscale(1)}
.producto.agotado .nom{text-decoration:line-through}
.producto.agotado::after{
  content:'hoy no hay';position:absolute;top:.4rem;right:.4rem;
  background:var(--rojo);color:#fff;font-size:.6rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:.15rem .4rem;border-radius:999px;
}
.producto{position:relative}

/* Renglones de una cuenta abierta: se tocan para marcar quién paga qué.
   Un plato ya pagado se tacha y deja de ser botón — con un grupo de diez,
   el error que de verdad pasa es que dos paguen el mismo plato. */
.linea-cuenta{
  display:flex;width:100%;gap:.7rem;align-items:center;justify-content:space-between;
  background:var(--papel);border:2px solid var(--linea);border-radius:12px;
  padding:.7rem .85rem;margin-bottom:.4rem;font:inherit;color:inherit;text-align:left;
}
.linea-cuenta i{font-style:normal;color:var(--apagado);font-size:.82rem}
.linea-cuenta.marcada{border-color:var(--rojo);background:var(--amarillo-suave);font-weight:700}
.linea-cuenta.pagada{opacity:.5;border-style:dashed}
.linea-cuenta.pagada span:first-child{text-decoration:line-through}

/* ¿Acá o para llevar?, en la tableta. Dos botones del tamaño de un dedo
   con guante: en hora pico esto se toca sin mirar. */
.donde-pos{display:flex;gap:.4rem;margin:.5rem 0 .2rem;flex-wrap:wrap}
.donde-pos .dp{
  flex:1 1 0;min-height:46px;border:2px solid var(--linea);background:var(--papel);
  border-radius:12px;font:inherit;font-weight:700;color:var(--tinta-media);cursor:pointer;
}
.donde-pos .dp.activo{background:var(--amarillo-suave);border-color:var(--rojo);color:var(--tinta)}
#btn-salsas{flex:0 0 auto;min-height:46px}
#btn-salsas.puestas{background:var(--amarillo-suave);border-color:var(--amarillo-hondo);font-weight:700}

/* La marca de las salsas, arriba de su ventana. */
.salsas-cab{display:flex;justify-content:center;padding:.1rem 0 .7rem}
.salsas-cab img{max-width:240px;width:100%;height:auto;display:block}

/* ---------- Ventanas emergentes del POS ---------- */
.ventana-fondo{
  position:fixed;inset:0;background:rgba(28,23,20,.55);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:1rem;
  backdrop-filter:blur(2px);
}
.ventana-caja{max-width:430px;width:100%;max-height:88vh;overflow-y:auto}
.ventana-caja h2{margin-top:0}
.pin-visor{
  font-family:var(--fuente-titulo);font-size:2.4rem;letter-spacing:.5rem;
  text-align:center;padding:.6rem 0;color:var(--tinta);
}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.teclado .boton{min-height:62px;font-size:1.4rem;font-weight:600}

.cuenta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-m);
  display:flex;flex-direction:column;position:sticky;top:4.6rem;max-height:calc(100vh - 5.6rem);
  box-shadow:var(--sombra-2);overflow:hidden;
}
.cuenta .lineas{overflow-y:auto;padding:.6rem;flex:1;min-height:130px}
.cuenta-pedido{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--amarillo-suave);border:1px solid #f0dcab;border-radius:10px;
  padding:.5rem .6rem;margin-bottom:.5rem;font-size:.92rem;
}
.linea{display:flex;align-items:center;gap:.5rem;padding:.5rem .35rem;border-bottom:1px solid var(--linea)}
.linea:last-child{border-bottom:none}
.linea .n{flex:1;font-size:.95rem;font-weight:500}
.linea .cant{display:flex;align-items:center;gap:.35rem}
.linea .cant b{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.linea button{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--linea-fuerte);
  background:var(--blanco);font-size:1.15rem;cursor:pointer;line-height:1;color:var(--tinta);
}
.linea button:active{background:var(--papel-hondo)}
.linea .valor{width:82px;text-align:right;font-variant-numeric:tabular-nums;font-size:.93rem;font-weight:600}
.cuenta .total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:.85rem 1rem;background:var(--papel);border-top:1px solid var(--linea-fuerte);
}
.cuenta .total span{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;
                    color:var(--apagado);font-weight:700}
.cuenta .total b{font-size:1.85rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-weight:700}
/* Elector de opciones: un grupo por fila, botones grandes. Lo usan la
   tableta y el menú del cliente, a propósito: lo que el cliente elige en
   el sitio y lo que el operario elige en la ventanilla se escriben igual,
   así cocina lee siempre lo mismo. */
.opciones-elector{display:grid;gap:.9rem;text-align:left}
.opciones-elector .rotulo{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--apagado);margin-bottom:.4rem}
.opciones-elector .rotulo small{text-transform:none;letter-spacing:0;font-weight:500}
.opciones-elector .valores{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.45rem}
.opciones-elector .valor{min-height:52px;font-size:.95rem;line-height:1.2}
.opciones-elector .valor small{display:block;font-size:.76rem;opacity:.85}

/* Las opciones elegidas, bajo el nombre del producto en la cuenta. */
.linea .n small.opciones{display:block;font-size:.76rem;color:var(--apagado);
  font-weight:500;line-height:1.3;margin-top:.1rem}

/* Nombre del cliente: va a la pantalla de cocina para poder llamarlo. */
.campo-nombre{display:block;padding:.6rem .7rem 0;margin:0}
.campo-nombre input{
  width:100%; padding:.6rem .75rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--linea-fuerte); border-radius:10px; background:var(--papel);
  color:var(--tinta);
}
.campo-nombre input:focus{outline:2px solid var(--amarillo);outline-offset:1px;background:var(--blanco)}
.campo-nombre input::placeholder{color:var(--apagado)}

.pagos{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.7rem}
.pagos .boton{min-height:56px;font-size:.98rem}
.vacia{color:var(--apagado);text-align:center;padding:2rem .8rem;font-size:.92rem}

.estado-pos{
  display:flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:600;
  padding:.4rem .8rem;border-radius:999px;background:var(--papel);
  border:1px solid var(--linea);color:var(--tinta)
}
.punto-luz{width:9px;height:9px;border-radius:50%;background:var(--verde);flex:0 0 auto;
           box-shadow:0 0 0 3px rgba(18,128,92,.15)}
.punto-luz.gris{background:#a09889;box-shadow:0 0 0 3px rgba(160,152,137,.15)}
.punto-luz.rojo{background:var(--rojo);box-shadow:0 0 0 3px rgba(187,41,27,.15)}

.aviso-flotante{
  position:fixed;left:50%;transform:translateX(-50%);bottom:1.4rem;
  background:var(--negro);color:#fff;padding:.8rem 1.3rem;border-radius:999px;
  font-size:.95rem;font-weight:500;z-index:60;box-shadow:var(--sombra-2);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.aviso-flotante.visible{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ---------- Página pública de pedidos ---------- */
.publico{max-width:540px;margin:0 auto;padding:1.1rem 1rem 3.5rem}
.hero{
  background:linear-gradient(150deg,var(--rojo-claro) 0%,var(--rojo) 48%,var(--rojo-hondo) 100%);
  color:#fff;border-radius:var(--r-l);padding:1.7rem 1.5rem;margin-bottom:1.1rem;
  box-shadow:0 14px 34px -16px rgba(187,41,27,.8);
}
.hero .marca img{height:44px;width:auto;display:block;margin-bottom:.6rem}
.hero h1{color:#fff;font-size:1.65rem;margin:0;letter-spacing:-.02em}
.hero p{margin:.45rem 0 0;color:#f8ddd9;font-size:.97rem;line-height:1.5}
.hero strong{color:#fff;font-weight:700}
.foto-menu{width:62px;height:62px;border-radius:12px;object-fit:cover;flex:0 0 auto;
           background:var(--papel-hondo);border:1px solid var(--linea)}

/* ---------- Barra y pie del sitio del cliente ---------- */
.publico-cuerpo{padding-bottom:0}
.publico-cuerpo.con-barra{padding-bottom:92px}
.barra-publica{
  background:var(--blanco);border-bottom:1px solid var(--linea);
  display:flex;align-items:center;padding:.6rem 1rem;position:sticky;top:0;z-index:30;
}
.barra-publica .marca img{height:22px;width:auto;display:block}
.barra-publica .derecha{margin-left:auto}
.pie-publico{
  display:flex;gap:1.2rem;justify-content:center;align-items:center;
  padding:1.6rem 1rem 2.4rem;color:var(--apagado);font-size:.86rem;
}
.pie-publico span{font-weight:700;letter-spacing:.12em;color:var(--tinta)}
.pie-publico a{color:var(--apagado);text-decoration:none}
.pie-publico a:hover{color:var(--rojo)}

/* ---------- Líneas del menú ---------- */
.producto-menu{
  display:flex;align-items:center;gap:.85rem;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r-m);padding:.7rem;
  margin-bottom:.6rem;box-shadow:var(--sombra-1);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.producto-menu.elegido{border-color:var(--amarillo-hondo);box-shadow:0 6px 18px -10px rgba(210,160,54,.9)}
.producto-menu .foto{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:0 0 auto;
                     background:var(--papel-hondo);display:block}
.producto-menu .foto.sin-foto{background:var(--papel-hondo)}
.producto-menu .info{flex:1;min-width:0}
.producto-menu .info strong{font-family:var(--fuente-titulo);font-size:1.05rem;font-weight:600}
.contador{display:flex;align-items:center;gap:.3rem;flex:0 0 auto}
.contador button{
  width:40px;height:40px;border-radius:11px;border:1px solid var(--linea-fuerte);
  background:var(--blanco);font-size:1.25rem;line-height:1;cursor:pointer;color:var(--tinta);
}
.contador button:active{background:var(--amarillo-suave)}
.contador input{
  width:46px;text-align:center;margin:0;padding:.4rem 0;min-height:40px;
  font-variant-numeric:tabular-nums;font-weight:700;
  -moz-appearance:textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.contador .cant{
  min-width:34px;text-align:center;font-weight:700;
  font-variant-numeric:tabular-nums;font-size:1.05rem;
}

.producto-menu .info .descripcion,
.producto-menu .info .a-elegir{font-size:.78rem;line-height:1.35;margin-top:.1rem}
/* Lo que hay que elegir se anuncia antes de tocar: así nadie se sorprende
   cuando le sale la ventana del relleno. */
.producto-menu .info .a-elegir{color:var(--rojo);font-weight:600}
.promo-pista{display:inline-block;margin-left:.4rem;font-size:.74rem;color:var(--rojo);font-weight:600}
.producto-menu .boton.agregar{flex:0 0 auto;min-height:42px;padding:.5rem .9rem;font-weight:600}

/* ---------- Renglones del pedido del cliente ---------- */
/* Un renglón por combinación: «Combo Kori · takis · queso» y
   «Combo Kori · papa · pollo» son dos, no «2× Combo Kori». */
.linea-pedido{
  display:flex;align-items:center;gap:.7rem;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r-m);
  padding:.6rem .7rem;margin-bottom:.5rem;
}
.linea-pedido .que{flex:1;min-width:0}
.linea-pedido .que strong{font-family:var(--fuente-titulo);font-size:1rem;font-weight:600}
.linea-pedido .opc{font-size:.8rem;color:var(--rojo);font-weight:600;line-height:1.3}
.linea-pedido .apagado{font-size:.76rem}
.linea-pedido .plata{
  flex:0 0 auto;min-width:76px;text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums;
}
@media (max-width:430px){
  .linea-pedido{flex-wrap:wrap}
  .linea-pedido .que{flex:1 0 100%}
  .linea-pedido .plata{flex:1;text-align:right}
}

/* Barra fija con el total: siempre visible mientras se arma el pedido. */
.barra-total{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--blanco);border-top:1px solid var(--linea);
  box-shadow:0 -6px 24px -12px rgba(28,23,20,.35);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1rem;padding-bottom:calc(.8rem + env(safe-area-inset-bottom));
}
.barra-total strong{font-family:var(--fuente-titulo);font-size:1.5rem;letter-spacing:-.02em;
                    font-variant-numeric:tabular-nums;display:block}
.barra-total .boton{min-width:190px}
@media (max-width:420px){.barra-total .boton{min-width:150px}}

.codigo-grande{
  font-family:var(--fuente-titulo);font-size:2.8rem;font-weight:700;
  letter-spacing:.08em;margin:.5rem 0;color:var(--rojo);
}

/* ---------- Sellos ---------- */
.tarjeta-sellos{text-align:center}
.sellos{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:1rem}
.sello{
  width:26px;height:26px;border-radius:50%;
  border:2px dashed var(--linea-fuerte);background:var(--papel);
}
.sello.lleno{
  border:2px solid var(--amarillo-hondo);
  background:radial-gradient(circle at 35% 30%, #f5d689, var(--amarillo) 60%, var(--amarillo-hondo));
}

.opcion-ventana{display:flex;gap:.55rem;flex-wrap:wrap}
.opcion-ventana label{
  flex:1 1 45%;border:1px solid var(--linea-fuerte);border-radius:12px;padding:.7rem .5rem;
  background:var(--blanco);cursor:pointer;font-weight:600;font-size:.9rem;text-align:center;
  transition:border-color .12s ease,background .12s ease;
}
.opcion-ventana label:hover{border-color:var(--amarillo-hondo)}
.opcion-ventana input{position:absolute;opacity:0;width:0;height:0}
.opcion-ventana label:has(input:checked){
  border-color:var(--negro);background:var(--amarillo);
  box-shadow:0 6px 16px -8px rgba(210,160,54,.9);
}
.opcion-ventana label.agotada{opacity:.4;cursor:not-allowed}

@media (max-width:520px){
  h1{font-size:1.6rem}
  .contenido{padding:1.2rem .9rem 4rem}
  .dato .cifra{font-size:1.7rem}
}

@media print{
  .barra,.no-imprimir{display:none}
  body{background:#fff}
  .tarjeta,.tabla-caja{box-shadow:none;border:1px solid #ccc}
}