/* ============================================================
   SHOPERIA POS v3 — Tema blanco minimalista + modo noche
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700;800&display=swap');

/* ── TEMA DÍA (default) ──────────────────────────────────── */
:root {
  --bg:        #ffffff;
  --bg-2:      #f4f4f5;
  --panel:     #ffffff;
  --panel-2:   #f0f0f1;
  --line:      #e2e2e5;
  --ink:       #111111;
  --ink-soft:  #555558;
  --ink-dim:   #9999a0;
  /* Marca: verde esmeralda (lo puede cambiar cada comercio en Configuración) */
  --brand:      #0f6b4f;
  --brand-2:    #178c68;
  --brand-dark: #0a4c37;
  --brand-soft: rgba(15,107,79,.10);
  --gold:       #b08d3f;      /* filo dorado, solo para detalles */
  /* Ámbar fijo: SOLO el estado "mesa ocupada / requiere atención" */
  --amber:     #d97706;
  --amber-2:   #f59e0b;
  --green:     #16a34a;
  --red:       #dc2626;
  --blue:      #2563eb;
  --radius:    10px;
  --shadow:    0 2px 12px rgba(0,0,0,.08);
}

/* ── TEMA NOCHE ──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #000000;
  --bg-2:      #0d0d0d;
  --panel:     #141414;
  --panel-2:   #1c1c1c;
  --line:      #2a2a2a;
  --ink:       #f0ece4;
  --ink-soft:  #a8a094;
  --ink-dim:   #5c5650;
  --brand:      #3fbc90;
  --brand-2:    #6ad4ae;
  --brand-dark: #2a8f6c;
  --brand-soft: rgba(63,188,144,.14);
  --gold:       #d9b872;
  --amber:     #e8a13a;
  --amber-2:   #f4c267;
  --green:     #5fb87a;
  --red:       #e0584b;
  --blue:      #5b9bd5;
  --shadow:    0 8px 32px rgba(0,0,0,.7);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }
html, body { height: 100%; background: var(--bg); transition: background .2s }
body {
  color: var(--ink);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 7px; font-family: 'Fraunces', serif; flex-shrink: 0 }
.brand-mark { color: var(--ink-dim); font-size: 18px }
[data-theme="dark"] .brand-mark { color: var(--brand) }
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: .3px; color: var(--ink) }
.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none }
.nav::-webkit-scrollbar { display: none }
.nav-link {
  color: var(--ink-soft); text-decoration: none;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap;
  font-weight: 700; font-size: 13px; transition: .12s;
}
.nav-link:hover { background: var(--bg-2); color: var(--ink) }
.nav-link.is-active { background: var(--ink); color: var(--bg) }
.user-box { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.user-name { font-weight: 700; font-size: 13px }
.user-rol { font-size: 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px }

/* Botón día/noche */
#btnTheme {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  width: 34px; height: 34px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .15s; flex-shrink: 0;
}
#btnTheme:hover { border-color: var(--ink); color: var(--ink) }

.btn-logout {
  color: var(--ink-soft); text-decoration: none; border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 700;
  background: none; cursor: pointer; font-family: inherit;
}
.btn-logout:hover { border-color: var(--red); color: var(--red) }
.main { padding: 14px; max-width: 1400px; margin: 0 auto }

/* ── TIPOGRAFÍA ─────────────────────────────────────────── */
h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; margin-bottom: 4px }
h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; margin-bottom: 10px }
.sub { color: var(--ink-dim); margin-bottom: 20px; font-size: 13px }

/* ── BOTONES ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--ink); color: var(--bg); border: none; cursor: pointer;
  padding: 9px 16px; border-radius: 8px; font-weight: 700; font-size: 14px;
  font-family: inherit; transition: .12s;
}
.btn:hover { opacity: .85; transform: translateY(-1px) }
.btn:active { transform: translateY(0) }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line) }
.btn-ghost:hover { background: var(--bg-2); opacity: 1 }
.btn-danger { background: var(--red); color: #fff }
.btn-green { background: var(--green); color: #fff }
.btn-blue { background: var(--blue); color: #fff }
.btn-amber { background: var(--brand); color: #fff }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px }
.btn-block { width: 100% }
.btn:disabled { opacity: .3; cursor: not-allowed; transform: none }

/* ── TARJETAS ───────────────────────────────────────────── */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 10px }
.grid-2 { grid-template-columns: repeat(2, 1fr) }
.grid-full { grid-column: 1 / -1 }
.grid-3 { grid-template-columns: repeat(3, 1fr) }
.grid-4 { grid-template-columns: repeat(4, 1fr) }
@media(max-width:900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr) } }
@media(max-width:560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr } }

/* ── FORMULARIOS ────────────────────────────────────────── */
label { display: block; font-size: 11px; font-weight: 800; color: var(--ink-dim); margin: 0 0 5px; text-transform: uppercase; letter-spacing: .5px }
input, select, textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); padding: 9px 11px; border-radius: 7px; font-family: inherit; font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink) }
.field { margin-bottom: 12px }
.row { display: flex; gap: 10px; flex-wrap: wrap }
.row > * { flex: 1; min-width: 100px }

/* ── TABLAS ─────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-dim); padding: 8px 10px; border-bottom: 2px solid var(--line);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--line) }
tr:last-child td { border-bottom: none }
tr:hover td { background: var(--bg-2) }

/* ── BADGES ─────────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700 }
.b-libre    { background: rgba(22,163,74,.1);  color: var(--green) }
.b-ocupada  { background: rgba(217,119,6,.1);  color: var(--brand) }
.b-cuenta   { background: rgba(220,38,38,.1);  color: var(--red)   }
.b-bar      { background: rgba(37,99,235,.1);  color: var(--blue)  }
.b-cocina   { background: rgba(220,38,38,.1);  color: var(--red)   }
.b-ninguno  { background: rgba(100,116,139,.1);color: var(--ink-dim)}

/* ── LOGIN ───────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg) }
.login-card { width: 100%; max-width: 360px; text-align: center }
.login-logo { font-family: 'Fraunces', serif; font-size: 38px; color: var(--ink); margin-bottom: 6px }
[data-theme="dark"] .login-logo { color: var(--brand) }
.login-tag  { color: var(--ink-dim); margin-bottom: 28px; letter-spacing: 3px; text-transform: uppercase; font-size: 11px }

/* ── SALÓN / MESAS ───────────────────────────────────────── */
.sector-tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto }
.sector-tab {
  padding: 7px 14px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line);
  cursor: pointer; font-weight: 700; white-space: nowrap; color: var(--ink-soft); font-size: 13px;
}
.sector-tab.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink) }
/* (Las reglas de .mesas-grid / .mesa viven en la sección "SALÓN v2", más abajo.
   El bloque viejo que había acá pisaba esas reglas y descuadraba las tarjetas.) */

/* ── POS ─────────────────────────────────────────────────── */
.pos { display: grid; grid-template-columns: 1fr 320px; gap: 12px; height: calc(100vh - 82px) }
@media(max-width:900px) { .pos { grid-template-columns: 1fr; height: auto } }
.pos-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px }
.cat-chip {
  padding: 6px 13px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2);
  cursor: pointer; font-weight: 700; font-size: 12px; color: var(--ink-soft); transition: .12s;
}
.cat-chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.prod-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; overflow-y: auto; align-content: start; padding-right: 2px;
}
.prod {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 9px; padding: 11px;
  cursor: pointer; text-align: left; transition: .12s;
}
.prod:hover { border-color: var(--ink); transform: translateY(-1px) }
.prod-name  { font-weight: 700; font-size: 13px; margin-bottom: 5px; line-height: 1.3 }
.prod-price { color: var(--brand); font-weight: 800; font-size: 14px }
.prod-stock { font-size: 10px; color: var(--ink-dim); margin-top: 2px }
.prod-stock.low { color: var(--red) }
.prod-variantes-hint { font-size: 10px; color: var(--blue); margin-top: 2px }

.ticket {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.ticket-head { padding: 11px 13px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center }
.ticket-head h3 { font-family: 'Fraunces', serif; font-size: 15px }
.ticket-items { flex: 1; overflow-y: auto; padding: 5px }
.ti { display: flex; gap: 7px; align-items: center; padding: 7px; border-radius: 7px }
.ti:hover { background: var(--bg-2) }
.ti-qty { background: var(--bg-2); border-radius: 5px; display: flex; align-items: center; overflow: hidden }
.ti-qty button { background: none; border: none; color: var(--ink); width: 26px; height: 28px; font-size: 16px; cursor: pointer }
.ti-qty button:hover { background: var(--ink); color: var(--bg) }
.ti-qty span { min-width: 24px; text-align: center; font-weight: 700; font-size: 13px }
.ti-name { flex: 1; font-size: 12px }
.ti-name small { display: block; color: var(--ink-dim); font-size: 10px; margin-top: 2px }
.ti-name .var-tag { color: var(--brand); font-size: 10px }
.ti-price { font-weight: 700; color: var(--brand); font-size: 13px }
.ti-del { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: 14px; padding: 4px }
.ti-del:hover { color: var(--red) }
.ticket-foot { padding: 12px; border-top: 1px solid var(--line) }
.ticket-total { display: flex; justify-content: space-between; font-size: 19px; font-weight: 800; margin-bottom: 10px }
.ticket-total .amount { color: var(--brand); font-family: 'Fraunces', serif }
.empty { text-align: center; color: var(--ink-dim); padding: 28px 16px; font-size: 13px }

/* ── KDS ─────────────────────────────────────────────────── */
.kds-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px }
.kds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px }
.kds-card { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; border-top: 3px solid var(--brand) }
.kds-card.viejo { border-top-color: var(--red); animation: kds-pulse 1.6s infinite }
@keyframes kds-pulse { 50% { box-shadow: 0 0 0 3px rgba(220,38,38,.15) } }
.kds-card-head { padding: 9px 11px; background: var(--bg-2); display: flex; justify-content: space-between; align-items: center }
.kds-mesa { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700 }
.kds-time { font-size: 12px; color: var(--ink-soft); font-weight: 700 }
.kds-items { padding: 5px 11px }
.kds-item { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 6px }
.kds-item:last-child { border-bottom: none }
.kds-item-name { font-weight: 700; font-size: 13px }
.kds-item-name small { display: block; color: var(--brand); font-size: 11px; font-weight: 600; margin-top: 2px }
.kds-item-name .kds-var { color: var(--ink-soft); font-size: 10px }
.kds-item-qty { background: var(--ink); color: var(--bg); border-radius: 5px; padding: 2px 7px; font-weight: 800; height: fit-content; font-size: 13px }
.kds-item.listo { opacity: .3; text-decoration: line-through }
.kds-card-foot { padding: 9px 11px; display: flex; gap: 8px }

/* ── REPORTES ───────────────────────────────────────────── */
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px }
.stat-label { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px }
.stat-value { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 600; color: var(--brand); margin-top: 4px }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0 }
.bar-row .label { width: 120px; font-size: 12px; color: var(--ink-soft) }
.bar-row .track { flex: 1; height: 18px; background: var(--bg-2); border-radius: 4px; overflow: hidden }
.bar-row .fill  { height: 100%; background: var(--brand); border-radius: 4px }
.bar-row .val   { width: 80px; text-align: right; font-weight: 700; font-size: 12px }

/* ── MODAL ───────────────────────────────────────────────── */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px }
[data-theme="dark"] .modal-bg { background: rgba(0,0,0,.8) }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; width: 100%; max-width: 420px; box-shadow: var(--shadow) }
.modal h2 { margin-bottom: 14px }
.hidden { display: none !important }

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 9px 18px; border-radius: 8px;
  font-weight: 700; box-shadow: var(--shadow); z-index: 200; animation: toast-up .25s; font-size: 13px;
}
@keyframes toast-up { from { opacity: 0; transform: translate(-50%, 10px) } }

/* ── MISC ────────────────────────────────────────────────── */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; flex-wrap: wrap }
.pin-pad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px }
.pin-key { padding: 15px; font-size: 20px; font-weight: 700; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-family: inherit; color: var(--ink) }
.pin-key:hover { background: var(--ink); color: var(--bg) }
.pin-display { font-size: 28px; letter-spacing: 12px; text-align: center; padding: 12px; font-family: 'Fraunces', serif }
.spinner { width: 48px; height: 48px; margin: 0 auto; border: 4px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .9s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* ── VARIANTES popup ────────────────────────────────────── */
.vchip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 13px; border-radius: 10px; border: 1.5px solid;
  cursor: pointer; font-size: 15px; font-weight: 600; text-align: left;
  transition: background .15s, border-color .15s, opacity .15s;
  position: relative; user-select: none; -webkit-tap-highlight-color: transparent;
}
.vchip .vchip-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; transition: background .15s;
}
.vchip .vchip-name  { flex: 1; transition: text-decoration .1s, color .1s }
.vchip .vchip-price { font-size: 12px; font-weight: 700; opacity: .85 }
.vchip:active { transform: scale(.97) }

.vchip.inc-on  { background: rgba(22,163,74,.08);  border-color: var(--green); color: var(--green) }
.vchip.inc-on .vchip-icon  { background: var(--green);  color: #fff }
.vchip.inc-off { background: rgba(220,38,38,.06);  border-color: var(--red);   color: var(--red)   }
.vchip.inc-off .vchip-icon { background: var(--red);    color: #fff }
.vchip.inc-off .vchip-name { text-decoration: line-through; opacity: .65 }
.vchip.ext-off { background: var(--bg-2); border-color: var(--line); color: var(--ink-dim) }
.vchip.ext-off .vchip-icon { background: var(--line); color: var(--ink-dim) }
.vchip.ext-on  { background: rgba(217,119,6,.08);  border-color: var(--brand); color: var(--brand) }
.vchip.ext-on .vchip-icon  { background: var(--brand); color: #fff }

.vchip-sin-badge {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .5px; padding: 2px 6px; border-radius: 5px;
}

/* ── ADMIN buscador ─────────────────────────────────────── */
.cat-filtro-activo { box-shadow: 0 0 0 2px currentColor !important; font-weight: 800 !important }

/* ============================================================
   ASISTENTE DE BIENVENIDA (onboarding) — ventanas flotantes
   ============================================================ */
.ob-overlay{position:fixed; inset:0; z-index:9999; background:rgba(12,10,8,.72);
  backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:20px}
.ob-card{background:var(--bg-1,#fff); border-radius:20px; width:100%; max-width:560px;
  max-height:92vh; overflow-y:auto; box-shadow:0 40px 100px rgba(0,0,0,.5);
  animation:obIn .3s cubic-bezier(.2,.8,.3,1) both}
@keyframes obIn{from{opacity:0; transform:translateY(22px) scale(.97)} to{opacity:1; transform:none}}
.ob-head{padding:30px 32px 0; text-align:center}
.ob-emoji{font-size:44px; margin-bottom:10px}
.ob-head h2{font-size:25px; margin:0 0 8px; line-height:1.2}
.ob-head p{color:var(--ink-dim); font-size:15px; margin:0}
.ob-body{padding:24px 32px}
.ob-foot{padding:0 32px 28px; display:flex; gap:10px; align-items:center}
.ob-foot .grow{flex:1}
.ob-skip{background:none; border:none; color:var(--ink-dim); font-family:inherit; font-size:13.5px;
  cursor:pointer; text-decoration:underline; padding:8px}
.ob-skip:hover{color:var(--ink)}

/* Barra de progreso */
.ob-dots{display:flex; gap:6px; justify-content:center; padding:18px 0 0}
.ob-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); display:block; transition:.2s}
.ob-dots i.on{background:var(--acc,#e8a13a); width:20px; border-radius:4px}

/* Opciones de tipo de negocio */
.ob-opts{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ob-opt{border:2px solid var(--line); border-radius:14px; padding:18px 14px; text-align:center;
  cursor:pointer; transition:.15s; background:var(--bg-1,#fff)}
.ob-opt:hover{border-color:var(--acc,#e8a13a); transform:translateY(-2px)}
.ob-opt.sel{border-color:var(--acc,#e8a13a); background:rgba(232,161,58,.08)}
.ob-opt .em{font-size:32px; display:block; margin-bottom:8px}
.ob-opt .nm{font-weight:700; font-size:15px}
.ob-opt .ds{font-size:12px; color:var(--ink-dim); margin-top:3px}

/* Campos del formulario */
.ob-field{margin-bottom:14px}
.ob-field label{display:block; font-size:13px; font-weight:600; color:var(--ink-dim); margin-bottom:5px}
.ob-field input{width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:15px; background:var(--bg-2); color:var(--ink)}
.ob-field input:focus{outline:none; border-color:var(--acc,#e8a13a)}
.ob-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:520px){ .ob-row2, .ob-opts{grid-template-columns:1fr} }

/* Lista de pasos finales */
.ob-lista{list-style:none; padding:0; margin:0}
.ob-lista li{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line)}
.ob-lista li:last-child{border-bottom:none}
.ob-lista .n{width:28px; height:28px; border-radius:8px; background:var(--acc,#e8a13a); color:#241a06;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0}
.ob-lista .t{font-weight:700; font-size:14.5px}
.ob-lista .d{font-size:13px; color:var(--ink-dim); margin-top:1px}
.ob-error{background:#fdecec; color:#a11; padding:10px 13px; border-radius:9px; font-size:13.5px; margin-bottom:12px; display:none}

/* ============================================================
   SALÓN v2 — plano de mesas (basado en prácticas de POS)
   ============================================================ */

/* Barra de resumen del salón */
.salon-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.sb-chip{display:flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:8px 13px; font-size:13px; font-weight:600; color:var(--ink-soft)}
.sb-chip .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.sb-chip b{color:var(--ink); font-size:15px}
.sb-libre  .dot{background:#94a3b8}
.sb-ocupada .dot{background:var(--brand)}
.sb-cuenta .dot{background:var(--red)}
.sb-limpiar .dot{background:var(--blue)}
.sb-venta{margin-left:auto; background:var(--ink); color:var(--bg); border-color:var(--ink)}
.sb-venta b{color:var(--bg)}
@media(max-width:600px){
  .salon-bar{gap:8px}
  .sb-chip{padding:7px 11px; font-size:12.5px}
  .sb-venta{margin-left:0; width:100%; justify-content:center}   /* antes se salía a la derecha */
}

/* Cuadrícula: tarjetas parejas, con aire suficiente para que el "latido"
   (box-shadow) de las ocupadas no las haga ver pegadas entre sí. */
.mesas-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:18px; align-items:stretch; padding:4px 2px 8px;
}
/* Tablet */
@media(max-width:900px){
  .mesas-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px }
}
/* Celular: 2 columnas fijas, nunca 1 tarjeta gigante ni 4 apretadas */
@media(max-width:600px){
  .mesas-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px }
}
/* Celular chico */
@media(max-width:340px){
  .mesas-grid{ grid-template-columns:1fr }
}

/* Tarjeta de mesa — SIMÉTRICA: zonas de alto fijo, todas iguales */
.mesa{
  position:relative; display:grid;
  grid-template-rows: 22px 1fr 20px 22px 30px;   /* etiqueta | número | sillas | total | tiempo+acciones */
  justify-items:center; align-items:center;
  min-height:186px; padding:12px 10px 10px; border-radius:14px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line);
  transition:transform .14s, box-shadow .14s, border-color .14s;
  overflow:hidden; text-align:center;
  -webkit-tap-highlight-color:transparent;
}
/* En celular la tarjeta se compacta para que entren 2 por fila sin apretarse */
@media(max-width:600px){
  .mesa{ min-height:158px; padding:10px 8px 8px; grid-template-rows:20px 1fr 18px 20px 28px }
  .mesa-num{ font-size:28px }
  .mesa-total{ font-size:14px }
  .mesa-ojo, .mesa-traslado{ width:30px; height:30px }   /* área táctil */
}
.mesa::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--line) }
.mesa:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.mesa:active{transform:translateY(-1px)}
.mesa-num{font-size:34px; font-weight:800; font-family:'Fraunces',serif; line-height:1; color:var(--ink)}
.mesa-info{font-size:11.5px; color:var(--ink-dim); font-weight:600; line-height:1}
.mesa-total{font-size:16px; font-weight:800; color:var(--brand); font-family:'Fraunces',serif; line-height:1}
.mesa-total.vacio{color:var(--ink-dim); font-weight:600; font-size:12px}

/* Fila inferior: tiempo a la izquierda, acciones a la derecha (alto fijo) */
.mesa-pie{width:100%; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 2px}
.mesa-time{display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--ink-dim)}
.mesa-time.warn{color:var(--red)}
.mesa-acts{display:flex; gap:5px}

/* Etiqueta de estado (esquina) */
.mesa-tag{font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; line-height:1; background:var(--bg-2); color:var(--ink-dim)}
/* Tiempo ocupada */
.mesa-time{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700;
  color:var(--ink-dim); margin-top:4px}
.mesa-time.warn{color:var(--red)}

/* ── LIBRE ── */
.mesa.libre::before{background:#cbd5e1}
.mesa.libre .mesa-num{color:var(--ink-dim)}
.mesa.libre:hover{border-color:var(--green)}

/* ── OCUPADA ── (late suave) */
.mesa.ocupada{border-color:var(--brand); background:rgba(217,119,6,.05)}
.mesa.ocupada::before{background:var(--brand)}
.mesa.ocupada .mesa-tag{background:var(--brand); color:#fff}
.mesa.ocupada{animation:latirOcupada 2.6s ease-in-out infinite}
@keyframes latirOcupada{
  0%,100%{ box-shadow:0 0 0 0 rgba(217,119,6,.28) }
  50%    { box-shadow:0 0 0 6px rgba(217,119,6,0) }
}

/* ── PIDIENDO LA CUENTA ── (late más marcado: requiere atención) */
.mesa.cuenta{border-color:var(--red); background:rgba(220,38,38,.06)}
.mesa.cuenta::before{background:var(--red)}
.mesa.cuenta .mesa-tag{background:var(--red); color:#fff}
.mesa.cuenta .mesa-total{color:var(--red)}
.mesa.cuenta{animation:latirCuenta 1.3s ease-in-out infinite}
@keyframes latirCuenta{
  0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.45); border-color:var(--red) }
  50%    { box-shadow:0 0 0 8px rgba(220,38,38,0); border-color:#f87171 }
}

/* ── POR LIMPIAR ── */
.mesa.limpiar{border-color:var(--blue); background:rgba(37,99,235,.06); border-style:dashed}
.mesa.limpiar::before{background:var(--blue)}
.mesa.limpiar .mesa-tag{background:var(--blue); color:#fff}
.mesa.limpiar .mesa-x{font-size:34px; color:var(--blue); font-weight:900; line-height:1}
.mesa.limpiar .mesa-info{color:var(--blue); font-weight:700; text-transform:uppercase}

/* Aviso de ítems sin enviar a cocina */
.mesa-alert{position:absolute; top:8px; right:8px; background:var(--red); color:#fff;
  font-size:9.5px; font-weight:800; padding:3px 6px; border-radius:20px; line-height:1;
  animation:parpadeo 1s steps(2,start) infinite; z-index:2}
@keyframes parpadeo{0%,100%{opacity:1} 50%{opacity:.35}}

/* Botones flotantes de la mesa (ojo / traslado) */
.mesa-ojo, .mesa-traslado{
  width:27px; height:27px; border-radius:8px; cursor:pointer; padding:0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink-soft); transition:.15s;
}
.mesa-ojo:hover{background:var(--brand); border-color:var(--brand); color:#fff}
.mesa-traslado:hover{background:var(--blue); border-color:var(--blue); color:#fff}

@media(prefers-reduced-motion:reduce){
  .mesa.ocupada, .mesa.cuenta, .mesa-alert{animation:none}
}

/* ============================================================
   CAJA v2 — Mesas en vivo (tarjetas ordenadas)
   ============================================================ */
.mv-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.mv-live{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  color:var(--green); text-transform:uppercase; letter-spacing:.06em}
.mv-live .pulse{width:8px; height:8px; border-radius:50%; background:var(--green);
  animation:mvPulse 1.6s ease-in-out infinite}
@keyframes mvPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.5)} 50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}

/* Resumen */
.mv-sum{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 15px; background:var(--bg-2); border-radius:11px; margin-bottom:14px}
.mv-sum .txt{font-size:13.5px; color:var(--ink-soft)}
.mv-sum .tot{font-family:'Fraunces',serif; font-size:20px; font-weight:800; color:var(--brand)}

/* Cuadrícula de tarjetas */
.mv-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(215px,1fr)); gap:12px}
@media(max-width:520px){ .mv-grid{grid-template-columns:1fr} }

/* Tarjeta simétrica */
.mv-card{
  display:grid; grid-template-rows:26px 42px 22px 30px 38px;   /* etiqueta | mesa | meta | total | acciones */
  gap:6px; padding:13px; border-radius:14px; background:var(--panel);
  border:1px solid var(--line); transition:.15s; position:relative; overflow:hidden;
}
.mv-card::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--brand)}
.mv-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--brand)}
.mv-card.cuenta{border-color:var(--red); background:rgba(220,38,38,.04)}
.mv-card.cuenta::before{background:var(--red)}
.mv-card.cuenta{animation:mvLat 1.4s ease-in-out infinite}
@keyframes mvLat{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)} 50%{box-shadow:0 0 0 7px rgba(220,38,38,0)}}

.mv-top{display:flex; justify-content:space-between; align-items:center}
.mv-badge{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; border-radius:20px; background:rgba(217,119,6,.15); color:var(--brand); line-height:1}
.mv-card.cuenta .mv-badge{background:rgba(220,38,38,.15); color:var(--red)}
.mv-warn{font-size:9.5px; font-weight:800; background:var(--red); color:#fff;
  padding:3px 7px; border-radius:20px; line-height:1; animation:parpadeo 1s steps(2,start) infinite}

.mv-mesa{display:flex; align-items:center; gap:9px}
.mv-num{width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-family:'Fraunces',serif; font-size:18px; font-weight:800;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink)}
.mv-card.cuenta .mv-num{background:var(--red); color:#fff; border-color:var(--red)}
.mv-name{font-weight:800; font-size:15px; color:var(--ink)}

.mv-meta{display:flex; gap:10px; font-size:11.5px; color:var(--ink-dim); align-items:center}
.mv-meta .warn{color:var(--red); font-weight:700}
.mv-total{font-family:'Fraunces',serif; font-size:22px; font-weight:800; color:var(--brand); line-height:1}
.mv-card.cuenta .mv-total{color:var(--red)}

.mv-acts{display:flex; gap:7px}
.mv-acts button{flex:1; padding:9px 6px; border-radius:9px; font-size:12.5px; font-weight:800;
  font-family:inherit; cursor:pointer; border:1px solid var(--line); background:var(--bg-2);
  color:var(--ink-soft); transition:.15s; display:flex; align-items:center; justify-content:center; gap:4px}
.mv-acts button:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.mv-acts .b-cobrar{background:var(--green); color:#fff; border-color:var(--green)}
.mv-acts .b-cobrar:hover{background:#128a3e; color:#fff; border-color:#128a3e}

/* Ventana de detalle */
.dt-list{max-height:52vh; overflow-y:auto; margin:6px 0 14px}
.dt-li{display:flex; justify-content:space-between; gap:10px; padding:9px 0; font-size:14px;
  border-bottom:1px solid var(--line)}
.dt-li:last-child{border-bottom:none}
.dt-li .q{font-weight:800; color:var(--brand); margin-right:6px}
.dt-li small{display:block; color:var(--ink-dim); font-size:11.5px; margin-top:2px}
.dt-li small.no{color:var(--red)}
.dt-total{display:flex; justify-content:space-between; align-items:center; padding:12px 0;
  border-top:2px solid var(--line); font-weight:800}
.dt-total .n{font-family:'Fraunces',serif; font-size:24px; color:var(--brand)}

/* ============================================================
   PRODUCTOS v2 — pensado para monitor táctil
   ============================================================ */
.pr-acts{display:flex; gap:10px; flex-shrink:0}
.pr-acts .btn{padding:13px 20px; border-radius:12px; font-size:15px; font-weight:700; white-space:nowrap}

.pr-search{position:relative; margin-bottom:16px}
.pr-search .ic{position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:19px; color:var(--ink-dim); pointer-events:none}
.pr-search input{width:100%; padding:16px 46px 16px 48px; font-size:17px; border-radius:14px;
  border:2px solid var(--line); background:var(--panel); color:var(--ink); font-family:inherit}
.pr-search input:focus{border-color:var(--brand); outline:none}
.pr-search .clear{position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; border:none; background:var(--bg-2);
  color:var(--ink-dim); font-size:17px; cursor:pointer; display:none; align-items:center; justify-content:center}
.pr-search .clear.show{display:flex}
.pr-search .clear:hover{background:var(--red); color:#fff}

/* Cuadrícula de categorías tipo menú */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:10px; margin-bottom:18px}
@media(max-width:560px){ .cat-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px} }
.cat-card{position:relative; border:2px solid var(--line); border-radius:14px; padding:14px 13px 13px;
  background:var(--panel); cursor:pointer; transition:.15s; text-align:left; min-height:82px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden}
.cat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.cat-nom{font-weight:800; font-size:15px; line-height:1.25; color:var(--ink); padding-right:22px}
.cat-meta{display:flex; align-items:center; gap:7px; margin-top:8px; font-size:11.5px; color:var(--ink-dim)}
.cat-count{font-weight:800; font-size:16px; font-family:'Fraunces',serif; color:var(--ink)}
.cat-dest{font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px; background:var(--bg-2)}
.cat-edit{position:absolute; top:9px; right:9px; width:26px; height:26px; border-radius:7px;
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink-dim); font-size:12px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:.15s}
.cat-card:hover .cat-edit{opacity:1}
.cat-edit:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
@media(hover:none){ .cat-edit{opacity:1} }
.cat-card.todos{background:var(--ink); border-color:var(--ink)}
.cat-card.todos .cat-nom, .cat-card.todos .cat-count{color:var(--bg)}
.cat-card.todos .cat-meta{color:rgba(255,255,255,.6)}

#tablaProd td{padding:12px 10px}
.prod-nom{font-size:15px; font-weight:700}
.prod-desc{font-size:12px; color:var(--ink-dim); margin-top:2px}
.var-chip{display:inline-flex; align-items:center; gap:5px; background:rgba(37,99,235,.12);
  color:var(--blue); border:1px solid rgba(37,99,235,.3); border-radius:20px;
  padding:4px 10px; font-size:11.5px; font-weight:800; white-space:nowrap}
.prod-row-var{background:rgba(37,99,235,.03)}
.prod-row-var td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.btn-edit{padding:9px 16px; border-radius:9px; font-size:13.5px; font-weight:700}

/* Selector de vista */
.vista-tabs{display:inline-flex; gap:3px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:11px; padding:3px}
.vista-tabs button{border:none; background:transparent; color:var(--ink-dim); cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:700; padding:8px 15px; border-radius:8px; transition:.15s}
.vista-tabs button.on{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}

/* Tarjetas de producto con foto */
.prod-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px}
@media(max-width:600px){ .prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px} }
.pcard{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; cursor:pointer; transition:.16s; display:flex; flex-direction:column}
.pcard:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand)}
.pcard-foto{position:relative; aspect-ratio:4/3; background:var(--bg-2); overflow:hidden}
.pcard-foto img{width:100%; height:100%; object-fit:cover; display:block}
.pcard-foto .sinfoto{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:38px; color:var(--ink-dim); opacity:.4}
.pcard-cat{position:absolute; top:0; left:0; right:0; height:4px; z-index:2}
.pcard-badges{position:absolute; top:9px; left:9px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2}
.pb{font-size:10px; font-weight:800; padding:4px 8px; border-radius:20px; line-height:1; white-space:nowrap}
.pb-kds{background:rgba(0,0,0,.62); color:#fff}
.pb-var{background:rgba(37,99,235,.92); color:#fff}
.pb-off{background:rgba(120,113,108,.9); color:#fff}
.pb-stock{position:absolute; top:9px; right:9px; background:var(--red); color:#fff; z-index:2;
  font-size:10px; font-weight:800; padding:4px 8px; border-radius:20px; line-height:1}
.pcard-body{padding:12px 13px 13px; display:flex; flex-direction:column; gap:3px; flex:1}
.pcard-nom{font-weight:800; font-size:14.5px; line-height:1.3; color:var(--ink)}
.pcard-desc{font-size:11.5px; color:var(--ink-dim); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard-pie{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:9px}
.pcard-precio{font-family:'Fraunces',serif; font-size:19px; font-weight:800; color:var(--brand)}
.pcard-edit{width:32px; height:32px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-soft); font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s}
.pcard-edit:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.pcard.off{opacity:.55}
.pcard.off .pcard-foto img{filter:grayscale(1)}
.pcard.tienevar{border-color:rgba(37,99,235,.45)}
.pcard.tienevar:hover{border-color:var(--blue)}

/* ============================================================
   MODAL DE ACCIONES DE MESA (se abre al tocar una mesa)
   ============================================================ */
.mm-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.mm-title{margin:0; font-family:'Fraunces',serif; font-size:22px; font-weight:700}
.mm-close{width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
  background:var(--bg-2); color:var(--ink-dim); font-size:17px; line-height:1; font-family:inherit}
.mm-close:hover{background:var(--red); color:#fff}

.mm-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 16px}
.mm-badge{font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; background:var(--bg-2); color:var(--ink-dim)}
.mm-badge.ocupada{background:var(--brand); color:#fff}
.mm-badge.cuenta {background:var(--red);   color:#fff}
.mm-badge.limpiar{background:var(--blue);  color:#fff}
.mm-sub{font-size:13px; color:var(--ink-dim)}

.mm-total{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 15px; border-radius:12px; background:var(--bg-2); margin-bottom:16px}
.mm-total .lbl{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim)}
.mm-total .val{font-family:'Fraunces',serif; font-size:24px; font-weight:800; color:var(--brand)}

/* Botones grandes, uno por fila: pensados para dedo en tablet/celular */
.mm-acts{display:grid; gap:10px}
.mm-act{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:14px 15px; border-radius:12px; cursor:pointer; font-family:inherit;
  background:var(--panel); border:1.5px solid var(--line); color:var(--ink); transition:.14s;
}
.mm-act:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.mm-act .ico{font-size:20px; line-height:1; flex-shrink:0; width:26px; text-align:center}
.mm-act .txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.mm-act .t{font-weight:800; font-size:15px}
.mm-act .d{font-size:12px; color:var(--ink-dim); font-weight:500}
.mm-act .chev{margin-left:auto; color:var(--ink-dim); font-size:16px; flex-shrink:0}

.mm-act.primary{border-color:var(--ink); background:var(--ink); color:var(--bg)}
.mm-act.primary .d{color:var(--bg); opacity:.7}
.mm-act.primary .chev{color:var(--bg)}
.mm-act.cobrar{border-color:var(--green)}
.mm-act.cobrar:hover{background:rgba(22,163,74,.07)}
.mm-act.cobrar .ico{color:var(--green)}
.mm-act.ver:hover{background:rgba(217,119,6,.07); border-color:var(--brand)}
.mm-act.limpiar:hover{background:rgba(37,99,235,.07); border-color:var(--blue)}
.mm-act.danger:hover{background:rgba(220,38,38,.07); border-color:var(--red)}
.mm-act:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* En celular este modal se comporta como hoja de acciones pegada abajo */
@media(max-width:600px){
  .modal-bg.sheet{padding:0; align-items:flex-end}
  .modal-bg.sheet .modal{max-width:100%; border-radius:18px 18px 0 0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .mm-act{padding:15px}
}

/* Mesa limpiándose: cuenta regresiva dentro de la etiqueta, sin modal que bloquee */
.limp-seg{
  display:inline-block; margin-left:5px; padding:1px 5px; border-radius:20px;
  background:rgba(255,255,255,.25); font-size:10px; font-weight:800;
  font-variant-numeric:tabular-nums; min-width:22px; text-align:center;
}
.mesa.limpiar.limpiando{border-style:solid}
.mesa.limpiar.limpiando .mesa-tag{animation:limpiandoLat 1s ease-in-out infinite}
.mesa.limpiar.limpiando .mesa-total{color:var(--blue); font-weight:700}
@keyframes limpiandoLat{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){ .mesa.limpiar.limpiando .mesa-tag{animation:none} }

/* ── MESA ABIERTA PERO SIN PEDIDO (se sentaron, aún deciden) ──
   Se distingue de "ocupada": no late, tono neutro, no hay plata en juego. */
.mesa.ocupada.esperando{
  border-color:#94a3b8; background:rgba(148,163,184,.07);
  animation:none;                       /* que no lata como las que sí consumen */
}
.mesa.ocupada.esperando::before{background:#94a3b8}
.mesa.ocupada.esperando .mesa-tag{background:#64748b; color:#fff}
.mesa.ocupada.esperando .mesa-total{color:var(--ink-dim); font-weight:600; font-size:12px}
.mm-badge.espera{background:#64748b; color:#fff}
.sb-espera .dot{background:#64748b}

/* Contador de espera dentro de la etiqueta ESPERANDO */
.esp-seg{
  display:inline-block; margin-left:5px; padding:1px 5px; border-radius:20px;
  background:rgba(255,255,255,.28); font-size:10px; font-weight:800;
  font-variant-numeric:tabular-nums; min-width:30px; text-align:center;
}

/* Pasados los 2 minutos: SOLO el fondo se pone amarillo (apurate a tomar el pedido) */
.mesa.ocupada.esperando.apurar{
  background:#fef3c7;                    /* amarillo suave, sin tocar el borde */
  border-color:#94a3b8;
}
[data-theme="dark"] .mesa.ocupada.esperando.apurar{ background:rgba(250,204,21,.16) }
.mesa.ocupada.esperando.apurar .mesa-tag{background:#b45309; color:#fff}
.mesa.ocupada.esperando.apurar .mesa-num{color:#78350f}
[data-theme="dark"] .mesa.ocupada.esperando.apurar .mesa-num{color:#fde68a}
.mesa.ocupada.esperando.apurar .mesa-total{color:#b45309; font-weight:700}
.mm-total.apurar{background:#fef3c7}
[data-theme="dark"] .mm-total.apurar{background:rgba(250,204,21,.16)}

/* Signo + en la tarjeta de producto: deja claro que al tocarla se agrega */
.prod{position:relative}
.prod-add{
  position:absolute; top:8px; right:8px; z-index:1;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink-dim);
  font-size:16px; font-weight:700; line-height:1; transition:.14s;
}
.prod:hover .prod-add{background:var(--ink); border-color:var(--ink); color:var(--bg); transform:scale(1.08)}
.prod-name{padding-right:28px}   /* que el nombre no quede debajo del + */
@media(max-width:600px){
  .prod-add{width:26px; height:26px; font-size:17px;
    background:var(--ink); border-color:var(--ink); color:var(--bg)}  /* en celular siempre visible */
}

/* ── CONFIRMAR ENVÍO: ocupa toda la pantalla, centrado ── */
.modal-bg.full{
  background:rgba(0,0,0,.65); padding:20px;
  align-items:center; justify-content:center; z-index:150;
}
[data-theme="dark"] .modal-bg.full{background:rgba(0,0,0,.88)}
.cf-box{
  width:100%; max-width:620px; max-height:92vh; overflow-y:auto;
  background:var(--panel); border-radius:22px; padding:38px 34px;
  text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.32);
  animation:cfIn .18s ease-out;
}
@keyframes cfIn{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
.cf-ico{font-size:52px; line-height:1; margin-bottom:12px}
.cf-title{font-family:'Fraunces',serif; font-size:32px; font-weight:700; margin:0 0 8px}
.cf-sub{color:var(--ink-dim); font-size:15px; margin:0 0 22px}

/* Resumen de lo que se manda a cocina/bar */
.cf-resumen{
  text-align:left; background:var(--bg-2); border-radius:14px;
  padding:14px 16px; margin-bottom:24px; max-height:32vh; overflow-y:auto;
}
.cf-resumen:empty{display:none}
.cf-n{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-dim); margin-bottom:8px}
.cf-item{font-size:15px; font-weight:600; padding:5px 0; border-bottom:1px solid var(--line)}
.cf-item:last-child{border-bottom:none}
.cf-item b{color:var(--brand); margin-right:6px}

/* Botones grandes: se aciertan con el dedo sin mirar */
.cf-btns{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cf-btn{padding:22px 16px; font-size:17px; border-radius:14px; font-weight:800}
.cf-btn-ok{font-size:20px; letter-spacing:.06em}

@media(max-width:600px){
  .modal-bg.full{padding:0; align-items:stretch}
  .cf-box{
    max-width:100%; max-height:100%; border-radius:0; padding:26px 20px;
    display:flex; flex-direction:column; justify-content:center;   /* centrado a pantalla completa */
  }
  .cf-title{font-size:27px}
  .cf-btns{grid-template-columns:1fr}
  .cf-btn{padding:20px}
  .cf-btn-ok{order:-1}     /* PREPARAR arriba, que es lo que más se toca */
}

/* Botón "Enviar a preparar" con pendientes: rojo y parpadeando */
.btn.btn-urgente{
  background:var(--red); color:#fff;
  animation:btnUrgente 1.1s ease-in-out infinite;
}
.btn.btn-urgente:hover{background:#b91c1c; opacity:1}
@keyframes btnUrgente{
  0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.55); filter:brightness(1) }
  50%    { box-shadow:0 0 0 9px rgba(220,38,38,0); filter:brightness(1.14) }
}
@media(prefers-reduced-motion:reduce){ .btn.btn-urgente{animation:none} }

/* Link para volver a la mesa desde el aviso */
.cf-volver{
  margin-top:16px; background:none; border:none; cursor:pointer; font-family:inherit;
  color:var(--ink-dim); font-size:14px; font-weight:700; text-decoration:underline;
}
.cf-volver:hover{color:var(--ink)}

/* Ticket: nombre del producto arriba, ingredientes en lista debajo */
.ti { align-items: flex-start }                 /* con lista debajo, alinear arriba */
.ti-name .ti-prod{
  display:block; font-size:13px; font-weight:800; line-height:1.3; color:var(--ink);
}
.ti-vars{
  list-style:none; margin:3px 0 0; padding:0;
}
.ti-vars li{
  font-size:11.5px; line-height:1.5; color:var(--brand); font-weight:600;
  padding-left:11px; position:relative;
}
.ti-vars li::before{ content:'-'; position:absolute; left:0; color:var(--ink-dim) }
.ti-vars li.sin{ color:var(--red) }
.ti-vars li.sin::before{ color:var(--red) }

/* ✕ de la carta en celular: rojo = salir sin pedido (les damos más tiempo) */
.ct-cerrar.sin-pedido{
  background:var(--red); border-color:var(--red); color:#fff; font-weight:800;
}
.ct-cerrar.sin-pedido:hover{background:#b91c1c}

/* ── CAJA: propina y totales ───────────────────────────── */
.ck-fila{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 2px; font-size:14px; color:var(--ink-soft);
}
.ck-fila .n{font-weight:700; color:var(--ink); font-size:15px}
.ck-total{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-radius:12px; background:var(--ink); color:var(--bg);
  font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
}
.ck-total .n{font-family:'Fraunces',serif; font-size:26px; font-weight:800;
  letter-spacing:0; text-transform:none; color:var(--bg)}

.prop-box{
  background:var(--bg-2); border-radius:12px; padding:13px 14px; margin:6px 0 14px;
}
.prop-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.prop-head small{color:var(--ink-dim); font-weight:500}
.prop-head span:first-child{font-size:13px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-dim)}
.prop-val{font-family:'Fraunces',serif; font-size:22px; font-weight:800; color:var(--brand)}
.prop-ops{display:flex; gap:6px; flex-wrap:wrap}
.prop-op{
  flex:1; min-width:64px; padding:9px 6px; border-radius:9px; cursor:pointer;
  background:var(--panel); border:1.5px solid var(--line); color:var(--ink-soft);
  font-family:inherit; font-size:13px; font-weight:800; transition:.12s;
}
.prop-op:hover{border-color:var(--brand); color:var(--ink)}
.prop-op.on{background:var(--brand); border-color:var(--brand); color:#fff}

/* ── CAJA: cobro persona por persona ───────────────────── */
.pp-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.pp-row{
  display:flex; align-items:center; gap:11px; padding:12px 13px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--panel);
}
.pp-row.ok{border-color:var(--green); background:rgba(22,163,74,.05)}
.pp-n{
  width:32px; height:32px; flex-shrink:0; border-radius:9px; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.pp-row.ok .pp-n{background:var(--green); color:#fff}
.pp-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.pp-info b{font-size:14.5px}
.pp-info small{font-size:11.5px; color:var(--ink-dim)}
.pp-info .desglose{color:var(--brand); font-weight:600}
.pp-monto{font-family:'Fraunces',serif; font-size:18px; font-weight:800; color:var(--brand); white-space:nowrap}
.pp-monto.pagado{color:var(--green)}
.pp-btn{
  padding:9px 15px; border-radius:9px; border:none; cursor:pointer; flex-shrink:0;
  background:var(--ink); color:var(--bg); font-family:inherit; font-weight:800; font-size:13px;
}
.pp-btn:hover{opacity:.85}
.pp-x{
  width:28px; height:28px; flex-shrink:0; border-radius:50%; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--ink-dim); font-size:12px; font-family:inherit;
}
.pp-x:hover{background:var(--red); border-color:var(--red); color:#fff}

.pp-falta{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 15px; border-radius:11px; background:rgba(217,119,6,.1);
  color:var(--brand); font-weight:700; font-size:14px;
}
.pp-falta .n{font-family:'Fraunces',serif; font-size:21px; font-weight:800}
.pp-listo{
  padding:12px; border-radius:11px; background:rgba(22,163,74,.1);
  color:var(--green); font-weight:800; text-align:center; font-size:15px;
}

/* Ventana de pago de una persona */
.pp-grande{
  font-family:'Fraunces',serif; font-size:46px; font-weight:800; color:var(--brand);
  text-align:center; line-height:1.1;
}
.pp-desglose{text-align:center; color:var(--ink-dim); font-size:12.5px; margin:2px 0 18px}

/* ── CAJA: reparto del pago combinado ──────────────────── */
.cb-fila{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 13px; border-radius:9px; background:var(--bg-2); margin-bottom:6px;
  font-size:14px; color:var(--ink-soft); font-weight:600;
}
.cb-fila .n{font-weight:800; color:var(--ink); font-size:15px}
.cb-fila.vuelto{background:rgba(95,184,122,.12); color:var(--green)}
.cb-fila.vuelto .n{color:var(--green)}
.cb-fila.suma{background:none; padding:4px 2px; font-size:12px; color:var(--ink-dim)}
.cb-fila.suma .n{font-size:13px; color:var(--ink-dim)}

/* Vista previa del recibo (como saldrá en la térmica) */
.recibo-vista{
  background:#fff; color:#000; border:1px solid var(--line); border-radius:10px;
  padding:16px; max-width:320px; margin:0 auto; box-shadow:var(--shadow);
}

/* ── Ventana de confirmación propia (salón) ────────────── */
.cf2-ico{font-size:42px; text-align:center; line-height:1; margin-bottom:8px}
.cf2-title{font-family:'Fraunces',serif; font-size:24px; text-align:center; margin:0 0 6px}
.cf2-sub{color:var(--ink-dim); font-size:14px; text-align:center; margin:0 0 16px; line-height:1.45}
.cf2-monto{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 15px; border-radius:12px; background:var(--bg-2); margin-bottom:18px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim);
}
.cf2-monto .n{font-family:'Fraunces',serif; font-size:24px; font-weight:800;
  color:var(--brand); text-transform:none; letter-spacing:0}
.cf2-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cf2-btn{padding:16px; font-size:15px; border-radius:12px; font-weight:800}
@media(max-width:600px){
  .cf2-btns{grid-template-columns:1fr}
  .cf2-btns .btn-green, .cf2-btns .btn-danger{order:-1}
}

/* Falta plata: el cobro queda bloqueado hasta cubrir el total */
.cb-fila.falta{background:rgba(220,38,38,.1); color:var(--red)}
.cb-fila.falta .n{color:var(--red)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn:disabled:hover{opacity:.45; transform:none}

/* Quién atiende la mesa (evita que dos meseros la abran a la vez) */
.mesa-mesero{font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:20px; display:inline-block}
.mesa-mesero.mia{background:rgba(22,163,74,.12); color:var(--green)}
.mesa-mesero.ajena{background:var(--bg-2); color:var(--ink-dim)}
.mm-bloqueo{
  display:flex; flex-direction:column; gap:4px; padding:14px 15px; border-radius:12px;
  background:rgba(217,119,6,.08); border:1.5px solid var(--brand); color:var(--ink);
  font-size:14.5px; margin-bottom:4px;
}
.mm-bloqueo span{font-size:12.5px; color:var(--ink-dim); font-weight:500; line-height:1.45}

/* ══ REPORTES ══════════════════════════════════════════ */
.rp-rangos{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.rp-rango{
  padding:9px 16px; border-radius:20px; cursor:pointer; font-family:inherit;
  background:var(--bg-2); border:1.5px solid var(--line); color:var(--ink-soft);
  font-size:13px; font-weight:800; transition:.12s;
}
.rp-rango:hover{border-color:var(--ink); color:var(--ink)}
.rp-rango.on{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.rp-fechas{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.rp-fechas .field{flex:1; min-width:140px}

.rp-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
@media(max-width:600px){ .rp-stats{grid-template-columns:repeat(2,1fr)} }

/* Tabla del cierre */
.rp-tabla{width:100%; border-collapse:collapse; font-size:14px}
.rp-tabla th{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim);
  text-align:left; padding:0 8px 9px; font-weight:800;
}
.rp-tabla td{padding:11px 8px; border-top:1px solid var(--line)}
.rp-tabla .c{text-align:center}
.rp-tabla .r{text-align:right; white-space:nowrap}
.rp-tabla tfoot td{border-top:2px solid var(--ink); font-size:15px}

/* Pedidos cobrados */
.vt{border:1.5px solid var(--line); border-radius:12px; margin-bottom:8px; overflow:hidden; background:var(--panel)}
.vt-head{display:flex; align-items:center; gap:11px; padding:12px 13px; cursor:pointer}
.vt-head:hover{background:var(--bg-2)}
.vt-mas{
  width:30px; height:30px; flex-shrink:0; border-radius:9px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  font-size:17px; font-weight:800; line-height:1; font-family:inherit;
}
.vt-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.vt-info b{font-size:14.5px}
.vt-info small{font-size:11.5px; color:var(--ink-dim)}
.vt-monto{
  font-family:'Fraunces',serif; font-size:18px; font-weight:800; color:var(--brand);
  white-space:nowrap; text-align:right; display:flex; flex-direction:column;
}
.vt-monto small{font-family:inherit; font-size:10px; color:var(--ink-dim); font-weight:600}
.vt-print{
  width:32px; height:32px; flex-shrink:0; border-radius:9px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); font-size:14px; font-family:inherit;
}
.vt-print:hover{background:var(--ink); color:var(--bg)}

.vt-detalle{display:none; padding:0 13px 13px; border-top:1px solid var(--line)}
.vt-detalle.abierto{display:block}
.vt-items{padding:10px 0}
.vt-item{display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.vt-item:last-child{border-bottom:none}
.vt-item .q{font-weight:800; color:var(--ink-dim); min-width:26px}
.vt-item .n{flex:1; font-weight:600}
.vt-item .n small{display:block; font-size:11px; color:var(--brand); font-weight:500; margin-top:2px}
.vt-item .n small.sin{color:var(--red)}
.vt-item .p{font-weight:800; white-space:nowrap}
.vt-tot{display:flex; justify-content:space-between; padding:5px 0; font-size:13.5px; color:var(--ink-soft)}
.vt-tot.fuerte{font-weight:800; color:var(--ink); font-size:15px; border-top:1px solid var(--line); padding-top:8px}
.vt-pago{font-size:11.5px; color:var(--ink-dim); padding:3px 0}

/* ══ KDS v2: reloj, semáforo y comandas limpias ═════════ */
.kds-card{
  display:flex; flex-direction:column;      /* evita las filas fantasma de antes */
  border-top-width:4px;
}
/* Semáforo por tiempo de espera */
.kds-card.ok      { border-top-color:var(--green) }
.kds-card.amarillo{ border-top-color:var(--brand); background:rgba(217,119,6,.04) }
.kds-card.rojo    { border-top-color:var(--red);   background:rgba(220,38,38,.05);
                    animation:kds-pulse 1.6s infinite }

.kds-time{
  font-size:14px; font-weight:800; font-variant-numeric:tabular-nums;
  padding:3px 9px; border-radius:20px; background:var(--bg-2); color:var(--ink-soft);
}
.kds-time.ok      { background:rgba(22,163,74,.12);  color:var(--green) }
.kds-time.amarillo{ background:rgba(217,119,6,.15);  color:var(--brand) }
.kds-time.rojo    { background:var(--red); color:#fff }

.kds-sub{
  padding:4px 11px 0; font-size:11px; color:var(--ink-dim); font-weight:600;
}
.kds-items{flex:1}
.kds-item-name b{display:block; font-size:14.5px; font-weight:800; line-height:1.3}

/* Ingredientes que SÍ lleva: lista con guion */
.kds-ing{list-style:none; margin:3px 0 0; padding:0}
.kds-ing li{
  font-size:12px; line-height:1.5; color:var(--ink-soft); font-weight:600;
  padding-left:11px; position:relative;
}
.kds-ing li::before{content:'-'; position:absolute; left:0; color:var(--ink-dim)}

/* Lo que NO lleva: imposible de pasar por alto */
.kds-sin{
  margin-top:4px; font-size:12.5px; font-weight:800; color:#fff; background:var(--red);
  display:inline-block; padding:2px 8px; border-radius:5px;
}
.kds-nota{
  margin-top:4px; font-size:12px; font-weight:700; color:var(--ink);
  background:var(--bg-2); padding:3px 8px; border-radius:5px; display:inline-block;
}
.kds-card-foot{display:flex; gap:8px; padding:10px 11px; border-top:1px solid var(--line)}

/* Interruptor de impresión automática */
.kds-auto{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  background:var(--bg-2); border:1px solid var(--line); border-radius:9px; padding:7px 12px;
}
.kds-auto input{width:16px; height:16px; margin:0; cursor:pointer}
.kds-auto:hover{border-color:var(--ink); color:var(--ink)}

/* ══ AVISO AL MESERO: cocina/bar terminaron, hay que retirar ══ */
.ret-wrap{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.ret-card{
  pointer-events:auto;
  display:flex; align-items:center; gap:13px;
  max-width:640px; width:100%; margin:0 auto;
  padding:14px 16px; border-radius:14px;
  background:var(--red); color:#fff;
  box-shadow:0 10px 34px rgba(220,38,38,.42);
  animation:retLat 1.15s ease-in-out infinite;
}
@keyframes retLat{
  0%,100%{ box-shadow:0 10px 34px rgba(220,38,38,.42), 0 0 0 0 rgba(220,38,38,.55) }
  50%    { box-shadow:0 10px 34px rgba(220,38,38,.42), 0 0 0 12px rgba(220,38,38,0) }
}
.ret-ico{font-size:26px; line-height:1; flex-shrink:0; animation:retCampana .9s ease-in-out infinite}
@keyframes retCampana{0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(12deg)}}
.ret-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ret-txt b{font-size:16px; font-weight:900; letter-spacing:.02em}
.ret-txt span{font-size:12.5px; opacity:.92}
.ret-btn{
  flex-shrink:0; padding:12px 16px; border-radius:11px; cursor:pointer;
  background:#fff; color:var(--red); border:none;
  font-family:inherit; font-weight:900; font-size:14px;
}
.ret-btn:hover{background:#ffe9e9}
@media(max-width:600px){
  .ret-card{flex-wrap:wrap; padding:13px 14px}
  .ret-btn{width:100%; padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .ret-card, .ret-ico{animation:none}
}
@media print{ .ret-wrap{display:none !important} }

/* ══ PANEL DEL PEDIDO: los botones van pegados a los productos ══
   Antes la lista estiraba (flex:1) y empujaba los botones al fondo de la
   pantalla; con pocos productos quedaban lejísimos y se pasaban por alto. */
.ticket{ align-self:start; max-height:calc(100vh - 100px) }
.ticket-items{
  flex:0 1 auto;            /* deja de estirar: ocupa lo que ocupan los productos */
  overflow-y:auto;
  max-height:52vh;          /* si hay muchos, scrollea (los botones siguen a la vista) */
  padding:5px;
}
.ticket-items .empty{padding:18px 12px}

.ticket-foot{padding:14px 13px}
.ticket-total{font-size:22px; margin-bottom:14px}

/* Botones grandes, imposibles de no ver */
.tk-btn{
  padding:19px 14px; font-size:17px; font-weight:900; border-radius:13px;
  letter-spacing:.02em; margin-bottom:9px;
}
.tk-btn:last-child{margin-bottom:0}
.tk-cerrar{border-width:2px}
.tk-cerrar:hover{border-color:var(--green); color:var(--green); background:rgba(22,163,74,.06)}

@media(max-width:900px){
  .ticket{max-height:none}
  .ticket-items{max-height:none}
  .tk-btn{padding:20px 14px; font-size:17px}
}

/* Aviso en el pedido: parte del total todavía no se puede cobrar */
.tk-aviso{
  margin:10px 0 0; padding:9px 11px; border-radius:9px;
  background:rgba(220,38,38,.1); color:var(--red);
  font-size:12px; font-weight:600; line-height:1.45; text-align:center;
}

/* ══ MESA EN CONSUMO: todo entregado, nada pendiente ══════
   Verde = los clientes están comiendo y no hay nada que hacer.
   Las clases valen solas: NO dependen de .ocupada (antes el naranja ganaba). */
.mesa.consumo{
  border-color:var(--green) !important;
  background:rgba(22,163,74,.07) !important;
  animation:none !important;                /* no late: no requiere atención */
}
.mesa.consumo::before{background:var(--green) !important}
.mesa.consumo .mesa-tag{background:var(--green) !important; color:#fff !important}
.mesa.consumo .mesa-total{color:var(--green) !important}
.mesa.consumo .mesa-num{color:var(--ink)}
.mm-badge.consumo{background:var(--green); color:#fff}
.sb-consumo .dot{background:var(--green)}

/* Mesa con algo listo esperando que el mesero lo retire */
.mesa.retirar{
  border-color:var(--red) !important;
  background:rgba(220,38,38,.07) !important;
  animation:latirCuenta 1.3s ease-in-out infinite !important;
}
.mesa.retirar::before{background:var(--red) !important}
.mesa.retirar .mesa-tag{background:var(--red) !important; color:#fff !important}
.mesa.retirar .mesa-total{color:var(--red) !important}
.mm-badge.retirar{background:var(--red); color:#fff}
@media(prefers-reduced-motion:reduce){ .mesa.retirar{animation:none !important} }

/* ============================================================
   EDITOR DE SALAS Y MESAS (admin_mesas.php)
   ============================================================ */
.salon-wrap { display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
@media (max-width:1000px){ .salon-wrap { grid-template-columns:1fr; } }

.salon-editor { background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; }

/* ── Pestañas de salas ── */
.salon-tabs { display:flex; gap:4px; padding:8px 8px 0; border-bottom:1px solid var(--line);
  background:var(--panel-2); overflow-x:auto; }
.salon-tab { display:flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer;
  padding:10px 15px; border:1px solid transparent; border-bottom:none;
  border-radius:9px 9px 0 0; background:transparent; color:var(--ink-soft);
  font-family:inherit; font-weight:700; font-size:14px; }
.salon-tab:hover { color:var(--ink); background:rgba(127,127,127,.08); }
.salon-tab.is-active { background:var(--panel); border-color:var(--line); color:var(--ink); }
.salon-tab .dot { width:9px; height:9px; border-radius:50%; }
.salon-tab em { font-style:normal; font-size:11px; color:var(--ink-dim); font-weight:800; }
.salon-tab.nueva { color:var(--brand); font-weight:800; }

/* ── Paleta de mesas (se arrastran a la cuadrícula) ── */
.se-bar { display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; padding:12px; border-bottom:1px solid var(--line); }
.paleta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.paleta-lbl { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); margin-right:4px; }
.paleta-sep { width:1px; height:26px; background:var(--line); margin:0 5px; }

.chip-mesa { display:grid; place-items:center; cursor:grab; touch-action:none;
  width:44px; height:44px; padding:0; border-radius:10px;
  border:1px solid var(--line); background:var(--panel-2);
  transition:border-color .12s, transform .12s, background .12s; }
.chip-mesa:hover  { border-color:var(--brand); background:var(--panel); transform:translateY(-2px); }
.chip-mesa:active { cursor:grabbing; transform:scale(.94); }
.chip-mesa i { display:block; border:2px solid var(--ink-soft); background:var(--panel); }
.chip-mesa.cuadrada i { border-radius:4px; }
.chip-mesa.redonda  i { border-radius:50%; }
.chip-mesa.chica   i { width:14px; height:14px; }
.chip-mesa.mediana i { width:21px; height:21px; }
.chip-mesa.grande  i { width:28px; height:28px; }

/* ── Zoom ── */
.se-zoom { display:flex; align-items:center; gap:7px; }
.se-zoom input[type=range] { width:120px; accent-color:var(--brand); cursor:pointer; }
.zbtn { width:30px; height:30px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
  font-size:15px; line-height:1; font-family:inherit; font-weight:700; }
.zbtn:hover { border-color:var(--brand); color:var(--brand); }
.zbtn.ajustar { font-size:13px; }

.salon-hint { padding:9px 12px; background:rgba(217,119,6,.09);
  border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:600; }

/* ── Cuadrícula ── */
.salon-canvas-scroll { overflow:auto; padding:16px; background:var(--bg-2); max-height:64vh; }
.salon-canvas {
  --cell:74px;
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:8px;
  background-image:
    linear-gradient(to right,  var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
  touch-action:none;              /* imprescindible para arrastrar en tablet */
}
.salon-canvas.is-placing { outline:2px dashed var(--brand); outline-offset:3px; }

/* ── Mesa: la tabla + sus sillas ── */
.mesa-box { position:absolute; cursor:grab; user-select:none; touch-action:none; }
.mesa-box .silla { position:absolute; border-radius:3px;
  background:var(--ink-dim); opacity:.55; }
.mesa-top { position:absolute; display:grid; place-items:center;
  background:var(--panel-2); border:2px solid var(--ink-soft); color:var(--ink);
  box-shadow:var(--shadow); transition:border-color .12s, box-shadow .12s, background .12s; }
.mesa-top.cuadrada { border-radius:12px; }
.mesa-top.redonda  { border-radius:50%; }
.mesa-top .mesa-num { font-family:'Fraunces',serif; font-weight:800; line-height:1; font-size:inherit; }

.mesa-box:hover  .mesa-top { border-color:var(--brand); background:var(--panel); }
.mesa-box:hover  .silla    { opacity:.8; }
.mesa-box.is-sel .mesa-top { border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(217,119,6,.25); background:rgba(217,119,6,.08); }
.mesa-box.is-sel .silla    { background:var(--brand); opacity:.85; }
.mesa-box.is-drag { cursor:grabbing; z-index:5; }
.mesa-box.is-drag .mesa-top { box-shadow:0 10px 26px rgba(0,0,0,.28); }
.mesa-box.is-bad  .mesa-top { border-color:var(--red); background:rgba(220,38,38,.14); }
.mesa-box.is-bad  .silla    { background:var(--red); }

/* Fantasma que sigue al dedo mientras se arrastra desde la paleta */
.ghost-drag { position:fixed; z-index:99; pointer-events:none; opacity:.9; }
.ghost-drag .mesa-box { position:relative; }
.ghost-drag.malo  .mesa-top { border-color:var(--red); background:rgba(220,38,38,.16); }
.ghost-drag.fuera { opacity:.4; }

/* ── Bandeja de mesas sin ubicar ── */
.salon-tray { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; border-top:1px solid var(--line); background:var(--panel-2); }
.tray-chip { cursor:pointer; padding:7px 13px; min-width:40px;
  border:2px dashed var(--ink-dim); background:var(--panel); color:var(--ink);
  font-family:inherit; font-weight:800; font-size:13px; }
.tray-chip.cuadrada { border-radius:9px; }
.tray-chip.redonda  { border-radius:999px; }
.tray-chip:hover { border-color:var(--brand); color:var(--brand); }

/* ── Panel derecho ── */
.pnl { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:14px; }
.pnl-head { display:flex; justify-content:space-between; align-items:center;
  padding:11px 12px; color:#fff; font-size:14px; letter-spacing:.4px; }
.pnl-head-2 { background:var(--ink-soft); }
.pnl-body { padding:13px; }
.pnl-empty { padding:16px; }
.pnl-dato { display:flex; justify-content:space-between; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-soft); }
.pnl-dato:last-child { border-bottom:none; }
.pnl-dato b { color:var(--ink); }
.ibtn { cursor:pointer; border:none; background:rgba(255,255,255,.22); color:#fff;
  width:27px; height:27px; border-radius:7px; font-size:13px; line-height:1; margin-left:4px; }
.ibtn:hover { background:rgba(255,255,255,.4); }

/* Selectores de forma y tamaño */
.opt-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.opt-grid.tres { grid-template-columns:1fr 1fr 1fr; }
.opt { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  padding:9px 4px; border-radius:9px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink-soft);
  font-family:inherit; font-weight:700; font-size:11.5px; }
.opt:hover { border-color:var(--ink-dim); color:var(--ink); }
.opt.on { border-color:var(--brand); background:rgba(217,119,6,.10); color:var(--ink); }
.opt .fig { display:block; border:2px solid currentColor; }
.opt .fig.cuadrada { border-radius:3px; }
.opt .fig.redonda  { border-radius:50%; }
.opt .fig { width:20px; height:20px; }
.opt .fig.chica  { width:13px; height:13px; }
.opt .fig.grande { width:25px; height:25px; }

/* Colores de la sala */
.color-chips { display:flex; gap:8px; flex-wrap:wrap; }
.color-chip { width:32px; height:32px; border-radius:9px; cursor:pointer;
  border:3px solid transparent; }
.color-chip.on { border-color:var(--ink); transform:scale(1.06); }

@media(max-width:600px){
  .se-bar { gap:10px; }
  .se-zoom input[type=range] { width:84px; }
  .salon-canvas-scroll { padding:10px; max-height:56vh; }
}

/* ============================================================
   PLANO DEL SALÓN (mesas.php · vista mapa)
   ============================================================ */
.salon-ctrl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.vista-switch { display:flex; gap:4px; padding:3px; border-radius:10px;
  background:var(--panel-2); border:1px solid var(--line); }
.vista-switch button { cursor:pointer; border:none; background:transparent; color:var(--ink-soft);
  font-family:inherit; font-weight:700; font-size:13px; padding:7px 14px; border-radius:7px;
  white-space:nowrap; }
.vista-switch button.is-active { background:var(--panel); color:var(--ink); box-shadow:var(--shadow); }

.plano-zoom { display:flex; gap:4px; padding:3px; border-radius:10px;
  background:var(--panel-2); border:1px solid var(--line); }
.plano-zoom .zbtn { width:30px; height:30px; border-radius:7px; cursor:pointer;
  border:none; background:transparent; color:var(--ink-soft);
  font-size:15px; line-height:1; font-family:inherit; font-weight:700; }
.plano-zoom .zbtn:hover { background:var(--panel); color:var(--ink); }

/* El comedor ocupa el ancho completo de la pantalla */
.plano-scroll {
  display:block; overflow:auto; padding:18px; margin-bottom:14px; min-height:58vh;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
}
.plano {
  --cell:64px;
  position:relative; margin:0 auto; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  background-image:
    linear-gradient(to right,  var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
}

/* Mesa dentro del plano */
.pmesa {
  --f-num:24px; --f-sub:11px;
  position:absolute; margin:4px; cursor:pointer; user-select:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:var(--panel); border:2px solid var(--line); color:var(--ink);
  text-align:center; overflow:hidden; padding:4px;
  transition:transform .14s, box-shadow .14s, border-color .14s;
  -webkit-tap-highlight-color:transparent;
}
.pmesa.cuadrada { border-radius:14px; }
.pmesa.redonda  { border-radius:50%; }
.pmesa:hover    { transform:translateY(-2px); box-shadow:var(--shadow); z-index:2; }
.pmesa:active   { transform:none; }

.pm-num   { font-family:'Fraunces',serif; font-weight:800; line-height:1;
  font-size:var(--f-num); }
.pm-sub   { font-size:var(--f-sub); font-weight:700; color:var(--ink-dim); line-height:1.25;
  max-width:96%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-sub.warn  { color:var(--red); }
.pm-sub.mozo  { color:var(--ink-soft); }
.pm-total { font-size:calc(var(--f-sub) * 1.25); font-weight:800; color:var(--brand);
  line-height:1.2; font-family:'Fraunces',serif; }

/* En las mesas chicas solo entra el número */
.pmesa.t-chica .pm-sub, .pmesa.t-chica .pm-total { display:none; }
/* En las medianas, el mesero se omite para no amontonar */
.pmesa.t-mediana .pm-sub.mozo { display:none; }

/* Aviso de productos sin enviar a cocina */
.pm-alert { position:absolute; top:4px; right:6px; font-size:10px; font-weight:800;
  background:var(--red); color:#fff; border-radius:20px; padding:1px 6px; line-height:1.5; }

/* ── Estados ── */
.pmesa.libre    { border-color:var(--green); background:rgba(22,163,74,.10); }
.pmesa.libre .pm-num { color:var(--green); }
.pmesa.libre:hover   { background:rgba(22,163,74,.20); }

.pmesa.ocupada  { border-color:var(--brand); background:rgba(217,119,6,.12);
  animation:planoLatir 2.6s ease-in-out infinite; }
.pmesa.consumo  { border-color:var(--green); background:rgba(22,163,74,.20); }
.pmesa.retirar  { border-color:var(--red);   background:rgba(220,38,38,.16);
  animation:planoUrgente 1.1s ease-in-out infinite; }
.pmesa.cuenta   { border-color:var(--blue);  background:rgba(37,99,235,.14); }
.pmesa.limpiar  { border-color:var(--ink-dim); background:var(--panel-2);
  border-style:dashed; color:var(--ink-dim); }
.pmesa.esperando{ border-style:dashed; background:var(--panel-2); }
.pmesa.apurar   { border-color:var(--brand-2); background:rgba(245,158,11,.26);
  animation:planoUrgente 1.4s ease-in-out infinite; }

@keyframes planoLatir  { 0%,100%{ box-shadow:0 0 0 0 rgba(217,119,6,.30) }
                         50%    { box-shadow:0 0 0 8px rgba(217,119,6,0) } }
@keyframes planoUrgente{ 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.40) }
                         50%    { box-shadow:0 0 0 9px rgba(220,38,38,0) } }

/* Mesas de este sector que el admin todavía no ubicó en el plano */
.plano-pend { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; margin-bottom:14px; border-radius:var(--radius);
  background:var(--panel-2); border:1px dashed var(--line); }
.plano-vacio { padding:48px 18px; text-align:center; color:var(--ink-dim); }

/* Celular: el plano usa todo el alto útil y se puede desplazar con el dedo */
@media(max-width:600px){
  .salon-ctrl { width:100%; justify-content:space-between; }
  .plano-scroll { padding:10px; min-height:62vh; }
  .pm-alert { top:2px; right:3px; padding:0 5px; }
}

/* ============================================================
   REPORTES E INDICADORES (reportes.php)
   ============================================================ */
.rp-tabs { display:flex; gap:6px; margin-top:18px; overflow-x:auto; padding-bottom:2px; }
.rp-tab { white-space:nowrap; cursor:pointer; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  font-family:inherit; font-weight:700; font-size:13.5px; }
.rp-tab:hover { color:var(--ink); border-color:var(--ink-dim); }
.rp-tab.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* Variación contra el período anterior */
.kpi-var { display:inline-block; margin-top:4px; font-size:12px; font-weight:800; }
.kpi-var.up   { color:var(--green); }
.kpi-var.down { color:var(--red); }
.kpi-eq { display:inline-block; margin-top:4px; font-size:12px; font-weight:800; color:var(--ink-dim); }
.stat-sub { margin-top:3px; font-size:11.5px; color:var(--ink-dim); font-weight:600; }

/* Gráfico de líneas */
.rp-chart { width:100%; height:auto; max-height:300px; display:block; }
.rp-chart circle:hover { r:5; }
.rp-leyenda { display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin-top:8px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.rp-leyenda i { display:inline-block; width:12px; height:3px; border-radius:2px;
  margin-right:6px; vertical-align:middle; }

/* Barra roja (gastos) reutilizando el .track/.fill del resto del sistema */
.bar-row .fill.roja { background:var(--red); }

/* Alta de gastos */
.rp-gasto-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.rp-gasto-form .field { flex:1; min-width:120px; }
.rp-gasto-form .btn { padding:11px 22px; }
@media(max-width:600px){
  .rp-gasto-form .field { min-width:100%; }
  .rp-gasto-form .btn   { width:100%; }
}

/* ── Modal de configuración de mesa (sillas, forma, tamaño) ── */
.mm-preview { display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px; margin-bottom:14px; border-radius:var(--radius);
  background:var(--bg-2); border:1px solid var(--line); }
.mm-preview .sub { margin:0; font-size:12.5px; }
.mm-lienzo { position:relative; display:grid; place-items:center; }
.mm-lienzo .mesa-box { position:relative; }

.sillas-chips { display:flex; gap:7px; flex-wrap:wrap; }
.silla-chip { cursor:pointer; padding:9px 13px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-soft);
  font-family:inherit; font-weight:800; font-size:14px; }
.silla-chip small { font-weight:600; font-size:11px; color:var(--ink-dim); }
.silla-chip:hover { border-color:var(--ink-dim); color:var(--ink); }
.silla-chip.on { border-color:var(--brand); background:rgba(217,119,6,.12); color:var(--ink); }
.silla-chip.on small { color:var(--brand); }

/* Mesa a la que todavía no se le indicaron las sillas */
.mesa-top.sin-sillas { border-style:dashed; }
.aviso-sillas { position:absolute; top:2px; right:5px; font-size:11px; line-height:1; }

/* ============================================================
   IDENTIDAD VISUAL · verde de lujo + tipografía editorial
   Referencias: Toast (display + texto, escala definida),
   Square y Lightspeed (interfaz sobria, color con significado).
   Regla de oro: el VERDE es la marca; el ÁMBAR solo significa
   "mesa ocupada / requiere atención". Nunca se mezclan.
   ============================================================ */

/* ── Tipografía ── */
body {
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  letter-spacing: .005em;
}
h1, h2, h3, .brand, .login-logo {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  letter-spacing: -.012em;
}
h1 { font-size: 27px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }

/* Cifras siempre alineadas: precios, totales, relojes y contadores */
.stat-value, .mesa-total, .mv-total, .dt-total .n, .pcard-precio, .mm-total .val,
.pm-total, .ticket-total .amount, .rp-tabla, .mesa-num, .pm-num, .mesa-time,
.esp-seg, .limp-seg { font-variant-numeric: tabular-nums; }

/* Etiquetas de formulario: mayúsculas con aire (patrón Square) */
.field > label {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-dim);
}

/* ── Menú superior ── */
.topbar { height: 56px; box-shadow: 0 1px 0 var(--line); }
.brand-name { font-weight: 600; letter-spacing: 0; font-size: 18px; }
.brand-mark, [data-theme="dark"] .brand-mark { color: var(--brand); }
.nav { gap: 3px; }
.nav-link {
  font-weight: 600; font-size: 14.5px; padding: 7px 13px; border-radius: 8px;
  position: relative; transition: background .14s, color .14s;
}
.nav-link:hover { background: var(--brand-soft); color: var(--brand); }
.nav-link.is-active {
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 10px rgba(15,107,79,.28);
}
[data-theme="dark"] .nav-link.is-active { color: #06231a; }

/* ── Botón principal: verde de la casa ── */
.btn { background: var(--brand); color: #fff; font-weight: 700; letter-spacing: .01em; }
.btn:hover { background: var(--brand-2); opacity: 1; }
[data-theme="dark"] .btn { color: #06231a; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn-dark { background: var(--ink); color: var(--bg); }

/* Foco visible y elegante (accesibilidad) */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ── Filo dorado: detalles, nunca superficies ── */
.card { border-radius: 12px; }
.stat { border-radius: 12px; position: relative; overflow: hidden; }
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--brand), var(--gold));
}
.stat-value { font-weight: 600; }

/* ── ESTADOS: el ámbar vuelve a su lugar ── */
.b-ocupada { background: rgba(217,119,6,.10); color: var(--amber); }
.sb-ocupada .dot { background: var(--amber); }
.mesa.ocupada { border-color: var(--amber); background: rgba(217,119,6,.05); }
.mesa.ocupada::before { background: var(--amber); }
.mesa.ocupada .mesa-tag { background: var(--amber); color: #fff; }
.mm-badge.ocupada { background: var(--amber); color: #fff; }
.pmesa.ocupada { border-color: var(--amber); background: rgba(217,119,6,.12); }
.pmesa.apurar  { border-color: var(--amber-2); background: rgba(245,158,11,.26); }

/* Mesa libre: sobria (el verde fuerte queda para "en consumo") */
.pmesa.libre { border-color: var(--line); background: var(--panel); }
.pmesa.libre .pm-num { color: var(--ink-dim); }
.pmesa.libre:hover { border-color: var(--brand); background: var(--brand-soft); }
.pmesa.libre:hover .pm-num { color: var(--brand); }
.pmesa.consumo { border-color: var(--green); background: rgba(22,163,74,.18); }

/* ============================================================
   PRODUCTOS · orden por destino (Cocina / Bar) y fotos parejas
   ============================================================ */
/* Atajo: toda la carta */
.cat-todos { display:flex; justify-content:space-between; align-items:center; gap:12px;
  cursor:pointer; padding:13px 16px; margin-bottom:14px; border-radius:12px;
  border:2px solid var(--line); background:var(--panel); color:var(--ink); font-size:14px; }
.cat-todos:hover { border-color:var(--brand); }
.cat-todos.on { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.cat-todos .cat-count { font-family:'Fraunces',serif; font-size:19px; font-weight:700; }

/* Bloque por destino en el selector de categorías */
.dest-bloque { margin-bottom:18px; }
.dest-head { display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:9px 12px; margin-bottom:10px; border-radius:10px;
  background:var(--panel-2); border:1px solid var(--line); }
.dest-head:hover { border-color:var(--brand); }
.dest-head.on { background:var(--brand-soft); border-color:var(--brand); }
.dest-head h2 { margin:0; font-size:16px; }
.dest-ico { font-size:17px; }
.dest-meta { font-size:12px; color:var(--ink-dim); font-weight:600; }
.dest-ver { margin-left:auto; font-size:12px; font-weight:800; color:var(--brand); white-space:nowrap; }

.cat-barra { position:absolute; top:0; left:0; right:0; height:5px; border-radius:12px 12px 0 0; }

/* Secciones de la grilla de productos */
.pg-dest { margin-bottom:30px; }
.pg-dest-head { display:flex; align-items:center; gap:10px; margin-bottom:14px;
  padding-bottom:9px; border-bottom:2px solid var(--ink); }
.pg-dest-head h2 { margin:0; font-size:21px; }
.pg-ico { font-size:20px; }
.pg-total { margin-left:auto; font-size:12px; font-weight:700; color:var(--ink-dim); }

.pg-cat { margin-bottom:20px; }
.pg-cat-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.pg-cat-head h3 { margin:0; font-family:'Fraunces',serif; font-weight:600; font-size:15.5px; color:var(--ink); }
.pg-cat-head em { font-style:normal; font-size:11px; font-weight:800; color:var(--ink-dim);
  background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:2px 8px; }
.pg-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* Foto: el archivo se guarda CUADRADO, así que el marco también es cuadrado.
   Antes el marco era 4:3 y recortaba el producto por arriba y por abajo. */
.pcard-foto { aspect-ratio:1/1; }
.pcard-foto img { object-position:center; }
.pcard-foto .sinfoto {
  flex-direction:column; gap:2px; opacity:1;
  background:color-mix(in srgb, var(--c, var(--ink-dim)) 12%, var(--bg-2));
}
.pcard-foto .sinfoto span { font-family:'Fraunces',serif; font-size:40px; font-weight:700;
  line-height:1; color:var(--c, var(--ink-dim)); }
.pcard-foto .sinfoto small { font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-dim); }

/* ============================================================
   HOJA DE ACCIONES DE MESA · íconos de trazo, lista tipo Android
   ============================================================ */
.ic { width:20px; height:20px; display:block; flex-shrink:0; }

.mm-head { margin-bottom:10px; }
.mm-title { font-size:23px; letter-spacing:-.01em; }
.mm-close { display:grid; place-items:center; }
.mm-close svg { width:17px; height:17px; }

/* Fila de datos: badge + sillas + reloj + mesero */
.mm-meta { gap:12px; margin:0 0 16px; }
.mm-sub { display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.mm-sub .ic { width:15px; height:15px; color:var(--ink-dim); }
.mm-badge { padding:5px 11px; border-radius:7px; }

/* Consumo actual */
.mm-total { border-radius:12px; padding:15px 16px; }
.mm-total .val { font-size:27px; }

/* Lista de acciones */
.mm-acts { gap:8px; }
.mm-act {
  gap:14px; padding:14px; border-radius:12px; border:1px solid var(--line);
  align-items:center; transition:background .14s, border-color .14s;
}
.mm-act:hover { transform:none; box-shadow:none; background:var(--bg-2); border-color:var(--ink-dim); }
.mm-act:active { background:var(--panel-2); }

/* El ícono vive en un contenedor circular, como en Material */
.mm-act .ico {
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--panel-2); color:var(--ink-soft); font-size:0; text-align:initial;
}
.mm-act .ico .ic { width:21px; height:21px; }
.mm-act .t { font-weight:700; font-size:15.5px; letter-spacing:-.005em; }
.mm-act .d { font-size:12.5px; line-height:1.4; }
.mm-act .chev { width:18px; height:18px; margin-left:auto; color:var(--ink-dim); flex-shrink:0; }

/* Acción principal */
.mm-act.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.mm-act.primary:hover { background:var(--brand-2); border-color:var(--brand-2); }
.mm-act.primary .ico { background:rgba(255,255,255,.18); color:#fff; }
.mm-act.primary .d { color:#fff; opacity:.78; }
.mm-act.primary .chev { color:#fff; }
[data-theme="dark"] .mm-act.primary { color:#06231a; }
[data-theme="dark"] .mm-act.primary .ico { background:rgba(0,0,0,.18); color:#06231a; }

/* Cobrar, ver, trasladar, liberar */
.mm-act.cobrar .ico  { background:rgba(22,163,74,.13); color:var(--green); }
.mm-act.cobrar:hover { border-color:var(--green); background:rgba(22,163,74,.06); }
.mm-act.ver .ico     { background:var(--brand-soft); color:var(--brand); }
.mm-act.ver:hover    { border-color:var(--brand); background:var(--brand-soft); }
.mm-act.limpiar .ico { background:rgba(37,99,235,.12); color:var(--blue); }
.mm-act.danger .ico  { background:rgba(220,38,38,.10); color:var(--red); }
.mm-act.danger:hover { border-color:var(--red); background:rgba(220,38,38,.05); }

/* Deshabilitada: se explica por qué, no se esconde */
.mm-act:disabled { opacity:1; cursor:not-allowed; background:var(--panel-2);
  border-color:var(--line); color:var(--ink-dim); }
.mm-act:disabled .ico { background:var(--bg-2); color:var(--ink-dim); }
.mm-act:disabled .d { color:var(--red); font-weight:600; }
.mm-act:disabled .chev { opacity:.3; }

/* Mesa tomada por otro mesero */
.mm-bloqueo { display:flex; align-items:flex-start; gap:10px; }
.mm-bloqueo .ic { width:18px; height:18px; margin-top:2px; flex-shrink:0; }

/* Íconos en línea dentro del plano, las tarjetas y el switch de vista */
.pm-sub, .mesa-time, .mesa-mesero { display:inline-flex; align-items:center; gap:4px; }
.pm-sub .ic { width:1em; height:1em; opacity:.75; }
.mesa-time .ic, .mesa-mesero .ic { width:13px; height:13px; }
.vista-switch button { display:inline-flex; align-items:center; gap:6px; }
.vista-switch svg { width:15px; height:15px; }

/* Contadores sin emoji: el color y la forma ya dicen lo que pasa */
.pm-alert, .mesa-alert { display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; }

/* Ícono de las ventanas de confirmación */
.cf2-ico { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 12px;
  border-radius:50%; background:var(--panel-2); color:var(--ink-soft); font-size:0; }
.cf2-ico .ic { width:26px; height:26px; }

/* El contenedor de zonas (Cocina / Bar) apila secciones, NO tarjetas.
   Antes usaba .cat-grid y la grilla partía las secciones en columnas de 155px. */
.cat-zonas { display:block; margin-bottom:18px; }
.cat-zonas .cat-grid { margin-bottom:0; }
.cat-card { padding-top:18px; }

/* Plano sin mesas ubicadas */
.plano-vacio { display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:44px 20px; text-align:center; color:var(--ink-dim); }
.plano-vacio b { color:var(--ink); font-size:16px; }
.plano-vacio p { margin:0; max-width:420px; font-size:13.5px; line-height:1.5; }

/* Variante con costo dentro del detalle de un pedido */
.dt-li small.ex, .vt-item .n small.ex { display:block; color:var(--brand); font-weight:700; }
.dt-li small.ex b, .vt-item .n small.ex b { font-weight:800; }

/* ============================================================
   PLANO · la mesa se lee de un vistazo: ESTADO arriba, número,
   sillas o consumo abajo. Nada de mesas grises que se confunden
   con el fondo.
   ============================================================ */
.pm-tag {
  font-size:calc(var(--f-sub) * 0.95); font-weight:800; line-height:1;
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; margin-bottom:3px;
  max-width:94%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:var(--panel-2); color:var(--ink-soft);
}
/* En las mesas chicas no entra: manda el color del borde */
.pmesa.t-chica .pm-tag { display:none; }

/* ── LIBRE: verde, invita a sentarse ── */
.pmesa.libre { border-color:var(--green); background:rgba(22,163,74,.10); }
.pmesa.libre .pm-num { color:var(--green); }
.pmesa.libre .pm-tag { background:var(--green); color:#fff; }
.pmesa.libre .pm-sub { color:var(--green); opacity:.85; }
.pmesa.libre:hover   { background:rgba(22,163,74,.22); }

/* ── OCUPADA: cocina o bar todavía trabajando ── */
.pmesa.ocupada .pm-tag { background:var(--amber); color:#fff; }

/* ── EN CONSUMO: todo entregado, comiendo tranquilos ── */
.pmesa.consumo { border-color:var(--brand); background:var(--brand-soft); }
.pmesa.consumo .pm-tag { background:var(--brand); color:#fff; }
.pmesa.consumo .pm-num { color:var(--brand); }

/* ── LISTO PARA RETIRAR: hay algo en el pase ── */
.pmesa.retirar .pm-tag { background:var(--red); color:#fff; }

/* ── PIDE CUENTA ── */
.pmesa.cuenta .pm-tag { background:var(--blue); color:#fff; }

/* ── ESPERANDO PEDIDO: se sentaron y no piden ── */
.pmesa.esperando .pm-tag { background:var(--ink-soft); color:#fff; }
.pmesa.apurar .pm-tag { background:var(--amber-2); color:#3a2400; }

/* ── POR LIMPIAR ── */
.pmesa.limpiar .pm-tag { background:var(--ink-dim); color:#fff; }

.pm-total { font-size:calc(var(--f-sub) * 1.3); }

/* ============================================================
   POS EN CELULAR · se entra a pedir, no a mirar el ticket
   ============================================================ */
/* Botón "Ver pedido" en la barra de la carta: muestra el total en vivo */
.ct-pedido {
  display:none; align-items:center; gap:7px; flex-shrink:0; cursor:pointer;
  padding:9px 12px; border-radius:10px; font-family:inherit; font-size:12.5px; font-weight:700;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-soft);
  position:relative;
}
.ct-pedido b { font-family:'Fraunces',serif; font-size:14px; color:var(--ink); }
.ct-pedido.con-items { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.ct-pedido.con-items b { color:var(--brand); }
.ct-p-n {
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:20px;
  background:var(--brand); color:#fff; font-size:11px; font-weight:800;
}

/* Solo en celular */
.solo-movil { display:none; }
@media(max-width:900px){
  .ct-pedido  { display:flex; }
  .solo-movil { display:flex; }
  .ct-p-lbl   { display:none; }   /* en pantallas chicas basta el monto */
}
@media(min-width:420px) and (max-width:900px){
  .ct-p-lbl { display:inline; }
}

/* ============================================================
   ASISTENTE DE BIENVENIDA · tutorial con progreso real
   ============================================================ */
.ob-emoji { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 10px;
  border-radius:16px; background:var(--brand-soft); color:var(--brand); font-size:0; }
.ob-emoji .ic { width:28px; height:28px; }
.ob-opt .em { display:grid; place-items:center; width:40px; height:40px; margin:0 auto 8px;
  border-radius:11px; background:var(--panel-2); color:var(--brand); font-size:0; }
.ob-opt .em .ic { width:21px; height:21px; }
.ob-opt.sel .em { background:var(--brand); color:#fff; }

.ob-progreso { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ob-barra { flex:1; height:8px; border-radius:20px; background:var(--panel-2); overflow:hidden; }
.ob-barra i { display:block; height:100%; border-radius:20px; background:var(--brand);
  transition:width .4s ease; }
#obProgTxt { font-size:12.5px; font-weight:800; color:var(--ink-soft); white-space:nowrap; }

.ob-checklist { display:grid; gap:8px; }
.ob-item { display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:12px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); transition:border-color .14s, background .14s; }
.ob-item:hover { border-color:var(--brand); background:var(--brand-soft); }
.ob-n { display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--panel-2); color:var(--ink-dim); font-weight:800; font-size:13px; flex-shrink:0; }
.ob-item.ok .ob-n { background:var(--green); color:#fff; }
.ob-item.ok b { color:var(--ink-soft); }
.ob-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ob-txt b { font-size:14px; }
.ob-txt small { font-size:12px; color:var(--ink-dim); }
.ob-ir { margin-left:auto; font-size:12px; font-weight:800; color:var(--brand); flex-shrink:0; }

/* ============================================================
   GUÍA DENTRO DEL SISTEMA
   Barra de primeros pasos + ayuda de cada pantalla + guia.php
   ============================================================ */

/* ── Barra fija de primeros pasos (hasta que el local está listo) ── */
.pp-barra { display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:11px 16px; background:var(--brand-soft);
  border-bottom:1px solid var(--line); }
.pp-izq { display:flex; align-items:center; gap:11px; min-width:0; }
.pp-ic { display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:var(--brand); color:#fff; flex-shrink:0; }
.pp-ic .ic { width:19px; height:19px; }
.pp-izq b { display:block; font-size:14px; color:var(--ink); }
.pp-izq small { display:block; font-size:12.5px; color:var(--ink-soft); }
.pp-der { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pp-prog { display:flex; align-items:center; gap:8px; }
.pp-track { width:90px; height:7px; border-radius:20px; background:var(--panel-2); overflow:hidden; }
.pp-track i { display:block; height:100%; border-radius:20px; background:var(--brand); }
.pp-prog span { font-size:12px; font-weight:800; color:var(--brand); }
.pp-todo { font-size:12.5px; font-weight:700; color:var(--ink-soft); text-decoration:underline; }
.pp-todo:hover { color:var(--brand); }
@media(max-width:640px){
  .pp-barra { padding:10px 12px; }
  .pp-der { width:100%; justify-content:space-between; }
}

/* ── Ayuda de la pantalla actual (desplegable) ── */
.ayuda-pantalla { margin:14px 16px 0; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); overflow:hidden; }
.ayuda-pantalla summary { display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:12px 14px; list-style:none; }
.ayuda-pantalla summary::-webkit-details-marker { display:none; }
.ap-ic { display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:var(--brand-soft); color:var(--brand); flex-shrink:0; }
.ap-ic .ic { width:17px; height:17px; }
.ayuda-pantalla summary b { font-size:14px; white-space:nowrap; }
.ap-sub { font-size:12.5px; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0; }
.ap-chev { margin-left:auto; color:var(--ink-dim); flex-shrink:0; display:grid; place-items:center; }
.ap-chev .ic { width:16px; height:16px; transform:rotate(90deg); transition:transform .2s; }
.ayuda-pantalla[open] .ap-chev .ic { transform:rotate(-90deg); }
.ap-pasos { margin:0; padding:0 18px 14px 46px; display:grid; gap:7px; }
.ap-pasos li { font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
@media(max-width:760px){ .ap-sub { display:none; } }

/* ── Página Guía ── */
.gp-contador { font-family:'Fraunces',serif; font-size:15px; color:var(--ink-dim); }
.gp-contador b { font-size:26px; color:var(--brand); }
.gp-track { height:9px; border-radius:20px; background:var(--panel-2);
  overflow:hidden; margin-bottom:18px; }
.gp-track i { display:block; height:100%; border-radius:20px; background:var(--brand);
  transition:width .5s ease; }

.gp-lista { display:grid; gap:10px; }
.gp-item { display:flex; align-items:center; gap:13px; padding:13px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.gp-item.ok { background:var(--bg-2); }
.gp-n { display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--panel-2); color:var(--ink-dim); font-weight:800; font-size:14px; flex-shrink:0; }
.gp-item.ok .gp-n { background:var(--green); color:#fff; }
.gp-item.ok .gp-n .ic { width:17px; height:17px; stroke-width:3; }
.gp-txt { flex:1; min-width:0; }
.gp-txt b { display:block; font-size:14.5px; }
.gp-txt b em { font-style:normal; font-size:11px; font-weight:800; color:var(--ink-dim);
  background:var(--panel-2); border-radius:20px; padding:2px 8px; margin-left:6px; }
.gp-txt small { display:block; font-size:12.5px; color:var(--ink-dim); margin-top:2px; }
.gp-item .btn { flex-shrink:0; }
@media(max-width:600px){
  .gp-item { flex-wrap:wrap; }
  .gp-item .btn { width:100%; }
}

/* Módulos explicados */
.guia-mods { display:grid; gap:10px; }
.guia-mod { border:1px solid var(--line); border-radius:12px; background:var(--panel);
  overflow:hidden; }
.guia-mod summary { display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:14px; list-style:none; }
.guia-mod summary::-webkit-details-marker { display:none; }
.guia-mod:hover { border-color:var(--brand); }
.gm-ic { display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--brand-soft); color:var(--brand); flex-shrink:0; }
.gm-ic .ic { width:20px; height:20px; }
.gm-txt { min-width:0; }
.gm-txt b { display:block; font-size:15px; }
.gm-txt small { display:block; font-size:12.5px; color:var(--ink-dim); margin-top:2px; }
.gm-chev { margin-left:auto; color:var(--ink-dim); flex-shrink:0; display:grid; place-items:center; }
.gm-chev .ic { width:17px; height:17px; transform:rotate(90deg); transition:transform .2s; }
.guia-mod[open] .gm-chev .ic { transform:rotate(-90deg); }
.gm-body { padding:0 16px 16px 64px; }
.gm-body ol { margin:0 0 14px; padding-left:18px; display:grid; gap:8px; }
.gm-body li { font-size:14px; line-height:1.55; color:var(--ink-soft); }
@media(max-width:600px){ .gm-body { padding-left:16px; } }

.guia-soporte { display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-top:20px; }

/* Botón de tema: ahora dibuja luna/sol en SVG */
#btnTheme { display:grid; place-items:center; }
#btnTheme svg { width:17px; height:17px; }

/* ============================================================
   MANUAL DEL SISTEMA (guia.php)
   ============================================================ */
.manual-wrap { display:grid; grid-template-columns:250px 1fr; gap:20px;
  align-items:start; margin-top:20px; }

/* Índice lateral, fijo mientras se lee */
.manual-idx { position:sticky; top:70px; }
.mi-buscar input { width:100%; padding:11px 13px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font-family:inherit; font-size:14px; margin-bottom:10px; }
.manual-idx nav { display:grid; gap:2px; }
.manual-idx a { display:flex; align-items:center; gap:9px; text-decoration:none;
  padding:9px 11px; border-radius:9px; color:var(--ink-soft);
  font-size:13.5px; font-weight:600; transition:background .12s, color .12s; }
.manual-idx a:hover { background:var(--brand-soft); color:var(--brand); }
.manual-idx a .ic { width:17px; height:17px; flex-shrink:0; }

/* Secciones */
.manual-body { display:grid; gap:18px; min-width:0; }
.man-sec { background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:22px; scroll-margin-top:78px; }
.man-cab { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px;
  padding-bottom:16px; border-bottom:1px solid var(--line); }
.man-ic { display:grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:var(--brand); color:#fff; flex-shrink:0; }
.man-ic .ic { width:23px; height:23px; }
.man-cab h2 { margin:0 0 4px; font-size:21px; }
.man-cab p { margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5; }

.man-bloques { display:grid; gap:14px; }
.man-b { padding-left:14px; border-left:3px solid var(--line); }
.man-b:hover { border-left-color:var(--brand); }
.man-b-cab { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.man-b-cab b { font-size:15px; color:var(--ink); }
.man-b-cab span { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft); border-radius:20px; padding:2px 9px; }
.man-b p { margin:0 0 8px; font-size:14px; line-height:1.6; color:var(--ink-soft); }

/* Consejos */
.man-tip { display:flex; align-items:flex-start; gap:10px; margin-top:16px;
  padding:12px 14px; border-radius:11px; background:var(--bg-2);
  border:1px dashed var(--line); font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.man-tip .ic { width:17px; height:17px; color:var(--gold); flex-shrink:0; margin-top:2px; }

.man-vacio { text-align:center; padding:40px; color:var(--ink-dim); }

@media(max-width:900px){
  .manual-wrap { grid-template-columns:1fr; }
  .manual-idx { position:static; }
  .manual-idx nav { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); display:grid; }
  .man-sec { padding:18px; }
}