/* Mon Petit Bistro POS — sistema visual */
:root {
  --crema: #f5f0e8; --crema-2: #efe8dc; --papel: #fffdf9; --linea: #e6ddcf; --linea-2: #d8cdbb;
  --tinta: #1f1b17; --tinta-2: #4a433b; --tinta-3: #7d7366; --tinta-4: #a89d8e;
  --azul: #1d2a3f; --azul-2: #27374f; --azul-3: #34486a;
  --burdeos: #8a1f2d; --burdeos-2: #a62a3a; --burdeos-suave: #f6e4e4;
  --laton: #b88a3e; --laton-suave: #f5ead3;
  --verde: #2f7a4f; --verde-suave: #e2f1e6; --ambar: #c27b0e; --ambar-suave: #fbeed2;
  --azul-info: #2d5f9a; --azul-info-suave: #e3ecf7; --rojo: #b42318; --rojo-suave: #fde8e6;
  --r: 12px; --r-s: 8px; --r-l: 18px;
  --sombra-1: 0 1px 2px rgba(31, 27, 23, .06), 0 1px 1px rgba(31, 27, 23, .04);
  --sombra-2: 0 6px 18px -6px rgba(31, 27, 23, .18), 0 2px 4px rgba(31, 27, 23, .05);
  --sombra-3: 0 24px 60px -12px rgba(20, 16, 12, .35);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body { margin: 0; font: 14px/1.45 var(--sans); color: var(--tinta); background: var(--crema); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.tab-num, .num { font-variant-numeric: tabular-nums; }
.ico { flex: none; }
::selection { background: var(--laton-suave); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linea-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-s);
  border: 1px solid var(--linea-2); background: var(--papel); color: var(--tinta); font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s; box-shadow: var(--sombra-1); }
.btn:hover { background: #fff; border-color: var(--tinta-4); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-3); border-color: var(--azul-3); }
.btn-acento { background: var(--burdeos); border-color: var(--burdeos); color: #fff; }
.btn-acento:hover { background: var(--burdeos-2); border-color: var(--burdeos-2); }
.btn-exito { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-exito:hover { filter: brightness(1.08); background: var(--verde); }
.btn-peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-peligro:hover { background: #c8352a; border-color: #c8352a; }
.btn-fantasma { background: transparent; border-color: transparent; box-shadow: none; }
.btn-fantasma:hover { background: rgba(31, 27, 23, .06); border-color: transparent; }
.btn-s { height: 32px; padding: 0 11px; font-size: 13px; }
.btn-l { height: 52px; padding: 0 22px; font-size: 16px; border-radius: var(--r); }
.btn-bloque { width: 100%; }
.btn-icono { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--r-s); border: 0; background: transparent; cursor: pointer; color: var(--tinta-2); }
.btn-icono:hover { background: rgba(31, 27, 23, .07); color: var(--tinta); }
.grupo-btn { display: flex; gap: 8px; flex-wrap: wrap; }
kbd { font: 600 11px var(--sans); padding: 1px 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .55; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: 12px; font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; }
.campo small { color: var(--tinta-3); font-size: 12px; }
input:not([type]), input[type=text], input[type=tel], input[type=number], input[type=password], input[type=date], input[type=email], input[type=search], select, textarea, .input {
  height: 40px; padding: 0 12px; border: 1px solid var(--linea-2); border-radius: var(--r-s); background: #fff; outline: none; width: 100%;
  transition: border-color .15s, box-shadow .15s; }
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--azul-3); box-shadow: 0 0 0 3px rgba(52, 72, 106, .15); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.span2 { grid-column: span 2; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--azul); }
.buscador { position: relative; }
.buscador .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.buscador input { padding-left: 38px; }

/* ---------- Login ---------- */
.login { height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-arte { position: relative; background: var(--azul); color: #f4ead9; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.login-arte::before { content: ''; position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 22px, transparent 22px 44px), radial-gradient(120% 80% at 100% 0%, rgba(184,138,62,.25), transparent 60%); }
.login-arte::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: repeating-linear-gradient(90deg, var(--burdeos) 0 34px, #f4ead9 34px 68px); opacity: .9; }
.marca { position: relative; display: flex; align-items: center; gap: 14px; }
.marca-logo { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--laton); display: grid; place-items: center; font: italic 600 22px var(--serif); color: var(--laton); }
.login-arte h1 { position: relative; font: 500 64px/1 var(--serif); letter-spacing: -.02em; }
.login-arte h1 em { color: var(--laton); font-style: italic; }
.login-arte p { position: relative; max-width: 440px; color: rgba(244, 234, 217, .72); font-size: 16px; }
.login-panel { display: grid; place-items: center; padding: 32px 40px; background: var(--papel); overflow: auto; }
.login-caja { width: min(420px, 100%); }
.login-caja h2 { font: 600 28px var(--serif); margin-bottom: 4px; }
.login-caja .login-sub { color: var(--tinta-3); margin: 0 0 22px; }
.usuarios-login { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-bottom: 20px; }
.usuario-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--linea); border-radius: var(--r); background: #fff; cursor: pointer; transition: all .15s; }
.usuario-btn:hover { border-color: var(--tinta-4); }
.usuario-btn.sel { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29, 42, 63, .14); }
.usuario-btn b { font-size: 13px; }
.usuario-btn small { font-size: 11px; color: var(--tinta-3); text-transform: capitalize; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex: none; }
.avatar.s { width: 28px; height: 28px; font-size: 12px; }
.pin-puntos { display: flex; justify-content: center; gap: 12px; margin: 6px 0 18px; }
.pin-puntos span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linea-2); transition: all .15s; }
.pin-puntos span.lleno { background: var(--azul); border-color: var(--azul); transform: scale(1.1); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tecla { height: 54px; border-radius: var(--r); border: 1px solid var(--linea); background: #fff; font-size: 22px; font-weight: 550; cursor: pointer; transition: all .1s; font-variant-numeric: tabular-nums; }
.tecla:hover { background: var(--crema); }
.tecla:active { transform: scale(.96); background: var(--crema-2); }

/* ---------- Estructura ---------- */
.app { height: 100%; display: grid; grid-template-columns: 92px 1fr; grid-template-rows: 60px 1fr; }
.lateral { grid-row: span 2; background: var(--azul); display: flex; flex-direction: column; align-items: stretch; padding: 12px 8px; gap: 4px; }
.lateral .marca-logo { width: 48px; height: 48px; font-size: 19px; margin: 2px auto 14px; }
.nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 9px; border-radius: var(--r); color: rgba(244, 234, 217, .62);
  text-decoration: none; font-size: 11px; font-weight: 550; letter-spacing: .01em; transition: background .15s, color .15s; border: 0; background: none; cursor: pointer; }
.nav-btn:hover { background: rgba(255, 255, 255, .06); color: #f4ead9; }
.nav-btn.activo { background: rgba(244, 234, 217, .12); color: #fff; }
.nav-btn.activo::before { content: ''; position: absolute; left: -8px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--laton); }
.nav-btn .badge { position: absolute; top: 4px; right: 12px; }
.lateral .espacio { flex: 1; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--burdeos-2); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.superior { display: flex; align-items: center; gap: 16px; padding: 0 22px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.superior h1 { font: 600 20px var(--serif); }
.superior .migas { color: var(--tinta-3); font-size: 13px; }
.superior .der { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.estado-caja { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--linea); background: #fff; cursor: pointer; }
.estado-caja .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-4); }
.estado-caja.abierta .punto { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.estado-caja.cerrada { color: var(--rojo); }
.estado-caja.cerrada .punto { background: var(--rojo); }
.reloj { font: 600 15px var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.yo { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--linea); }
.yo b { display: block; font-size: 13px; line-height: 1.2; }
.yo small { color: var(--tinta-3); font-size: 11px; text-transform: capitalize; }
.contenido { overflow: auto; position: relative; }
.vista { padding: 22px 26px 40px; max-width: 1500px; margin: 0 auto; }
.vista-full { height: 100%; }

/* ---------- Tarjetas y tablas ---------- */
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra-1); }
.tarjeta-cab { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.tarjeta-cab h3 { font-size: 15px; }
.tarjeta-cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tarjeta-cuerpo { padding: 18px 20px; }
.cab-vista { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cab-vista h2 { font: 600 26px var(--serif); letter-spacing: -.015em; }
.cab-vista p { margin: 4px 0 0; color: var(--tinta-3); }
.cab-vista .der { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--crema-2); border-radius: 10px; border: 1px solid var(--linea); }
.tab { height: 34px; padding: 0 14px; border-radius: 8px; border: 0; background: none; cursor: pointer; font-weight: 550; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 7px; }
.tab:hover { color: var(--tinta); }
.tab.activo { background: #fff; color: var(--tinta); box-shadow: var(--sombra-1); }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabla th { position: sticky; top: 0; z-index: 1; background: var(--crema); text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 650; padding: 10px 14px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .1s; }
.tabla tbody tr:hover { background: #fbf8f2; }
.tabla .der, .der-txt { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla-cont { overflow: auto; max-height: calc(100vh - 260px); border-radius: 0 0 var(--r-l) var(--r-l); }
.muted { color: var(--tinta-3); }
.peq { font-size: 12px; }
.fuerte { font-weight: 650; }
.rojo { color: var(--rojo); } .verde { color: var(--verde); } .ambar { color: var(--ambar); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 650; white-space: nowrap; background: var(--crema-2); color: var(--tinta-2); }
.chip-libre, .chip-entregado, .chip-pagada, .chip-vigente, .chip-aplicada { background: var(--verde-suave); color: var(--verde); }
.chip-ocupada, .chip-abierta, .chip-enviado { background: var(--azul-info-suave); color: var(--azul-info); }
.chip-preparando, .chip-espera, .chip-bajo, .chip-pendiente { background: var(--ambar-suave); color: #8a5a06; }
.chip-listo { background: #d9f2e2; color: #1f6a3f; }
.chip-por_pagar { background: var(--burdeos-suave); color: var(--burdeos); }
.chip-cancelado, .chip-cancelada, .chip-agotado { background: var(--rojo-suave); color: var(--rojo); }
.vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--tinta-4); text-align: center; }
.vacio p { margin: 0; max-width: 300px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 16px 18px; box-shadow: var(--sombra-1); }
.kpi span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); font-weight: 650; }
.kpi b { display: block; font: 600 26px/1.15 var(--serif); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi small { color: var(--tinta-3); }
.kpi.acento { background: var(--azul); border-color: var(--azul); color: #f4ead9; }
.kpi.acento span, .kpi.acento small { color: rgba(244, 234, 217, .7); }

/* ---------- Modales y avisos ---------- */
.modal-fondo { position: fixed; inset: 0; z-index: 50; background: rgba(24, 20, 16, .42); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .18s; }
.modal-fondo.in { opacity: 1; }
.modal { width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--papel); border-radius: var(--r-l); box-shadow: var(--sombra-3); transform: translateY(10px) scale(.985); transition: transform .22s var(--ease); outline: none; }
.modal-fondo.in .modal { transform: none; }
.modal-cab { display: flex; align-items: center; gap: 10px; padding: 18px 22px 14px; }
.modal-cab h2 { font: 600 20px var(--serif); flex: 1; }
.modal-cuerpo { padding: 4px 22px 18px; overflow: auto; }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--linea); background: #fcf9f4; border-radius: 0 0 var(--r-l) var(--r-l); }
.texto-modal { margin: 0; color: var(--tinta-2); font-size: 15px; }
.sub-modal { margin: 0 0 10px; color: var(--tinta-3); text-align: center; }
#toasts { position: fixed; z-index: 90; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; background: var(--tinta); color: #fff; font-weight: 550; box-shadow: var(--sombra-2); opacity: 0; transform: translateY(8px); transition: all .25s var(--ease); max-width: 560px; }
.toast.in { opacity: 1; transform: none; }
.toast-ok .ico { color: #8fd6a8; }
.toast-error { background: var(--rojo); }
.toast-aviso { background: #8a5a12; }

/* ---------- Plano de mesas ---------- */
.salon { display: grid; grid-template-columns: 1fr 360px; grid-template-rows: minmax(0, 1fr); height: 100%; }
.salon-plano { display: flex; flex-direction: column; min-width: 0; }
.salon-barra { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--linea); background: var(--papel); flex-wrap: wrap; }
.leyenda { display: flex; gap: 14px; margin-left: auto; font-size: 12px; color: var(--tinta-3); flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lienzo-cont { flex: 1; min-height: 0; overflow: auto; padding: 20px; }
.lienzo { position: relative; overflow: hidden; border-radius: 22px; border: 1px dashed var(--linea-2);
  background-color: #f9f5ee; background-image: radial-gradient(var(--linea) 1px, transparent 1px); background-size: 22px 22px; }
.lienzo-mesas { position: absolute; inset: 0 auto auto 0; width: 0; height: 0; transform-origin: 0 0; }
.lienzo.editando { outline: 2px solid var(--laton); outline-offset: 4px; }
.mesa { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; user-select: none;
  border-radius: 16px; background: #fff; border: 2px solid var(--linea-2); box-shadow: var(--sombra-1); transition: transform .12s var(--ease), box-shadow .15s; }
.mesa:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.mesa.redonda { border-radius: 50%; }
.mesa.banco { border-radius: 50%; }
.mesa .nombre { font: 650 17px var(--serif); line-height: 1; }
.mesa .det { font-size: 11px; color: var(--tinta-3); font-weight: 600; display: flex; align-items: center; gap: 3px; }
.mesa .total { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mesa .sillas { position: absolute; inset: -9px; pointer-events: none; }
.mesa .estado-dot { position: absolute; top: 7px; right: 9px; width: 9px; height: 9px; border-radius: 50%; }
.mesa.libre { border-style: dashed; background: #fffdf8; }
.mesa.libre .nombre { color: var(--tinta-3); }
.mesa.ocupada { border-color: var(--azul-info); background: var(--azul-info-suave); }
.mesa.preparando { border-color: var(--ambar); background: var(--ambar-suave); }
.mesa.listo { border-color: var(--verde); background: #ddf2e3; animation: latido 1.6s ease-in-out infinite; }
.mesa.por_pagar { border-color: var(--burdeos); background: var(--burdeos-suave); }
.mesa.sel { box-shadow: 0 0 0 4px rgba(29, 42, 63, .28), var(--sombra-2); }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(47, 122, 79, .16); } }
.lienzo.editando .mesa { cursor: grab; }
.lienzo.editando .mesa:active { cursor: grabbing; }
.salon-lado { border-left: 1px solid var(--linea); background: var(--papel); display: flex; flex-direction: column; min-height: 0; }
.salon-lado .sec { padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.salon-lado h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin-bottom: 10px; }
.lista-cuentas { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cuenta-mini { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--linea); border-radius: var(--r); background: #fff; cursor: pointer; transition: all .12s; text-align: left; width: 100%; }
.cuenta-mini:hover { border-color: var(--tinta-4); box-shadow: var(--sombra-1); }
.cuenta-mini .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--crema-2); color: var(--tinta-2); flex: none; }
.cuenta-mini b { display: block; font-size: 13.5px; }
.cuenta-mini small { color: var(--tinta-3); font-size: 12px; }
.cuenta-mini .monto { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.resumen-salon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.resumen-salon div { background: var(--crema); border-radius: 10px; padding: 10px; text-align: center; }
.resumen-salon b { display: block; font: 600 20px var(--serif); font-variant-numeric: tabular-nums; }
.resumen-salon span { font-size: 11px; color: var(--tinta-3); font-weight: 600; }

/* ---------- Comandero ---------- */
.comandero { display: grid; grid-template-columns: 200px 1fr 420px; grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 0; }
.cats { background: var(--papel); border-right: 1px solid var(--linea); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.cats h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-4); margin: 12px 8px 6px; }
.cat-btn { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-weight: 550; text-align: left; color: var(--tinta-2); }
.cat-btn:hover { background: var(--crema); }
.cat-btn.activo { background: var(--azul); color: #fff; }
.cat-btn .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cat-btn .n { margin-left: auto; font-size: 11px; opacity: .6; }
.menu { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.menu-barra { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linea); background: var(--crema); }
.menu-barra .buscador { flex: 1; }
.menu-barra .buscador input { height: 46px; font-size: 15px; border-radius: 12px; }
.platillos { flex: 1; overflow: auto; padding: 16px 18px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; align-content: start; }
.platillo { position: relative; display: flex; flex-direction: column; gap: 4px; aspect-ratio: 1 / 1; min-height: 0; padding: 16px 12px 10px; border: 1px solid var(--linea); border-radius: 14px; background: #fff;
  cursor: pointer; text-align: left; transition: transform .1s var(--ease), box-shadow .15s, border-color .15s; overflow: hidden; }
.platillo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c, var(--linea-2)); }
.platillo:hover { border-color: var(--tinta-4); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.platillo:active { transform: scale(.97); }
.platillo b { font-size: 14px; line-height: 1.22; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; padding-right: 14px; }
.platillo .precio { margin-top: auto; font: 600 16px var(--serif); font-variant-numeric: tabular-nums; }
.platillo .meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platillo .fav { position: absolute; top: 12px; right: 8px; color: var(--laton); }
.platillo.agotado { opacity: .55; }
.platillo .disp { position: absolute; bottom: 10px; right: 8px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: var(--ambar-suave); color: #8a5a06; }
.platillo.agotado .disp { background: var(--rojo-suave); color: var(--rojo); }
.platillo .pop { position: absolute; inset: 0; background: rgba(47, 122, 79, .14); opacity: 0; pointer-events: none; }
.platillo.flash .pop { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.cuenta-panel { display: flex; flex-direction: column; min-height: 0; background: var(--papel); border-left: 1px solid var(--linea); }
.cuenta-cab { padding: 14px 18px 12px; border-bottom: 1px solid var(--linea); }
.cuenta-cab .fila1 { display: flex; align-items: center; gap: 10px; }
.cuenta-cab h3 { font: 600 22px var(--serif); }
.cuenta-cab .info { display: flex; gap: 12px; margin-top: 6px; font-size: 12.5px; color: var(--tinta-3); flex-wrap: wrap; }
.cuenta-cab .info span { display: inline-flex; align-items: center; gap: 4px; }
.comensal-sel { display: flex; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--linea); overflow-x: auto; align-items: center; }
.comensal-sel span { font-size: 11.5px; color: var(--tinta-3); font-weight: 600; margin-right: 2px; white-space: nowrap; }
.com-btn { height: 30px; min-width: 34px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--linea-2); background: #fff; cursor: pointer; font-weight: 650; font-size: 12.5px; }
.com-btn.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.items { flex: 1; overflow: auto; padding: 6px 0; }
.grupo-items { padding: 6px 18px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-4); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.grupo-items::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.item { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; padding: 9px 18px; border-left: 3px solid transparent; cursor: pointer; transition: background .1s; }
.item:hover { background: #fbf7f0; }
.item.sel { background: var(--laton-suave); border-left-color: var(--laton); }
.item .cant { min-width: 30px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--crema-2); display: grid; place-items: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.item.pendiente .cant { background: var(--azul); color: #fff; }
.item .nom { font-weight: 600; line-height: 1.3; }
.item .notas { grid-column: 2; font-size: 12px; color: var(--tinta-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.item .notas .com { color: var(--burdeos); font-style: italic; }
.item .imp { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.item.cancelado .nom, .item.cancelado .imp { text-decoration: line-through; color: var(--tinta-4); }
.item.pagado { opacity: .5; }
.item-acciones { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.tiempo-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--crema-2); color: var(--tinta-2); }
.totales { padding: 12px 18px; border-top: 1px solid var(--linea); background: #fcf9f4; }
.totales .fila { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-2); padding: 2px 0; font-variant-numeric: tabular-nums; }
.totales .total { font: 600 26px var(--serif); color: var(--tinta); padding-top: 6px; align-items: baseline; }
.totales .total span:first-child { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.acciones-cuenta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 14px; border-top: 1px solid var(--linea); }
.acc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--tinta-2); transition: all .12s; }
.acc-wifi { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 8px; font-size: 12px; }
/* Más alto que los demás para que se encuentre rápido (vale en todos los tamaños de pantalla) */
.acciones-cuenta .acc-wifi { min-height: 42px; align-items: center; }
.acciones-cuenta .acc-wifi .ico { width: 19px; height: 19px; }
.acc:hover { border-color: var(--tinta-4); color: var(--tinta); }
.acc:disabled { opacity: .45; pointer-events: none; }
.botones-grandes { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; padding: 0 14px 14px; }
.botones-grandes .btn { height: 56px; font-size: 15px; border-radius: 14px; }
.botones-grandes .btn small { display: block; font-size: 11px; font-weight: 500; opacity: .75; }

/* ---------- Cobro ---------- */
.cobro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; }
.cobro-resumen { background: var(--azul); color: #f4ead9; border-radius: var(--r-l); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cobro-resumen .fila { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; color: rgba(244, 234, 217, .78); }
.cobro-resumen .grande { font: 600 40px/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; }
.cobro-resumen .etq { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 234, 217, .6); font-weight: 650; }
.cobro-resumen hr { border: 0; border-top: 1px solid rgba(244, 234, 217, .16); width: 100%; margin: 4px 0; }
.cobro-resumen .restante { font: 600 26px var(--serif); color: var(--laton); }
.cobro-resumen .restante.ok { color: #8fd6a8; }
.propinas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.prop-btn { height: 40px; border-radius: 10px; border: 1px solid rgba(244, 234, 217, .25); background: rgba(255, 255, 255, .05); color: #f4ead9; cursor: pointer; font-weight: 650; }
.prop-btn.activo { background: var(--laton); border-color: var(--laton); color: var(--azul); }
.metodos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.metodo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; border: 1px solid var(--linea); background: #fff; cursor: pointer; font-weight: 600; font-size: 12.5px; }
.metodo.activo { border-color: var(--azul); background: var(--azul); color: #fff; }
/* ¿Cómo nos conoció el cliente? (ventana antes de cobrar) */
.origenes { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 12px; margin: 6px 0 4px; }
.origen { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 6px 14px; border-radius: 16px; border: 1px solid var(--linea); background: #fff;
  cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13.5px; line-height: 1.2; color: var(--tinta); text-align: center; transition: transform .12s, box-shadow .12s, border-color .12s; }
.origen:hover { transform: translateY(-2px); border-color: var(--tinta-4); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.origen:active { transform: scale(.97); }
.origen.activo { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul) inset; }
.origen-ico { display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.14); }
.origen-ico.con-borde { border: 1px solid var(--linea); }
@media (max-width: 640px) { .origenes { grid-template-columns: repeat(3, 1fr); } }
/* Configuración de orígenes */
.origen-filas { display: flex; flex-direction: column; gap: 8px; }
.origen-fila { display: grid; grid-template-columns: 36px 1fr 150px auto; gap: 8px; align-items: center; }
.monto-input { height: 64px !important; font: 600 30px var(--serif) !important; text-align: right; font-variant-numeric: tabular-nums; border-radius: 14px !important; }
.billetes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.billete { height: 40px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; cursor: pointer; font-weight: 650; font-variant-numeric: tabular-nums; }
.billete:hover { border-color: var(--tinta-4); }
.pagos-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pago-linea { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--crema); font-weight: 600; }
.pago-linea .m { margin-left: auto; font-variant-numeric: tabular-nums; }
.cambio-grande { text-align: center; padding: 24px; }
.cambio-grande span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 650; }
.cambio-grande b { display: block; font: 600 54px var(--serif); color: var(--verde); font-variant-numeric: tabular-nums; }

/* Separar cuenta */
.split { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.sub { border: 1px solid var(--linea); border-radius: 14px; background: #fff; display: flex; flex-direction: column; min-height: 320px; transition: border-color .15s; }
.sub.destino { border-color: var(--laton); box-shadow: 0 0 0 3px var(--laton-suave); }
.sub-cab { padding: 12px 14px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sub-cab b { font: 600 16px var(--serif); }
.sub-items { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.sub-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; font-size: 13px; }
.sub-item:hover { background: var(--crema); border-color: var(--linea); }
.sub-item .q { font-weight: 700; min-width: 28px; }
.sub-item .p { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.sub-pie { padding: 12px 14px; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: 10px; }
.sub-pie b { font: 600 20px var(--serif); font-variant-numeric: tabular-nums; }

/* ---------- Cocina (KDS) ---------- */
.kds { padding: 18px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.ticket-kds { background: #fff; border-radius: 14px; border: 1px solid var(--linea); box-shadow: var(--sombra-1); overflow: hidden; display: flex; flex-direction: column; }
.ticket-kds .cab { padding: 12px 14px; display: flex; align-items: center; gap: 10px; background: var(--azul); color: #f4ead9; }
.ticket-kds .cab b { font: 600 20px var(--serif); color: #fff; }
.ticket-kds .cab .t { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.12); }
.ticket-kds.medio .cab { background: #8a5a06; }
.ticket-kds.tarde .cab { background: var(--rojo); }
.ticket-kds .sub-cab-k { padding: 7px 14px; font-size: 12px; color: var(--tinta-3); border-bottom: 1px solid var(--linea); display: flex; gap: 10px; }
.kds-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px dashed var(--linea); cursor: pointer; align-items: flex-start; transition: background .1s; }
.kds-item:hover { background: var(--crema); }
.kds-item .q { font: 700 18px var(--sans); min-width: 28px; font-variant-numeric: tabular-nums; }
.kds-item .n { font-weight: 650; font-size: 15px; line-height: 1.3; }
.kds-item .c { font-size: 12.5px; color: var(--burdeos); font-style: italic; }
.kds-item .e { margin-left: auto; }
.kds-item.preparando { background: var(--ambar-suave); }
.kds-item.listo { background: var(--verde-suave); }
.kds-item.listo .n { text-decoration: line-through; color: var(--tinta-3); }
.ticket-kds .pie { padding: 10px; display: flex; gap: 8px; }
.ticket-kds .pie .btn { flex: 1; }

/* ---------- Caja ---------- */
.caja-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.metodo-fila { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.metodo-fila:last-child { border-bottom: 0; }
.metodo-fila .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--crema-2); }
.metodo-fila b { font-variant-numeric: tabular-nums; font-size: 16px; }
.abrir-caja { max-width: 460px; margin: 40px auto; text-align: center; }
.abrir-caja .tarjeta-cuerpo { padding: 32px; }
.abrir-caja h2 { font: 600 26px var(--serif); margin: 12px 0 6px; }
.corte-tabla td input { height: 36px; text-align: right; max-width: 150px; margin-left: auto; display: block; }
.denoms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.denom { display: grid; grid-template-columns: 76px 1fr 90px; align-items: center; gap: 8px; }
.denom label { font-weight: 650; font-variant-numeric: tabular-nums; }
.denom input { height: 36px; text-align: center; }
.denom span { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.dif-pos { color: var(--verde); font-weight: 700; } .dif-neg { color: var(--rojo); font-weight: 700; }

/* ---------- Inventario / recetas ---------- */
.barra-nivel { height: 6px; border-radius: 3px; background: var(--crema-2); overflow: hidden; width: 90px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.barra-nivel i { display: block; height: 100%; border-radius: 3px; background: var(--verde); }
.barra-nivel.bajo i { background: var(--ambar); } .barra-nivel.agotado i { background: var(--rojo); }
.receta-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; min-height: calc(100vh - 210px); }
.lista-platillos { overflow: auto; max-height: calc(100vh - 210px); }
.lp-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.lp-item:hover { background: #fbf8f2; }
.lp-item.activo { background: var(--laton-suave); box-shadow: inset 3px 0 0 var(--laton); }
.lp-item b { font-weight: 600; display: block; }
.lp-item small { color: var(--tinta-3); }
.lp-item .fc { margin-left: auto; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.costeo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.costeo div { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; background: #fff; }
.costeo span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); font-weight: 650; }
.costeo b { display: block; font: 600 22px var(--serif); font-variant-numeric: tabular-nums; }
.alerta-banda { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--ambar-suave); color: #7a4e05; margin-bottom: 16px; border: 1px solid #efd9a8; }
.alerta-banda b { color: #5c3a02; }

/* ---------- Reportes ---------- */
.rep-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; }
.grafica { width: 100%; height: 230px; display: block; }
.barras-h { display: flex; flex-direction: column; gap: 10px; }
.barra-h { display: grid; grid-template-columns: 150px 1fr 96px; gap: 10px; align-items: center; font-size: 13px; }
.barra-h .pista { height: 10px; background: var(--crema-2); border-radius: 5px; overflow: hidden; }
.barra-h .pista i { display: block; height: 100%; background: var(--azul-3); border-radius: 5px; }
.barra-h .v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.barra-h .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rango { display: flex; gap: 8px; align-items: center; }
.rango input { width: 150px; height: 36px; }

/* ---------- Facturación ---------- */
.xml-vista { background: #1b1f27; color: #d6deeb; font: 12px/1.55 ui-monospace, 'Cascadia Code', Consolas, monospace; padding: 16px; border-radius: 12px; max-height: 420px; overflow: auto; white-space: pre; }
.aviso-pruebas { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--azul-info-suave); color: var(--azul-info); font-size: 13px; margin-bottom: 14px; }
.sel-ticket { display: flex; align-items: center; gap: 10px; }
.sel-ticket input { width: 18px; height: 18px; accent-color: var(--azul); }

@media (max-width: 1280px) {
  .comandero { grid-template-columns: 170px 1fr 380px; }
  .salon { grid-template-columns: 1fr 300px; }
}
@media (max-width: 1050px) {
  .comandero { grid-template-columns: 1fr 360px; }
  .cats { display: none; }
  .caja-grid, .rep-grid { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; }
  .login-arte { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-height: 780px) {
  /* Dos filas de 4, como al 80 % de zoom: con 8 en una sola fila se veía amontonado al 90–100 % */
  .acciones-cuenta { grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px 12px; }
  .acc { gap: 3px; padding: 6px 2px; font-size: 10.5px; white-space: nowrap; }
  .acc .ico { width: 17px; height: 17px; }
  .acc-wifi { font-size: 12px; gap: 8px; }
  .botones-grandes .btn { height: 48px; }
  .totales { padding: 8px 18px; }
  .totales .total { font-size: 22px; padding-top: 2px; }
  .cuenta-cab { padding: 10px 18px 8px; }
  .comensal-sel { padding: 7px 18px; }
}
[hidden] { display: none !important; }
.lateral { overflow-y: auto; scrollbar-width: none; }
@media (max-height: 720px) {
  .nav-btn { padding: 7px 2px 6px; gap: 3px; }
  .lateral .marca-logo { width: 40px; height: 40px; margin-bottom: 8px; font-size: 16px; }
}
.modal-fondo:not(.in) { pointer-events: none; }
#lineas [data-f="articulo_id"] { min-width: 230px; } #lineas [data-f="iva_tasa"] { min-width: 78px; } #lineas [data-f="descripcion"] { min-width: 140px; }
.denom { grid-template-columns: 56px 70px 1fr; }
.denom input { width: 70px; padding: 0 6px; -moz-appearance: textfield; }
.denom input::-webkit-outer-spin-button, .denom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vista-host { min-height: 100%; height: 100%; }

/* ===== VFPOS: barra superior de pestañas + cinta de opciones (estilo SICAR) ===== */
.app { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
.barra { display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 12px; background: var(--azul); color: #f4ead9; }
.barra-marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; white-space: nowrap; }
.barra-marca .marca-logo { width: 34px; height: 34px; font-size: 15px; }
.marca-texto { font: 600 16px var(--serif); }
.marca-sep { opacity: .5; margin: 0 6px; }
.marca-vf { color: var(--laton); font: 700 .82em var(--sans); letter-spacing: .08em; }
.pestanas { display: flex; align-self: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pestana { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 14px; margin-top: 8px; border-radius: 10px 10px 0 0; color: rgba(244, 234, 217, .72); text-decoration: none; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.pestana:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.pestana.activo { color: var(--azul); background: var(--papel); }
.pestana.activo .ico { color: var(--burdeos); }
.pestana .badge { position: static; }
.barra .der { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.barra .reloj { color: #f4ead9; }
.barra .yo { background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .15); color: #fff; cursor: pointer; text-align: left; font: inherit; }
.barra .yo small { color: rgba(244, 234, 217, .6); }
.btn-salir { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .08); color: #f4ead9; cursor: pointer; }
.btn-salir:hover { background: var(--burdeos); color: #fff; }
.barra .estado-caja, .estado-sync { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 15px; font: 600 12px var(--sans); border: 0; background: rgba(255, 255, 255, .08); color: #f4ead9; cursor: pointer; white-space: nowrap; }
.barra .estado-caja.cerrada { color: #ffb4a8; }
.estado-sync .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-4); }
.estado-sync.ok .punto { background: #5fd08a; box-shadow: 0 0 0 3px rgba(95, 208, 138, .2); }
.estado-sync.mal { color: #ffb4a8; }
.estado-sync.mal .punto { background: #ff7a6b; animation: latido-rojo 1.6s ease-in-out infinite; }
@keyframes latido-rojo { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 122, 107, .25); } 50% { box-shadow: 0 0 0 6px rgba(255, 122, 107, .12); } }
.estado-sync.aviso { color: #ffd38a; }
.estado-sync.aviso .punto { background: var(--ambar); }
.cinta { display: flex; align-items: stretch; gap: 16px; min-height: 74px; padding: 6px 14px; background: var(--papel); border-bottom: 1px solid var(--linea); box-shadow: 0 1px 0 rgba(0, 0, 0, .02); }
.cinta-opciones { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cinta-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 96px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-s); color: var(--tinta-2); text-decoration: none; font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.cinta-btn .ico { color: var(--azul-3); }
.cinta-btn:hover { background: var(--crema); }
.cinta-btn.activo { background: var(--laton-suave); border-color: #e7d3a6; color: var(--tinta); }
.cinta-btn.activo .ico { color: var(--burdeos); }
.cinta-titulo { margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; padding-left: 16px; border-left: 1px solid var(--linea); min-width: 0; }
.cinta-titulo h1 { font: 600 18px var(--serif); white-space: nowrap; }
.cinta-titulo .migas { font-size: 12px; color: var(--tinta-3); }
/* Las sub-secciones de cada pantalla ahora están en la cinta */
.vista-host .tabs:has(> .tab[data-tab]) { display: none; }
.login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.login-alt { margin-top: 10px; background: none; border: 0; box-shadow: none; color: var(--azul-3); text-decoration: underline; }
.chip-ok { background: var(--verde-suave); color: var(--verde); }
.chip-error { background: var(--rojo-suave); color: var(--rojo); }
@media (max-height: 780px) { .barra { height: 48px; } .cinta { min-height: 58px; padding: 4px 12px; } .cinta-btn { padding: 3px 8px; gap: 3px; } }
@media (max-width: 1180px) { .barra .reloj, .barra .yo div, .cinta-titulo { display: none; } .pestana { padding: 0 10px; } }
@media (max-width: 760px) { .marca-texto, .pestana span:not(.badge) { display: none; } }
.pestanas { flex: 1 1 auto; min-width: 0; }
.barra-marca, .barra .der { flex-shrink: 0; }
.barra .reloj { white-space: nowrap; }
.cinta-titulo { max-width: 34%; overflow: hidden; }
.cinta-titulo h1, .cinta-titulo .migas { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (max-width: 1500px) { .barra .reloj, .barra .yo div, .cinta-titulo { display: none; } }
.modo-web #corte, .modo-web [data-mov], .modo-web #abrir { display: none !important; }

/* ===== Inicio: cuadrícula de módulos (como la pantalla principal de SICAR) ===== */
.cinta-oculta { display: none; }
.inicio { max-width: 1180px; margin: 0 auto; padding: 28px 24px 40px; }
.inicio-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.inicio-cab h2 { font: 600 26px var(--serif); }
.inicio-busca { width: min(420px, 100%); }
.inicio-busca input { height: 42px; font-size: 15px; }
.modulos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.modulo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 14px; border-radius: var(--r); border: 1px solid transparent; color: var(--tinta); text-decoration: none; text-align: center; transition: background .15s, border-color .15s, transform .15s var(--ease); }
.modulo:hover, .modulo:focus-visible { background: var(--papel); border-color: var(--linea); box-shadow: var(--sombra-1); transform: translateY(-2px); }
.modulo-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--azul-info-suave); color: var(--azul-3); margin-bottom: 4px; }
.modulo:nth-child(4n+2) .modulo-ico { background: var(--laton-suave); color: #8a6526; }
.modulo:nth-child(4n+3) .modulo-ico { background: var(--burdeos-suave); color: var(--burdeos); }
.modulo:nth-child(4n+4) .modulo-ico { background: var(--verde-suave); color: var(--verde); }
.modulo b { font-size: 14.5px; }
.modulo small { font-size: 12px; color: var(--tinta-3); }
.modulo[hidden] { display: none; }

/* Comandero: mesero y cocina ven una barra sencilla */
.app-simple .cinta { display: none; }
.comandero-cab { display: flex; align-items: center; gap: 12px; color: var(--burdeos); }
.comandero-cab h2 { color: var(--tinta); margin: 0; }
.login .pin-puntos { margin-top: 18px; }
.credito { color: inherit; opacity: .7; text-decoration: none; }
.credito:hover { opacity: 1; text-decoration: underline; }
.credito-movil { display: none; margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--tinta-4); }
@media (max-width: 900px) { .credito-movil { display: block; } }

/* Diseño del ticket */
.ticket-diseno { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.ticket-opciones { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ticket-previa { position: sticky; top: 0; }
.previa-papel { padding: 18px; background: var(--crema-2); border-radius: var(--r); max-height: calc(100vh - 220px); overflow: auto; }
.previa-papel iframe { display: block; border: 0; background: #fff; min-height: 120px; box-shadow: var(--sombra-2); }
.logo-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-caja { display: grid; place-items: center; width: 140px; height: 90px; border: 1px dashed var(--linea-2); border-radius: var(--r-s); background: #fff; overflow: hidden; }
.logo-caja img { max-width: 100%; max-height: 100%; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.liga-qr { display: block; word-break: break-all; font-size: 12px; color: var(--azul-info); }
.interruptor { position: relative; display: inline-block; width: 44px; height: 24px; }
.interruptor input { opacity: 0; width: 0; height: 0; }
.interruptor span { position: absolute; inset: 0; border-radius: 12px; background: var(--linea-2); cursor: pointer; transition: background .2s; }
.interruptor span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: var(--sombra-1); }
.interruptor input:checked + span { background: var(--verde); }
.interruptor input:checked + span::after { transform: translateX(20px); }
@media (max-width: 1100px) { .ticket-diseno { grid-template-columns: 1fr; } .ticket-previa { position: static; } }

/* Importación masiva */
.imp-tipos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.imp-tipo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); color: var(--tinta-2); font: 600 13px var(--sans); cursor: pointer; text-align: center; }
.imp-tipo:hover { border-color: var(--linea-2); }
.imp-tipo.activo { border-color: var(--laton); background: var(--laton-suave); color: var(--tinta); }
.imp-tipo .ico { color: var(--azul-3); }
.imp-n { position: absolute; top: 8px; left: 10px; font-size: 11px; color: var(--tinta-4); }
.soltar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--linea-2); border-radius: var(--r); background: var(--crema); cursor: pointer; text-align: center; color: var(--tinta-2); }
.soltar:hover, .soltar.encima { border-color: var(--laton); background: var(--laton-suave); }
@media (max-width: 900px) { .imp-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Consulta de ventas */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 16px; }
.filtros .campo { min-width: 140px; }
.folio-busca { min-width: 220px !important; }
.fila-clic { cursor: pointer; }
.fila-clic:hover td { background: var(--crema); }
.dv-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; margin-bottom: 14px; }
.dv-datos span, .dv-totales span { display: block; font-size: 12px; color: var(--tinta-3); }
.dv-totales { display: flex; justify-content: flex-end; gap: 22px; margin: 12px 0; text-align: right; }
.dv-totales .grande b { font-size: 20px; }
.punto-cat { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }

/* ---------- Pantalla de inicio (como la de SICAR) ---------- */
.splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; background: #fff; color: #6b6259;
  font: 13px var(--sans); transition: opacity .4s var(--ease); }
.splash.fuera { opacity: 0; pointer-events: none; }
.splash-arriba { width: 100%; display: flex; justify-content: space-between; padding: 14px 18px; }
.splash-arriba [data-version] { color: #a39a8e; }
.splash-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.splash-giro { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.splash-giro svg { position: absolute; inset: 0; animation: giro 1.1s linear infinite; }
.splash-logo { width: 98px; height: 98px; border-radius: 50%; background: var(--azul); border: 2.5px solid var(--laton); display: grid; place-items: center;
  font: italic 600 46px Georgia, serif; color: #c99a4a; box-shadow: 0 8px 24px rgba(29, 42, 63, .25); }
.splash-nombre { font: 300 44px var(--sans); color: var(--azul); letter-spacing: .04em; line-height: 1; }
.splash-nombre small { font-size: 18px; color: var(--laton); margin-left: 4px; }
.splash-sub { color: var(--burdeos); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; margin-top: -8px; text-align: center; padding: 0 16px; }
.splash-firma { padding: 0 0 26px; text-align: center; color: var(--azul); }
.splash-firma span { display: block; font-size: 10px; letter-spacing: .3em; color: #a39a8e; text-transform: uppercase; margin-bottom: 2px; }
.splash-firma b { font: italic 600 17px Georgia, serif; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .splash-giro svg { animation-duration: 3s; } }

/* ---------- Estado del sistema ---------- */
.estado-lista { display: flex; flex-direction: column; gap: 8px; }
.estado-fila { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; }
.estado-fila .punto { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--tinta-4); }
.estado-fila.ok .punto { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.estado-fila.aviso .punto { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-suave); }
.estado-fila.mal { border-color: #f3c3bd; background: var(--rojo-suave); }
.estado-fila.mal .punto { background: var(--rojo); }
.estado-fila b { display: block; font-size: 14px; }
.estado-fila small { display: block; color: var(--tinta-3); font-size: 12.5px; margin-top: 2px; }

/* ---------- Configuración ---------- */
.tabla tr.inactivo td { opacity: .55; }
.tabla td.centro, .tabla th.centro { text-align: center; }
.tabla.permisos th:not(:first-child), .tabla.permisos td:not(:first-child) { text-align: center; width: 84px; }
.tabla.permisos td:first-child { font-size: 13px; }
.aviso-agente { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r-s); border: 1px solid var(--linea); background: #fff; }
.aviso-agente b { display: block; }
.aviso-agente span { color: var(--tinta-3); font-size: 13px; }
.aviso-agente.ok { border-color: #bfe0c9; background: var(--verde-suave); }
.aviso-agente.ok .ico { color: var(--verde); }
.aviso-agente.mal { border-color: #f1d49a; background: var(--ambar-suave); }
.aviso-agente.mal .ico { color: var(--ambar); }
.ayuda-pasos p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.ayuda-pasos p:last-child { margin: 0; }

/* ---------- Descuentos en la cuenta ---------- */
.descuentos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.descuento-opc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; cursor: pointer; text-align: left; font: inherit; }
.descuento-opc b { font: 600 22px var(--serif); color: var(--burdeos); }
.descuento-opc span { font-size: 12.5px; color: var(--tinta-2); }
.descuento-opc:hover { border-color: var(--tinta-4); }
.descuento-opc.activo { border-color: var(--burdeos); background: var(--burdeos-suave); }

/* ---------- Cobro: cuenta dividida en partes iguales ---------- */
.division-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-top: 10px; padding: 10px 12px;
  border-radius: var(--r-s); background: var(--laton-suave); border: 1px solid #e7d3a8; font-size: 13px; }
.division-aviso span { display: inline-flex; align-items: center; gap: 6px; }
.division-aviso[hidden] { display: none; }
#partes.activo { background: var(--laton-suave); border-color: var(--laton); }

/* ---------- Diseño de tickets: venta / comanda / corte ---------- */
.tipos-ticket { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.tipo-ticket { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r); background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--tinta); }
.tipo-ticket .ico { flex: none; color: var(--azul-3); }
.tipo-ticket b { display: block; font-size: 14px; }
.tipo-ticket small { display: block; font-size: 12px; color: var(--tinta-3); margin-top: 2px; }
.tipo-ticket:hover { border-color: var(--tinta-4); }
.tipo-ticket.activo { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); background: var(--azul-info-suave); }
@media (max-width: 1100px) { .tipos-ticket { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tipos-ticket { grid-template-columns: 1fr; } }

/* ---------- Clave del empleado (comandero) ---------- */
.pantalla-clave { min-height: 100%; display: grid; place-items: center; padding: 28px 16px; }
.pantalla-clave .login-caja { width: min(380px, 100%); background: #fff; border: 1px solid var(--linea); border-radius: var(--r-l); padding: 28px; box-shadow: var(--sombra-2); }
.yo-grupo { display: inline-flex; align-items: center; gap: 4px; }
.operador-salir { width: 30px !important; height: 30px !important; }

/* ---------- App instalable ---------- */
.chip-instalar { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 900; display: flex; align-items: center;
  background: var(--azul); color: #fff; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.chip-instalar button { border: 0; background: none; color: inherit; font: 600 14px var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.chip-instalar-btn { padding: 12px 6px 12px 16px; }
.chip-instalar-x { padding: 12px 14px 12px 8px; opacity: .7; }
.pasos-instalar { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
.explica { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r-s); background: var(--azul-info-suave); border: 1px solid #c9d8ec; }
.explica > .ico { flex: none; color: var(--azul-info); margin-top: 2px; }
.explica > div > b:first-child { display: block; margin-bottom: 2px; }
.explica span { font-size: 13px; color: var(--tinta-2); line-height: 1.5; }
.imp-hoja { padding: 12px 16px 6px; border-top: 1px solid var(--linea); background: var(--papel); }
.carga-masiva { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; border: 1px dashed var(--linea-2); border-radius: var(--r-s); background: #fff; font-size: 13px; color: var(--tinta-2); }
.carga-masiva > .ico { color: var(--azul-3); }
.carga-grupo { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid var(--linea); }
.carga-grupo b { font-size: 12.5px; }
.campana { position: relative; display: inline-grid; place-items: center; width: 34px; height: 30px; border-radius: 15px; background: rgba(255, 255, 255, .08); color: #ffd38a; text-decoration: none; }
.campana[hidden] { display: none; }
.campana .badge { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ambar); color: #fff; font: 700 10.5px/17px var(--sans); text-align: center; }
.campana.urgente { color: #ffb4a8; }
.campana.urgente .badge { background: var(--rojo); }
/* ---------- Filtros de catálogos ---------- */
.filtros-cab { flex-wrap: wrap; gap: 10px; }
.filtros-cab select { width: auto; max-width: 220px; }
.filtros-cab select, .filtros-lista select { height: 34px; padding: 0 10px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; font: 500 13px var(--sans); color: var(--tinta-2); }
.filtros-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 10px; }
.filtro-pocos { font-size: 13px; white-space: nowrap; }

/* ---------- WiFi para clientes (vista previa en pantalla) ---------- */
.wifi-tarjeta { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 4px; }
.wifi-qr { padding: 10px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); margin-bottom: 14px; }
.wifi-qr svg { display: block; }
.wifi-etq { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.wifi-red { font: 650 20px var(--serif); margin-bottom: 12px; word-break: break-all; }
.wifi-clave { border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 22px; }
.wifi-clave b { display: block; font: 800 24px ui-monospace, 'Cascadia Code', Consolas, monospace; letter-spacing: .05em; word-break: break-all; }

/* ===== Pantallas chicas y tablets ===== */
/* La columna de la app no debe crecer por el contenido (las pestañas se desplazan dentro de la barra). */
.app { grid-template-columns: minmax(0, 1fr); }
.barra, .cinta, .contenido { min-width: 0; }
.tarjeta, .salon-plano, .menu, .cuenta-panel { min-width: 0; }
.receta-grid { grid-template-columns: 300px minmax(0, 1fr); }
.receta-grid > * { min-width: 0; }
.receta-grid .tarjeta-cuerpo { overflow-x: auto; }
.receta-grid #filas select { min-width: 150px; }
.costeo { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cobro > *, .caja-grid > *, .rep-grid > * { min-width: 0; }
/* Tarjetas de platillo: alto fijo mínimo en vez de proporción (evita que se encimen en columnas angostas) */
.platillo { aspect-ratio: auto; min-height: 138px; }
/* Barra superior compacta */
@media (max-width: 1320px) {
  .marca-texto { display: none; }
  .barra { gap: 10px; }
}
@media (max-width: 1100px) {
  .estado-sync > span:not(.punto), .barra .estado-caja > span:not(.punto) { display: none; }
  .estado-sync, .barra .estado-caja { padding: 0 11px; }
}
@media (max-width: 900px) {
  .pestana:not(.activo) span:not(.badge) { display: none; }
  .pestana { padding: 0 12px; }
  .barra .der { gap: 6px; }
  .yo { padding-left: 8px; }
  .cinta { padding: 4px 8px; min-height: 0; }
  .cinta-btn { min-width: 78px; padding: 5px 6px; font-size: 11.5px; }
}
@media (max-width: 760px) { .pestana.activo span:not(.badge) { display: inline; } }
/* Compactación automática (main.js#ajustarBarra): se aplica por pasos solo si las pestañas no caben */
.barra.c1 .marca-texto, .barra.c1 .reloj, .barra.c1 .yo div { display: none; }
.barra.c1 { gap: 10px; }
.barra.c2 .estado-sync > span:not(.punto), .barra.c2 .estado-caja > span:not(.punto) { display: none; }
.barra.c2 .estado-sync, .barra.c2 .estado-caja { padding: 0 11px; }
.barra.c2 .der { gap: 6px; }
.barra.c3 .pestana:not(.activo) span:not(.badge) { display: none; }
.barra.c3 .pestana { padding: 0 11px; }
.barra.c4 .pestana span:not(.badge) { display: none; }
@media (max-width: 520px) { .pestana.activo span:not(.badge) { display: none; } }
/* Comandero en tablet: las categorías pasan a una fila deslizable arriba del menú */
@media (max-width: 1050px) {
  .comandero { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr); }
  .cats { display: flex; flex-direction: row; grid-column: 1; grid-row: 1; overflow-x: auto; overflow-y: hidden; padding: 8px 10px; gap: 6px;
    border-right: 0; border-bottom: 1px solid var(--linea); scrollbar-width: none; }
  .cats h4 { display: none; }
  .cat-btn { flex: none; height: 38px; padding: 0 14px; border: 1px solid var(--linea); background: #fff; white-space: nowrap; }
  .cat-btn .n { margin-left: 4px; }
  .menu { grid-column: 1; grid-row: 2; }
  .cuenta-panel { grid-column: 2; grid-row: 1 / span 2; }
  .menu-barra { padding: 10px 12px; }
  .platillos { padding: 12px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .receta-grid { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .comandero { grid-template-columns: minmax(0, 1fr) 320px; }
  .cuenta-cab, .comensal-sel, .totales { padding-left: 14px; padding-right: 14px; }
  .item { padding: 9px 14px; }
  /* Salón: el plano a lo ancho y el resumen abajo */
  .salon { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .salon-lado { border-left: 0; border-top: 1px solid var(--linea); max-height: 42vh; }
  .receta-grid { grid-template-columns: minmax(0, 1fr); }
  .lista-platillos { max-height: 320px; }
  .vista { padding: 16px 14px 32px; }
  .cab-vista h2 { font-size: 22px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span2 { grid-column: auto; }
  .dv-datos { grid-template-columns: repeat(2, 1fr); }
  .denoms { grid-template-columns: minmax(0, 1fr); }
  .cobro { grid-template-columns: minmax(0, 1fr); }
  .barra-h { grid-template-columns: 110px 1fr 80px; }
  .modal-fondo { padding: 10px; }
  .modal-cab { padding: 14px 16px 10px; }
  .modal-cuerpo { padding: 4px 16px 14px; }
  .modal-pie { padding: 12px 16px; flex-wrap: wrap; }
}
/* Teléfono o ventana muy angosta: el comandero se apila (menú arriba, cuenta abajo) */
@media (max-width: 640px) {
  .comandero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, .8fr) minmax(0, 1.2fr); }
  .cuenta-panel { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--linea); overflow-y: auto; }
  .cuenta-panel > * { flex-shrink: 0; }
  .cuenta-panel > .items { flex: 1 0 90px; }
  .acc { flex-direction: row; justify-content: center; gap: 5px; padding: 7px 2px; white-space: nowrap; overflow: hidden; }
  .botones-grandes .btn { height: 48px; }
  .metodos, .billetes { grid-template-columns: repeat(2, 1fr); }
  .propinas { grid-template-columns: repeat(3, 1fr); }
  .toast { max-width: calc(100vw - 24px); }
}
/* Pantallas táctiles: áreas de toque más grandes */
@media (pointer: coarse) {
  .btn-s { height: 38px; }
  .btn-icono { width: 42px; height: 42px; }
  .com-btn { height: 36px; min-width: 40px; }
}
.tarjeta:has(> .tabla) { overflow-x: auto; }
@media (max-width: 860px) {
  .salon-lado { max-height: 34vh; }
  .salon-lado .sec { padding: 10px 14px; }
  .salon-lado h4 { margin-bottom: 6px; }
  .resumen-salon div { padding: 6px; }
  .resumen-salon b { font-size: 17px; }
  .lista-cuentas { padding: 8px 12px; min-height: 70px; }
  .salon-barra { padding: 10px 14px; }
  .lienzo-cont { padding: 12px; }
}
/* Los avisos salen abajo a la izquierda para no tapar los botones de Enviar / Cobrar ni la cinta */
#toasts { left: 16px; right: auto; transform: none; align-items: flex-start; max-width: calc(100vw - 32px); }
body:has(.modal-fondo.in) .chip-instalar { display: none; }
/* Pantallas bajas (laptop con zoom de Windows al 125–150 %, ventana chica): todo más compacto para dejar lugar a la cuenta */
@media (max-height: 640px) {
  .barra { height: 44px; }
  .barra-marca .marca-logo { width: 30px; height: 30px; font-size: 13px; }
  .pestana { margin-top: 6px; }
  .cinta { min-height: 0; padding: 3px 10px; }
  .cinta-btn { flex-direction: row; gap: 6px; min-width: 0; padding: 6px 10px; white-space: nowrap; }
  .cinta-btn .ico { width: 16px; height: 16px; }
  .cuenta-cab { padding: 8px 14px 6px; }
  .cuenta-cab h3 { font-size: 18px; }
  .cuenta-cab .info { margin-top: 2px; }
  .comensal-sel { padding: 5px 14px; }
  .totales { padding: 6px 14px; }
  .totales .fila { font-size: 12px; padding: 0; }
  .totales .total { font-size: 20px; padding-top: 0; }
  .acciones-cuenta { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px 10px; }
  .acc { flex-direction: row; justify-content: center; padding: 6px 2px; font-size: 11px; white-space: nowrap; overflow: hidden; }
  .acc .ico { display: none; }
  .acc-wifi { grid-column: auto; font-size: 0; gap: 0; }
  .acc-wifi .ico { display: block; }
  .botones-grandes { padding: 0 10px 8px; gap: 8px; }
  .botones-grandes .btn { height: 44px; }
  .menu-barra { padding: 8px 12px; }
  .menu-barra .buscador input { height: 40px; }
  .salon-barra { padding: 8px 14px; }
  .vista { padding-top: 14px; }
}