/* =========================================================================
   Restó360 · Sumaq — sistema visual de los mockups
   Diseñado por Operaria

   CÓMO LEER ESTA HOJA

   1. Los tokens son los de las landings vivas de Sumaq (producto/menu-v2.css
      y sitio/sumaq-v1.css). Están copiados verbatim y no se tocan: el sistema
      de sala tiene que leerse como el mismo local que la carta, no como un
      primo lejano.
   2. Lo único que esta hoja AGREGA al mundo son dos valores de semáforo
      (--verde y --ambar) que la landing no necesitaba porque no tiene relojes.
      Viven solo en el semáforo del SLA y en ningún fondo de mundo.
   3. El tamaño manda por CONTENEDOR, no por ventana. `.lienzo` declara
      `container-type:inline-size` y cada layout se decide con @container. Por
      eso la misma pantalla se aguanta a 390 y a 1440 de verdad: el conmutador
      Escritorio/Celular solo cambia el ancho del lienzo, y el layout responde
      igual que si arrastraras el borde del navegador.
   4. Estado base = móvil resuelto. Si @container no existiera, queda la
      columna única legible, que es el estado que no se negocia.
   ========================================================================= */

:root{
  /* --- Suelo, verbatim de las landings --- */
  --navy:#0A1428;
  --navy-2:#132649;
  --navy-3:#0d1b34;
  --navy-cocina:#0F2140;
  --navy-4:#152C50;
  --navy-5:#173452;
  --navy-6:#1A3F59;
  --crema:#EDEAE3;

  --teal:#349891;
  --teal-cl:#7BC4BC;
  --tinta:#08211F;

  /* Irrupción. Alertas, SLA vencido, acción destacada. Nunca fondo de mundo. */
  --brasa:#ED5E22;
  /* Alérgeno "contiene". */
  --rosa:#EDC9C0;

  --display:'Cormorant Garamond',Georgia,serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;

  --curva:cubic-bezier(.16,1,.3,1);

  /* --- Derivados propios del sistema de sala --- */
  /* Semáforo del SLA. El verde es el teal de la casa; el ámbar es el único
     color nuevo, y existe porque un semáforo de dos luces no es un semáforo. */
  --verde:var(--teal);
  --ambar:#E0A649;

  --linea:rgba(237,234,227,.13);
  --linea-fuerte:rgba(237,234,227,.24);
  --tenue:rgba(237,234,227,.58);
  --tenue-2:rgba(237,234,227,.40);

  /* Estados de mesa. Cada uno es un peldaño del mismo eje navy→teal, salvo
     la cuenta (brasa: es plata esperando) y la atención (brasa plena). */
  --e-libre:rgba(237,234,227,.28);
  --e-sentada:var(--teal-cl);
  --e-pidiendo:var(--navy-6);
  --e-comiendo:var(--teal);
  --e-cuenta:var(--brasa);
  --e-pagando:var(--ambar);
  --e-limpieza:rgba(237,234,227,.20);

  --r:16px;      /* radio de tarjeta */
  --r-g:22px;    /* radio grande */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--navy);scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--navy);
  color:var(--crema);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
button[disabled]{cursor:default}
a{color:var(--teal-cl);text-decoration:none;transition:color .2s}
a:hover{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal-cl);outline-offset:3px;border-radius:4px}
ul{list-style:none}

/* ---------- una sola voz por papel ---------- */

.rotulo{
  font-family:var(--mono);font-weight:400;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tenue);
}
.rotulo--teal{color:var(--teal-cl)}
.rotulo--brasa{color:var(--brasa)}

.titulo{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,4.4cqi,2.5rem);line-height:1.04;letter-spacing:-.01em}
.subtitulo{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2.8cqi,1.6rem);line-height:1.1}
.prosa{font-size:14px;line-height:1.62;color:rgba(237,234,227,.78);max-width:62ch}
.cifra{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* =========================================================================
   EL CHASIS DEL MOCKUP
   La barra de arriba no es parte del producto: es el marco que dice qué
   estás mirando y con qué ancho. Se distingue del producto a propósito.
   ========================================================================= */

.chrome{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;
  padding:10px clamp(12px,3vw,24px);
  background:rgba(8,16,32,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--linea);
}
.chrome__marca{
  display:flex;align-items:baseline;gap:8px;flex:none;
  font-family:var(--display);font-size:19px;line-height:1;
}
.chrome__marca span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue)}
.chrome__nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1 1 100%;min-width:0;order:3}
.chrome__nav::-webkit-scrollbar{display:none}
.chrome__nav a{
  flex:none;padding:7px 12px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);border:1px solid transparent;white-space:nowrap;
}
.chrome__nav a:hover{color:var(--crema);border-color:var(--linea)}
.chrome__nav a[aria-current="page"]{color:var(--crema);border-color:rgba(52,152,145,.6);background:rgba(52,152,145,.16)}
.chrome__der{display:flex;align-items:center;gap:12px;flex:1 1 auto;margin-left:auto;justify-content:flex-end}
/* En un teléfono la barra de mockup ya no cabe en una línea: el conmutador y
   el rótulo bajan a su propia fila completa en vez de salirse de la pantalla
   por la derecha, que es donde se perdía el rótulo. */
@media (max-width:780px){
  .chrome__der{margin-left:0;width:100%;justify-content:space-between;gap:8px}
  /* El rótulo deja de ser intocable y se deja envolver: con nowrap no podía
     encogerse y se salía por el borde derecho justo en el ancho donde más
     importa que se lea que esto es un mockup. */
  .sello-mockup{font-size:9px;letter-spacing:.1em;white-space:normal;text-align:center;flex:0 1 auto;min-width:0}
}

.vistas{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--linea);background:rgba(19,38,73,.6)}
.vistas button{
  padding:6px 13px;border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);transition:background .18s,color .18s;
}
.vistas button[aria-pressed="true"]{background:var(--teal);color:var(--tinta)}

.sello-mockup{
  flex:none;padding:5px 11px;border-radius:999px;
  border:1px dashed rgba(237,234,227,.3);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue-2);white-space:nowrap;
}

/* ---------- el lienzo: acá manda el contenedor ---------- */

.lienzo{
  container-type:inline-size;
  container-name:pantalla;
  width:100%;
  margin-inline:auto;
  padding:clamp(14px,2.4vw,28px) clamp(10px,2vw,24px) 40px;
  transition:max-width .32s var(--curva);
}
.lienzo[data-vista="movil"]{max-width:426px;padding-inline:18px}

/* El teléfono. En vista celular el aparato se dibuja; en escritorio no
   existe, porque el escritorio no va dentro de un teléfono. */
.lienzo[data-vista="movil"] .app{
  border-radius:34px;
  border:1px solid rgba(237,234,227,.22);
  box-shadow:0 0 0 7px #05090f, 0 26px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.lienzo[data-vista="movil"] .app__estado{display:flex}

/* La barra de estado del teléfono: hora, señal, batería. Dibujada, no emoji. */
.app__estado{
  display:none;align-items:center;justify-content:space-between;
  padding:9px 20px 5px;
  background:var(--navy-3);
  font-family:var(--mono);font-size:11px;color:rgba(237,234,227,.82);
}
.app__estado .señal{display:flex;align-items:flex-end;gap:2px;height:10px}
.app__estado .señal i{width:3px;background:rgba(237,234,227,.8);border-radius:1px}
.app__estado .señal i:nth-child(1){height:4px}
.app__estado .señal i:nth-child(2){height:6px}
.app__estado .señal i:nth-child(3){height:8px}
.app__estado .señal i:nth-child(4){height:10px}
.app__estado .bat{width:22px;height:11px;border:1px solid rgba(237,234,227,.6);border-radius:3px;position:relative;display:inline-block}
.app__estado .bat::after{content:'';position:absolute;top:2px;left:2px;bottom:2px;width:13px;background:var(--teal-cl);border-radius:1px}
.app__estado .bat::before{content:'';position:absolute;right:-4px;top:3px;width:2px;height:5px;background:rgba(237,234,227,.6);border-radius:0 1px 1px 0}

/* ---------- el marco de la aplicación ---------- */

.app{
  background:var(--navy-3);
  border:1px solid var(--linea);
  border-radius:var(--r-g);
  overflow:hidden;
}
.app--cocina{background:var(--navy-cocina)}

.app__barra{
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:13px clamp(14px,3cqi,24px);
  background:rgba(10,20,40,.72);
  border-bottom:1px solid var(--linea);
}
.app__barra h1{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.1;letter-spacing:.01em}
.app__barra .quien{display:flex;align-items:center;gap:9px}
.app__cuerpo{padding:clamp(14px,2.6cqi,24px)}

.vivo{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-cl)}
.vivo i{width:7px;height:7px;border-radius:999px;background:var(--teal);animation:latido 2.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.reloj{font-family:var(--mono);font-size:13px;color:rgba(237,234,227,.8);font-variant-numeric:tabular-nums}

.avatar{
  width:36px;height:36px;flex:none;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(52,152,145,.2);border:1px solid rgba(52,152,145,.5);
  font-family:var(--display);font-size:18px;color:var(--teal-cl);
}
.avatar--foto{background:none;border:none;overflow:hidden}
.avatar--foto img{width:100%;height:100%;object-fit:cover}

/* ---------- piezas comunes ---------- */

.tarjeta{
  background:var(--navy-2);
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:15px 16px;
}
.tarjeta--plana{background:rgba(19,38,73,.5)}

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border-radius:999px;
  font-weight:600;font-size:13.5px;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,opacity .18s;
}
.boton--lleno{background:var(--teal);color:var(--tinta)}
.boton--lleno:hover{background:var(--teal-cl)}
.boton--brasa{background:var(--brasa);color:#160801}
.boton--brasa:hover{filter:brightness(1.1)}
.boton--hueco{border:1px solid var(--linea-fuerte);color:rgba(237,234,227,.88)}
.boton--hueco:hover{border-color:rgba(237,234,227,.55)}
.boton--riesgo{border:1px solid rgba(237,94,34,.5);color:var(--brasa)}
.boton--riesgo:hover{background:rgba(237,94,34,.12)}
.boton[disabled]{opacity:.42}
.boton--chico{min-height:36px;padding:0 13px;font-size:12.5px}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--linea-fuerte);
  font-size:12px;color:rgba(237,234,227,.86);
}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--tinta);font-weight:600}

.sello{
  display:inline-flex;align-items:center;
  padding:4px 9px;border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.sello--contiene{background:rgba(237,201,192,.16);border:1px solid rgba(237,201,192,.45);color:var(--rosa)}
.sello--libre{background:rgba(52,152,145,.18);border:1px solid rgba(52,152,145,.5);color:var(--teal-cl)}
.sello--aji{background:rgba(237,94,34,.16);border:1px solid rgba(237,94,34,.5);color:var(--brasa)}
.sello--neutro{background:rgba(237,234,227,.07);border:1px solid rgba(237,234,227,.22);color:rgba(237,234,227,.7)}

.encabezado{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px}
.encabezado:first-child{margin-top:0}
.encabezado h2{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.6cqi,1.7rem);line-height:1.1}
.encabezado .linea{flex:1;height:1px;background:var(--linea)}
.encabezado .cuenta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--tenue-2);text-transform:uppercase}

/* ---------- el semáforo ---------- */

.sla{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.sla.verde{color:var(--teal-cl)}
.sla.ambar{color:var(--ambar)}
.sla.brasa{color:var(--brasa)}
.punto{width:8px;height:8px;border-radius:999px;display:inline-block;flex:none}
.punto.verde{background:var(--teal)}
.punto.ambar{background:var(--ambar)}
.punto.brasa{background:var(--brasa)}

/* ---------- mesa ---------- */

.mesa{
  position:relative;
  background:var(--navy-2);
  border:1px solid var(--linea);
  border-left:3px solid var(--e-libre);
  border-radius:var(--r);
  padding:13px 14px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .2s,background .2s;
}
.mesa.es-libre{opacity:.55}
.mesa.es-sentada{border-left-color:var(--e-sentada)}
.mesa.es-pidiendo{border-left-color:var(--teal-cl)}
.mesa.es-comiendo{border-left-color:var(--e-comiendo)}
.mesa.es-cuenta_pedida{border-left-color:var(--e-cuenta)}
.mesa.es-pagando{border-left-color:var(--e-pagando)}
.mesa.es-limpieza{border-left-color:var(--e-limpieza);opacity:.62}
.mesa__alto{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mesa__num{font-family:var(--display);font-size:20px;line-height:1}
.mesa__estado{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;
}
.es-libre .mesa__estado{color:rgba(237,234,227,.5)}
.es-sentada .mesa__estado{color:var(--teal-cl)}
.es-pidiendo .mesa__estado{color:var(--teal-cl)}
.es-comiendo .mesa__estado{color:var(--teal)}
.es-cuenta_pedida .mesa__estado{color:var(--brasa)}
.es-pagando .mesa__estado{color:var(--ambar)}
.es-limpieza .mesa__estado{color:rgba(237,234,227,.45)}
.mesa__meta{font-family:var(--mono);font-size:11px;color:var(--tenue-2);letter-spacing:.04em}
.mesa__items{font-size:12.5px;line-height:1.45;color:rgba(237,234,227,.76)}
.mesa__pie{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:2px;padding-top:8px;border-top:1px solid rgba(237,234,227,.08)}
.mesa__mesero{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--tenue-2)}
.mesa__total{font-family:var(--mono);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}

.leyenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.leyenda b{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue-2)}
.leyenda i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ---------- grillas ---------- */

.grilla{display:grid;grid-template-columns:1fr;gap:12px}
@container pantalla (min-width:560px){ .grilla{grid-template-columns:repeat(2,1fr)} }
@container pantalla (min-width:900px){ .grilla{grid-template-columns:repeat(3,1fr)} }
@container pantalla (min-width:1240px){ .grilla{grid-template-columns:repeat(4,1fr)} }

.grilla-2{display:grid;grid-template-columns:1fr;gap:12px}
@container pantalla (min-width:720px){ .grilla-2{grid-template-columns:repeat(2,1fr)} }

/* ---------- indicadores ---------- */

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@container pantalla (min-width:720px){ .kpis{grid-template-columns:repeat(3,1fr)} }
@container pantalla (min-width:1080px){ .kpis{grid-template-columns:repeat(6,1fr)} }
.kpi{
  background:var(--navy-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:13px 14px 14px;display:flex;flex-direction:column;gap:3px;
}
.kpi__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue-2)}
/* Las cifras van en mono y no en la serif de titular, que es la regla que ya
   traen las landings ("cifras, precios, rótulos y horarios: mono"). No es
   solo coherencia: el uno de Cormorant Garamond lleva serifas y a tamaño de
   indicador se lee como una I — "12:40" se volvía "I2:40". */
.kpi__v{font-family:var(--mono);font-weight:500;font-size:clamp(1.3rem,2.6cqi,1.75rem);line-height:1.12;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi__d{font-size:11.5px;line-height:1.35;color:var(--tenue)}
.kpi--alerta{border-color:rgba(237,94,34,.45)}
.kpi--alerta .kpi__v{color:var(--brasa)}

/* ---------- ticket de estación (cocina · barra) ---------- */

.tickets{display:grid;grid-template-columns:1fr;gap:14px}
@container pantalla (min-width:620px){ .tickets{grid-template-columns:repeat(2,1fr)} }
@container pantalla (min-width:1000px){ .tickets{grid-template-columns:repeat(3,1fr)} }
@container pantalla (min-width:1340px){ .tickets{grid-template-columns:repeat(4,1fr)} }

.ticket{
  background:var(--navy-2);
  border:1px solid var(--linea);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.ticket--ambar{border-color:rgba(224,166,73,.55)}
.ticket--brasa{border-color:rgba(237,94,34,.7);box-shadow:0 0 0 1px rgba(237,94,34,.3)}
.ticket--nuevo{border-color:rgba(123,196,188,.5)}
.ticket__alto{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;background:rgba(10,20,40,.5);border-bottom:1px solid var(--linea);
}
/* El número de mesa del ticket va en sans y no en la serif: es el dato que se
   lee cruzando la cocina, y "Mesa 1" en Cormorant se confunde con "Mesa I". */
.ticket__mesa{font-family:var(--sans);font-weight:600;font-size:21px;line-height:1.1;letter-spacing:-.01em}
.ticket__mesa small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue-2);margin-top:3px}
.ticket__sla{font-size:22px}
.ticket__sla small{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue-2);text-align:right;margin-top:3px}
.ticket ul{padding:12px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.ticket li{display:flex;gap:10px;align-items:flex-start;font-size:17px;line-height:1.25}
.ticket li .q{font-family:var(--mono);font-weight:500;color:var(--teal-cl);flex:none;min-width:2.1em}
.ticket li .nota{display:block;font-size:12.5px;color:var(--ambar);margin-top:3px;line-height:1.35}
.ticket li .nota--alergeno{color:var(--rosa)}
.ticket li.es-listo .txt{color:var(--tenue-2);text-decoration:line-through}
.ticket__acciones{display:flex;gap:8px;padding:0 14px 14px}
.ticket__acciones .boton{flex:1}

/* ---------- pie del producto ---------- */

.pie-producto{
  margin-top:26px;padding:18px clamp(14px,3cqi,24px) 22px;
  border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
}
.pie-producto .marca{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue-2)}
.pie-producto .nota{font-size:11.5px;color:var(--tenue-2);max-width:56ch}

/* ---------- aviso de privacidad ---------- */

.privacidad{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r);
  background:rgba(52,152,145,.09);
  border:1px solid rgba(52,152,145,.32);
}
.privacidad svg{flex:none;margin-top:2px}
.privacidad p{font-size:12.5px;line-height:1.5;color:rgba(237,234,227,.8)}
.privacidad strong{color:var(--teal-cl);font-weight:600}

/* ---------- vacío ---------- */

.vacio{
  padding:40px 20px;text-align:center;
  font-family:var(--display);font-size:1.5rem;color:rgba(237,234,227,.6);
}
.vacio em{font-style:italic;color:var(--teal-cl)}

/* ---------- utilidades ---------- */

.fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fila--entre{justify-content:space-between}
.crece{flex:1;min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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