/* ===== css/fuentes.css ===== */
/* Fuentes del TPV servidas desde el propio TPV (21-10-2026, B13).
   Antes venían de fonts.googleapis.com: sin internet cambiaba el aspecto y cada
   apertura llamaba a Google (en la carta pública, además, un tema de privacidad).
   Ahora el TPV se ve igual sin internet. Licencia SIL Open Font License (libres).
   font-display: swap → si tardan, se ve el texto con la del sistema y luego cambia. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Poppins-800.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Jost-600.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Jost-700.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Jost-800.woff2') format('woff2'); }
/* Nunito Sans: un solo archivo con todos los gruesos (fuente variable) */
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/NunitoSans.woff2') format('woff2'); }

/* ===== css/style.css ===== */
: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: 9500; /* por encima del panel de Elena (9000) y de las ventanas (21-10-2026, M3) */
  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); }
/* Estilo del PIN (centrado, grande y con las cifras separadas) SOLO para los
   PIN: antes valía para cualquier caja de texto de una ventana y el motivo de
   anular o el nombre de una categoría salían centrados y con letras separadas
   (21-10-2026, M4). Un PIN es type=password, o numérico de 4 cifras. */
.modal-box input[type="password"],
.modal-box input[inputmode="numeric"][maxlength="4"],
.modal-box input.pin-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; }
/* Una comanda que ya se está preparando se distingue por el fondo. */
.kds-card.preparando { background: #fffaf3; }
.kds-card.preparando.t-late { background: #fdecea; }
/* Rendimiento (26-10-2026, auditoría C-8): los avisos que «laten» ya no
   animan box-shadow (el navegador repintaba la tarjeta en cada fotograma: el
   90 % del trabajo de la tablet de cocina en reposo). Ahora la sombra va ya
   pintada en un ::after y solo se anima su opacity, que la mueve la tarjeta
   gráfica sin repintar. Con «reducir movimiento» en el aparato, la sombra
   queda fija. */
.kds-card.t-late, .kds-card.kds-cancel-mark, .kds-card.kds-cancel, .kds-history-pending,
.cqr-pedido, .zone-qr-mark, .cqr-resumen.urge, .table-qr-badge { position: relative; }
.kds-card.t-late::after, .kds-card.kds-cancel-mark::after, .kds-card.kds-cancel::after, .kds-history-pending::after,
.cqr-pedido::after, .zone-qr-mark::after, .cqr-resumen.urge::after, .table-qr-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: om-latido 1.6s ease-in-out infinite;
}
/* Comanda que va tarde: el anillo por dentro (con el tema nuevo la tarjeta recorta lo de fuera) */
.kds-card.t-late::after { box-shadow: inset 0 0 0 5px rgba(198, 40, 40, 0.3); }
/* Anulaciones: el anillo rojo por fuera, como antes */
.kds-card.kds-cancel-mark::after, .kds-card.kds-cancel::after { inset: -3px; box-shadow: 0 0 0 9px rgba(198, 40, 40, 0.42); animation-duration: 1.4s; }
.kds-history-pending::after { box-shadow: 0 0 0 7px rgba(198, 40, 40, 0.42); animation-duration: 1.4s; }
/* Avisos de la carta QR en el TPV */
.cqr-pedido::after, .zone-qr-mark::after, .cqr-resumen.urge::after { box-shadow: 0 0 0 6px rgba(181, 80, 46, .18); }
.table-qr-badge::after { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
@keyframes om-latido { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kds-card.t-late::after, .kds-card.kds-cancel-mark::after, .kds-card.kds-cancel::after, .kds-history-pending::after,
  .cqr-pedido::after, .zone-qr-mark::after, .cqr-resumen.urge::after, .table-qr-badge::after { animation: none; opacity: 1; }
  .cqr-av { animation: none; }
}

.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); }
/* Botones de la tarjeta del pedido siempre DENTRO del recuadro (04-10-2026:
   en la pantalla cuadrada de la churrería la ✕ se salía por el borde). El
   botón grande va arriba, a lo ancho, y los pequeños juntos debajo. */
.oo-card { min-width: 0; }
.oo-card .kds-card-actions { flex-wrap: wrap; }
.oo-card .kds-card-actions .kds-action-btn { flex: 1 1 100%; min-width: 0; padding: 14px 10px; }
.oo-card .kds-card-actions .kds-back-btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 50px; }

/* 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; }
.gp-row { display: flex; align-items: center; gap: 6px; }
.gp-row .gp-item { flex: 1; min-width: 0; }
.gp-half { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.gp-half.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.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;
}
.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;
}

.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; }
/* «Nota» y el regalo van en su propio hueco, entre el nombre y − 1 + (21-10-2026):
   en el ticket estrecho de la tablet y en el móvil se ponen debajo del nombre, en la
   misma fila que − 1 +, y la línea ocupa una fila menos. */
.ticket-line-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 45%; }
.ticket-line-tools .ticket-line-note { margin-top: 0; max-width: 100%; }
.ticket-line-tools .ticket-line-invite { margin-left: 0; }
@media (max-width: 980px) {
  #ticketCard .ticket-line-tools { max-width: none; flex: 0 1 auto; }
}

/* 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;
}
.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; color: #fff; }
/* 03-10-2026 (P-2): el nombre del negocio se leía marrón sobre marrón */
.sidebar h2.sidebar-title > span { color: #fff; overflow-wrap: anywhere; }
.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; }
.access-todos { border-top: 1px solid var(--border-soft); margin-top: 18px; padding-top: 14px; }
.access-todos h4 { margin: 0 0 6px; font-family: var(--font-heading); }
.access-todos button { width: auto; }
.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-pasos { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; }
.sy-pasos li { margin: 3px 0; }
.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; }
}

/* ===========================================================================
   Almacén nuevo (27-09-2026): «He tirado algo», Tirar y contar, Conteos,
   Tirado, Zonas y cajas, stock propio de elaboraciones.
   =========================================================================== */
.top-actions { position: absolute; top: 28px; right: 32px; z-index: 5; display: flex; gap: 10px; align-items: center; }
.top-actions .top-drawer { position: static; }
.top-waste { border-color: var(--accent); color: var(--accent); }
.top-waste:hover { background: var(--accent); color: #fff; }
@media (max-width: 980px) { .top-actions { display: none !important; } }

/* Tirar y contar (móvil primero) */
.ar-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ar-big { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.ar-big svg { width: 30px; height: 30px; flex: none; color: var(--accent); }
.ar-big span { display: flex; flex-direction: column; gap: 2px; }
.ar-big strong { font-size: 16px; color: var(--brand); }
.ar-big small { font: 400 12.5px var(--font-body); color: var(--muted); }
.ar-big:hover { border-color: var(--accent); }
.ar-offline { background: #fff4e5; border: 1px solid #f1d9b5; color: #7a4a00; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.ar-card { padding: 14px 16px; }
.ar-card h3 { margin: 0 0 8px; font-size: 16px; }
.ar-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.ar-row:last-child { border-bottom: 0; }
.ar-row small { display: block; color: var(--muted); font-size: 12px; }
.ar-row-end { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ar-deshecho, .alm-deshecho td { text-decoration: line-through; opacity: .55; }
.ar-zona { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 7px; font: 600 15px var(--font-body); }
.ar-zona small { color: var(--muted); font-weight: 600; }
.ar-zona.ok { border-color: var(--green); }
.ar-zona.ok small { color: var(--green); }
.ar-ok { width: 100%; margin-top: 10px; }
.ar-zona-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ar-zona-head h3 { margin: 0; }
.ar-buscar { padding: 9px 12px; margin-bottom: 8px; font-size: 15px; }
.ar-linea { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.ar-linea:last-child { border-bottom: 0; }
.ar-linea-nom { min-width: 0; flex: 1 1 auto; }
.ar-linea-nom strong { display: block; font-size: 14.5px; }
.ar-linea-nom small { color: var(--muted); font-size: 12px; }
.ar-linea-in { display: flex; align-items: center; gap: 4px; flex: none; }
.ar-linea-in label { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.ar-linea-in input { width: 64px; padding: 7px 6px; margin: 0; text-align: right; font-size: 16px; letter-spacing: normal; }
.ar-linea.ok .ar-linea-in input { border-color: var(--green); color: var(--green); font-weight: 700; }
.ar-mas { color: var(--muted); }
.ar-borrar { background: none; color: var(--muted); padding: 4px 6px; font-size: 13px; }
/* Hojas (He tirado algo, tanda) */
.ar-hoja { width: 460px; max-width: calc(100vw - 24px); max-height: 92vh; overflow-y: auto; text-align: left; padding: 18px 20px; }
.ar-hoja input { text-align: left; font-size: 16px; letter-spacing: normal; }
.ar-hoja-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ar-hoja-head h3 { margin: 0; }
.ar-x { background: none; color: var(--muted); padding: 4px 8px; font-size: 18px; }
.ar-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 10px 0 5px; font-weight: 700; }
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-chip { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; font: 600 13.5px var(--font-body); }
.ar-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ar-res { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.ar-res-item { display: flex; justify-content: space-between; gap: 10px; background: #fff; color: var(--text); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; text-align: left; font: 600 14.5px var(--font-body); }
.ar-res-item small { color: var(--muted); font-weight: 400; white-space: nowrap; }
.ar-sel { display: flex; justify-content: space-between; align-items: center; width: 100%; background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; font: 700 15px var(--font-body); text-align: left; }
.ar-sel small { color: var(--muted); font-weight: 400; }
.ar-qty { display: flex; align-items: center; gap: 6px; }
.ar-qty > button { width: 44px; height: 44px; padding: 0; background: #fff; color: var(--brand); border: 1px solid var(--border); font-size: 22px; }
.ar-qty input { width: 110px; margin: 0; padding: 10px; text-align: center; font-size: 18px; font-weight: 700; }
.ar-u { color: var(--muted); font-weight: 600; }
.ar-seg, .alm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ar-seg button, .alm-seg button { background: #fff; color: var(--text); padding: 7px 11px; border-radius: 0; font: 600 13px var(--font-body); }
.ar-seg button.on, .alm-seg button.on { background: var(--accent); color: #fff; }
.alm-seg button { padding: 4px 9px; font-size: 12px; }
.ar-aviso { background: #fff4e5; border-radius: 8px; padding: 6px 10px; }

/* Almacén → Conteos / Tirado / Zonas */
.gx-kpi > span:first-child { color: var(--muted); font-size: 13px; }
.gx-kpi > strong { font-family: var(--font-heading); font-size: 22px; color: var(--brand); }
.gx-kpi > strong.gx-warn { color: var(--red); }
.gx-kpi > strong.gx-okmark { color: var(--green); }
.alm-rev .gx-kpis { margin-bottom: 12px; }
.alm-rev .gx-toolbar select, .alm-zonas-grid select, .alm-zonas-grid input { margin: 0; padding: 7px 10px; font-size: 14px; }
.alm-rev-tabla td { vertical-align: middle; }
.alm-nota { background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; }
.alm-sin summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
.alm-rev-btns { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.alm-zonas-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .alm-zonas-grid { grid-template-columns: 1fr; } }
.alm-zona-fila { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.alm-zona-fila input { flex: 1 1 auto; }
.alm-art input[data-f="pack_name"] { width: 90px; }
.alm-art input[data-f="pack_qty"] { width: 90px; text-align: right; }
.alm-art select { min-width: 130px; }
.alm-art td { padding-top: 4px; padding-bottom: 4px; }

/* Elaboraciones: tarjeta con stock propio */
.esc-elab { cursor: default; padding: 0; overflow: hidden; gap: 0; }
.esc-elab-open { display: flex; flex-direction: column; gap: 6px; text-align: left; background: none; color: var(--text); font: inherit; padding: 16px 18px 10px; border-radius: 0; width: 100%; }
.esc-elab-open:hover { background: var(--bg); }
.esc-elab-stock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 18px 12px; border-top: 1px solid var(--border-soft); font-size: 13.5px; }
.esc-elab-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.esc-elab-sw .tpv-switch { transform: scale(.85); }
.esc-elab-hay { font-weight: 700; color: var(--brand); }
.esc-elab-tanda { width: auto; padding: 5px 12px; font-size: 13px; margin-left: auto; }
.alm-art td { vertical-align: middle; }
@media (min-width: 981px) and (max-aspect-ratio: 3/2) { .top-actions { top: 12px; right: 16px; gap: 8px; } }
.kds-item-moved { display: inline-block; margin: 2px 0 4px; padding: 2px 8px; border-radius: 6px; background: #1565c0; color: #fff; font-weight: 700; font-size: 14px; }

/* Mover productos sueltos a otra mesa (C-3) */
.mi-box { width: 460px; }
.mi-list { max-height: 55vh; overflow-y: auto; margin: 4px 0; }
.mi-line { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--border-soft); border-radius: 8px; }
.mi-line.on { background: var(--accent-soft); }
.mi-name { flex: 1; min-width: 0; }
.mi-name b { display: block; font-size: 14.5px; }
.mi-name small { color: var(--muted); font-size: 12px; }
.mi-step { display: flex; align-items: center; gap: 4px; }
.mi-step button { width: 36px; height: 36px; padding: 0; border-radius: 9px; background: #fff; border: 1px solid var(--border); color: var(--brand); font-size: 20px; line-height: 1; }
.mi-q { min-width: 34px; text-align: center; font-weight: 800; font-size: 16px; color: var(--accent); }
.mi-q.z { color: var(--muted); font-weight: 600; }
.mi-todo { background: none; color: var(--accent); padding: 6px 6px; font-size: 13px; font-weight: 700; }
.mi-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mi-btns { display: flex; gap: 8px; }
.mi-btns button { width: auto; padding: 10px 16px; }

/* Agotados y «quedan N» (C-5) */
.product-btn.sold-out { opacity: .55; background: #f1ece7; }
.product-soldout-tag { position: absolute; left: 8px; right: 8px; top: 38%; background: var(--red); color: #fff; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 0; opacity: 1; }
.product-left { position: absolute; top: -7px; left: -6px; background: #e8a317; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 2px 7px; }
.so-box { width: 380px; }
.so-opt { display: block; width: 100%; text-align: left; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; margin-top: 8px; font: inherit; }
.so-opt b { display: block; font-size: 14.5px; }
.so-opt small { color: var(--muted); font-weight: 400; }
.so-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.so-qty { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; }
.so-qty button { width: 40px; height: 40px; padding: 0; border-radius: 10px; background: #fff; border: 1px solid var(--border); color: var(--brand); font-size: 20px; }
.so-qty input { width: 70px; margin: 0; padding: 8px; text-align: center; font-size: 18px; font-weight: 800; letter-spacing: normal; }

/* ==========================================================================
   Menú por bloques (punto 17, 27-09-2026)
   Día a día (fijo) · Gestión y Configuración (se pliegan; se recuerda en
   cada equipo). En el móvil los títulos solo salen con «Más opciones»; en
   las pantallas cuadradas (solo iconos) son una raya fina y no se pliegan.
   ========================================================================== */
.sidebar button.nav-btn, .sidebar a.nav-btn { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
.sidebar .nav-group {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 20px); margin: 14px 10px 2px; padding: 4px 14px;
  background: none; border: 0; border-radius: var(--radius-md);
  color: #f3e9e0; opacity: .62; cursor: pointer;
  font: 700 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-align: left;
}
.sidebar .nav-group:hover { opacity: .9; background: rgba(255, 255, 255, 0.06); }
.sidebar .nav-group.nav-group-fijo { cursor: default; margin-top: 0; }
.sidebar .nav-group.nav-group-fijo:hover { opacity: .62; background: none; }
.sidebar .nav-group[hidden] { display: none; }
.sidebar .nav-group-arrow { font-size: 12px; transition: transform .15s ease; }
.sidebar .nav-group.cerrado .nav-group-arrow { transform: rotate(-90deg); }
.sidebar .nav-grp-items.cerrado { display: none; }
@media (max-width: 720px) {
  .sidebar:not(.show-all) .nav-group { display: none; }
}
@media (min-width: 981px) and (max-aspect-ratio: 3/2), (min-width: 721px) and (max-width: 980px) {
  .sidebar .nav-group, .sidebar .nav-group.nav-group-fijo {
    height: 1px; min-height: 0; padding: 0; margin: 8px 14px; font-size: 0;
    background: rgba(255, 255, 255, 0.22); pointer-events: none; opacity: 1;
  }
  .sidebar .nav-group.nav-group-fijo { display: none; }
  .sidebar .nav-grp-items.cerrado { display: block; }
  .sidebar .nav-group-arrow, .sidebar .nav-group-name { display: none; }
}

/* Portada «Inicio» */
.ini-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ini-top .page-title { margin-bottom: 0; }
.ini-sub { color: var(--muted); font-size: 13.5px; }
.ini-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ini-kpi { background: #fff; border: 1px solid var(--border, #e4dcd4); border-radius: 14px; padding: 11px 14px; cursor: pointer; }
.ini-kpi:hover { border-color: var(--accent); }
.ini-kpi .l { font-size: 12.5px; color: var(--muted); }
.ini-kpi b { display: block; font-size: 22px; margin: 2px 0; font-family: var(--font-heading); }
.ini-kpi .s { font-size: 12px; color: var(--muted); }
.ini-kpi .s.up { color: #2e7d32; } .ini-kpi .s.dn { color: #c62828; }
.ini-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ini-card { background: #fff; border: 1px solid var(--border, #e4dcd4); border-radius: 14px; padding: 12px 14px; }
.ini-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--brand); }
.ini-card h3 + .ini-row, .ini-card h3 + .ini-av { border-top: 0; }
.ini-av { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0e8e0; font-size: 14px; }
.ini-av .i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.ini-av .i.rojo { background: #c62828; } .ini-av .i.ambar { background: #e8a317; } .ini-av .i.verde { background: #2e7d32; }
.ini-av .t { flex: 1; min-width: 0; }
.ini-av button { width: auto; padding: 4px 10px; font-size: 13px; background: none; border: 0; color: var(--accent); font-weight: 700; cursor: pointer; white-space: nowrap; }
.ini-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #f0e8e0; font-size: 14px; }
.ini-row .m { color: var(--muted); font-size: 13px; }
.ini-card h3.sep { margin-top: 12px; }
.ini-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ini-quick button { width: auto; background: var(--accent-soft); color: var(--brand); border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.ini-quick button:hover { filter: brightness(.97); }
@media (max-width: 900px) { .ini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ini-cols { grid-template-columns: 1fr; } }

/* Buscador del Almacén (27-09-2026): en la cabecera, a la derecha del título */
.alm-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.alm-head-tx { flex: 1 1 320px; min-width: 0; }
.alm-buscar {
  flex: 0 1 340px; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  cursor: text; transition: border-color .15s ease, box-shadow .15s ease;
}
.alm-buscar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181,80,46,.12); }
.alm-buscar svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted); }
.alm-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; margin: 0; height: 100%; font-size: 15px; box-shadow: none; }
.alm-buscar input::-webkit-search-cancel-button { display: none; }
.alm-buscar button { width: auto; flex: 0 0 auto; background: none; border: 0; color: var(--muted); font-weight: 700; font-size: 13px; padding: 4px 6px; cursor: pointer; border-radius: 6px; }
.alm-buscar button:hover { background: var(--accent-soft); color: var(--brand); }
#almTabs .alm-n { display: inline-block; min-width: 18px; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; line-height: 17px; text-align: center; vertical-align: 1px; }
#almTabs .alm-n.cero { background: #d8cfc7; }
.alm-buscar-aviso { margin: 10px 0; padding: 9px 12px; background: #fff; border: 1px dashed var(--border); border-radius: 10px; font-size: 14px; color: var(--muted); }
.alm-buscar-aviso .btn-link { margin-left: 8px; font-weight: 700; }
@media (max-width: 720px) { .alm-head { gap: 10px; } .alm-buscar { flex: 1 1 100%; } }
.alm-head { margin-bottom: 14px; }
.alm-head .page-title { margin-bottom: 18px; }
.alm-head .gx-intro { margin: -14px 0 0; }
#view-ingredientes.alm-buscando #escAiCard,
#view-ingredientes.alm-buscando #escKpis,
#view-ingredientes.alm-buscando #almEscandallos > .card:has(#escStockToggle),
#view-ingredientes.alm-buscando #escLegend { display: none; }

/* Ajustes en pestañas + Funciones (punto 17-B, 27-09-2026) */
#view-ajustes > .aj-fuera { display: none !important; }
.mod-off { display: none !important; }
.aj-tabs { max-width: 1100px; }
.aj-tabs button[hidden] { display: none; }
.aj-func { max-width: 1100px; padding: 6px 20px 16px; }
.aj-func-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 34px; }
.aj-grp { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 18px 0 2px; }
.aj-grp-hint { margin: 2px 0 4px; font-size: 12.5px; }
.aj-sw-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0e8e0; cursor: pointer; margin: 0; }
.aj-sw-row .aj-sw-t { flex: 1; min-width: 0; }
.aj-sw-row .aj-sw-t strong { font-size: 14.5px; font-weight: 600; }
.aj-sw-row .aj-sw-t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.aj-sw-row .aj-ir { width: auto; white-space: nowrap; font-size: 13px; font-weight: 700; }
.aj-sw-row select { margin: 0; }
/* M5 (21-10-2026): en el móvil el desplegable se llevaba todo el ancho y el texto
   quedaba en una palabra por línea. Ahora el desplegable baja a su propia línea
   y «Configurar ›» va debajo del texto, con el interruptor a la derecha. */
@media (max-width: 640px) {
  .aj-sw-row { flex-wrap: wrap; row-gap: 8px; }
  .aj-sw-row .aj-sw-t { flex: 1 1 170px; }
  .aj-sw-row select { flex: 1 1 100%; width: 100% !important; max-width: 100%; }
  .aj-sw-row .aj-ir { order: 3; flex: 1 1 100%; text-align: left; min-height: 40px; }
}
@media (max-width: 900px) { .aj-func-cols { grid-template-columns: 1fr; } }

/* ==========================================================================
   Productos compacto (punto 17-C, 27-09-2026): lista + ficha
   ========================================================================== */
#prCatsModal[hidden] { display: none; }
.pr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-head .page-title { margin: 0; flex: 1 1 auto; }
.pr-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-acts .btn-secondary, .pr-acts .btn-primary { width: auto; padding: 8px 12px; font-size: 13.5px; text-decoration: none; display: inline-flex; align-items: center; }
.pr-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 12px; align-items: start; }
.pr-list, .pr-det { background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.pr-list { overflow: hidden; }
.pr-list-top { padding: 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; background: #fff; z-index: 2; }
.pr-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; height: 38px; }
.pr-search svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 16px; }
.pr-search input { border: 0; outline: 0; margin: 0; padding: 0; height: 100%; flex: 1; min-width: 0; background: none; box-shadow: none; font-size: 14px; }
.pr-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.pr-chip { width: auto; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.pr-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pr-chip-bajas { border-style: dashed; }
.pr-bulk { display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 13px; }
.pr-bulk #prBulkTxt { font-weight: 700; color: var(--brand); }
.pr-bulk .btn-link { width: auto; font-size: 12.5px; padding: 0; }
.pr-bulk .pr-bulk-go { width: auto; margin-left: auto; padding: 5px 11px; font-size: 12.5px; }
.pr-items { max-height: calc(100vh - 290px); overflow-y: auto; }
.pr-grp { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; background: #faf6f2; font-weight: 700; position: sticky; top: 0; z-index: 1; }
.pr-grp .category-dot { margin: 0; }
.pr-li { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border-top: 1px solid #f0e8e0; font-size: 14px; cursor: pointer; }
.pr-li:hover { background: #fbf7f3; }
.pr-li.on { background: var(--accent-soft); }
.pr-li.marcado .pr-n { font-weight: 700; }
.pr-ck { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; }
.pr-ph { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex: 0 0 30px; background: #efe5da; }
.pr-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-ic { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pr-ic b.si { color: #2e7d32; } .pr-ic b.no { color: #c9c1ba; font-weight: 400; }
.pr-p { font-weight: 700; white-space: nowrap; min-width: 58px; text-align: right; }
.pr-vacio, .pr-det-vacio { padding: 24px 16px; text-align: center; }
.pr-det { padding: 12px 14px; position: sticky; top: 12px; }
.pr-dh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pr-dh-tx { flex: 1; min-width: 0; }
.pr-t { font-size: 16px; font-weight: 800; line-height: 1.2; }
.pr-s { color: var(--muted); font-size: 12px; }
.pr-s .btn-link { width: auto; font-size: 12px; padding: 0; }
.pr-foto { width: 46px; height: 46px; flex: 0 0 46px; padding: 0; border: 1px dashed #cdbfb2; border-radius: 9px; background: #efe5da; color: var(--muted); font-size: 10.5px; overflow: hidden; cursor: pointer; }
.pr-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-baja { width: auto; padding: 5px 10px; font-size: 12.5px; }
.pr-volver { display: none; width: auto; padding: 0; }
.pr-g4 { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr; gap: 8px 10px; }
.pr-g4 > label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); margin: 0; }
.pr-g4 .pr-nombre { grid-column: span 2; }
.pr-g4 input, .pr-g4 select { margin: 0; padding: 6px 9px; height: 34px; font-size: 14px; font-weight: 600; color: var(--text); }
.pr-g4 input.num { text-align: right; }
.pr-sws { grid-column: span 2; display: flex; gap: 16px; align-items: flex-end; padding-bottom: 5px; }
.pr-sws label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; margin: 0; cursor: pointer; }
.pr-al { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; align-items: center; }
.pr-al .lb { font-size: 11px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.pr-al button { width: auto; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 2px 9px; font-size: 12px; color: var(--text); cursor: pointer; }
.pr-al button.on { background: #fde7b3; border-color: #e8a317; font-weight: 700; }
.pr-ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px solid #f0e8e0; font-size: 12.5px; color: var(--muted); }
.pr-ft b { color: var(--text); }
.pr-fc.bien { color: #2e7d32 !important; } .pr-fc.justo { color: #b7791f !important; } .pr-fc.alto { color: #c62828 !important; }
.pr-lk { width: auto; padding: 0 0 0 6px; font-size: 12.5px; font-weight: 700; }
.pr-stock { display: inline-flex; align-items: center; gap: 5px; }
.pr-stock input { width: 62px; margin: 0; padding: 4px 6px; height: 30px; font-size: 13px; }
.pr-stock .btn-secondary { width: auto; padding: 4px 10px; font-size: 14px; }
.pr-ft .btn-primary, .pr-ft .btn-secondary { width: auto; }
@media (max-width: 900px) {
  .pr-grid { grid-template-columns: 1fr; }
  .pr-grid.con-ficha .pr-list { display: none; }
  .pr-grid:not(.con-ficha) .pr-det { display: none; }
  .pr-volver { display: inline-block; }
  .pr-det { position: static; }
  .pr-items { max-height: none; }
  .pr-g4 { grid-template-columns: 1fr 1fr; }
  .pr-ic { display: none; }
}
.pr-acts .btn-secondary, .pr-acts .btn-primary, .pr-chip, .pr-al button, .pr-bulk .btn-link { font-family: var(--font-body); font-weight: 700; }
.pr-al button { font-weight: 600; }
.pr-al button.on { font-weight: 800; }
@media (max-width: 720px) { .pr-acts a, .pr-acts [onclick^="publishWebNow"] { display: none; } }

/* Camareros compacto (punto 17-C) */
.cam-grid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.cam-grid .pr-items { max-height: none; }
.cam-av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.cam-av-big { width: 42px; height: 42px; flex-basis: 42px; font-size: 15px; }
.cam-tag { background: var(--accent-soft); color: var(--brand); border-radius: 6px; font-size: 11.5px; padding: 1px 7px; font-weight: 700; white-space: nowrap; }
.cam-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #f0e8e0; font-size: 14px; }
.cam-row .l { color: var(--muted); font-weight: 600; }
.cam-row select { width: auto; min-width: 180px; margin: 0; }
.cam-row .btn-secondary { width: auto; padding: 5px 11px; font-size: 13px; }
.cam-pin { letter-spacing: 2px; font-weight: 700; margin-right: 6px; }
.cam-hint { margin: 0 0 8px; font-size: 12.5px; }
.cam-form { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 8px 10px; }
.cam-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); margin: 0; }
.cam-form input, .cam-form select { margin: 0; height: 36px; }
.cam-perms { max-width: 1100px; }
.cam-perms > summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 2px 0; }
.cam-perms[open] > summary { margin-bottom: 10px; }
@media (max-width: 900px) { .cam-grid { grid-template-columns: 1fr; } .cam-form { grid-template-columns: 1fr; } }

/* Almacén → Ingredientes compacto (punto 17-C) */
.ing-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
.ing-tabla td, .ing-tabla th { padding-top: 7px; padding-bottom: 7px; }
.ing-tabla tr.ing-on td { background: var(--accent-soft); }
.ing-tabla tr.ing-baja td { opacity: .6; }
.ing-grid .pr-list { max-height: calc(100vh - 250px); overflow-y: auto; }
.ing-sec { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 8px 0 5px; }
.ing-ajuste { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ing-ajuste input { width: 80px; margin: 0; height: 34px; }
.ing-ajuste .btn-secondary { width: auto; padding: 6px 11px; font-size: 13px; }
.ing-ajuste select { width: auto; flex: 1 1 150px; margin: 0; height: 34px; font-size: 13px; }
.ing-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.ing-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); margin: 0; }
.ing-form .ing-nombre { grid-column: span 2; }
.ing-form input { margin: 0; height: 34px; font-size: 14px; font-weight: 600; color: var(--text); }
@media (max-width: 900px) { .ing-grid { grid-template-columns: 1fr; } .ing-grid .pr-list { max-height: none; } }
.ing-ajuste select { padding: 4px 8px; line-height: 1.2; }

/* ==========================================================================
   Más pantallas compactas (punto 17-C, 2ª tanda, 27-09-2026)
   ========================================================================== */
/* Fila fina de importes (Caja) */
.stat-strip { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 8px 0 4px; }
.stat-strip > div { flex: 1 1 110px; padding: 7px 12px; border-right: 1px solid #f0e8e0; min-width: 0; }
.stat-strip > div:last-child { border-right: 0; }
.stat-strip > div > span { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-strip b { font-size: 17px; font-family: var(--font-heading); }
.stat-strip b .esc-fc-word { font-size: 12px; }
#escTabla .esc-sub, .esc-sub { display: inline; font-size: 12.5px; color: var(--muted); }
.stat-strip .destacado { flex-basis: 190px; background: var(--accent-soft); }
.stat-strip .destacado b { color: var(--accent); }
.caja-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.caja-top h3 { margin: 0; flex: 1 1 auto; }
.caja-cerrar-btn { width: auto; padding: 8px 14px; }
.caja-arqueo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
#view-caja .card { padding-top: 14px; padding-bottom: 14px; }
#cajaMovimientosCard h3, #view-caja .card > h3 { margin-bottom: 8px; }
#cajaMovimientosCard .form-row { margin-bottom: 6px; gap: 8px; }
#cajaMovimientosCard .form-row > * { margin-bottom: 0; }
#cajaMovimientosCard #movGastoRow { align-items: center; }
#view-caja td, #view-caja th { padding-top: 6px; padding-bottom: 6px; }
#view-caja td .btn-secondary { padding: 4px 10px; font-size: 13px; width: auto; }

/* Informes: los recuadros de números en una fila fina */
#view-informes .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
#view-informes .stat-row .stat-box { border-bottom: 1px solid #f0e8e0 !important; margin-bottom: -1px; min-width: 0; border: 0; border-right: 1px solid #f0e8e0; border-radius: 0; box-shadow: none; padding: 7px 12px; }
#view-informes .stat-row .stat-box:last-child { border-right: 0; }
#view-informes .stat-row .stat-box .label { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-informes .stat-row .stat-box .value { font-size: 17px; margin-top: 1px; }
/* Mesas: añadir/mover solo con «✎ Editar mesas» */
.mesas-admin { display: none; }
.mesas-admin:not(.abierto) + .mesas-toolbar { margin-top: 0; }
.mesas-admin.abierto { display: block; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.mesas-edit-btn { width: auto; border: 1px solid var(--border); background: #fff; color: var(--brand); border-radius: 10px; padding: 7px 12px; font-weight: 700; font-size: 13.5px; cursor: pointer; margin-right: 6px; font-family: var(--font-body); }
.mesas-edit-btn.activo { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (max-width: 720px) { .mesas-edit-btn, .mesas-admin.abierto { display: none; } }
/* Escandallos compacto */
.esc-ai-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; font-size: 13.5px; margin-bottom: 8px; }
.esc-ai-line .ui-icon { width: 16px; height: 16px; }
.esc-ai-txt { flex: 1 1 200px; color: var(--muted); }
.esc-ai-line .btn-secondary { width: auto; padding: 4px 10px; font-size: 12.5px; }
.esc-ai-line .btn-link { width: auto; font-size: 12.5px; }
#escKpis.stat-strip { margin: 0 0 10px; }
#escTableBody td { padding-top: 6px; padding-bottom: 6px; }
#almEscandallos .gx-toolbar { margin-bottom: 6px; }
/* Precios y carta compacto */
.gpr-cats { margin: 8px 0; }
.gpr-table td { padding-top: 6px; padding-bottom: 6px; }
.gpr-cat-in { display: inline; }
/* Zonas y cajas compacto */
.alm-zchips { margin: 4px 0 8px; }
.alm-art td { padding-top: 3px; padding-bottom: 3px; }
.alm-art select, .alm-art input { height: 30px; padding: 3px 8px; margin: 0; font-size: 13px; }
.alm-zona-fila input { height: 32px; }
/* Gastos → Ajustes en acordeón */
.ga-acc { background: #fff; border: 1px solid var(--border); border-radius: 0; margin: 0 0 -1px; }
.ga-acc:first-of-type { border-radius: 12px 12px 0 0; }
.ga-acc > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 14px; }
.ga-acc > summary::-webkit-details-marker { display: none; }
.ga-acc > summary::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 18px; transition: transform .15s ease; }
.ga-acc[open] > summary::after { transform: rotate(90deg); }
.ga-acc > summary strong { min-width: 230px; }
.ga-acc > summary .ga-res { color: var(--muted); font-size: 13px; flex: 1; min-width: 0; }
.ga-acc[open] > summary { background: #fbf7f3; border-bottom: 1px solid #f0e8e0; }
.ga-acc > fieldset.ga-grupo { border: 0; margin: 0; padding: 10px 14px 14px; }
.ga-acc > fieldset.ga-grupo > legend { display: none; }
.ga-on { background: #e3f1e4; color: #2e7d32; border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 12px; }
.ga-off { background: #efe7df; color: var(--muted); border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 12px; }
.ga-off-mal { background: #fbe3e0; color: #c62828; border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 12px; }
@media (max-width: 720px) { .ga-acc > summary { flex-wrap: wrap; } .ga-acc > summary strong { min-width: 0; } }
/* B1 (21-10-2026): en el móvil el resumen se quedaba en una columna de 14-40 px a la
   derecha; ahora baja a su propia línea, debajo del título, y la flecha sigue arriba */
@media (max-width: 720px) {
  .ga-acc > summary::after { order: 2; }
  .ga-acc > summary .ga-res { order: 3; flex: 1 1 100%; overflow-wrap: anywhere; }
}
/* Gastos → Proveedores: lista + ficha lado a lado en el ordenador */
.gx-sup-list td { padding-top: 7px; padding-bottom: 7px; }
.gx-sup-list tr.sup-sel td { background: var(--accent-soft); }
@media (min-width: 1101px) {
  .sup-grid.con-ficha { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
  .sup-grid.con-ficha #supListWrap { display: block !important; position: sticky; top: 12px; }
  .sup-grid.con-ficha #supListWrap .card { padding: 10px; }
  .sup-grid.con-ficha #supListWrap .gx-toolbar { flex-wrap: wrap; gap: 6px; }
  .sup-grid.con-ficha #supListWrap .gx-toolbar .gx-new-btn { display: none; }
  .sup-grid.con-ficha #supListWrap .table-scroll { max-height: calc(100vh - 300px); overflow-y: auto; }
  .sup-grid.con-ficha .gx-sup-list th:nth-child(n+2):not(:nth-child(5)),
  .sup-grid.con-ficha .gx-sup-list td:nth-child(n+2):not(:nth-child(5)) { display: none; }
  .sup-grid.con-ficha #supBackBtn { display: none; }
}
@media (max-width: 1100px) { .sup-grid.con-ficha #supListWrap { display: none; } }
/* Pedidos web: ¿cómo ha pagado? (28-09-2026) */
.oo-pago-box { max-width: 360px; }
.oo-pago-btns { display: flex; gap: 8px; }
.oo-pago-btns button { flex: 1; padding: 16px 8px; font-size: 16px; }
/* Local primero / internet de reserva (28-09-2026) */
.om-conmuta { position: fixed; left: 12px; right: 12px; z-index: 9999; display: flex; align-items: center; gap: 12px; justify-content: space-between; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-family: var(--font-body); font-size: 15px; }
.om-conmuta button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 800; font-size: 15px; cursor: pointer; }
.om-conmuta-mal { top: 12px; background: #c62828; color: #fff; }
.om-conmuta-mal button { background: #fff; color: #c62828; }
.om-conmuta-reserva { bottom: 12px; background: #fff6d6; color: #5a4300; border: 1px solid #f0dc9a; padding: 8px 12px; font-size: 13.5px; }
.om-conmuta-reserva button { background: #6b4226; color: #fff; padding: 8px 12px; font-size: 13.5px; }
@media (max-width: 600px) { .om-conmuta { flex-direction: column; align-items: stretch; text-align: center; } }
/* Cocina: enteras y medias (28-09-2026) */
.kds-item-line span.kds-tam { display: inline-block; border-radius: 7px; padding: 1px 7px; font-weight: 900; font-size: 15px; letter-spacing: .02em; margin: 0 4px 0 2px; vertical-align: 1px; white-space: nowrap; }
.kds-item-line span.kds-tam-media { background: #f5a623; color: #3a2200; }
.kds-item-line span.kds-tam-entera { border: 2px solid currentColor; color: var(--text); padding: 0 6px; }
.kds-item-line.kds-es-media { background: #fff4dc; border-radius: 8px; margin: 2px -6px; padding: 3px 6px; }
.kds-cancel-mark .kds-item-line span.kds-tam-entera, .kds-cancel .kds-item-line span.kds-tam-entera { color: inherit; }

/* ==========================================================================
   Mesa abierta en el móvil, compacta (28-09-2026, pedido por La Corona)
   Una sola barra fina arriba (‹ Mesas · nombre · personas · ⋯ · camarero) y
   el buscador de productos justo debajo. La cabecera grande, el título, la
   franja «Vendiendo como» y el aviso de caja no salen mientras se está en la
   mesa: vuelven al salir a Mesas. En ordenador y tablet no cambia nada.
   ========================================================================== */
#tableWaiterBtn, #tableWaiterMenuBtn, .tm-dots, .gc-q { display: none; }
@media (max-width: 720px) {
  body:has(#view-venta.active #tableBar:not([hidden])) .sidebar-toggle,
  body:has(#view-venta.active #tableBar:not([hidden])) #topUser,
  body:has(#view-venta.active #tableBar:not([hidden])) #cashboxAlert,
  body:has(#view-venta.active #tableBar:not([hidden])) #ventaTitle,
  body:has(#view-venta.active #tableBar:not([hidden])) #waiterBar { display: none !important; }
  body:has(#view-venta.active #tableBar:not([hidden])) .main { padding-top: 0; }
  body:has(#view-venta.active #tableBar:not([hidden])) .save-banner { margin-left: 0; }

  #view-venta #tableBar {
    position: sticky; top: 0; z-index: 60;
    margin: 0 -12px 8px; padding: 8px 10px; gap: 6px;
    border-radius: 0; border-width: 0 0 1px 0;
  }
  #view-venta #tableBar .table-back-btn { padding: 8px 10px; font-weight: 800; }
  #view-venta #tableBar .table-bar-info { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; white-space: nowrap; }
  #view-venta #tableBar .table-bar-info > .ui-icon,
  #view-venta #tableBar .tb-mesa-lbl { display: none; }
  #view-venta #tableBar #currentTableName { font-size: 16px; color: var(--brand); overflow: hidden; text-overflow: ellipsis; }
  #view-venta #tableBar .guests-chip { flex: 0 0 auto; margin-left: 6px; padding: 5px 8px; }
  #view-venta #tableBar .gc-txt { display: none; }
  #view-venta #tableBar .gc-q { display: inline; }
  #view-venta #tableBar .table-more-btn { margin-left: 0; width: 38px; height: 38px; padding: 0; justify-content: center; }
  #view-venta #tableBar .tm-txt { display: none; }
  #view-venta #tableBar .tm-dots { display: inline-block; font-size: 20px; font-weight: 900; line-height: 1; transform: translateY(4px); }
  #tableWaiterBtn {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: 38px; height: 38px; min-width: 0; padding: 0; border-radius: 50%;
    background: var(--brand); color: #fff; border: 0;
    font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  }
  #tableWaiterMenuBtn { display: inline-flex; flex: 1 1 100%; justify-content: center; gap: 4px; }
}

/* ==========================================================================
   Móvil: cabecera de una sola fila y mesas más grandes (28-09-2026, La Corona)
   «Cambiar» sobra (se cambia tocando el nombre) y «Fichar» va al lado del
   nombre. Así las mesas suben y se pueden hacer más grandes.
   ========================================================================== */
@media (max-width: 720px) {
  .top-user { flex-wrap: nowrap; margin-bottom: 12px; }
  .top-user-who { flex: 1 1 auto; min-width: 0; }
  #topUserChange { display: none; }
  .top-user .top-user-clock { flex: 0 0 auto; padding: 10px 14px; }

  #view-mesas .table-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  #view-mesas .table-card { min-height: 112px; padding: 14px 6px; font-size: 21px; border-width: 3px; }
  #view-mesas .table-card .table-card-seats,
  #view-mesas .table-card .table-card-total { font-size: 14px; }
}

/* Pantalla cuadrada: el menú de iconos se despliega al tocar el icono de
   Oído Mesa (28-09-2026). Se pone por encima y el resto no se mueve.
   (21-10-2026, H3) También en la tablet de pie (721-980 px). */
@media (min-width: 981px) and (max-aspect-ratio: 3/2), (min-width: 721px) and (max-width: 980px) {
  .sidebar h2.sidebar-title { cursor: pointer; }
  .app-shell:has(> .sidebar.open) { padding-left: 64px; }
  .sidebar.open {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
    width: 230px; flex: none; box-shadow: 6px 0 28px rgba(0, 0, 0, 0.35);
  }
  .sidebar.open h2.sidebar-title { justify-content: flex-start; padding: 0 18px; }
  .sidebar.open h2.sidebar-title > span { display: inline; }
  .sidebar.open button.nav-btn, .sidebar.open a.nav-btn { justify-content: flex-start; gap: 12px; padding: 11px 14px; margin: 2px 10px; width: calc(100% - 20px); }
  .sidebar.open .nav-btn > span:not(.nav-icon):not(.nav-badge) { display: inline; }
  .sidebar.open .nav-badge { position: static; margin-left: auto; }
  .sidebar.open .logout-btn { margin: 12px 14px 0; }
}

/* ==========================================================================
   28-09-2026 (La Corona): «Cambiar» fuera, mesas más grandes en el
   ordenador y cabecera de la pantalla de cocina más fina.
   ========================================================================== */
/* Se cambia de persona tocando el nombre; el circulito lo indica. */
#topUserChange { display: none !important; }
.top-user-swap {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 4px; border-radius: 50%;
  background: var(--accent-soft, #f3e4d6); color: var(--brand);
}
.top-user-swap svg { width: 13px; height: 13px; }

/* Mesas (vista lista) más grandes en ordenador y tablet: sobraba sitio. */
@media (min-width: 721px) {
  #view-mesas .table-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
  #view-mesas .table-card { min-height: 132px; padding: 18px 10px; font-size: 24px; border-width: 3px; gap: 6px; }
  #view-mesas .table-card .table-card-seats,
  #view-mesas .table-card .table-card-total { font-size: 15px; }
}

/* Pantalla de cocina: cabecera en una sola fila y más fina. */
/* (21-10-2026, H5) Puede bajar a una segunda fila: con «Comandas / Etiquetas /
   Recetas» y la píldora de Elena no cabía en 1280 y el reloj se cortaba. */
.kds-header { flex-wrap: wrap; row-gap: 10px; gap: 12px; padding: 12px 18px; }
.kds-brand { font-size: 20px; gap: 6px; }
.kds-header .category-tabs { gap: 8px; flex-wrap: nowrap; }
.kds-header .category-tab { padding: 11px 22px; font-size: 17px; }
.kds-legend { gap: 10px; }
.kds-legend span { font-size: 12px; }
.kds-header .kds-history-btn { padding: 11px 16px; font-size: 15px; }
.kds-clock { font-size: 24px; white-space: nowrap; margin-left: auto; }
@media (max-width: 1250px) { .kds-legend { display: none; } }
@media (max-width: 620px) { .kds-header { flex-wrap: wrap; } }

/* Móvil (28-09-2026, La Corona):
   - (7-10-2026) «Cocina» vuelve a salir en el menú del móvil: si se rompe la
     tablet de cocina, se usa un móvil como pantalla de cocina.
   - Menos hueco entre la cabecera, el título y la tarjeta, y el título
     alineado con el borde de la tarjeta blanca (el ☰ ya va en la fila del
     nombre, no hace falta dejarle sitio al lado del título). */
@media (max-width: 720px) {
  body:has(#topUser:not([hidden])) .top-user { margin-bottom: 8px; }
  body:has(#topUser:not([hidden])) .alert-banner { margin-bottom: 8px; padding: 9px 12px; font-size: 13px; }
  body:has(#topUser:not([hidden])) h1.page-title { margin: 2px 0 8px 0; line-height: 1.2; font-size: 20px; }
}

/* Tablet de pie (721-980 px, 21-10-2026, H3 de la 2ª simulación): el menú de la
   izquierda ocupaba 180 px fijos y los productos iban en 2 columnas. Ahora es la
   misma tira de iconos de 64 px que en la pantalla cuadrada; tocando el icono de
   arriba se despliega con los nombres (js/app.js, MENU_ESTRECHO). */
@media (min-width: 721px) and (max-width: 980px) {
  .sidebar { width: 64px; flex: 0 0 64px; padding: 12px 0; }
  .sidebar h2.sidebar-title { justify-content: center; padding: 0; margin: 0 0 12px; cursor: pointer; }
  .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; min-width: 0; }
  /* Gestión / Configuración: una raya fina entre bloques (también con el dedo, B-11) */
  .app-shell .sidebar .nav-group, .app-shell .sidebar .nav-group.nav-group-fijo { min-height: 0; }
  /* «Vendiendo como» ya sale arriba (nombre + Fichar), como en el ordenador */
  .app-shell:has(#topUser:not([hidden])) #ventaContent > .waiter-bar { display: none; }
}

/* Móvil: el botón ☰ redondo y a la misma altura que el nombre y «Fichar»
   (28-09-2026). La fila del nombre mide 52 px desde arriba 12 px: centro 38. */
@media (max-width: 720px) {
  body:has(#topUser:not([hidden])) .sidebar-toggle { top: 15px; left: 10px; width: 46px; height: 46px; border-radius: 50%; }
}

/* Extras agotados (28-09-2026): gris y con la etiqueta, como los platos. */
.modifier-option.sold-out { opacity: .55; background: #eee7e0; position: relative; }
.modifier-option.sold-out .modifier-option-name { text-decoration: line-through; }
.modifier-soldout-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #c62828; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; }

/* ==========================================================================
   Ventana de cobro en el móvil y la tablet (28-09-2026, La Corona): la misma
   que en el ordenador, a pantalla completa y en una columna. Arriba el cobro
   (forma de pago, teclado, cambio, propina…), el botón «Cobrar» fijo abajo, y
   el ticket al final, plegado («Ver el ticket»).
   ========================================================================== */
.cobro-mtitle, .cobro-ver-ticket { display: none; }
@media (max-width: 980px) {
  .cobro-overlay { padding: 0; }
  .cobro-box { width: 100%; height: 100%; border-radius: 0; flex-direction: column; overflow-y: auto; padding-bottom: 88px; box-sizing: border-box; }
  .cobro-right { order: 1; flex: none; overflow: visible; padding: 10px 14px 6px; gap: 10px; }
  .cobro-left { order: 2; width: auto; flex: none; border-right: 0; border-top: 8px solid #f3ebe3; }
  .cobro-left .cobro-head { display: none; }
  .cobro-list-head { display: none; }
  .cobro-ver-ticket { display: block; margin: 10px 14px 0; width: calc(100% - 28px) !important; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; background: #fff; color: var(--brand); font-weight: 700; font-size: 14px; }
  .cobro-lines { display: none; overflow: visible; padding: 0 14px; }
  .ver-ticket .cobro-lines { display: block; }
  .cobro-sum { padding: 8px 14px; }
  .cobro-total strong { font-size: 24px; }
  .cobro-left-btns { padding: 0 14px 12px; }
  .cobro-dtos { padding: 0 14px 12px; }

  .cobro-top { flex-wrap: wrap; gap: 8px; }
  .cobro-mtitle { display: block; flex: 1 1 auto; min-width: 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cobro-top > span:empty { display: none; }
  .cobro-tabs { order: 5; flex: 1 1 100%; }
  .cobro-tabs button { font-size: 12.5px; padding: 8px 4px; }
  .cobro-cajon { padding: 8px 10px; font-size: 13px; }
  .cobro-amount strong { font-size: 38px; }
  .cobro-methods { gap: 6px; }
  .cobro-methods button { padding: 9px 2px; font-size: 13px; }
  .cobro-body { flex-direction: column; gap: 10px; }
  .cobro-col-keys { width: auto; }
  .cobro-keys button { padding: 12px 0; font-size: 20px; }
  .cobro-bills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cobro-change strong { font-size: 28px; }
  .cobro-foot { margin-top: 4px; }
  .cobro-go { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto !important; z-index: 5; padding: 15px; font-size: 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
}
@media (min-width: 721px) and (max-width: 980px) {
  .cobro-body { flex-direction: row; }
  .cobro-col-keys { width: 290px; }
}
@media (max-width: 720px) {
  .cobro-right { gap: 8px; }
  .cobro-mtitle { font-size: 17px; }
  .cobro-box .cobro-x { width: 36px; height: 36px; }
  .cobro-tabs { padding: 3px; }
  .cobro-tabs button { padding: 6px 2px; font-size: 12px; line-height: 1.15; }
  .cobro-label { font-size: 11px; }
  .cobro-amount strong { font-size: 32px; }
  .cobro-methods button { flex-direction: row; justify-content: center; padding: 8px 2px; font-size: 12.5px; gap: 4px; }
  .cobro-methods button .ui-icon { width: 17px; height: 17px; }
  .cobro-display { padding: 4px 12px; }
  .cobro-display strong { font-size: 22px; }
  .cobro-keys { gap: 5px; }
  .cobro-keys button { padding: 9px 0; font-size: 18px; }
  .cobro-col-side { gap: 8px; }
  .cobro-col-side > b { display: none; }
  .cobro-bills { gap: 5px; }
  .cobro-bills button { padding: 9px 2px; font-size: 14px; }
  .cobro-change { padding: 8px 12px; }
  .cobro-change b { font-size: 14px; }
  .cobro-change strong { font-size: 24px; }
  .cobro-chip { padding: 6px 10px; font-size: 13px; }
}

/* --- Facturas completas y barra de Ventas (29-09-2026) --------------------- */
.ventas-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.ventas-dia { display: flex; gap: 6px; align-items: center; }
.ventas-dia button { padding: 9px 14px; font-size: 15px; }
.ventas-dia input[type="date"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: #fff; }
.ventas-buscar { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 99px; font: inherit; background: #fff; }
.ventas-bar .btn-primary { width: auto; }
.fc-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #e7f3ec; color: #2e7d4f; border: 1px solid #bfe0cc; font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.fc-btn-hecha { border: 1px solid #bfe0cc !important; background: #e7f3ec !important; color: #2e7d4f !important; }

.fc-dlg .fc-box { width: 560px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; text-align: left; padding: 20px 22px; }
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.fc-head h3 { margin: 0; font-size: 19px; }
.fc-venta { margin: 0 0 12px; }
.fc-buscar-wrap { position: relative; }
.fc-dlg .fc-buscar { width: 100%; box-sizing: border-box; border: 2px solid var(--brand); border-radius: 12px; padding: 10px 12px; font-size: 15px; letter-spacing: normal; text-align: left; }
.fc-sug { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 6px; background: #fff; }
.fc-sug button { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; padding: 9px 12px; font-size: 14px; font-family: var(--font-body); font-weight: 400; color: var(--text); }
.fc-sug button:last-child { border-bottom: 0; }
.fc-sug button:hover { background: var(--accent-soft); }
.fc-sug small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fc-sug-vacio { padding: 9px 12px; color: var(--muted); font-size: 13px; }
.fc-sep { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; margin: 12px 0; }
.fc-sep::before, .fc-sep::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.fc-fld { margin-bottom: 10px; min-width: 0; }
.fc-fld label, .fc-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.fc-dlg .fc-fld input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; font-size: 15px; letter-spacing: normal; text-align: left; margin: 0; }
.fc-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-g3 { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; }
.fc-nifmsg { font-size: 12px; margin-top: 3px; min-height: 15px; }
.fc-nifmsg.ok { color: var(--green); }
.fc-nifmsg.mal { color: var(--red); }
.fc-chk { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0 12px; cursor: pointer; }
.fc-dlg .fc-chk input { width: 18px; height: 18px; margin: 0; }
.fc-dest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.fc-dest button { background: #fff; border: 1px solid var(--border); color: var(--text); padding: 10px 6px; font-size: 14px; border-radius: 12px; }
.fc-dest button small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 2px; font-family: var(--font-body); }
.fc-dest button.on { border: 2px solid var(--brand); background: var(--accent-soft); }
.fc-error { color: var(--red); font-size: 13.5px; margin: 0 0 10px; }
.fc-dlg .tpv-dlg-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fc-dlg .tpv-dlg-btns .btn-primary { width: auto; }
.fc-faltan { margin: 6px 0 10px 20px; }
.fc-aviso { border-radius: 10px; padding: 9px 12px; margin: 8px 0 12px; font-size: 14px; }
.fc-aviso.ok { background: #e7f3ec; color: #1f5e39; }
.fc-aviso.mal { background: #fff3e0; color: #8a4b00; }
.fc-ficha { display: grid; gap: 8px; margin-top: 8px; }
.fc-ficha > div { background: #faf6f2; border-radius: 10px; padding: 8px 12px; }
.fc-ficha span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.fc-ficha strong { font-size: 15.5px; }
.fc-ficha small { display: block; color: var(--muted); font-size: 12.5px; }
.fc-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-acciones a, .fc-acciones button { width: auto; text-decoration: none; display: inline-flex; align-items: center; padding: 11px 14px; font-size: 14.5px; border-radius: var(--radius-md); font-weight: 600; font-family: var(--font-heading); }
.biz-lugar { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 10px; }
#correoFacturasCard .biz-lugar { grid-template-columns: 1fr 110px; }

@media (max-width: 720px) {
  .fc-dlg { align-items: stretch; }
  .fc-dlg .fc-box { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; padding: 16px; }
  .fc-g2, .fc-g3, .biz-lugar, #correoFacturasCard .biz-lugar { grid-template-columns: 1fr; }
  .fc-g3 { grid-template-columns: 100px 1fr; }
  .fc-g3 .fc-fld:last-child { grid-column: 1 / -1; }
  .fc-dest { grid-template-columns: 1fr 1fr 1fr; }
  .ventas-dia input[type="date"] { flex: 1; min-width: 0; }
  .ventas-dia { width: 100%; }
}
#correoFacturasCard .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#correoFacturasCard label:not(.switch-row) { font-size: 13px; font-weight: 700; color: var(--muted); }
#correoFacturasCard .form-group input { width: 100%; margin-bottom: 0; }
#correoFacturasCard .switch-row input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--brand); }
#correoFacturasCard .switch-row > span { display: block; }
#correoFacturasCard .btn-primary { width: auto; }

/* --- «Otro producto» (29-09-2026) ------------------------------------------ */
.category-tab.otro-tab { border: 2px dashed var(--accent) !important; color: var(--accent); background: #fbeee6 !important; }
.category-tab.otro-tab:hover { background: #f6dccb !important; }
.otro-tag { display: inline-block; background: #fbeee6; color: var(--accent); border: 1px solid #f0c9b3; border-radius: 6px; font-size: 10.5px; font-weight: 800; padding: 0 5px; vertical-align: middle; }
.otro-dlg .otro-box { width: 440px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow-y: auto; text-align: left; padding: 18px 20px; }
.otro-head { display: flex; justify-content: space-between; align-items: center; }
.otro-head h3 { margin: 0; font-size: 19px; }
.otro-lbl { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.otro-chips, .otro-aj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.otro-chip { background: #fff; border: 1px solid var(--border); color: var(--text); border-radius: 99px; padding: 8px 13px; font-size: 14px; font-weight: 700; }
.otro-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.otro-chip b { color: var(--muted); margin-left: 4px; }
.otro-dlg .otro-nombre { width: 100%; box-sizing: border-box; margin: 8px 0 0; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 16px; letter-spacing: normal; text-align: left; text-transform: uppercase; }
.otro-precio { display: flex; gap: 10px; align-items: stretch; }
.otro-display { flex: 1; border: 2px solid var(--brand); border-radius: 14px; font-size: 30px; font-weight: 800; text-align: right; padding: 6px 14px; color: var(--brand); font-family: var(--font-heading); }
.otro-cant { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 14px; padding: 6px 8px; font-size: 18px; }
.otro-cant button { width: 36px; height: 36px; padding: 0; border-radius: 10px; background: var(--border); color: var(--text); font-size: 20px; }
.otro-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.otro-pad button { background: #efe6dd; color: var(--text); border-radius: 12px; padding: 13px 0; font-size: 19px; font-weight: 800; }
.otro-pad button:nth-child(4) { grid-column: 4; grid-row: 1; }
.otro-pad .otro-pad-ok { grid-column: 4; grid-row: 2 / span 3; background: var(--green); color: #fff; font-size: 15px; }
.otro-dos { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.otro-seg { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.otro-seg button { flex: 1; border-radius: 0; background: #fff; color: var(--text); padding: 9px 4px; font-size: 13.5px; font-weight: 700; border-right: 1px solid var(--border); }
.otro-seg button:last-child { border-right: 0; }
.otro-seg button.on { background: var(--brand); color: #fff; }
.otro-error { color: var(--red); font-size: 13.5px; margin: 10px 0 0; }
.otro-add { width: 100%; margin-top: 14px; background: var(--green); color: #fff; border-radius: 14px; padding: 15px; font-size: 17px; font-weight: 800; }
.otro-add:disabled, .otro-pad-ok:disabled { opacity: .5; }
.otro-aj-nuevo { display: inline-flex; gap: 6px; align-items: center; }
.otro-aj-nuevo input { width: 140px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 99px; font-size: 14px; margin: 0; }
@media (max-width: 720px) {
  .otro-dlg { align-items: stretch; }
  .otro-dlg .otro-box { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; padding: 14px 16px; }
  .otro-pad button { padding: 14px 0; }
}

/* --- Aviso de conexión de reserva, arriba (29-09-2026) ---------------------- */
.om-reserva-pill { display: flex; align-items: center; gap: 8px; background: #fff6d6; border: 1px solid #e9cf7c; color: #5a4300; border-radius: 99px; padding: 4px 4px 4px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; font-family: var(--font-body); }
.om-reserva-pill button { border: 0; border-radius: 99px; background: var(--brand); color: #fff; padding: 7px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.om-reserva-pill { cursor: pointer; }
/* Tablet tumbada pequeña: sin botón, para que no se junte con «Fichar»; al tocar la pastilla sale «Volver…» (03-10-2026) */
@media (max-width: 1150px) { .om-reserva-pill button { display: none; } .om-reserva-pill { padding: 8px 14px; } }
.om-reserva-dot { display: none; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #fff6d6; border: 1.5px solid #e9cf7c; padding: 0; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 0 0 3px #f6e7b4; }
@media (max-width: 980px) { .om-reserva-dot { display: inline-flex; align-items: center; justify-content: center; } }
.om-reserva-hoja .btn-primary { width: 100%; margin-bottom: 8px; }
.om-reserva-hoja .om-reserva-seguir { width: 100%; }
.om-conmuta-reserva.om-arriba { bottom: auto; top: 12px; }
.om-reserva-dot.om-reserva-kds { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; font-size: 21px; }
@media (max-width: 900px) { .kds-header:has(.om-reserva-kds) .category-tab { padding: 11px 15px; } .om-reserva-dot.om-reserva-kds { width: 42px; height: 42px; flex-basis: 42px; font-size: 19px; } }
.modifier-qty { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 14px; padding: 4px; background: #fff; flex: 0 0 auto; }
.modifier-qty[hidden] { display: none; }
.modifier-qty button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--soft, #ece3da); color: var(--brand); font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; }
.modifier-qty b { min-width: 26px; text-align: center; font-size: 19px; color: var(--brand); }
@media (max-width: 600px) {
  .modifier-actions:has(.modifier-qty:not([hidden])) { flex-wrap: wrap; }
  .modifier-qty { order: -1; width: 100%; justify-content: flex-end; border: 0; padding: 0 0 4px; gap: 10px; }
  .modifier-qty::before { content: 'Cantidad'; margin-right: auto; font-weight: 800; color: var(--text); font-size: 16px; }
  .modifier-qty button { width: 52px; height: 48px; }
}
.split-tk { margin: 4px 0 10px; }
.split-tk-lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.split-tk-seg { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--brand); border-radius: 12px; overflow: hidden; }
.split-tk-seg button { border: 0; background: #fff; padding: 9px 8px; font-weight: 800; color: var(--brand); font-size: 14px; cursor: pointer; font-family: inherit; }
.split-tk-seg button small { display: block; font-weight: 600; font-size: 11.5px; color: var(--muted); }
.split-tk-seg button.on { background: #fbeee6; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.split-tk-seg button:disabled { opacity: .45; cursor: not-allowed; }
.split-part { flex-wrap: wrap; }
.split-part-lines { flex: 1 0 100%; font-size: 12.5px; color: var(--muted); padding-left: 38px; }

/* ===== Reservas de mesa (30-09-2026) ===== */
.res-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.res-dia { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.res-dia > button { border: 0; background: none; font-size: 20px; font-weight: 800; color: var(--brand); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; }
.res-dia > button:hover { background: var(--accent-soft); }
.res-dia .res-hoy { width: auto; font-size: 13px; padding: 0 10px; background: var(--accent-soft); }
.res-dia-txt { position: relative; font-weight: 800; color: var(--brand); padding: 0 8px; cursor: pointer; white-space: nowrap; }
.res-dia-txt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.res-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.res-seg button { border: 0; background: none; padding: 9px 14px; font-weight: 700; color: var(--brand); cursor: pointer; font-family: inherit; }
.res-seg button.on { background: var(--brand); color: #fff; }
.res-acc { margin-left: auto; display: flex; gap: 8px; }
.res-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.res-kpis > div { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; }
.res-kpis small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.res-kpis b { font-size: 22px; color: var(--brand); }
.res-kpis b span { font-size: 13px; color: var(--muted); font-weight: 700; }
.res-kpis .ambar b { color: #b36b00; } .res-kpis .rojo b { color: var(--accent); }
.res-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.res-main { padding: 12px; }
.res-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.res-filtros button { border: 1px solid var(--border); background: #fff; border-radius: 99px; padding: 6px 12px; font-weight: 700; font-size: 13px; color: var(--text); cursor: pointer; font-family: inherit; }
.res-filtros button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.res-filtros input { flex: 1; min-width: 160px; border: 1px solid var(--border); border-radius: 99px; padding: 6px 12px; }
.res-grupo { font-size: 12.5px; font-weight: 800; color: var(--muted); padding: 10px 2px 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.res-fila { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; cursor: pointer; font-family: inherit; color: inherit; }
.res-fila:hover { background: #fbf7f3; }
.res-fila.sel { border-color: var(--accent); background: #fdf3ee; }
.res-fila.apagada { opacity: .55; }
.res-fila.tarde { background: #fff8e8; }
.res-h { display: flex; flex-direction: column; min-width: 54px; }
.res-h b { font-size: 17px; color: var(--brand); } .res-h small { color: var(--muted); font-size: 12px; }
.res-n { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.res-n > b { font-size: 15px; }
.res-n > small { color: var(--muted); font-size: 12px; flex-basis: 100%; }
.res-mesa { border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font-size: 12px; font-weight: 800; color: var(--brand); }
.res-mesa.sin { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.res-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.res-tag { background: var(--accent-soft); color: var(--brand); border-radius: 6px; padding: 1px 7px; font-size: 11.5px; font-weight: 700; }
.res-tag.rojo { background: #fde8e6; color: #b3261e; } .res-tag.azul { background: #e6eefb; color: #2956a3; } .res-tag.nota { background: #fff6d6; color: #5a4300; }
.res-pill { border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.res-pill.verde { background: #e3f3e4; color: var(--green); } .res-pill.gris { background: #eee9e4; color: var(--muted); }
.res-pill.cafe { background: var(--brand); color: #fff; } .res-pill.apagado { background: #f1ede9; color: #a39990; }
.res-pill.rojo { background: #fde8e6; color: #b3261e; } .res-pill.tachado { background: #f1ede9; color: #a39990; text-decoration: line-through; }
.res-pill.ambar { background: #fff1d0; color: #9a5b00; }
.res-vacio { color: var(--muted); padding: 18px 6px; text-align: center; }
.res-aviso { background: #fff6d6; border: 1px solid #efd98c; color: #5a4300; border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 13.5px; }
.res-link { border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; }
.res-espera { margin-top: 12px; }
.res-w { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.res-w-av { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-light); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.res-w-t { flex: 1; min-width: 160px; font-size: 14px; }
.res-w-b { display: flex; gap: 6px; }
.res-w-b .btn-primary, .res-w-b .btn-secondary { padding: 7px 12px; font-size: 13px; text-decoration: none; }
.res-ficha { padding: 16px; position: sticky; top: 12px; }
.res-f-head { display: flex; align-items: center; gap: 10px; }
.res-f-head h3 { margin: 0; flex: 1; font-size: 20px; color: var(--brand); }
.res-f-cerrar { border: 0; background: var(--accent-soft); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--muted); font-weight: 800; }
.res-f-tel { display: inline-block; color: var(--muted); margin: 2px 0 10px; text-decoration: none; }
.res-f-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.res-f-tiles div { background: var(--bg); border-radius: 12px; padding: 8px; text-align: center; }
.res-f-tiles small { display: block; color: var(--muted); font-size: 11.5px; } .res-f-tiles b { font-size: 18px; color: var(--brand); }
.res-f-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-f-acc .res-f-grande { grid-column: 1 / -1; padding: 13px; font-size: 15px; }
.res-f-acc .res-rojo { color: #b3261e; }
.res-f-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.res-f-wa { display: flex; gap: 8px; flex-wrap: wrap; }
.res-f-wa a { text-decoration: none; padding: 8px 12px; font-size: 13.5px; }
.res-f-nota { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.res-f-cli { border: 1px solid var(--border); border-radius: 12px; padding: 4px 12px; }
.res-f-cli div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border-soft); font-size: 14px; }
.res-f-cli div:last-child { border: 0; } .res-f-cli span { color: var(--muted); } .res-f-cli .rojo { color: #b3261e; }
.res-f-hist { font-size: 12.5px; color: var(--muted); max-height: 140px; overflow: auto; }
.res-ficha-movil { max-height: 88vh; overflow: auto; width: min(520px, 96vw); }
.res-elegir { width: min(640px, 96vw); }
.res-elegir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; max-height: 50vh; overflow: auto; }
.res-elegir-grid button { border: 2px solid #4c9a5b; background: #fff; border-radius: 12px; padding: 10px 4px; cursor: pointer; font-family: inherit; }
.res-elegir-grid button b { display: block; font-size: 15px; } .res-elegir-grid button small { color: var(--muted); font-size: 11.5px; }
.res-elegir-grid button.ocupada { border-color: #c0392b; opacity: .7; }
.res-elegir-grid button.pequena { opacity: .55; }
.res-elegir-grid button.reservada { border-color: #d59b2c; }
.res-elegir-grid button.propuesta { box-shadow: 0 0 0 3px #bfe5c5; }
.res-mr-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/* línea de tiempo */
.res-tl { position: relative; overflow-x: auto; }
.res-tl-fila, .res-tl-horas { display: flex; align-items: center; min-height: 34px; border-bottom: 1px solid var(--border-soft); }
.res-tl-mesa { width: 90px; flex: none; font-weight: 800; color: var(--brand); font-size: 13px; }
.res-tl-mesa small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.res-tl-pista { position: relative; flex: 1; height: 30px; min-width: 520px; }
.res-tl-horas .res-tl-pista span { position: absolute; top: 8px; font-size: 11px; color: var(--muted); transform: translateX(-50%); }
.res-tl-cuerpo { position: relative; }
.res-barra { position: absolute; top: 3px; height: 24px; border-radius: 7px; border: 0; background: #d9ecd9; color: #1f5e24; font-size: 11.5px; font-weight: 800; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 6px; cursor: pointer; font-family: inherit; text-align: left; }
.res-barra.pendiente { background: #eee9e4; color: var(--muted); } .res-barra.sentada { background: var(--brand); color: #fff; }
.res-barra.terminada { background: #f1ede9; color: #a39990; } .res-barra.tarde { background: #ffe4a8; color: #7a4a00; }
.res-tl-ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }
/* nueva reserva */
.res-nueva { width: min(1000px, 97vw); max-height: 94vh; overflow: auto; padding: 18px 20px; }
.res-n-head { display: flex; align-items: center; justify-content: space-between; } .res-n-head h3 { margin: 0; color: var(--brand); }
.res-n-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; }
.res-n-lbl { display: block; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .04em; margin: 12px 0 6px; text-transform: uppercase; }
.res-n-lbl small { text-transform: none; font-weight: 600; letter-spacing: 0; }
.res-nueva input[type="text"], .res-nueva input[type="tel"] { width: 100%; margin-bottom: 6px; }
.res-n-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.res-n-chips button { border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 14px; color: var(--text); cursor: pointer; font-family: inherit; min-width: 42px; }
.res-n-chips button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.res-n-chips input { width: 90px; } .res-n-chips input[type="date"] { width: 150px; }
.res-n-cli { background: #e8f5e9; border: 1px solid #b9dfbd; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; margin-bottom: 4px; }
.res-n-cli.rojo { background: #fde8e6; border-color: #f2b8b3; }
.res-n-turno small { font-weight: 800; color: var(--muted); font-size: 12px; }
.res-n-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.res-n-horas button { border: 1.5px solid #bfe5c5; background: #fff; border-radius: 10px; padding: 6px 2px; cursor: pointer; font-family: inherit; }
.res-n-horas button b { display: block; font-size: 15px; } .res-n-horas button small { font-size: 10.5px; color: var(--green); }
.res-n-horas button.poco { border-color: #f0c96b; } .res-n-horas button.poco small { color: #9a5b00; }
.res-n-horas button.lleno { border-color: #f2b8b3; background: #fff7f6; } .res-n-horas button.lleno small { color: #b3261e; }
.res-n-horas button.pasado { opacity: .45; text-decoration: line-through; border-color: var(--border); cursor: default; }
.res-n-horas button.on { background: var(--brand); border-color: var(--brand); } .res-n-horas button.on b, .res-n-horas button.on small { color: #fff; }
.res-n-otra { font-size: 13px; color: var(--muted); }
.res-n-mesa { border: 2px solid var(--border); border-radius: 14px; padding: 10px 14px; position: relative; }
.res-n-mesa.ok { border-color: #4c9a5b; background: #f3faf3; }
.res-n-mesa b { font-size: 20px; color: var(--brand); display: block; } .res-n-mesa small { color: var(--muted); }
.res-n-mesa .btn-link { position: absolute; right: 10px; top: 10px; }
.res-n-res { background: var(--bg); border-radius: 12px; padding: 6px 12px; }
.res-n-res div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.res-n-res div:last-child { border: 0; } .res-n-res span { color: var(--muted); }
.res-n-est { margin: 12px 0; }
.res-n-guardar { width: 100%; padding: 14px; font-size: 16px; margin-top: 6px; }
.res-error { color: #b3261e; font-weight: 700; margin: 6px 0; }
/* plano de mesas */
.table-card.reserved, .table-chip.reserved { border-color: #d59b2c !important; background: #fffaf0; }
.table-res-badge { display: block; font-size: 11px; font-weight: 800; color: #8a5a00; background: #fff1d0; border-radius: 6px; padding: 1px 6px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.table-res-badge.tarde { background: #ffd89a; color: #7a3a00; }
/* ajustes */
.res-aj { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.res-aj .card { margin: 0; } .res-aj h3 { margin-top: 0; }
.res-aj-turno { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.res-aj-turno input[type="text"] { width: 110px; } .res-aj-turno input[type="time"] { width: 110px; }
.res-aj-dias, .res-aj-mesas { display: flex; flex-wrap: wrap; gap: 4px; }
.res-aj-dias button, .res-aj-mesas button { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 5px 9px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.res-aj-dias button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.res-aj-mesas button.on { background: #fde8e6; color: #b3261e; border-color: #f2b8b3; }
@media (max-width: 980px) {
  .res-cols, .res-n-cols, .res-aj { grid-template-columns: 1fr; }
  .res-cols .res-ficha { display: none; }
  .res-kpis { grid-template-columns: repeat(3, 1fr); }
  .res-kpis > div:nth-child(n+4) { display: none; }
  .res-acc { margin-left: 0; width: 100%; } .res-acc button { flex: 1; }
  .res-seg { order: 3; }
}
.zone-res-mark { margin-left: 6px; font-size: 11.5px; font-weight: 800; background: #fff1d0; color: #8a5a00; border-radius: 99px; padding: 1px 7px; }
.category-tab.active .zone-res-mark { background: #fff; }
.res-f-acc .btn-green, .res-mr-btns .btn-green { background: var(--green); color: #fff; border: 0; border-radius: 12px; font-weight: 800; cursor: pointer; }
.res-dia > button { line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.res-w-b button, .res-w-b a { white-space: nowrap; }
.res-top .res-acc .btn-primary, .res-top .res-acc .btn-secondary { padding: 10px 16px; }
.res-nueva, .res-elegir, .res-ficha-movil { text-align: left; }
.res-nueva input[type="text"], .res-nueva input[type="tel"], .res-nueva input[type="number"], .res-nueva input[type="date"], .res-nueva input[type="time"],
.tpv-dlg-box input#rwNombre, .tpv-dlg-box input#rwTel, .tpv-dlg-box input#rwNota { letter-spacing: normal; text-align: left; font-size: 15px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; height: auto; width: 100%; margin-bottom: 6px; }
.res-nueva .res-n-chips input { width: 96px; margin: 0; } .res-nueva .res-n-chips input[type="date"] { width: 160px; }
.res-nueva .res-n-lbl { text-align: left; }

/* ---------------------------------------------------------------------------
   Carta digital y pedido desde la mesa (30-09-2026): js/carta-qr.js
   --------------------------------------------------------------------------- */
.cqr-dock { position: fixed; right: 14px; bottom: 14px; z-index: 900; display: flex; flex-direction: column; gap: 8px; width: 340px; max-width: calc(100vw - 16px); pointer-events: none; }
.cqr-av { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 26px rgba(40, 25, 15, .22); border-left: 5px solid var(--accent); cursor: pointer; animation: cqrEntra .25s ease; }
.cqr-av .cqr-ic { font-size: 22px; }
.cqr-av .cqr-tx { flex: 1; min-width: 0; line-height: 1.25; }
.cqr-av .cqr-tx b { display: block; font-family: var(--font-heading); font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cqr-av .cqr-tx small { color: var(--muted); font-size: 12px; font-weight: 700; }
.cqr-av .cqr-btn { border: 0; border-radius: 10px; padding: 9px 12px; font: 800 13px var(--font-heading); background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; }
.cqr-pedido { animation: cqrEntra .25s ease; }
.cqr-llamada { border-left-color: #1565c0; } .cqr-llamada .cqr-btn { background: #1565c0; }
.cqr-solo { border-left-color: var(--green); } .cqr-solo .cqr-btn { background: #e8f3e9; color: var(--green); }
.cqr-mas { pointer-events: auto; align-self: flex-end; background: rgba(58, 42, 30, .85); color: #fff; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 3px 10px; }
@keyframes cqrEntra { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 760px) { .cqr-dock { right: 8px; left: 8px; width: auto; bottom: auto; top: 62px; } }
.table-qr-badge, .table-call-badge { display: block; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 6px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; cursor: pointer; }
.table-qr-badge { background: var(--accent); color: #fff; }
.table-call-badge { background: #1565c0; color: #fff; }
.cqr-modal { width: 480px; }
.cqr-lineas { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: 12px; padding: 6px 12px; }
.cqr-quien { font: 800 12px var(--font-heading); color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 2px; }
.cqr-l { padding: 5px 0; border-bottom: 1px dashed var(--border-soft); font-size: 15px; }
.cqr-l:last-child { border-bottom: 0; }
.cqr-l small { display: block; color: var(--muted); font-size: 12.5px; }
.cqr-l small.cqr-nota { color: #b3261e; font-weight: 700; }
.cqr-nota-ped { margin-top: 8px; background: #fff8e6; border-radius: 10px; padding: 8px 10px; font-weight: 700; }
.cqr-tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-weight: 800; }
.cqr-tot b { font: 800 22px var(--font-heading); color: var(--brand); }
.tpv-dlg-btns .cqr-si { background: var(--green); box-shadow: none; }
/* Ajustes */
.cqr-aj { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cqr-aj .card { margin: 0; } .cqr-aj h3 { margin-top: 0; }
@media (max-width: 900px) { .cqr-aj { grid-template-columns: 1fr; } }
.cqr-off { opacity: .6; }
.cqr-aviso { background: #fff8e6; border: 1px solid #f0dca2; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.cqr-url { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.cqr-url code { background: #f5efe8; border-radius: 8px; padding: 6px 8px; font-size: 13px; word-break: break-all; }
.cqr-mini { width: auto !important; display: inline-block; padding: 8px 14px; font-size: 13px; text-decoration: none; cursor: pointer; }
.cqr-campo { display: block; font-weight: 700; font-size: 13px; margin: 10px 0 0; }
.cqr-campo input { display: block; width: 100%; margin-top: 4px; }
.cqr-logo-row { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.cqr-logo { width: 72px; height: 72px; border-radius: 50%; background: #f1ebe4; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 11px; color: var(--muted); flex: none; }
.cqr-logo img { width: 100%; height: 100%; object-fit: cover; }
.cqr-temas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.cqr-temas button { width: 54px; height: 36px; border-radius: 10px; border: 3px solid transparent; cursor: pointer; }
.cqr-temas button.on { border-color: var(--accent); }
.cqr-color { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.cqr-color input { width: 34px; height: 30px; padding: 0; border: 0; background: none; }
.cqr-color { flex-wrap: wrap; }
.cqr-color input.cqr-hex { width: 84px; height: 30px; padding: 0 6px; border: 1px solid var(--border, #ddd); border-radius: 6px; background: #fff; font: 600 13px ui-monospace, monospace; text-transform: uppercase; }
.cqr-color input.cqr-hex.mal { border-color: #c0392b; }
.cqr-idiomas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; font-weight: 700; }
.cqr-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cqr-botones .btn-secondary, .cqr-botones .btn-primary { width: auto; }
.cqr-modos { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
.cqr-modo { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--border); border-radius: 12px; padding: 9px 12px; cursor: pointer; }
.cqr-modo.on { border-color: var(--accent); background: #fdf3ee; }
.cqr-modo input { margin-top: 3px; }
.cqr-modo b { display: block; font-size: 14px; } .cqr-modo small { color: var(--muted); }
.cqr-horas { margin: 0 0 8px; font-weight: 700; } .cqr-horas input { width: 110px; }
.cqr-sug { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.cqr-sug select { flex: 1; min-width: 0; }
.cqr-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.cqr-mesa { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border-soft); border-radius: 10px; padding: 6px 8px; font-size: 13px; }
.cqr-mesa small { display: block; color: var(--muted); font-size: 11px; }
.cqr-textos { width: 860px; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); display: flex; flex-direction: column; text-align: left; }
.cqr-tx-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cqr-tx-cab h3 { margin: 0; flex: 1; }
.cqr-tx-langs { display: flex; gap: 4px; flex-wrap: wrap; }
.cqr-tx-langs button { border: 1px solid var(--border); background: #fff; border-radius: 99px; padding: 5px 12px; font-weight: 800; cursor: pointer; }
.cqr-tx-langs button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.cqr-tx-lista { overflow-y: auto; flex: 1; }
.cqr-tx-lista h4 { margin: 14px 0 6px; font-family: var(--font-heading); color: var(--brand); }
.cqr-tx-fila { display: grid; grid-template-columns: 200px 1fr 1.4fr; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--border-soft); transition: background .3s; }
.cqr-tx-fila.cqr-guardado { background: #e8f3e9; }
.cqr-tx-orig { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cqr-tx-orig small { display: block; font-weight: 600; }
.cqr-tx-fila textarea { resize: vertical; min-height: 38px; font: inherit; }
@media (max-width: 700px) { .cqr-tx-fila { grid-template-columns: 1fr; } }
.kds-qr-tag { display: inline-block; margin-left: 6px; background: var(--accent); color: #fff; border-radius: 6px; font: 800 11px var(--font-heading); padding: 2px 6px; vertical-align: 3px; }
.zone-qr-mark { margin-left: 6px; font-size: 11.5px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 99px; padding: 1px 7px; }
.cqr-modo input[type="radio"], .cqr-idiomas input[type="checkbox"] { width: auto; flex: none; margin: 3px 0 0; padding: 0; min-height: 0; }
.cqr-idiomas label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cqr-modo > span { flex: 1; }
.cqr-textos input[type="text"], .cqr-textos textarea { width: 100%; letter-spacing: normal; text-align: left; font: 600 14px var(--font-body); padding: 8px 10px; height: auto; min-height: 38px; border: 1px solid var(--border); border-radius: 10px; }
.cqr-items { display: flex; flex-direction: column; gap: 8px; }
.cqr-resumen { display: none; pointer-events: auto; align-self: flex-end; border: 0; border-radius: 99px; padding: 8px 14px; font: 800 13px var(--font-heading); background: #1565c0; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); cursor: pointer; }
.cqr-resumen.urge { background: var(--accent); }
.cqr-resumen span { margin-left: 8px; opacity: .8; }
@media (max-width: 760px) {
  .cqr-dock { top: auto; bottom: 12px; }
  .cqr-resumen { display: block; }
  .cqr-dock:not(.abierto) .cqr-items { display: none; }
  .cqr-dock.abierto .cqr-items { max-height: 60vh; overflow-y: auto; }
}

/* ---- Veri*Factu (02-10-2026): Ajustes → Veri*Factu, Ventas, anular ---- */
.vf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; max-width: 1100px; }
.vf-grid .card, .vf-card { margin: 0 0 16px; }
.vf-card h3 { margin: 0 0 8px; }
.vf-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.vf-head p { margin: 0 0 10px; }
.vf-estado-pill { font-size: 13px; padding: 5px 14px; white-space: nowrap; }
.vf-datos { margin: 8px 0 12px; padding-left: 18px; line-height: 1.55; }
.vf-datos li { margin: 2px 0; }
.vf-mal { color: var(--red); }
.vf-banner { margin: 6px 0 10px; cursor: default; }
.vf-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.vf-botones a.btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }
.vf-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 8px; }
.vf-cifras > div { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; }
.vf-cifras b { display: block; font-family: var(--font-heading); font-size: 22px; }
.vf-cifras span { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.vf-cifras .vf-mal b { color: var(--red); }
.vf-cert-form, .vf-sop-form { display: grid; gap: 10px; margin-top: 10px; }
.vf-cert-form label, .vf-sop-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.vf-cert-form .vf-check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.vf-cert-form .vf-check input { width: auto; }
.vf-soporte { max-width: 1100px; }
.vf-soporte summary { cursor: pointer; padding: 4px 0; }
.vf-soporte .vf-sop-form { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vf-soporte .vf-sop-form .vf-botones { grid-column: 1 / -1; }
.vf-tabla { width: 100%; font-size: 13px; }
.vf-tabla td.vf-err { color: var(--muted); max-width: 320px; }
.vf-card .table-wrap { overflow-x: auto; }
.vf-chip { margin-left: 6px; font-size: 11px; padding: 2px 8px; white-space: nowrap; }
.vf-venta { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); display: grid; gap: 6px; font-size: 13.5px; }
.vf-venta-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vf-venta-fila .hint-text { flex-basis: 100%; margin: 0; }
.vf-modos { display: grid; gap: 10px; margin-bottom: 8px; }
.vf-modo { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--text); cursor: pointer; font: inherit; }
.vf-modo:hover, .vf-modo:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.vf-modo small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.vf-decl { max-width: 760px; width: calc(100vw - 32px); }
.vf-decl-txt { max-height: 60vh; overflow-y: auto; font-size: 13.5px; line-height: 1.5; padding-right: 6px; }
.vf-decl-txt p { margin: 0 0 10px; }
@media (max-width: 600px) {
  .vf-grid { grid-template-columns: 1fr; }
  .vf-cifras { grid-template-columns: repeat(2, 1fr); }
  .vf-head { flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Ventas que descuentan stock: vincular producto ↔ artículo (js/vincular.js, 2-10-2026)
   --------------------------------------------------------------------------- */
.vin-cab { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.vin-cab-tx { flex: 1 1 380px; }
.vin-cab h3 { margin: 0 0 6px; }
.vin-estado { margin: 8px 0 0; font-weight: 700; font-size: 14px; }
.vin-estado.bien { color: var(--green); } .vin-estado.mal { color: #9a5b00; }
.vin-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.vin-kpis div { background: #faf6f1; border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 14px; min-width: 120px; }
.vin-kpis span { display: block; font: 800 22px var(--font-heading); color: var(--brand); }
.vin-kpis small { color: var(--muted); font-weight: 700; }
.vin-per { align-items: center; gap: 12px; flex-wrap: wrap; }
.vin-per .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; }
.vin-per .gx-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.vin-fechas { font-weight: 700; } .vin-fechas input { width: auto; }
.vin-tabla td { vertical-align: middle; }
.vin-acc { white-space: nowrap; text-align: right; }
.vin-acc .vin-btn { width: auto; padding: 8px 14px; margin-right: 6px; }
.vin-vacio { color: var(--green); font-weight: 800; margin: 6px 0; }
.vin-modal { width: 560px; }
.vin-lineas { border: 1px solid var(--border-soft); border-radius: 12px; padding: 4px 10px; margin: 10px 0; }
.vin-l { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); }
.vin-l:last-child { border-bottom: 0; }
.vin-l-n { flex: 1; min-width: 0; } .vin-l-n small { display: block; color: var(--muted); font-size: 12px; }
.vin-l .vin-q { width: 84px; text-align: right; letter-spacing: normal; font-size: 16px; padding: 8px; }
.vin-u { width: 26px; font-weight: 700; color: var(--muted); }
.vin-x { color: var(--red); font-weight: 800; }
.vin-nada { color: var(--muted); margin: 8px 0; }
.vin-busca input { width: 100%; letter-spacing: normal; text-align: left; }
.vin-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.vin-ops button[data-add] { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.vin-ops button[data-add] small { color: var(--muted); font-weight: 600; }
.vin-crear { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; }
.vin-crear select { width: auto; } .vin-crear .btn-secondary { width: auto; padding: 6px 12px; }
.vin-pie { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.vin-pie .vin-sp { flex: 1; }
.vin-pie .btn-primary, .vin-pie .btn-secondary { width: auto; padding: 10px 18px; }
.pr-vin-row { margin: 10px 0 0; }
.pr-vin { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; background: #f5f0ea; border-radius: 10px; padding: 7px 10px; }
.pr-vin.ok { background: #eef6ef; }
.pr-vin.falta { background: #fff4dd; color: #7a4a00; font-weight: 700; }
.pr-vin .pr-vin-btn { width: auto; padding: 6px 12px; font-size: 13px; }
@media (max-width: 700px) {
  .vin-tabla thead { display: none; }
  .vin-tabla, .vin-tabla tbody { display: block; }
  .vin-tabla tr { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
  .vin-tabla td { border: 0 !important; padding: 0 !important; }
  .vin-tabla td:first-child { grid-column: 1 / -1; }
  .vin-tabla td:nth-child(2)::after { content: ' uds'; color: var(--muted); font-weight: 600; }
  .vin-tabla td:nth-child(4) { display: none; }
  .vin-tabla td.vin-acc { grid-column: 1 / -1; text-align: left; margin-top: 6px; }
  .vin-kpis div { min-width: 0; flex: 1 1 40%; }
}

/* Gastos → Ajustes → Qué cuenta stock (js/gastos-stock-familias.js, 2-10-2026) */
.gsf-plant { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; }
.gsf-pl { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 13px; cursor: pointer; }
.gsf-pl.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.gsf-pdesc { margin-top: 2px; }
.gsf-arbol { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; margin: 8px 0; }
.gsf-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border-soft); background: #fff; }
.gsf-fila:last-child { border-bottom: 0; }
.gsf-fila.n1 { background: #faf6f1; }
.gsf-fila.n2 { padding-left: 30px; } .gsf-fila.n3 { padding-left: 54px; }
.gsf-fila.n3 b { font-weight: 600; }
.gsf-nom { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.gsf-nom small { color: var(--muted); font-size: 12px; }
.gsf-abrir { border: 0; background: none; width: 22px; font-size: 14px; cursor: pointer; color: var(--brand); padding: 0; }
.gsf-esp { width: 22px; display: inline-block; }
.gsf-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: none; }
.gsf-seg button { border: 0; background: #fff; padding: 6px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--muted); border-left: 1px solid var(--border-soft); }
.gsf-seg button:first-child { border-left: 0; }
.gsf-seg button.on[data-m="stock"] { background: var(--green); color: #fff; }
.gsf-seg button.on[data-m="gasto"] { background: #8a7b6e; color: #fff; }
.gsf-seg button.on[data-m="preguntar"] { background: #f0c96b; color: #5a3a00; }
.gsf-seg button.hered[data-m="stock"] { background: #e6f2e7; color: var(--green); }
.gsf-seg button.hered[data-m="gasto"] { background: #efebe7; color: #6b5e53; }
.gsf-seg button.hered[data-m="preguntar"] { background: #fdf3d9; color: #7a5600; }
@media (max-width: 700px) { .gsf-fila { flex-direction: column; align-items: flex-start; } .gsf-fila.n2, .gsf-fila.n3 { padding-left: 18px; } }
.gx-por-fam { display: inline-block; background: #efe7de; color: #6b5e53; border-radius: 6px; padding: 0 6px; font-size: 11.5px; font-weight: 700; margin-left: 4px; }
.gx-stock > .gx-por-fam { align-self: flex-start; width: auto; }

/* Mejora 3 · Equivalencia que no cuadra (revisión de compras) y formatos de compra (ficha del artículo) */
.gx-eq-warn { margin-top: 6px; border: 1.5px solid #e0a23b; background: #fff7e8; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.gx-eq-warn ul { margin: 4px 0 6px; padding-left: 18px; }
.gx-eq-warn li { margin: 2px 0; }
.gx-eq-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gx-eq-btns button { min-height: 38px; }
.gx-eq-ok { margin-top: 4px; color: #2e7d32; }
.ing-fmt { display: grid; gap: 6px; }
.ing-fmt-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--border, #e5ddd3); border-radius: 8px; }
.ing-fmt-row .ing-fmt-eq { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ing-fmt-row input { width: 74px; }
.ing-fmt-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ing-fmt-add select, .ing-fmt-add input { min-height: 36px; }
.ing-fmt-add input[data-n="unit_doc"] { width: 90px; }
.ing-fmt-add input[data-n="factor"] { width: 80px; }
@media (max-width: 600px) {
  .ing-fmt-row { grid-template-columns: 1fr auto; }
  .ing-fmt-row .ing-fmt-x { grid-column: 2; grid-row: 1; }
  .ing-fmt-row .ing-fmt-eq { grid-column: 1 / -1; }
}
.gx-eq-btns .btn-primary, .gx-eq-btns .btn-secondary { padding: 6px 12px; font-size: 14px; min-height: 38px; width: auto; border-radius: 8px; }

/* Mejora 4 · «¿Es X?» (nombre parecido sin confirmar) y lo aprendido del proveedor */
.gx-sug { margin-top: 6px; border: 1.5px solid #8fb3d9; background: #eef5fc; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; display: grid; gap: 6px; }
.gx-sug-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-sug-btns .btn-primary, .gx-sug-btns .btn-secondary { padding: 6px 12px; font-size: 14px; min-height: 38px; width: auto; border-radius: 8px; }
.sup-mem-row td { vertical-align: middle; }
.sup-mem-row select { min-width: 210px; max-width: 280px; min-height: 34px; }
.gx-sug-q { font-size: 14.5px; }

/* Mejora 5 · No cuadra con el total del papel: línea culpable en rojo */
.gx-dv-line.gx-dv-line-bad { border: 2px solid var(--red, #c62828); background: #fff5f5; }
.gx-culpa { background: #fdecec; color: #8e1c1c; border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.gx-culpa .btn-primary { padding: 5px 12px; font-size: 13.5px; min-height: 34px; width: auto; border-radius: 8px; }
.gx-desc { border: 2px solid var(--red, #c62828); background: #fff5f5; border-radius: 10px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 8px; font-size: 14px; }
.gx-desc-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gx-desc-btns .btn-secondary { padding: 6px 12px; font-size: 14px; min-height: 38px; width: auto; }
.gx-desc-iva tr.gx-dv-bad td { color: var(--red, #c62828); font-weight: 700; }
.gx-ch-row.gx-ch-auto .gx-ch-sub { font-style: italic; }

/* Mejora 7 · Duplicados con un clic */
.gx-dup-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.gx-dup-btns .btn-primary, .gx-dup-btns .btn-secondary { padding: 6px 12px; font-size: 14px; min-height: 38px; width: auto; border-radius: 8px; }

/* Mejora 8 · Motivos de cada pendiente y «Aprobar los perfectos» */
.gx-motivos-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.gx-motivos-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gx-mots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gx-mot { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: 12.5px; font-weight: 700; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; }
.gx-mot-bloquea { background: #fdecec; color: #a32020; border-color: #f3c4c4; }
.gx-mot-grave { background: #fff0e6; color: #a34a00; border-color: #f5cfb0; }
.gx-mot-aviso { background: #fff7e0; color: #7a5a00; border-color: #efdca0; }
.gx-mot-info { background: #eaf2fb; color: #1f4f80; border-color: #c8dcf2; }
.gx-mot-ok { background: #e8f5e9; color: #1e6b2a; border-color: #bfe0c3; }
.gx-mot-mas { background: #f0ebe6; color: #6b5e53; }
.gx-mot-btn { cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 5px 11px; min-height: 34px; }
.gx-mot-btn b { font-weight: 800; }
.gx-mot-btn.on { outline: 2px solid currentColor; outline-offset: 1px; }
.gx-aprobar-perfectos { width: auto; padding: 8px 16px; min-height: 40px; }
@media (max-width: 700px) { .gx-aprobar-perfectos { width: 100%; } }

/* Mejora 9 · Visor: zoom con los dedos, arrastrar y dónde está cada línea */
.vz-stage { position: relative; width: 100%; height: 100%; min-height: 300px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.vz-stage:active { cursor: grabbing; }
.vz-sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: var(--shadow-card); background: #fff; will-change: transform; }
.vz-sheet.vz-anim { transition: transform .28s ease; }
.vz-sheet canvas { display: block; }
.vz-cajas { position: absolute; inset: 0; pointer-events: none; }
.vz-caja { position: absolute; border: 4px solid rgba(25, 118, 210, .35); background: rgba(25, 118, 210, .06); border-radius: 8px; }
.vz-caja span { position: absolute; left: -4px; top: 0; transform: translateY(-100%); background: rgba(25, 118, 210, .75); color: #fff; font-size: 26px; font-weight: 800; line-height: 1; padding: 4px 10px; border-radius: 10px 10px 0 0; }
.vz-caja.sobre { border-color: rgba(230, 140, 0, .9); background: rgba(255, 193, 7, .18); }
.vz-caja.on { border: 8px solid #e65100; background: rgba(255, 193, 7, .28); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .12); }
.vz-caja.on span { background: #e65100; }
.vz-cargando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#rvCajas.on { background: var(--brand); color: #fff; }
.gx-dv-line.gx-line-sel { outline: 3px solid #e65100; outline-offset: -1px; }
.gx-ver-papel { font-size: 12.5px; padding: 0; }
@media (min-width: 901px) { .gx-dv-line[data-line] { cursor: pointer; } .gx-dv-line[data-line] input, .gx-dv-line[data-line] select { cursor: auto; } }
.vz-caja span { display: none; }
.vz-caja.on span, .vz-caja.sobre span { display: block; }

/* Mejora 10 · Conteo rápido de una zona y deshacer */
.alm-empezar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.alm-zona-rapida { display: inline-flex; gap: 6px; align-items: center; }
.alm-zona-rapida select { width: auto; min-height: 40px; }
.ar-zona-todo { border-width: 2px; }
.ar-zona-todo small { display: block; font-weight: 400; }
.ar-linea-in select[data-c="fmt"] { max-width: 140px; font-size: 13px; padding: 4px; min-height: 34px; }
.ar-seg { margin-left: 6px; }
/* Con varias cajas posibles, en el móvil el nombre arriba y las casillas debajo */
@media (max-width: 600px) {
  .ar-linea.ar-linea-cajas { flex-wrap: wrap; }
  .ar-linea.ar-linea-cajas .ar-linea-nom { flex: 1 1 100%; }
  .ar-linea.ar-linea-cajas .ar-linea-in { flex: 1 1 100%; justify-content: flex-end; }
}

/* Lo que no se sirve algunos días (Ajustes → Funciones) */
.aj-descanso { overflow-x: auto; margin-bottom: 8px; }
.aj-desc-tabla { border-collapse: collapse; font-size: 13.5px; }
.aj-desc-tabla th, .aj-desc-tabla td { padding: 5px 7px; text-align: center; border-bottom: 1px solid var(--border, #eee); }
.aj-desc-tabla td:first-child { text-align: left; font-weight: 600; padding-right: 12px; }
.aj-desc-tabla .hoy { background: color-mix(in srgb, var(--primary, #6b4226) 8%, transparent); }
.aj-desc-tabla input { width: 18px; height: 18px; }

/* Pedidos para llevar: por días y SumUp */
.cd-dias { border-collapse: collapse; font-size: 13.5px; margin: 4px 0; }
.cd-dias th, .cd-dias td { padding: 5px 6px; text-align: center; border-bottom: 1px solid var(--border, #eee); }
.cd-dias td:first-child { text-align: left; font-weight: 600; }
.cd-dias input[type=checkbox] { width: 18px; height: 18px; }
.cd-dias input[type=time] { width: 96px; padding: 4px; }
.cd-sumup-fila { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.cd-sumup-fila input { flex: 1; min-width: 180px; }

/* Datáfono SumUp Solo del reparto (05-10-2026, js/solo.js) */
.oo-card .kds-card-actions .oo-solo-btn { flex: 2 1 0; padding: 0 8px; font-weight: 800; white-space: nowrap; background: #fff4d6; border-color: #e0b84a; color: #6b4a00; }
.solo-box { text-align: center; }
.solo-box h3 { margin: 0 0 6px; }
.solo-importe { font-size: 44px; font-weight: 800; line-height: 1.1; margin: 4px 0 2px; color: var(--text, #3b2a20); }
.solo-quien { margin: 0 0 14px; }
.solo-estado { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 700; padding: 14px 12px; border-radius: 12px; background: #f6f1ea; }
.solo-estado .solo-dot { width: 14px; height: 14px; border-radius: 50%; background: #c9a227; flex: 0 0 auto; animation: soloLatido 1s ease-in-out infinite; }
.solo-estado[data-e="ok"] { background: #e3f4e6; color: #1b5e20; font-size: 24px; }
.solo-estado[data-e="ok"] .solo-dot, .solo-estado[data-e="mal"] .solo-dot { display: none; }
.solo-estado[data-e="mal"] { background: #fdecea; color: #b71c1c; }
.solo-sub { min-height: 20px; margin: 10px 0 14px; }
.solo-box .tpv-dlg-btns { justify-content: center; }
@keyframes soloLatido { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .solo-estado .solo-dot { animation: none; } }
.solo-aj .solo-paso { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid #efe4d8; border-radius: 10px; background: #fffaf4; }
.solo-aj .solo-paso small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.solo-aj .solo-ok { color: #1b5e20; font-weight: 700; font-size: 13px; margin-left: 6px; }
.solo-aj .solo-info { font-size: 13px; margin-top: 6px; min-height: 0; }
.solo-aj .solo-nota { display: block; color: var(--muted); font-size: 12.5px; margin-top: 6px; }

/* ===========================================================================
   Pedidos online · tablero nuevo (05-10-2026)
   =========================================================================== */
#view-pedidos-online .oo2-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
#view-pedidos-online .oo2-titulo { margin: 0; flex: none; }
.oo2-busca { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; color: var(--muted); }
.oo2-busca input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 15px; background: transparent; color: var(--text); }
.oo2-nuevo { height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: var(--shadow-accent); white-space: nowrap; }
.oo2-nuevo:hover { background: var(--accent-dark); }
.oo2-ritmo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.oo2-ritmo-izq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.oo2-estado { display: inline-flex; align-items: center; gap: 8px; background: #e7f4e8; color: #1f5e23; font-weight: 800; font-size: 14px; padding: 8px 14px; border-radius: 99px; }
.oo2-estado i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.oo2-estado-pausa { background: #fff3d6; color: #7a4a00; }
.oo2-estado-off { background: #efe9e3; color: var(--muted); }
.oo2-rbtn { height: 40px; padding: 0 14px; border: 1px solid var(--border); background: var(--card); border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px; color: var(--text); cursor: pointer; }
.oo2-rbtn-on { background: #fff3d6; border-color: #e9cf7c; color: #7a4a00; }
.oo2-cifras { display: flex; gap: 20px; font-size: 12.5px; color: var(--muted); }
.oo2-cifra { display: flex; flex-direction: column; line-height: 1.2; }
.oo2-cifra b { font-family: var(--font-heading); font-size: 18px; color: var(--text); }
.oo2-cifra.oo2-ambar b { color: #a15c00; }
.oo2-tabs { display: none; }
.oo2-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.oo2-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.oo2-col-tit { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 15px; color: var(--brand); }
.oo2-col-tit span { background: var(--brand); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 9px; }
.oo2-col-nuevos .oo2-col-tit { color: #b3261e; } .oo2-col-nuevos .oo2-col-tit span { background: var(--red); }
.oo2-col-listos .oo2-col-tit { color: #1d3f91; } .oo2-col-listos .oo2-col-tit span { background: #1d3f91; }
.oo2-col-hechos .oo2-col-tit { color: #1f5e23; } .oo2-col-hechos .oo2-col-tit span { background: var(--green); }
.oo2-vacio { font-size: 13px; color: var(--muted); padding: 14px; border: 1px dashed var(--border); border-radius: 14px; text-align: center; }
.oo2-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; }
.oo2-card:hover { box-shadow: var(--shadow-card); }
.oo2-card:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 2px; }
.oo2-card.oo2-nuevos { border: 2px solid var(--red); box-shadow: 0 6px 16px rgba(198, 40, 40, .14); }
.oo2-card.oo2-justo { border: 2px solid #e0a100; }
.oo2-card.oo2-tarde { border: 2px solid var(--red); }
.oo2-card.oo2-cancelado { opacity: .6; }
.oo2-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }
.oo2-origen { padding: 3px 9px; border-radius: 99px; background: #e8eefc; color: #1d3f91; white-space: nowrap; font-size: 12px; font-weight: 800; }
.oo2-o-telefono, .oo2-o-encargo { background: var(--accent-soft); color: var(--brand); }
.oo2-o-whatsapp { background: #e6f5ee; color: #11603f; }
.oo2-o-qr { background: #efe9e3; color: var(--brand); }
.oo2-cuando { color: var(--muted); text-align: right; }
.oo2-rojo { color: #b3261e !important; font-weight: 800; }
.oo2-hora { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.oo2-grande { font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--text); }
.oo2-txt { font-size: 13px; font-weight: 700; color: var(--muted); }
.oo2-tarde .oo2-txt { color: #b3261e; }
.oo2-justo .oo2-txt { color: #7a4a00; }
.oo2-cliente { font-weight: 800; font-size: 15px; }
.oo2-chip { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.oo2-chip-hab { background: var(--accent-soft); color: var(--brand); }
.oo2-chip-nuevo { background: #e8eefc; color: #1d3f91; }
.oo2-dir { font-size: 13px; color: var(--muted); }
.oo2-lineas { font-size: 14px; line-height: 1.45; border-top: 1px dashed var(--border); padding-top: 6px; }
.oo2-linea em { color: var(--muted); font-style: normal; }
.oo2-extras { font-size: 12px; color: var(--muted); padding-left: 18px; }
.oo2-nota { font-size: 13px; color: #7a4a00; background: #fff8e6; border-radius: 10px; padding: 6px 10px; }
.oo2-pago { font-size: 13px; font-weight: 800; padding: 6px 10px; border-radius: 10px; background: #efe9e3; color: var(--brand); }
.oo2-pagado { background: #e7f4e8; color: #1f5e23; }
.oo2-cobrar { background: #fff3d6; color: #7a4a00; }
.oo2-acciones { display: flex; flex-direction: column; gap: 6px; }
.oo2-btn { min-height: 46px; border: 0; border-radius: 12px; color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; padding: 6px 12px; background: var(--brand); }
.oo2-btn-ok { background: var(--green); }
.oo2-btn-cocina { background: var(--brand); }
.oo2-btn-reparto { background: #1d3f91; }
.oo2-btn-cobrar { background: var(--accent); }
.oo2-btn:disabled { opacity: .6; cursor: default; }
.oo2-btn-grande { min-height: 54px; font-size: 17px; }
.oo2-minis { display: flex; gap: 6px; flex-wrap: wrap; }
.oo2-mini { min-width: 44px; height: 40px; padding: 0 10px; border: 1px solid var(--border); background: var(--card); border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.oo2-mini.oo2-wa { background: #e6f5ee; border-color: #b9dcc6; color: #11603f; font-size: 14px; }
.oo2-lista, .oo2-historial { display: flex; flex-direction: column; gap: 6px; }
.oo2-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.oo2-fila-total { font-weight: 800; white-space: nowrap; }
.oo2-prog { margin-top: 6px; border: 1px dashed #d8c7b6; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #fbf8f4; }
.oo2-prog-tit { font-weight: 800; font-size: 13px; color: var(--brand); }
.oo2-pie { margin-top: 14px; }
.oo2-reparto { background: #1d3f91; color: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.oo2-reparto[hidden] { display: none; }
.oo2-rep-tit { font-size: 12px; font-weight: 800; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.oo2-rep-nombre { font-family: var(--font-heading); font-weight: 700; font-size: 19px; }
.oo2-rep-cobro { background: rgba(255, 255, 255, .14); border-radius: 10px; padding: 8px 10px; }
.oo2-rep-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.oo2-rep-b { height: 46px; border-radius: 12px; border: 0; background: #fff; color: #1d3f91; font: inherit; font-weight: 800; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.oo2-rep-ok { background: var(--green); color: #fff; }
/* Ficha */
.oo2-ficha { width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; box-sizing: border-box; background: var(--bg); text-align: left; }
.oo2-ficha-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.oo2-ficha-rec { flex: 1; font-size: 13px; color: var(--muted); }
.oo2-x { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); font-size: 16px; cursor: pointer; color: var(--muted); flex: none; }
.oo2-pasos { display: flex; gap: 2px; margin-bottom: 12px; }
.oo2-paso { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); background: #efe4d8; padding: 8px 4px; }
.oo2-paso:first-child { border-radius: 10px 0 0 10px; } .oo2-paso:last-child { border-radius: 0 10px 10px 0; }
.oo2-paso.hecho { background: #d9cbbd; color: var(--brand); }
.oo2-paso.ahora { background: var(--brand); color: #fff; font-weight: 800; }
.oo2-paso-mal { background: var(--red); color: #fff; border-radius: 10px !important; }
.oo2-ficha-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oo2-ficha-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.oo2-caja { background: var(--card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.oo2-cambiar-hora { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.oo2-cli { display: flex; align-items: center; gap: 10px; }
.oo2-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; flex: none; }
.oo2-cli-n { flex: 1; display: flex; flex-direction: column; min-width: 0; } .oo2-cli-n span { font-size: 13px; color: var(--muted); }
.oo2-cli-hist { font-size: 13px; background: var(--accent-soft); color: var(--brand); border-radius: 10px; padding: 8px 10px; }
.oo2-cli-hist:empty { display: none; }
.oo2-ficha-dir { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; border-top: 1px dashed var(--border); padding-top: 8px; flex-wrap: wrap; }
.oo2-fl { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.oo2-fl small { display: block; font-size: 12px; color: var(--muted); }
.oo2-fl-total { font-family: var(--font-heading); font-weight: 700; font-size: 20px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.oo2-fl-gris { color: var(--muted); font-size: 14px; }
.oo2-hist { font-size: 13px; color: var(--muted); line-height: 1.6; gap: 0; }
.oo2-hist-t { font-weight: 800; color: var(--text); margin-bottom: 2px; }
.oo2-ficha-pie { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.oo2-ficha-pie .oo2-btn-grande { flex: 1 1 260px; }
.oo2-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); }
.oo2-in { height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; font: inherit; font-size: 15px; color: var(--text); background: var(--card); box-sizing: border-box; min-width: 0; }
.oo2-quien { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.oo2-quien button { min-height: 46px; }
.oo2-dlg-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
/* Nuevo pedido */
.oo2-np { width: min(1290px, calc(100vw - 16px)); height: min(800px, calc(100vh - 16px)); padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); text-align: left; }
.oo2-np-cab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--card); border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.oo2-np-cab h3 { margin: 0; font-family: var(--font-heading); color: var(--brand); font-size: 21px; }
.oo2-np-cab .oo2-x { margin-left: auto; }
.oo2-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.oo2-seg button { min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--card); font: inherit; font-weight: 700; font-size: 13.5px; color: var(--text); cursor: pointer; }
.oo2-seg button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 800; }
.oo2-seg-2, .oo2-seg-3 { display: grid; gap: 6px; } .oo2-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oo2-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oo2-seg-2 button, .oo2-seg-3 button { border-radius: 10px; min-height: 46px; }
.oo2-np-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 330px; }
.oo2-np-cli, .oo2-np-prod, .oo2-np-cesta { padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
.oo2-np-cli { border-right: 1px solid var(--border-soft); }
.oo2-np-cesta { background: var(--card); border-left: 1px solid var(--border-soft); }
.oo2-paso-t { font-size: 13px; font-weight: 800; color: var(--brand); }
.oo2-in-tel { font-size: 20px; font-weight: 700; border: 2px solid var(--brand); height: 50px; }
.oo2-np-clicaja { background: var(--card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.oo2-np-clicaja b { font-size: 16px; color: var(--text); }
.oo2-ok-t { font-size: 12px; font-weight: 800; color: #1f5e23; }
.oo2-np-nota { background: #fff3d6; color: #7a4a00; border-radius: 10px; padding: 6px 10px; }
.oo2-horas { display: flex; flex-wrap: wrap; gap: 6px; }
.oo2-horas button { min-height: 40px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--card); font: inherit; font-weight: 700; font-size: 13px; color: var(--text); cursor: pointer; }
.oo2-horas button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.oo2-otra { display: flex; gap: 6px; } .oo2-otra[hidden] { display: none; }
.oo2-np-busca { display: flex; gap: 10px; align-items: center; } .oo2-np-busca .oo2-in { flex: 1; }
.oo2-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.oo2-cats button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); font: inherit; font-weight: 700; font-size: 13px; color: var(--text); cursor: pointer; }
.oo2-cats button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; }
.oo2-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.oo2-prod { min-height: 86px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--card); font: inherit; text-align: left; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; cursor: pointer; color: var(--text); }
.oo2-prod b { font-size: 14.5px; }
.oo2-prod > span { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.oo2-prod i { font-style: normal; font-weight: 800; color: var(--accent-dark); }
.oo2-prod.on { border: 2px solid var(--accent); }
.oo2-prod.agotado { opacity: .55; }
.oo2-prod-otro { border-style: dashed; background: #fbf8f4; color: var(--brand); }
.oo2-np-resumen { font-size: 13px; font-weight: 800; color: var(--brand); }
.oo2-np-lineas { display: flex; flex-direction: column; gap: 6px; }
.oo2-np-l { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.oo2-np-ln { flex: 1; min-width: 0; } .oo2-np-ln small { display: block; color: var(--muted); font-size: 12px; }
.oo2-np-lp { width: 64px; text-align: right; }
.oo2-qb { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); font-weight: 800; cursor: pointer; }
.oo2-q { min-width: 18px; text-align: center; }
.oo2-np-falta { font-size: 12px; color: var(--muted); }
.oo2-link { border: 0; background: none; color: var(--accent-dark); text-decoration: underline; font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.oo2-pagacon { flex-direction: row; align-items: center; flex-wrap: wrap; } .oo2-pagacon .oo2-in { width: 90px; } .oo2-pagacon[hidden] { display: none; }
.oo2-check { display: flex; align-items: center; gap: 8px; font-size: 13px; } .oo2-check input { width: 20px; height: 20px; }
.oo2-np-cesta .oo2-btn-grande { margin-top: auto; }
.oo2-extras-box { max-width: 560px; text-align: left; }
.oo2-eg { margin-bottom: 10px; } .oo2-eg-t { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.oo2-eg-o { display: flex; flex-wrap: wrap; gap: 6px; }
.oo2-eg-o button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); font: inherit; font-weight: 700; cursor: pointer; color: var(--text); }
.oo2-eg-o button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (max-width: 1180px) {
  .oo2-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oo2-cifras { gap: 14px; }
  .oo2-np-cuerpo { grid-template-columns: 280px minmax(0, 1fr) 300px; }
}
@media (max-width: 980px) {
  .oo2-np-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; overflow: auto; }
  .oo2-np-prod { grid-column: 1 / -1; order: 3; }
  .oo2-np { height: calc(100vh - 16px); }
  .oo2-ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #view-pedidos-online .oo2-titulo { flex: 1; }
  .oo2-nuevo { height: 44px; padding: 0 14px; font-size: 15px; }
  .oo2-busca { order: 3; flex-basis: 100%; }
  .oo2-cifras { width: 100%; justify-content: space-between; }
  .oo2-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: #f3ece4; border-radius: 12px; padding: 4px; margin-bottom: 10px; }
  .oo2-tabs[hidden] { display: none; }
  .oo2-tab { min-height: 42px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-weight: 700; font-size: 13px; color: var(--text); cursor: pointer; }
  .oo2-tab.on { background: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); font-weight: 800; }
  .oo2-tab-nuevos.on { color: #b3261e; }
  .oo2-tablero { grid-template-columns: minmax(0, 1fr); }
  .oo2-col { display: none; } .oo2-col.oo2-col-on { display: flex; }
  .oo2-col-tit { display: none; }
  .oo2-np-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .oo2-np-cli, .oo2-np-prod, .oo2-np-cesta { overflow: visible; border: 0; }
  .oo2-np-prod { order: 0; }
  .oo2-np { width: 100vw; height: 100vh; max-height: none; border-radius: 0; overflow: auto; }
  .oo2-np-cuerpo { display: flex; flex-direction: column; overflow: visible; }
  .oo2-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oo2-ficha { padding: 14px; }
  .oo2-rep-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Las ventanas del tablero no usan las medidas de .modal-box */
.modal-box.oo2-ficha, .modal-box.oo2-np { max-width: none; text-align: left; }
.modal-box.oo2-ficha input, .modal-box.oo2-np input, .oo2-extras-box input, .oo2-quien ~ label input { letter-spacing: normal; text-align: left; margin: 0; width: auto; }
.modal-box.oo2-np .oo2-check input { width: 20px; height: 20px; }
.modal-box.oo2-np .oo2-lbl input, .modal-box.oo2-ficha .oo2-lbl input, .tpv-dlg-box .oo2-lbl input { width: 100%; }
.modal-box .oo2-in { font-size: 15px; letter-spacing: normal; text-align: left; }
.modal-box .oo2-in.oo2-in-tel { font-size: 20px; }
.oo2-qb { padding: 0; font-size: 18px; line-height: 1; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.oo2-np-cab { position: relative; }
@media (max-width: 720px) { .oo2-np-cab { padding-right: 64px; } .oo2-np-cab .oo2-x { position: absolute; top: 10px; right: 10px; } }

/* Pantalla de cocina en el móvil (7-10-2026): botón «← TPV» para volver al
   programa, porque en el móvil se abre en la misma ventana. */
.kds-volver { display: none; }
@media (max-width: 720px) {
  .kds-volver { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.12); color: inherit; font: 700 15px/1 var(--font-heading); text-decoration: none; flex: 0 0 auto; }
}

/* Asistente de teléfono con IA (08-10-2026): avisos «llamad al cliente» y ajustes */
.asis-avisos { position: fixed; right: 12px; bottom: 12px; z-index: 8900; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 24px)); }
.asis-avisos[hidden] { display: none; }
.asis-aviso { background: #fff7e6; color: #3a2a00; border: 2px solid #e65100; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.asis-aviso-t { font-weight: 800; color: #b23c00; font-size: 16px; }
.asis-aviso-t small { display: block; font-weight: 600; color: #6b4a00; font-size: 12px; margin-top: 2px; }
.asis-aviso-q { margin-top: 6px; font-size: 16px; }
.asis-aviso-q a { color: #0d47a1; font-weight: 700; }
.asis-aviso-d { margin-top: 4px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.asis-aviso-b { margin-top: 8px; }
.asis-aviso-b .btn-primary { width: 100%; }
.asis-aviso-mas { text-align: right; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; }
.asis-oferta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--borde, #ddd); }
.asis-oferta select { max-width: 220px; }
.asis-dias { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.asis-dias label { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.asis-urls { margin: 10px 0; }
.asis-urls summary { cursor: pointer; font-weight: 700; }
.asis-urls code { overflow-wrap: anywhere; }
.asis-log { width: 100%; border-collapse: collapse; font-size: 13px; }
.asis-log td { padding: 4px 6px; border-bottom: 1px solid var(--borde, #eee); vertical-align: top; overflow-wrap: anywhere; }
.asis-log td:nth-child(-n+2) { white-space: nowrap; width: 1%; }
.asis-log tr.asis-mal td { color: #b71c1c; }
@media (max-width: 720px) { .asis-avisos { left: 12px; right: 12px; max-width: none; } .asis-oferta select { max-width: 100%; } }

/* «Cada uno paga lo suyo»: forma de pago (14-10-2026) */
.split-metodo { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.split-metodo .split-tk-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split-metodo .split-tk-seg button { min-height: 44px; }

/* =============================================================================
   Auditoría de diseño 14-10-2026 — arreglos de maquetación (los dos aspectos).
   Lo que solo toca al aspecto nuevo va en tema.css, después de «FIN DE LA
   PARTE AUTOMÁTICA».
   ============================================================================= */

/* M-1 · Plano de mesas: la ficha crece si no le cabe el nombre + el total */
.table-chip.barra { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; column-gap: 6px; row-gap: 0; }
.table-chip.barra .table-chip-name { flex-basis: 100%; }
.table-chip-name, .table-chip-total, .table-chip-seats { line-height: 1.15; }

/* M-3 · Nota del pedido: los botones bajan de línea en el móvil */
.modifier-actions { flex-wrap: wrap; }
@media (max-width: 480px) {
  .note-modal-box .modifier-actions > * { flex: 1 1 auto; }
  .note-modal-box .modifier-actions .btn-primary { flex: 1 1 100%; order: -1; }
}

/* M-4 · Dividir cuenta: nombres a la izquierda, sin montarse con el precio */
.split-modal-box { text-align: left; }
.split-line-name { overflow-wrap: anywhere; min-width: 0; }
.split-step { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
@media (max-width: 480px) {
  .split-line { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; align-items: center; }
  .split-line-name { grid-column: 1 / -1; }
}

/* M-5 / M-6 / M-8 · Tiras de botones (fechas, filtros): nunca más anchas que la pantalla */
.range-btns { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.range-btns::-webkit-scrollbar { display: none; }
.range-btns button { flex: 0 0 auto; white-space: nowrap; }
.rec-filtros button { flex: 0 0 auto; }
.gx-period { flex-wrap: wrap; }

/* M-7 · Gastos › Analíticas */
.gini-cols, .gan-cols { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
#ganCont .card { overflow-x: auto; }

/* M-9 · Ajustes › Funciones en el móvil */
@media (max-width: 900px) { .aj-func-cols { grid-template-columns: minmax(0, 1fr); } }

/* M-12 · Almacén › Zonas */
.alm-zona-fila { flex-wrap: wrap; }
.alm-zona-fila input { flex: 1 1 140px; min-width: 0; }

/* M-13 · Fichajes › Jornada de cada persona */
.fx-r-regime { min-width: 120px; }

/* M-14 · Botones de radio en filas de ajustes */
.switch-row input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; margin: 2px 0 0; padding: 0; accent-color: var(--brand); }
.switch-row:has(> input[type="radio"]) > span { display: block; }

/* M-16 · Cocina: la burbuja de «activar el sonido» no tapa la última comanda */
body:has(.kds-audio-unlock:not([hidden])) #kdsGrid { padding-bottom: 96px; }

/* M-19 · Pestañas de Ajustes en escritorio: todas a la vista (en dos filas si hace falta) */
@media (min-width: 721px) { .gx-tabs { flex-wrap: wrap; overflow: visible; } .aj-tabs { max-width: none; } }

/* M-17 · Tamaño para el dedo en pantallas táctiles */
@media (pointer: coarse) {
  .ticket-line-invite, .ticket-line-del, .modifier-close, .ext-ico { min-width: 40px; min-height: 40px; }
  .ticket-line-note, .guests-chip, .cobro-switch button, .range-btns button { min-height: 40px; }
  .cobro-tabs button { min-height: 40px; }
  .cobro-foot .btn-link, .pr-lk, .pr-volver { min-height: 36px; display: inline-flex; align-items: center; }
  .pr-ck, .fx-check input { width: 24px; height: 24px; }
  .sidebar .nav-group { min-height: 40px; } /* B-11 */
}

/* B-3 · Extras: la introducción no se mete debajo de «+ Nuevo grupo» */
#view-extras .view-intro { margin-top: 10px; }

/* B-6 · Pedidos online: el buscador dentro de su sitio */
.oo2-busca { min-width: 0; box-sizing: border-box; max-width: 100%; }
#ooBusca { width: 100%; min-width: 0; }

/* B-7 · Tablas en el móvil: sombra a la derecha cuando hay más columnas */
.table-scroll {
  background:
    linear-gradient(to right, var(--card, #fff) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--card, #fff) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .14), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), transparent) right center / 12px 100% no-repeat scroll;
}
.table-scroll td[colspan] { white-space: normal; }

/* B-8 · Cocina: el cronómetro no salta de ancho */
.kds-timer { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* B-9 · Caja: la fecha de los cierres no se parte */
#view-caja table th, #view-caja table td:first-child { white-space: nowrap; }

/* B-10 · Reservas › Turnos */
.res-aj-turno small { flex-basis: 100%; }

/* B-13 · Cobro en pantallas bajas: el contenido no queda debajo del botón fijo */
@media (max-height: 700px) and (max-width: 720px) { .cobro-col-side { padding-bottom: 80px; } }

/* B-1 · Importes: el «€» no se queda solo en otra línea */
.stat-strip b { white-space: nowrap; }

/* B-5 (aspecto Clásico) · «Ver ticket» cabe solo con el icono en móviles estrechos */
@media (max-width: 420px) { html:not(.tema-nuevo) .mob-ticket-btn .mob-label { display: none; } }

/* Gastos › Inicio: con el «€» pegado a la cifra, las tarjetas de números no
   pueden ensanchar la página en el móvil (columnas que encogen y cifra que se
   ajusta al ancho). */
.gx-kpis { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.gx-kpi { min-width: 0; }
@media (max-width: 720px) {
  .gx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-kpi-num { font-size: clamp(15px, 4.8vw, 19px); }
}

/* M-17 (2.ª pasada) · más botones pequeños en pantallas táctiles */
@media (pointer: coarse) {
  .gx-card-head .btn-link, td .btn-link, .gx-period .btn-link, .res-n-mesa .btn-link, .pr-bulk .btn-link, .esc-legend .btn-link,
  .oo2-ficha-dir a { min-height: 36px; display: inline-flex; align-items: center; }
  .pr-chips .pr-chip { min-height: 36px; }
  .pr-li input.pr-ck { width: 24px; height: 24px; flex: 0 0 24px; }
  .gsf-abrir { min-width: 40px; min-height: 36px; }
  .gsf-seg button { min-height: 36px; }
  .res-f-cerrar { min-width: 40px; min-height: 40px; }
}
/* (B-1) cada importe ocupa lo que necesita: si no caben todos, bajan de fila */
.stat-strip > div { min-width: auto; } /* = lo que mide la cifra entera (va sin partir) */

/* =============================================================================
   Ruta del reparto (15-10-2026)
   ============================================================================= */
.oo2-ruta-btn { min-height: 46px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--c1, #1d3f91); color: var(--c2, #fff); font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.oo2-ruta-btn[hidden] { display: none; }
.oo2-rep-lista { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.oo2-rep-lista li { display: flex; gap: 8px; justify-content: space-between; }
.oo2-rep-lista li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oo2-rep-ruta { min-height: 54px; border-radius: 12px; border: 0; background: var(--c2, #fff); color: var(--on-accent, #1d3f91); font: inherit; font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; margin: 4px 0 6px; }
.oo2-rep-sig { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .85; margin-top: 4px; }

.rr-overlay { z-index: 320; }
.rr-box { width: min(1040px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: left; }
.rr-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--c1, #1d3f91); color: #fff; }
.rr-cab h3 { flex: 1; margin: 0; color: #fff; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.rr-fuente { font-size: 12px; font-weight: 700; background: var(--c2, #fff); color: var(--on-accent, #1d3f91); border-radius: 999px; padding: 4px 10px; }
.rr-fuente[hidden] { display: none; }
.rr-x { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; cursor: pointer; }
.rr-cuerpo { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.rr-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; }
.rr-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rr-sub { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.rr-cand { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg, #f6f3ec); cursor: pointer; font-size: 14.5px; }
.rr-cand input { width: 22px; height: 22px; flex: none; margin: 0; padding: 0; accent-color: var(--c1, var(--brand)); }
.rr-cand span:nth-child(2) { flex: 1; min-width: 0; }
.rr-cand.rr-lejos { outline: 2px dashed #c98a00; outline-offset: -2px; }
.rr-quien { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-quien button { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--c1, var(--brand)); background: #fff; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.rr-quien button.on { background: var(--c1, var(--brand)); color: var(--c2, #fff); }
.rr-otro { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.rr-otro input { flex: 1; min-width: 0; margin: 0; }
.rr-resumen { font-size: 15px; }
.rr-resumen small { color: var(--muted); }
.rr-aviso { margin: 0; font-size: 14px; background: #fff6e5; border-radius: 10px; padding: 8px 10px; color: #7a5200; }
.rr-mal { color: #b3261e; }
.rr-aviso.rr-mal { background: #fdecea; }
.rr-cargando { margin: 0; font-size: 14px; color: var(--muted); }
.rr-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rr-parada, .rr-vuelta { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-soft, #e6e1d8); background: #fff; }
.rr-vuelta { border: 0; background: transparent; color: var(--muted); font-size: 14px; align-items: center; }
.rr-parada.rr-lejos { border-color: #c98a00; }
.rr-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c1, var(--brand)); color: var(--c2, #fff); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rr-vuelta .rr-n { background: transparent; color: var(--muted); }
.rr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.rr-info small { color: var(--muted); font-size: 13px; }
.rr-info .rr-aviso-lejos { color: #8a5a00; font-weight: 600; }
.rr-cobro { font-size: 14px; }
.rr-pagado { color: #1f7a3a; font-weight: 700; }
.rr-tel { flex: none; align-self: center; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--c1, var(--brand)); display: flex; align-items: center; text-decoration: none; color: var(--text); font-weight: 700; font-size: 14px; }
.rr-mover { display: flex; flex-direction: column; gap: 4px; }
.rr-mover button { width: 44px; height: 36px; border-radius: 8px; border: 1.5px solid var(--c1, var(--brand)); background: #fff; font-size: 14px; cursor: pointer; padding: 0; }
.rr-mover button:disabled { opacity: .3; cursor: default; }
.rr-pie { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border-soft, #e6e1d8); margin: 0 -18px -16px; position: sticky; bottom: -16px; background: #fff; z-index: 1; }
.rr-pie > * { width: auto; min-height: 48px; }
.rr-vermaps { display: inline-flex; align-items: center; text-decoration: none; padding: 0 16px; }
.rr-pie.rr-pie-movil { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.rr-pie.rr-pie-movil > * { width: 100%; flex: none; }
.rr-cuerpo { overflow-x: hidden; }
.rr-otro input { letter-spacing: normal; text-transform: none; }
.rr-maps { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border-radius: 14px; background: var(--c2, var(--accent)); color: var(--on-accent, #fff); text-decoration: none; text-align: center; padding: 6px 12px; }
.rr-maps span { font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.rr-maps small { font-size: 13px; font-weight: 600; }
.rr-aj-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.rr-aj-lbl { font-weight: 700; font-size: 14px; }
.rr-aj-veh { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-aj-veh button { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--c1, var(--brand)); background: #fff; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; width: auto; }
.rr-aj-veh button.on { background: var(--c1, var(--brand)); color: var(--c2, #fff); }
@media (max-width: 720px) {
  .rr-box { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .rr-dos { grid-template-columns: minmax(0, 1fr); }
  .rr-overlay { padding: 0; }
  .rr-pie:not(.rr-pie-movil) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rr-pie:not(.rr-pie-movil) > * { min-height: 44px; justify-content: center; font-size: 14px; padding: 0 8px; }
  .rr-pie:not(.rr-pie-movil) > .btn-primary { grid-column: 1 / -1; }
  .rr-cab h3 { font-size: 17px; }
}

/* =============================================================================
   Direcciones comprobadas y seguimiento del reparto (16-10-2026)
   ============================================================================= */
.db-caja { position: relative; }
.db-lista { position: absolute; left: 0; right: 0; top: 2px; z-index: 30; background: #fff; border: 1px solid var(--border, #e6e1d8); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); overflow: hidden; display: flex; flex-direction: column; }
.db-lista[hidden] { display: none; }
.db-op { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border-soft, #efebe3); background: #fff; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.db-op b { font-weight: 700; }
.db-op span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.db-op:hover, .db-op.on { background: #fff6dc; }
.db-google { font-size: 11px; color: var(--muted); text-align: right; padding: 4px 10px; }
.db-chip { font-size: 13px; font-weight: 700; min-height: 0; color: var(--muted); }
.db-chip:empty { display: none; }
.db-chip.db-ok { color: #1f7a3a; }
.db-chip.db-aprox { color: #8a5a00; }
.db-comprobar { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--c1, var(--brand)); background: #fff; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; width: auto; }
.oo2-np-dir input + input, .oo2-np-dir .db-caja + input { margin-top: 2px; }
.oo2-dir-ok { color: #1f7a3a; font-weight: 700; white-space: nowrap; }
.oo2-dir-mal { color: #a04a00; font-weight: 700; white-space: nowrap; }
.oo2-dir-fix { min-height: 30px; padding: 0 10px; border-radius: 8px; border: 1.5px solid #a04a00; background: #fff; color: #a04a00; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; width: auto; margin-left: 4px; }
.oo2-mini-rep { white-space: nowrap; }
.oo2-rep-gps { font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; opacity: .95; }
.oo2-rep-gps:empty { display: none; }
.rs-gps-b { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; width: auto; }
.rs-gps-mal { color: #ffd27a; font-weight: 700; }
.rs-gps-lista { margin: 0 0 6px; padding-left: 20px; font-size: 14px; line-height: 1.5; text-align: left; }
.rr-aj-apis { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
.rr-aj-apis .ok { color: #1f7a3a; font-weight: 700; }
.rr-aj-apis .mal { color: #a04a00; font-weight: 700; }
.rr-aj-nav { margin: 12px 0 6px; padding: 10px 12px; border: 1px dashed #d9cfc4; border-radius: 12px; }
.rr-aj-nav .rr-aj-lbl { display: block; font-weight: 700; margin-bottom: 2px; }
.rr-aj-gps { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; cursor: pointer; }
.rr-aj-gps input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.rr-aj-gps span { display: flex; flex-direction: column; gap: 2px; }
.rr-aj-gps small { color: var(--muted); font-size: 13px; }

.rs-fondo { z-index: 330; }
.rs-box { width: min(1000px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: left; }
.rs-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--c1, #1d3f91); color: #fff; }
.rs-cab h3 { flex: 1; margin: 0; color: #fff; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.rs-x { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; cursor: pointer; flex: none; }
.rs-cuerpo { padding: 14px 18px 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px; }
.rs-estado { border-radius: 14px; padding: 12px 14px; background: #f6f3ec; }
.rs-estado-t { font-size: 19px; font-weight: 800; }
.rs-estado-s { font-size: 14px; color: var(--muted); margin-top: 2px; }
.rs-estado.rs-calle { background: #fff3cf; }
.rs-estado.rs-hecho { background: #e3f1e7; }
.rs-estado.rs-cancel { background: #fbe3e1; }
.rs-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.rs-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rs-sec { border: 1px solid var(--border-soft, #e6e1d8); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.rs-sec-t { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rs-dir { font-size: 16px; font-weight: 700; }
.rs-dir-est { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-gris { color: var(--muted); }
.rs-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rs-b { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 14px; width: auto; }
.rs-mapa { display: flex; flex-direction: column; gap: 6px; }
.rs-mapa iframe { width: 100%; height: 260px; border: 0; border-radius: 14px; background: #ebe7df; }
.rs-mapa-pie { font-size: 14px; }
.rs-mapa .om-mr-vivo { width: 100%; height: 300px; border-radius: 14px; overflow: hidden; background: #ebe7df; }
.rt-mal { color: #a04a00; }
.rt-bien { color: #1f7a3a; }
.rt-mapa .om-mr-vivo { width: 100%; height: 260px; border-radius: 12px; overflow: hidden; background: #ebe7df; }
.rs-mapa-pie.rs-viejo { color: #8a5a00; }
.rs-croquis { width: 100%; max-width: 360px; height: auto; background: #f6f3ec; border-radius: 12px; }
.rs-croquis-ley { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rs-l-yo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2e7d32; }
.rs-l-ras { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: #f2b705; }
.rs-l-cli { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: #12181e; color: #f2b705; font-size: 9px; font-weight: 800; align-items: center; justify-content: center; }
.rs-sin-gps { font-size: 14px; background: #f6f3ec; border-radius: 12px; padding: 10px 12px; }
.rs-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rs-linea li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border-soft, #e6e1d8); font-size: 14px; }
.rs-linea li:last-child { border-bottom: 0; font-weight: 700; }
.rs-l-h { flex: none; width: 46px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-l-t { min-width: 0; overflow-wrap: anywhere; }
.rs-l-t small { color: var(--muted); font-weight: 500; }
.rs-viaje { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rs-viaje li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.rs-viaje li span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-viaje li b { flex: none; font-size: 12.5px; color: var(--muted); }
.rs-viaje li.rs-este { font-weight: 800; }
.rs-viaje li.rs-este b { color: var(--text); }
.rs-viaje li.rs-hecha b { color: #1f7a3a; }
.rs-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c1, #1d3f91); color: var(--c2, #fff); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.rs-pie { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border-soft, #e6e1d8); margin: 0 -18px; padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.rs-acc { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.rs-acc > * { width: auto; min-height: 48px; }
.rs-quien { display: flex; flex-direction: column; gap: 6px; }
.rs-quien[hidden] { display: none; }
.rs-quien > span:first-child { font-weight: 700; font-size: 14px; }
.rs-quien-b { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rs-quien-b > * { width: auto; min-height: 44px; }
.rs-quien-b .rs-otro { width: 160px; letter-spacing: normal; text-transform: none; }
.rs-motivos { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.rs-motivos > * { min-height: 48px; }
.rs-dir-box { width: min(560px, calc(100vw - 24px)); max-width: none; text-align: left; }
.rs-dir-box .oo2-in { width: 100%; }
@media (max-width: 720px) {
  .rs-box { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .rs-fondo { padding: 0; }
  .rs-cols { grid-template-columns: minmax(0, 1fr); }
  .rs-cab h3 { font-size: 17px; }
  .rs-mapa iframe { height: 220px; }
  .rs-acc { display: grid; grid-template-columns: 1fr 1fr; }
  .rs-acc > .btn-primary { grid-column: 1 / -1; }
  .rs-btns .rs-b { flex: 1 1 140px; }
}

/* --- Apartado «Riders» (16-10-2026) --- */
.rt-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.rt-vacio { grid-column: 1 / -1; background: var(--surface, #fff); border-radius: 16px; padding: 18px 20px; max-width: 720px; }
.rt-aviso { grid-column: 1 / -1; }
.rt-card { background: var(--surface, #fff); border: 1px solid var(--border, #e6ddd2); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rt-card-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rt-card-cab h3 { margin: 0; font-size: 18px; }
.rt-chip { font-size: 13px; font-weight: 700; border-radius: 10px; padding: 4px 10px; white-space: nowrap; }
.rt-chip-calle { background: #2e7d32; color: #fff; }
.rt-chip-local { background: #f2e6c4; color: #12181e; }
.rt-chip-fuera { background: #e7e5e4; color: #44403c; }
.rt-linea { font-size: 15px; }
.rt-pedidos { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-ped { min-height: 36px; border-radius: 18px; border: 1px solid var(--border, #d6d3d1); background: transparent; color: inherit; padding: 0 12px; font: inherit; font-size: 14px; cursor: pointer; }
.rt-datos { display: flex; flex-direction: column; gap: 4px; font-size: 14px; opacity: 0.9; }
.rt-link { background: none; border: none; padding: 0; color: #1d4ed8; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; min-height: 32px; }
.rt-link-rojo { color: #b91c1c; }
.rt-mapa { height: 220px; border-radius: 12px; overflow: hidden; }
.rt-mapa iframe { width: 100%; height: 100%; border: 0; }
.rt-tels { border-top: 1px dashed var(--border, #e6ddd2); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.rt-tel { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rt-dlg-box { max-width: 460px; }
.rt-dlg-box.rt-dlg-ancha { max-width: 640px; }
.rt-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 700; margin: 10px 0; }
.rt-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.rt-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.rt-paso { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.rt-qr { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 6px; }
.rt-qr svg { width: 100%; height: 100%; display: block; }
.rt-codigo { font: 700 30px/1.1 ui-monospace, monospace; letter-spacing: 0.12em; }
.rt-top .btn-primary { width: auto; padding-left: 22px; padding-right: 22px; }
.rt-dlg-box { max-height: 92vh; overflow-y: auto; }
.rt-dlg-ancha .rt-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rt-dlg-ancha .rt-qr { width: 170px; height: 170px; }
@media (max-width: 560px) { .rt-dlg-ancha .rt-pasos { grid-template-columns: 1fr; } }
.rt-dlg-box.rt-dlg-ancha { width: 640px; }

/* ===== Auditoría 17-10-2026: móvil y tablet ===== */
/* Riders: nombres largos no empujan la pantalla hacia los lados */
.rt-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.rt-card { min-width: 0; }
.rt-card-cab h3, .rt-linea, .rt-ped { min-width: 0; overflow-wrap: anywhere; }
/* Cocina en un móvil estrecho: una columna y la cabecera de cada comanda en dos líneas si hace falta */
@media (max-width: 420px) {
  .kds-grid { grid-template-columns: 1fr; }
  .kds-card-top { flex-wrap: wrap; row-gap: 6px; }
  .kds-header { gap: 10px; }
}
/* En pantallas táctiles, lo que se toca con el dedo con un tamaño mínimo */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
  .pr-al button, .aj-ir, td > .btn-secondary, .alm-zona-fila .btn-link, .vin-estado .btn-link { min-height: 36px; }
  .pr-baja { min-height: 36px; }
}
/* Rutas largas de las copias de seguridad: que partan en el móvil */
.backup-status, .backup-status div { min-width: 0; }
.backup-status code { overflow-wrap: anywhere; word-break: break-all; }

/* B11 (21-10-2026) · Toques de al menos 40 px en el móvil y la tablet (los principales):
   Inicio «VER › / CERRARLA › / REVISAR ›», fechas de Informes, días y mesas de Reservas,
   «Descargar» de Copias, «Cambiar las reglas» de Equipo, «＋ Cámara / ＋ Tarea» de Sanidad,
   los desplegables de Fichajes → Informe, la casilla de Productos y los «Guardar clave». */
.pr-ck-zona { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0; cursor: pointer; }
@media (max-width: 900px), (pointer: coarse) {
  .ini-av button, .inf-range input, .res-aj-dias button, .res-aj-mesas button,
  .ceq-link, .inv-rec-cab .btn-link, .cqr-mesa .btn-link, .cqr-sug .btn-link, .res-aj-turno .btn-link,
  .cqr-mini, td > select, .fx-check { min-height: 40px; }
  .ini-av button, .ceq-link, .inv-rec-cab .btn-link, .cqr-mesa .btn-link, .cqr-sug .btn-link, .res-aj-turno .btn-link, .cqr-mini { display: inline-flex; align-items: center; }
  #backupList td > a[download] { display: inline-flex; align-items: center; min-height: 40px; }
  .pr-li .pr-ck-zona { width: 40px; height: 40px; flex: 0 0 40px; margin: -8px -6px -8px -10px; }
  .fx-check { display: inline-flex; align-items: center; gap: 8px; }
}

/* Carga por partes (26-10-2026): mientras se baja una pantalla que no estaba
   cargada (Gastos, Informes), se ve apagada y no se puede tocar a medias. */
body.om-modulo-cargando .view.active { opacity: .55; pointer-events: none; cursor: progress; transition: opacity .2s; }

/* ===== css/tema.css ===== */
/* ==========================================================================
   Aspecto nuevo del TPV (06-10-2026) — «H1»
   Barra de arriba oscura, teclas de producto en los dos colores de la marca
   con la foto redonda en la esquina, ticket con cabecera oscura y COMANDAR /
   COBRAR grandes. Los colores salen de Ajustes → «Cómo se ve el TPV» (cada
   negocio los suyos; de fábrica negro y amarillo). js/tema.js pone en <html>
   la clase «tema-nuevo» y las variables --c1 (principal) y --c2 (acento);
   sin esa clase (aspecto «Clásico») este archivo no cambia nada.
   ========================================================================== */
html.tema-nuevo {
  --c1: #12181e;
  --c2: #f2b705;
  --on-accent: #12181e;
  --on-brand: #ffffff;
  --accent-ink: #8a6800;
  --brand-ink: #12181e;
  --c1-2: #1f262c;
  --c1-3: #2c3339;
  --c1-txt: #e1e3e4;
  --c1-muted: #8d9195;
  --bg: #ebe7df;
  --card: #ffffff;
  --text: #1b2128;
  --muted: #6b7178;
  --border: #dcd7cd;
  --border-soft: #e7e2d9;
  --shadow-sm: 0 1px 3px rgba(18, 24, 30, 0.08);
  --shadow-card: 0 1px 4px rgba(18, 24, 30, 0.07);
  --shadow-card-hover: 0 8px 20px rgba(18, 24, 30, 0.14);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --font-heading: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== PARTE AUTOMÁTICA (generada desde style.css, no tocar a mano) =====
   Donde style.css pone letra blanca sobre el color de acento o el principal,
   aquí se pone el color que se lee bien con los colores de cada negocio. */
html.tema-nuevo .login-card h1 { color: var(--brand-ink); }
html.tema-nuevo .btn-primary { color: var(--on-brand); }
html.tema-nuevo .btn-green { color: var(--on-accent); }
html.tema-nuevo .sidebar { color: var(--on-brand); }
html.tema-nuevo h1.page-title { color: var(--brand-ink); }
html.tema-nuevo .sidebar-toggle { color: var(--on-brand); }
html.tema-nuevo .product-btn .price { color: var(--accent-ink); }
html.tema-nuevo .product-img-placeholder { color: var(--accent-ink); }
html.tema-nuevo .ticket-total span:last-child { color: var(--accent-ink); }
html.tema-nuevo .badge-info { color: var(--accent-ink); }
html.tema-nuevo .stat-box .value { color: var(--accent-ink); }
html.tema-nuevo .category-tab.active { color: var(--on-brand); }
html.tema-nuevo .modal-box h3 { color: var(--brand-ink); }
html.tema-nuevo .discount-btn.active { color: var(--on-brand); }
html.tema-nuevo .category-tab.quick-sale-tab { color: var(--accent-ink); }
html.tema-nuevo .category-tab.quick-sale-tab:hover { color: var(--on-accent); }
html.tema-nuevo .view-toggle-btn.active { color: var(--on-brand); }
html.tema-nuevo .table-chip-resize { color: var(--on-brand); }
html.tema-nuevo .kds-header { color: var(--on-brand); }
html.tema-nuevo .kds-header .category-tab.active { color: var(--on-accent); }
html.tema-nuevo .kds-item-line span { color: var(--accent-ink); }
html.tema-nuevo .kds-item-extras { color: var(--brand-ink); }
html.tema-nuevo .oo-status-badge.oo-aceptado { color: var(--accent-ink); }
html.tema-nuevo .oo-status-badge.oo-preparando { color: var(--accent-ink); }
html.tema-nuevo .oo-item-extras { color: var(--accent-ink); }
html.tema-nuevo .product-btn .product-extras-flag { color: var(--accent-ink); }
html.tema-nuevo .ticket-line-name.editable:hover { color: var(--accent-ink); }
html.tema-nuevo .modifier-group-rule.required { color: var(--accent-ink); }
html.tema-nuevo .modifier-group.missing .modifier-group-rule.required { color: var(--on-accent); }
html.tema-nuevo .modifier-option-price { color: var(--accent-ink); }
html.tema-nuevo .modifier-hint { color: var(--accent-ink); }
html.tema-nuevo .gp-half.on { color: var(--on-accent); }
html.tema-nuevo .link-btn { color: var(--accent-ink); }
html.tema-nuevo .mod-recipe-btn.has-recipe { color: var(--accent-ink); }
html.tema-nuevo .extras-report-bar { color: var(--on-accent); }
html.tema-nuevo .range-btns button.active { color: var(--on-accent); }
html.tema-nuevo .blind-notice { color: var(--accent-ink); }
html.tema-nuevo .expected-cash { color: var(--accent-ink); }
html.tema-nuevo .btn-comandar { color: var(--on-brand); }
html.tema-nuevo .split-tab.active { color: var(--on-brand); }
html.tema-nuevo .split-step { color: var(--brand-ink); }
html.tema-nuevo .split-people strong { color: var(--brand-ink); }
html.tema-nuevo .split-part-n { color: var(--brand-ink); }
html.tema-nuevo .split-part-amount { color: var(--accent-ink); }
html.tema-nuevo .split-summary strong { color: var(--accent-ink); }
html.tema-nuevo .tab-order-btn:hover { color: var(--brand-ink); }
html.tema-nuevo .sort-pos { color: var(--brand-ink); }
html.tema-nuevo .sort-move { color: var(--brand-ink); }
html.tema-nuevo .ticket-line-note:hover { color: var(--brand-ink); }
html.tema-nuevo .btn-order-note:hover { color: var(--brand-ink); }
html.tema-nuevo .note-chip.selected { color: var(--on-brand); }
html.tema-nuevo .btn-move-table { color: var(--brand-ink); }
html.tema-nuevo .product-qty-badge { color: var(--on-accent); }
html.tema-nuevo .lock-icon { color: var(--brand-ink); }
html.tema-nuevo .lock-box h2 { color: var(--brand-ink); }
html.tema-nuevo .kitchen-printer-box h4 { color: var(--brand-ink); }
html.tema-nuevo .print-job-status.virtual { color: var(--accent-ink); }
html.tema-nuevo .web-carta-bar a { color: var(--accent-ink); }
html.tema-nuevo .kds-history-btn.active { color: var(--brand-ink); }
html.tema-nuevo .kds-history-close { color: var(--on-brand); }
html.tema-nuevo .kds-hist-origin { color: var(--brand-ink); }
html.tema-nuevo .kds-hist-mins { color: var(--accent-ink); }
html.tema-nuevo .kds-hist-reopen.confirm { color: var(--on-accent); }
html.tema-nuevo .gx-tabs button.active { color: var(--brand-ink); }
html.tema-nuevo .gx-pending { color: var(--accent-ink); }
html.tema-nuevo .gx-back { color: var(--brand-ink); }
html.tema-nuevo .gx-detail-head h2 { color: var(--brand-ink); }
html.tema-nuevo .gx-kpi-num { color: var(--brand-ink); }
html.tema-nuevo .gx-info a { color: var(--brand-ink); }
html.tema-nuevo .gx-subtabs button.active { color: var(--brand-ink); }
html.tema-nuevo .version-banner { color: var(--on-brand); }
html.tema-nuevo .top-user-avatar { color: var(--on-brand); }
html.tema-nuevo .top-user-name { color: var(--brand-ink); }
html.tema-nuevo .top-user-clock { color: var(--on-brand); }
html.tema-nuevo .clock-actions .clock-out.btn-primary { color: var(--on-accent); }
html.tema-nuevo .id-modal-clock { color: var(--brand-ink); }
html.tema-nuevo .btn-link { color: var(--accent-ink); }
html.tema-nuevo .clock-mine-btn { color: var(--brand-ink); }
html.tema-nuevo .gx-drop-icon { color: var(--brand-ink); }
html.tema-nuevo .gx-up-bar span { color: var(--on-accent); }
html.tema-nuevo .gx-rv-title h2 { color: var(--brand-ink); }
html.tema-nuevo .gx-rv-pages button.active { color: var(--on-brand); }
html.tema-nuevo .gx-fam-in { color: var(--brand-ink); }
html.tema-nuevo .gx-fam-all .gx-fam-pick { color: var(--brand-ink); }
html.tema-nuevo .rec-sup-n { color: var(--brand-ink); }
html.tema-nuevo .ga-grupo legend { color: var(--brand-ink); }
html.tema-nuevo .ga-log summary { color: var(--brand-ink); }
html.tema-nuevo .ga-sub { color: var(--brand-ink); }
html.tema-nuevo .gx-help-btn { color: var(--brand-ink); }
html.tema-nuevo .gx-help-btn:hover { color: var(--on-brand); }
html.tema-nuevo .exp-opt strong { color: var(--brand-ink); }
html.tema-nuevo .login-slogan { color: var(--brand-ink); }
html.tema-nuevo .pay-method.active { color: var(--on-brand); }
html.tema-nuevo .inf-tabs button.active { color: var(--brand-ink); }
html.tema-nuevo a.exp-btn { color: var(--on-accent); }
html.tema-nuevo .guests-n.active,
html.tema-nuevo .guests-n:hover { color: var(--on-brand); }
html.tema-nuevo .top-drawer { color: var(--brand-ink); }
html.tema-nuevo .top-drawer:hover { color: var(--on-brand); }
html.tema-nuevo #escFilters .gx-chip.active { color: var(--on-accent); }
html.tema-nuevo .esc-totals strong { color: var(--brand-ink); }
html.tema-nuevo .esc-elab strong { color: var(--brand-ink); }
html.tema-nuevo .ext-name { color: var(--brand-ink); }
html.tema-nuevo .pay-method-opt:hover { color: var(--accent-ink); }
html.tema-nuevo .cobro-head h3 { color: var(--brand-ink); }
html.tema-nuevo .cobro-total strong { color: var(--accent-ink); }
html.tema-nuevo .cobro-tabs button.on { color: var(--brand-ink); }
html.tema-nuevo .cobro-tabs button:not(.on):hover { color: var(--brand-ink); }
html.tema-nuevo .cobro-amount strong.accent { color: var(--accent-ink); }
html.tema-nuevo .cobro-methods button.on { color: var(--on-brand); }
html.tema-nuevo .cobro-switch button.on { color: var(--on-brand); }
html.tema-nuevo .top-waste { color: var(--accent-ink); }
html.tema-nuevo .top-waste:hover { color: var(--on-accent); }
html.tema-nuevo .ar-big svg { color: var(--accent-ink); }
html.tema-nuevo .ar-big strong { color: var(--brand-ink); }
html.tema-nuevo .ar-chip.on { color: var(--on-accent); }
html.tema-nuevo .ar-qty > button { color: var(--brand-ink); }
html.tema-nuevo .ar-seg button.on,
html.tema-nuevo .alm-seg button.on { color: var(--on-accent); }
html.tema-nuevo .gx-kpi > strong { color: var(--brand-ink); }
html.tema-nuevo .esc-elab-hay { color: var(--brand-ink); }
html.tema-nuevo .mi-step button { color: var(--brand-ink); }
html.tema-nuevo .mi-q { color: var(--accent-ink); }
html.tema-nuevo .mi-todo { color: var(--accent-ink); }
html.tema-nuevo .so-qty button { color: var(--brand-ink); }
html.tema-nuevo .ini-card h3 { color: var(--brand-ink); }
html.tema-nuevo .ini-av button { color: var(--accent-ink); }
html.tema-nuevo .ini-quick button { color: var(--brand-ink); }
html.tema-nuevo .alm-buscar button:hover { color: var(--brand-ink); }
html.tema-nuevo #almTabs .alm-n { color: var(--on-accent); }
html.tema-nuevo .pr-chip.on { color: var(--on-brand); }
html.tema-nuevo .pr-bulk #prBulkTxt { color: var(--brand-ink); }
html.tema-nuevo .cam-av { color: var(--on-brand); }
html.tema-nuevo .cam-tag { color: var(--brand-ink); }
html.tema-nuevo .cam-perms > summary { color: var(--brand-ink); }
html.tema-nuevo .stat-strip .destacado b { color: var(--accent-ink); }
html.tema-nuevo .mesas-edit-btn { color: var(--brand-ink); }
html.tema-nuevo .mesas-edit-btn.activo { color: var(--on-brand); }
html.tema-nuevo .top-user-swap { color: var(--brand-ink); }
html.tema-nuevo .category-tab.otro-tab { color: var(--accent-ink); }
html.tema-nuevo .otro-tag { color: var(--accent-ink); }
html.tema-nuevo .otro-chip.on { color: var(--on-brand); }
html.tema-nuevo .otro-display { color: var(--brand-ink); }
html.tema-nuevo .otro-seg button.on { color: var(--on-brand); }
html.tema-nuevo .om-reserva-pill button { color: var(--on-brand); }
html.tema-nuevo .modifier-qty button { color: var(--brand-ink); }
html.tema-nuevo .modifier-qty b { color: var(--brand-ink); }
html.tema-nuevo .split-tk-seg button { color: var(--brand-ink); }
html.tema-nuevo .split-tk-seg button.on { color: var(--accent-ink); }
html.tema-nuevo .res-dia > button { color: var(--brand-ink); }
html.tema-nuevo .res-dia-txt { color: var(--brand-ink); }
html.tema-nuevo .res-seg button { color: var(--brand-ink); }
html.tema-nuevo .res-seg button.on { color: var(--on-brand); }
html.tema-nuevo .res-kpis b { color: var(--brand-ink); }
html.tema-nuevo .res-kpis .rojo b { color: var(--accent-ink); }
html.tema-nuevo .res-filtros button.on { color: var(--on-brand); }
html.tema-nuevo .res-h b { color: var(--brand-ink); }
html.tema-nuevo .res-mesa { color: var(--brand-ink); }
html.tema-nuevo .res-mesa.sin { color: var(--accent-ink); }
html.tema-nuevo .res-tag { color: var(--brand-ink); }
html.tema-nuevo .res-pill.cafe { color: var(--on-brand); }
html.tema-nuevo .res-link { color: var(--accent-ink); }
html.tema-nuevo .res-w-av { color: var(--on-brand); }
html.tema-nuevo .res-f-head h3 { color: var(--brand-ink); }
html.tema-nuevo .res-f-tiles b { color: var(--brand-ink); }
html.tema-nuevo .res-tl-mesa { color: var(--brand-ink); }
html.tema-nuevo .res-barra.sentada { color: var(--on-brand); }
html.tema-nuevo .res-tl-ahora { color: var(--on-accent); }
html.tema-nuevo .res-n-head h3 { color: var(--brand-ink); }
html.tema-nuevo .res-n-chips button.on { color: var(--on-brand); }
html.tema-nuevo .res-n-mesa b { color: var(--brand-ink); }
html.tema-nuevo .res-aj-dias button.on { color: var(--on-brand); }
html.tema-nuevo .cqr-av .cqr-btn { color: var(--on-accent); }
html.tema-nuevo .table-qr-badge { color: var(--on-accent); }
html.tema-nuevo .cqr-quien { color: var(--accent-ink); }
html.tema-nuevo .cqr-tot b { color: var(--brand-ink); }
html.tema-nuevo .cqr-tx-langs button.on { color: var(--on-brand); }
html.tema-nuevo .cqr-tx-lista h4 { color: var(--brand-ink); }
html.tema-nuevo .kds-qr-tag { color: var(--on-accent); }
html.tema-nuevo .zone-qr-mark { color: var(--on-accent); }
html.tema-nuevo .cqr-resumen.urge { color: var(--on-accent); }
html.tema-nuevo .vin-kpis span { color: var(--brand-ink); }
html.tema-nuevo .vin-per .gx-chip.active { color: var(--on-accent); }
html.tema-nuevo .gsf-pl.on { color: var(--on-brand); }
html.tema-nuevo .gsf-abrir { color: var(--brand-ink); }
html.tema-nuevo #rvCajas.on { color: var(--on-brand); }
html.tema-nuevo .oo2-nuevo { color: var(--on-accent); }
html.tema-nuevo .oo2-nuevo:hover { color: var(--on-accent); }
html.tema-nuevo .oo2-col-tit { color: var(--brand-ink); }
html.tema-nuevo .oo2-col-tit span { color: var(--on-brand); }
html.tema-nuevo .oo2-o-telefono,
html.tema-nuevo .oo2-o-encargo { color: var(--brand-ink); }
html.tema-nuevo .oo2-o-qr { color: var(--brand-ink); }
html.tema-nuevo .oo2-chip-hab { color: var(--brand-ink); }
html.tema-nuevo .oo2-pago { color: var(--brand-ink); }
html.tema-nuevo .oo2-btn { color: var(--on-brand); }
html.tema-nuevo .oo2-btn-cobrar { color: var(--on-accent); }
html.tema-nuevo .oo2-prog-tit { color: var(--brand-ink); }
html.tema-nuevo .oo2-paso.hecho { color: var(--brand-ink); }
html.tema-nuevo .oo2-paso.ahora { color: var(--on-brand); }
html.tema-nuevo .oo2-avatar { color: var(--on-brand); }
html.tema-nuevo .oo2-cli-hist { color: var(--brand-ink); }
html.tema-nuevo .oo2-np-cab h3 { color: var(--brand-ink); }
html.tema-nuevo .oo2-seg button.on { color: var(--on-brand); }
html.tema-nuevo .oo2-paso-t { color: var(--brand-ink); }
html.tema-nuevo .oo2-horas button.on { color: var(--on-brand); }
html.tema-nuevo .oo2-cats button.on { color: var(--on-accent); }
html.tema-nuevo .oo2-prod i { color: var(--accent-ink); }
html.tema-nuevo .oo2-prod-otro { color: var(--brand-ink); }
html.tema-nuevo .oo2-np-resumen { color: var(--brand-ink); }
html.tema-nuevo .oo2-link { color: var(--accent-ink); }
html.tema-nuevo .oo2-eg-o button.on { color: var(--on-brand); }
@media (max-width: 980px) {
  html.tema-nuevo .mob-count { color: var(--on-accent); }
  html.tema-nuevo .mob-total { color: var(--accent-ink); }
  html.tema-nuevo .mob-comandar { color: var(--on-brand); }
  html.tema-nuevo .btn-show-pay { color: var(--on-accent); }
  html.tema-nuevo .table-bar.actions-open .table-more-btn { color: var(--on-brand); }
  html.tema-nuevo .cobro-ver-ticket { color: var(--brand-ink); }
  html.tema-nuevo .cobro-mtitle { color: var(--brand-ink); }
}
@media (max-width: 900px) {
  html.tema-nuevo .gx-rv-tabs button.active { color: var(--brand-ink); }
}
@media (min-width: 981px) {
  html.tema-nuevo #tableBar .table-bar-title { color: var(--brand-ink); }
}
@media (max-width: 720px) {
  html.tema-nuevo #view-venta #tableBar #currentTableName { color: var(--brand-ink); }
  html.tema-nuevo #tableWaiterBtn { color: var(--on-brand); }
}
/* ===== FIN DE LA PARTE AUTOMÁTICA ===== */

/* ==========================================================================
   A MANO
   ========================================================================== */

/* --- Base --- */
html.tema-nuevo body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15.5px; }
html.tema-nuevo h1.page-title { color: var(--text); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
html.tema-nuevo .card { border: 0; box-shadow: var(--shadow-card); border-radius: var(--radius-lg); }
html.tema-nuevo .btn-primary { background: var(--c1); color: var(--on-brand); border-radius: var(--radius-md); }
html.tema-nuevo .btn-secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
html.tema-nuevo .btn-secondary:hover { background: #f4f1eb; border-color: var(--c1); }
html.tema-nuevo input:focus, html.tema-nuevo select:focus, html.tema-nuevo textarea:focus { outline: none; border-color: var(--c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2) 45%, transparent); }

/* --- Menú (cuando va a la izquierda: tablet y móvil) --- */
html.tema-nuevo .sidebar { background: var(--c1); color: var(--c1-txt); }
html.tema-nuevo .sidebar button.nav-btn, html.tema-nuevo .sidebar a.nav-btn { color: var(--c1-txt); border-radius: var(--radius-md); }
html.tema-nuevo .sidebar button.nav-btn:hover, html.tema-nuevo .sidebar a.nav-btn:hover { background: var(--c1-3); }
html.tema-nuevo .sidebar button.nav-btn.active { background: var(--c2); color: var(--on-accent); border-left: 0; padding-left: 14px; }
html.tema-nuevo .sidebar h2.sidebar-title, html.tema-nuevo .sidebar h2.sidebar-title > span { color: var(--on-brand); }
html.tema-nuevo .sidebar .nav-group { color: var(--c1-muted); }
html.tema-nuevo .sidebar .logout-btn { background: var(--c1-3); color: var(--c1-txt); }
html.tema-nuevo .sidebar .nav-badge { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .sidebar-toggle { background: var(--c1); color: var(--on-brand); border-radius: var(--radius-md); }

/* --- Barra de arriba (ordenador) --- */
html.tema-nuevo.barra-arriba .app-shell { flex-direction: column; }
html.tema-nuevo.barra-arriba .app-shell .sidebar,
html.tema-nuevo.barra-arriba .app-shell .sidebar.open {
  position: sticky; top: 0; left: auto; bottom: auto; z-index: 120; transform: none; box-shadow: none;
  width: auto; height: auto; flex: none; max-width: none;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px;
  min-height: 62px; padding: 0 14px; overflow: visible; box-sizing: border-box;
}
html.tema-nuevo.barra-arriba .app-shell:has(> .sidebar.open) { padding-left: 0; }
html.tema-nuevo.barra-arriba .sidebar-backdrop, html.tema-nuevo.barra-arriba .sidebar-toggle { display: none !important; }
html.tema-nuevo.barra-arriba .sidebar h2.sidebar-title { flex: none; display: flex; align-items: center; gap: 9px; margin: 0 14px 0 2px; padding: 0; font: 700 18px/1 var(--font-heading); white-space: nowrap; cursor: default; justify-content: flex-start; }
html.tema-nuevo.barra-arriba .sidebar h2.sidebar-title > span { display: inline; max-width: 210px; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
html.tema-nuevo.barra-arriba .sidebar-title-icon { width: 26px; height: 26px; flex-basis: 26px; }
html.tema-nuevo.barra-arriba .sidebar .nav-group.nav-group-fijo,
html.tema-nuevo.barra-arriba .sidebar .sidebar-brand,
html.tema-nuevo.barra-arriba .sidebar button.nav-more-btn { display: none !important; }
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items { display: none; }
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items[data-grp="dia"],
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items[data-grp="dia"].cerrado { display: flex; flex: none; flex-wrap: nowrap; gap: 2px; align-items: center; }
html.tema-nuevo.barra-arriba .sidebar button.nav-btn,
html.tema-nuevo.barra-arriba .sidebar a.nav-btn,
html.tema-nuevo.barra-arriba .sidebar.open button.nav-btn,
html.tema-nuevo.barra-arriba .sidebar.open a.nav-btn {
  position: relative; width: auto; height: 42px; margin: 0; padding: 0 11px; gap: 6px; justify-content: flex-start;
  border: 0; border-radius: var(--radius-md); font: 500 14.5px/1 var(--font-body); white-space: nowrap; color: var(--c1-txt);
}
html.tema-nuevo.barra-arriba .sidebar button.nav-btn.active { background: var(--c2); color: var(--on-accent); font-weight: 600; padding: 0 12px; border: 0; }
html.tema-nuevo.barra-arriba .sidebar .nav-icon { width: 17px; height: 17px; }
html.tema-nuevo.barra-arriba .sidebar .nav-btn > span:not(.nav-icon):not(.nav-badge) { display: inline; }
html.tema-nuevo.barra-arriba .sidebar .nav-badge { position: static; margin: 0 0 0 2px; min-width: 19px; height: 19px; font-size: 11px; padding: 0 5px; background: var(--c2); color: var(--on-accent); }
html.tema-nuevo.barra-arriba .sidebar button.nav-btn.active .nav-badge { background: var(--c1); color: var(--c2); }
/* Gestión / Configuración: botón en la barra y su fila debajo */
html.tema-nuevo.barra-arriba .sidebar .nav-group,
html.tema-nuevo.barra-arriba .sidebar .nav-group.nav-group-fijo {
  flex: none; width: auto; height: 42px; min-height: 0; margin: 0 0 0 4px; padding: 0 12px; gap: 6px;
  font: 500 14.5px/1 var(--font-body); color: var(--c1-txt); opacity: 1; letter-spacing: 0; text-transform: none;
  background: transparent; border: 1px solid var(--c1-3); border-radius: var(--radius-md); pointer-events: auto; cursor: pointer;
}
html.tema-nuevo.barra-arriba .sidebar .nav-group:hover { background: var(--c1-3); opacity: 1; }
html.tema-nuevo.barra-arriba .sidebar .nav-group .nav-group-name,
html.tema-nuevo.barra-arriba .sidebar .nav-group .nav-group-arrow { display: inline; font-size: inherit; }
html.tema-nuevo.barra-arriba .sidebar .nav-group .nav-group-arrow { font-size: 11px; transform: none; }
html.tema-nuevo.barra-arriba .sidebar .nav-group.abierto { background: var(--c1-3); }
html.tema-nuevo.barra-arriba .sidebar .nav-group.abierto .nav-group-arrow { transform: rotate(180deg); }
html.tema-nuevo.barra-arriba .sidebar .nav-group.dentro { border-color: var(--c2); color: var(--c2); }
html.tema-nuevo.barra-arriba .sidebar[data-grupo="gestion"] .nav-grp-items[data-grp="gestion"],
html.tema-nuevo.barra-arriba .sidebar[data-grupo="config"] .nav-grp-items[data-grp="config"] {
  display: flex; order: 50; flex: 0 0 calc(100% + 20px); margin: 0 -10px; padding: 6px 14px; gap: 4px;
  background: var(--c1-2); border-top: 1px solid var(--c1-3);
}
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items:not([data-grp="dia"]) .nav-btn { height: 38px; }
/* A la derecha: cajón, «He tirado algo», quién está y Salir */
html.tema-nuevo.barra-arriba .sidebar .barra-dcha { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; padding-left: 10px; }
html.tema-nuevo:not(.barra-arriba) .sidebar .barra-dcha { display: none; }
html.tema-nuevo.barra-arriba .barra-dcha .top-actions { position: static; display: flex; gap: 6px; }
html.tema-nuevo.barra-arriba .barra-dcha .top-drawer { position: static; height: 38px; padding: 0 12px; gap: 6px; border-radius: var(--radius-md); border: 1px solid var(--c1-3); background: transparent; color: var(--c1-txt); font: 500 14px/1 var(--font-body); box-shadow: none; }
html.tema-nuevo.barra-arriba .barra-dcha .top-drawer:hover { background: var(--c1-3); color: var(--on-brand); }
html.tema-nuevo.barra-arriba .barra-dcha .top-drawer.ok { background: var(--green); border-color: var(--green); color: #fff; }
html.tema-nuevo.barra-arriba .barra-dcha .top-drawer svg { width: 17px; height: 17px; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user { margin: 0; flex-wrap: nowrap; gap: 6px; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-who { padding: 3px 12px 3px 3px; gap: 8px; background: transparent; border: 0; box-shadow: none; color: var(--c1-txt); }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-who:hover { background: var(--c1-3); }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-avatar { width: 34px; height: 34px; background: var(--c2); color: var(--on-accent); font-size: 14px; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-name { color: var(--on-brand); font: 600 14.5px/1.15 var(--font-body); max-width: 150px; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-state { color: var(--c1-muted); font-size: 12px; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-state.st-trabajando { color: #7fd18b; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-swap { background: var(--c1-3); color: var(--c1-txt); }
html.tema-nuevo.barra-arriba .barra-dcha .top-user.top-user-none .top-user-who { background: transparent; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-clock { height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-md); background: var(--c2); color: var(--on-accent); font: 600 14px/1 var(--font-body); }
html.tema-nuevo.barra-arriba .sidebar .logout-btn { flex: none; width: auto; height: 38px; margin: 0 0 0 6px; padding: 0 12px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--c1-3); color: var(--c1-muted); font: 500 14px/1 var(--font-body); }
html.tema-nuevo.barra-arriba .sidebar .logout-btn:hover { background: var(--c1-3); color: var(--on-brand); }
/* Si no cabe: más junto → solo iconos (menos la pantalla en la que se está) → todo iconos */
html.tema-nuevo.barra-media .sidebar button.nav-btn, html.tema-nuevo.barra-media .sidebar a.nav-btn { padding: 0 8px; gap: 5px; font-size: 13.5px; }
html.tema-nuevo.barra-media .sidebar .nav-group { padding: 0 9px; font-size: 13.5px; }
html.tema-nuevo.barra-media .sidebar h2.sidebar-title > span { max-width: 130px; }
html.tema-nuevo.barra-media .barra-dcha .top-user-state, html.tema-nuevo.barra-media .barra-dcha .td-txt { display: none; }
html.tema-nuevo.barra-iconos .sidebar .nav-grp-items[data-grp="dia"] .nav-btn:not(.active):not(.padre-dentro) > span:not(.nav-icon):not(.nav-badge) { display: none; }
html.tema-nuevo.barra-iconos .sidebar .nav-grp-items[data-grp="dia"] .nav-btn:not(.active):not(.padre-dentro) { padding: 0 10px; }
html.tema-nuevo.barra-iconos .sidebar .nav-grp-items[data-grp="dia"] .nav-btn:not(.active):not(.padre-dentro) .nav-badge { position: absolute; top: 1px; right: 0; }
html.tema-nuevo.barra-iconos .sidebar h2.sidebar-title > span { display: none; }
html.tema-nuevo.barra-iconos .barra-dcha .top-user-name { max-width: 90px; }
html.tema-nuevo.barra-mini .sidebar .nav-grp-items[data-grp="dia"] .nav-btn > span:not(.nav-icon):not(.nav-badge) { display: none; }
html.tema-nuevo.barra-mini .barra-dcha .top-user-text { display: none; }
html.tema-nuevo.barra-mini .sidebar .logout-btn { padding: 0 9px; }
/* El contenido debajo de la barra */
html.tema-nuevo.barra-arriba .main { padding: 18px 22px 22px; }
@media (min-width: 981px) {
  html.tema-nuevo.barra-arriba .app-shell:has(#view-venta.active) { height: 100vh; }
  html.tema-nuevo.barra-arriba .app-shell:has(#view-venta.active) > .sidebar { height: auto; }
  html.tema-nuevo.barra-arriba .main:has(> #view-venta.active) { height: auto; flex: 1 1 auto; min-height: 0; padding: 14px 16px; }
  html.tema-nuevo.barra-arriba .main { padding: 18px 22px 22px; }
}

/* --- Venta: categorías y buscador --- */
html.tema-nuevo .category-tabs { gap: 6px; }
html.tema-nuevo .category-tab {
  min-height: 52px; padding: 0 18px; border: 0; border-radius: var(--radius-sm); background: #fff; color: var(--text);
  font: 700 14.5px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; box-shadow: var(--shadow-sm);
}
html.tema-nuevo .category-tab:hover { background: #f6f3ee; }
html.tema-nuevo .category-tab.active { background: var(--c1) !important; color: var(--c2); box-shadow: inset 0 -5px 0 var(--c2); }
html.tema-nuevo #categoryTabs .category-tab { border: 0 !important; }
html.tema-nuevo .category-tab.quick-sale-tab { background: var(--c2); color: var(--on-accent); border: 0; }
html.tema-nuevo .category-tab.otro-tab { background: #fff !important; border: 2px dashed var(--c1) !important; color: var(--text); }
html.tema-nuevo #view-venta .card:first-child { background: transparent; box-shadow: none; padding: 0; }
html.tema-nuevo .product-search input { border-radius: var(--radius-sm); border: 0; box-shadow: var(--shadow-sm); }

/* --- Venta: teclas de producto (H1: los dos colores y la foto redonda en la esquina) --- */
html.tema-nuevo #productGrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
html.tema-nuevo #productGrid .product-btn {
  --k-bg: var(--c2); --k-fg: var(--on-accent);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px;
  min-height: 150px; padding: 13px 14px 44px; overflow: hidden; text-align: left;
  border: 0; border-radius: var(--radius-md); background: var(--k-bg); color: var(--k-fg); box-shadow: none;
  font: 700 17px/1.1 var(--font-heading); text-transform: uppercase; letter-spacing: .01em;
}
html.tema-nuevo #productGrid .product-btn:nth-child(4n+2),
html.tema-nuevo #productGrid .product-btn:nth-child(4n+3) { --k-bg: var(--c1); --k-fg: var(--c2); }
html.tema-nuevo #productGrid .product-btn:hover { transform: none; filter: brightness(1.06); box-shadow: none; }
html.tema-nuevo #productGrid .product-btn:active { transform: scale(.97); }
html.tema-nuevo #productGrid .product-btn .product-name { position: relative; z-index: 1; max-width: 64%; overflow-wrap: break-word; } /* (21-10-2026, H6) por palabras, no letra a letra */
html.tema-nuevo #productGrid .product-btn .price { position: absolute; left: 14px; bottom: 12px; margin: 0; color: inherit; font: 700 21px/1 var(--font-heading); z-index: 1; }
html.tema-nuevo #productGrid .product-img,
html.tema-nuevo #productGrid .product-img-placeholder {
  position: absolute; right: -22px; bottom: -22px; width: 118px; height: 118px; margin: 0; box-sizing: border-box;
  border-radius: 50%; border: 4px solid var(--k-fg); background: #fff; object-fit: contain;
  padding: 12px 30px 30px 12px;
  color: transparent; font-size: 0; /* si la foto no carga, que no salga el nombre cortado */
}
html.tema-nuevo #productGrid .product-img-placeholder { display: flex; align-items: center; justify-content: center; color: var(--c1); }
html.tema-nuevo #productGrid .product-img-placeholder svg { width: 38px; height: 38px; transform: translate(-9px, -9px); }
html.tema-nuevo #productGrid .product-extras-flag { position: relative; z-index: 1; margin: 2px 0 0; padding: 2px 8px; background: color-mix(in srgb, var(--k-fg) 18%, transparent); color: inherit; font: 600 11.5px/1.3 var(--font-body); text-transform: none; }
html.tema-nuevo #productGrid .product-allergens { position: relative; z-index: 1; max-width: 60%; }
html.tema-nuevo #productGrid .product-left { position: relative; top: auto; left: auto; z-index: 1; margin-top: 2px; padding: 3px 9px; border-radius: 999px; background: var(--k-fg); color: var(--k-bg); font: 700 11.5px/1.2 var(--font-body); text-transform: none; }
html.tema-nuevo #productGrid .product-qty-badge { top: 8px; right: 8px; z-index: 2; min-width: 30px; height: 30px; border-radius: 999px; background: var(--k-fg); color: var(--k-bg); box-shadow: 0 0 0 3px var(--k-bg); font: 700 15px/30px var(--font-heading); }
html.tema-nuevo #productGrid .product-btn:has(.product-qty-badge) { border: 0; }
html.tema-nuevo #productGrid .product-btn.sold-out { --k-bg: #d9d3c4; --k-fg: #6b7178; opacity: .7; }
html.tema-nuevo #productGrid .product-soldout-tag { left: auto; right: 8px; top: 8px; z-index: 2; padding: 4px 10px; border-radius: 999px; font: 700 11px/1.2 var(--font-body); letter-spacing: .08em; }
html.tema-nuevo #productGrid .product-btn:has(.product-qty-badge) .product-soldout-tag { right: 46px; }

/* --- Venta: ticket --- */
html.tema-nuevo #ticketCard { padding: 0; }
/* «overflow: hidden» solo en el ordenador (allí solo bajan las líneas). En el
   móvil y la tablet de pie el ticket es un panel que sube desde abajo y tiene
   que poder bajarse hasta «Cobrar…» aunque la mesa tenga muchas cosas
   (14-10-2026, La Corona: con muchas comandas no se llegaba a «Cobrar»). */
@media (min-width: 981px) { html.tema-nuevo #ticketCard { overflow: hidden; } }
@media (max-width: 980px) { html.tema-nuevo #ticketCard { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); } }
html.tema-nuevo #ticketCard .ticket-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 14px 18px; background: var(--c1); color: var(--on-brand); }
html.tema-nuevo #ticketCard .ticket-sheet-head h3 { margin: 0; color: var(--on-brand); font: 700 19px/1.1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; }
html.tema-nuevo #ticketCard #ticketLines { padding: 4px 18px; }
html.tema-nuevo #ticketCard .ticket-foot { padding: 0 18px 16px; }
html.tema-nuevo .ticket-line { border-bottom: 1px solid #eeeae3; }
html.tema-nuevo .ticket-total { border-top: 3px solid var(--c1); }
html.tema-nuevo .ticket-total span:first-child { color: var(--text); font-size: 17px; }
html.tema-nuevo .ticket-total span:last-child { color: var(--text); font-size: 36px; }
html.tema-nuevo .btn-order-note { background: #f3efe8; border: 0; color: var(--text); border-radius: var(--radius-sm); }
html.tema-nuevo .btn-comandar { background: var(--c1); color: var(--c2); border-radius: var(--radius-sm); font: 700 18px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; box-shadow: none; }
html.tema-nuevo .btn-comandar.blocked { background: #ece8e1; color: var(--muted); }
html.tema-nuevo .btn-charge { background: var(--c2); color: var(--on-accent); border-radius: var(--radius-sm); font: 700 22px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .03em; box-shadow: none; }
@media (min-width: 981px) {
  /* COMANDAR y COBRAR uno al lado del otro, grandes */
  html.tema-nuevo #ticketCard .ticket-foot { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  html.tema-nuevo #ticketCard .ticket-foot > * { grid-column: 1 / -1; }
  html.tema-nuevo #ticketCard .ticket-foot > .ticket-actions { grid-column: 1; grid-row: 50; }
  html.tema-nuevo #ticketCard .ticket-foot > .btn-charge { grid-column: 2; grid-row: 50; margin-top: 8px; }
  html.tema-nuevo #ticketCard .ticket-actions { flex-direction: column; gap: 6px; }
  html.tema-nuevo #ticketCard .ticket-actions .btn-comandar { flex: 1 1 auto; min-height: 66px; padding: 12px; font-size: 18px; }
  html.tema-nuevo #ticketCard .ticket-actions .ticket-bill-btn { margin-top: 0; flex: none; }
  html.tema-nuevo #ticketCard .ticket-foot > .btn-charge { min-height: 66px; padding: 12px; font-size: 22px; }
  html.tema-nuevo #ticketCard .ticket-total span:last-child { font-size: 34px; }
}

/* --- Barra de la mesa abierta (Dividir, Cancelar, Mover…) --- */
html.tema-nuevo .table-bar { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.tema-nuevo #tableBar .table-bar-title { color: var(--text); font: 700 20px/1 var(--font-heading); text-transform: uppercase; }
html.tema-nuevo #tableBar .table-bar-actions { border-left: 0; }
html.tema-nuevo #tableBar .table-bar-actions .btn-secondary { min-height: 44px; border: 0; background: #fff; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); font: 600 14px/1 var(--font-body); }
html.tema-nuevo #tableBar .table-bar-actions .btn-secondary:hover { background: var(--c1); color: var(--on-brand); }

/* --- Mesas --- */
html.tema-nuevo #view-mesas > .card { background: transparent; box-shadow: none; padding: 0; }
html.tema-nuevo #view-mesas .mesas-admin.abierto { background: #fff; border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-card); }
html.tema-nuevo .view-toggle-btn { border: 0; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
html.tema-nuevo .view-toggle-btn.active { background: var(--c1); color: var(--c2); }
html.tema-nuevo .mesas-edit-btn { border-radius: var(--radius-sm); }
html.tema-nuevo .table-card {
  border: 3px dashed #cfc6b2; border-radius: var(--radius-lg); background: #fff; color: var(--text); box-shadow: none;
  font-family: var(--font-heading); font-weight: 700;
}
html.tema-nuevo .table-card.occupied { border: 3px solid var(--c1); background: var(--c1); color: var(--on-brand); }
html.tema-nuevo .table-card.occupied .table-card-total { color: var(--c2); font: 700 21px/1.1 var(--font-heading); }
html.tema-nuevo .table-card .table-card-seats { color: var(--muted); }
/* Esperando algo (ha pedido la cuenta, o hay un pedido del QR): en el acento */
html.tema-nuevo .table-card.bill, html.tema-nuevo .table-card.occupied.bill { border: 3px solid var(--c1); background: var(--c2); color: var(--on-accent); box-shadow: 0 0 0 3px var(--c1) inset; }
html.tema-nuevo .table-card.bill .table-card-total { color: var(--on-accent); }
html.tema-nuevo .table-card.reserved { border: 3px dashed var(--c2) !important; background: color-mix(in srgb, var(--c2) 10%, #fff) !important; }
html.tema-nuevo .table-card .table-bill-badge { background: var(--c1); color: var(--c2); }
html.tema-nuevo .table-chip { border-color: #cfc6b2; }
html.tema-nuevo .table-chip.occupied { border-color: var(--c1); background: var(--c1); color: var(--on-brand); }
html.tema-nuevo .table-chip.occupied .table-chip-total { color: var(--c2); }
html.tema-nuevo .table-chip.bill { border-color: var(--c1); background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .table-chip.bill .table-chip-total { color: var(--on-accent); }
@media (min-width: 721px) {
  html.tema-nuevo #view-mesas .table-list { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
  html.tema-nuevo #view-mesas .table-card { min-height: 128px; font-size: 24px; }
}

/* --- Móvil --- */
@media (max-width: 980px) {
  html.tema-nuevo .mobile-order-bar { background: var(--bg); border-top: 0; box-shadow: none; }
  html.tema-nuevo .mob-ticket-btn { background: var(--c1); color: var(--on-brand); border-radius: var(--radius-md); box-shadow: 0 10px 24px rgba(18, 24, 30, .25); min-height: 56px; }
  html.tema-nuevo .mob-count { border-radius: var(--radius-sm); background: var(--c2); color: var(--on-accent); }
  html.tema-nuevo .mob-total { color: var(--on-brand); font: 700 18px/1 var(--font-heading); }
  html.tema-nuevo .mob-label { font-weight: 600; font-size: 14px; }
  html.tema-nuevo .mob-comandar { background: var(--c2); color: var(--on-accent); border-radius: var(--radius-md); box-shadow: 0 10px 24px rgba(18, 24, 30, .25); min-height: 56px; font: 700 15px/1 var(--font-heading); text-transform: uppercase; }
  html.tema-nuevo .table-bar { background: var(--c1); color: var(--on-brand); border-radius: var(--radius-md); padding: 8px 10px; }
  html.tema-nuevo .table-bar strong { color: var(--on-brand); }
  html.tema-nuevo .table-back-btn { background: var(--c2); color: var(--on-accent); border: 0; border-radius: var(--radius-sm); }
  html.tema-nuevo .table-more-btn { background: var(--c1-3); color: var(--on-brand); border: 0; border-radius: var(--radius-sm); }
  html.tema-nuevo #tableBar .table-bar-actions .btn-secondary { background: var(--c1-3); color: var(--on-brand); }
}
@media (max-width: 720px) {
  html.tema-nuevo #productGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  html.tema-nuevo #productGrid .product-btn:nth-child(4n+2),
  html.tema-nuevo #productGrid .product-btn:nth-child(4n+3) { --k-bg: var(--c2); --k-fg: var(--on-accent); }
  /* en 3 columnas: tablero de ajedrez */
  html.tema-nuevo #productGrid .product-btn:nth-child(even) { --k-bg: var(--c1); --k-fg: var(--c2); }
  html.tema-nuevo #productGrid .product-btn.sold-out { --k-bg: #d9d3c4; --k-fg: #6b7178; }
  html.tema-nuevo #productGrid .product-btn { min-height: 112px; padding: 9px 9px 30px; border-radius: var(--radius-sm); font-size: 12.5px; gap: 3px; box-shadow: none; }
  html.tema-nuevo #productGrid .product-btn .product-name { max-width: 82%; }
  html.tema-nuevo #productGrid .product-btn .price { left: 9px; bottom: 9px; font-size: 15px; }
  html.tema-nuevo #productGrid .product-img,
  html.tema-nuevo #productGrid .product-img-placeholder { display: flex; right: -14px; bottom: -14px; width: 66px; height: 66px; border-width: 3px; padding: 7px 18px 18px 7px; }
  html.tema-nuevo #productGrid .product-img-placeholder svg { width: 22px; height: 22px; transform: translate(-5px, -5px); }
  html.tema-nuevo #productGrid .product-extras-flag { font-size: 10px; padding: 1px 6px; }
  html.tema-nuevo #productGrid .product-left { font-size: 10px; padding: 2px 6px; }
  html.tema-nuevo #productGrid .product-qty-badge { top: 5px; right: 5px; min-width: 24px; height: 24px; font-size: 13px; line-height: 24px; }
  html.tema-nuevo #productGrid .product-soldout-tag, html.tema-nuevo #productGrid .product-btn:has(.product-qty-badge) .product-soldout-tag { top: auto; bottom: 32px; left: 8px; right: auto; padding: 3px 7px; font-size: 9.5px; }
  html.tema-nuevo .category-tab { min-height: 44px; padding: 0 14px; font-size: 13px; }
  html.tema-nuevo #view-mesas .table-card { font-size: 20px; }
  html.tema-nuevo .main { background: var(--bg); }
}

/* --- Ajustes → «Cómo se ve el TPV» (se ve con cualquier aspecto) --- */
.asp-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.asp-modo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 2px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.asp-modo.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--text) inset; }
.asp-modo small { color: var(--muted); font-size: 12.5px; }
.asp-modo-dibujo { display: flex; gap: 5px; align-items: flex-end; width: 100%; height: 54px; padding: 8px; box-sizing: border-box; border-radius: 8px; margin-bottom: 6px; }
.asp-modo-dibujo i { flex: 1; height: 26px; border-radius: 5px; box-sizing: border-box; }
.asp-colores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.asp-color label { display: block; font-weight: 700; margin-bottom: 6px; }
.asp-color small { display: block; margin-top: 4px; }
.asp-color-fila { display: flex; gap: 8px; align-items: center; }
.asp-color-fila input[type="color"] { width: 52px; height: 44px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; flex: none; }
.asp-color-fila input[type="text"] { width: 110px; font-family: monospace; text-transform: lowercase; }
.asp-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.asp-preset { display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.asp-preset span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.asp-preset.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; font-weight: 700; }
.asp-aviso { grid-column: 1 / -1; padding: 9px 12px; border-radius: 8px; background: #fff6e5; color: #7a5200; font-size: 13.5px; }
.asp-muestra { grid-column: 1 / -1; border-radius: 10px; overflow: hidden; background: #ebe7df; font-family: 'Jost', sans-serif; }
.asp-m-barra { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12.5px; }
.asp-m-barra b { margin-right: 8px; font-size: 13.5px; }
.asp-m-barra span { padding: 5px 9px; border-radius: 6px; }
.asp-m-cuerpo { display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 6px; padding: 8px; }
.asp-m-tecla { min-height: 62px; padding: 7px 8px; border-radius: 7px; font-weight: 700; font-size: 11.5px; line-height: 1.25; }
.asp-m-tecla b { font-size: 14px; }
.asp-m-cobrar { display: flex; flex-direction: column; gap: 5px; }
.asp-m-cobrar span { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-weight: 700; font-size: 12px; }
.asp-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.asp-botones .btn-secondary { width: auto; }
@media (max-width: 560px) { .asp-modos, .asp-colores { grid-template-columns: 1fr; } }
@media (max-width: 420px) { html.tema-nuevo .mob-label { display: none; } html.tema-nuevo .mob-ticket-btn { justify-content: space-between; } }

/* ==========================================================================
   Piezas comunes con el estilo H1 (06-10-2026, 2ª vuelta): títulos con la
   raya de color, tarjetas con cabecera oscura, pestañas, botones, campos,
   cifras, tablas y avisos — igual que en las maquetas de todas las pantallas.
   ========================================================================== */
/* Títulos de pantalla: MAYÚSCULAS con la raya del acento a la izquierda */
html.tema-nuevo .view > h1.page-title,
html.tema-nuevo .view h1.page-title {
  position: relative; padding-left: 22px; margin-bottom: 16px;
  font: 700 30px/1.1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; color: var(--text);
}
html.tema-nuevo .view h1.page-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 6px; border-radius: 3px; background: var(--c2); }
html.tema-nuevo .view-intro, html.tema-nuevo .ini-sub { color: var(--muted); font-size: 14px; }
@media (min-width: 981px) { html.tema-nuevo.barra-arriba #view-venta > h1.page-title { display: none; } }

/* Avisos de arriba: franja del acento */
html.tema-nuevo .alert-banner { background: var(--c2); color: var(--on-accent); border: 0; border-radius: var(--radius-md); font-weight: 600; padding: 13px 18px; }
html.tema-nuevo .alert-banner:hover { background: var(--c2); filter: brightness(1.04); }
html.tema-nuevo .alert-banner a, html.tema-nuevo .alert-banner strong, html.tema-nuevo .alert-banner b { color: inherit; }
html.tema-nuevo .alert-banner.alert-banner-danger { background: #c62828; color: #fff; }

/* Tarjetas: el primer título hace de cabecera oscura */
html.tema-nuevo .card { --pad: 22px; }
html.tema-nuevo .card > h3:first-child,
html.tema-nuevo .card > .card-head:first-child {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 18px; padding: 15px var(--pad);
  background: var(--c1); color: var(--on-brand); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font: 700 15.5px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em;
}
html.tema-nuevo .card h3 { font-family: var(--font-heading); }
html.tema-nuevo .ini-card { --pad: 18px; padding: 0 var(--pad) 14px; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
html.tema-nuevo .ini-card h3, html.tema-nuevo .ini-card h3.sep {
  margin: 0 calc(-1 * var(--pad)) 8px; padding: 14px var(--pad); background: var(--c1); color: var(--on-brand);
  font: 700 15px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em;
}
html.tema-nuevo .ini-card h3:not(:first-child) { margin-top: 14px; }
html.tema-nuevo .ini-av { padding: 12px 0; font-size: 15px; border-top-color: #eee; }
html.tema-nuevo .ini-av .i { width: 12px; height: 12px; flex-basis: 12px; border: 2px solid var(--c1); }
html.tema-nuevo .ini-av .i.ambar { background: var(--c2); }
html.tema-nuevo .ini-av button { color: var(--text); text-transform: uppercase; font: 700 13px/1 var(--font-heading); letter-spacing: .04em; padding: 9px 14px; border-radius: var(--radius-sm); }
html.tema-nuevo .ini-av:first-of-type button, html.tema-nuevo .ini-card h3 + .ini-av button { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .ini-row { padding: 9px 0; font-size: 14.5px; border-top-color: #eee; }
html.tema-nuevo .ini-row b { font-size: 16px; }

/* Cifras (Inicio, Caja, Gastos, Informes…) */
html.tema-nuevo .ini-kpi, html.tema-nuevo .stat-box, html.tema-nuevo .gx-kpi {
  border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card);
}
html.tema-nuevo .ini-kpi { padding: 16px 16px 14px; }
html.tema-nuevo .ini-kpi .l, html.tema-nuevo .stat-box .label, html.tema-nuevo .gx-kpi-label, html.tema-nuevo .gx-kpi > span:first-child {
  color: inherit; font: 700 12px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .08em;
}
html.tema-nuevo .ini-kpi b { font: 700 36px/1.1 var(--font-heading); margin: 6px 0 4px; }
html.tema-nuevo .stat-box .value, html.tema-nuevo .gx-kpi-num, html.tema-nuevo .gx-kpi > strong { color: var(--text); font: 700 26px/1.15 var(--font-heading); }
html.tema-nuevo .ini-kpi .s { color: inherit; opacity: .8; }
/* En Inicio, las cuatro cifras en los dos colores (como las teclas) */
html.tema-nuevo .ini-kpi:nth-child(4n+1), html.tema-nuevo .ini-kpi:nth-child(4n) { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .ini-kpi:nth-child(4n+2), html.tema-nuevo .ini-kpi:nth-child(4n+3) { background: var(--c1); color: var(--on-brand); }
html.tema-nuevo .ini-kpi:nth-child(4n+2) b, html.tema-nuevo .ini-kpi:nth-child(4n+3) b { color: var(--c2); }
html.tema-nuevo .ini-kpi:hover { border: 0; filter: brightness(1.05); }
html.tema-nuevo .ini-kpi .s.up, html.tema-nuevo .ini-kpi .s.dn { opacity: 1; font-weight: 600; }
html.tema-nuevo .ini-quick button { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); text-transform: uppercase; font: 700 14px/1 var(--font-heading); letter-spacing: .03em; padding: 14px 16px; border-radius: var(--radius-sm); }
html.tema-nuevo .ini-quick button:first-child { background: var(--c2); color: var(--on-accent); }

/* Pestañas de cada pantalla (Ajustes, Gastos, Informes, Almacén…) */
html.tema-nuevo .gx-tabs { gap: 6px; border-bottom: 0; padding-bottom: 4px; flex-wrap: wrap; overflow: visible; }
html.tema-nuevo .gx-tabs button {
  min-height: 42px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: #fff; color: var(--text);
  font: 700 13.5px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .03em; box-shadow: var(--shadow-sm);
}
html.tema-nuevo .gx-tabs button:hover { background: #f6f3ee; }
html.tema-nuevo .gx-tabs button.active { background: var(--c1); color: var(--c2); box-shadow: inset 0 -4px 0 var(--c2); border: 0; }
html.tema-nuevo .range-btns { border: 0; gap: 4px; background: transparent; overflow: visible; }
html.tema-nuevo .range-btns button { border: 0 !important; border-radius: var(--radius-sm); background: #fff; color: var(--text); text-transform: uppercase; font: 700 12.5px/1 var(--font-heading); letter-spacing: .03em; padding: 9px 12px; box-shadow: var(--shadow-sm); }
html.tema-nuevo .range-btns button.active { background: var(--c1); color: var(--c2); }

/* Botones */
html.tema-nuevo .btn-primary, html.tema-nuevo .btn-green {
  background: var(--c2); color: var(--on-accent); border: 0; border-radius: var(--radius-sm); box-shadow: none;
  font: 700 15px/1.1 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; min-height: 46px;
}
html.tema-nuevo .btn-primary:hover, html.tema-nuevo .btn-green:hover { filter: brightness(1.05); }
html.tema-nuevo .btn-secondary { background: #fff; color: var(--text); border: 0; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); font-weight: 600; }
html.tema-nuevo .btn-secondary:hover { background: var(--c1); color: var(--on-brand); border: 0; }
html.tema-nuevo .btn-link { color: var(--text); text-transform: uppercase; font: 700 13px/1.2 var(--font-heading); letter-spacing: .04em; }
html.tema-nuevo .btn-link:hover { color: var(--accent-ink); text-decoration: none; }
html.tema-nuevo .btn-red { border-radius: var(--radius-sm); text-transform: uppercase; font: 700 13.5px/1.1 var(--font-heading); letter-spacing: .04em; }
html.tema-nuevo .gx-new-btn { background: var(--c2); color: var(--on-accent); border: 0; text-transform: uppercase; font-family: var(--font-heading); font-weight: 700; letter-spacing: .04em; }

/* Campos: fondo crema, sin borde; etiquetas en mayúsculas pequeñas */
html.tema-nuevo input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
html.tema-nuevo select, html.tema-nuevo textarea {
  background-color: #f4f1ea; border: 1.5px solid transparent; border-radius: var(--radius-sm); color: var(--text);
}
html.tema-nuevo .product-search input, html.tema-nuevo #productSearch { background-color: #fff; }
html.tema-nuevo input:not([type="checkbox"]):not([type="radio"]):focus, html.tema-nuevo select:focus, html.tema-nuevo textarea:focus { border-color: var(--c1); background-color: #fff; }
html.tema-nuevo .form-group > label, html.tema-nuevo .form-group label:first-child {
  font: 700 12px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--text);
}
html.tema-nuevo input[type="checkbox"], html.tema-nuevo input[type="radio"] { accent-color: var(--c1); }
/* Interruptores: oscuros con la bolita del acento */
html.tema-nuevo .tpv-switch input:checked + .tpv-switch-track { background: var(--c1); }
html.tema-nuevo .tpv-switch input:checked + .tpv-switch-track::after { background: var(--c2); }

/* Tablas */
html.tema-nuevo th { color: var(--text); font: 700 12px/1.2 var(--font-heading); letter-spacing: .08em; border-bottom: 3px solid var(--c1); }
html.tema-nuevo td { border-bottom-color: #eeeae3; }
html.tema-nuevo table.heat th { border-bottom: 0; }

/* Etiquetas */
html.tema-nuevo .badge { border-radius: 6px; text-transform: uppercase; font: 700 11px/1.3 var(--font-heading); letter-spacing: .06em; padding: 4px 9px; }
html.tema-nuevo .badge-info { background: var(--c1); color: var(--c2); }
html.tema-nuevo .badge-muted { background: #efebe4; color: var(--text); }

/* --- Barra de arriba, como la maqueta: solo el logo, nombres de pantalla
       siempre que quepan, grupos que se ponen del acento y fila de abajo
       con pestañas en mayúsculas subrayadas --- */
html.tema-nuevo.barra-arriba .sidebar h2.sidebar-title > span { display: none; }
html.tema-nuevo.barra-arriba .sidebar h2.sidebar-title { margin: 0 12px 0 0; width: 40px; height: 40px; justify-content: center; border-radius: 50%; background: var(--c1-3); }
html.tema-nuevo.barra-arriba .sidebar-title-icon { width: 24px; height: 24px; flex-basis: 24px; }
html.tema-nuevo.barra-arriba .sidebar button.nav-btn,
html.tema-nuevo.barra-arriba .sidebar a.nav-btn { padding: 0 9px; gap: 5px; font-size: 13.5px; font-weight: 500; }
html.tema-nuevo.barra-arriba .sidebar button.nav-btn.active { padding: 0 11px; }
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items[data-grp="dia"] { padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--c1-3); }
html.tema-nuevo.barra-arriba .sidebar .nav-group,
html.tema-nuevo.barra-arriba .sidebar .nav-group.nav-group-fijo { border: 0; margin-left: 2px; padding: 0 10px; font-size: 13.5px; font-weight: 500; }
html.tema-nuevo.barra-arriba .sidebar .nav-group.dentro { background: var(--c2); color: var(--on-accent); font-weight: 600; }
html.tema-nuevo.barra-arriba .sidebar .nav-group.abierto:not(.dentro) { background: var(--c1-3); color: var(--on-brand); }
html.tema-nuevo.barra-arriba .sidebar[data-grupo="gestion"] .nav-grp-items[data-grp="gestion"],
html.tema-nuevo.barra-arriba .sidebar[data-grupo="config"] .nav-grp-items[data-grp="config"] { padding: 0 14px; gap: 6px; min-height: 48px; align-items: stretch; background: var(--c1-2); border-top: 0; }
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items:not([data-grp="dia"]) button.nav-btn {
  height: auto; padding: 0 12px; border-radius: 0; background: transparent; color: var(--c1-txt); opacity: .85;
  font: 600 14px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .03em; box-shadow: inset 0 -3px 0 transparent;
}
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items:not([data-grp="dia"]) button.nav-btn:hover { opacity: 1; background: transparent; }
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items:not([data-grp="dia"]) button.nav-btn.active { background: transparent; color: var(--c2); opacity: 1; box-shadow: inset 0 -3px 0 var(--c2); }
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items:not([data-grp="dia"]) .nav-icon { display: none; }
/* A la derecha, como en la maqueta: papelera, cajón, la persona (solo la inicial) y Fichar */
html.tema-nuevo.barra-arriba .barra-dcha .top-user-text, html.tema-nuevo.barra-arriba .barra-dcha .top-user-swap { display: none; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-who { padding: 0; border-radius: 50%; }
html.tema-nuevo.barra-arriba .barra-dcha .top-user-avatar { width: 38px; height: 38px; font-size: 15px; }
html.tema-nuevo.barra-arriba .barra-dcha .top-drawer .td-txt { display: none; }
html.tema-nuevo.barra-arriba .barra-dcha .top-drawer { width: 40px; padding: 0; justify-content: center; }
html.tema-nuevo.barra-arriba .sidebar .logout-btn { padding: 0 10px; font-size: 13px; }

/* --- Comanda en el ordenador, como la maqueta --- */
@media (min-width: 981px) {
  html.tema-nuevo.barra-arriba #view-venta #tableBar { display: none !important; }
  html.tema-nuevo.barra-arriba #view-venta:has(#tableBar[hidden]) .tb-movido { display: none !important; }
  /* Categorías: una fila de teclas iguales */
  html.tema-nuevo.barra-arriba #view-venta #categoryTabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; margin-bottom: 10px; }
  html.tema-nuevo.barra-arriba #view-venta #categoryTabs .category-tab { justify-content: center; text-align: center; min-height: 54px; padding: 0 10px; }
  html.tema-nuevo.barra-arriba #view-venta .product-search { order: 2; margin-bottom: 10px; }
  html.tema-nuevo.barra-arriba #view-venta #categoryTabs { order: 1; }
  html.tema-nuevo.barra-arriba #view-venta #productGrid { order: 3; }
  /* Dividir, Cancelar, Mover… abajo */
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido {
    order: 4; flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px;
    margin: 10px 0 0; padding: 0; border: 0;
  }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido .btn-secondary {
    min-height: 50px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: #fff; color: var(--text);
    box-shadow: var(--shadow-sm); font: 600 14px/1.1 var(--font-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido .btn-secondary:hover { background: var(--c1); color: var(--on-brand); }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido .tb-largo { display: none; }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido .tb-corto { display: inline; }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido .mobile-only { display: none; }
  /* Cabecera del ticket: «NUEVA VENTA · B 2» y las personas */
  html.tema-nuevo.barra-arriba #view-venta:not(:has(#tableBar[hidden])) #ticketCard .ticket-sheet-head > h3 { display: none; }
  html.tema-nuevo.barra-arriba #ticketCard .ticket-sheet-head { min-height: 58px; }
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido { flex: 1; display: flex; align-items: center; gap: 0; min-width: 0; white-space: nowrap; color: var(--on-brand); font: 700 20px/1.1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; }
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido > .ui-icon,
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido .tb-mesa-lbl { display: none; }
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido .table-bar-title { display: inline; color: var(--on-brand); font: inherit; margin: 0; }
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido .table-bar-title::after { content: " · "; }
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido #currentTableName { color: var(--on-brand); font: inherit; overflow: hidden; text-overflow: ellipsis; }
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido .guests-chip { margin-left: auto; padding: 4px 8px; border: 0; background: transparent; color: var(--c1-muted); font: 500 14px/1 var(--font-body); text-transform: none; letter-spacing: 0; }
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido .guests-chip:hover { color: var(--on-brand); }
}
/* Líneas del ticket: nombre en mayúsculas y el precio fuerte */
html.tema-nuevo .ticket-line-name { font: 600 15px/1.25 var(--font-heading); text-transform: uppercase; letter-spacing: .01em; }
html.tema-nuevo .ticket-line { padding: 10px 0; }

/* --- Mesas: los botones arriba a la derecha, a la altura del título --- */
@media (min-width: 981px) {
  html.tema-nuevo.barra-arriba #view-mesas { position: relative; }
  html.tema-nuevo.barra-arriba #view-mesas .mesas-toolbar .view-toggle { position: absolute; top: 0; right: 0; gap: 6px; }
  html.tema-nuevo.barra-arriba #view-mesas .mesas-toolbar { margin-top: 0; }
  html.tema-nuevo.barra-arriba #view-mesas .mesas-edit-btn,
  html.tema-nuevo.barra-arriba #view-mesas .view-toggle-btn { min-height: 46px; }
  html.tema-nuevo.barra-arriba #view-mesas .view-toggle-btn { width: 46px; }
}
html.tema-nuevo .mesas-edit-btn { border: 0; background: #fff; color: var(--text); box-shadow: var(--shadow-sm); padding: 0 16px; font: 700 14px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
html.tema-nuevo #zoneTabs .category-tab { min-height: 50px; padding: 0 18px; }
html.tema-nuevo .category-tab.quick-sale-tab { font: 700 14.5px/1 var(--font-heading); text-transform: uppercase; }
html.tema-nuevo .table-card > span:first-child, html.tema-nuevo .table-card { letter-spacing: 0; }
/* «Salir» al final de la fila de Configuración */
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items[data-grp="config"] .logout-btn { margin: 0 0 0 auto; align-self: center; height: 34px; }
/* Ticket: el punto entre «NUEVA VENTA» y la mesa */
@media (min-width: 981px) {
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido .table-bar-title::after { content: "·"; margin: 0 10px; }
}
/* Caja: las cifras en baldosas sueltas; «Debería haber» en oscuro */
html.tema-nuevo .stat-strip { gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; margin: 12px 0 6px; }
html.tema-nuevo .stat-strip > div { padding: 14px 16px; border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); }
html.tema-nuevo .stat-strip > div > span { color: var(--text); font: 700 12px/1.2 var(--font-heading); letter-spacing: .08em; }
html.tema-nuevo .stat-strip b { display: block; margin-top: 6px; font: 700 24px/1.1 var(--font-heading); }
html.tema-nuevo .stat-strip .destacado { background: var(--c1); }
html.tema-nuevo .stat-strip .destacado > span { color: var(--c2); }
html.tema-nuevo .stat-strip .destacado b { color: var(--c2); font-size: 30px; }
html.tema-nuevo .card:has(> .caja-top) { background: transparent; box-shadow: none; padding: 0; }
html.tema-nuevo .caja-top h3 { color: var(--muted); font: 500 15px/1.3 var(--font-body); }
/* Un poco más juntos para que en 1366-1440 px quepan los nombres (como la maqueta) */
html.tema-nuevo.barra-arriba .sidebar button.nav-btn,
html.tema-nuevo.barra-arriba .sidebar a.nav-btn { padding: 0 7px; gap: 5px; font-size: 13px; }
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items:not([data-grp="dia"]) button.nav-btn { padding: 0 12px; font-size: 14px; }
html.tema-nuevo.barra-arriba .sidebar button.nav-btn.active { padding: 0 10px; }
html.tema-nuevo.barra-arriba .sidebar .nav-group, html.tema-nuevo.barra-arriba .sidebar .nav-group.nav-group-fijo { padding: 0 8px; font-size: 13px; gap: 4px; }
html.tema-nuevo.barra-arriba .sidebar .barra-dcha { gap: 6px; padding-left: 6px; }
html.tema-nuevo.barra-arriba .app-shell .sidebar { padding: 0 10px; }
html.tema-nuevo.barra-arriba .sidebar .nav-grp-items[data-grp="dia"] { height: 62px; }

/* ==========================================================================
   Pantalla por pantalla, como las maquetas (06-10-2026)
   ========================================================================== */
/* Pestañas que se llaman distinto en cada pantalla, mismo aspecto */
html.tema-nuevo .inf-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 0; margin-bottom: 14px; }
html.tema-nuevo .inf-tabs button { min-height: 42px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: #fff; color: var(--text); font: 700 13.5px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .03em; box-shadow: var(--shadow-sm); }
html.tema-nuevo .inf-tabs button.active { background: var(--c1); color: var(--c2); box-shadow: inset 0 -4px 0 var(--c2); border: 0; }
html.tema-nuevo .res-filtros button, html.tema-nuevo .res-seg button, html.tema-nuevo .pr-chip, html.tema-nuevo .ar-chips button, html.tema-nuevo .gx-chips button {
  border: 0 !important; border-radius: var(--radius-sm); background: transparent; color: var(--text); box-shadow: none;
  font: 700 13px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .03em;
}
html.tema-nuevo .res-filtros button.on, html.tema-nuevo .res-seg button.on, html.tema-nuevo .pr-chip.on, html.tema-nuevo .ar-chips button.on, html.tema-nuevo .gx-chips button.on {
  background: var(--c1) !important; color: var(--c2) !important; box-shadow: inset 0 -3px 0 var(--c2);
}

/* Cifras en fila: la primera del acento y la última oscura (como Caja e Informes) */
html.tema-nuevo .stat-row { gap: 8px; }
html.tema-nuevo .stat-row > .stat-box { flex: 1 1 140px; padding: 14px 16px; }
html.tema-nuevo #statRow > .stat-box:first-child, html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(2), html.tema-nuevo .res-kpis > div:first-child { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo #statRow > .stat-box:first-child .value, html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(2) .gx-kpi-num, html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(2) > strong { color: var(--on-accent); }
html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(3), html.tema-nuevo .res-kpis > div:nth-child(2), html.tema-nuevo .res-kpis > div:nth-child(3) { background: var(--c1); color: var(--on-brand); }
html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(3) .gx-kpi-num, html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(3) > strong,
html.tema-nuevo .res-kpis > div:nth-child(2) b, html.tema-nuevo .res-kpis > div:nth-child(3) b { color: var(--c2); }
html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(3) .gx-kpi-label, html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(3) .gx-kpi-sub,
html.tema-nuevo .gx-kpis > .gx-kpi:nth-child(3) > span { color: var(--c1-txt); }
html.tema-nuevo .res-kpis > div:nth-child(4), html.tema-nuevo .res-kpis > div:nth-child(5) { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .res-kpis > div { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 12px 16px; }
html.tema-nuevo .res-kpis > div small { color: inherit; font: 700 12px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; }
html.tema-nuevo .res-kpis > div b { font: 700 28px/1.1 var(--font-heading); }
html.tema-nuevo .res-dia { background: #fff; border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
html.tema-nuevo .res-dia-txt { font: 700 14px/1 var(--font-heading); text-transform: uppercase; }

/* Pedidos online: cada pedido con su cabecera oscura */
html.tema-nuevo .oo2-col-tit { font: 700 15px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .05em; }
html.tema-nuevo .oo2-card { border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); padding: 0 16px 14px; overflow: hidden; }
html.tema-nuevo .oo2-card.oo2-nuevos { box-shadow: 0 0 0 3px var(--c2), var(--shadow-card); }
html.tema-nuevo .oo2-card.oo2-tarde { box-shadow: 0 0 0 3px #c62828, var(--shadow-card); }
html.tema-nuevo .oo2-top { margin: 0 -16px 12px; padding: 11px 16px; background: var(--c1); color: var(--on-brand); align-items: center; }
html.tema-nuevo .oo2-top .oo2-origen { background: var(--c2); color: var(--on-accent); border: 0; border-radius: 6px; font: 700 12px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .05em; }
html.tema-nuevo .oo2-top .oo2-cuando { color: var(--c1-txt); }
html.tema-nuevo .oo2-top .oo2-cuando.oo2-rojo { color: #ff8a80; }
html.tema-nuevo .oo2-grande { font-family: var(--font-heading); }
html.tema-nuevo .oo2-btn { border-radius: var(--radius-sm); font: 700 15px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
html.tema-nuevo .oo2-btn.oo2-btn-ok { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .oo2-btn:not(.oo2-btn-ok) { background: var(--c1); color: var(--c2); }
html.tema-nuevo .oo2-mini { border: 0; border-radius: var(--radius-sm); background: #f3efe8; }
html.tema-nuevo .oo2-ritmo { border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); }
html.tema-nuevo .oo2-cifra b { font-family: var(--font-heading); }
html.tema-nuevo .oo2-nuevo { background: var(--c2); color: var(--on-accent); border: 0; border-radius: var(--radius-sm); font: 700 15px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
html.tema-nuevo .oo2-vacio { border: 2px dashed #cfc6b2; border-radius: var(--radius-lg); background: transparent; }

/* Tirar y contar: tres baldosas grandes en los dos colores */
html.tema-nuevo .ar-actions { gap: 10px; }
html.tema-nuevo .ar-big {
  min-height: 190px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px;
  border: 0; border-radius: var(--radius-lg); background: var(--c2); color: var(--on-accent); box-shadow: none; text-align: left;
}
html.tema-nuevo .ar-big > svg { width: 42px; height: 42px; padding: 12px; box-sizing: content-box; border-radius: var(--radius-md); background: var(--c1); color: var(--c2); }
html.tema-nuevo .ar-big strong { display: block; font: 700 26px/1.05 var(--font-heading); text-transform: uppercase; letter-spacing: .01em; color: inherit; }
html.tema-nuevo .ar-big small { color: inherit; opacity: .8; font-size: 14px; }
html.tema-nuevo .ar-big:hover { filter: brightness(1.05); }

/* Recepción: un proveedor por baldosa */
html.tema-nuevo .rec-h { font: 700 17px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
html.tema-nuevo .rec-sups { gap: 10px; }
html.tema-nuevo .rec-sup { border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--text); box-shadow: var(--shadow-card); padding: 16px 18px; min-height: 150px; }
html.tema-nuevo .rec-sup:nth-child(3n+1) { background: var(--c1); color: var(--c2); }
html.tema-nuevo .rec-sup:nth-child(3n+2) { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .rec-sup strong { font: 700 16px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; color: inherit; }
html.tema-nuevo .rec-sup .rec-sup-n { font: 700 26px/1.1 var(--font-heading); color: inherit; }
html.tema-nuevo .rec-sup .hint-text { color: inherit; opacity: .8; }
html.tema-nuevo .rec-otros { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 4px 14px; }
html.tema-nuevo .rec-otros summary { font: 700 14px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .03em; padding: 10px 0; }

/* Fichajes: dentro → acento; en pausa → oscuro */
html.tema-nuevo .clock-row { border: 0; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
html.tema-nuevo .clock-row:has(.st-trabajando) { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .clock-row:has(.st-pausa) { background: var(--c1); color: var(--c2); }
html.tema-nuevo .clock-row .clock-row-text strong { font: 700 16px/1.2 var(--font-heading); text-transform: uppercase; }
html.tema-nuevo .clock-row:has(.st-trabajando) .top-user-state, html.tema-nuevo .clock-row:has(.st-pausa) .top-user-state { color: inherit; }
html.tema-nuevo .clock-row .top-user-avatar { background: var(--c1); color: var(--c2); }
html.tema-nuevo .clock-row:has(.st-pausa) .top-user-avatar { background: var(--c2); color: var(--c1); }

/* Listas con ficha al lado (Productos, Camareros, Extras): lo elegido en oscuro */
html.tema-nuevo .pr-list, html.tema-nuevo .pr-det, html.tema-nuevo .ext-list, html.tema-nuevo .ext-detail { border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); }
html.tema-nuevo .pr-li, html.tema-nuevo .ext-g { border-radius: var(--radius-sm); }
html.tema-nuevo .pr-li .pr-n, html.tema-nuevo .ext-g b { font: 700 14.5px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .01em; }
html.tema-nuevo .pr-li.on, html.tema-nuevo .ext-g.on { background: var(--c1) !important; color: var(--on-brand); }
html.tema-nuevo .pr-li.on .pr-n, html.tema-nuevo .ext-g.on b { color: var(--c2); }
html.tema-nuevo .pr-li.on .pr-p, html.tema-nuevo .ext-g.on small, html.tema-nuevo .pr-li.on .pr-ic { color: var(--c1-txt); }
html.tema-nuevo .pr-grp { font: 700 12px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; }
html.tema-nuevo .pr-dh .pr-t { font: 700 22px/1.15 var(--font-heading); text-transform: uppercase; }
html.tema-nuevo .cam-av { background: var(--c1); color: var(--c2); }
html.tema-nuevo .pr-li.on .cam-av { background: var(--c2); color: var(--c1); }
html.tema-nuevo .cam-tag, html.tema-nuevo .ext-pill { border-radius: 6px; background: #efebe4; color: var(--text); font: 700 11px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; }
html.tema-nuevo .ext-pill.req { background: var(--c1); color: var(--c2); }
html.tema-nuevo .pr-li.on .cam-tag, html.tema-nuevo .ext-g.on .ext-pill { background: var(--c2); color: var(--c1); }
html.tema-nuevo .mod-chip { border-radius: 6px; background: #f1ece2; color: var(--text); font: 600 12.5px/1.3 var(--font-heading); }

/* Ventas: barra del día */
html.tema-nuevo .ventas-dia { background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
html.tema-nuevo .ventas-buscar { background-color: #fff !important; box-shadow: var(--shadow-sm); }
html.tema-nuevo .status-pill { border-radius: 6px; text-transform: uppercase; font: 700 11px/1.3 var(--font-heading); letter-spacing: .06em; }
html.tema-nuevo .ext-switch input:checked + span { background: var(--c1); }
html.tema-nuevo .ext-switch input:checked + span::after { background: var(--c2); }
html.tema-nuevo .ext-name { font: 700 18px/1.2 var(--font-heading); text-transform: uppercase; }

/* --- Cocina (pantalla de comandas), como la maqueta: cabecera de cada comanda
       del color del tiempo (blanca → acento → rojo) y botones grandes --- */
html.tema-nuevo .kds-header { background: var(--c1); }
html.tema-nuevo .kds-header .category-tab { background: var(--c1-3) !important; color: var(--c1-txt); box-shadow: none; border: 0 !important; }
html.tema-nuevo .kds-header .category-tab.active { background: var(--c2) !important; color: var(--on-accent); box-shadow: none; }
html.tema-nuevo .kds-card:not(.kds-cancel-mark):not(.kds-cancel) { border: 0; padding: 0 16px 16px; overflow: hidden; background: #fff; }
html.tema-nuevo .kds-card:not(.kds-cancel-mark):not(.kds-cancel) .kds-card-top { margin: 0 -16px; padding: 12px 16px; border-bottom: 3px solid var(--c1); background: #fff; }
html.tema-nuevo .kds-card.t-warn:not(.kds-cancel-mark) .kds-card-top { background: var(--c2); }
html.tema-nuevo .kds-card.t-warn:not(.kds-cancel-mark) .kds-card-origin { color: var(--on-accent); }
html.tema-nuevo .kds-card.t-late:not(.kds-cancel-mark) .kds-card-top { background: #c62828; }
html.tema-nuevo .kds-card.t-late:not(.kds-cancel-mark) .kds-card-origin { color: #fff; }
html.tema-nuevo .kds-card.t-late:not(.kds-cancel-mark):not(.kds-cancel) { background: #fff; box-shadow: 0 0 0 3px #c62828; }
html.tema-nuevo .kds-card-origin { font: 700 18px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; }
html.tema-nuevo .kds-card-top .badge, html.tema-nuevo .kds-card-top [class*="kds-zona"] { background: var(--c1); color: var(--c2); }
html.tema-nuevo .kds-item-line { font: 600 18px/1.3 var(--font-heading); text-transform: uppercase; }
html.tema-nuevo .kds-item-line span { color: var(--muted); }
html.tema-nuevo .kds-timer { font-family: var(--font-heading); }
html.tema-nuevo .kds-timer.ok { color: var(--text); }
html.tema-nuevo .kds-timer.warn { color: var(--accent-ink); }
html.tema-nuevo .kds-action-btn { border-radius: var(--radius-sm); font: 700 17px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .05em; }
html.tema-nuevo .kds-action-btn.pendiente { background: var(--c1); color: var(--c2); }
html.tema-nuevo .kds-action-btn.preparando { background: var(--c2); color: var(--on-accent); }

/* Comanda en pantallas medianas: el ticket deja el nombre de la mesa y los botones caben */
@media (min-width: 981px) and (max-width: 1279px) {
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido .table-bar-title { display: none; }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido .btn-secondary { font-size: 13px; padding: 0 4px; }
}
@media (max-width: 720px) { html.tema-nuevo .card { --pad: 14px; } html.tema-nuevo .view h1.page-title { font-size: 22px; padding-left: 16px; } html.tema-nuevo .view h1.page-title::before { width: 5px; } }
html.tema-nuevo .top-user-clock { background: var(--c2); border-color: var(--c2); color: var(--on-accent); }

/* ==========================================================================
   Cabecera de pantalla «título + botones» y botones con icono (06-10-2026).
   Se ven con cualquier aspecto; con el nuevo, en mayúsculas y colores H1.
   ========================================================================== */
.om-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.om-head-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.om-head-tx h1.page-title { margin: 0; }
.om-head-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.om-btn { width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--radius-sm); font: 700 15px/1.1 var(--font-heading); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); }
.om-btn svg { width: 17px; height: 17px; flex: none; }
.om-btn:hover { filter: brightness(1.06); }
.om-btn-acento { background: var(--accent); color: var(--on-accent, #fff); }
.om-btn-oscuro { background: var(--brand); color: var(--c2, #fff); }
.om-btn-blanco { background: #fff; color: var(--text); }
.om-h3-dcha { margin-left: auto; font: 500 13px/1 var(--font-body); text-transform: none; letter-spacing: 0; opacity: .75; }
html.tema-nuevo .om-btn { text-transform: uppercase; letter-spacing: .04em; }
html.tema-nuevo .ini-top { align-items: center; }
html.tema-nuevo .om-head-tx h1.page-title + * { padding-left: 22px; }
html.tema-nuevo .card > h3:first-child, html.tema-nuevo .ini-card h3 { display: flex; align-items: center; gap: 10px; }

/* Inicio: columna derecha con tres tarjetas, barras y quién trabaja */
.ini-col-dcha { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ini-barra { align-items: center; }
.ini-barra-n { flex: 0 0 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ini-barra-b { flex: 1; height: 14px; border-radius: 4px; background: #f1ece2; overflow: hidden; }
.ini-barra-b i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.ini-barra-b i.o { background: var(--brand); }
.ini-barra b { flex: 0 0 34px; text-align: right; }
.ini-trab { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 6px 0 2px; }
.ini-trab-p { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.ini-trab-p span { font-size: 13px; opacity: .85; }
.ini-trab-p.fuera { opacity: .55; }
html.tema-nuevo .ini-trab-p:nth-child(odd) { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .ini-trab-p:nth-child(even) { background: var(--c1); color: var(--c2); }
html.tema-nuevo .ini-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
html.tema-nuevo .ini-card-mirar { align-self: stretch; }
html.tema-nuevo .ini-kpis { gap: 10px; margin-bottom: 14px; }
@media (min-width: 981px) { html.tema-nuevo .ini-solo-movil { display: none; } }
@media (max-width: 720px) { .om-head-acts { width: 100%; } .om-head-acts .om-btn { flex: 1 1 auto; } .ini-barra-n { flex-basis: 110px; } }
/* Avisos de arriba con campana y «Ir a… ›» a la derecha */
.alert-banner .ab-ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; margin-right: 8px; }
.alert-banner .ab-ir { float: right; font-weight: 700; margin-left: 12px; }
html.tema-nuevo .alert-banner:has(.ab-ir) { display: flex; align-items: center; gap: 4px; }
html.tema-nuevo .alert-banner .ab-ir { float: none; margin-left: auto; }
/* Raya del título que abarca el título y la línea de debajo */
html.tema-nuevo .om-head-tx { position: relative; padding-left: 22px; }
html.tema-nuevo .om-head-tx::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 6px; border-radius: 3px; background: var(--c2); }
html.tema-nuevo .view .om-head-tx h1.page-title { margin: 0; padding-left: 0; }
html.tema-nuevo .view .om-head-tx h1.page-title::before { display: none; }
html.tema-nuevo .om-head-tx h1.page-title + * { padding-left: 0; }

/* --- Mesas (2ª vuelta): resumen, leyenda, contadores y estados como la maqueta --- */
.mesas-leyenda { display: none; }
#mesasActs .view-toggle { display: flex; gap: 6px; align-items: center; }
.table-card-info { font-size: 12px; font-weight: 600; font-family: var(--font-body); color: var(--muted); }
.zone-count { font-weight: 700; opacity: .8; }
html.tema-nuevo .mesas-toolbar { margin: 0 0 12px; align-items: center; }
html.tema-nuevo .mesas-leyenda { display: flex; gap: 16px; align-items: center; margin-left: auto; color: var(--muted); font-size: 14px; }
html.tema-nuevo .mesas-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
html.tema-nuevo .mesas-leyenda i { width: 16px; height: 16px; border-radius: 4px; display: inline-block; box-sizing: border-box; }
html.tema-nuevo .mesas-leyenda i.l { border: 2px dashed #cfc6b2; background: #fff; }
html.tema-nuevo .mesas-leyenda i.o { background: var(--c1); }
html.tema-nuevo .mesas-leyenda i.e { background: var(--c2); }
html.tema-nuevo #mesasActs .mesas-edit-btn { min-height: 46px; }
html.tema-nuevo #mesasActs .view-toggle-btn { width: 46px; min-height: 46px; padding: 0; }
html.tema-nuevo #view-mesas > .card { margin-bottom: 0; }
html.tema-nuevo .table-card { gap: 4px; }
html.tema-nuevo .table-card .table-card-name { font: 700 24px/1.1 var(--font-heading); }
html.tema-nuevo .table-card .table-card-seats { font: 500 13px/1.2 var(--font-body); color: var(--muted); }
html.tema-nuevo .table-card.occupied .table-card-total { color: var(--c2); font: 700 22px/1.1 var(--font-heading); }
html.tema-nuevo .table-card.occupied .table-card-info { color: var(--c1-muted); font: 500 13px/1.2 var(--font-body); }
html.tema-nuevo .table-card.espera, html.tema-nuevo .table-card.occupied.espera, html.tema-nuevo .table-card.occupied.bill {
  background: var(--c2); color: var(--on-accent); border: 4px solid var(--c1); box-shadow: none;
}
html.tema-nuevo .table-card.espera .table-card-total, html.tema-nuevo .table-card.bill .table-card-total { color: var(--on-accent); }
html.tema-nuevo .table-card.espera .table-card-info, html.tema-nuevo .table-card.bill .table-card-info { color: var(--on-accent); opacity: .75; }
html.tema-nuevo .table-card .table-bill-badge, html.tema-nuevo .table-card .table-qr-badge, html.tema-nuevo .table-card .table-call-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 10px; border-radius: 6px; background: var(--c1); color: var(--c2);
  font: 700 11.5px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; animation: none;
}
html.tema-nuevo .table-card .table-bill-badge .ui-icon { display: none; }
html.tema-nuevo .table-card .table-pending-send { background: color-mix(in srgb, var(--c2) 25%, #fff); color: var(--text); }
html.tema-nuevo .table-card.occupied:not(.espera) .table-pending-send { background: var(--c1-3); color: var(--c2); }
html.tema-nuevo .table-card .table-res-badge { background: color-mix(in srgb, var(--c2) 22%, #fff); color: var(--text); }
@media (min-width: 721px) {
  html.tema-nuevo #view-mesas .table-list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  html.tema-nuevo #view-mesas .table-card { min-height: 128px; }
}
@media (max-width: 980px) { html.tema-nuevo .mesas-leyenda { display: none; } }
html.tema-nuevo #view-mesas .table-card.occupied .table-card-total { font-size: 22px; }
html.tema-nuevo #view-mesas .table-card .table-card-seats, html.tema-nuevo #view-mesas .table-card .table-card-info { font-size: 13px; }

/* --- Caja (2ª vuelta): dos columnas como la maqueta --- */
.caja-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.caja-col-dcha { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.caja-col-dcha > .card, .caja-cols > .card { margin-bottom: 0; }
.caja-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.caja-seg button { width: auto; min-height: 50px; border: 0; border-radius: var(--radius-sm); background: #f3efe8; color: var(--text); font: 700 15px/1.1 var(--font-heading); cursor: pointer; }
.caja-seg button.on { background: var(--brand); color: var(--c2, #fff); }
.caja-importe input { flex: 1 1 140px; }
.caja-importe input#movReason { flex: 2 1 200px; }
.caja-apuntar { width: 100%; margin-top: 6px; }
.caja-vieja .ab-ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
@media (max-width: 980px) { .caja-cols { grid-template-columns: 1fr; } }
html.tema-nuevo .caja-seg button { text-transform: uppercase; letter-spacing: .03em; }
html.tema-nuevo #cajaContent { background: transparent; box-shadow: none; padding: 0; margin-bottom: 14px; }
html.tema-nuevo #cajaContent > .warn-notice { background: var(--c2); color: var(--on-accent); border: 0; border-radius: var(--radius-md); padding: 13px 18px; font-weight: 600; margin-bottom: 12px; }
html.tema-nuevo #cajaContent .caja-arqueo:not([hidden]) { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 22px; border-top: 0; margin-top: 12px; }
html.tema-nuevo #cajaContent .stat-strip { margin: 0; }
html.tema-nuevo #cajaContent .stat-strip .destacado { flex-basis: 260px; }
html.tema-nuevo .caja-cols .card { min-height: 0; }
html.tema-nuevo #cajaMovimientosCard .caja-gasto { margin-top: 4px; }
html.tema-nuevo .main:has(#view-caja.active) #cashboxAlert { display: none !important; }

/* --- Ventas (2ª vuelta) --- */
.pago-pill { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #efebe4; }
html.tema-nuevo .pago-pill { font: 700 11px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; }
html.tema-nuevo .pago-pill.pago-tarjeta { background: var(--c1); color: var(--c2); }
html.tema-nuevo .pago-pill.pago-efectivo { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .status-pill { padding: 3px 9px; }
html.tema-nuevo .status-anulada { text-decoration: none; }
html.tema-nuevo #view-ventas td { font-size: 14.5px; }
html.tema-nuevo #view-ventas td:nth-child(5) { font-weight: 700; }
html.tema-nuevo .ventas-bar { gap: 8px; align-items: center; margin-bottom: 14px; }
html.tema-nuevo .ventas-dia { background: transparent; box-shadow: none; gap: 6px; align-items: center; }
html.tema-nuevo .ventas-dia .btn-secondary { min-height: 46px; min-width: 46px; padding: 0 12px; }
html.tema-nuevo #ventasDia { min-height: 46px; margin: 0; background: var(--c1) !important; color: var(--c2) !important; color-scheme: dark; font: 700 15px/1 var(--font-heading); text-transform: uppercase; border: 0; }
html.tema-nuevo .ventas-buscar { min-height: 46px; margin: 0; }
html.tema-nuevo #view-ventas td .btn-secondary, html.tema-nuevo #view-ventas td .btn-red { min-height: 32px; padding: 4px 10px; font-size: 12.5px; }

/* --- Informes (2ª vuelta): pestañas a la altura del título, cifras en
       baldosas y tarjetas en dos columnas --- */
html.tema-nuevo .card > .report-head:first-child {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 16px; padding: 10px var(--pad); min-height: 50px; box-sizing: border-box;
  background: var(--c1); color: var(--on-brand); border-radius: var(--radius-lg) var(--radius-lg) 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
html.tema-nuevo .card > .report-head:first-child h3 { margin: 0; color: var(--on-brand); font: 700 15.5px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; }
html.tema-nuevo .card > .report-head:first-child .range-btns button { background: transparent; color: var(--c1-txt); box-shadow: none; }
html.tema-nuevo .card > .report-head:first-child .range-btns button.active { background: var(--c2); color: var(--on-accent); }
@media (min-width: 981px) {
  html.tema-nuevo #view-informes { position: relative; }
  html.tema-nuevo #view-informes > .inf-tabs { position: absolute; top: 0; right: 0; margin: 0; }
  html.tema-nuevo #infPane-hoy:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  html.tema-nuevo #infPane-hoy > * { grid-column: 1 / -1; margin-bottom: 0; }
  html.tema-nuevo #infPane-hoy > .card:has(#peakHoursTable) { grid-column: 1; order: 2; }
  html.tema-nuevo #infPane-hoy > .card:has(#extrasReportBody) { grid-column: 2; order: 2; }
  html.tema-nuevo #infPane-hoy > .card:has(#topProductsBody) { grid-column: 1; order: 3; }
  html.tema-nuevo #infPane-hoy > #otroInformeCard { grid-column: 2; order: 3; }
  html.tema-nuevo #infPane-hoy > .card:has(#cancelacionesBody) { order: 4; }
  html.tema-nuevo #infPane-hoy > #fcInformeCard { order: 5; }
  html.tema-nuevo #infPane-hoy > .stat-row { order: 1; }
}
html.tema-nuevo #statRow { gap: 8px; margin-bottom: 0; }
html.tema-nuevo #statRow > .stat-box { flex: 1 1 150px; }
html.tema-nuevo #statRow > .stat-box:last-child { background: var(--c1); color: var(--c2); }
html.tema-nuevo #statRow > .stat-box:last-child .value, html.tema-nuevo #statRow > .stat-box:last-child .label { color: var(--c2); }
html.tema-nuevo .stat-box .value { font-size: 24px; }
html.tema-nuevo .heatmap-table th { border-bottom: 0; color: var(--muted); }
html.tema-nuevo .heatmap-cell { border-radius: 3px; }
.heatmap-cell[style*="--a"] { background: rgba(107, 66, 38, var(--a)); }
html.tema-nuevo .heatmap-cell { background: #f4f1ea; }
html.tema-nuevo .heatmap-cell[style*="--a"] { background: color-mix(in srgb, var(--c2) calc(var(--a) * 100%), #f4f1ea); }
@media (min-width: 981px) { html.tema-nuevo #infPane-hoy:not([hidden]) { grid-auto-flow: row dense; } }
html.tema-nuevo #view-informes .stat-row { display: flex; flex-wrap: wrap; gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
html.tema-nuevo #view-informes .stat-row .stat-box { flex: 1 1 140px; border: 0 !important; margin: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 12px 14px; background: #fff; }
html.tema-nuevo #view-informes .stat-row .stat-box .label { font-size: 11.5px; }
html.tema-nuevo #view-informes .stat-row .stat-box .value { font-size: 21px; margin-top: 4px; }
html.tema-nuevo #view-informes #statRow .stat-box:first-child { background: var(--c2); }
html.tema-nuevo #view-informes #statRow .stat-box:last-child { background: var(--c1); }
html.tema-nuevo #view-informes .card .stat-row .stat-box { background: #f6f3ee; box-shadow: none; }
html.tema-nuevo #view-informes .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); }
html.tema-nuevo #view-informes .stat-row .stat-box .value { font-size: 19px; white-space: nowrap; }
html.tema-nuevo #view-informes .stat-row .stat-box .label { white-space: normal; }

/* --- Almacén (2ª vuelta) --- */
html.tema-nuevo .alm-head { align-items: center; }
html.tema-nuevo .alm-head-tx { position: relative; padding-left: 22px; }
html.tema-nuevo .alm-head-tx::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 6px; border-radius: 3px; background: var(--c2); }
html.tema-nuevo .alm-head-tx h1.page-title { margin: 0; padding-left: 0; }
html.tema-nuevo .alm-head-tx h1.page-title::before { display: none; }
html.tema-nuevo .alm-head-tx .gx-intro { margin: 2px 0 0; }
html.tema-nuevo .alm-buscar { background: #fff; border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); min-height: 48px; }
html.tema-nuevo .alm-buscar input { background-color: #fff !important; }
html.tema-nuevo #escKpis > div:nth-child(2) { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo #escKpis > div:nth-child(2) > span { color: var(--on-accent); }
html.tema-nuevo #escKpis > div:nth-child(3) { background: var(--c1); color: var(--c2); }
html.tema-nuevo #escKpis > div:nth-child(3) > span, html.tema-nuevo #escKpis > div:nth-child(3) b, html.tema-nuevo #escKpis > div:nth-child(3) b * { color: var(--c2); }
html.tema-nuevo #escTableBody .esc-fc-ok, html.tema-nuevo #escTableBody .esc-fc-mid, html.tema-nuevo #escTableBody .esc-fc-bad {
  display: inline-block; padding: 3px 9px; border-radius: 6px; font: 700 12px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .04em;
}
html.tema-nuevo #escTableBody .esc-fc-ok { background: #e3f3e3; color: #1b6e2a; }
html.tema-nuevo #escTableBody .esc-fc-mid { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo #escTableBody .esc-fc-bad { background: #fdecea; color: #b3261e; }
html.tema-nuevo #escTableBody .esc-fc-word { font-size: inherit; color: inherit; }
html.tema-nuevo #escAiCard .card, html.tema-nuevo .esc-ai-card { border-radius: var(--radius-lg); }
html.tema-nuevo .gx-chips button { min-height: 38px; padding: 0 12px; background: #fff; box-shadow: var(--shadow-sm); }
html.tema-nuevo .gx-chips button.on, html.tema-nuevo .gx-chips button.active { background: var(--c1) !important; color: var(--c2) !important; }
html.tema-nuevo .gx-chip { border: 0 !important; border-radius: var(--radius-sm) !important; background: #fff !important; color: var(--text) !important; box-shadow: var(--shadow-sm); font: 700 13px/1 var(--font-heading) !important; text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px !important; }
html.tema-nuevo .gx-chip.active { background: var(--c1) !important; color: var(--c2) !important; box-shadow: inset 0 -3px 0 var(--c2); }
html.tema-nuevo .gx-chip .gx-count { background: #efebe4; color: var(--text); }
html.tema-nuevo .gx-chip.active .gx-count { background: var(--c2); color: var(--c1); }

/* --- Gastos (2ª vuelta): cabecera con ?, Subir un papel; avisos del acento;
       cabeceras oscuras en todas las tarjetas de Gastos --- */
.gx-help-btn.gx-help-big { width: 46px !important; height: 46px; min-width: 46px; border-radius: var(--radius-sm); border: 0; background: #fff; color: var(--text); font-size: 17px; }
html.tema-nuevo .gx-notice.warn { background: var(--c2); color: var(--on-accent); border: 0; font-weight: 600; align-items: center; padding: 13px 18px; }
html.tema-nuevo .gx-notice.warn .btn-link { margin-left: auto; color: inherit; }
html.tema-nuevo .gx-notice.warn > div { display: flex; align-items: center; gap: 8px; flex: 1; }
html.tema-nuevo .gx-notice.info { background: #fff; border: 0; box-shadow: var(--shadow-sm); color: var(--text); }
html.tema-nuevo .card > .gx-card-head:first-child {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 16px; padding: 12px var(--pad); min-height: 50px; box-sizing: border-box;
  background: var(--c1); color: var(--on-brand); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
html.tema-nuevo .card > .gx-card-head:first-child h3 { color: var(--on-brand); font: 700 15.5px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; }
html.tema-nuevo .card > .gx-card-head:first-child .hint-text { color: var(--c1-muted); }
html.tema-nuevo .card > .gx-card-head:first-child .btn-link { color: var(--c2); }
html.tema-nuevo .card > .gx-card-head:first-child .btn-secondary { background: var(--c1-3); color: var(--on-brand); box-shadow: none; }
html.tema-nuevo .card > .gx-card-head:first-child .btn-primary { min-height: 38px; }
html.tema-nuevo .gx-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
html.tema-nuevo .gx-kpi .gx-kpi-label { order: -1; }
html.tema-nuevo .card .gx-kpi .gx-kpi-num, html.tema-nuevo .gx-kpis .gx-kpi .gx-kpi-num { font: 700 26px/1.15 var(--font-heading); }
html.tema-nuevo .gx-kpi[class*="gx-luz-"] { border-left: 0; }
html.tema-nuevo .gini-acc-b { border: 0; border-radius: var(--radius-md); background: #f6f3ee; }
html.tema-nuevo .gini-acc-b:first-child { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo .gini-acc-b:first-child .hint-text { color: inherit; opacity: .8; }
.om-head-tx .gx-intro, .alm-head-tx .gx-intro { margin: 2px 0 0 !important; }
html.tema-nuevo #view-ventas td .btn-secondary, html.tema-nuevo #view-ventas td .btn-red { background: transparent; box-shadow: none; color: var(--text); text-transform: uppercase; font: 700 12px/1 var(--font-heading); letter-spacing: .05em; padding: 6px 6px; }
html.tema-nuevo #view-ventas td .btn-red { color: #c62828; }
html.tema-nuevo #view-ventas td .btn-secondary:hover { background: #f3efe8; color: var(--text); }
html.tema-nuevo #view-ventas td:last-child { text-align: right; white-space: nowrap; }

/* --- Productos / Camareros / Ingredientes (2ª vuelta): lista y ficha con
       cabecera oscura, como la maqueta --- */
.pr-list-head { display: none; }
html.tema-nuevo .pr-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: var(--c1); color: var(--on-brand); font: 700 15px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
html.tema-nuevo .pr-list-head small { font: 500 13px/1 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--c1-muted); }
html.tema-nuevo .pr-list { overflow: hidden; }
html.tema-nuevo .pr-list-top { border-bottom: 0; padding: 14px 16px 6px; }
html.tema-nuevo .pr-search { background: #f4f1ea; border: 0; border-radius: var(--radius-sm); }
html.tema-nuevo .pr-search input { background: transparent !important; }
html.tema-nuevo .pr-grid { grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1fr); gap: 14px; }
html.tema-nuevo .pr-det { padding: 0 20px 18px; overflow: hidden; }
html.tema-nuevo .pr-det > .pr-dh { margin: 0 -20px 16px; padding: 12px 20px; min-height: 58px; background: var(--c1); color: var(--on-brand); border: 0; }
html.tema-nuevo .pr-det > .pr-dh .pr-t { color: var(--on-brand); font: 700 18px/1.15 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
html.tema-nuevo .pr-det > .pr-dh .pr-s, html.tema-nuevo .pr-det > .pr-dh .hint-text { color: var(--c1-muted); }
html.tema-nuevo .pr-det > .pr-dh .btn-link { color: var(--c2); }
html.tema-nuevo .pr-det > .pr-dh .btn-red { background: transparent; color: #ff8a80; box-shadow: inset 0 0 0 1.5px #ff8a80; }
html.tema-nuevo .pr-det > .pr-dh .pr-foto { background: #fff; border-radius: var(--radius-sm); }
html.tema-nuevo .pr-det > .pr-dh .cam-av { background: var(--c2); color: var(--c1); }
html.tema-nuevo .pr-det label, html.tema-nuevo .cam-row .l { font: 700 12px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
html.tema-nuevo .pr-det label input, html.tema-nuevo .pr-det label select { font: 500 15.5px/1.2 var(--font-body); text-transform: none; letter-spacing: 0; min-height: 46px; }
html.tema-nuevo .pr-det .pr-sws label { text-transform: none; letter-spacing: 0; font: 600 14.5px/1 var(--font-body); }
html.tema-nuevo .pr-al .lb { font: 700 12px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
html.tema-nuevo .pr-al button { border-radius: 6px; background: #f1ece2; border: 0; font: 700 11.5px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
html.tema-nuevo .pr-al button.on, html.tema-nuevo .pr-al button[aria-pressed="true"] { background: var(--c1); color: var(--c2); }
html.tema-nuevo .pr-vin { border-radius: var(--radius-sm); background: #f6f3ee; }
html.tema-nuevo .pr-li { min-height: 44px; }
html.tema-nuevo .pr-li .pr-p { font: 700 16px/1 var(--font-heading); }
html.tema-nuevo .pr-head { align-items: center; }
html.tema-nuevo .pr-head .pr-acts .btn-secondary { min-height: 46px; text-transform: uppercase; font: 700 13.5px/1 var(--font-heading); letter-spacing: .04em; }
html.tema-nuevo .pr-head .pr-acts .btn-primary { width: auto; padding: 0 18px; }
html.tema-nuevo .cam-av-big { width: 64px !important; height: 64px !important; font-size: 26px !important; }
html.tema-nuevo .ing-grid .pr-list-head { border-radius: 0; }
/* Camareros como la maqueta: lista estrecha, elegido en el acento, campos uno debajo de otro */
html.tema-nuevo .pr-grid.cam-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
html.tema-nuevo .cam-grid .pr-li { min-height: 56px; margin: 4px 10px; border-radius: var(--radius-sm); }
html.tema-nuevo .cam-grid .pr-li.on { background: var(--c2) !important; color: var(--on-accent); }
html.tema-nuevo .cam-grid .pr-li.on .pr-n { color: var(--on-accent); }
html.tema-nuevo .cam-grid .pr-li.on .cam-av { background: var(--c1); color: var(--c2); }
html.tema-nuevo .cam-grid .pr-li.on .cam-tag { background: var(--c1); color: var(--c2); }
html.tema-nuevo .cam-grid .pr-li .cam-av { width: 38px; height: 38px; font-size: 15px; }
html.tema-nuevo .cam-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; border: 0; padding: 6px 0; }
html.tema-nuevo .cam-row select { width: 100%; }
html.tema-nuevo #view-camareros.active { display: flex; flex-direction: column; }
html.tema-nuevo #view-camareros > .pr-head { order: 0; }
html.tema-nuevo #view-camareros > p.hint-text { order: 1; margin: -10px 0 14px 22px; font-size: 14px; }
html.tema-nuevo #view-camareros > .pr-grid { order: 2; }
html.tema-nuevo #view-camareros > details { order: 3; margin-top: 14px; }
html.tema-nuevo .pr-grid:not(.cam-grid) .pr-li.on { background: color-mix(in srgb, var(--c2) 18%, #fff) !important; color: var(--text); }
html.tema-nuevo .pr-grid:not(.cam-grid) .pr-li.on .pr-n { color: var(--text); }
html.tema-nuevo .pr-grid:not(.cam-grid) .pr-li.on .pr-p, html.tema-nuevo .pr-grid:not(.cam-grid) .pr-li.on .pr-ic { color: var(--text); }

/* --- Extras (2ª vuelta) --- */
.ext-seg-row, .ext-dh-regla, .ext-list-tit { display: none; }
html.tema-nuevo .ext-list { --pad: 16px; padding: 0 16px 16px; overflow: hidden; }
html.tema-nuevo .ext-list > .ext-list-tit { display: flex; margin: 0 -16px 14px; }
html.tema-nuevo .ext-search { background-color: #f4f1ea !important; }
html.tema-nuevo .ext-g { min-height: 58px; padding: 10px 12px; border-bottom: 1px solid #f0ece5; }
html.tema-nuevo .ext-g small { color: var(--muted); }
html.tema-nuevo .ext-detail { --pad: 20px; padding: 0 20px 18px; overflow: hidden; }
html.tema-nuevo .ext-detail > .ext-dh { margin: 0 -20px 16px; padding: 10px 20px; min-height: 54px; background: var(--c1); color: var(--on-brand); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
html.tema-nuevo .ext-detail > .ext-dh > select, html.tema-nuevo .ext-detail > .ext-dh > .ext-tools { display: none; }
html.tema-nuevo .ext-detail > .ext-dh .ext-name { background: transparent !important; color: var(--on-brand); border: 0; padding: 4px 0; min-height: 0; font: 700 16px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; flex: 1; }
html.tema-nuevo .ext-detail > .ext-dh .ext-name:focus { background: var(--c1-3) !important; padding: 4px 8px; }
html.tema-nuevo .ext-detail > .ext-dh .ext-dh-regla { display: inline; margin-left: auto; color: var(--c1-muted); font-size: 13.5px; white-space: nowrap; }
html.tema-nuevo .ext-detail > .ext-dh .mod-max { color: var(--c1-txt); }
html.tema-nuevo .ext-seg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
html.tema-nuevo .ext-seg { display: flex; gap: 4px; flex-wrap: wrap; }
html.tema-nuevo .ext-seg button { width: auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: 700 13.5px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
html.tema-nuevo .ext-seg button.on { background: var(--c1); color: var(--c2); box-shadow: inset 0 -3px 0 var(--c2); }
html.tema-nuevo .ext-tools-b { margin-left: auto; display: flex; align-items: center; gap: 6px; }
html.tema-nuevo .ext-tools-b .btn-link.ext-danger { background: #c62828; color: #fff; border-radius: var(--radius-sm); padding: 9px 14px; }
html.tema-nuevo .ext-rule { margin: 0 0 8px; }
html.tema-nuevo .ext-table td { padding: 8px 6px; }
html.tema-nuevo .ext-table .ext-in:not(.solid):not(.ext-price) { background: transparent !important; font: 700 15.5px/1.2 var(--font-heading); }
html.tema-nuevo .ext-table .ext-in:not(.solid):not(.ext-price):focus { background: #f4f1ea !important; }
html.tema-nuevo .ext-ing { border: 0; border-radius: 6px; background: #f1ece2; color: var(--text); font: 700 11.5px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; padding: 5px 10px; }
html.tema-nuevo .ext-add { background: var(--c1) !important; color: var(--c2) !important; box-shadow: none; text-transform: uppercase; font: 700 14px/1 var(--font-heading); letter-spacing: .04em; min-height: 42px; }
html.tema-nuevo .ext-prod-btn { background: var(--c2) !important; color: var(--on-accent) !important; }
html.tema-nuevo .ext-products > strong { font: 700 12.5px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; }
html.tema-nuevo .ext-head { align-items: center; }
html.tema-nuevo .card.ext-list > h3.ext-list-tit:first-child { margin: 0 -16px 14px; padding: 15px 16px; }
html.tema-nuevo .ext-detail > .ext-dh input.ext-name { color: var(--on-brand) !important; background-color: transparent !important; border: 0 !important; }
html.tema-nuevo .ext-detail > .ext-dh input.ext-name:focus { background-color: var(--c1-3) !important; }
html.tema-nuevo #view-camareros > p.hint-text { margin: -26px 0 18px 22px; }
html.tema-nuevo #view-camareros > .pr-head { margin-bottom: 18px; }

/* --- Ajustes (2ª vuelta): tarjetas en dos columnas, pestañas de colores --- */
@media (min-width: 1100px) {
  html.tema-nuevo #view-ajustes.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
  html.tema-nuevo #view-ajustes > * { grid-column: 1 / -1; }
  html.tema-nuevo #view-ajustes > .card[data-ajtab] { grid-column: auto; max-width: none !important; }
  html.tema-nuevo #view-ajustes > #ajFunciones, html.tema-nuevo #view-ajustes > #ajVerifactu,
  html.tema-nuevo #view-ajustes > #ajReservas, html.tema-nuevo #view-ajustes > #ajCarta { grid-column: 1 / -1; }
}
html.tema-nuevo #view-ajustes > .card[data-ajtab] { max-width: none !important; }
html.tema-nuevo .aj-tabs button { white-space: nowrap; }
html.tema-nuevo #businessForm .btn-primary, html.tema-nuevo #view-ajustes .card > form > .btn-primary { width: 100%; }
html.tema-nuevo .asp-color label { font: 700 12px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; }

/* --- Reservas (2ª vuelta) --- */
.res-tit { display: none; }
html.tema-nuevo .res-main.card, html.tema-nuevo .res-ficha.card { --pad: 18px; padding: 0 18px 16px; overflow: hidden; }
html.tema-nuevo .res-main.card > h3.res-tit:first-child, html.tema-nuevo .res-ficha.card > h3.res-tit:first-child { display: flex; margin: 0 -18px 14px; }
html.tema-nuevo .res-ficha.card > .res-f-head:first-child { margin: 0 -18px 14px; padding: 13px 18px; background: var(--c1); color: var(--on-brand); }
html.tema-nuevo .res-ficha.card > .res-f-head:first-child h3 { color: var(--on-brand); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
html.tema-nuevo .res-ficha.card > .res-f-head:first-child .res-f-cerrar { color: var(--on-brand); background: transparent; }
@media (min-width: 981px) {
  html.tema-nuevo #view-reservas { position: relative; }
  html.tema-nuevo #view-reservas .res-acc { position: absolute; top: 0; right: 0; }
  html.tema-nuevo #view-reservas .res-seg { margin-left: auto; }
}
html.tema-nuevo .res-acc .btn-secondary, html.tema-nuevo .res-acc .btn-primary { width: auto; min-height: 46px; padding: 0 18px; text-transform: uppercase; font: 700 14.5px/1 var(--font-heading); letter-spacing: .04em; }
html.tema-nuevo .res-acc .btn-secondary { background: #fff; }
html.tema-nuevo .res-dia { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 6px; }
html.tema-nuevo .res-dia > button { width: 46px; height: 46px; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); color: var(--text); }
html.tema-nuevo .res-dia-txt { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: var(--radius-sm); background: var(--c1); color: var(--c2); }
html.tema-nuevo .res-dia .res-hoy { width: auto; background: #fff; }
html.tema-nuevo .res-seg { border: 0; background: transparent; gap: 4px; overflow: visible; }
html.tema-nuevo .res-seg button { min-height: 46px; padding: 0 16px; background: #fff !important; box-shadow: var(--shadow-sm); }
html.tema-nuevo .res-seg button.on { background: var(--c1) !important; }
html.tema-nuevo .res-filtros { align-items: center; }
html.tema-nuevo .res-filtros button { min-height: 38px; padding: 0 14px; }
html.tema-nuevo .res-filtros input { flex-basis: 100%; border: 0; border-radius: var(--radius-sm); background-color: #f4f1ea; margin-top: 6px; }
html.tema-nuevo .res-fila.sel { border-color: var(--c1); background: color-mix(in srgb, var(--c2) 15%, #fff); }
html.tema-nuevo .res-h b, html.tema-nuevo .res-mesa { color: var(--text); }
html.tema-nuevo .res-pill { border-radius: 6px; text-transform: uppercase; font: 700 11px/1.3 var(--font-heading); letter-spacing: .06em; }
html.tema-nuevo .res-kpis > div.ambar b, html.tema-nuevo .res-kpis > div.rojo b { color: inherit; }
html.tema-nuevo .res-pill.cafe { background: var(--c1); color: var(--c2); } html.tema-nuevo .res-pill.ambar { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo #arTirarBtn { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo #arTandaBtn, html.tema-nuevo #arTandaBtn[hidden] ~ #arContarBtn { background: var(--c1); color: var(--c2); }
html.tema-nuevo #arTandaBtn:not([hidden]) ~ #arContarBtn { background: var(--c2); color: var(--on-accent); }
html.tema-nuevo #arTandaBtn > svg, html.tema-nuevo #arTandaBtn[hidden] ~ #arContarBtn > svg { background: var(--c2); color: var(--c1); }
html.tema-nuevo #arTandaBtn:not([hidden]) ~ #arContarBtn > svg { background: var(--c1); color: var(--c2); }
html.tema-nuevo .ar-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --- Fichajes (2ª vuelta): estado como etiqueta a la derecha --- */
html.tema-nuevo .clock-row .clock-dot { width: auto; height: auto; padding: 4px 9px; border-radius: 6px; background: #efebe4; color: var(--text); font: 700 11px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; }
html.tema-nuevo .clock-row .clock-dot::before { content: "Fuera"; }
html.tema-nuevo .clock-row .clock-dot.st-trabajando { background: var(--c1); color: var(--c2); }
html.tema-nuevo .clock-row .clock-dot.st-trabajando::before { content: "Dentro"; }
html.tema-nuevo .clock-row .clock-dot.st-pausa { background: var(--c2); color: var(--c1); }
html.tema-nuevo .clock-row .clock-dot.st-pausa::before { content: "Pausa"; }
html.tema-nuevo .clock-list, html.tema-nuevo .fichaje-board { gap: 10px; }
html.tema-nuevo .clock-row { min-height: 70px; padding: 12px 14px; }
html.tema-nuevo .clock-row .top-user-avatar { width: 44px; height: 44px; font-size: 18px; }

/* --- Recepción: la raya del título abarca la línea de debajo --- */
html.tema-nuevo .rec-top > div:first-child { position: relative; padding-left: 22px; }
html.tema-nuevo .rec-top > div:first-child::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 6px; border-radius: 3px; background: var(--c2); }
html.tema-nuevo .rec-top h1.page-title { padding-left: 0; margin-bottom: 2px; }
html.tema-nuevo .rec-top h1.page-title::before { display: none; }
html.tema-nuevo .rec-top-btns .gx-help-btn { width: 46px !important; height: 46px; border-radius: var(--radius-sm); border: 0; background: #fff; color: var(--text); }
html.tema-nuevo .rec-top-btns .btn-primary { width: auto; padding: 0 18px; }
html.tema-nuevo .rec-sups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
html.tema-nuevo .rec-sup { width: auto; align-items: flex-start; text-align: left; justify-content: space-between; display: flex; flex-direction: column; }

/* ==========================================================================
   Móvil (≤ 720 px) con el aspecto nuevo, como las maquetas del móvil
   ========================================================================== */
.movil-barra, .movil-menu-top { display: none; }
@media (max-width: 720px) {
  html.tema-nuevo .movil-barra {
    display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; z-index: 240; height: 58px; padding: 0 12px;
    background: var(--c1); color: var(--on-brand); box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }
  html.tema-nuevo .movil-barra .mb-hueco { width: 42px; flex: none; }
  html.tema-nuevo .movil-barra .mb-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 19px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; }
  html.tema-nuevo .movil-barra .mb-yo { flex: none; width: 38px; height: 38px; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: var(--c2); color: var(--on-accent); font: 700 15px/1 var(--font-heading); }
  html.tema-nuevo .sidebar-toggle { top: 8px !important; left: 12px !important; width: 42px !important; height: 42px !important; border-radius: var(--radius-sm) !important; background: var(--c2); color: var(--on-accent); box-shadow: none; z-index: 260; }
  html.tema-nuevo .sidebar-toggle.hidden { display: flex !important; }
  html.tema-nuevo body:has(#view-venta.active #tableBar:not([hidden])) .movil-barra { display: none; }
  html.tema-nuevo .main { padding-top: 70px; }
  html.tema-nuevo body:has(#view-venta.active #tableBar:not([hidden])) .main { padding-top: 12px; }
  /* La persona y Fichar van en la barra y en el menú */
  html.tema-nuevo #topUser { display: none !important; }
  /* El título ya sale en la barra */
  html.tema-nuevo .view h1.page-title { display: none; }
  html.tema-nuevo .om-head-tx { padding-left: 0; }
  html.tema-nuevo .om-head-tx::before, html.tema-nuevo .alm-head-tx::before, html.tema-nuevo .rec-top > div:first-child::before { display: none; }
  html.tema-nuevo .alm-head-tx, html.tema-nuevo .rec-top > div:first-child { padding-left: 0; }
  html.tema-nuevo .om-head { margin-bottom: 10px; }
  html.tema-nuevo .alert-banner { font-size: 13.5px; padding: 10px 12px; }
  /* Mesas: Venta rápida a lo ancho; zonas en tres iguales */
  html.tema-nuevo #mesasActs { width: 100%; }
  html.tema-nuevo #mesasActs { flex-wrap: nowrap; }
  html.tema-nuevo #mesasActsBtns { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
  html.tema-nuevo #mesasActsBtns .quick-sale-btn { flex: 1 1 100%; min-height: 52px; }
  html.tema-nuevo #mesasActsBtns .om-btn:not(.quick-sale-btn) { display: none; }
  /* Cuadrícula / plano: al lado de Venta rápida (editar mesas, en el ordenador) */
  html.tema-nuevo #mesasActs .view-toggle { flex: 0 0 auto; }
  html.tema-nuevo #mesasActs .view-toggle .mesas-edit-btn { display: none; }
  html.tema-nuevo #mesasActs .view-toggle-btn { width: 52px; min-height: 52px; }
  html.tema-nuevo #zoneTabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; padding: 0; overflow: visible; }
  html.tema-nuevo #zoneTabs .category-tab { justify-content: center; padding: 0 6px; min-height: 46px; font-size: 13px; }
  html.tema-nuevo #zoneTabs .zone-count { display: none; }
  html.tema-nuevo #view-mesas .table-card { min-height: 100px; padding: 10px 4px; }
  html.tema-nuevo #view-mesas .table-card .table-card-name { font-size: 18px; }
  html.tema-nuevo #view-mesas .table-card.occupied .table-card-total { font-size: 17px; }
  html.tema-nuevo #view-mesas .table-card .table-card-seats, html.tema-nuevo #view-mesas .table-card .table-card-info { font-size: 11.5px; }
  /* Barra de abajo de la comanda: «Ver ticket» */
  html.tema-nuevo .mob-label { display: block !important; text-transform: uppercase; font: 700 13px/1 var(--font-heading); }
  html.tema-nuevo .mob-comandar .comanda-count { display: none; }

  /* Menú a pantalla completa con baldosas */
  html.tema-nuevo .sidebar, html.tema-nuevo .sidebar.open { width: 100%; max-width: none; background: var(--bg); color: var(--text); box-shadow: none; padding: 70px 12px 24px; }
  html.tema-nuevo .sidebar.open { transform: none; }
  html.tema-nuevo .sidebar-backdrop.show { display: none; }
  html.tema-nuevo .sidebar h2.sidebar-title, html.tema-nuevo .sidebar .sidebar-brand, html.tema-nuevo .sidebar button.nav-more-btn { display: none !important; }
  html.tema-nuevo .movil-menu-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  html.tema-nuevo .movil-menu-top button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; width: auto; border: 0; border-radius: var(--radius-sm); background: #fff; color: var(--text); font: 700 15px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .03em; box-shadow: var(--shadow-sm); }
  html.tema-nuevo .movil-menu-top button svg { width: 18px; height: 18px; }
  html.tema-nuevo .movil-menu-top .mm-fichar { background: var(--c2); color: var(--on-accent); }
  html.tema-nuevo .movil-menu-top button[hidden] { display: none; }
  html.tema-nuevo .sidebar .nav-group, html.tema-nuevo .sidebar .nav-group.nav-group-fijo, html.tema-nuevo .sidebar:not(.show-all) .nav-group { display: flex !important; margin: 14px 0 6px; padding: 0 2px; width: auto; background: none; color: var(--muted); opacity: 1; font: 700 12px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; pointer-events: none; }
  html.tema-nuevo .sidebar .nav-group.nav-group-fijo { display: none !important; }
  /* B2 (21-10-2026): un grupo sin nada que enseñar (perfil sin Configuración) no deja su título vacío */
  html.tema-nuevo .sidebar .nav-group[hidden] { display: none !important; }
  html.tema-nuevo .sidebar .nav-group .nav-group-arrow { display: none; }
  html.tema-nuevo .sidebar .nav-grp-items, html.tema-nuevo .sidebar .nav-grp-items.cerrado { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.tema-nuevo .sidebar button.nav-btn.nav-extra, html.tema-nuevo .sidebar:not(.show-all) button.nav-btn.nav-extra { display: flex; }
  html.tema-nuevo .sidebar .nav-grp-items button.nav-btn, html.tema-nuevo .sidebar .nav-grp-items a.nav-btn {
    flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: auto; height: 104px; margin: 0; padding: 8px 4px; border: 0; border-radius: var(--radius-md);
    background: #fff; color: var(--text); text-align: center; font: 700 12.5px/1.15 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; box-shadow: var(--shadow-sm);
  }
  html.tema-nuevo .sidebar .nav-grp-items .nav-btn .nav-icon { width: 26px; height: 26px; }
  html.tema-nuevo .sidebar .nav-grp-items[data-grp="dia"] .nav-btn:nth-child(6n+1), html.tema-nuevo .sidebar .nav-grp-items[data-grp="dia"] .nav-btn:nth-child(6n+3) { background: var(--c2); color: var(--on-accent); }
  html.tema-nuevo .sidebar .nav-grp-items[data-grp="dia"] .nav-btn:nth-child(6n+2), html.tema-nuevo .sidebar .nav-grp-items[data-grp="dia"] .nav-btn:nth-child(6n+5) { background: var(--c1); color: var(--c2); }
  html.tema-nuevo .sidebar .nav-grp-items[data-grp="gestion"] .nav-btn:nth-child(even) { background: var(--c1); color: var(--c2); }
  html.tema-nuevo .sidebar .nav-grp-items[data-grp="config"] { grid-template-columns: 1fr 1fr; }
  html.tema-nuevo .sidebar .nav-grp-items[data-grp="config"] .nav-btn { height: 46px; flex-direction: row; justify-content: flex-start; padding: 0 14px; }
  html.tema-nuevo .sidebar .nav-grp-items[data-grp="config"] .nav-btn .nav-icon { width: 18px; height: 18px; }
  html.tema-nuevo .sidebar button.nav-btn.active { box-shadow: inset 0 0 0 3px var(--c1); padding-left: 4px; border-left: 0; }
  html.tema-nuevo .sidebar .nav-badge { position: absolute; top: 8px; right: 8px; }
  html.tema-nuevo .sidebar .nav-grp-items .nav-btn { position: relative; }
  html.tema-nuevo .sidebar .logout-btn { width: 100%; margin: 16px 0 0; min-height: 50px; background: var(--c1); color: var(--c2); border-radius: var(--radius-sm); font: 700 15px/1 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
}
@media (max-width: 980px) {
  html.tema-nuevo #tableBar .table-bar-info, html.tema-nuevo #tableBar #currentTableName { color: var(--on-brand) !important; }
  html.tema-nuevo #tableBar #currentTableName { font: 700 18px/1.1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; }
  html.tema-nuevo #tableBar .guests-chip { background: transparent; border: 0; color: var(--c1-muted); }
  html.tema-nuevo #tableBar .table-waiter-btn { background: var(--c2); color: var(--on-accent); border: 0; }
}
@media (max-width: 900px) { html.tema-nuevo .ini-cols { grid-template-columns: 1fr; } html.tema-nuevo #infPane-hoy:not([hidden]) { display: block; } }
@media (max-width: 720px) { html.tema-nuevo .ini-kpi b { font-size: 28px; } }
html.tema-nuevo .cobro-go:not(.alt) { background: var(--c2); color: var(--on-accent); text-transform: uppercase; font-family: var(--font-heading); letter-spacing: .03em; }
html.tema-nuevo #view-camareros > .pr-head { margin-bottom: 0 !important; }
html.tema-nuevo #view-camareros > p.hint-text { margin: 0 0 16px 22px !important; }

/* --- Aviso «estás con la conexión de reserva» (06-10-2026, opción B):
       solo la bola, en un cuadradito del acento que late suave --- */
.om-reserva-globo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; min-width: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent, #fff); cursor: pointer; animation: omGloboLate 2.2s ease-in-out infinite; }
.om-reserva-globo svg, .om-reserva-dot svg { width: 20px; height: 20px; }
@keyframes omGloboLate { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } }
.om-reserva-globo.om-reserva-movil { width: 38px; height: 38px; }
@media (prefers-reduced-motion: reduce) { .om-reserva-globo { animation: none; } }
.om-reserva-tit { display: flex; align-items: center; gap: 8px; }
.om-reserva-tit svg { width: 22px; height: 22px; flex: none; }
.om-conmuta > svg { width: 24px; height: 24px; flex: none; }
html.tema-nuevo .om-reserva-dot { background: var(--c2); color: var(--on-accent); border: 0; border-radius: var(--radius-sm); box-shadow: none; animation: omGloboLate 2.2s ease-in-out infinite; }
html.tema-nuevo .om-reserva-dot.om-reserva-kds { width: 46px; height: 46px; }
html.tema-nuevo .om-conmuta { font-family: var(--font-body); border-radius: var(--radius-md); }
html.tema-nuevo .om-conmuta-mal { background: #c62828; color: #fff; }
html.tema-nuevo .om-conmuta-mal button, html.tema-nuevo .om-conmuta-reserva button { border-radius: var(--radius-sm); text-transform: uppercase; font: 700 14px/1 var(--font-heading); letter-spacing: .04em; }
html.tema-nuevo .om-conmuta-mal button { background: #fff; color: #c62828; }
html.tema-nuevo .om-conmuta-reserva { background: var(--c2); color: var(--on-accent); border: 0; }
html.tema-nuevo .om-conmuta-reserva button { background: var(--c1); color: var(--c2); }
html.tema-nuevo .om-reserva-hoja .om-reserva-tit svg { color: var(--accent-ink); }

/* =============================================================================
   Auditoría de diseño 14-10-2026 (aspecto nuevo) — hecho a mano
   ============================================================================= */

/* A-2 · Tablet horizontal y portátiles de 768 px de alto: el ticket enseña más líneas.
   (21-10-2026, H1) Ya no es «mitad y mitad»: el ticket se queda en 320-380 px y los
   productos ganan el resto (ver «Venta en tablet» al final). */
@media (min-width: 981px) and (max-height: 820px) {
  html.tema-nuevo #ticketCard .ticket-actions .btn-comandar,
  html.tema-nuevo #ticketCard .ticket-foot > .btn-charge { min-height: 52px; padding: 8px 10px; font-size: 17px; }
  html.tema-nuevo #ticketCard .ticket-total span:last-child { font-size: 26px; }
  html.tema-nuevo #ticketCard .ticket-total { padding-top: 6px; padding-bottom: 6px; }
}

/* M-2 · Teclas de producto: las palabras no se parten por la mitad */
html.tema-nuevo #productGrid .product-btn .product-name { max-width: calc(100% - 26px); overflow-wrap: break-word; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 720px) {
  html.tema-nuevo #productGrid .product-btn .product-name { max-width: calc(100% - 18px); }
  html.tema-nuevo #productGrid .product-btn { font-size: 11.5px; letter-spacing: 0; }
}

/* M-5 · Tiras de fechas: en el aspecto nuevo cada botón va suelto, así que pueden bajar de línea */
html.tema-nuevo .range-btns { flex-wrap: wrap; max-width: 100%; overflow: visible; }

/* M-10 · Móvil: las pestañas en una tira que se arrastra (no 5-6 filas antes del contenido) */
@media (max-width: 720px) {
  html.tema-nuevo .gx-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: -12px; padding-inline: 12px; mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
  html.tema-nuevo .gx-tabs::-webkit-scrollbar { display: none; }
  html.tema-nuevo .gx-tabs button { flex: none; }
}

/* M-11 · Ficha de producto en el móvil/tablet: la cabecera en dos filas */
@media (max-width: 900px) {
  html.tema-nuevo .pr-det > .pr-dh { flex-wrap: wrap; row-gap: 8px; }
  html.tema-nuevo .pr-det > .pr-dh .pr-volver { order: -2; flex: 1 1 auto; }
  html.tema-nuevo .pr-det > .pr-dh .pr-baja { order: -1; }
  html.tema-nuevo .pr-det > .pr-dh .pr-dh-tx { flex: 1 1 calc(100% - 70px); min-width: 0; }
}

/* M-18 · Móvil estrecho: el precio no se mete debajo del círculo */
@media (max-width: 380px) {
  html.tema-nuevo #productGrid .product-btn { font-size: 10px; letter-spacing: 0; }
  html.tema-nuevo #productGrid .product-btn .product-name { max-width: calc(100% - 22px); }
  html.tema-nuevo #productGrid .product-img-placeholder { display: none; }
  html.tema-nuevo #productGrid .product-img { width: 50px; height: 50px; }
}

/* B-1 · Cifras de las tarjetas en una línea */
html.tema-nuevo .stat-strip b { white-space: nowrap; font-size: clamp(17px, 5.2vw, 24px); }

/* B-2 · Escandallos: etiquetas de los números completas */
@media (max-width: 720px) {
  html.tema-nuevo .stat-strip > div > span { white-space: normal; }
}

/* B-4 · Títulos de la barra del móvil: más pequeños antes de cortarse */
@media (max-width: 720px) { html.tema-nuevo .movil-barra .mb-titulo { font-size: clamp(14px, 4.4vw, 19px); } }

/* B-5 · Barra de abajo de la venta en 360: solo el icono y el total */
@media (max-width: 380px) { html.tema-nuevo .mob-ticket-btn .mob-label { display: none !important; } }

/* B-12 · Venta en 1024: botones de la barra de mesa en dos filas, sin «…» */
@media (min-width: 981px) and (max-width: 1100px) {
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido { grid-template-columns: repeat(4, 1fr); }
}

/* Gastos › Inicio en el móvil: cifras que caben en su tarjeta */
@media (max-width: 720px) {
  html.tema-nuevo .card .gx-kpi .gx-kpi-num, html.tema-nuevo .gx-kpis .gx-kpi .gx-kpi-num, html.tema-nuevo .gx-kpi > strong { font-size: clamp(16px, 5vw, 22px); }
  html.tema-nuevo .gx-kpi { padding: 12px; min-width: 0; }
}

/* Ruta del reparto (15-10-2026) */
html.tema-nuevo .rr-cab h3 { color: #fff; }
html.tema-nuevo .oo2-reparto { background: var(--c1); }
html.tema-nuevo .oo2-reparto .oo2-rep-tit { color: var(--c2); opacity: 1; }
html.tema-nuevo .oo2-reparto .oo2-rep-b { color: var(--c1); }
html.tema-nuevo .oo2-reparto .oo2-rep-ok { color: #fff; }

/* Direcciones comprobadas y seguimiento del reparto (16-10-2026) */
html.tema-nuevo .rs-cab h3 { color: #fff; }
html.tema-nuevo .rs-cab { background: var(--c1); }
html.tema-nuevo .oo2-reparto .rs-gps-mal { color: var(--c2); }
html.tema-nuevo .db-op:hover, html.tema-nuevo .db-op.on { background: #fff6dc; }

/* --- Submenús de la barra (21-10-2026, tema.js «Submenús de la barra») ---
   Arriba solo 8 botones; los hijos van en una fila debajo, como Gestión. */
html:not(.barra-arriba) .nav-padre { display: none !important; }
html.tema-nuevo.barra-arriba .sidebar .nav-hijo { display: none !important; }
html.tema-nuevo.barra-arriba .sidebar button.nav-btn.padre-dentro { background: var(--c2); color: var(--on-accent); font-weight: 600; }
html.tema-nuevo.barra-arriba .sidebar button.nav-btn.padre-dentro .nav-badge { background: var(--c1); color: var(--c2); }
.barra-sub { display: none; }
html.tema-nuevo.barra-arriba .sidebar .barra-sub:not([hidden]) {
  display: flex; order: 50; flex: 0 0 calc(100% + 20px); margin: 0 -10px; padding: 6px 14px; gap: 4px; flex-wrap: wrap;
  background: var(--c1-2); border-top: 1px solid var(--c1-3);
}
html.tema-nuevo.barra-arriba .barra-sub-btn { height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--c1-txt); font: 500 14px/1 var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
html.tema-nuevo.barra-arriba .barra-sub-btn:hover { background: var(--c1-3); }
html.tema-nuevo.barra-arriba .barra-sub-btn.on { background: #fff; color: var(--c1); font-weight: 700; }
.barra-sub-n { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--c2); color: var(--on-accent); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* La papelera de arriba se va: tirar algo está en Inventario → Tirar y contar (y Elena lo hace) */
html.tema-nuevo.barra-arriba #topWasteBtn { display: none !important; }

/* =============================================================================
   Venta en tablet (21-10-2026, 2ª simulación H1, H3 y H6). Antonio: «en la tablet
   lo que puede pedir la gente sale muy grande y no se ve bien». A 1024×768 solo
   cabían 4 productos enteros. Ahora, entre 721 y 1366 px:
   - teclas más pequeñas con el mismo estilo (dos colores y el círculo en la esquina),
     letra de 14-15 px y al menos 96 px de alto (tamaño de dedo);
   - las categorías en UNA fila que se arrastra con el dedo, con el buscador al lado;
   - el ticket de 340-380 px (antes media pantalla), sin perder el total ni «Cobrar»;
   - los botones de la mesa (Dividir, Cancelar…) en una sola fila.
   El ordenador grande (más de 1366 px) se queda como estaba.
   ============================================================================= */
@media (min-width: 721px) and (max-width: 1366px) {
  /* Fila de arriba: categorías (se deslizan) + buscador */
  html.tema-nuevo #view-venta .grid-2 > .card:first-child {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 24%, 250px); grid-template-rows: auto auto auto;
    column-gap: 8px; align-content: start;
  }
  html.tema-nuevo #view-venta #categoryTabs,
  html.tema-nuevo.barra-arriba #view-venta #categoryTabs {
    grid-column: 1; grid-row: 1; order: 0;
    display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 0 10px; padding: 2px 28px 4px 2px; min-width: 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    /* el borde derecho se difumina: se ve que hay más categorías */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }
  html.tema-nuevo #view-venta #categoryTabs::-webkit-scrollbar { display: none; }
  html.tema-nuevo #view-venta #categoryTabs .category-tab,
  html.tema-nuevo.barra-arriba #view-venta #categoryTabs .category-tab {
    flex: none; min-height: 48px; padding: 0 16px; font-size: 14px; white-space: nowrap; justify-content: center;
  }
  html.tema-nuevo #view-venta #categoryTabs .tab-order-btn { flex: none; min-height: 48px; padding: 0 14px; white-space: nowrap; }
  html.tema-nuevo #view-venta .product-search,
  html.tema-nuevo.barra-arriba #view-venta .product-search { grid-column: 2; grid-row: 1; order: 0; margin: 2px 0 10px; align-self: start; min-width: 0; }
  html.tema-nuevo #view-venta .product-search input { min-height: 48px; }
  html.tema-nuevo #view-venta #productGrid { grid-column: 1 / -1; grid-row: 2; order: 0; }
  html.tema-nuevo #view-venta .table-bar-actions.tb-movido { grid-column: 1 / -1; grid-row: 3; }

  /* Teclas de producto */
  html.tema-nuevo #productGrid { grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); gap: 8px; }
  html.tema-nuevo #productGrid .product-btn { min-height: 98px; padding: 10px 10px 32px; gap: 3px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.12; letter-spacing: 0; }
  html.tema-nuevo #productGrid .product-btn .product-name { max-width: 100%; }
  html.tema-nuevo #productGrid .product-btn:has(.product-qty-badge) .product-name { max-width: calc(100% - 26px); }
  html.tema-nuevo #productGrid .product-btn .price { left: 11px; bottom: 9px; font-size: 17px; }
  html.tema-nuevo #productGrid .product-img,
  html.tema-nuevo #productGrid .product-img-placeholder { right: -14px; bottom: -14px; width: 62px; height: 62px; border-width: 3px; padding: 7px 17px 17px 7px; }
  html.tema-nuevo #productGrid .product-img-placeholder svg { width: 22px; height: 22px; transform: translate(-5px, -5px); }
  html.tema-nuevo #productGrid .product-extras-flag { font-size: 11px; padding: 1px 7px; }
  html.tema-nuevo #productGrid .product-left { font-size: 11px; padding: 2px 7px; }
  html.tema-nuevo #productGrid .product-allergens { max-width: 72%; }
  html.tema-nuevo #productGrid .product-qty-badge { top: 6px; right: 6px; min-width: 26px; height: 26px; font-size: 14px; line-height: 26px; box-shadow: 0 0 0 2px var(--k-bg); }
  html.tema-nuevo #productGrid .product-soldout-tag { top: 6px; right: 6px; padding: 3px 8px; font-size: 10px; }
  html.tema-nuevo #productGrid .product-btn:has(.product-qty-badge) .product-soldout-tag { right: 38px; }

  /* Extras al añadir un producto: más opciones por fila y más bajas */
  .modifier-modal-box { width: min(780px, calc(100vw - 24px)); }
  .modifier-groups { padding: 4px 20px 12px; }
  .modifier-group { padding: 10px 0 4px; }
  .modifier-options { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .modifier-option { min-height: 54px; padding: 8px 12px; font-size: 15px; }
}

/* Tablet de pie (721-980): el menú es una tira de iconos (style.css) → 4 columnas */
@media (min-width: 721px) and (max-width: 980px) {
  html.tema-nuevo #productGrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  html.tema-nuevo #productGrid .product-btn { min-height: 104px; }
  html.tema-nuevo .sidebar button.nav-btn.active { padding-left: 0; }
  html.tema-nuevo .sidebar h2.sidebar-title { margin: 0 0 12px; }
  html.tema-nuevo .sidebar.open button.nav-btn.active { padding-left: 14px; }
}

/* Tablet horizontal y ordenador mediano (981-1366) */
@media (min-width: 981px) and (max-width: 1366px) {
  /* El ticket, estrecho: 340 px en 1024, 380 px en 1280 y 1366 */
  html.tema-nuevo #view-venta .grid-2 { grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 380px); gap: 12px; }
  html.tema-nuevo #view-venta .grid-2 > .card:first-child { grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  /* Línea del ticket: si no cabe, el nombre arriba y − 1 + debajo */
  html.tema-nuevo #ticketCard .ticket-line { flex-wrap: wrap; row-gap: 4px; padding: 8px 0; }
  html.tema-nuevo #ticketCard .ticket-line-name { flex: 1 1 100%; }
  html.tema-nuevo #ticketCard .ticket-line-tools { max-width: none; }
  html.tema-nuevo #ticketCard .ticket-line-qty { margin-left: auto; gap: 4px; }
  html.tema-nuevo #ticketCard .qty-btn { min-width: 36px; height: 38px; }
  html.tema-nuevo #ticketCard .ticket-line-del { min-width: 34px; margin-left: 2px; }
  html.tema-nuevo #ticketCard #ticketLines { padding: 2px 14px; }
  html.tema-nuevo #ticketCard .ticket-foot { padding: 0 14px 12px; }
  html.tema-nuevo #ticketCard .ticket-sheet-head { padding: 12px 14px; }
  html.tema-nuevo.barra-arriba #ticketCard .ticket-sheet-head { min-height: 50px; }
  /* Con el ticket estrecho, en la cabecera solo el nombre de la mesa (sin «NUEVA VENTA ·», que lo cortaba) */
  html.tema-nuevo.barra-arriba #ticketCard .table-bar-info.tb-movido .table-bar-title { display: none; }
  /* COMANDAR y COBRAR siguen uno al lado del otro; si el importe es largo, baja de línea */
  html.tema-nuevo #ticketCard .ticket-actions .btn-comandar,
  html.tema-nuevo #ticketCard .ticket-foot > .btn-charge { min-height: 56px; padding: 6px 8px; font-size: 16px; line-height: 1.1; white-space: normal; }
  html.tema-nuevo #ticketCard .ticket-quick .btn-order-note { min-height: 40px; }
  /* Dividir, Cancelar, Mover, Cambiar mesa, Juntar, Mapa: una sola fila */
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido {
    display: flex; flex-wrap: nowrap; gap: 6px; margin: 8px 0 0; padding: 2px; overflow-x: auto; scrollbar-width: none;
  }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido::-webkit-scrollbar { display: none; }
  html.tema-nuevo.barra-arriba #view-venta .table-bar-actions.tb-movido .btn-secondary { flex: 1 0 auto; min-height: 46px; padding: 0 12px; font-size: 13.5px; }
}

/* H6 · Móvil: los nombres largos no se parten a mitad de palabra («DESCAFEINAD / O»).
   El nombre usa todo el ancho de la tecla (el círculo va abajo) y, si una palabra no
   cabe, se parte con guion por sílabas donde el aparato lo sabe hacer (lang="es"). */
@media (max-width: 720px) {
  html.tema-nuevo #productGrid .product-btn .product-name { max-width: 100%; overflow-wrap: break-word; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
  html.tema-nuevo #productGrid .product-btn:has(.product-qty-badge) .product-name { max-width: calc(100% - 22px); }
}