:root {
  /* Verde de marca (Wasozky One), tomado del logo. --on-primary es un verde
     casi negro: da mucho mejor contraste sobre el verde que el blanco. */
  --primary: #7fb724;
  --primary-dark: #5f8f16;
  --primary-light: #eef8d6;
  --on-primary: #16220b;
  --link: #4a7010; /* mismo verde de marca pero oscurecido para buen contraste como texto */
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --success: #16a34a;
  --success-light: #dcfce7;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --warning: #d97706;
  --warning-light: #fef3c7;
  --sidebar-bg: #10190a;
  --sidebar-text: #c8d6bd;
  --sidebar-active: #24331a;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

#app { min-height: 100vh; }

a { color: var(--link); text-decoration: none; }
button { font-family: inherit; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f1a08 0%, #3d6014 100%);
}
.login-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.login-card h1 {
  font-size: 22px;
  margin: 0 0 4px;
}
.login-card p.sub {
  color: var(--text-muted);
  margin: 0 0 24px;
  font-size: 13px;
}
/* Fondo BLANCO, no verde: la W del logo ya es verde, y verde sobre verde la borra —
   se veía una mancha en vez de la marca, justo en la primera pantalla que ve todo el
   mundo. El contorno negro del logo necesita el blanco detrás para leerse. */
.login-logo {
  width: 52px; height: 52px; border-radius: 12px;
  background: #fff; box-shadow: 0 0 0 1px rgba(22,34,11,0.10);
  color: var(--on-primary); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; margin-bottom: 16px; overflow: hidden;
}
.login-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  font-weight: 700; color: #fff; font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .dot {
  width: 32px; height: 32px; border-radius: 8px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  overflow: hidden; flex-shrink: 0;
}
.sidebar-brand .dot img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sidebar nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.sidebar a.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; color: var(--sidebar-text);
  margin-bottom: 2px; font-size: 13.5px; font-weight: 500;
}
.sidebar a.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar a.nav-item.active { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.nav-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.38); padding: 14px 12px 4px;
}
.nav-group-label:first-child { padding-top: 2px; }
.sidebar-footer {
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12.5px;
}
.sidebar-footer .user-name { color: #fff; font-weight: 600; }
/* Versión del sistema al pie del menú. Sirve para saber de un vistazo si el servidor ya
   está corriendo la actualización que se subió, sin tener que adivinar por la pantalla. */
.sidebar-footer .version-app { margin-top: 10px; font-size: 11px; opacity: 0.55; letter-spacing: 0.02em; }
.sidebar-footer button {
  margin-top: 8px; width: 100%; padding: 6px 8px; font-size: 12px;
  background: rgba(255,255,255,0.06); color: var(--sidebar-text); border: none; border-radius: 6px; cursor: pointer;
}
.sidebar-footer button:hover { background: rgba(255,255,255,0.12); color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 60px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 0 24px;
  position: sticky; top: 0; z-index: 5;
}
.topbar h2 { font-size: 17px; margin: 0; }
.content { padding: 24px; flex: 1; min-width: 0; }

/* Botón "☰" para abrir el menú lateral en celular — oculto en escritorio */
.menu-toggle {
  display: none; background: none; border: none; font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--text); padding: 4px 6px; margin: 0 -2px 0 -6px;
}
.sidebar-backdrop { display: none; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Celular / pantallas angostas ----------
   El menú lateral fijo de 230px no cabe en un teléfono junto con el contenido,
   así que ahí se convierte en un panel que se desliza por encima (oculto por
   defecto, se abre con el botón "☰"), en vez de compartir el ancho con .main. */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 100;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 10px 0 30px rgba(0,0,0,0.25); }
  .sidebar-backdrop.open {
    display: block; position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 90;
  }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { padding: 0 16px; }
  .content { padding: 16px; }
}

@media (max-width: 560px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .card { padding: 14px 16px; }
  .login-wrap { padding: 16px; }
  .login-card { padding: 28px 22px; max-width: 100%; }
  .field-row { flex-direction: column; gap: 0; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .search { min-width: 0; }
  .modal { padding: 18px; }
  .modal-backdrop { padding: 16px; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .invoice-box { padding: 18px; }
  .invoice-head, .invoice-parties { flex-direction: column; gap: 10px; }
  .invoice-meta { text-align: left; }
  .bar-row .label { width: 90px; font-size: 11.5px; }
  .bar-row .value { width: 74px; font-size: 11.5px; }
}

.card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; border: 1px solid var(--border);
}
.card h3 { margin: 0 0 4px; font-size: 13px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.stat { font-size: 26px; font-weight: 700; margin: 4px 0; }
.stat-sub { font-size: 12.5px; color: var(--text-muted); }

.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-header h3 { text-transform: none; font-size: 15px; color: var(--text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .12s;
}
.btn:hover { background: #f8fafc; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-danger { color: var(--danger); border-color: var(--danger-light); }
.btn-danger:hover { background: var(--danger-light); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-icon { padding: 6px 8px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13.5px; font-family: inherit; background: #fff; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--primary-light); border-color: var(--primary); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
/* Un input suelto dentro de una fila (sin su .field alrededor) también tiene que repartir
   el ancho. Sin esto arrastra su width:100% como base y aplasta a los hermanos: en "agrega
   un artículo libre", la Descripción quedaba en una cajita mientras Cantidad se llevaba
   media pantalla. min-width:0 es lo que permite que un input se achique dentro de un flex. */
.field-row > input, .field-row > select { flex: 1; min-width: 0; }
.error-msg { background: var(--danger-light); color: var(--danger); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.success-msg { background: var(--success-light); color: #15803d; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }

/* Aviso de que registrarse no cuesta nada, en la pantalla de "Crea tu cuenta". Quien
   llega desde la web todavía no confía: decirlo acá evita el abandono de quien supone
   que el próximo paso le va a pedir una tarjeta. */
.registro-gratis {
  background: var(--primary-light);
  color: #3f5f0d;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 16px;
}

/* ---------- Módulos que el plan no incluye ---------- */
/* El ítem se ve apagado pero LEGIBLE: no es un error ni algo roto, es algo que existe
   y todavía no está contratado. Si se pusiera al 30% de opacidad parecería un fallo. */
.sidebar a.nav-item.nav-bloqueado { opacity: .55; }
.sidebar a.nav-item.nav-bloqueado:hover { opacity: .8; background: rgba(255,255,255,0.06); }
.sidebar a.nav-item .candado { margin-left: auto; font-size: 11px; opacity: .85; }

.modulo-bloqueado {
  max-width: 460px;
  margin: 40px auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 32px;
}
.modulo-bloqueado .candado-grande {
  font-size: 30px;
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 16px; background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
}
.modulo-bloqueado h2 { margin: 0 0 10px; font-size: 21px; }
.modulo-bloqueado .para { color: var(--text-muted); margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; }
.modulo-bloqueado .desde { margin: 0 0 22px; font-size: 14.5px; }
.modulo-bloqueado .hint { color: var(--text-muted); font-size: 13.5px; margin: 0; }

/* ---------- Aceptación de los documentos legales ---------- */
/* La casilla es toda un <label>: se marca tocando cualquier parte del recuadro, no solo
   el cuadradito de 13px. En un celular eso es la diferencia entre poder registrarse y
   no poder. Los enlaces de adentro se excluyen para que abrir un documento no marque
   la casilla de paso. */
.acepta-legal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 18px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
}
.acepta-legal:hover { border-color: var(--primary); }
.acepta-legal input[type=checkbox] {
  width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; cursor: pointer;
  accent-color: var(--primary);
}
.acepta-legal a { font-weight: 600; }
.login-card-ancha { max-width: 460px; }
.legal-docs { margin: 0 0 14px; padding-left: 20px; font-size: 14px; }
.legal-docs li { margin-bottom: 6px; }
.btn-plain {
  border-color: transparent;
  background: none;
  color: var(--text-muted);
  margin-top: 10px;
}
.btn-plain:hover { background: none; color: var(--text); text-decoration: underline; }

/* Control de cantidad en el detalle de una venta: − 2 + */
.cant-ctrl { display: inline-flex; align-items: center; gap: 8px; }
.cant-ctrl button { min-width: 32px; padding: 4px 8px; font-size: 16px; line-height: 1; }
.cant-ctrl b { min-width: 22px; display: inline-block; text-align: center; font-variant-numeric: tabular-nums; }
.precio-linea { width: 88px; text-align: right; padding: 5px 7px; }

.nombre-linea .sub-movil { display: none; }

/* En un celular el detalle de la venta tiene que entrar sin scroll horizontal: se aprietan
   las celdas, el "Quitar" queda como una ✕ (la línea igual se saca apretando − cuando la
   cantidad llega a 1) y la columna Subtotal se baja debajo del nombre del producto, que es
   como se ve en cualquier carrito. En pantalla grande vuelve a ser una columna. */
@media (max-width: 620px) {
  #items-body td, .venta-detalle-tabla thead th { padding-left: 6px; padding-right: 6px; }
  .precio-linea { width: 68px; padding: 5px 4px; }
  .cant-ctrl { gap: 4px; }
  .cant-ctrl button { min-width: 28px; padding: 4px 5px; }
  #items-body .btn-danger { font-size: 0; padding: 5px 9px; }
  #items-body .btn-danger::after { content: '✕'; font-size: 13px; }
  .nombre-linea .sub-movil { display: block; color: var(--muted, #64748b); font-size: 12px; margin-top: 2px; }
  .venta-detalle-tabla thead th:nth-child(4), #items-body td.subtotal-linea { display: none; }
}

/* Zona de peligro del modal de Administración (borrar un negocio). Va separada del
   resto del formulario a propósito: nada destructivo debe quedar al lado de "Guardar". */
.zona-peligro {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.zona-peligro > b { color: var(--danger); font-size: 14px; }
.zona-peligro p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 5px 0 10px;
}

/* "Primeros pasos" del Panel — la guía para un negocio recién registrado. */
.onboarding { border-color: var(--primary); }
.onboarding-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.onboarding-riel {
  height: 5px;
  border-radius: 3px;
  background: var(--bg);
  overflow: hidden;
  margin-bottom: 14px;
}
.onboarding-relleno { height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .onboarding-relleno { transition: none; } }
.onboarding-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.onboarding-lista li { display: flex; gap: 11px; align-items: flex-start; }
.onboarding-marca {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-content: center;
  font-size: 12px;
  font-weight: 700;
  color: transparent;
}
.onboarding-lista li.hecho .onboarding-marca {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.onboarding-lista li.hecho > div > b { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 500; }

/* Tarjetas de "a qué plan podés pasar" (modal de subir de plan). */
.plan-opcion {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.plan-opcion:first-of-type { border-color: var(--primary); }
.plan-opcion-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.plan-precio { font-size: 20px; font-weight: 700; white-space: nowrap; }
.plan-mes { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.plan-detalle { color: var(--text-muted); font-size: 13px; margin: 0 0 10px; line-height: 1.5; }
/* La facturación electrónica va destacada y sin precio: el costo lo pone el PAC según
   el volumen de documentos del negocio, así que se cotiza. Poner un número de lista
   sería inventarlo. */
.plan-fe {
  font-size: 12.5px; line-height: 1.5; margin: 0 0 10px;
  padding: 8px 10px; border-radius: 8px;
  background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
}

/* Campo de contraseña con botón "Ver" adentro. */
.password-wrap { position: relative; display: flex; align-items: center; }
.password-wrap input { flex: 1; padding-right: 68px; }
.password-ver {
  position: absolute;
  right: 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.password-ver:hover { color: var(--text); background: var(--bg); }
.password-ver:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ---------- Table ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 10px 12px; color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid var(--border); }
td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
.table-wrap { overflow-x: auto; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }

/* En una pantalla angosta (celular), el Total/Saldo — el dato más importante de
   la fila — quedaba fuera de vista al hacer scroll horizontal, sin ningún aviso
   de que había más contenido. Se fija al borde derecho del contenedor con scroll,
   con una sombra que marca que hay más columnas a la izquierda. */
.table-sticky-last table th:last-child,
.table-sticky-last table td:last-child {
  position: sticky;
  right: 0;
  background: var(--surface);
  box-shadow: -8px 0 8px -8px rgba(15, 23, 42, 0.18);
}
.table-sticky-last table tbody tr:hover td:last-child { background: #f8fafc; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 200px; }
.search input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; }

/* Segunda línea de una fila: la categoría debajo del nombre de un producto, la fecha
   debajo de un ítem, el "(tú)" al lado del usuario. Estaba escrita a mano en seis
   lugares distintos con el mismo valor; acá se define una vez y la regla de celular la
   puede agrandar sin pelearse con estilos en línea. */
.sub-linea { font-size: 11.5px; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge-success { background: var(--success-light); color: #15803d; }
.badge-danger { background: var(--danger-light); color: #b91c1c; }
.badge-warning { background: var(--warning-light); color: #b45309; }
.badge-muted { background: #f1f5f9; color: var(--text-muted); }

/* ---------- Grilla POS (agregar ítem en Mesas/Comandas) ---------- */
.pos-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .pos-layout { grid-template-columns: 1fr; } }
.pos-cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pos-cat-tab {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.pos-cat-tab:hover { border-color: var(--primary); color: var(--text); }
.pos-cat-tab.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
  max-height: 560px; overflow-y: auto; padding-right: 2px;
}
.pos-tile {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  cursor: pointer; overflow: hidden; text-align: left; padding: 0; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.pos-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,0.12); }
.pos-tile:active { transform: translateY(0); }
.pos-tile-photo { width: 100%; height: 80px; object-fit: cover; display: block; background: #f1f5f9; }
.pos-tile-initial {
  width: 100%; height: 80px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; font-weight: 700;
}
.pos-tile-info { padding: 8px 9px; }
.pos-tile-nombre { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-tile-precio { font-size: 12px; color: var(--primary-dark); font-weight: 700; margin-top: 3px; }
.pos-tile-sin-stock { opacity: 0.45; cursor: not-allowed; }

/* ---------- Selector de producto/cliente/proveedor con buscador (Ventas,
   Cotizaciones, Compras) — reemplaza los <select> planos de antes ---------- */
.prod-picker-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #f8fafc;
}
.entidad-picker-sugerencias {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(15,23,42,0.14); max-height: 240px; overflow-y: auto;
}
.entidad-picker-item {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; color: var(--text);
}
.entidad-picker-item:last-child { border-bottom: none; }
.entidad-picker-item:hover { background: #f8fafc; }
.entidad-picker-item-vacio { color: var(--text-muted); font-style: italic; }
.entidad-picker-vacio { padding: 12px; color: var(--text-muted); font-size: 12.5px; }
.pos-cart-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pos-cart-item:last-child { border-bottom: none; }
.pos-cart-item .info { flex: 1; min-width: 0; }
.pos-cart-item .nombre { font-size: 13px; font-weight: 600; }
.pos-cart-item .meta { font-size: 11.5px; color: var(--text-muted); }
.pos-qty-btns { display: flex; align-items: center; gap: 4px; }
.pos-qty-btns button {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
  font-weight: 700; cursor: pointer; line-height: 1; padding: 0;
}
.pos-qty-btns button:hover { border-color: var(--primary); }

/* ---------- Pantalla fija de Comandas (tablet fija en cocina/barra) ---------- */
.comanda-fija-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.comanda-fija-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; background: var(--sidebar-bg); color: #fff; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5;
}
.comanda-fija-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.comanda-fija-brand img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: var(--primary); padding: 3px; }
.comanda-fija-estacion { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.comanda-fija-topbar .btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }
.comanda-fija-topbar .btn:hover { background: rgba(255,255,255,0.16); }
.comanda-fija-content { flex: 1; padding: 22px; }
.comanda-fija-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.comanda-fija-card { padding: 18px; }
.comanda-fija-item { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.comanda-fija-card .btn { font-size: 15px; padding: 13px; margin-top: 4px; }
@media (max-width: 600px) {
  .comanda-fija-topbar { padding: 12px 16px; }
  .comanda-fija-estacion { font-size: 18px; }
  .comanda-fija-content { padding: 16px; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
  overflow-y: auto; z-index: 50;
}
.modal {
  background: var(--surface); border-radius: 14px; width: 100%; max-width: 560px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 24px;
}
.modal h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Misc ---------- */
.muted { color: var(--text-muted); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.mb-16 { margin-bottom: 16px; }
.mt-16 { margin-top: 16px; }

/* ---------- Charts (SVG hechos a mano) ---------- */
.chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.chart-bar { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.chart-bar:hover { background: var(--primary-dark); }
.chart-labels { display: flex; gap: 4px; margin-top: 6px; }
.chart-labels span { flex: 1; text-align: center; font-size: 10px; color: var(--text-muted); }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-row .label { width: 130px; font-size: 12.5px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; background: #f1f5f9; border-radius: 6px; height: 10px; overflow: hidden; }
.bar-fill { background: var(--primary); height: 100%; border-radius: 6px; }
.bar-row .value { width: 90px; text-align: right; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }

/* ---------- Factura imprimible ---------- */
.invoice-box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; max-width: 720px; margin: 0 auto; border: 1px solid var(--border); }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.invoice-brand { display: flex; align-items: center; gap: 12px; }
.invoice-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
.invoice-head h1 { font-size: 20px; margin: 0 0 2px; }
.invoice-meta { text-align: right; font-size: 13px; color: var(--text-muted); }
.invoice-parties { display: flex; justify-content: space-between; margin-bottom: 24px; gap: 20px; }
.invoice-parties h4 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; color: var(--text-muted); }
.invoice-totals { margin-left: auto; width: 100%; max-width: 260px; margin-top: 12px; }
.invoice-totals .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.invoice-totals .row.total { font-size: 17px; font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }

/* ---------- Impresión ----------
   Lo que se manda al papel es el documento, no la aplicación. Antes se imprimía la
   pantalla tal cual: salía el menú lateral con el nombre del usuario y el botón de
   cerrar sesión, las pestañas y hasta la burbuja del asistente. */
@media print {
  .no-print { display: none !important; }

  /* El armazón de la app no va al papel. */
  .sidebar,
  .sidebar-backdrop,
  .topbar,
  #asistente-flotante,
  .pos-cat-tabs,
  .modal-backdrop,
  /* Lo que flota encima de la pantalla tampoco va al papel. Sin esto, el aviso de
     "mesa 4 pidió la cuenta" y la barra del total de OTRA mesa salían impresos en la
     factura que se le entrega al cliente. */
  .avisos-flotante,
  .barra-total,
  #toast { display: none !important; }

  body { background: #fff; color: #000; }
  .layout { display: block; }
  .main { margin: 0; width: 100%; }
  .content { padding: 0; }

  /* Las tarjetas en papel no necesitan sombra ni fondo propio: gastan tinta y
     ensucian. Se quedan con una línea fina que separa una sección de otra. */
  .card {
    box-shadow: none;
    border: 1px solid #d4d4d4;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .invoice-box { box-shadow: none; border: none; }

  /* Los navegadores descartan los fondos de color al imprimir, y sin esto las barras
     de los gráficos salen invisibles: un recuadro vacío en vez del reporte. */
  .chart-bar,
  .bar-fill,
  .bar-track,
  .onboarding-relleno,
  .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Que una tabla no se parta al medio dejando el encabezado en una hoja y las filas
     en la siguiente. */
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  .table-wrap { overflow: visible !important; }

  a { text-decoration: none; color: inherit; }
  @page { margin: 14mm; }
}

/* Encabezado que SOLO existe en el papel: sin esto, un reporte impreso es una hoja de
   números que no dice de qué negocio es ni de cuándo — justo lo que necesita saber
   quien lo recibe (un contador, un socio). En pantalla no se ve. */
.print-header { display: none; }
@media print {
  .print-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 16px;
  }
  .print-header img { max-height: 46px; max-width: 130px; }
  .print-header .ph-negocio { font-size: 16px; font-weight: 700; }
  .print-header .ph-dato { font-size: 11px; color: #444; }
  .print-header .ph-der { text-align: right; }
  .print-header .ph-titulo { font-size: 14px; font-weight: 600; }
}

/* ---------- Ticket térmico (Imprimir ticket / Imprimir comanda) ----------
   #ticket-print-area vive fuera de #app (ver imprimirTicket() en app.js) y se queda
   oculto en pantalla — solo se muestra durante la impresión, cuando además se oculta
   todo el resto de la página, para que en el papel angosto de 58/80mm no salga nada
   del resto de la app (sidebar, topbar, etc.). */
#ticket-print-area { display: none; }
body.imprimiendo-ticket > #app { display: none !important; }
body.imprimiendo-ticket #ticket-print-area { display: block; }
@media print {
  body.imprimiendo-ticket #ticket-print-area {
    display: block !important;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.4;
    color: #000;
  }
  @page { margin: 2mm; }
}
.ticket-header { text-align: center; margin-bottom: 8px; }
.ticket-header .empresa { font-size: 14px; font-weight: 700; text-transform: uppercase; }
.ticket-sep { border: none; border-top: 1px dashed #000; margin: 6px 0; }
.ticket-row { display: flex; justify-content: space-between; gap: 8px; }
.ticket-item-nombre { flex: 1; }
.ticket-total { font-weight: 700; font-size: 14px; }
.ticket-center { text-align: center; }
.ticket-estacion-titulo { font-weight: 700; font-size: 15px; text-transform: uppercase; margin: 10px 0 4px; }

.login-error { display: none; }

/* ---------- Mesas: plano de piso ---------- */
/* El plano tiene un ancho mínimo fijo (no se achica en celular) para que las mesas
   nunca queden amontonadas — en pantallas angostas se recorre con scroll horizontal
   en vez de apretar el layout, así la posición relativa de cada mesa se ve igual
   que como la acomodó el negocio, solo que hay que desplazarse para verla completa. */
.plano-scroll { overflow-x: auto; border-radius: var(--radius); }
.plano-canvas {
  position: relative;
  min-height: 480px;
  min-width: 680px;
  width: 100%;
  /* Un piso, no un rectángulo gris. Es una baldosa muy tenue sobre un tono cálido:
     lo justo para que se lea como el salón del negocio y para que las mesas floten
     por encima en vez de quedar pegadas al fondo. Sin imágenes: todo son degradados,
     así el plano no suma ni un archivo que bajar. */
  background-color: #f7f6f2;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 60px rgba(15, 23, 42, 0.045);
  overflow: hidden;
  /* pan-x (no pan-y: el plano no se desplaza verticalmente) para poder deslizar el
     dedo y recorrerlo en celular; en modo edición se desactiva del todo para que
     arrastrar una mesa no dispare al mismo tiempo el scroll nativo del navegador. */
  touch-action: pan-x;
}
/* En modo edición la cuadrícula se hace visible y más fina: ahí sí ayuda a alinear. */
.plano-canvas.modo-edicion {
  background-image:
    linear-gradient(rgba(127, 183, 36, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 183, 36, 0.22) 1px, transparent 1px);
  background-size: 5% 5%, 5% 5%;
  touch-action: none;
}

.mesa-shape {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: var(--mesa-ancho);
  height: var(--mesa-alto);
  --mesa-ancho: 74px;
  --mesa-alto: 74px;
  --silla-sep: 9px;                      /* separación entre la mesa y sus sillas */
  --mesa-tinte: #ffffff;
  --mesa-borde: var(--border);
  --mesa-texto: var(--text);
  --silla-color: #cbd5e1;
  border: 1.5px solid var(--mesa-borde);
  border-radius: 12px;
  /* Dos capas: el degradado le da volumen de tablero y la sombra lo despega del piso. */
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%);
  background-color: var(--mesa-tinte);
  box-shadow: 0 2px 3px rgba(15, 23, 42, 0.07), 0 6px 14px rgba(15, 23, 42, 0.09);
  color: var(--mesa-texto);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  touch-action: pan-x;
  padding: 4px;
  text-align: center;
  line-height: 1.15;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mesa-shape:hover {
  transform: translate(-50%, -50%) translateY(-2px);
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.09), 0 12px 22px rgba(15, 23, 42, 0.14);
  z-index: 15;
}
.mesa-shape .mesa-nombre { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El consumo de una mesa ocupada: es el dato que se busca de lejos, así que va más
   grande que el nombre y en números tabulares para que no bailen de mesa a mesa. */
.mesa-shape .mesa-dato { display: block; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.mesa-shape .mesa-cap { display: block; font-size: 10px; font-weight: 600; opacity: 0.75; }
.mesa-shape.redonda { border-radius: 50%; }
.mesa-shape.cuadrada { border-radius: 12px; }
.mesa-shape.rectangular { --mesa-ancho: 124px; --mesa-alto: 72px; border-radius: 12px; }
/* La barra es angosta a propósito (es un mostrador, no una mesa), así que adentro
   todo va un punto más chico para que el monto entre sin apretarse contra el borde. */
.mesa-shape.barra { --mesa-ancho: 52px; --mesa-alto: 116px; border-radius: 10px; font-size: 10.5px; padding: 3px; }
.mesa-shape.barra .mesa-dato { font-size: 11.5px; }
.mesa-shape.barra .mesa-cap { font-size: 9.5px; }

/* Estados. El tablero queda claro y lo que cambia fuerte es el borde y las sillas —
   así el plano se lee de un vistazo sin quedar como una bolsa de colores planos. */
.mesa-shape.estado-libre { --mesa-tinte: #f3faec; --mesa-borde: #a3cf5f; --mesa-texto: #3f6212; --silla-color: #bcdd8d; }
.mesa-shape.estado-ocupada { --mesa-tinte: #fff1f1; --mesa-borde: #f08e8e; --mesa-texto: #9f1239; --silla-color: #f4b4b4; }
.mesa-shape.estado-reservada { --mesa-tinte: #fff8e8; --mesa-borde: #eab863; --mesa-texto: #92400e; --silla-color: #f2d29a; }
/* Un mesero marcó la mesa "lista para cobrar" (ver marcarParaCobrar() en app.js) —
   se resalta distinto y con un pulso sutil para que quien cierra cuentas la note
   de un vistazo entre el resto de mesas ocupadas. */
.mesa-shape.estado-para_cobrar {
  --mesa-tinte: #eff6ff; --mesa-borde: #60a5fa; --mesa-texto: #1d4ed8; --silla-color: #a8caf8;
  animation: mesa-para-cobrar-pulso 1.8s ease-in-out infinite;
}
@keyframes mesa-para-cobrar-pulso {
  0%, 100% { box-shadow: 0 2px 3px rgba(15, 23, 42, 0.07), 0 6px 14px rgba(15, 23, 42, 0.09), 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50% { box-shadow: 0 2px 3px rgba(15, 23, 42, 0.07), 0 6px 14px rgba(15, 23, 42, 0.09), 0 0 0 9px rgba(37, 99, 235, 0); }
}
.mesa-shape.editable { cursor: grab; touch-action: none; }
.mesa-shape.arrastrando {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
  z-index: 20;
}

/* ---------- Sillas ----------
   Se dibujan alrededor del tablero (ver sillasHtml() en app.js). Cuentan como parte
   de la mesa para tocar: son hijas del tablero, así que el toque y el arrastre suben
   solos a la mesa. Eso agranda bastante el blanco al que hay que apuntar en un
   celular, donde el dedo cae tan seguido en una silla como en el tablero. El envoltorio
   sí está apagado: lo que se toca son las sillas, no el aire entre ellas.
   touch-action se hereda para que arrastrar empezando sobre una silla funcione igual
   que empezando sobre la mesa. */
.mesa-sillas { position: absolute; inset: 0; pointer-events: none; }
.silla {
  position: absolute;
  display: block;
  background: var(--silla-color);
  border-radius: 4px;
  box-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.16);
  pointer-events: auto;
  touch-action: inherit;
  cursor: inherit;
}
/* Mesa redonda: cada silla se gira a su ángulo y se empuja hacia afuera del radio. */
.silla-circular {
  width: 13px; height: 13px; border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(var(--ang)) translateY(calc((var(--mesa-alto) / 2 + var(--silla-sep)) * -1));
}
/* Mesas con lados: la silla se apoya sobre el borde y se corre hacia afuera. */
.silla-arriba { width: 17px; height: 11px; left: var(--t); top: 0; transform: translate(-50%, -50%) translateY(calc(var(--silla-sep) * -1)); }
.silla-abajo { width: 17px; height: 11px; left: var(--t); top: 100%; transform: translate(-50%, -50%) translateY(var(--silla-sep)); }
.silla-izq { width: 11px; height: 17px; top: var(--t); left: 0; transform: translate(-50%, -50%) translateX(calc(var(--silla-sep) * -1)); }
.silla-der { width: 11px; height: 17px; top: var(--t); left: 100%; transform: translate(-50%, -50%) translateX(var(--silla-sep)); }

/* Quien prefiere menos movimiento en pantalla (ajuste del sistema operativo): se
   apagan el pulso y el levantar al pasar por encima, pero no se pierde ningún dato. */
@media (prefers-reduced-motion: reduce) {
  .mesa-shape { transition: none; }
  .mesa-shape:hover { transform: translate(-50%, -50%); }
  .mesa-shape.estado-para_cobrar { animation: none; }
}

.mesas-sin-ubicar { display: flex; flex-wrap: wrap; gap: 8px; }
.mesa-chip {
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 6px 10px 6px 14px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
}

@media (max-width: 640px) {
  .plano-canvas { min-height: 380px; }
  /* Todo se achica cambiando las variables: las sillas siguen solas porque su posición
     se calcula a partir del alto de la mesa y de la separación. */
  /* Un poco más grandes que en la versión de escritorio proporcionalmente: el nombre y
     el monto de la mesa tienen que leerse de pie, con el teléfono en una mano. */
  .mesa-shape { --mesa-ancho: 66px; --mesa-alto: 66px; --silla-sep: 8px; font-size: 12px; }
  .mesa-shape .mesa-cap { font-size: 11px; }
  .mesa-shape .mesa-dato { font-size: 12px; }
  .mesa-shape.rectangular { --mesa-ancho: 104px; --mesa-alto: 60px; }
  .mesa-shape.barra { --mesa-ancho: 40px; --mesa-alto: 96px; }
  .silla-circular { width: 11px; height: 11px; }
  .silla-arriba, .silla-abajo { width: 14px; height: 9px; }
  .silla-izq, .silla-der { width: 9px; height: 14px; }
}

/* ---------------- Asistente IA — burbuja flotante ----------------
   Vive fuera de #app (se agrega una sola vez al <body>) para no perder su estado
   ni su historial al navegar entre secciones — ver montarAsistenteFlotante() en
   app.js. Queda por debajo del modal genérico (z-index 50) pero por encima del
   resto del contenido. */
.asistente-flotante-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--primary); color: var(--on-primary);
  font-size: 22px; cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
  display: flex; align-items: center; justify-content: center;
}
.asistente-flotante-btn:hover { background: var(--primary-dark); color: #fff; }
.asistente-flotante-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 41;
  width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 140px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
  display: flex; flex-direction: column; overflow: hidden;
}
/* Sin esto, el atributo "hidden" no alcanza a tapar el display:flex de arriba
   (una regla propia con la misma prioridad que la del navegador para [hidden]
   gana por ser de autor, así que hay que pisarla explícitamente) — este era el
   motivo real por el que el botón "✕" no cerraba el panel. */
.asistente-flotante-panel[hidden] { display: none; }
.asistente-flotante-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.asistente-flotante-header button {
  background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text-muted); padding: 4px;
}
.asistente-flotante-body { padding: 12px 14px; overflow-y: auto; flex: 1; }
@media (max-width: 640px) {
  .asistente-flotante-panel { right: 16px; left: 16px; width: auto; bottom: 84px; }
}

/* Aviso de límites del plan, arriba del Panel. Ámbar cuando queda poco, rojo cuando ya
   se llegó al tope — el rojo se reserva para "esto ya te está frenando", no para
   "prestá atención", porque si todo es rojo nada es rojo. */
.aviso-limite {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  padding: 14px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; line-height: 1.5;
}
.aviso-limite b { display: block; color: #78350f; }
.aviso-limite-lleno { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.aviso-limite-lleno b { color: #7f1d1d; }
.aviso-limite .btn { white-space: nowrap; }

/* ---------------- Aviso "mesa pidió la cuenta" ----------------
   Panel flotante abajo a la izquierda para quien puede cobrar (ver arrancarAvisos()
   en app.js). Va del lado opuesto a la burbuja del asistente y del toast, que viven
   a la derecha, así nunca se tapan entre sí. Queda por debajo del modal (z-index 50)
   para no estorbar justo cuando se está cobrando la mesa. */
.avisos-flotante {
  /* En pantalla grande arranca DESPUÉS del menú lateral (230px): si se pusiera pegado
     al borde izquierdo taparía las secciones del menú justo cuando hay mesas esperando. */
  position: fixed; left: 250px; bottom: 20px; z-index: 45;
  width: min(300px, calc(100vw - 110px));
  background: var(--surface); border: 1px solid #fca5a5; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}
.avisos-flotante.plegado { width: auto; border: none; box-shadow: none; background: transparent; }
.avisos-pastilla {
  border: none; border-radius: 999px; cursor: pointer;
  background: #dc2626; color: #fff; font-size: 13px; font-weight: 700;
  padding: 10px 16px; box-shadow: 0 10px 24px rgba(220, 38, 38, 0.35);
}
.avisos-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: #dc2626; color: #fff; font-size: 13.5px;
}
/* La ✕ medía 19px de alto. En un celular, en medio de un turno, eso es un blanco al
   que hay que apuntar: se le da el tamaño mínimo cómodo para un dedo (40px) sin
   agrandar el símbolo, corriéndole el relleno hacia afuera para que no empuje la
   barra roja. */
.avisos-header button {
  border: none; background: transparent; color: #fff; cursor: pointer;
  font-size: 15px; line-height: 1;
  min-width: 40px; min-height: 40px; margin: -10px -8px -10px 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.avisos-header button:hover { background: rgba(255, 255, 255, 0.18); }
/* La pastilla plegada ("🔔 1 cuenta pedida") es el único camino de vuelta al aviso
   cuando está cerrado: también tiene que poder tocarse sin apuntar. */
.avisos-pastilla { min-height: 40px; }
.avisos-body { max-height: min(320px, calc(100vh - 200px)); overflow-y: auto; }
.aviso-mesa {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text);
}
.aviso-mesa:last-child { border-bottom: none; }
.aviso-mesa:hover { background: #fef2f2; }
.aviso-mesa-nombre { font-weight: 700; font-size: 14px; }
.aviso-mesa-datos { grid-column: 1; font-size: 12px; color: var(--muted); }
.aviso-mesa-tiempo { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Una mesa esperando más de cinco minutos ya es un cliente incómodo — se marca. */
.aviso-mesa.urgente .aviso-mesa-tiempo { color: #dc2626; font-weight: 700; }

/* Contador rojo al lado de "Mesas" en el menú, para cuando el panel está plegado. */
.nav-badge {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; text-align: center;
}

@media (max-width: 860px) {
  /* En celular el menú lateral no ocupa lugar (se desliza por encima), así que el
     aviso vuelve al borde izquierdo. */
  .avisos-flotante { left: 16px; bottom: 16px; }
}

/* Pie del plano de mesas: leyenda de colores + la aclaración de que los números
   sueltos de las mesas ocupadas son plata. Sin esto hay que adivinar qué significa
   cada color, que es justo lo que un plano no debería hacerte hacer. */
.plano-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 18px; margin: 8px 2px 0;
}
.plano-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-muted); }
.plano-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.punto-estado {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--mesa-borde); background: var(--mesa-tinte);
  --mesa-tinte: #fff; --mesa-borde: var(--border);
}
.punto-estado.estado-libre { --mesa-tinte: #f3faec; --mesa-borde: #a3cf5f; }
.punto-estado.estado-ocupada { --mesa-tinte: #fff1f1; --mesa-borde: #f08e8e; }
.punto-estado.estado-para_cobrar { --mesa-tinte: #eff6ff; --mesa-borde: #60a5fa; }
.punto-estado.estado-reservada { --mesa-tinte: #fff8e8; --mesa-borde: #eab863; }
@media (max-width: 640px) {
  .plano-pie { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ═══════════════ Celular ═══════════════
   Todo lo que sigue solo aplica en pantallas de teléfono. La app se usa de verdad ahí:
   el mesero toma pedidos con el celular en la mano y el cajero cobra parado. Lo que en
   una pantalla grande es cómodo, en un teléfono es un botón al que hay que apuntar. */

/* ---- Barra de total fija (ver actualizarBarraTotal() en app.js) ---- */
.barra-total { display: none; }
@media (max-width: 900px) {
  .barra-total {
    display: flex; align-items: stretch; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12);
  }
  .barra-total-resumen {
    flex: 1; min-width: 0; text-align: left; cursor: pointer;
    background: none; border: none; padding: 2px 0; color: var(--text);
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
  }
  .barra-total-items { font-size: 12px; color: var(--text-muted); font-weight: 600; }
  .barra-total-monto { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
  .barra-total-accion { min-height: 46px; padding-left: 20px; padding-right: 20px; font-size: 14.5px; }
  /* Que la barra no tape el final de la página ni la burbuja del asistente. */
  body.con-barra-total .content { padding-bottom: 92px; }
  body.con-barra-total .asistente-flotante-btn { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.con-barra-total .asistente-flotante-panel { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body.con-barra-total .avisos-flotante { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  /* ---- Todo lo que se toca, del tamaño de un dedo ----
     44px es la medida que recomiendan tanto Apple como Google, y se nota: con 26px hay
     que apuntar, y apuntando en un restaurante lleno se toca el botón de al lado. */
  .btn { min-height: 44px; padding: 11px 16px; font-size: 14px; }
  .btn-sm { min-height: 40px; padding: 9px 14px; font-size: 13px; }
  .btn-icon { min-height: 40px; }
  .pos-cat-tab { min-height: 40px; padding: 10px 16px; font-size: 13px; }
  .menu-toggle { min-width: 44px; min-height: 44px; font-size: 22px; padding: 8px; }
  select, input, textarea, .search input { min-height: 44px; font-size: 15px; }
  /* 15px en los campos no es capricho: por debajo de 16px, Safari en iPhone hace zoom
     solo al tocar un campo y deja la pantalla corrida. Con 15px + el ancho que usamos,
     no se dispara. */
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }

  /* ---- Texto que se pueda leer sin acercar el teléfono ---- */
  .nav-group-label { font-size: 12px; }
  .badge { font-size: 12px; padding: 4px 10px; }
  .hint, .muted { font-size: 13px; }
  .sub-linea { font-size: 12.5px; }
  .pos-cart-item .meta { font-size: 12.5px; }

  /* Los botones de cada ítem del carrito: el ✕ BORRA la línea y medía 24px. Errar el
     dedo ahí, en un restaurante lleno, es sacarle al cliente un plato que sí pidió. */
  .pos-qty-btns button { min-width: 44px; min-height: 40px; font-size: 15px; }
  .cant-ctrl button { min-width: 40px; min-height: 40px; font-size: 18px; }
  .sidebar-footer .version-app { font-size: 12px; }
  /* El botón de cerrar sesión del menú lateral: es el único que había quedado del tamaño
     de escritorio, y en el menú desplegable de un celular hay que poder tocarlo. */
  .sidebar-footer button { min-height: 44px; font-size: 13.5px; }
  .password-ver { min-height: 40px; padding: 0 12px; }

  /* El gráfico del Panel: con catorce fechas en un teléfono, las etiquetas quedaban en
     10px y una encima de la otra. Se muestra una de cada tres, legible. */
  .chart-labels span { font-size: 12px; }
  .chart-labels span:not(:nth-child(3n + 2)) { visibility: hidden; }

  /* La barra de herramientas de cada pantalla.
     Ojo con esto: ya existía una regla para celular (@media max-width 560px) que la
     ponía en columna y estirada, pero estaba ESCRITA ANTES que la regla general
     ".toolbar { align-items: center }". Con la misma prioridad, en CSS gana la que va
     última en el archivo — así que el "estirado" nunca se aplicó y los botones quedaban
     centrados y angostos en medio de la pantalla. Se corrige acá, al final del archivo. */
  .toolbar { gap: 8px; align-items: stretch; }
  .toolbar > .flex { width: 100%; }
  .toolbar .btn { flex: 1 1 auto; justify-content: center; }

  /* La grilla de productos: fichas más bajas para que entren más de cuatro por pantalla.
     Con la ficha de escritorio entraban ocho platos por pantalla; un menú de 40 eran
     cinco pantallas de scroll para encontrar el que el cliente acaba de pedir. */
  .pos-grid { max-height: none; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .pos-tile-photo, .pos-tile-initial { height: 54px; }
  .pos-tile-initial { font-size: 22px; }
  .pos-tile-info { padding: 7px 8px; }
  .pos-tile-nombre { font-size: 12.5px; }
  .pos-tile-precio { font-size: 12.5px; }
}

/* Contador de errores recientes en el panel de administración. Rojo a propósito: si hay
   errores de hoy, es lo único de esa pantalla que tiene que saltar a la vista. */
.badge-error {
  background: var(--danger-light); color: var(--danger);
  font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

/* ---------- Campana de avisos del dueño ----------
   Va en la barra superior, no en el panel flotante del restaurante: aquel es para el
   piso del salón (urgente, con sonido) y este es para el dueño (se mueve en días).
   Mezclarlos habría hecho que una cuenta por cobrar vencida sonara como una mesa
   esperando que le cobren. */
.topbar-derecha { margin-left: auto; position: relative; display: flex; align-items: center; }
/* Selector de local. Solo aparece en negocios con más de una sucursal.
   Va arriba y siempre visible a propósito: de esto depende de qué inventario se
   descuenta una venta y en qué caja entra la plata. */
.selector-sucursal {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); max-width: 200px;
}
.selector-sucursal select {
  border: none; background: none; font-size: 13.5px; font-weight: 600;
  color: var(--text); padding: 2px 0; max-width: 150px; cursor: pointer;
  text-overflow: ellipsis;
}
.selector-sucursal select:focus { outline: none; }
@media (max-width: 640px) {
  .selector-sucursal { max-width: 140px; padding-left: 8px; }
  .selector-sucursal select { max-width: 96px; font-size: 13px; }
}

.campana {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 6px 8px; border-radius: 8px; position: relative; color: var(--text);
}
.campana:hover { background: var(--bg); }
.campana-cuenta {
  position: absolute; top: 0; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--text-muted); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
/* Rojo solo cuando algo está de verdad mal. Un vencimiento a 8 días no puede gritar
   igual que una caja sin cerrar desde ayer: si todo grita, nada se lee. */
.campana-alerta .campana-cuenta { background: var(--danger); }

.campana-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
  overflow: hidden;
}
.aviso-negocio {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border); border-left: 3px solid var(--warning);
}
.aviso-negocio:last-child { border-bottom: none; }
.aviso-negocio:hover { background: var(--bg); }
.aviso-negocio.es-alerta { border-left-color: var(--danger); }
.aviso-icono { font-size: 15px; line-height: 1.5; flex: none; }
.aviso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso-texto b { font-size: 13.5px; font-weight: 600; }
.aviso-texto .muted { font-size: 12.5px; color: var(--text-muted); }

/* En celular el panel se ancla al borde de la pantalla, no al botón: anclado al botón
   se salía por la derecha en pantallas de 360px. */
@media (max-width: 560px) {
  .campana-panel { position: fixed; top: 60px; right: 8px; left: 8px; width: auto; }
}