/* =========================================================
   Panel de administración
   ========================================================= */
body.panel { background: #f6f0e7; }

.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }

/* ---------- Menú lateral ---------- */
.lado {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.25rem .85rem;
  background: #241710; color: #e9dccd;
}
.lado .marca { color: #fff; font-size: 1.15rem; padding: .25rem .5rem 1rem; }
.lado .marca-logo { background: var(--marca); color: #fff; width: 2.2rem; height: 2.2rem; }
.lado .marca span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lado a.item {
  display: flex; align-items: center; gap: .75rem;
  padding: .68rem .8rem; border-radius: 12px;
  color: #cdbba9; font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.lado a.item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lado a.item.activo { background: rgba(255, 255, 255, .12); color: #fff; }
.lado a.item .cuenta { margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--marca); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.5rem; }
.lado .grupo { margin: 1.1rem .8rem .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8f7a68; }
.lado .abajo { margin-top: auto; padding-top: 1rem; display: grid; gap: .25rem; }
.lado .yo { display: flex; align-items: center; gap: .65rem; padding: .7rem .6rem; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: .5rem; }
.lado .avatar { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #3d2a1f; color: #f0e2d2; font-weight: 700; flex: none; }
.lado .yo div { min-width: 0; flex: 1; line-height: 1.25; }
.lado .yo b { display: block; color: #fff; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lado .yo small { color: #8f7a68; font-size: .78rem; }
.lado .yo button { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 10px; background: transparent; color: #cdbba9; }
.lado .yo button:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.barra-top { display: none; }
.velo { display: none; }

/* ---------- Contenido ---------- */
.principal { padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 4rem; min-width: 0; }
.cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cabeza h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.cabeza p { color: var(--gris); margin-top: .2rem; }
.cabeza-acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.subtitulo { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 .9rem; display: flex; align-items: center; gap: .6rem; }
.subtitulo .muted { font-family: var(--fuente); font-size: .85rem; font-weight: 500; }

.panel-caja { padding: 1.25rem; }
.columnas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.espacio { margin-top: 1.5rem; }
.vacio-caja { padding: 2rem 1rem; text-align: center; color: var(--gris); }
.vacio-caja .icon { color: var(--linea); margin: 0 auto .5rem; display: block; }

/* ---------- Indicadores ---------- */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.5rem; }
.stat { padding: 1.15rem 1.25rem; display: grid; gap: .15rem; }
.stat .rotulo { display: flex; align-items: center; gap: .5rem; color: var(--gris); font-size: .86rem; font-weight: 600; }
.stat .rotulo .icon { color: var(--marca); }
.stat .numero { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.15; }
.stat .nota { color: var(--gris); font-size: .85rem; }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; }
.lista > li { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--linea); }
.lista > li:last-child { border: 0; padding-bottom: 0; }
.lista > li:first-child { padding-top: 0; }
.lista .hora { flex: none; width: 4.6rem; font-weight: 700; font-size: .95rem; }
.lista .cuerpo { flex: 1; min-width: 0; }
.lista .cuerpo b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .cuerpo small { color: var(--gris); }
.lista .fin { flex: none; display: flex; gap: .4rem; align-items: center; }

.tabla-caja { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabla th { text-align: left; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); font-weight: 700; padding: .8rem 1rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { white-space: nowrap; padding: .8rem 1rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .der { text-align: right; }
.tabla .acc { text-align: right; white-space: nowrap; }
.tabla tr.apagado td { opacity: .5; }

.icono-btn {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--linea); border-radius: 10px; background: #fff; color: var(--tinta-2);
  transition: all .12s ease;
}
.icono-btn:hover { border-color: var(--tinta-2); color: var(--tinta); }
.icono-btn.rojo:hover { border-color: var(--rojo); color: var(--rojo); background: var(--rojo-suave); }
.en-linea { display: inline; }

/* ---------- Salón ---------- */
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .86rem; font-weight: 600; color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.leyenda i { width: .7rem; height: .7rem; border-radius: 50%; }
.c-libre { background: var(--verde); }
.c-ocupada { background: var(--rojo); }
.c-reservada { background: #d99a1c; }

.zona { margin-bottom: 2rem; }
.mesas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.mesa { padding: 1rem; display: grid; gap: .8rem; align-content: start; border-top: 4px solid var(--verde); }
.mesa.ocupada { border-top-color: var(--rojo); background: #fffaf8; }
.mesa.reservada { border-top-color: #d99a1c; background: #fffcf3; }
.mesa-top { display: flex; align-items: center; gap: .75rem; }
.mesa-forma {
  flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border-radius: 12px; background: var(--verde-suave); color: var(--verde);
  font-weight: 700; font-size: 1.05rem;
}
.mesa-forma.redonda { border-radius: 50%; }
.mesa.ocupada .mesa-forma { background: var(--rojo-suave); color: var(--rojo); }
.mesa.reservada .mesa-forma { background: var(--ambar-suave); color: var(--ambar); }
.mesa-top h3 { font-size: 1.05rem; line-height: 1.2; }
.mesa-top small { color: var(--gris); font-size: .8rem; }
.mesa-info { font-size: .88rem; color: var(--tinta-2); display: grid; gap: .15rem; min-height: 2.6rem; align-content: center; }
.mesa-info b { font-size: 1.05rem; color: var(--tinta); }
.mesa-info .linea-r { display: flex; align-items: center; gap: .35rem; }
.mesa-acc { display: grid; gap: .45rem; }

/* ---------- Reservaciones ---------- */
.nav-fecha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nav-fecha .input { width: auto; padding: .5rem .75rem; }
.reservas { display: grid; gap: .75rem; }
.reserva-fila { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.15rem; }
.reserva-fila.apagada { opacity: .6; }
.reserva-fila .cuando b { font-family: var(--serif); font-size: 1.35rem; display: block; line-height: 1.1; }
.reserva-fila .cuando small { color: var(--gris); }
.reserva-fila .quien h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.reserva-fila .datos { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--tinta-2); font-size: .9rem; margin-top: .25rem; }
.reserva-fila .datos span { display: inline-flex; align-items: center; gap: .3rem; }
.reserva-fila .datos a { text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; }
.reserva-fila .nota { margin-top: .4rem; font-size: .88rem; color: var(--ambar); background: var(--ambar-suave); display: inline-block; padding: .15rem .6rem; border-radius: 8px; }
.reserva-fila .acc { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Cuenta (punto de venta) ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.25rem; align-items: start; }
.pos-filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.pos-filtros .input { max-width: 220px; padding: .5rem .8rem; border-radius: 999px; }
.tab { padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid var(--linea); background: #fff; font-weight: 600; font-size: .88rem; }
.tab.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pos-cat h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin: 1.1rem 0 .6rem; }
.prods { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.prod {
  display: grid; gap: .2rem; text-align: left; padding: .8rem .9rem;
  border: 1.5px solid var(--linea); border-radius: 14px; background: var(--papel);
  transition: transform .1s ease, border-color .12s ease, box-shadow .12s ease;
}
.prod:hover { border-color: var(--marca); box-shadow: var(--sombra-s); }
.prod:active { transform: scale(.97); }
.prod .ico { font-size: 1.4rem; line-height: 1; }
.prod b { font-size: .93rem; line-height: 1.25; }
.prod span { color: var(--marca-osc); font-weight: 700; font-size: .9rem; }
.prod.toque { border-color: var(--verde); background: var(--verde-suave); }

.ticket-caja { position: sticky; top: 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.ticket-cabeza { padding: 1rem 1.15rem; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.ticket-cabeza h2 { font-size: 1.3rem; }
.ticket-cabeza small { color: var(--gris); }
.ticket-items { list-style: none; margin: 0; padding: .25rem 1.15rem; overflow-y: auto; flex: 1; min-height: 120px; }
.ticket-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; padding: .8rem 0; border-bottom: 1px dashed var(--linea); }
.ticket-items li:last-child { border: 0; }
.ticket-items .nom b { display: block; line-height: 1.25; }
.ticket-items .nom small { color: var(--gris); }
.ticket-items .nom .nota-item { color: var(--ambar); font-size: .84rem; font-weight: 500; }
.ticket-items .imp { font-weight: 700; text-align: right; }
.ticket-items .ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; }
.cant { display: inline-flex; align-items: center; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; }
.cant button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; background: none; border-radius: 50%; }
.cant button:hover { background: var(--arena); }
.cant span { min-width: 1.6rem; text-align: center; font-weight: 700; }
.enlace { border: 0; background: none; padding: .25rem .4rem; color: var(--gris); font-size: .84rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.enlace:hover { color: var(--tinta); }
.enlace.rojo:hover { color: var(--rojo); }
.ticket-pie { padding: 1rem 1.15rem 1.15rem; border-top: 1px solid var(--linea); display: grid; gap: .75rem; background: var(--crema); border-radius: 0 0 var(--radio) var(--radio); }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; }
.ticket-total span { color: var(--tinta-2); font-weight: 600; }
.ticket-total b { font-family: var(--serif); font-size: 1.9rem; }
.ticket-pie .dos-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.barra-cuenta { display: none; }

/* Cobro */
.cobro-total { text-align: center; padding: .5rem 0; }
.cobro-total small { display: block; color: var(--gris); font-weight: 600; }
.cobro-total b { font-family: var(--serif); font-size: 2.6rem; line-height: 1.1; }
.cambio { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-radius: var(--radio-s); background: var(--verde-suave); color: #1f4a39; font-weight: 600; }
.cambio b { font-size: 1.3rem; }
.cambio.falta { background: var(--rojo-suave); color: #8a2a1e; }

/* Ticket impreso */
.recibo { width: min(380px, 100%); margin: 0 auto; padding: 1.75rem 1.5rem; font-size: .93rem; }
.recibo h2 { text-align: center; font-size: 1.5rem; }
.recibo .centro small { color: var(--tinta-2); display: block; }
.recibo hr { border: 0; border-top: 1px dashed #c9b9a6; margin: .9rem 0; }
.recibo table { width: 100%; border-collapse: collapse; }
.recibo td { padding: .22rem 0; vertical-align: top; }
.recibo td:last-child { text-align: right; white-space: nowrap; }
.recibo td.c { width: 2rem; color: var(--tinta-2); }
.recibo .gran td { font-size: 1.2rem; font-weight: 700; padding-top: .4rem; }
.recibo .sello { text-align: center; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); margin-bottom: .5rem; font-size: .8rem; }
.recibo-acc { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---------- Ventas ---------- */
.barras { display: grid; gap: .55rem; }
.barra-fila { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem; gap: .75rem; align-items: center; font-size: .9rem; }
.barra-fila .pista { height: .8rem; border-radius: 999px; background: var(--arena); overflow: hidden; }
.barra-fila .pista i { display: block; height: 100%; border-radius: 999px; background: var(--marca); min-width: 4px; }
.barra-fila b { text-align: right; }
.barra-fila.prod-fila { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 3rem; }
.barra-fila.prod-fila .pista i { background: var(--verde); }
.filtro-rango { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.filtro-rango .input { width: auto; padding: .5rem .7rem; }

/* ---------- Menú (admin) ---------- */
.cat-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.cat-cabeza h2 { font-size: 1.3rem; display: flex; align-items: center; gap: .55rem; }
.cat-cabeza .acc { display: flex; gap: .4rem; align-items: center; }
.prod-fila-admin { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; padding: .75rem 1.15rem; border-bottom: 1px solid var(--linea); }
.prod-fila-admin:last-child { border: 0; }
.prod-fila-admin.agotado .mini, .prod-fila-admin.agotado .txt { opacity: .5; }
.mini { width: 3rem; height: 3rem; border-radius: 12px; background: var(--arena); display: grid; place-items: center; font-size: 1.4rem; overflow: hidden; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.prod-fila-admin .txt b { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.prod-fila-admin .txt small { color: var(--gris); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-fila-admin .acc { display: flex; gap: .4rem; align-items: center; }
.interruptor { border: 0; border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; font-weight: 700; background: var(--verde-suave); color: var(--verde); }
.interruptor.no { background: var(--rojo-suave); color: var(--rojo); }

/* ---------- Mesas (config) ---------- */
.mesa-chips { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); padding: 1.15rem; }
.mesa-chip { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1.5px solid var(--linea); border-radius: 14px; background: #fff; }
.mesa-chip.apagada { opacity: .55; border-style: dashed; }
.mesa-chip .mesa-forma { width: 2.5rem; height: 2.5rem; background: var(--arena); color: var(--tinta-2); }
.mesa-chip div { flex: 1; min-width: 0; line-height: 1.25; }
.mesa-chip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-chip small { color: var(--gris); font-size: .8rem; }

/* ---------- Ajustes ---------- */
.ajustes { display: grid; gap: 1.25rem; max-width: 860px; }
.ajustes .panel-caja { display: grid; gap: 1rem; padding: 1.5rem; }
.ajustes h2 { font-size: 1.35rem; }
.ajustes .ayuda { color: var(--gris); font-size: .9rem; margin-top: -.6rem; }
.dia-fila { display: grid; grid-template-columns: 9rem 1fr 1fr; gap: .75rem; align-items: center; }
.dia-fila .check { text-transform: capitalize; }
.guardar-barra { position: sticky; bottom: 1rem; display: flex; justify-content: flex-end; }
.guardar-barra .btn { box-shadow: 0 10px 30px rgba(42, 29, 20, .25); }

/* ---------- Acceso (login / instalación) ---------- */
body.acceso {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(70% 60% at 0% 0%, #f4dcc6 0%, transparent 60%),
    radial-gradient(60% 60% at 100% 100%, #efcfae 0%, transparent 60%),
    var(--crema);
}
.acceso-caja { width: min(440px, 100%); padding: clamp(1.5rem, 5vw, 2.25rem); display: grid; gap: 1.1rem; box-shadow: var(--sombra); }
.acceso-caja .marca { justify-content: center; margin-bottom: .25rem; }
.acceso-caja h1 { font-size: 1.8rem; text-align: center; }
.acceso-caja > p { text-align: center; color: var(--tinta-2); margin-top: -.6rem; }

/* ---------- Móvil ---------- */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .barra-top {
    display: flex; align-items: center; gap: .75rem;
    position: sticky; top: 0; z-index: 30;
    padding: .65rem 1rem; background: #241710; color: #fff;
  }
  .barra-top button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; }
  .barra-top b { font-family: var(--serif); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lado { position: fixed; z-index: 50; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform .22s ease; }
  body.menu-abierto .lado { transform: none; }
  body.menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .45); }
  .principal { padding-top: 1.25rem; }
  .pos { grid-template-columns: 1fr; }
  .ticket-caja { position: static; max-height: none; }
  .barra-cuenta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: fixed; inset: auto 0 0 0; z-index: 20;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--tinta); color: #fff;
  }
  .barra-cuenta b { font-size: 1.2rem; }
  body.con-barra .principal { padding-bottom: 6rem; }
}
@media (max-width: 640px) {
  .reserva-fila { grid-template-columns: 1fr; gap: .6rem; }
  .reserva-fila .cuando { display: flex; align-items: baseline; gap: .5rem; }
  .reserva-fila .acc { justify-content: flex-start; }
  .dia-fila { grid-template-columns: 1fr 1fr; }
  .dia-fila .check { grid-column: 1 / -1; }
  .prod-fila-admin { grid-template-columns: 3rem minmax(0, 1fr); }
  .prod-fila-admin .precio, .prod-fila-admin .acc { grid-column: 2; }
  .mesas { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .barra-fila { grid-template-columns: 5rem minmax(0, 1fr) 5.5rem; }
}

/* ---------- Impresión del ticket ---------- */
@media print {
  .lado, .barra-top, .cabeza, .recibo-acc, .avisos, .velo { display: none !important; }
  body.panel { background: #fff; }
  .app { display: block; }
  .principal { padding: 0; }
  .recibo { border: 0; box-shadow: none; width: 100%; max-width: 80mm; padding: 0; font-size: 12px; color: #000; }
}

/* Ajustes finos de la cuenta */
#ticket { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.ticket-items { overflow: visible; flex: none; }
.btn-apagado { opacity: .5; pointer-events: none; }

/* =========================================================
   Versión pro: plano, caja, cocina, extras y gráficas
   ========================================================= */

/* ---------- Conmutador Plano / Lista ---------- */
.conmutador { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--arena); border: 1px solid var(--linea); }
.conmutador button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--tinta-2); font-weight: 600; font-size: .92rem;
}
.conmutador button:hover { color: var(--tinta); }
.conmutador button.activo { background: #fff; color: var(--tinta); box-shadow: var(--sombra-s); }

/* ---------- Pestañas de zona ---------- */
.zona-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.zona-tabs .tab { display: inline-flex; align-items: baseline; gap: .45rem; padding: .55rem 1rem; }
.zona-tabs .tab small { font-weight: 500; opacity: .7; font-size: .78rem; }
.plano-ayuda { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font-size: .88rem; font-weight: 600; color: var(--marca-osc); background: var(--marca-suave); padding: .4rem .8rem; border-radius: 999px; }

/* ---------- Plano del salón ---------- */
.plano {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 380px;
  border-radius: var(--radio); border: 1px solid var(--linea);
  background-color: #fbf7f1;
  background-image: radial-gradient(circle, #e2d4c1 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  box-shadow: inset 0 2px 10px rgba(42, 29, 20, .04);
  overflow: hidden;
}
.pm {
  position: absolute; transform: translate(-50%, -50%);
  width: var(--w, 12%); min-width: 84px; aspect-ratio: 1 / 1;
  display: grid; place-content: center; gap: .1rem; text-align: center;
  padding: .4rem; border-radius: 18px; border: 2px solid transparent;
  background: var(--verde-suave); color: #1f4a39;
  box-shadow: 0 1px 2px rgba(42, 29, 20, .08), 0 6px 16px rgba(42, 29, 20, .08);
  transition: transform .12s ease, box-shadow .15s ease;
  touch-action: none; user-select: none;
}
.pm.redonda { border-radius: 50%; }
.pm.larga { aspect-ratio: 1.6 / 1; }
.pm b { font-size: .95rem; line-height: 1.15; }
.pm small { font-size: .78rem; font-weight: 600; opacity: .85; }
.pm::before {
  /* sillas: un aro punteado alrededor de la mesa */
  content: ""; position: absolute; inset: -9px; border-radius: inherit;
  border: 3px dotted currentColor; opacity: .22; pointer-events: none;
}
.pm:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 2px 4px rgba(42, 29, 20, .1), 0 14px 28px rgba(42, 29, 20, .14); z-index: 2; }
.pm.libre { border-color: #b9dccb; }
.pm.ocupada { background: var(--rojo-suave); color: #8a2a1e; border-color: #f0b9ae; }
.pm.reservada { background: var(--ambar-suave); color: #6f470a; border-color: #ecd08f; }
.plano.editando { background-color: #fff8ee; outline: 2px dashed var(--marca); outline-offset: -2px; }
.plano.editando .pm { cursor: grab; }
.plano.editando .pm:hover { transform: translate(-50%, -50%); }
.pm.moviendo { cursor: grabbing; z-index: 5; transform: translate(-50%, -50%) scale(1.08) !important; box-shadow: 0 20px 40px rgba(42, 29, 20, .25); }

dialog.dlg-chico { width: min(380px, calc(100vw - 2rem)); }
#dlg-mesa-cuerpo .mesa { border: 0; padding: 0; box-shadow: none; background: transparent; }
#dlg-mesa-cuerpo .mesa-top { display: none; }

/* ---------- Estado de la caja en el menú lateral ---------- */
.caja-chip {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 .2rem .35rem; padding: .6rem .8rem; border-radius: 12px;
  background: rgba(255, 255, 255, .05); color: #cdbba9; font-size: .84rem; font-weight: 600;
}
.caja-chip i { width: .55rem; height: .55rem; border-radius: 50%; background: #8f7a68; flex: none; }
.caja-chip.abierta { color: #d8efe4; background: rgba(47, 107, 82, .25); }
.caja-chip.abierta i { background: #5ccf98; box-shadow: 0 0 0 4px rgba(92, 207, 152, .18); }
.caja-chip:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Caja ---------- */
.abrir-caja { max-width: 440px; margin: 1rem auto; text-align: center; display: grid; gap: 1rem; padding: 2rem; }
.abrir-caja .campo { text-align: left; }
.circulo-grande { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin: 0 auto; border-radius: 50%; background: var(--marca-suave); color: var(--marca); }
.input-grande { font-size: 1.35rem; font-weight: 700; padding: .8rem 1rem; }
.stat.destacada { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.stat.destacada .rotulo, .stat.destacada .nota { color: #d9c8b8; }
.stat.destacada .rotulo .icon { color: #f0a77f; }
.cuadre { width: 100%; border-collapse: collapse; }
.cuadre td { padding: .65rem 0; border-bottom: 1px dashed var(--linea); }
.cuadre td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.cuadre tr.total td { border: 0; padding-top: .9rem; font-weight: 700; font-size: 1.1rem; }
.cuadre tr.total td:last-child { font-family: var(--serif); font-size: 1.45rem; }
b.mas { color: var(--verde); }
b.menos { color: var(--rojo); }
h1 .badge { vertical-align: middle; font-family: var(--fuente); }

/* ---------- Cuenta: extras, estados, sumas ---------- */
.extras-item { display: block; color: var(--verde); font-size: .84rem; font-weight: 600; }
.chip-estado { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.chip-estado.nuevo { background: var(--arena); color: var(--tinta-2); }
.chip-estado.cocina { background: var(--ambar-suave); color: var(--ambar); }
.chip-estado.listo { background: var(--verde-suave); color: var(--verde); }
.ticket-sumas { display: grid; gap: .25rem; font-size: .92rem; color: var(--tinta-2); }
.ticket-sumas > div { display: flex; justify-content: space-between; gap: 1rem; }
#fila-descuento { color: var(--verde); font-weight: 600; }
.tres-botones { display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; }
.tres-botones .btn { padding-inline: .95rem; }
.prod { position: relative; }
.prod-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; margin-bottom: .3rem; }
.prod .quedan { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--gris); }
.prod .quedan.poco { color: var(--ambar); }
.prod.agotado { opacity: .5; cursor: not-allowed; }
.prod.agotado .quedan { color: var(--rojo); }
.opciones { display: grid; gap: .5rem; }
.opcion { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border: 1.5px solid var(--linea); border-radius: 12px; background: #fff; cursor: pointer; }
.opcion:hover { border-color: var(--marca); }
.opcion:has(input:checked) { border-color: var(--verde); background: var(--verde-suave); }
.opcion input { width: 1.15rem; height: 1.15rem; accent-color: var(--verde); }
.opcion span { flex: 1; font-weight: 600; }
.opcion b { font-size: .88rem; color: var(--tinta-2); }
.fila.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.btn-verde[disabled] { opacity: .45; }

/* ---------- Cocina ---------- */
.comandas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.comanda { display: flex; flex-direction: column; overflow: hidden; border-top: 5px solid var(--verde); }
.comanda.media { border-top-color: #d99a1c; }
.comanda.tarde { border-top-color: var(--rojo); }
.comanda header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: 1rem 1.1rem .75rem; border-bottom: 1px dashed var(--linea); }
.comanda h2 { font-family: var(--serif); font-size: 1.35rem; display: flex; align-items: center; gap: .4rem; }
.comanda header small { color: var(--gris); font-weight: 600; }
.reloj { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--verde-suave); color: var(--verde); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.comanda.media .reloj { background: var(--ambar-suave); color: var(--ambar); }
.comanda.tarde .reloj { background: var(--rojo-suave); color: var(--rojo); }
.comanda ul { list-style: none; margin: 0; padding: .5rem 1.1rem; display: grid; }
.comanda li { display: flex; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--arena); font-size: 1.02rem; }
.comanda li:last-child { border: 0; }
.comanda li .x { font-size: 1.1rem; min-width: 1.9rem; color: var(--marca-osc); }
.comanda li div { display: grid; gap: .1rem; }
.comanda form { padding: .25rem 1.1rem 1.1rem; }
.terminadas { display: flex; flex-wrap: wrap; gap: .5rem; }
.terminada { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); font-size: .88rem; color: var(--tinta-2); }
.terminada .icon { color: var(--verde); }

/* ---------- Gráficas (una serie, columnas) ---------- */
.grafica { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; height: 220px; margin-top: .4rem; }
.g-eje { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 1.6rem; font-size: .74rem; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
.g-eje span { transform: translateY(-50%); }
.g-eje span:last-child { transform: translateY(50%); }
.g-area { position: relative; }
.g-lineas { position: absolute; inset: 0 0 1.6rem 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.g-lineas i { display: block; height: 1px; background: var(--linea); }
.g-cols { position: absolute; inset: 0; display: flex; gap: 4px; }
.g-col { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: default; outline: none; border-radius: 6px; }
.g-col:hover, .g-col:focus-visible { background: rgba(42, 29, 20, .04); }
.g-barra { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0; }
.g-barra i { display: block; width: min(24px, 70%); border-radius: 4px 4px 0 0; background: #e3b49a; min-height: 0; transition: background .15s ease; }
.g-col.actual .g-barra i { background: var(--marca); }
.g-col:hover .g-barra i { background: var(--marca-osc); }
.g-col > span { height: 1.6rem; display: grid; place-items: center; font-size: .72rem; color: var(--gris); white-space: nowrap; overflow: hidden; }
.g-col.actual > span { color: var(--tinta); font-weight: 700; }
.globo {
  position: absolute; z-index: 100; pointer-events: none;
  padding: .45rem .7rem; border-radius: 10px;
  background: var(--tinta); color: #fff; font-size: .82rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(42, 29, 20, .3);
}

/* ---------- Inicio pro ---------- */
.delta { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; }
.delta.sube { color: var(--verde); }
.delta.baja { color: var(--rojo); }
.inicio-rejilla { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.inicio-rejilla .lado-der { display: grid; gap: 1.25rem; }
.mini-salon { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.mini-salon a { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--verde-suave); color: var(--verde); }
.mini-salon a.ocupada { background: var(--rojo-suave); color: var(--rojo); }
.mini-salon a.reservada { background: var(--ambar-suave); color: var(--ambar); }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ranking li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .93rem; }
.ranking li > span:first-child { color: var(--gris); font-weight: 700; }
.ranking .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alerta-stock { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px dashed var(--linea); font-size: .93rem; }
.alerta-stock:last-child { border: 0; }
.alerta-stock b { color: var(--rojo); }
.alerta-stock b.ambar { color: var(--ambar); }
.atajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.atajo { display: flex; align-items: center; gap: .6rem; padding: .85rem; border-radius: 14px; border: 1px solid var(--linea); background: #fff; font-weight: 600; font-size: .93rem; }
.atajo:hover { border-color: var(--marca); box-shadow: var(--sombra-s); }
.atajo .icon { color: var(--marca); }
.atajo .num { margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--marca); color: #fff; font-size: .75rem; text-align: center; line-height: 1.5rem; }

/* ---------- Menú admin: existencias y extras ---------- */
.stock-chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--arena); color: var(--tinta-2); }
.stock-chip.poco { background: var(--ambar-suave); color: var(--ambar); }
.stock-chip.cero { background: var(--rojo-suave); color: var(--rojo); }
.extra-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .7rem 1.15rem; border-bottom: 1px solid var(--linea); }
.extra-fila:last-child { border: 0; }
.extra-fila small { color: var(--gris); display: block; }
.extra-fila .acc { display: flex; gap: .4rem; }
#caja-stock[hidden] { display: none; }

/* ---------- Ventas: tabla de meseros y barras de categoría ---------- */
.barra-fila.cat-fila .pista i { background: var(--marca); }

@media (max-width: 1100px) {
  .inicio-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .plano { aspect-ratio: 3 / 4; }
  .pm { min-width: 64px; }
  .pm b { font-size: .8rem; }
  .fila.tres { grid-template-columns: 1fr; }
  .grafica { height: 180px; }
}