:root {
  --brand: #6b4226;
  --brand-light: #a9744f;
  --accent: #b5502e;
  --accent-dark: #8f3e22;
  --accent-soft: #f3e4d6;
  --bg: #f7f3ef;
  --card: #ffffff;
  --text: #3a2a1e;
  --muted: #7a6f68;
  --green: #2e7d32;
  --red: #c62828;
  --border: #e4dcd4;
  --border-soft: #efe4d8;
  --shadow-sm: 0 2px 8px rgba(107, 66, 38, 0.08);
  --shadow-card: 0 4px 14px rgba(107, 66, 38, 0.09);
  --shadow-card-hover: 0 14px 28px rgba(107, 66, 38, 0.16);
  --shadow-accent: 0 10px 24px rgba(181, 80, 46, 0.32);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-family: var(--font-body);
}

* { box-sizing: border-box; }

/* Garantiza que cualquier elemento con el atributo "hidden" desaparezca de
   verdad, aunque su clase (waiter-bar, modal-overlay...) le ponga su propio
   display:flex — sin esto, empataban en especificidad y ganaba el flex. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-heading); margin: 0 0 12px; color: var(--text); }
h3 { font-size: 16px; font-weight: 600; }

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--card);
  padding: 36px;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 48px rgba(107, 66, 38, 0.16);
  width: 340px;
}

.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 24px;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--brand);
}

input, select {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 80, 46, 0.14);
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15.5px;
  padding: 14px 20px;
  font-weight: 600;
  font-family: var(--font-heading);
  transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease, background 0.15s ease;
}
button:active { transform: scale(0.97); }

.btn-primary { background: var(--brand); color: #fff; width: 100%; box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover { background: #d9cdc1; }
.btn-green { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-green:hover { filter: brightness(1.06); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { filter: brightness(1.08); }

.error-msg { color: var(--red); font-size: 13px; margin-top: -6px; margin-bottom: 10px; min-height: 16px; }

/* --- App shell --- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 180px;
  flex: 0 0 180px;
  background: var(--brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  overflow-y: auto;
}

.sidebar h2 { font-size: 17px; font-weight: 700; padding: 0 16px; margin: 0 0 22px; letter-spacing: -0.01em; }

.sidebar button.nav-btn, .sidebar a.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: #f3e9e0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  padding: 13px 14px;
  margin: 2px 10px;
  width: calc(100% - 20px);
  font-weight: 600;
  font-size: 15.5px;
  font-family: var(--font-body);
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.sidebar button.nav-btn:hover, .sidebar a.nav-btn:hover { background: rgba(255, 255, 255, 0.08); }

.sidebar button.nav-btn.active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}
.sidebar .logout-btn {
  margin-top: auto;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  margin: 16px 14px 0;
  border-radius: var(--radius-md);
}
.sidebar .logout-btn:hover { background: rgba(0, 0, 0, 0.32); }

/* Iconos del menu lateral: contenedor de icono SVG junto a la etiqueta */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.nav-icon svg { width: 100%; height: 100%; }

/* min-width:0 es necesario: por defecto un hijo flex no se encoge por debajo
   del ancho minimo de su contenido (tablas anchas, formularios largos...),
   lo que empuja todo el layout (incluida la barra lateral) fuera de la
   pantalla en vez de dejar que ese contenido haga scroll horizontal el solo.
   Sin esto, en pantallas mas pequeñas (tablets, monitores TPV) las columnas
   de la derecha se "cortaban" sin aviso de que se podia hacer scroll. */
.main { flex: 1; min-width: 0; padding: 28px 32px; }

.view { display: none; }
.view.active { display: block; }

h1.page-title { margin: 0 0 22px; color: var(--brand); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }

.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 22px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  min-width: 0;
}

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 22px; align-items: start; }

/* Pantallas grandes: el contenido ocupa todo el ancho disponible (antes se
   quedaba en 1100px pegado a la izquierda). En Venta, el ticket se queda
   fijo a la vista mientras se baja por la lista de productos, para tener
   siempre a mano el total y el boton Cobrar. */
@media (min-width: 981px) {
  #view-venta .grid-2 > .card:last-child { position: sticky; top: 20px; }
}
@media (min-width: 1600px) {
  .grid-2 { grid-template-columns: minmax(0, 2fr) minmax(380px, 1fr); }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}

/* Tablas anchas (muchas columnas, alergenos, etc.): en vez de desbordar la
   tarjeta o cortarse, hacen su propio scroll horizontal. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll table { min-width: 100%; }

@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Boton "hamburguesa" para abrir/cerrar el menu lateral en movil.
   Oculto por defecto: solo se ve por debajo del punto de ruptura movil. */
.sidebar-toggle.hidden { display: none !important; }
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 250;
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.sidebar-toggle:active { transform: scale(0.94); }

/* Fondo oscuro detras del menu cuando esta abierto, para poder cerrarlo
   tocando fuera. Oculto salvo cuando se le añade la clase .show. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 150;
}
.sidebar-backdrop.show { display: block; }

@media (max-width: 720px) {
  .sidebar-toggle { display: flex; }

  /* En movil el menu deja de ocupar sitio en la fila (se saca del flujo con
     position: fixed) y se convierte en un panel que se desliza por encima
     del contenido, para que el contenido pueda usar toda la pantalla. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 230px;
    max-width: 80vw;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
  }
  .sidebar.open { transform: translateX(0); }

  .main { padding: 14px; padding-top: 66px; }
}

/* Grid de productos tipo tarjetas grandes para venta rapida */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
}

.product-btn {
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  padding: 16px 12px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.product-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--accent-soft); }
.product-btn:active { transform: translateY(0) scale(0.97); }
.product-btn .price { display: block; color: var(--accent); font-size: 14.5px; font-weight: 700; margin-top: 6px; font-family: var(--font-body); }

.product-img {
  display: block;
  width: 100%;
  height: 72px;
  /* "contain" y no "cover": la foto se ve entera (una botella no pierde el
     tapón ni la base) sobre el mismo fondo blanco de la foto. */
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.product-img-placeholder svg { width: 28px; height: 28px; }

.product-thumb-wrap { display: flex; align-items: center; gap: 8px; }
.product-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  cursor: pointer;
}
.product-thumb-placeholder {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  background: var(--bg);
}
.product-thumb-placeholder svg { width: 18px; height: 18px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border-soft); }
th { color: var(--muted); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; }

.ticket-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); font-size: 15px; }
.ticket-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 2px solid var(--border-soft);
}
.ticket-total span:first-child {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}
.ticket-total span:last-child {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
}

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-ok { background: #e3f3e3; color: var(--green); }
.badge-warn { background: #fdecea; color: var(--red); }
.badge-muted { background: #eee; color: var(--muted); }
.badge-info { background: var(--accent-soft); color: var(--accent-dark); }

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 300;
  background: var(--text);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-body);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(10px);
  transition: 0.25s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-box { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 20px 24px; min-width: 150px; box-shadow: var(--shadow-card); }
.stat-box .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.stat-box .value { font-size: 26px; font-weight: 700; font-family: var(--font-heading); color: var(--accent); margin-top: 4px; }

.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-row > * { flex: 1 1 140px; }
.form-row > button { flex: 0 0 auto; }

/* --- Pestañas de categoría (venta) --- */
.category-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.category-tab {
  background: #fff;
  border: 2px solid var(--border-soft);
  color: #5b4636;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font-heading);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.category-tab:hover { border-color: var(--brand-light); }
.category-tab:active { transform: scale(0.96); }
.category-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.ticket-subtotal { font-size: 12.5px; color: var(--muted); padding-top: 6px; }
.ticket-subtotal div { display: flex; justify-content: space-between; }

.waiter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 14.5px;
  box-shadow: var(--shadow-sm);
}
.waiter-bar button { margin-left: auto; }

.waiter-btn {
  background: #fff;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px 14px;
  text-align: center;
  font-size: 16.5px;
  font-weight: 700;
  font-family: var(--font-heading);
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.waiter-btn:hover { border-color: var(--brand-light); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.waiter-btn:active { transform: translateY(0) scale(0.97); }

/* --- Modal de PIN --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.modal-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 280px;
  text-align: center;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
}
.modal-box h3 { margin-top: 0; color: var(--brand); }
.modal-box input {
  text-align: center;
  font-size: 22px;
  letter-spacing: 6px;
}

/* Modal de revision de facturas: mucho mas ancho que el resto (PIN, receta),
   porque lleva una tabla de lineas editable dentro. */
.invoice-modal-box {
  width: 820px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}
.invoice-modal-box input,
.invoice-modal-box select {
  text-align: left;
  font-size: 14px;
  letter-spacing: normal;
}
.invoice-modal-box .error-msg:empty { display: none; }

.status-pill { padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-completada { background: #e3f3e3; color: var(--green); }
.status-anulada { background: #fdecea; color: var(--red); text-decoration: line-through; }

/* --- Alergenos --- */
.allergen-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.allergen-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.allergen-chip:hover { background: var(--border-soft); }
.allergen-chip input { width: auto; margin: 0; padding: 0; }
.allergen-cell { white-space: nowrap; font-size: 15px; }
.allergen-icon {
  display: inline-block;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.25;
  filter: grayscale(1);
  transition: opacity 0.12s ease, filter 0.12s ease;
}
.allergen-icon.active { opacity: 1; filter: none; background: #fdecea; }

/* --- Categorias con color --- */
.category-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.category-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.category-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}
.category-row input[type="color"] {
  width: 40px;
  height: 32px;
  padding: 2px;
  margin: 0;
  flex: none;
}

/* --- Descuentos rapidos (venta) --- */
.discount-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.discount-btn {
  background: #fff;
  border: 2px solid var(--border-soft);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.discount-btn:hover { border-color: var(--brand-light); }
.discount-btn:active { transform: scale(0.96); }
.discount-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- Receta / escandallo --- */
.recipe-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 13px;
}
.recipe-row input[type="number"] { margin: 0; }

/* --- Mapa de calor de horas punta --- */
.heatmap-table { font-size: 12px; }
.heatmap-table th, .heatmap-table td { text-align: center; padding: 4px; border-bottom: none; }
.heatmap-table th:first-child, .heatmap-table td:first-child { text-align: left; color: var(--muted); }
.heatmap-cell { border-radius: 4px; color: var(--text); font-weight: 600; }

/* --- Barra de mesa activa (venta) --- */
.table-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 14.5px;
  box-shadow: var(--shadow-sm);
}
.table-bar { flex-wrap: wrap; }

/* --- Mesas: barra de pestañas de zona + alternar lista/mapa --- */
.mesas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.mesas-toolbar .category-tabs { margin-bottom: 0; flex: 1 1 auto; }

/* Botón "Venta rápida" junto a las zonas: mismo tamaño que una pestaña pero
   en color de acción, para que no se confunda con una zona más. */
.category-tab.quick-sale-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.category-tab.quick-sale-tab:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.category-tab.quick-sale-tab .ui-icon { width: 16px; height: 16px; }

.view-toggle { display: flex; gap: 8px; flex: 0 0 auto; }
.view-toggle-btn {
  background: #fff;
  border: 2px solid var(--border-soft);
  color: var(--muted);
  min-width: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 17px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.view-toggle-btn:hover { border-color: var(--brand-light); }
.view-toggle-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Mesas: vista de lista (tarjetas), alternativa al mapa en movil/ordenador --- */
.table-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.table-card {
  position: relative;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 20px 14px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font-heading);
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.table-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.table-card:active { transform: translateY(0) scale(0.98); }
.table-card.occupied { border-color: var(--red); }
.table-card .table-card-seats, .table-card .table-card-total { font-size: 11px; font-weight: 600; font-family: var(--font-body); color: var(--muted); }
.table-card.occupied .table-card-total { color: var(--red); }

/* --- Mapa de mesas (salon) --- */
/* El plano necesita un ancho minimo de verdad para que las mesas quepan sin
   pisarse: la posicion de cada mesa es un % de este ancho, pero su tamaño es
   fijo en px, asi que en una pantalla muy estrecha (movil) un plano que se
   encogiese al 100% del ancho disponible juntaria las mesas hasta solaparlas.
   En vez de eso, el plano mantiene su ancho minimo y esta envoltura deja
   hacer scroll lateral cuando no cabe entero (igual que las tablas anchas). */
.floor-plan-scroll {
  overflow-x: auto;
  max-width: 100%;
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}
.floor-plan {
  position: relative;
  width: 100%;
  min-width: 640px;
  min-height: 480px;
  background:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.floor-plan.edit-mode { cursor: grab; }

.table-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 3px solid var(--green);
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-heading);
  text-align: center;
  padding: 4px;
  user-select: none;
  transition: box-shadow 0.12s ease, filter 0.12s ease;
}
.table-chip.round { border-radius: 50%; }
.table-chip.square { border-radius: 14px; }
.table-chip.rectangle { border-radius: 12px; }
.table-chip.barra { border-radius: 10px; border-style: double; border-width: 5px; }
.table-chip.occupied { border-color: var(--red); }
.table-chip.free:not(.edit-mode-parent) { cursor: pointer; }
.table-chip:not(.dragging):hover { filter: brightness(0.97); box-shadow: var(--shadow-card-hover); }
.table-chip.dragging { cursor: grabbing; z-index: 10; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.table-chip-name { line-height: 1.1; word-break: break-word; }
.table-chip-seats, .table-chip-total { font-size: 11px; font-weight: 600; font-family: var(--font-body); color: var(--muted); }
.table-chip.occupied .table-chip-total { color: var(--red); }
.table-chip-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.table-chip-resize {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-light);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: nwse-resize;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.table-chip.resizing { z-index: 10; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }

/* --- Pantalla de cocina (KDS): pensada para verse de lejos en una tablet --- */
.kds-body { margin: 0; background: var(--bg); min-height: 100vh; }

.kds-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--brand);
  color: #fff;
  padding: 16px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.kds-brand { font-family: var(--font-heading); font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.kds-header .category-tabs { margin-bottom: 0; flex: 1 1 auto; }
.kds-header .category-tab { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.kds-header .category-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.kds-clock { font-family: var(--font-heading); font-size: 20px; font-weight: 700; flex: 0 0 auto; }

.kds-main { padding: 24px; }
.kds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.kds-empty {
  text-align: center;
  color: var(--muted);
  font-size: 22px;
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 100px 20px;
}

.kds-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 3px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* El borde de la comanda es el semáforo del tiempo que lleva esperando:
   verde hasta 5 min, amarillo hasta 10, rojo a partir de ahí. */
.kds-card.t-ok { border-color: #2e7d32; }
.kds-card.t-warn { border-color: #e0a100; }
.kds-card.t-late { border-color: var(--red); background: #fdecea; animation: kds-pulse 1.6s ease-in-out infinite; }
/* Una comanda que ya se está preparando se distingue por el fondo. */
.kds-card.preparando { background: #fffaf3; }
.kds-card.preparando.t-late { background: #fdecea; }
@keyframes kds-pulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  50% { box-shadow: 0 0 0 6px rgba(198, 40, 40, 0.18); }
}

.kds-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kds-card-origin { font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--text); }
/* Cronómetro: cuenta desde que el camarero comandó el plato, y cambia de
   color solo según va pasando el tiempo. Grande, para verlo desde lejos. */
.kds-timer-row { display: flex; align-items: baseline; gap: 10px; }
.kds-timer {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.kds-timer.ok { color: #2e7d32; }
.kds-timer.warn { color: #b07d19; }
.kds-timer.late { color: var(--red); }

.kds-substate {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Leyenda del semáforo, en la barra de arriba. */
.kds-legend { display: flex; gap: 14px; align-items: center; }
.kds-legend span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85); white-space: nowrap; }
.kds-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.kds-legend .dot-ok { background: #4caf50; }
.kds-legend .dot-warn { background: #f0c020; }
.kds-legend .dot-late { background: #ef5350; }
@media (max-width: 900px) { .kds-legend { display: none; } }

.kds-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px dashed var(--border-soft);
  border-bottom: 1px dashed var(--border-soft);
}
.kds-item-line { font-size: 18px; font-weight: 600; font-family: var(--font-body); }
.kds-item-line span { color: var(--accent); font-weight: 700; margin-right: 4px; }
.kds-item-extras { font-size: 15px; font-weight: 700; color: var(--brand, #3b2416); margin: 2px 0 4px 26px; line-height: 1.3; }

.kds-card-actions { display: flex; gap: 8px; align-items: stretch; }
.kds-action-btn { flex: 1; padding: 16px; font-size: 17px; border-radius: var(--radius-md); color: #fff; }
.kds-action-btn.pendiente { background: var(--red); }
.kds-action-btn.preparando { background: var(--green); }
.kds-back-btn {
  flex: 0 0 auto;
  width: 48px;
  padding: 0;
  background: var(--border);
  color: var(--text);
  border-radius: var(--radius-md);
  font-size: 20px;
}

@media (max-width: 720px) {
  .kds-header { padding: 12px 16px; }
  .kds-main { padding: 16px; }
  .kds-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
}

/* Numerito de aviso en el menu lateral (pedidos online nuevos) */
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Pantalla "Pedidos online": reutiliza las tarjetas de la cocina (.kds-card,
   .kds-grid, .kds-items...) con algunos añadidos propios. */
.oo-address, .oo-notes { font-size: 14px; color: var(--text); }
.oo-total { font-size: 16px; font-weight: 700; margin-top: 2px; }
.oo-final-label { text-align: center; font-weight: 700; color: var(--muted); padding: 8px 0 2px; }
.oo-accept-btn { background: var(--green); }
.oo-status-badge.oo-nuevo { background: #fdecea; color: var(--red); }
.oo-status-badge.oo-aceptado { background: var(--accent-soft); color: var(--accent-dark); }
.oo-status-badge.oo-preparando { background: var(--accent-soft); color: var(--accent-dark); }
.oo-status-badge.oo-listo { background: #e3f3e3; color: var(--green); }
.oo-status-badge.oo-entregado { background: #eee; color: var(--muted); }
.oo-status-badge.oo-cancelado { background: #eee; color: var(--muted); }
.oo-card.urgent { background: #fff; border-color: var(--red); }

/* Pedido online ya pagado con SumUp: que no se vuelva a cobrar */
.oo-paid-badge {
  display: inline-block;
  background: #e3f3e3;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
}

/* Aviso por WhatsApp al cliente (pedidos online) */
.oo-wa-btn { font-size: 20px; }
/* Extras elegidos en la web, debajo de cada producto del pedido */
.oo-item-extras { margin: -2px 0 6px 28px; font-size: 13px; color: var(--accent-dark); font-weight: 700; }
.oo-item-extras span { color: var(--muted); font-weight: 600; }
.oo-wa-status { font-size: 13px; color: var(--green); font-weight: 700; }
.oo-wa-status.oo-wa-error { color: var(--red); }

/* Pantalla Ajustes: formulario de datos del negocio */
#businessForm .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
#businessForm label { font-size: 13px; font-weight: 700; color: var(--muted); }
#businessForm input { width: 100%; margin-bottom: 0; }
#businessForm .btn-primary { margin-top: 4px; }

/* ======================================================================
   Extras y complementos
   ====================================================================== */
#addGroupBtn { width: auto; }
.view-intro { color: var(--muted); margin: -12px 0 18px; max-width: 760px; line-height: 1.5; }

/* Boton de producto que pregunta extras */
.product-btn .product-extras-flag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
}

/* Lineas del ticket con extras */
.ticket-line { align-items: flex-start; gap: 10px; }
.ticket-line-name { flex: 1; min-width: 0; }
.ticket-line-name.editable { cursor: pointer; }
.ticket-line-name.editable:hover { color: var(--accent-dark); }
.ticket-line-extras { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.ticket-line-qty { white-space: nowrap; }

/* La X de anular la línea entera. Va apagada hasta que se pasa por encima:
   está a mano pero no invita a pulsarla sin querer, que es media venta menos. */
.ticket-line-del {
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ticket-line-del:hover { background: #fdecea; border-color: #f0c9c2; color: var(--red); }

/* Ventana de extras al vender */
.modifier-modal-box {
  width: 640px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 32px);
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
}
.modifier-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.modifier-modal-head h3 { margin: 0; font-size: 20px; }
.modifier-close {
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 18px;
  line-height: 1;
}
.modifier-close:hover { background: var(--bg); }
.modifier-groups { overflow-y: auto; padding: 8px 22px 16px; flex: 1; }
.modifier-group { padding: 14px 0 6px; }
.modifier-group + .modifier-group { border-top: 1px dashed var(--border-soft); }
.modifier-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.modifier-group-name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--text); }
.modifier-group-rule { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg); padding: 3px 10px; border-radius: 999px; }
.modifier-group-rule.required { color: var(--accent-dark); background: var(--accent-soft); }
.modifier-group.missing .modifier-group-rule.required { color: #fff; background: var(--accent); }
.modifier-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.modifier-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-align: left;
  font-size: 15px;
}
.modifier-option:hover { border-color: var(--brand-light); }
.modifier-option.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.modifier-option-name { font-weight: 600; line-height: 1.25; }
.modifier-option-price { font-size: 13px; font-weight: 700; color: var(--accent); font-family: var(--font-body); }
.modifier-modal-foot { border-top: 1px solid var(--border-soft); padding: 12px 22px 18px; background: #fff; }
.modifier-hint { font-size: 13px; color: var(--accent-dark); font-weight: 600; min-height: 18px; }
.modifier-hint:empty { min-height: 0; }
.modifier-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.modifier-actions .btn-secondary { flex: 0 0 auto; }
.modifier-actions .btn-primary { flex: 1; }
.modifier-actions .modifier-hint { flex: 1; color: var(--muted); }
.modifier-actions .modifier-hint + .btn-secondary { margin-left: auto; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* Pantalla de gestion de extras */
.mod-group-card { padding-top: 18px; }
.mod-group-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.mod-group-head input, .mod-group-head select { margin: 0; }
.mod-group-name { flex: 1 1 220px; font-family: var(--font-heading); font-weight: 600; font-size: 17px; }
.mod-group-head select { flex: 0 1 250px; }
.mod-max { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.mod-max input { width: 96px; padding: 10px 12px; }
.mod-row-tools { display: flex; gap: 6px; align-items: center; }
.mod-group-head .mod-row-tools { margin-left: auto; }
.mod-group-head .btn-red { padding: 10px 14px; font-size: 14px; }
.icon-btn {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 11px;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-sm);
}
.icon-btn:hover:not(:disabled) { background: var(--border-soft); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.danger { color: var(--red); }
.mod-options { border-top: 1px solid var(--border-soft); margin-top: 6px; }
.mod-option-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); }
.mod-option-row > input[type="text"] { flex: 1 1 200px; margin: 0; padding: 10px 12px; }
.mod-option-row.inactive > input[type="text"] { color: var(--muted); text-decoration: line-through; }
.mod-option-new { border-bottom: none; padding-top: 12px; }
.mod-option-new .btn-secondary { padding: 10px 16px; font-size: 14px; }
.mod-price-input { display: flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; }
.mod-price-input input { width: 92px; margin: 0; padding: 10px 10px; text-align: right; }
.mod-active { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; cursor: pointer; }
.mod-active input { width: auto; margin: 0; }
.mod-empty { color: var(--muted); font-size: 14px; margin: 10px 0; }
.mod-products { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-top: 14px; font-size: 14px; }
.mod-products .btn-secondary { flex: 0 0 auto; padding: 10px 16px; font-size: 14px; }
.mod-product-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mod-chip { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }

/* Ventana "¿Qué productos llevan este grupo?" */
.group-products-box { width: 560px; max-width: calc(100vw - 24px); max-height: calc(100vh - 32px); display: flex; flex-direction: column; text-align: left; }
.group-products-box input[type="search"] { text-align: left; letter-spacing: normal; font-size: 15px; }
.group-products-list { overflow-y: auto; flex: 1; min-height: 120px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 4px 12px; }
.gp-cat { padding: 8px 0; }
.gp-cat + .gp-cat { border-top: 1px solid var(--border-soft); }
.gp-cat-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 4px; }
.gp-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; }
.gp-item:hover { background: var(--bg); }
.gp-item input { width: 20px; height: 20px; margin: 0; flex: none; }
.gp-item span:nth-child(2) { flex: 1; }
.gp-price { color: var(--muted); font-size: 13px; }
.link-btn { background: none; color: var(--accent); padding: 4px 6px; font-size: 13px; font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: normal; }
.link-btn:hover { text-decoration: underline; }

/* Botón "Ingredientes" de cada opción de extra y su ventana */
.mod-recipe-btn {
  background: var(--bg); color: var(--muted); border: 1px dashed var(--border-soft);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700;
  font-family: var(--font-body); text-transform: none; letter-spacing: normal; cursor: pointer;
}
.mod-recipe-btn:hover { color: var(--text); border-style: solid; }
.mod-recipe-btn.has-recipe { color: var(--accent); border: 1px solid var(--accent); background: transparent; }
.orc-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: var(--radius-sm); }
.orc-row + .orc-row { border-top: 1px solid var(--border-soft); }
.orc-row.on { background: var(--bg); }
.orc-name { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; min-width: 0; }
.orc-name input { width: 20px; height: 20px; margin: 0; flex: none; }
.orc-name span { overflow: hidden; text-overflow: ellipsis; }
.orc-sign { width: auto; margin: 0; padding: 6px 8px; font-size: 13px; }
.orc-row .orc-qty { width: 72px; margin: 0; padding: 6px 8px; text-align: right; font-size: 15px; letter-spacing: normal; }
.orc-unit { width: 34px; color: var(--muted); font-size: 13px; }

/* Detalle de una venta (Ventas del día) */
.sale-detail-box { width: 560px; max-width: calc(100vw - 24px); max-height: calc(100vh - 32px); display: flex; flex-direction: column; text-align: left; }
.sale-detail-body { overflow-y: auto; flex: 1; }
.sale-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.sale-detail-meta strong { color: var(--text); font-weight: 700; }
.sale-line { display: grid; grid-template-columns: 36px 1fr auto; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.sale-line-qty { font-weight: 800; }
.sale-line-name { font-weight: 700; }
.sale-line-total { font-weight: 700; text-align: right; }
.sale-line-extras { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px; }
.sale-line-extra { font-size: 12.5px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 999px; padding: 1px 8px; }
.sale-line-note { grid-column: 2 / 4; font-size: 13px; color: var(--red); }
.sale-line-note::before { content: 'Nota: '; font-weight: 700; }
.sale-detail-sums { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.sale-detail-sums .total { font-size: 18px; font-weight: 800; }
.sale-detail-order-note { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255, 193, 7, 0.14); font-size: 13.5px; }
.sale-voided-banner { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(220, 53, 69, 0.1); color: var(--red); font-weight: 700; font-size: 13.5px; }
.sale-row-clickable { cursor: pointer; }
.sale-row-clickable:hover td { background: var(--bg); }
.sale-extras-hint { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

/* Informe de extras */
.extras-report-bar { height: 8px; border-radius: 999px; background: var(--accent); opacity: .75; min-width: 2px; }
.report-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.report-head h3 { margin: 0; }
.range-btns { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.range-btns button {
  background: transparent; color: var(--muted); border: none; border-radius: 0; padding: 7px 14px;
  font-size: 13px; font-weight: 700; font-family: var(--font-body); text-transform: none; letter-spacing: normal; cursor: pointer;
}
.range-btns button + button { border-left: 1px solid var(--border); }
.range-btns button.active { background: var(--accent); color: #fff; }
.extras-free { color: var(--muted); font-size: 12px; font-weight: 400; }

@media (max-width: 720px) {
  .modifier-options { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .modifier-groups, .modifier-modal-head, .modifier-modal-foot { padding-left: 16px; padding-right: 16px; }
  .mod-group-head .mod-row-tools { margin-left: 0; }
  .mod-products { flex-direction: column; }
}

/* ==========================================================================
   Caja: aviso general, entradas/salidas de dinero y arqueo
   ========================================================================== */

/* Franja de aviso arriba del programa (caja cerrada o sin cerrar de ayer). */
.alert-banner {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  background: #fff6e5;
  border: 1px solid #f0d49a;
  color: #7a5200;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.alert-banner:hover { background: #fdeed3; }
.alert-banner em { font-style: normal; font-weight: 700; }

/* Texto de ayuda pequeño, debajo de un titulo o de un campo. */
.hint-text {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
td.hint-text, .hint-text td { text-align: center; padding: 14px 0; }

.warn-notice {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: #fdecea;
  border: 1px solid #f3c2bc;
  color: var(--red);
  font-size: 14px;
}

.blind-notice {
  margin: 12px 0;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid #e3cbb6;
  color: var(--accent-dark);
  font-size: 14px;
  line-height: 1.5;
}

.expected-cash {
  margin: 14px 0 0;
  font-size: 18px;
  font-family: var(--font-heading);
  color: var(--accent);
}

.amount-in { color: var(--green); font-weight: 700; white-space: nowrap; }
.amount-out { color: var(--red); font-weight: 700; white-space: nowrap; }

/* Detalle de un arqueo: pares "concepto / importe". */
.arqueo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
  margin: 6px 0 16px;
}
.arqueo-grid > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: #fcfaf8;
}
.arqueo-grid span { color: var(--muted); font-size: 13px; }
.arqueo-grid strong { font-family: var(--font-heading); font-size: 15px; }

.arqueo-result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.arqueo-result.ok { background: #e9f6e9; border-color: #bfe0c0; }
.arqueo-result.bad { background: #fdecea; border-color: #f3c2bc; }
.arqueo-result > div { display: flex; flex-direction: column; gap: 3px; }
.arqueo-result span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.arqueo-result strong { font-family: var(--font-heading); font-size: 20px; }

/* Ajuste con casilla (pantalla Ajustes). */
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  line-height: 1.45;
}
.switch-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent);
}
.switch-row > span { display: flex; flex-direction: column; gap: 3px; }

/* Campo con su etiqueta encima, dentro de una fila de formulario. */
.field-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 180px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.field-label input { width: 100%; margin: 0; }

/* Botoncito de borrar en una fila de tabla. */
.btn-icon-del {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.btn-icon-del:hover { background: #fdecea; border-color: #f3c2bc; color: var(--red); }

/* ==========================================================================
   Comandar: mandar la nota a cocina y a barra
   ========================================================================== */

.btn-comandar {
  width: 100%;
  margin-top: 16px;
  padding: 16px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter .15s ease;
}
.btn-comandar:hover:not(:disabled) { filter: brightness(1.08); }
/* Sin nada que mandar: se ve apagado, pero se puede pulsar y explica por qué. */
.btn-comandar.blocked {
  background: #f0ebe6;
  color: var(--muted);
  box-shadow: none;
}
.btn-comandar.done { background: #e9f6e9; color: var(--green); }
.btn-comandar:disabled { opacity: .6; cursor: progress; }

/* Contador de unidades pendientes dentro del botón. */
.comanda-count {
  display: inline-block;
  min-width: 26px;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 15px;
}

/* ==========================================================================
   Aviso de ANULACIÓN en la pantalla de cocina
   ========================================================================== */
/* Tiene que ser lo más llamativo de la pantalla, y quedarse ahí hasta que
   alguien pulse "Enterado". Fondo rojo entero, no solo el borde: una comanda
   que va tarde también tiene el borde rojo y no pueden confundirse. */

/* Una comanda NORMAL a la que le han anulado algo. Es la misma tarjeta que el
   cocinero ya tenía delante, puesta en rojo: no una tarjeta nueva, que parece
   otro pedido más. */
.kds-card.kds-cancel-mark {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  animation: kds-cancel-pulse 1.4s ease-in-out infinite;
}
.kds-cancel-mark .kds-card-origin { color: #fff; }
.kds-cancel-mark .badge { background: rgba(255, 255, 255, 0.2); color: #fff; }
.kds-cancel-mark .kds-timer { color: #fff; }
.kds-cancel-mark .kds-substate { color: rgba(255, 255, 255, 0.85); }
.kds-cancel-mark .kds-items { border-color: rgba(255, 255, 255, 0.35); }
.kds-cancel-mark .kds-item-line { color: #fff; }
.kds-cancel-mark .kds-item-line span { color: #fff; }
.kds-cancel-mark .kds-item-extras,
.kds-cancel-mark .kds-item-note,
.kds-cancel-mark .kds-order-note {
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
}

/* El cartel de "esto ya no se hace", debajo del plato al que le afecta. */
.kds-item-killed {
  margin: 2px 0 8px 26px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--red);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.kds-card.kds-cancel {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  animation: kds-cancel-pulse 1.4s ease-in-out infinite;
}
@keyframes kds-cancel-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(198, 40, 40, 0); }
}

.kds-cancel .kds-card-origin { color: #fff; }
.kds-cancel .badge { background: rgba(255, 255, 255, 0.2); color: #fff; }
.kds-cancel .kds-timer { color: #fff; }
.kds-cancel .kds-substate { color: rgba(255, 255, 255, 0.85); }
.kds-cancel .kds-items { border-color: rgba(255, 255, 255, 0.35); }

.kds-cancel-title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* Los platos anulados van tachados: se lee de un vistazo que NO se preparan. */
.kds-item-cancel { color: #fff; text-decoration: line-through; text-decoration-thickness: 2px; }
.kds-item-cancel span { color: #fff; }
.kds-cancel .kds-item-extras,
.kds-cancel .kds-item-note {
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.kds-cancel-reason {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.kds-cancel-who { font-size: 14px; color: rgba(255, 255, 255, 0.85); }

/* Botón "Enterado": blanco sobre el rojo, imposible de no ver. */
.kds-action-btn.kds-cancel-btn {
  background: #fff;
  color: var(--red);
  font-weight: 700;
}
.kds-action-btn.kds-cancel-btn:hover { background: #ffecec; }

.kds-legend-cancel {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

/* ==========================================================================
   Motivo de una anulación
   ========================================================================== */

.reason-modal-box { width: 520px; max-width: calc(100vw - 24px); padding: 0; }
.reason-modal-body { padding: 16px 20px 6px; }
.reason-modal-body .hint-text { margin: 0 0 14px; }
.reason-modal-body .hint-text strong { color: var(--red); }
#reasonInput {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 16px;
}
#reasonInput:focus { outline: none; border-color: var(--brand-light); }

/* Recuadro de informe que hay que mirar, no solo leer. */
.stat-box.alert { border-color: #f0c9c2; background: #fdf2f0; }
.stat-box.alert .value { color: var(--red); }

/* ==========================================================================
   Dividir la cuenta de una mesa
   ========================================================================== */

.split-modal-box { width: 620px; max-width: calc(100vw - 24px); max-height: calc(100vh - 32px); padding: 0; display: flex; flex-direction: column; }

/* Las dos formas de dividir, como dos pestañas. */
.split-tabs { display: flex; gap: 8px; padding: 14px 20px 0; }
.split-tab {
  flex: 1;
  padding: 12px 14px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.split-tab:hover { border-color: var(--brand-light); }
.split-tab.active { border-color: var(--brand); background: var(--brand); color: #fff; }

.split-body { padding: 16px 20px 6px; overflow-y: auto; }
.split-body .hint-text { margin: 0 0 14px; }

.split-lines { display: flex; flex-direction: column; gap: 8px; }
.split-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
/* Una línea de la que ya se ha elegido algo se marca, para verlo de un vistazo. */
.split-line.picked { border-color: var(--green); background: #f4fbf4; }
.split-line-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.split-line-extras { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.split-line-price { flex: none; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.split-line-pick { flex: none; display: flex; align-items: center; gap: 8px; }
.split-line-pick strong { min-width: 62px; text-align: center; font-family: var(--font-heading); font-size: 15px; }
.split-of { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* Botones de sumar y restar, grandes para el dedo. */
.split-step {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.split-step:hover:not(:disabled) { border-color: var(--brand-light); background: #fdfaf7; }
.split-step:disabled { opacity: .3; cursor: default; }

.split-people { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 15px; }
.split-people strong { min-width: 34px; text-align: center; font-family: var(--font-heading); font-size: 22px; color: var(--brand); }

.split-parts { display: flex; flex-direction: column; gap: 8px; }
.split-part {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #fff;
}
.split-part-n {
  flex: none;
  width: 28px; height: 28px; line-height: 28px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--brand);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.split-part-amount { flex: 1; font-family: var(--font-heading); font-size: 19px; color: var(--accent); }
.split-part-method { flex: none; width: 140px; margin: 0; }

.split-summary { flex: 1; font-size: 14px; }
.split-summary strong { font-family: var(--font-heading); font-size: 17px; color: var(--accent); }
.split-summary-hint { color: var(--muted); font-size: 13px; }
.split-warn { color: var(--red); font-size: 12.5px; font-weight: 700; }

/* ==========================================================================
   Ordenar a mano las pestañas (categorías en Venta, zonas en Mesas)
   ========================================================================== */

/* Botón "Ordenar" al final de una fila de pestañas. Mismo tamaño y misma forma
   de píldora que una pestaña, pero de borde discontinuo y en gris: se ve que
   pertenece a la fila sin competir con las pestañas de verdad. */
.tab-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 2px dashed var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}
.tab-order-btn:hover { border-color: var(--brand-light); color: var(--brand); background: #fff; }
.tab-order-btn:active { transform: scale(0.96); }
.tab-order-btn .ui-icon { width: 16px; height: 16px; margin: 0; flex: none; }

.sort-modal-box { width: 460px; max-width: calc(100vw - 24px); padding: 0; }
.sort-modal-body { padding: 16px 20px 6px; }
.sort-modal-body .hint-text { margin: 0 0 14px; }
.sort-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }

.sort-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #fff;
}
.sort-pos {
  flex: none;
  width: 28px; height: 28px; line-height: 28px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--brand);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.sort-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Botones de subir y bajar: grandes, que se pulsen bien con el dedo. */
.sort-move {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--brand);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sort-move:hover:not(:disabled) { border-color: var(--brand-light); background: #fdfaf7; }
.sort-move:disabled { opacity: 0.35; cursor: default; }
.sort-move .ui-icon { width: 20px; height: 20px; margin: 0; }

/* ==========================================================================
   Notas del camarero (por plato y de todo el pedido)
   ========================================================================== */

/* Botón de la nota dentro de una línea del ticket. Sin nota es un enlace
   discreto que no roba atención; con nota se ve el texto en rojo, porque es
   justo lo que hay que leer antes de servir el plato. */
.ticket-line-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px 2px 6px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.ticket-line-note:hover { border-color: var(--brand-light); color: var(--brand); }
.ticket-line-note.has-note {
  border-style: solid;
  border-color: #f0c9c2;
  background: #fdf2f0;
  color: var(--red);
  font-weight: 700;
}
.ticket-line-note .ui-icon { width: 13px; height: 13px; margin: 0; flex: none; }

/* Botón de la nota de todo el pedido, debajo del ticket. */
.btn-order-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.btn-order-note:hover { border-color: var(--brand-light); color: var(--brand); }
.btn-order-note.has-note {
  border-style: solid;
  border-color: #f0c9c2;
  background: #fdf2f0;
  color: var(--red);
}
.btn-order-note .ui-icon { width: 16px; height: 16px; margin: 0; flex: none; }
.order-note-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ventana para escribir la nota. */
.note-modal-box {
  width: 520px;
  max-width: calc(100vw - 24px);
  padding: 0;
}
.note-modal-body { padding: 16px 20px 4px; }
.note-modal-body .hint-text { margin: 0 0 12px; }
.note-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.note-chip {
  padding: 8px 14px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
.note-chip:hover { border-color: var(--brand-light); }
.note-chip.selected { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 700; }
#noteInput {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 16px;
  resize: vertical;
}
#noteInput:focus { outline: none; border-color: var(--brand-light); }
.note-count { margin: 4px 2px 0; text-align: right; font-size: 12px; color: var(--muted); }

/* Notas en la pantalla de cocina: tienen que verse desde lejos y no
   confundirse con un extra. */
.kds-item-note {
  margin: 4px 0 6px 26px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fdecea;
  color: var(--red);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.kds-order-note {
  margin: 8px 0 2px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff3d6;
  color: #8a5b00;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

/* Marca de "ya ha salido a cocina" en una línea del ticket. */
.ticket-line-sent {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
}
.ticket-line-sent.partial { color: #b07d19; }

/* Mesa con la nota apuntada pero sin mandar a cocina. */
.table-pending-send {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff3d6;
  color: #8a5b00;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   Iconos de la interfaz
   ========================================================================== */

/* Icono de línea que va dentro de un botón o una etiqueta, al lado del texto.
   Toma el tamaño de la letra y el color del texto, así que sirve igual en un
   botón blanco que en uno marrón, y nunca sale a todo color como un emoji. */
.ui-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.2em;
}
button .ui-icon { margin-right: 2px; }

/* En los botones que son solo icono (lista / plano en Mesas) el icono manda,
   así que se agranda un poco y se centra. */
.view-toggle-btn { display: inline-flex; align-items: center; justify-content: center; }
.view-toggle-btn .ui-icon { width: 20px; height: 20px; margin: 0; vertical-align: 0; }

.btn-comandar .ui-icon { width: 1.05em; height: 1.05em; margin-right: 6px; }
.table-pending-send .ui-icon { width: 13px; height: 13px; vertical-align: -0.15em; margin-right: 1px; }
.table-bar .ui-icon { width: 17px; height: 17px; }

/* ==========================================================================
   Pasar el ticket de barra a una mesa
   ========================================================================== */

.btn-move-table {
  width: 100%;
  margin-top: 14px;
  padding: 13px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--brand);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.btn-move-table:hover { border-color: var(--brand-light); background: #fdfaf7; }

.move-table-zones { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }

.move-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
}

.move-table-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 78px;
  padding: 12px 10px;
  border: 2px solid var(--green);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.move-table-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.move-table-btn.occupied { border-color: var(--red); background: #fffaf9; }
.move-table-name { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--text); }
.move-table-state { font-size: 12px; font-weight: 700; color: var(--muted); }
.move-table-btn.occupied .move-table-state { color: var(--red); }

/* Botones de la barra de mesa (cambiar de mesa, juntar, volver al mapa). */
.table-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 720px) {
  .table-bar-actions { width: 100%; margin-left: 0; }
  .table-bar-actions .btn-secondary { flex: 1 1 auto; }
}

/* Logo del ticket en la pantalla de Ajustes. */
.logo-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.logo-preview {
  flex: 0 0 auto;
  min-width: 150px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.logo-canvas { max-width: 220px; height: auto; image-rendering: pixelated; }
.logo-actions { display: flex; flex-direction: column; gap: 8px; flex: 1 1 200px; }
.logo-actions .btn-secondary { align-self: flex-start; }

/* ==========================================================================
   Comandero en el móvil (24-09-2026)
   --------------------------------------------------------------------------
   - Hasta 980 px (móviles y tablets en vertical): el ticket deja de ir debajo
     de todos los productos y pasa a ser un panel que sube desde abajo, con una
     barra fija con las unidades, el total y el botón Comandar.
   - Hasta 720 px (móviles): además se esconde lo que no es del camarero y se
     compacta todo para que quepan más productos por pantalla.
   En el sobremesa (más de 980 px) no cambia nada.
   ========================================================================== */

/* Cosas que solo existen en el móvil: fuera en el ordenador. */
.mobile-only, .mobile-order-bar, .ticket-sheet-backdrop, .sidebar button.nav-more-btn { display: none; }

/* --- Buscador de productos (en todas las pantallas) --- */
.product-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.product-search > .ui-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}
.product-search input {
  margin: 0;
  padding-left: 42px;
  padding-right: 44px;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
}
.product-search input::-webkit-search-cancel-button { display: none; }
#productSearchClear {
  position: absolute;
  right: 6px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--border-soft);
  color: var(--text);
  font-size: 14px;
}
/* Mientras se busca, las pestañas se ven apagadas (la búsqueda es en todas). */
.category-tabs.searching .category-tab { opacity: .45; }

/* --- Contador de unidades en cada producto --- */
.product-btn { position: relative; }
.product-qty-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.product-btn:has(.product-qty-badge) { border-color: var(--accent-soft); }

/* "Salto" al añadir un producto. */
@keyframes tpv-bump {
  0% { transform: scale(1); }
  35% { transform: scale(.93); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.bump { animation: tpv-bump .28s ease; }

/* --- Botones − / + de las líneas del ticket, a tamaño de dedo --- */
.ticket-line-qty { display: inline-flex; align-items: center; gap: 6px; }
.qty-btn {
  min-width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  border-radius: 12px;
}
.qty-num { min-width: 22px; text-align: center; font-weight: 700; }
.ticket-line-note { min-height: 32px; padding: 4px 10px 4px 8px; font-size: 13px; }

/* --- Cabecera del ticket (en el móvil lleva el botón de cerrar el panel) --- */
.ticket-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket-sheet-head h3 { margin-bottom: 12px; }

/* --- Aviso de guardado (WiFi caída, mesa cobrada desde otra pantalla) --- */
.save-banner {
  position: sticky;
  top: 0;
  z-index: 190;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: var(--shadow-card);
}
.save-banner.error { background: var(--red); color: #fff; }
.save-banner.warn { background: #fff4d6; color: #6b4a00; border: 1px solid #f0d58a; }
.save-banner span { flex: 1; }
.save-banner button {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .15);
  color: inherit;
}

/* --- Login: casilla "Recordar este dispositivo" --- */
.remember-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.remember-row input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.remember-row small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ==========================================================================
   Móviles y tablets en vertical (hasta 980 px)
   ========================================================================== */
@media (max-width: 980px) {
  .mobile-only { display: inline-flex; }

  /* Hueco abajo para que la barra fija no tape los últimos productos. */
  #view-venta { padding-bottom: 96px; }

  /* Barra fija de abajo */
  .mobile-order-bar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -6px 18px rgba(107, 66, 38, .12);
  }
  .mob-ticket-btn {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 14px;
    background: var(--accent-soft);
    color: var(--text);
    border-radius: var(--radius-md);
    text-align: left;
  }
  .mob-count {
    flex: none;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 30px;
    text-align: center;
  }
  .mob-count.zero { background: var(--border); color: var(--muted); }
  .mob-label { flex: 1; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-total { font-size: 16px; font-weight: 800; color: var(--accent-dark); white-space: nowrap; }
  .mob-comandar {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .mob-comandar .ui-icon { width: 1.05em; height: 1.05em; }
  .mob-comandar.blocked { background: #f0ebe6; color: var(--muted); box-shadow: none; }
  .mob-comandar.done { background: #e9f6e9; color: var(--green); }
  .mob-comandar:disabled { opacity: .6; }
  .mob-comandar .comanda-count { margin-left: 2px; }

  /* El ticket, como panel que sube desde abajo */
  #ticketCard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    max-height: 88vh;
    max-height: 88dvh;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 22px 22px 0 0;
    padding: 0 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .25);
    transform: translateY(105%);
    transition: transform .25s ease;
    visibility: hidden;
  }
  #ticketCard.sheet-open { transform: translateY(0); visibility: visible; }
  .ticket-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -18px 4px;
    padding: 16px 18px 8px;
    background: #fff;
    border-bottom: 1px solid var(--border-soft);
  }
  .ticket-sheet-head h3 { margin: 0; }
  .ticket-sheet-close {
    padding: 10px 14px;
    font-size: 14px;
    background: var(--border);
    color: var(--text);
  }
  .ticket-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 170;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .ticket-sheet-backdrop.show { opacity: 1; pointer-events: auto; }
  body.sheet-locked { overflow: hidden; }

  /* Datos de cobro: escondidos hasta pulsar "Cobrar…" */
  #ticketCard .pay-fields, #ticketCard .pay-detail { display: none; }
  #ticketCard.pay-open .pay-fields, #ticketCard.pay-open .pay-detail { display: block; }
  #ticketCard.pay-open .discount-bar { display: flex; }
  #ticketCard.pay-open .btn-show-pay { display: none; }
  .btn-show-pay {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
  }

  /* Barra de la mesa: "‹ Mesas", el nombre y "Opciones" */
  .table-bar { gap: 8px; padding: 8px 10px; }
  .table-back-btn, .table-more-btn {
    padding: 10px 12px;
    font-size: 14px;
    background: var(--border);
    color: var(--text);
  }
  .table-more-btn { margin-left: auto; }
  .table-bar-actions { display: none; }
  .table-bar.actions-open .table-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-left: 0; }
  .table-bar.actions-open .table-more-btn { background: var(--brand); color: #fff; }
  /* "Volver al mapa" ya está arriba como "‹ Mesas". */
  #leaveTableBtn { display: none; }

  /* La ✕ de anular la línea, también a tamaño de dedo */
  .ticket-line-del { min-width: 40px; height: 40px; margin-left: 4px; padding: 0; font-size: 15px; }
  /* En el panel del ticket el nombre va arriba y los botones debajo, para que
     no se aprieten en una pantalla estrecha. */
  #ticketCard .ticket-line { flex-wrap: wrap; row-gap: 6px; }
  #ticketCard .ticket-line-name { flex: 1 1 100%; }
  #ticketCard .ticket-line-qty { margin-left: auto; }

  /* Toast por encima de la barra de abajo */
  .toast { left: 12px; right: 12px; bottom: 88px; text-align: center; }
}

/* ==========================================================================
   Móviles (hasta 720 px)
   ========================================================================== */
@media (max-width: 720px) {
  /* El aviso de guardado no tapa el botón ☰ */
  .save-banner { margin-left: 56px; top: 12px; }

  /* Título al lado del botón ☰ en vez de debajo: se gana una franja. */
  .main { padding-top: 12px; }
  h1.page-title { margin: 0 0 12px 56px; font-size: 20px; line-height: 44px; }

  .card { padding: 14px; border-radius: 16px; margin-bottom: 12px; }
  .grid-2 { gap: 0; }

  /* Barra de abajo un poco más apretada para que quepa todo */
  .mobile-order-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .mob-ticket-btn { padding: 10px 10px; gap: 8px; }
  .mob-comandar { padding: 10px 12px; font-size: 15px; }

  /* Barra del camarero, más fina */
  .waiter-bar { padding: 6px 8px 6px 14px; margin-bottom: 10px; font-size: 13.5px; gap: 8px; }
  .waiter-bar button { padding: 8px 14px; font-size: 14px; }
  .table-bar { margin-bottom: 10px; font-size: 14px; }

  /* Categorías: una sola fila que se desliza con el dedo */
  .category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    margin: 0 -14px 12px;
    padding: 2px 14px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-tab { flex: none; padding: 10px 16px; font-size: 14px; }
  /* Ordenar categorías / zonas es cosa del encargado, desde el ordenador. */
  .category-tabs .tab-order-btn { display: none; }

  /* Mesas: "Venta rápida" en su propia fila, encima de las zonas, a todo el
     ancho. En una sola fila deslizable se quedaba cortado al final. */
  #zoneTabs { flex-wrap: wrap; }
  #zoneTabs .quick-sale-tab { order: -1; flex: 1 0 100%; justify-content: center; }

  /* Productos: 3 por fila, sin foto, más bajitos. Caben el doble. */
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #productGrid .product-btn {
    min-height: 74px;
    padding: 10px 6px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.2;
    word-break: break-word;
    box-shadow: var(--shadow-sm);
  }
  #productGrid .product-btn:hover { transform: none; }
  /* Con foto: pequeña, para reconocer el producto de un vistazo. Sin foto,
     fuera el dibujo de relleno (solo ocupa sitio). */
  #productGrid .product-img { height: 46px; margin-bottom: 4px; border-radius: 8px; }
  #productGrid .product-img-placeholder { display: none; }
  #productGrid .product-btn .price { font-size: 13px; margin-top: 4px; }
  .product-extras-flag { font-size: 10px; }
  .product-qty-badge { top: -5px; right: -5px; min-width: 24px; height: 24px; line-height: 24px; font-size: 13px; }

  /* Camareros (pantalla "¿Quién eres?"): 2 por fila, grandes */
  #waiterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Mesas: sin el formulario de crear/mover mesas (se hace desde el ordenador) */
  .mesas-admin { display: none; }
  .table-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

  /* Menú: solo Venta, Mesas y Cocina; el resto con "Más opciones" */
  .sidebar button.nav-more-btn { display: flex; }
  .sidebar button.nav-btn.nav-extra { display: none; }
  .sidebar.show-all button.nav-btn.nav-extra { display: flex; }
}


/* ==========================================================================
   Estilos repuestos el 24-09-2026
   --------------------------------------------------------------------------
   style.css se sobrescribió por error con una copia antigua al meter las
   fotos de producto y se perdieron varias partes. Estas clases las usan
   pantallas hechas después (bloqueo por inactividad, perfiles de personal,
   aviso de WhatsApp, cocina) y se han vuelto a escribir aquí.
   ========================================================================== */

/* Bloqueo por inactividad: tapa todo y pide el PIN */
.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(58, 42, 30, 0.92);
  backdrop-filter: blur(4px);
}
.lock-box {
  width: 100%;
  max-width: 340px;
  padding: 30px 26px;
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.lock-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  padding: 12px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--brand);
}
.lock-icon svg { width: 100%; height: 100%; }
.lock-box h2 { margin: 0 0 4px; font-size: 20px; color: var(--brand); }
.lock-sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.lock-box input { text-align: center; font-size: 24px; letter-spacing: 0.4em; }
.lock-box .btn-secondary { width: 100%; margin-top: 10px; }

/* Personal: botones de cada fila y tabla de permisos */
.staff-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-actions button { padding: 8px 14px; font-size: 14px; }
.perm-cell { text-align: center; }
.perm-yes, .perm-no {
  display: inline-block;
  min-width: 34px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}
.perm-yes { background: #e9f6e9; color: var(--green); }
.perm-no { background: #f3eeea; color: var(--muted); }

/* Pedidos online: motivo del fallo de WhatsApp */
.oo-wa-why { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; opacity: 0.85; }
.wa-fail-reason {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #fdf2f0;
  border: 1px solid #f0c9c2;
  color: var(--red);
  font-size: 13px;
  word-break: break-word;
}
.kds-elapsed { font-size: 13px; color: var(--muted); margin-top: 4px; }
.kds-elapsed a { color: inherit; }

/* Cocina: aviso de que hay una versión nueva cargándose */
.kds-update {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff4d6;
  color: #6b4a00;
  font-size: 13px;
  font-weight: 700;
}


/* ==========================================================================
   Impresoras: modo virtual, impresora de cocina y ventana "Impresiones"
   ========================================================================== */
.printer-mode-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border-soft); }
.printer-mode-box .btn-secondary { align-self: flex-start; padding: 8px 14px; font-size: 14px; }
.kitchen-printer-box { padding: 12px 14px; margin: 0 0 16px; border-radius: var(--radius-sm); border: 1px dashed var(--border); }
.kitchen-printer-box h4 { margin: 0 0 10px; font-family: var(--font-heading); color: var(--brand); }
.kitchen-printer-box .btn-secondary { padding: 8px 14px; font-size: 14px; }
.print-jobs-box { width: 920px; max-width: calc(100vw - 24px); max-height: calc(100vh - 32px); display: flex; flex-direction: column; text-align: left; }
.print-jobs-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; min-height: 0; flex: 1; overflow: hidden; }
.print-jobs-list { overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.print-job-row { display: grid; grid-template-columns: 48px 1fr; gap: 2px 8px; width: 100%; text-align: left; background: transparent; color: var(--text); border: none; border-bottom: 1px solid var(--border-soft); border-radius: 0; padding: 9px 10px; font-family: var(--font-body); font-size: 13.5px; text-transform: none; letter-spacing: normal; cursor: pointer; }
.print-job-row:hover { background: var(--bg); }
.print-job-row.selected { background: var(--accent-soft); }
.print-job-time { grid-row: span 2; color: var(--muted); font-weight: 700; }
.print-job-title { font-weight: 700; }
.print-job-meta { color: var(--muted); font-size: 12.5px; }
.print-job-status.error { color: var(--red); font-weight: 800; }
.print-job-status.ok { color: var(--green); font-weight: 700; }
.print-job-status.virtual { color: var(--accent); font-weight: 700; }
.print-job-preview { overflow-y: auto; background: #e9e3dc; border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.print-job-error { background: rgba(198, 40, 40, 0.1); color: var(--red); font-weight: 700; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; align-self: stretch; }
.escpos-paper { width: 100%; max-width: 360px; height: auto; box-shadow: 0 6px 18px rgba(0,0,0,0.18); image-rendering: auto; }
@media (max-width: 720px) {
  .print-jobs-layout { grid-template-columns: 1fr; grid-template-rows: 160px 1fr; }
}

/* --- Interruptores de Stock (Carta / Pedir online) y barra de la carta web --- */
.tpv-switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; vertical-align: middle; }
.tpv-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.tpv-switch-track {
  position: absolute; inset: 0; border-radius: 999px; background: #d9cfc4;
  transition: background .18s ease;
}
.tpv-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease;
}
.tpv-switch input:checked + .tpv-switch-track { background: var(--green, #2e8b57); }
.tpv-switch input:checked + .tpv-switch-track::after { transform: translateX(20px); }
.tpv-switch input:focus-visible + .tpv-switch-track { outline: 2px solid var(--brand-light); outline-offset: 2px; }

.web-carta-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 12px 14px; margin-bottom: 14px; border-radius: 12px;
  background: var(--accent-soft); font-size: 14px;
}
.web-carta-bar > div:first-child { display: flex; flex-direction: column; gap: 3px; flex: 1 1 320px; }
.web-carta-bar a { color: var(--accent-dark); font-weight: 700; }
.web-carta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.web-carta-actions .btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }

/* --- Pantalla de cocina: historial de comandas terminadas --------------- */
.kds-history-btn {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
}
.kds-history-btn.active { background: #fff; color: var(--brand); border-color: #fff; }

.kds-history-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.kds-history-bar h2 { margin: 0; font-family: var(--font-heading); font-size: 22px; color: var(--text); }
.kds-history-sub { font-size: 14px; color: var(--muted); font-weight: 600; }
.kds-history-bar input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 18px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: #fff;
  color: var(--text);
}
.kds-history-bar input[type="search"]:focus { outline: none; border-color: var(--accent); }
.kds-history-pending {
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  animation: kds-cancel-pulse 1.4s ease-in-out infinite;
}
.kds-history-close {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 13px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.kds-card.kds-hist-card { border-color: var(--border); background: #fff; }
.kds-hist-origin {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.1;
}
.kds-hist-times { font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.kds-hist-times strong { color: var(--text); }
.kds-hist-mins {
  margin-left: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 999px;
}
.kds-hist-match { background: #fff3d6; border-radius: 8px; padding: 2px 6px; margin: 0 -6px; }
.kds-hist-killed { color: var(--muted); text-decoration: line-through; }
.kds-hist-killed em, .kds-hist-partial { font-style: normal; font-size: 13px; font-weight: 800; color: var(--red); text-transform: uppercase; }
.kds-hist-killed em { text-decoration: none; display: inline-block; }
.kds-card.kds-hist-aviso { border-color: #f1b8b3; background: #fff7f6; }
.kds-hist-tag { font-size: 13px; font-weight: 800; color: var(--red); letter-spacing: 0.04em; }
.kds-hist-reopen {
  flex: 1;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.kds-hist-reopen.confirm { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 720px) {
  .kds-history-bar h2 { font-size: 19px; }
  .kds-history-close { width: 100%; }
}

/* --- Copias de seguridad (Ajustes) --- */
.alert-banner-danger { background: #fdecea; border-color: #f2b8b2; color: #8a1c12; }
.alert-banner-danger:hover { background: #fadcd8; }
.backup-status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-soft); font-size: 14px; line-height: 1.45; }
.backup-status.ok { background: #eef7ee; border-color: #c6e3c6; color: #1f5d1f; }
.backup-status.warn { background: #fff6e5; border-color: #f0d49a; color: #7a5200; }
.backup-status.bad { background: #fdecea; border-color: #f2b8b2; color: #8a1c12; }
.backup-status svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.backup-status small { display: block; opacity: .85; margin-top: 2px; }
.backup-table-wrap { overflow-x: auto; }
.backup-table td:last-child { text-align: right; white-space: nowrap; }
.backup-table a { color: inherit; font-weight: 600; }
.backup-help { margin-top: 16px; font-size: 14px; }
.backup-help summary { cursor: pointer; font-weight: 600; }
.backup-help ol { margin: 10px 0 6px 18px; padding: 0; line-height: 1.6; }

/* ===================== Control de gastos (G-1b) ===================== */
.gx-intro { margin: -14px 0 16px; }
.gx-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.gx-tabs button { background: none; border: none; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.gx-tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }

.gx-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.gx-toolbar .range-btns button { padding: 8px 14px; }
.gx-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: rgba(0,0,0,.07); font-size: 12px; }
.range-btns button.active .gx-count { background: rgba(255,255,255,.25); }
.gx-search { flex: 1 1 220px; min-width: 0; }
.gx-new-btn { width: auto; flex: 0 0 auto; }

.gx-table td.num, .gx-table th.num { text-align: right; white-space: nowrap; }
.gx-row { cursor: pointer; }
.gx-row:hover td, .gx-row:focus td { background: var(--accent-soft); }
.gx-row:focus { outline: none; }
.gx-warn { color: var(--red); }
.gx-okmark { color: var(--green); }
.gx-pending { color: var(--accent-dark); font-size: 12px; font-weight: 700; }
.gx-empty { text-align: center; padding: 22px 10px; }

.gx-back { background: none; border: none; color: var(--brand); font: inherit; font-weight: 700; padding: 4px 0; margin-bottom: 8px; cursor: pointer; }
.gx-detail-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.gx-detail-head h2 { margin: 0 0 6px; color: var(--brand); font-size: 22px; }
.gx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-period { display: flex; gap: 8px; align-items: center; }
.gx-period select { width: auto; margin: 0; }

.gx-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid; margin-bottom: 12px; font-size: 14px; line-height: 1.45; }
.gx-notice .ui-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.gx-notice.warn { background: #fff6e5; border-color: #f0d49a; color: #7a5200; }
.gx-notice.info { background: #eef4fb; border-color: #c8d9ef; color: #1f4470; }

.gx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.gx-kpi { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; }
.gx-kpi-num { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--brand); }
.gx-kpi-label { color: var(--muted); font-size: 13px; }
.gx-kpi-sub { font-size: 12px; color: var(--muted); }

.gx-card-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.gx-card-head h3 { margin: 0; }
.gx-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gx-card-actions button { width: auto; }
.gx-danger { color: var(--red); }
.gx-info { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
.gx-info dt { color: var(--muted); }
.gx-info dd { margin: 0; overflow-wrap: anywhere; }
.gx-info a { color: var(--brand); }

.gx-subtabs { display: flex; gap: 4px; overflow-x: auto; margin: -4px 0 12px; border-bottom: 1px solid var(--border-soft); }
.gx-subtabs button { background: none; border: none; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.gx-subtabs button.active { color: var(--brand); border-bottom-color: var(--brand); }

.gx-modal { width: 640px; max-width: 95vw; max-height: 92vh; overflow-y: auto; text-align: left; }
.gx-modal input, .gx-modal select, .gx-modal textarea { text-align: left; font-size: 15px; letter-spacing: normal; width: 100%; }
.gx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.gx-span2 { grid-column: 1 / -1; }
.gx-cif-hint { display: block; font-size: 12px; margin-top: 4px; color: var(--muted); min-height: 1em; }
.gx-cif-hint.ok { color: var(--green); }
.gx-cif-hint.bad { color: var(--red); }
.gx-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.gx-modal-actions button { width: auto; min-width: 120px; }

@media (max-width: 720px) {
  .gx-form { grid-template-columns: 1fr; }
  .gx-new-btn { width: 100%; }
  .gx-info { grid-template-columns: 1fr; gap: 2px; }
  .gx-info dd { margin-bottom: 8px; }
  .gx-modal-actions button { flex: 1; min-width: 0; }
  .gx-period { width: 100%; }
}
.gx-form .field-label .hint-text, .gx-form .gx-cif-hint { text-transform: none; letter-spacing: normal; font-weight: 400; }
.gx-modal .modifier-modal-head { padding: 0 0 12px; margin-bottom: 12px; }
.gx-card-actions button { padding: 8px 16px; font-size: 14px; }
@media (max-width: 720px) {
  /* En el móvil la lista se queda con lo esencial: nombre, CIF, cómo factura y estado. */
  .gx-table.gx-sup-list th:nth-child(3), .gx-table.gx-sup-list td:nth-child(3),
  .gx-table.gx-sup-list th:nth-child(5), .gx-table.gx-sup-list td:nth-child(5),
  .gx-table.gx-sup-list th:nth-child(6), .gx-table.gx-sup-list td:nth-child(6) { display: none; }
  .gx-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gx-kpi { padding: 12px 14px; }
  .gx-kpi-num { font-size: 19px; }
}

/* --- "¿Quién eres?" desde cualquier pantalla --- */
.id-modal { z-index: 400; }
.id-modal-box { width: 460px; max-width: 94vw; text-align: center; }
.id-modal-box .hint-text { margin: -4px 0 14px; }
.id-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.id-modal-pin p { margin: 0 0 10px; font-weight: 600; }
.id-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.id-modal-actions button { flex: 1; }

.who-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.who-btn:hover { background: rgba(255,255,255,.14); }
.who-btn .nav-icon svg { width: 20px; height: 20px; }
.who-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.who-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-action { font-size: 12px; opacity: .8; }
.who-btn.who-none { border-color: #f0d49a; background: rgba(240, 212, 154, .18); }

/* Franja "Hay cambios nuevos en el TPV" (api.js → comprobarVersion) */
.version-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 500; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--radius-md); border: none; background: var(--brand); color: #fff; font: inherit; font-size: 14px; text-align: left; box-shadow: 0 10px 28px rgba(0,0,0,.25); cursor: pointer; }
.version-banner:hover { filter: brightness(1.08); }

/* --- Arriba a la izquierda: quién usa el TPV y botón de fichar --- */
.top-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.top-user-who { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--card); box-shadow: var(--shadow-sm); font: inherit; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.top-user-who:hover { border-color: var(--brand-light); }
.top-user-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 14px; }
.top-user-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.top-user-name { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-user-state { font-size: 12px; color: var(--muted); }
.top-user-state.st-trabajando { color: var(--green); font-weight: 600; }
.top-user-state.st-pausa { color: #a76a00; font-weight: 600; }
.top-user-btn { width: auto; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.top-user-btn:hover { border-color: var(--brand-light); }
.top-user-btn svg { width: 18px; height: 18px; }
.top-user-clock { background: var(--brand); border-color: var(--brand); color: #fff; }
.top-user-clock:hover { filter: brightness(1.08); }
.top-user.top-user-none .top-user-who { border-color: #f0d49a; background: #fff8ea; }
.top-user.top-user-none .top-user-avatar { background: var(--muted); }

.clock-modal-box { width: 460px; max-width: 94vw; max-height: 90vh; overflow-y: auto; text-align: left; }
.clock-modal-box .modifier-modal-head { padding: 0 0 12px; margin-bottom: 8px; }
.clock-hint { margin: 0 0 12px; }
.clock-list { display: flex; flex-direction: column; gap: 8px; }
.clock-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: var(--card); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.clock-row:hover { border-color: var(--brand-light); background: #fffaf5; }
.clock-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.clock-dot { width: 12px; height: 12px; border-radius: 50%; background: #cfc6be; flex: 0 0 auto; }
.clock-dot.st-trabajando { background: var(--green); }
.clock-dot.st-pausa { background: #e0a100; }
.clock-person { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.clock-modal-box input { text-align: center; font-size: 22px; letter-spacing: 6px; width: 100%; }
.clock-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.clock-actions button { width: 100%; padding: 14px; font-size: 16px; }
.clock-actions .clock-out.btn-primary { background: var(--accent); }

@media (max-width: 720px) {
  /* En el móvil el botón del menú (☰) ocupa la esquina: se deja sitio. */
  .top-user { margin-left: 52px; }
  .top-user-who { flex: 1 1 100%; order: 0; }
  .top-user-btn { flex: 1; justify-content: center; }
}
.fichaje-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
#fichajesTableBody td.num, #view-fichajes th.num { text-align: right; }
/* "¿Quién eres?" obligatoria: sin identificarse no se ve el TPV de detrás. */
.id-modal.id-modal-obligatorio { background: rgba(58, 42, 30, 0.92); }
.id-modal-clock { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: none; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.id-modal-clock:hover { background: var(--accent-soft); }

/* --- Fichajes: registro de jornada (F2-7) --------------------------------- */
.fx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fx-head h3 { margin: 0; }
.fx-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.fx-filters .field-label { min-width: 160px; }
.fx-export { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.fx-export a { text-decoration: none; display: inline-flex; align-items: center; }
.fx-warn { display: block; color: #9a5b00; background: #fff5e0; border-radius: 8px; padding: 6px 10px; margin: 6px 0; font-size: 13px; font-weight: 600; }
.clock-row-text .fx-warn { padding: 2px 8px; margin: 4px 0 0; font-size: 12px; }
.fx-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.fx-totals div { background: var(--bg); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; }
.fx-totals span { font-size: 12px; color: var(--muted); }
.fx-totals strong { font-size: 16px; }
.fx-table td, .fx-table th { white-space: nowrap; }
.fx-table select { font-size: 13px; padding: 4px 6px; }
.fx-over td { background: #fdecea; }
.fx-orig { display: block; font-size: 12px; color: var(--muted); }
.fx-sub { margin: 14px 0 6px; font-size: 14px; }
.fx-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.fx-check input { width: auto; }
.fx-corr { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px 12px; margin: 8px 0; background: var(--card); text-align: left; }
.fx-corr.discrepancia { border-color: #f0b8b3; }
.fx-corr-grid { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; margin-top: 8px; font-size: 13px; }
.fx-corr-grid > span { color: var(--muted); }
.fx-corr-resp { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fx-corr-resp textarea { flex: 1 1 200px; min-height: 38px; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.fx-corr-box { width: 560px; max-width: 94vw; max-height: 92vh; overflow-y: auto; text-align: left; }
.fx-corr-box .field-label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.fx-corr-box textarea { font: inherit; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.fx-corr-orig { background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 6px 0; }
.fx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-breaks-head { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.fx-break-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; margin: 6px 0; align-items: center; }
.fx-break-row input, .fx-break-row select { font-size: 13px; padding: 6px; min-width: 0; }
.fx-modal-btns { display: flex; gap: 10px; margin-top: 14px; }
.fx-modal-btns button { flex: 1; }
.btn-link { background: none; border: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.btn-link:hover { text-decoration: underline; }
.clock-notice { margin-top: 10px; }
.clock-notice p { color: #9a5b00; background: #fff5e0; border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-size: 13px; }
.clock-mine-btn { display: block; width: 100%; margin-top: 12px; background: none; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px; font: inherit; color: var(--brand); font-weight: 600; cursor: pointer; }
#clockStepMine { text-align: left; }
#clockStepMine .card { box-shadow: none; border: 1px solid var(--border-soft); padding: 12px; }
.clock-modal-box:has(#clockStepMine:not([hidden])) { width: 760px; }
.fx-mine-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; }
.clock-modal-box input.fx-mine-month { width: auto; font-size: 14px; letter-spacing: 0; text-align: left; padding: 6px 8px; }
.fx-mine-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fx-mine-actions button { flex: 1; }
.fx-details { margin-top: 10px; }
.fx-details summary { cursor: pointer; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) {
  .fx-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-row2, .fx-break-row { grid-template-columns: 1fr; }
}
.fx-filters .field-label { flex: 1 1 180px; margin: 0; }
.fx-filters .field-label input, .fx-filters .field-label select { width: 100%; }
.fx-filters .btn-primary { flex: 0 0 auto; width: auto; padding: 10px 28px; }
.fx-export .btn-secondary { padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; color: var(--text); }
.fx-corr-box input, .fx-corr-box select { font-size: 15px; letter-spacing: 0; text-align: left; width: 100%; box-sizing: border-box; min-width: 0; }
.fx-corr-box .fx-break-row input, .fx-corr-box .fx-break-row select { font-size: 13px; }
.clock-modal-box:has(#clockStepMine:not([hidden])) { width: 820px; }
#clockStepMine .fx-table th, #clockStepMine .fx-table td { white-space: normal; padding-left: 6px; padding-right: 6px; }
.fx-corr-box .fx-break-row { grid-template-columns: 1fr 1fr; }
/* Mientras se sabe quién es y qué puede hacer, no se enseña nada que dependa
   de permisos (si no, al recargar se ve el menú entero y luego se esconde). */
.permisos-cargando [data-perm] { display: none !important; }

/* --- Proveedores repetidos: juntar (G-1c) --------------------------------- */
.gx-dup-banner { align-items: center; margin: 12px 0 0; }
.gx-dup-banner .gx-dup-text { flex: 1; }
.gx-dup-banner button { flex: 0 0 auto; }
.gx-notice-actions { margin-top: 8px; }
.gx-merge-modal { width: 700px; }
.gx-merge-group { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px; margin: 12px 0; }
.gx-merge-why { display: flex; align-items: center; gap: 6px; color: #7a5200; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.gx-merge-why .ui-icon { width: 16px; height: 16px; }
.gx-merge-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; margin: 4px 0; }
.gx-merge-row.keep { border-color: var(--green); background: #f1f8f1; }
.gx-modal .gx-merge-row input[type=radio] { width: auto; flex: 0 0 auto; }
.gx-merge-info { flex: 1; min-width: 0; }
.gx-merge-tag { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.gx-merge-row.keep .gx-merge-tag { color: var(--green); }
.gx-merge-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.gx-merge-actions button { width: auto; flex: 0 0 auto; min-width: 150px; }

/* --- Documentos de gasto: subir (G-2a) ------------------------------------ */
.gx-doc-counts { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.gx-doc-err { max-width: 260px; white-space: normal; margin-top: 2px; }
.gx-doc-actions { white-space: nowrap; text-align: right; }
.gx-danger-link { color: var(--red); }
.gx-upload-modal { width: 620px; }
.gx-drop { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 18px; text-align: center; background: #fffaf5; transition: border-color .15s, background .15s; }
.gx-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.gx-drop p { margin: 6px 0; }
.gx-drop-icon { width: 34px; height: 34px; color: var(--brand-light); }
.gx-drop-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.gx-modal .gx-drop-btns button { width: auto; min-width: 150px; }
.gx-up-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.gx-up-row { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px; }
.gx-up-thumb { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.gx-up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gx-up-thumb svg { width: 28px; height: 28px; }
.gx-up-info { flex: 1; min-width: 0; font-size: 13px; }
.gx-up-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-up-bar { display: block; height: 6px; background: var(--border-soft); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.gx-up-bar span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.gx-up-ok { color: var(--green); display: inline-flex; align-items: center; gap: 4px; }
.gx-up-ok .ui-icon, .gx-up-dup .ui-icon { width: 14px; height: 14px; }
.gx-up-error { color: var(--red); }
.gx-up-dup { color: #7a5200; background: #fff6e5; border-radius: 6px; padding: 4px 6px; margin-top: 4px; display: flex; gap: 4px; align-items: flex-start; }
.gx-up-btns { display: flex; gap: 2px; flex: 0 0 auto; }
.gx-modal .gx-up-btns button { width: auto; }
.gx-combine { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--radius-sm); background: var(--bg); margin-bottom: 10px; cursor: pointer; font-size: 14px; }
.gx-modal .gx-combine input { width: auto; margin-top: 3px; }
.gx-card-head #docUploadBtn { width: auto; flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
.gx-up-thumb img { border: 1px solid var(--border-soft); }
/* Ver documento (G-2b) */
.gx-docview-modal { width: 720px; }
.gx-dv-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.gx-dv-h { margin: 16px 0 6px; font-size: 15px; }
.gx-dv-line { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; margin: 6px 0; font-size: 13px; }
.gx-dv-line-top { display: flex; justify-content: space-between; gap: 10px; }
.gx-dv-base { font-weight: 700; white-space: nowrap; }
.gx-dv-code { font-family: monospace; font-size: 12px; background: var(--bg); border-radius: 4px; padding: 1px 5px; }
.gx-dv-fam { margin-top: 4px; }
.gx-dv-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.gx-dv-totals { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 8px; }
.gx-dv-total { font-weight: 700; font-size: 16px; }
.gx-dv-bad { color: var(--red); }
.gx-notice.bad { background: #fdecea; border-color: #f0b8b3; color: #8e1f1f; }
.gx-dv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.gx-modal .gx-dv-foot button { width: auto; }
.gx-queue { align-items: center; margin: 4px 0 12px; }
.gx-queue .gx-queue-text { flex: 1; }
.gx-queue button { flex: 0 0 auto; width: auto; }
/* Lista de Documentos (G-2e) */
.gx-docs-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gx-docs-btns { display: flex; gap: 8px; }
.gx-docs-btns button { width: auto; padding-left: 22px; padding-right: 22px; }
.gx-docs-filters select { width: auto; min-width: 150px; }
.gx-docs-table tr.gx-row { cursor: pointer; }
.gx-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.gx-pager button { width: auto; }
@media (max-width: 640px) {
  .gx-docs-btns { width: 100%; }
  .gx-docs-btns button { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
  .gx-docs-filters select { flex: 1 1 45%; min-width: 0; }
}
.gx-docs-filters #docStatusBtns { flex: 1 1 100%; overflow-x: auto; white-space: nowrap; max-width: 100%; }
.gx-docs-filters #docStatusBtns button { flex: 0 0 auto; }
.gx-docs-filters .gx-search { flex: 1 1 260px; }

/* --- Revisar un documento (G-3a) ------------------------------------------ */
.gx-review { position: fixed; inset: 0; z-index: 290; background: var(--bg); display: flex; flex-direction: column; }
body.gx-review-open { overflow: hidden; }
.gx-rv-bar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--card); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.gx-rv-bar .gx-back { margin: 0; }
.gx-rv-title { flex: 1; min-width: 200px; }
.gx-rv-title h2 { margin: 0; font-size: 18px; color: var(--brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-rv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.gx-rv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gx-rv-actions button { width: auto; }
.gx-rv-tabs { display: none; }
.gx-rv-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 560px); min-height: 0; }
.gx-rv-paper { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: #e9e3dc; }
.gx-rv-paper:fullscreen { background: #333; }
.gx-rv-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.gx-rv-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.gx-rv-pages button { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.gx-rv-pages button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.gx-rv-zoom { display: flex; gap: 6px; align-items: center; }
.gx-rv-zoom button, .gx-rv-zoom a { width: auto; padding: 6px 12px; font-size: 13px; text-decoration: none; }
.gx-rv-zoom.pdf #rvZoomOut, .gx-rv-zoom.pdf #rvZoomIn, .gx-rv-zoom.pdf #rvZoomVal { display: none; }
.gx-rv-view { flex: 1; min-height: 0; overflow: auto; }
.gx-rv-view iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.gx-rv-img { padding: 12px; text-align: center; }
.gx-rv-img img { max-width: none; box-shadow: var(--shadow-card); background: #fff; }
.gx-rv-nofile { padding: 30px; text-align: center; }
.gx-rv-data { overflow-y: auto; padding: 14px; min-height: 0; }
.gx-rv-card { margin-bottom: 12px; }
.gx-rv-card h3 { margin: 0 0 8px; }
.gx-rv-warn { margin-bottom: 12px; }
.gx-rv-warn summary { cursor: pointer; font-weight: 700; color: #7a5200; margin-bottom: 8px; }
.gx-rv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gx-rv-form .field-label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.gx-rv-form input, .gx-rv-form select { width: 100%; box-sizing: border-box; }
.gx-rv-newsup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gx-rv-no { display: inline-block; min-width: 22px; text-align: center; font-size: 11px; color: var(--muted); background: var(--bg); border-radius: 6px; margin-right: 2px; }
.gx-rv-line-btns { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.gx-rv-lineform { background: #fffaf5; border-color: var(--brand-light); }
.gx-rv-lf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gx-rv-lf-grid .field-label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; }
.gx-rv-lf-grid input, .gx-rv-lf-grid select { width: 100%; box-sizing: border-box; padding: 7px 8px; font-size: 14px; }
.gx-rv-lf-wide { grid-column: 1 / -1; }
.gx-rv-lf-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.gx-rv-lf-foot button { width: auto; }
.gx-rv-iva { margin-bottom: 6px; }
.gx-rv-foot { text-align: center; margin: 6px 0 20px; }
@media (max-width: 900px) {
  .gx-rv-tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--border); }
  .gx-rv-tabs button { flex: 1; background: none; border: none; padding: 10px; font: inherit; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; }
  .gx-rv-tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
  .gx-rv-body { grid-template-columns: 1fr; }
  .gx-review[data-tab="papel"] .gx-rv-data { display: none; }
  .gx-review[data-tab="datos"] .gx-rv-paper { display: none; }
  .gx-rv-paper { border-right: 0; }
  .gx-rv-lf-grid { grid-template-columns: 1fr 1fr; }
  .gx-rv-form { grid-template-columns: 1fr; }
  .gx-rv-bar { padding: 8px 12px; }
}
.gx-rv-zoom span { white-space: nowrap; min-width: 48px; text-align: center; }
.gx-rv-lf-grid .field-label { justify-content: flex-end; }
@media (max-width: 900px) {
  .gx-rv-actions button { padding: 6px 10px; font-size: 13px; }
  .gx-rv-title { min-width: 0; }
  .gx-rv-title h2 { font-size: 16px; }
  .gx-rv-zoom button, .gx-rv-zoom a { padding: 5px 9px; font-size: 12px; }
  .gx-rv-data { padding: 10px; }
}

/* --- Familias de gasto (G-3b) --------------------------------------------- */
.gx-fam-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.gx-fam-btn:hover .gx-fam-chip { outline: 2px solid var(--brand-light); }
.gx-fam-x { padding: 0 4px; font-size: 12px; color: var(--muted); }
.gx-fam-overlay { z-index: 320; }
.gx-fam-modal { width: 560px; display: flex; flex-direction: column; max-height: 88vh; }
.gx-fam-modal .gx-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.gx-fam-for { margin: -4px 0 8px; }
.gx-fam-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.gx-fam-q { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.gx-fam-crumbs { font-size: 13px; margin: 2px 0 8px; }
.gx-fam-crumbs .btn-link { padding: 2px; }
.gx-fam-list { overflow-y: auto; flex: 1; min-height: 120px; border-top: 1px solid var(--border-soft); }
.gx-fam-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-soft); }
.gx-fam-pick { flex: 1; text-align: left; background: none; border: 0; padding: 12px 10px; font: inherit; font-size: 15px; cursor: pointer; color: var(--text); }
.gx-fam-pick:hover { background: #fffaf5; }
.gx-fam-in { flex: 0 0 auto; background: var(--bg); border: 0; border-left: 1px solid var(--border-soft); padding: 0 16px; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; }
.gx-modal .gx-fam-pick, .gx-modal .gx-fam-in, .gx-modal .gx-fam-q { width: auto; }
.gx-fam-all .gx-fam-pick { font-weight: 700; color: var(--brand); }
.gx-fam-modal .gx-search { flex: 0 0 auto; font-size: 15px; letter-spacing: 0; text-align: left; padding: 10px 12px; }

/* --- Stock desde la compra (G-3c) ----------------------------------------- */
.gx-stock { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.gx-stock.on { background: #eef7ee; }
.gx-stock-sw { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; }
.gx-stock-sw input { width: auto; }
.gx-stock-art { padding: 0; }
.gx-stock-pick { width: auto; padding: 4px 10px; font-size: 13px; }
.gx-stock-eq { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gx-stock-f { width: 70px; padding: 4px 6px; font-size: 14px; text-align: right; }
.gx-stock-prev { color: var(--green); }
.gx-ing-new { background: var(--bg); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.gx-ing-new-row { display: flex; gap: 6px; flex-wrap: wrap; }
.gx-ing-new-row input { flex: 1 1 180px; min-width: 0; font-size: 15px; letter-spacing: 0; text-align: left; padding: 8px 10px; }
.gx-ing-new-row select { width: auto; }
.gx-modal .gx-ing-new-row button { width: auto; }
/* Aprobar (G-3d) */
.gx-rv-blocks { background: #fff6e5; border: 1px solid #f0d49a; border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 12px; font-size: 14px; color: #6b4a00; }
.gx-rv-blocks ul { margin: 6px 0; padding-left: 18px; }
.gx-rv-modo { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.gx-rv-modo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gx-rv-modo-btns button { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; white-space: normal; height: auto; }
.gx-rv-modo-btns button span { font-weight: 400; font-size: 12px; color: var(--muted); }
.gx-rv-next { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
.gx-rv-next button { width: auto; }
.gx-flash { animation: gxflash 1.5s ease; }
@keyframes gxflash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: none; } }
@media (max-width: 640px) { .gx-rv-modo-btns { grid-template-columns: 1fr; } }
/* Rechazar / eliminar (G-3e) */
.gx-reason-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.gx-reason-quick button { border: 0; cursor: pointer; font: inherit; font-size: 12px; width: auto; }
#rvReasonModal textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
#rvReasonModal .field-label { display: flex; flex-direction: column; gap: 4px; }
.gx-danger-bg { background: var(--red); }
.gx-rv-prices ul { margin: 6px 0; padding-left: 18px; } .gx-rv-prices { margin-top: 8px; }

/* G-4a · Cargos e impuestos */
.gx-ch-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--border, #eee); }
.gx-ch-row:last-child { border-bottom: 0; }
.gx-ch-amt { font-weight: 600; white-space: nowrap; text-align: right; }
.gx-ch-btns { grid-column: 1 / -1; display: flex; gap: 14px; }
.gx-ch-name { grid-column: span 2; }
.gx-ch-check { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.gx-ch-check input[type="checkbox"] { width: auto; }
.gx-tocharge { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.gx-tocharge select { width: auto; padding: 4px 6px; font-size: 13px; }
.gx-tocharge .btn-primary { width: auto; padding: 4px 10px; font-size: 13px; }
@media (max-width: 700px) { .gx-ch-name { grid-column: 1 / -1; } }
.gx-ch-sub { color: var(--muted); font-size: 13px; font-weight: 400; }
/* G-4b · Abonos y tickets */
.gx-rv-rect { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gx-rv-rect[hidden] { display: none; }
.gx-rv-efecto { margin-top: 8px; }
@media (max-width: 700px) { .gx-rv-rect { grid-template-columns: 1fr; } }
/* G-4c · Compra manual y adjuntar el papel */
.gx-rv-nofile-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.gx-rv-nofile-box button { width: auto; }
#rvAttach { width: auto; }
/* G-5a · Recepción de mercancía (pensada para móvil y tablet) */
.nav-btn.nav-off { display: none !important; }
.rec-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rec-top .page-title { margin-bottom: 4px; }
.rec-top #recBack { width: auto; }
.rec-h { margin: 16px 0 10px; }
.rec-sups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rec-sup { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; min-height: 110px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; text-align: left; font: inherit; }
.rec-sup:hover { border-color: var(--brand-light); }
.rec-sup strong { font-size: 17px; }
.rec-sup-n { font-size: 22px; font-weight: 700; color: var(--brand); }
.rec-empty { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; }
.rec-empty svg { width: 28px; height: 28px; flex: 0 0 auto; color: var(--green); }
.rec-otros { margin-top: 20px; }
.rec-otros summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.rec-otros-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-otros-list button { width: auto; }
.rec-filtros { margin: 14px 0; }
.rec-doc { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 16px; margin-bottom: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; text-align: left; font: inherit; }
.rec-doc:hover { border-color: var(--brand-light); }
.rec-doc-st { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rec-papel { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.rec-papel a { width: auto; text-decoration: none; display: inline-block; }
.rec-allok { width: auto; margin-bottom: 12px; }
.rec-lines { display: flex; flex-direction: column; gap: 10px; padding-bottom: 90px; }
.rec-line { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
.rec-line.ok { border-color: #b9dcbc; background: #f7fcf7; }
.rec-line-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rec-line-doc { margin: 6px 0 10px; font-size: 15px; }
.rec-count { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec-count button { width: auto; min-height: 48px; }
.rec-count .btn-link { min-height: 0; }
.rec-qty { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rec-qty input { width: 110px; font-size: 22px; font-weight: 700; text-align: center; padding: 8px; min-height: 48px; box-sizing: border-box; }
.rec-prob { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 10px; padding: 10px; background: #fffaf5; border-radius: var(--radius-md); }
.rec-prob .field-label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; }
.rec-prob select, .rec-prob textarea { width: 100%; box-sizing: border-box; font-size: 15px; padding: 8px; }
.rec-prob .hint-text { grid-column: 1 / -1; }
.rec-who { margin-top: 6px; }
.rec-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--border); }
.rec-foot button { width: auto; min-height: 52px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 640px) {
  .rec-sups { grid-template-columns: 1fr 1fr; }
  .rec-sup { min-height: 90px; padding: 14px; }
  .rec-count { display: grid; grid-template-columns: 1fr 1fr; }
  .rec-qty { grid-column: 1 / -1; }
  .rec-qty input { flex: 1 1 auto; }
  .rec-count .btn-link { grid-column: 1 / -1; justify-self: start; }
  .rec-prob { grid-template-columns: 1fr; }
  .rec-foot button { width: 100%; }
}
/* G-5b · Incidencias del reparto */
.rec-line-st { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rec-inc-chip { border: 0; cursor: pointer; font: inherit; font-size: 11px; }
.rec-inc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; }
.rec-inc.cerrada { opacity: .8; }
.rec-inc-st { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.rec-inc-det { margin: 8px 0 6px; font-size: 14px; }
.rec-inc-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.rec-inc-btns button { width: auto; min-height: 44px; }
.rec-inc-btns .btn-link { min-height: 0; }
.rec-inc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding: 12px; background: #fffaf5; border-radius: var(--radius-md); }
.rec-inc-form .field-label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; }
.rec-inc-form .field-label[hidden] { display: none; }
.rec-inc-form input, .rec-inc-form select { width: 100%; box-sizing: border-box; font-size: 15px; padding: 8px; }
.rec-inc-form .rec-inc-btns { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 640px) { .rec-inc-form { grid-template-columns: 1fr; } }
/* G-5c · Ajustes de Gastos y subir desde Recepción */
.rec-top-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-top-btns button { width: auto; }
.ga-grupo { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px 14px; margin: 0; min-width: 0; }
.ga-grupo legend { font-weight: 700; padding: 0 6px; color: var(--brand); }
.ga-grupo[disabled] { opacity: .85; }
.ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.ga-grid .field-label, .ga-grupo > .field-label { display: flex; flex-direction: column; gap: 4px; }
.ga-switch { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ga-switch input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.ga-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.ga-btns button { width: auto; }
.ga-grupo > .ga-switch, .ga-grupo > .field-label, .ga-grupo > .ga-log { margin-top: 10px; }
.ga-grupo textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); resize: vertical; }
.ga-log { font-size: 13px; }
.ga-log summary { cursor: pointer; color: var(--brand); }
.ga-log ul { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow: auto; }
.ga-log li { margin: 3px 0; overflow-wrap: anywhere; }
.ga-checks { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.ga-checks li { margin: 3px 0; overflow-wrap: anywhere; }
.ga-checks .ga-ok { color: var(--green); }
.ga-checks .ga-bad { color: var(--red, #b3261e); }
.ga-meta { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2, #faf3ea); font-size: 14px; }
.ga-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.ga-copy > span { min-width: 190px; color: var(--text-muted, #6b5b50); }
.ga-copy code { overflow-wrap: anywhere; background: #fff; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }
.ga-copy .btn-link { width: auto; }
.ga-sub { margin: 18px 0 4px; font-size: 15px; color: var(--brand); border-top: 1px solid var(--border); padding-top: 12px; }
.imp-modal { width: 900px; }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin: 10px 0; }
.imp-grid .field-label { display: flex; flex-direction: column; gap: 4px; }
.imp-mapa { margin: 10px 0; }
.imp-prog { margin: 12px 0; }
.imp-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.imp-bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.imp-prev { margin-top: 12px; }
.imp-prev .gx-kpis { margin-bottom: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.imp-tabla { width: 100%; margin: 8px 0; font-size: 14px; }
.imp-tabla .num { text-align: right; white-space: nowrap; }
.imp-tabla .imp-suma td { font-weight: 700; border-top: 2px solid var(--border); }
.imp-nocuenta td { opacity: .55; }
/* G-14 · Precios y carta, presupuestos, mermas */
.gpr-scroll { overflow-x: auto; }
.gpr-table { width: 100%; font-size: 14px; }
.gpr-table .num { text-align: right; white-space: nowrap; }
.gpr-table .btn-link { width: auto; padding: 0; text-align: left; font-weight: 600; }
.gpr-det td { background: var(--bg, #faf6f1); }
.gpr-mini { width: 100%; font-size: 13px; }
.gpr-mini th, .gpr-mini td { padding: 3px 6px; }
.gpr-mini .num { text-align: right; }
.gpr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.gpr-chip { font-size: 13px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }
.gpr-chip.sube { background: #fdecea; border-color: #f5c2bd; }
.gpr-chip.baja { background: #e8f5e9; border-color: #b9dfbb; }
.gpr-ahorro { min-width: 200px; }
.gpr-budgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gpr-budget-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; margin-bottom: 4px; }
.gpr-bar { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; }
.gpr-bar i { display: block; height: 100%; background: var(--green); }
.gpr-tendencia i, .gpr-aviso i { background: #e0a458; }
.gpr-pasado i { background: var(--red); }
.gpr-warn { color: #b26a00; }
.gpr-in { width: 110px !important; }
.gpr-sel { width: auto !important; display: inline-block; margin: 0 0 0 6px; padding: 6px 10px; }
.gpr-lab { font-size: 13px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; margin-top: 6px; }
.gpr-in-s { width: 70px !important; }
/* G-15 · Ayuda (?) */
.gx-help-btn { width: 30px !important; height: 30px; min-width: 30px; padding: 0 !important; border-radius: 50%; border: 1.5px solid var(--brand); background: transparent; color: var(--brand); font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; flex: 0 0 auto; align-self: center; }
.gx-title { display: flex; align-items: center; gap: 10px; }
.gx-title .gx-help-btn { font-family: inherit; }
.gx-help-btn:hover { background: var(--brand); color: #fff; }
.gx-help { width: 600px; }
.gx-stock-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; background: #fff8e6; border: 1px solid #f0d58c; border-radius: var(--radius-md); padding: 8px 10px; }
.gx-stock-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.gx-stock-ask-btns button { width: auto; min-height: 36px; padding: 6px 12px; font-size: 14px; }
.gx-help ul, .gx-help ol { padding-left: 20px; margin: 8px 0; }
.gx-help li { margin: 6px 0; line-height: 1.45; }
@media (max-width: 640px) { .imp-tabla { display: block; overflow-x: auto; } }
/* G-6c · Conciliación */
.conc-search { width: 100%; box-sizing: border-box; margin: 0 0 12px; }
.gx-count { opacity: .7; font-size: 11px; margin-left: 2px; }
.conc-table td, .conc-table th { white-space: nowrap; }
.conc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.conc-head > button { width: auto; }
.conc-title { flex: 1 1 280px; }
.conc-title h3 { margin: 0 0 4px; }
.conc-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.conc-acts button { width: auto; }
.conc-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.conc-sum > div { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.conc-sum strong { font-size: 20px; }
.conc-sum .bad strong { color: var(--red); }
.conc-sum .ok strong { color: var(--green); }
.conc-docs { display: flex; flex-direction: column; gap: 8px; }
.conc-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.conc-doc:last-child { border-bottom: 0; }
.conc-doc .hint-text { display: inline; flex: 1 1 200px; }
.conc-doc .gx-danger-link { margin-left: auto; }
.conc-link { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.conc-link select { flex: 1 1 240px; width: auto; }
.conc-link button { width: auto; }
.conc-inc { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.conc-inc:last-child { border-bottom: 0; }
.conc-inc.cerrada { opacity: .7; }
.conc-inc-st { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.conc-cmp-wrap { overflow-x: auto; }
.conc-cmp td { vertical-align: top; }
.conc-cmp .num .hint-text { font-size: 11px; }
.conc-noinv td { background: #f7fbff; }
@media (max-width: 700px) { .conc-sum { grid-template-columns: 1fr; } }
.conc-closed summary { cursor: pointer; padding: 8px 0; color: var(--muted); font-size: 14px; }
/* G-6e · Bandeja de incidencias */
.gi-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.gi-top select { width: auto; }
.gi-grupo { margin-bottom: 12px; }
.gi-grupo > summary { cursor: pointer; padding: 8px 0; font-size: 15px; }
.gi-ver { margin-top: 8px; font-size: 14px; }
/* G-7 · Nóminas */
.gn-nav { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; flex-wrap: wrap; }
.gn-nav button { width: auto; }
.gn-mes { font-size: 18px; min-width: 150px; text-align: center; text-transform: capitalize; }
.gn-table td, .gn-table th { vertical-align: top; }
.gn-acts { white-space: nowrap; }
.gn-form { margin: 8px 0; }
.gn-form .gn-wide { grid-column: 1 / -1; }
.gn-hist { margin-top: 10px; }
.gn-hist table { margin-top: 6px; }
/* G-7c · Nóminas leídas del PDF */
.gn-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.gn-ia button { width: auto; }
.gn-leido .gn-table input, .gn-leido .gn-table select { width: 100%; min-width: 80px; box-sizing: border-box; padding: 6px; font-size: 13px; }
.gn-leido .gn-in { text-align: right; }
.gn-leido .gn-table select { min-width: 150px; }
.gn-ok { color: var(--green); font-weight: 600; }
/* G-8a · Gastos fijos */
.gf-item { border-top: 1px solid var(--border); padding: 12px 0; }
.gf-item.off { opacity: .7; }
.gf-top { display: flex; justify-content: space-between; gap: 12px; }
.gf-amt { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.gf-amt strong { font-size: 17px; }
.gf-occ { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.gf-o { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.gf-o .btn-link { font-size: 12px; }
.gf-form { margin-top: 10px; }
.gf-fam { width: 100%; text-align: left; font-size: 14px; }
/* G-8b · Pagos */
.gp-bad .gx-kpi-num { color: var(--red); }
.gp-overdue td { background: #fff7f6; }
.gp-acc { white-space: nowrap; text-align: right; }
.gp-btn { width: auto; padding: 6px 14px; }
#gxAvisoPagos { margin-bottom: 12px; }
/* G-8c · Pagar a proveedores desde la caja */
.caja-gasto { align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.caja-gasto .field-label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 300px; margin: 0; }
.caja-gasto .ga-switch { flex: 1 1 280px; }
/* G-9 · Inicio y Analíticas */
.gx-chart { width: 100%; max-width: 820px; height: auto; display: block; margin: 0 auto; }
.gx-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.gx-ley i, .gan-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.gini-acc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gini-acc-b { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px; background: #fffaf5; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font: inherit; }
.gini-acc-b:hover { border-color: var(--brand-light); }
.gini-cols, .gan-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.gini-consejo p { margin: 6px 0 0; line-height: 1.5; }
.gx-kpi.gx-luz-verde { border-left: 5px solid var(--green); }
.gx-kpi.gx-luz-ambar { border-left: 5px solid #e0a458; }
.gx-kpi.gx-luz-rojo { border-left: 5px solid var(--red); }
.gx-kpi.gx-luz-gris { border-left: 5px solid #ccc; }
.gx-luz { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: #ccc; vertical-align: middle; }
.gx-luz-verde .gx-luz { background: var(--green); } .gx-luz-ambar .gx-luz { background: #e0a458; } .gx-luz-rojo .gx-luz { background: var(--red); }
.gx-barra-prog { margin: 10px 0; font-size: 14px; }
.gx-barra-prog > div { height: 10px; background: #f0e8e0; border-radius: 6px; overflow: hidden; margin-top: 4px; }
.gx-barra-prog i { display: block; height: 100%; background: #e0a458; border-radius: 6px; }
.gx-barra-prog i.ok { background: var(--green); }
.gan-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.gan-top select { width: auto; }
.gan-donut { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.gx-donut { width: 180px; height: 180px; flex: 0 0 auto; }
.gan-ley { list-style: none; padding: 0; margin: 0; flex: 1 1 200px; font-size: 13px; }
.gan-ley li { display: flex; align-items: center; padding: 3px 0; }
.gan-ley li span { margin-left: auto; color: var(--muted); white-space: nowrap; padding-left: 8px; }
.gan-arbol .gan-n2 td:first-child { padding-left: 28px; }
.gan-arbol .gan-n3 td:first-child { padding-left: 52px; color: var(--muted); }
.gan-tog { display: inline-block; width: 16px; text-align: center; }
.gan-resumen { margin-bottom: 14px; }
/* G-10 · Export para la gestoría */
#docExportBtn { width: auto; }
.exp-modal { max-width: 620px; }
.exp-opts { display: grid; gap: 10px; margin: 12px 0 18px; }
.exp-opt { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fffaf5; text-decoration: none; color: inherit; }
.exp-opt:hover { border-color: var(--brand-light); }
.exp-opt strong { color: var(--brand); }
.exp-h { margin: 8px 0; }
.exp-vat-sel { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.exp-vat-sel select { width: auto; }
.exp-vat-sel a { width: auto; text-decoration: none; display: inline-block; padding: 10px 18px; border-radius: 12px; font-weight: 600; }
.exp-tot td { font-weight: 700; }

/* Preguntas del propio programa (tpvConfirmar / tpvPreguntar), en vez de las del navegador */
.tpv-dlg { display: flex; z-index: 2000; }
.tpv-dlg-box { width: 440px; max-width: calc(100vw - 32px); text-align: left; }
.tpv-dlg-msg { white-space: pre-line; font-size: 16px; line-height: 1.45; color: var(--text, #3b2a20); margin-bottom: 16px; }
.tpv-dlg-box .tpv-dlg-in { width: 100%; box-sizing: border-box; text-align: left; font-size: 16px; letter-spacing: normal; margin: 0 0 16px; }
.tpv-dlg-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.tpv-dlg-btns button { width: auto; min-width: 120px; }

/* --- Marca Oído Mesa --------------------------------------------------- */
.login-logo { margin: 0 0 6px; line-height: 0; }
.login-logo img { width: 240px; max-width: 85%; height: auto; }
.login-slogan { text-align: center; margin: 0 0 22px; font-size: 13px; color: var(--brand); opacity: .7; }
.sidebar h2.sidebar-title { display: flex; align-items: center; gap: 10px; line-height: 1.2; }
.sidebar-title-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.sidebar-brand { padding: 14px 16px 4px; opacity: .55; line-height: 0; }
.sidebar-brand img { width: 110px; max-width: 100%; height: auto; }

/* --- F1-5c · Pago a cuenta y varios pagos ------------------------------ */
.prepay-box { margin: 6px 0 4px; padding: 8px 10px; border: 1px dashed var(--brand, #8a5a12); border-radius: 10px; font-size: 14px; }
.prepay-title { font-weight: 700; margin-bottom: 4px; }
.prepay-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: #555; }
.prepay-undo { font-size: 12px; margin-left: 6px; }
.prepay-left { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e5dccb; font-size: 16px; }
.prepay-left.over { color: #b3261e; }
.btn-prepay { width: 100%; margin-bottom: 8px; }
.pay-modal-box { max-width: 460px; width: calc(100% - 32px); }
.pay-modal-box h3 { margin-top: 0; }
.pay-amount { font-size: 22px; width: 100%; }
.pay-quick, .pay-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pay-method { flex: 1 1 90px; padding: 12px 8px; border: 1px solid #d8ccb4; border-radius: 10px; background: #fff; font-weight: 600; cursor: pointer; }
.pay-method.active { background: var(--brand, #8a5a12); color: #fff; border-color: transparent; }
.mix-rows { display: grid; gap: 8px; margin: 10px 0; }
.mix-row { display: grid; grid-template-columns: 1fr 110px auto auto; gap: 6px; align-items: center; }
.mix-row input { font-size: 18px; }
.mix-sum { margin: 10px 0; font-weight: 700; }
.mix-sum.ok { color: #1b7a3a; }
.mix-sum.bad { color: #b3261e; }
@media (max-width: 480px) { .mix-row { grid-template-columns: 1fr 90px; } }

/* --- Informes en pestañas (F1-8c, F2-8, F2-9, F2-10) -------------------- */
.inf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; border-bottom: 1px solid #e5dccb; }
.inf-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font-weight: 700; color: var(--muted, #7a6f63); cursor: pointer; font-size: 15px; }
.inf-tabs button.active { color: var(--brand, #8a5a12); border-bottom-color: var(--brand, #8a5a12); }
.inf-range { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.inf-range label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.inf-range input[type="date"] { padding: 6px 8px; }
.reg-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reg-filtros select { max-width: 240px; }
.reg-click { cursor: pointer; }
.reg-click:hover { background: #faf5ea; }
.reg-dia { margin: 14px 0 6px; font-weight: 700; text-transform: capitalize; color: var(--muted, #7a6f63); font-size: 13px; }
.reg-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; padding: 10px 12px; border-left: 4px solid #cfc4b0; background: #fffdf8; border-radius: 8px; margin-bottom: 6px; align-items: start; }
.reg-row.reg-bad { border-left-color: #b3261e; }
.reg-row.reg-warn { border-left-color: #d49b1c; }
.reg-row.reg-cash { border-left-color: #1b7a3a; }
.reg-hora { font-variant-numeric: tabular-nums; font-weight: 700; }
.reg-motivo { font-style: italic; color: #5b5148; }
.reg-imp { font-weight: 700; white-space: nowrap; }
.reg-imp.bad { color: #b3261e; }
.reg-imp.ok { color: #1b7a3a; }
@media (max-width: 600px) { .reg-row { grid-template-columns: 44px 1fr; } .reg-imp { grid-column: 2; } }
.cmp-sub { font-size: 12px; color: var(--muted, #7a6f63); margin-top: 4px; }
.cmp-chg { font-weight: 700; margin-left: 4px; }
.cmp-chg.up, .up { color: #1b7a3a; }
.cmp-chg.down, .down { color: #b3261e; }
.cmp-bar-a { fill: var(--brand, #b8541e); }
.cmp-bar-b { fill: #e7dcc7; }
.cmp-lab { font-size: 11px; fill: #7a6f63; }
.cmp-leyenda { font-size: 13px; display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.cmp-leyenda .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.cmp-leyenda .sw.a { background: var(--brand, #b8541e); }
.cmp-leyenda .sw.b { background: #e7dcc7; margin-left: 10px; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .cmp-grid { grid-template-columns: 1fr; } }
.cmp-prod { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f0e8d8; font-size: 14px; }
.cmp-grid h4 { margin: 12px 0 4px; }
table.heat { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
table.heat th { font-weight: 600; color: #7a6f63; padding: 2px 4px; }
table.heat td { min-width: 38px; height: 32px; text-align: center; border-radius: 6px; background: rgba(184, 84, 30, var(--a, 0)); background-color: color-mix(in srgb, var(--brand, #b8541e) calc(var(--a, 0) * 100%), #f6f0e4); }
table.heat td.dark { color: #fff; font-weight: 700; }
table.heat td.heat-tot { background: none; font-weight: 700; text-align: right; padding-left: 8px; }
.cam-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cam-card { margin: 0; }
.cam-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 17px; }
.cam-head span { font-size: 13px; color: #7a6f63; }
.cam-bar { height: 6px; background: #f0e8d8; border-radius: 4px; margin: 8px 0 12px; overflow: hidden; }
.cam-bar span { display: block; height: 100%; background: var(--brand, #b8541e); }
.cam-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.cam-nums small { display: block; color: #7a6f63; font-size: 12px; }
.cam-nums b { font-size: 16px; }
.cam-nums b.bad { color: #b3261e; }
.cam-top { color: #d49b1c; }
.exp-hojas { display: grid; gap: 6px; margin: 14px 0; }
.exp-hojas div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 14px; }
.exp-hojas span { color: #5b5148; }
#expTrim { margin: 8px 0 14px; }
a.exp-btn { display: inline-block; padding: 12px 20px; border-radius: 12px; text-decoration: none; font-weight: 700; color: #fff; background: var(--accent, #b8541e); }

/* --- F2-1 · Comensales ---------------------------------------------------- */
.guests-chip { margin-left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid #d8ccb4; background: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
.guests-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
.guests-n { padding: 16px 0; font-size: 22px; font-weight: 700; border-radius: 12px; border: 1px solid #d8ccb4; background: #fff; cursor: pointer; }
.guests-n.active, .guests-n:hover { background: var(--brand, #8a5a12); color: #fff; border-color: transparent; }
.guests-more { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.guests-more input { width: 80px; }

/* --- F2-6 · Sonido en la pantalla de cocina ------------------------------ */
.kds-sound-btn { display: inline-flex; align-items: center; gap: 6px; }
.kds-sound-btn.off { opacity: .6; text-decoration: line-through; }
.kds-audio-unlock { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; padding: 14px 22px; border-radius: 999px; border: 0; background: #1f1a15; color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.25); cursor: pointer; }

/* --- F2-3 · Alérgenos en venta y tabla ----------------------------------- */
.product-allergens { display: block; font-size: 11px; letter-spacing: 1px; margin-top: 2px; line-height: 1.2; }
a.btn-allergen-table { display: inline-block; margin: -6px 0 14px; padding: 8px 14px; border-radius: 10px; text-decoration: none; font-weight: 700; }

/* --- F2-5 · Cambiar varios productos y ordenar ---------------------------- */
.stock-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.stock-bulk input[type="search"] { flex: 1 1 220px; max-width: 320px; margin: 0; }
.stock-check { display: inline-flex; align-items: center; margin-right: 6px; cursor: pointer; }
.stock-check input { width: 20px; height: 20px; margin: 0; }
#stockTableBody tr.stock-sel { background: #fdf3e2; }
#stockTableBody td:first-child { white-space: nowrap; }
#stockTableBody td:first-child .product-thumb-wrap { display: inline-flex; vertical-align: middle; }
.bulk-modal { max-width: 640px; width: calc(100% - 32px); max-height: 90vh; overflow: auto; }
.bulk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 560px) { .bulk-grid { grid-template-columns: 1fr; } }
.bulk-price { display: flex; gap: 6px; }
.bulk-price select { flex: 1; } .bulk-price input { width: 90px; }
.bulk-alerg { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.bulk-alerg button { border: 1px solid #d8ccb4; background: #fff; border-radius: 999px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.bulk-alerg button.add { background: #1b7a3a; color: #fff; border-color: transparent; }
.bulk-alerg button.add::before { content: '+ '; }
.bulk-alerg button.remove { background: #b3261e; color: #fff; border-color: transparent; text-decoration: line-through; }
.bulk-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* --- F2-4 · Menús a precio cerrado ---------------------------------------- */
.menu-row { padding: 10px 0; border-bottom: 1px solid #f0e8d8; }
.menu-row.off { opacity: .55; }
.menu-slots { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #5b5148; margin-top: 4px; }
.menu-hueco { border: 1px solid #e5dccb; border-radius: 12px; padding: 10px; margin: 10px 0; }
.menu-hueco-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.menu-hueco-head input { flex: 1; font-weight: 700; margin: 0; }
.menu-prods { max-height: 240px; overflow: auto; }
.menu-prods summary { font-weight: 700; cursor: pointer; padding: 4px 0; }
.menu-prod { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 12px; font-size: 14px; }
.menu-prod input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.menu-sup { width: 80px; margin: 0 0 0 auto; padding: 4px 6px; }
.bulk-modal input, .pay-modal-box input, .menu-hueco input { letter-spacing: normal; text-align: left; }

/* --- F2-2 · Pedido desde la mesa (QR) ------------------------------------- */
.oo-card.oo-mesa { border-left: 6px solid #1b7a3a; }
.oo-card.oo-mesa .kds-card-origin { color: #1b7a3a; font-weight: 800; }

/* --- F3-6 · Sin conexión --------------------------------------------------- */
.offline-bar { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3000; max-width: calc(100% - 24px);
  background: #b3261e; color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.2); font-size: 14px; cursor: pointer; text-align: center; }
.offline-bar.ok { background: #1b7a3a; }


/* ==========================================================================
   Botón «Abrir cajón» arriba a la derecha (26-09-2026)
   Solo en el ordenador: en pantallas estrechas (móviles, tablets en vertical)
   no sale, para que nadie abra el cajón sin estar delante.
   ========================================================================== */
.main { position: relative; }
.top-drawer { position: absolute; top: 28px; right: 32px; z-index: 5; width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--brand); background: var(--card); color: var(--brand); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); }
.top-drawer svg { width: 20px; height: 20px; }
.top-drawer:hover { background: var(--brand); color: #fff; }
.top-drawer:disabled { opacity: .6; cursor: progress; }
.top-drawer.ok { background: var(--green); border-color: var(--green); color: #fff; }
@media (max-width: 980px) { .top-drawer { display: none !important; } }

/* ---------------------------------------------------------------------------
   Almacén → Escandallos, Elaboraciones y asistente con IA (26-09-2026)
   --------------------------------------------------------------------------- */
#escFilters .gx-chip { background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
#escFilters .gx-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#escFilters .gx-chip.active .gx-count { background: rgba(255,255,255,.25); }
.esc-fc-ok { color: var(--green); font-weight: 700; }
.esc-fc-mid { color: #a86400; font-weight: 700; }
.esc-fc-bad { color: var(--red); font-weight: 700; }
.esc-est { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #fff6e5; color: #7a5200; border: 1px solid #f0d49a; font-size: 11px; font-weight: 700; line-height: 1.5; cursor: help; }
button.esc-est { cursor: pointer; font-family: inherit; }
.esc-est.bad { background: #fdecea; color: var(--red); border-color: #f0c9c2; }
.esc-ai-card h3 { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.esc-ai-card p { margin: 6px 0 12px; line-height: 1.5; }
.esc-modal-box { width: 860px; max-width: 96vw; max-height: 92vh; overflow-y: auto; text-align: left; padding: 24px; }
.esc-modal-box input, .esc-modal-box select { text-align: left; font-size: 15px; letter-spacing: normal; margin: 0; }
.esc-modal-box h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.esc-modal-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.esc-lines td { vertical-align: middle; padding: 6px; }
.esc-lines select { min-width: 190px; }
.esc-lines input[type="number"] { width: 96px; text-align: right; }
.esc-lines .btn-link .ui-icon { width: 18px; height: 18px; }
.esc-line-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 4px; }
.esc-line-actions .btn-secondary { width: auto; }
.esc-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius-md); }
.esc-totals div { display: flex; flex-direction: column; gap: 2px; }
.esc-totals strong { font-family: var(--font-heading); font-size: 20px; color: var(--brand); }
.esc-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.esc-modal-actions .btn-primary, .esc-modal-actions .btn-secondary { width: auto; padding-left: 20px; padding-right: 20px; }
.esc-elab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.esc-elab { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--text); border: 1px solid var(--border-soft); margin: 0; }
.esc-elab:hover { box-shadow: var(--shadow-card-hover); }
.esc-elab strong { color: var(--brand); }
.esc-elab-form .field-label { flex: 1 1 120px; }
.esc-ai-form { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.esc-ai-form .field-label { font-weight: 700; text-transform: none; letter-spacing: normal; font-size: 15px; color: var(--text); }
.esc-ai-form .field-label input { font-weight: 400; }
.esc-ai-form .hint-text { font-weight: 400; }
.esc-ai-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 10px; text-align: center; }
.esc-spinner { width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: var(--accent); animation: esc-giro 0.9s linear infinite; }
@keyframes esc-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .esc-spinner { animation-duration: 3s; } }
.esc-ai-sum { line-height: 1.7; padding-left: 20px; }
@media (max-width: 640px) {
  .esc-modal-box { padding: 16px; }
  .esc-totals { grid-template-columns: 1fr 1fr; }
  .esc-lines select { min-width: 150px; }
  .esc-lines input[type="number"] { width: 76px; }
}
/* Leyenda del food cost (encima de la tabla de Escandallos) */
.esc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
.esc-legend-title { font-weight: 700; color: var(--text); }
.esc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.esc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.esc-dot-ok { background: var(--green); }
.esc-dot-mid { background: #a86400; }
.esc-dot-bad { background: var(--red); }
.esc-fc-word { font-size: 12px; font-weight: 700; }
.esc-fc-example { line-height: 1.7; padding-left: 20px; }
.esc-fc-scale { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-md); }
.esc-fc-scale div { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------------------
   Extras y complementos, versión compacta (26-09-2026): lista + detalle
   --------------------------------------------------------------------------- */
.ext-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ext-head .page-title { flex: 1 1 auto; }
.ext-new-btn { width: auto; flex: 0 0 auto; padding: 10px 18px; }
#view-extras .view-intro { margin-top: -8px; margin-bottom: 8px; }
.ext-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.ext-grid > .card { margin: 0; }
.ext-list { padding: 8px; position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow-y: auto; }
.ext-search { margin: 0 0 6px; padding: 8px 10px; font-size: 14px; }
.ext-g { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 10px; background: none; border: none; font: inherit; color: var(--text); cursor: pointer; box-shadow: none; }
.ext-g:hover { background: var(--bg); }
.ext-g.on { background: var(--accent-soft); }
.ext-g b { font-size: 14px; font-weight: 700; }
.ext-g small { color: var(--muted); font-size: 12px; }
.ext-warn { color: var(--red) !important; font-weight: 700; }
.ext-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #eee; color: var(--muted); margin-left: 4px; vertical-align: 1px; }
.ext-pill.req { background: #fdecea; color: var(--red); }
.ext-notice { align-items: center; margin-bottom: 8px; padding: 8px 12px; }
.ext-notice span { flex: 1; }
.ext-detail { padding: 14px 16px; }
.ext-back { display: none; }
.ext-dh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ext-dh select { margin: 0; flex: 0 1 230px; padding: 7px 10px; font-size: 14px; }
.ext-name { flex: 1 1 200px; margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--brand); border: 1px solid transparent; background: transparent; padding: 5px 8px; }
.ext-name:hover, .ext-name:focus { border-color: var(--border); background: #fff; }
.ext-dh .mod-max input { width: 90px; padding: 7px 8px; }
.ext-tools { display: flex; gap: 2px; align-items: center; margin-left: auto; }
.ext-danger { color: var(--red); }
.ext-rule { margin: 6px 0 4px; font-size: 12.5px; }
.ext-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ext-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border); font-weight: 700; }
.ext-table td { padding: 2px 6px; border-bottom: 1px solid var(--border-soft); height: 40px; vertical-align: middle; }
.ext-table .num { text-align: right; white-space: nowrap; }
.ext-center { text-align: center; }
.ext-in { margin: 0; padding: 5px 7px; font-size: 14px; border: 1px solid transparent; background: transparent; border-radius: 8px; width: 100%; min-width: 120px; }
.ext-in:hover, .ext-in:focus { border-color: var(--border); background: #fff; }
.ext-in.solid { border-color: var(--border); background: #fff; }
.ext-price { width: 72px; min-width: 0; text-align: right; display: inline-block; }
.ext-plus { color: var(--muted); font-weight: 700; margin-right: 2px; }
.ext-off .ext-in:not(.ext-price) { color: var(--muted); text-decoration: line-through; }
.ext-cost { font-size: 12.5px; color: var(--muted); }
.ext-order { width: 52px; white-space: nowrap; }
.ext-plus-cell { text-align: center; color: var(--muted); font-weight: 700; }
.ext-ico { background: none; border: none; box-shadow: none; padding: 5px; border-radius: 7px; color: var(--muted); cursor: pointer; line-height: 0; }
.ext-ico:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.ext-ico:disabled { opacity: .3; cursor: default; }
.ext-ico .ui-icon { width: 16px; height: 16px; margin: 0; }
.ext-ico.danger:hover { color: var(--red); }
.ext-ing { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--border); background: #fff; color: var(--muted); cursor: pointer; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: none; }
.ext-ing.has { border-style: solid; border-color: #e3c9b1; background: var(--accent-soft); color: var(--text); }
.ext-switch { position: relative; display: inline-block; width: 34px; height: 20px; cursor: pointer; vertical-align: middle; }
.ext-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ext-switch span { position: absolute; inset: 0; border-radius: 999px; background: #ccc; transition: background .15s; pointer-events: none; }
.ext-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.ext-switch input:checked + span { background: var(--green); }
.ext-switch input:checked + span::after { left: 17px; }
.ext-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ext-new td { border-bottom: 0; padding-top: 8px; }
.ext-add { width: auto; padding: 7px 14px; font-size: 14px; }
.ext-products { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 13.5px; }
.ext-prod-btn { margin-left: auto; }
#extMenus > .card { margin-top: 0; }
@media (max-width: 900px) {
  .ext-grid { grid-template-columns: 1fr; }
  .ext-list { position: static; max-height: none; }
  .ext-grid.show-detail .ext-list { display: none; }
  .ext-grid:not(.show-detail) .ext-detail { display: none; }
  .ext-back { display: inline-block; }
  .ext-tools { margin-left: 0; }
}
#menusCard .report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#menusCard .report-head .btn-primary { width: auto; padding: 9px 18px; }

/* ---------------------------------------------------------------------------
   Invitar, imprimir la cuenta y cambiar forma de pago (26-09-2026)
   --------------------------------------------------------------------------- */
.ticket-line-invite { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 3px 7px; border-radius: 999px; border: 1px dashed var(--border); background: #fff; color: var(--muted); cursor: pointer; vertical-align: middle; box-shadow: none; }
.ticket-line-invite:hover { border-color: var(--green); color: var(--green); }
.ticket-line-invite.on { border-style: solid; border-color: var(--green); color: var(--green); background: #eef7ee; }
.ticket-line-invite .ui-icon { width: 14px; height: 14px; margin: 0; }
.ticket-line-invited { display: block; font-size: 12px; font-weight: 700; color: var(--green); margin-top: 2px; }
.ticket-line-invited .ui-icon { width: 13px; height: 13px; vertical-align: -0.15em; }
.ticket-line-old { color: var(--muted); font-weight: 400; font-size: 12px; }
.btn-invite-all { color: var(--green); }
.btn-invite-all .ui-icon { width: 15px; height: 15px; }
.pay-bill-btn { width: 100%; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.invite-box { width: 420px; max-width: 94vw; text-align: left; }
.invite-box h3 { margin-bottom: 4px; }
.invite-qty { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-weight: 700; }
.invite-label { margin: 6px 0; font-weight: 700; font-size: 14px; }
.invite-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.invite-chip { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13.5px; cursor: pointer; box-shadow: none; }
.invite-chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.invite-box .invite-other { text-align: left; font-size: 14px; letter-spacing: normal; width: 100%; margin: 0 0 10px; }
.invite-remove { color: var(--red); margin-right: auto; }
.table-bill-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; background: #1f4470; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.table-bill-badge .ui-icon { width: 12px; height: 12px; }
.table-card.bill, .table-chip.bill { border-color: #1f4470; background: #eef4fb; }
.table-card.bill .table-card-total, .table-chip.bill .table-chip-total { color: #1f4470; }
.sale-line-invited { color: var(--green); font-weight: 700; }
.pay-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; }
.pay-method-opt { border: 2px solid var(--border); background: #fff; color: var(--text); border-radius: 12px; padding: 14px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: none; }
.pay-method-opt:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.reg-invitado { margin: 6px 0 10px; font-size: 14px; color: var(--green); }

/* ==========================================================================
   Venta sin scroll y ventana de cobro (26-09-2026)
   En el ordenador la pantalla de venta ocupa justo la ventana: solo bajan los
   productos (y las líneas del ticket si son muchas). El pie del ticket (total,
   nota, invitar, comandar, imprimir cuenta y «Cobrar») siempre está a la vista.
   «Cobrar» abre la ventana de cobro (js/cobro.js).
   ========================================================================== */
.ticket-quick { display: flex; gap: 8px; }
.ticket-quick > .btn-order-note { flex: 1 1 0; min-width: 0; }
.ticket-actions { display: flex; gap: 8px; align-items: stretch; }
.ticket-actions .btn-comandar { flex: 1.4 1 0; min-width: 0; }
.ticket-bill-btn { flex: 1 1 0; min-width: 0; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-heading); font-weight: 700; }
.btn-charge { display: block; width: 100%; margin-top: 10px; padding: 16px; border: 0; border-radius: var(--radius-md); background: var(--green); color: #fff; font-family: var(--font-heading); font-size: 20px; font-weight: 700; box-shadow: var(--shadow-sm); }
.btn-charge:hover:not(:disabled) { filter: brightness(1.08); }
.btn-charge:disabled { opacity: .5; cursor: default; }
@media (max-width: 980px) { .desk-only { display: none !important; } }

@media (min-width: 981px) {
  /* La columna de la derecha (.main) mide justo la ventana: arriba el usuario
     y la venta ocupa lo que queda. */
  .main:has(> #view-venta.active) { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  .main:has(> #view-venta.active) > .top-user { flex: none; }
  /* El menú de la izquierda, si es más alto que la pantalla, baja él solo. */
  .app-shell:has(#view-venta.active) { height: 100vh; min-height: 0; overflow: hidden; }
  .app-shell:has(#view-venta.active) > .sidebar { height: 100vh; box-sizing: border-box; }
  #view-venta.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #view-venta > .page-title { flex: none; margin-bottom: 12px; }
  #view-venta > #waiterGate { flex: none; }
  #ventaContent { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #ventaContent > .waiter-bar, #ventaContent > .table-bar { flex: none; }
  #view-venta .grid-2 { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); gap: 16px; }
  #view-venta .grid-2 > .card { margin-bottom: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  #view-venta .grid-2 > .card:last-child { position: static; }
  #view-venta .grid-2 > .card:first-child { padding: 16px 18px; }
  #view-venta .product-search, #view-venta #categoryTabs { flex: none; }
  #view-venta #productGrid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding: 6px 6px 14px; margin: -6px -6px 0; overscroll-behavior: contain; }

  #ticketCard { padding: 14px 18px 16px; }
  #ticketCard .ticket-sheet-head h3 { margin-bottom: 4px; }
  #ticketCard #ticketLines { flex: 1 1 auto; min-height: 70px; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; }
  #ticketCard .ticket-foot { flex: none; }
  #ticketCard .pay-fields, #ticketCard .pay-detail { display: none; }
  #ticketCard.dto-open #discountBar { display: flex; margin: 8px 0 0; }
  #ticketCard .ticket-total { margin-top: 6px; padding-top: 10px; }
  #ticketCard .ticket-total span:last-child { font-size: 28px; }
  #ticketCard .ticket-quick .btn-order-note { margin-top: 8px; padding: 8px 8px; font-size: 13px; }
  #ticketCard .btn-move-table { margin-top: 8px; }
  #ticketCard .ticket-actions .btn-comandar { margin-top: 8px; padding: 12px 14px; font-size: 16px; }
  #ticketCard .ticket-bill-btn { margin-top: 8px; padding: 10px 8px; font-size: 14px; }
  #ticketCard .prepay-box { margin-top: 8px; }
}
@media (min-width: 981px) and (max-height: 760px) {
  #ticketCard .ticket-total span:last-child { font-size: 24px; }
  .btn-charge { padding: 13px; font-size: 18px; }
}

/* --- Ventana de cobro --- */
body.cobro-locked { overflow: hidden; }
.cobro-overlay { padding: 20px; box-sizing: border-box; }
.cobro-box { width: min(1160px, 100%); height: min(740px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); display: flex; overflow: hidden; }
.cobro-box button { width: auto; cursor: pointer; font-family: var(--font-heading); }
.cobro-box button .ui-icon { width: 18px; height: 18px; margin: 0; flex: none; }
.cobro-muted { color: var(--muted); }
.cobro-ok { color: var(--green); }
.cobro-inv { color: var(--green); font-weight: 700; }
.cobro-inv .ui-icon { width: 13px; height: 13px; vertical-align: -2px; }

.cobro-left { width: 380px; flex: none; background: #fffaf6; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; min-height: 0; }
.cobro-head { padding: 18px 20px 6px; }
.cobro-head h3 { margin: 0; color: var(--brand); font-size: 19px; }
.cobro-sub { color: var(--muted); font-size: 13.5px; }
.cobro-list-head { display: flex; justify-content: space-between; padding: 6px 20px 2px; color: var(--muted); font-weight: 700; font-size: 13px; }
.cobro-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px; }
.cobro-line { display: flex; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--border-soft); font-size: 14.5px; }
.cobro-qty { width: 28px; flex: none; font-weight: 700; }
.cobro-name { flex: 1; min-width: 0; }
.cobro-name small { display: block; color: var(--muted); font-size: 12px; }
.cobro-name small.cobro-inv { color: var(--green); }
.cobro-sum { padding: 10px 20px; border-top: 1px solid var(--border); }
.cobro-sum-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 13.5px; }
.cobro-sum-row.muted { color: var(--muted); }
.cobro-sum-row.paid { color: var(--green); }
.cobro-sum-row .ui-icon { width: 14px; height: 14px; vertical-align: -2px; }
.cobro-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.cobro-total span { font-family: var(--font-heading); font-weight: 700; color: var(--muted); }
.cobro-total strong { font-family: var(--font-heading); font-size: 30px; color: var(--accent); }
.cobro-left-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 20px 16px; }
.cobro-left-btns button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; font-size: 14px; font-weight: 700; border: 1px solid var(--border); background: #fff; border-radius: 10px; }
.cobro-left-btns button:hover { background: #fdfaf7; border-color: var(--brand-light); }
.cobro-left-btns button.on { border: 2px solid var(--brand); }
.cobro-left-btns .cobro-btn-inv { color: var(--green); border-color: #b9dcb9; }
.cobro-dtos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 16px; }
.cobro-dtos .discount-btn { padding: 7px 12px; font-size: 13px; }

.cobro-right { flex: 1; min-width: 0; padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.cobro-top { display: flex; align-items: center; gap: 10px; }
.cobro-tabs { flex: 1; display: flex; gap: 4px; background: #f3ebe3; border-radius: 12px; padding: 4px; }
.cobro-tabs button { flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--muted); }
.cobro-tabs button.on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cobro-tabs button:not(.on):hover { color: var(--brand); }
.cobro-top > span { flex: 1; }
.cobro-cajon { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 14px; font-weight: 700; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.cobro-box .cobro-x { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: #f3ebe3; color: var(--text); }
.cobro-box .cobro-x:hover { background: var(--border); }

.cobro-amount { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cobro-label { font-weight: 700; color: var(--muted); font-size: 12px; letter-spacing: .05em; }
.cobro-amount strong { font-family: var(--font-heading); font-size: 46px; line-height: 1.05; color: var(--text); }
.cobro-amount strong.accent { color: var(--accent); }
.cobro-bar { height: 10px; border-radius: 999px; background: #f3ebe3; overflow: hidden; }
.cobro-bar i { display: block; height: 100%; background: var(--green); }

.cobro-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cobro-methods button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border: 2px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); font-size: 15px; font-weight: 700; }
.cobro-methods button .ui-icon { width: 22px; height: 22px; }
.cobro-methods button:hover { border-color: var(--brand-light); }
.cobro-methods button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.cobro-body { display: flex; gap: 18px; min-height: 0; }
.cobro-body.single { flex-direction: column; gap: 14px; }
.cobro-col-keys { width: 290px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.cobro-col-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cobro-display { display: flex; justify-content: space-between; align-items: baseline; border: 2px solid var(--accent); border-radius: 12px; padding: 7px 14px; }
.cobro-display b { color: var(--muted); }
.cobro-display strong { font-family: var(--font-heading); font-size: 26px; }
.cobro-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cobro-keys button { padding: 11px 0; border: 0; border-radius: 10px; background: #f7f3ef; color: var(--text); font-size: 19px; font-weight: 700; }
.cobro-keys button:hover { background: var(--accent-soft); }
.cobro-bills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cobro-bills button { padding: 12px 4px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); font-size: 15px; font-weight: 700; }
.cobro-bills button:hover { border-color: var(--brand-light); }
.cobro-bills button.on { background: var(--accent-soft); border: 2px solid var(--accent); }
.cobro-change { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #eef7ee; color: var(--green); }
.cobro-change b { font-size: 16px; }
.cobro-change strong { font-family: var(--font-heading); font-size: 34px; }
.cobro-change.idle { background: #f7f3ef; color: var(--muted); }
.cobro-change.bad { background: #fdecea; color: var(--red); }
.cobro-tip, .cobro-subs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cobro-tip b { margin-right: 4px; }
.cobro-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 14px; font-weight: 600; }
.cobro-chip:hover { border-color: var(--brand-light); }
.cobro-chip.on { border: 2px solid var(--accent); padding: 6px 12px; font-weight: 700; }
.cobro-pagos { display: flex; flex-direction: column; gap: 6px; }
.cobro-pago { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; }
.cobro-pago > span { display: inline-flex; align-items: center; gap: 8px; }
.cobro-pago.done { background: #eef7ee; }
.cobro-pago.done .ui-icon { color: var(--green); vertical-align: -3px; }
.cobro-pago.next { border: 2px dashed var(--accent); }
.cobro-info { padding: 14px 16px; border-radius: 12px; background: #f7f3ef; font-size: 15px; }
.cobro-info.big { font-size: 18px; padding: 24px 22px; }
.cobro-info .ui-icon { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }

.cobro-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.cobro-foot input { width: auto; flex: 1 1 150px; margin: 0; padding: 8px 10px; font-size: 14px; }
.cobro-switch { display: inline-flex; background: #f3ebe3; border-radius: 999px; padding: 3px; }
.cobro-switch button { border: 0; background: none; padding: 5px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); }
.cobro-switch button.on { background: var(--brand); color: #fff; }
.cobro-foot .btn-link { padding: 4px 2px; font-family: var(--font-body); }
.cobro-go { width: 100% !important; border: 0; border-radius: 14px; padding: 17px; background: var(--green); color: #fff; font-size: 20px; font-weight: 700; box-shadow: var(--shadow-sm); }
.cobro-go:hover:not(:disabled) { filter: brightness(1.08); }
.cobro-go:disabled { opacity: .5; cursor: not-allowed; }
.cobro-go.alt { background: var(--brand); }
@media (max-height: 760px) {
  .cobro-amount strong { font-size: 38px; }
  .cobro-keys button { padding: 8px 0; }
  .cobro-bills button { padding: 9px 4px; }
  .cobro-go { padding: 14px; }
}

/* Ajustes → Contraseña de acceso al TPV (27-09-2026) */
.access-warn { background: #fdecea; color: var(--red); border-left: 3px solid var(--red); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; font-size: 14px; }

/* Ajustes → Estado del servidor (27-09-2026) */
.sh-card { max-width: 860px; }
.sh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sh-head h3 { margin-bottom: 2px; }
.sh-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; background: #f1efe9; color: var(--text); }
.sh-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sh-c, #999); }
.sh-bien { --sh-c: #0ca30c; } .sh-justo { --sh-c: #fab219; } .sh-mal { --sh-c: #d03b3b; } .sh-sin_datos { --sh-c: #b9b4ac; }
.sh-veredicto { margin: 10px 0 14px; color: var(--text); }
.sh-problemas { background: #fdecea; border-left: 3px solid #d03b3b; border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; font-size: 14px; color: var(--text); }
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sh-tile { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff; }
.sh-tile .sh-lbl { font-size: 13px; color: var(--muted); }
.sh-tile .sh-val { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2; margin: 2px 0; font-variant-numeric: tabular-nums; }
.sh-tile .sh-det { font-size: 12.5px; color: var(--muted); }
.sh-tile .sh-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text); margin-top: 4px; }
.sh-tile .sh-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sh-c, #999); }
.sh-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; color: var(--text); }
.sh-legend { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sh-key { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--c); margin-left: 8px; }
.sh-key-dash { background: repeating-linear-gradient(90deg, #b9b4ac 0 4px, transparent 4px 7px); }
.sh-chart { position: relative; width: 100%; height: 220px; }
.sh-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sh-chart .sh-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 14px; border: 1px dashed var(--border); border-radius: 10px; }
.sh-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; color: var(--text); white-space: nowrap; transform: translate(-50%, -110%); z-index: 2; }
.sh-tip b { font-weight: 700; }
.sh-tip .sh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.sh-table { margin: 8px 0 16px; font-size: 13px; }
.sh-table summary { cursor: pointer; color: var(--muted); }
.sh-table table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.sh-table th, .sh-table td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.sh-table th:first-child, .sh-table td:first-child { text-align: left; }
.sh-sub { margin: 18px 0 6px; font-family: var(--font-heading); }
.sh-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sh-avisos { margin-top: 14px; font-size: 13px; }
.sh-avisos .sh-av { padding: 6px 0; border-top: 1px solid var(--border-soft); color: var(--text); }
.sh-avisos .sh-av small { color: var(--muted); display: block; }
.sh-buttons button { width: auto; flex: 0 0 auto; }

/* Ajustes → Sincronización (27-09-2026) */
.sy-card { max-width: 860px; }
.sy-box { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.sy-box h4 { margin: 0 0 6px; font-family: var(--font-heading); }
.sy-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.sy-row:first-of-type { border-top: 0; }
.sy-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: #f7f3ef; border: 1px dashed var(--border); border-radius: 8px; padding: 10px; word-break: break-all; margin: 8px 0; }
.sy-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.sy-actions button { width: auto; flex: 0 0 auto; }
.sy-warn { background: #fff6e0; border-left: 3px solid #fab219; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; margin: 10px 0; color: var(--text); }
.sy-row .sh-state { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); }
.sy-row .sh-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sh-c, #999); }

/* Pantallas de ordenador (también las cuadradas 4:3 de la churrería):
   la cabecera de la venta ocupa una sola franja para que los productos
   queden más arriba.
   - Con mesa abierta, el título («Nueva venta») va dentro de la barra de la
     mesa, en la misma línea, y el título grande de arriba se esconde.
   - «Vendiendo como» no se enseña: ya sale arriba (nombre + Cambiar).
   - A la izquierda «Nueva venta · Mesa · personas», una raya, y a la derecha
     los botones, que se reparten todo el hueco (sin espacios en blanco).
     Si la pantalla es estrecha, los botones dicen lo justo («Dividir»,
     «Cancelar», «Cambiar mesa», «Juntar», «Mapa»). */
.table-bar-title { display: none; }
.table-bar-info { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 981px) {
  #view-venta:has(#tableBar:not([hidden])) > .page-title { display: none; }
  .app-shell:has(#topUser:not([hidden])) #ventaContent > .waiter-bar { display: none; }
  #tableBar { flex-wrap: nowrap; gap: 0; padding: 6px 8px 6px 14px; margin-bottom: 12px; }
  #tableBar .table-bar-title { display: inline; font-family: var(--font-heading); font-size: 17px; color: var(--brand); margin-right: 4px; }
  #tableBar .table-bar-info { flex: none; white-space: nowrap; padding-right: 12px; }
  #tableBar .guests-chip { margin-left: 2px; }
  #tableBar .table-bar-actions { flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; margin-left: 0; padding-left: 12px; border-left: 1px solid var(--border-soft); }
  #tableBar .table-bar-actions .btn-secondary { flex: 1 1 auto; padding: 8px 10px; font-size: 13.5px; white-space: nowrap; }
}
.tb-corto { display: none; }
/* Si no cabe todo en una línea (lo mide js/mesas.js), primero los botones
   dicen lo justo; si aún no cabe, los botones pasan debajo, tras una raya. */
@media (min-width: 981px) {
  #tableBar.tb-compacta .tb-largo { display: none; }
  #tableBar.tb-compacta .tb-corto { display: inline; }
  #tableBar.tb-compacta { padding-left: 10px; }
  #tableBar.tb-compacta .table-bar-title { font-size: 16px; }
  #tableBar.tb-compacta .table-bar-info { gap: 4px; padding-right: 8px; }
  #tableBar.tb-compacta .table-bar-actions { gap: 4px; padding-left: 8px; }
  #tableBar.tb-compacta .table-bar-actions .btn-secondary { padding: 8px 7px; font-size: 13px; }
  #tableBar.tb-apilada { flex-wrap: wrap; }
  #tableBar.tb-apilada .table-bar-actions { flex-basis: 100%; border-left: 0; padding-left: 0; border-top: 1px solid var(--border-soft); padding-top: 6px; margin-top: 6px; }
}

/* ==========================================================================
   Pantallas cuadradas (4:3, 5:4...) como las del ordenador de la churrería.
   Se nota por la forma de la ventana: si no es panorámica, se gana ancho
   para los productos:
   - El menú de la izquierda se queda en una tira estrecha solo con los
     iconos (al pasar el ratón sale el nombre).
   - Márgenes y la franja de arriba (persona, Cambiar, Fichar, Abrir cajón)
     más apretados.
   ========================================================================== */
@media (min-width: 981px) and (max-aspect-ratio: 3/2) {
  .sidebar { width: 64px; flex: 0 0 64px; padding: 12px 0; }
  .sidebar h2.sidebar-title { justify-content: center; padding: 0; margin: 0 0 12px; }
  .sidebar h2.sidebar-title > span { display: none; }
  .sidebar button.nav-btn, .sidebar a.nav-btn { position: relative; justify-content: center; gap: 0; padding: 11px 0; margin: 2px 8px; width: calc(100% - 16px); }
  .sidebar button.nav-btn.active { padding-left: 0; border-left-width: 3px; }
  .sidebar .nav-btn > span:not(.nav-icon):not(.nav-badge) { display: none; }
  .sidebar .nav-icon { width: 22px; height: 22px; }
  .sidebar .nav-badge { position: absolute; top: 3px; right: 3px; margin: 0; min-width: 17px; height: 17px; font-size: 10.5px; padding: 0 4px; }
  .sidebar .logout-btn { margin: 12px 6px 0; padding: 10px 0; font-size: 13px; }
  .sidebar-brand { display: none; }

  .main { padding: 12px 16px; }
  .top-user { margin-bottom: 10px; gap: 6px; }
  .top-user-who { padding: 3px 10px 3px 3px; gap: 8px; }
  .top-user-avatar { width: 30px; height: 30px; font-size: 12.5px; }
  .top-user-name { font-size: 14.5px; }
  .top-user-state { font-size: 11px; }
  .top-user-btn { padding: 6px 12px; font-size: 13px; }
  .top-user-btn svg { width: 16px; height: 16px; }
  .top-drawer { top: 12px; right: 16px; padding: 7px 14px; font-size: 13.5px; }
  .top-drawer svg { width: 17px; height: 17px; }

  #view-venta .grid-2 { gap: 12px; grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr); }
  #view-venta .grid-2 > .card:first-child { padding: 12px 12px; }
  #view-venta .product-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
}