* { box-sizing: border-box; }

/* Barras de scroll siempre visibles: por default macOS/algunos navegadores las esconden hasta
   que activamente arrastras, y en tablas anchas (con scroll horizontal) eso hace parecer que no
   se puede deslizar cuando en realidad sí se puede. */
* {
  scrollbar-width: thin;
  scrollbar-color: #b8bcc2 #eceef0;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #eceef0;
}
::-webkit-scrollbar-thumb {
  background: #b8bcc2;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9aa0a8;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f2f3f5;
  color: #1a1a1a;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.oculto { display: none !important; }

#app-principal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* --- Barra superior --- */

.barra-superior {
  background: linear-gradient(180deg, #243140 0%, #1b2530 100%);
  color: white;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 64px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 5;
}

.barra-superior h1 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  flex: 1;
  min-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

/* Botones de la barra: píldoras con ícono, en una sola línea; si no caben, la fila se desliza
   de lado en vez de partir el texto en dos renglones. */
.barra-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}
.barra-acciones::-webkit-scrollbar { display: none; }

.barra-superior .btn-barra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  height: 42px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #eef2f6;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.barra-superior .btn-barra:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); }
.barra-superior .btn-barra:active { transform: scale(0.97); }
.barra-superior .btn-barra.oculto { display: none; }
.barra-superior .btn-barra svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.barra-superior .btn-barra-volver { padding: 0 14px 0 8px; background: rgba(255, 255, 255, 0.12); }

/* Metas: resaltado en verde, con una barrita del avance del día al fondo del botón. */
.barra-superior .btn-metas {
  position: relative;
  overflow: hidden;
  background: rgba(76, 175, 80, 0.16);
  border-color: rgba(129, 199, 132, 0.45);
  color: #c8e6c9;
}
.barra-superior .btn-metas.con-avance::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--avance, 0%);
  background: #66bb6a;
  z-index: 1;
}
/* Detrás, más claro: hasta dónde llega contando lo provisional de sus mesas abiertas. */
.barra-superior .btn-metas.con-avance::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--avance-prov, 0%);
  background: rgba(165, 214, 167, 0.55);
}
.barra-superior .btn-metas.meta-lograda { background: #2e7d32; border-color: #43a047; color: white; }

.barra-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.barra-usuario.con-cuenta { cursor: pointer; }
.barra-usuario.con-cuenta:hover { background: rgba(255, 255, 255, 0.14); }
.usuario-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4caf50, #1b5e20);
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.barra-superior .btn-barra-salir { padding: 0 14px 0 12px; background: transparent; color: #ffb4a9; border-color: rgba(255, 138, 128, 0.35); }
.barra-superior .btn-barra-salir:hover { background: rgba(229, 57, 53, 0.18); }

/* --- Administración: menú dentro de la barra de arriba --- */
.barra-superior.modo-admin h1 { flex: 0 0 auto; }
.titulo-seccion {
  flex: 0 1 auto;
  min-width: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #b8c6d4;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titulo-seccion:empty { display: none; }
.admin-menu {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.admin-menu.oculto { display: none; }
.admin-menu .menu-grupo { flex: 0 0 auto; }
.admin-menu .boton-grupo {
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #eef2f6;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
}
.admin-menu .boton-grupo:hover:not(.grupo-activo) { background: rgba(255, 255, 255, 0.15); }
.admin-menu .boton-grupo.grupo-activo { background: white; color: #1a1f29; border-color: white; box-shadow: none; }
.admin-menu .menu-grupo-panel { top: calc(100% + 10px); right: 0; left: auto; z-index: 50; }
/* Los últimos grupos abren hacia la izquierda para no salirse de la pantalla; los primeros, hacia la derecha. */
.admin-menu .menu-grupo:nth-of-type(-n + 3) .menu-grupo-panel { left: 0; right: auto; }

/* Botones de acción de Administración (+ Nuevo, Importar...): compactos, en una fila. */
.admin-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-acciones .btn-grande {
  width: auto;
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 10px;
  white-space: nowrap;
}
#admin-fijo { padding-top: 12px; }

/* Subpestañas de cada sección (ej. Gastos · Resumen · Categorías): píldoras compactas, no cajas grandes. */
#admin-fijo .tabs-categoria { flex-wrap: wrap; gap: 6px; margin-bottom: 10px !important; }
#admin-fijo .tabs-categoria .tab-categoria {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid #dfe3e8;
  background: white;
  box-shadow: none;
}
#admin-fijo .tabs-categoria .tab-categoria.activa { background: #1f2933; border-color: #1f2933; color: white; }

@media (max-width: 1440px) {
  .barra-superior.modo-admin .barra-usuario .usuario-actual,
  .barra-superior.modo-admin .btn-barra-salir .btn-etiqueta { display: none; }
  .barra-superior.modo-admin .btn-barra-salir { padding: 0 11px; }
}
@media (max-width: 1180px) {
  .barra-superior.modo-admin .barra-usuario .usuario-actual,
  .barra-superior.modo-admin .titulo-seccion,
  .barra-superior.modo-admin .btn-barra-salir .btn-etiqueta { display: none; }
  .barra-superior.modo-admin .btn-barra-salir { padding: 0 11px; }
  .admin-menu .boton-grupo { padding: 0 11px; font-size: 13px; height: 38px; }
}

/* Según el ancho: pantalla grande = texto completo; tablet = palabra corta ("Nómina", "Cover");
   muy angosta = solo ícono (menos Metas, que siempre dice su avance). */
.barra-acciones .btn-corta { display: none; }
@media (max-width: 1180px) {
  .barra-acciones .btn-barra .btn-etiqueta { display: none; }
  .barra-acciones .btn-barra .btn-corta { display: inline; }
  .barra-acciones .btn-metas .btn-etiqueta { display: inline; }
  .barra-superior .btn-barra { padding: 0 14px 0 11px; font-size: 14px; }
  .barra-superior { gap: 10px; }
}
@media (max-width: 860px) {
  .barra-acciones .btn-barra .btn-corta { display: none; }
  .barra-acciones .btn-barra:not(.btn-metas) { padding: 0 11px; }
  .barra-usuario .usuario-actual, .btn-barra-salir .btn-etiqueta { display: none; }
  .barra-usuario { padding: 4px; }
}

.btn-texto {
  background: none;
  border: none;
  color: white;
  font-size: 17px;
  cursor: pointer;
  padding: 8px 4px;
}

/* Estado de conexión: un puntito (verde / rojo) en la tarjetita del usuario; el texto solo se
   lee al pasar el cursor o si se cae la conexión. */
.estado-conexion {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #90a4ae;
  font-size: 0;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(144, 164, 174, 0.25);
}

.estado-conexion.conectado { background: #66bb6a; box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.25); }
.estado-conexion.desconectado {
  width: auto;
  height: auto;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  background: #c62828;
  box-shadow: none;
}

/* --- Vistas --- */

.vista {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Administración: el menú, los botones de +Nuevo/Importar y los filtros de cada pestaña se
   quedan fijos arriba (nunca se van con el scroll); solo la lista/tabla de abajo se desplaza.
   Por eso #vista-admin no usa el overflow/padding genérico de .vista — los mueve a sus dos
   hijos (#admin-fijo y #admin-scroll) para poder separar cuál parte se queda quieta. */
#vista-admin {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

#admin-fijo {
  flex-shrink: 0;
  padding: 16px 16px 0 16px;
  background: #f2f3f5;
}

#admin-filtros-fijos:not(:empty) {
  margin-top: 4px;
}

#admin-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px 16px;
}

/* --- Mapa de mesas --- */

.grid-mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
}

.mesa-boton {
  aspect-ratio: 1;
  border: none;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  color: white;
  background: #2e7d32;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mesa-boton.ocupada { background: #c62828; }
.mesa-boton.enviada { background: #ef6c00; }

.mesa-boton small {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
}

/* --- Info del pedido (encabezado) --- */

.info-pedido {
  background: white;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #444;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.info-pedido b { color: #111; }

/* --- Tabs de categoria --- */

.tabs-categoria {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.tab-categoria {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: white;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.tab-categoria:hover:not(.activa) {
  background: #f2f3f5;
}

.tab-categoria.activa {
  background: #1f2933;
  color: white;
  box-shadow: 0 4px 12px -4px rgba(31, 41, 51, 0.5);
}

/* --- Contenido pedido: productos + carrito --- */

/* Dos columnas: a la izquierda todo lo de elegir producto (datos de la mesa, acciones, buscador,
   categorías y productos); a la derecha la comanda de arriba a abajo. Antes la comanda iba debajo
   de las categorías y, con muchas, quedaba aplastada al fondo en las pantallas touch del POS.
   .contenido-pedido usa display:contents para que sus hijos (productos y carrito) sean celdas de
   esta misma rejilla sin mover el HTML. */
#vista-pedido {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  column-gap: 16px;
  overflow: hidden;
}

#vista-pedido .info-pedido,
#vista-pedido .acciones-pedido,
#vista-pedido .buscador-productos,
#vista-pedido .tabs-categoria {
  grid-column: 1;
}

#vista-pedido .contenido-pedido {
  display: contents;
}

#vista-pedido .grid-productos {
  grid-column: 1;
  grid-row: 5;
}

#vista-pedido .carrito {
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 0;
}

.buscador-productos {
  margin-bottom: 12px;
}

.buscador-productos input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: white;
}

/* El menú del comandero ahora puede tener muchas categorías (catálogo abierto de botella),
   así que a diferencia de las demás tabs de la app (que son un puñado fijo), estas envuelven
   en varias líneas en vez de aplastarse en una sola fila. */
#vista-pedido .tabs-categoria {
  flex-wrap: wrap;
}

#vista-pedido .tab-categoria {
  flex: 0 1 auto;
}

/* La barra de pestañas de Administración también creció más allá de lo que cabe en una sola
   fila (Menú, Estructura, Usuarios, ... Pagos), así que envuelve igual que la del comandero. */
#tabs-admin {
  flex-wrap: wrap;
}

#tabs-admin .tab-categoria {
  flex: 0 1 auto;
}

/* --- Menú de administración agrupado en desplegables (antes eran ~22 botones sueltos) --- */

.menu-grupo {
  position: relative;
  flex: 0 1 auto;
}

.boton-grupo {
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: white;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.boton-grupo:hover:not(.grupo-activo) {
  background: #f2f3f5;
}

.boton-grupo.grupo-activo {
  background: #1f2933;
  color: white;
  box-shadow: 0 4px 12px -4px rgba(31, 41, 51, 0.5);
}

.menu-grupo-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  background: white;
  border-radius: 12px;
  box-shadow: 0 16px 32px -8px rgba(16, 24, 40, 0.24), 0 4px 8px -4px rgba(16, 24, 40, 0.1);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  animation: modal-aparece 0.12s ease-out;
}

.menu-grupo-panel button {
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease, color 0.1s ease;
}

.menu-grupo-panel button:hover {
  background: #f2f3f5;
}

.menu-grupo-panel button.activa {
  background: #1f2933;
  color: white;
}

.contenido-pedido {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.grid-productos {
  flex: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
  align-content: start;
  overflow-y: auto;
  padding: 2px 6px 8px 2px;
}

/* Botón de producto del comandero: pensado para dedo/pantalla táctil en un mostrador con mucho
   tráfico (ej. H Live) — objetivo grande, feedback claro al tocar, precio en grande para leerlo
   de reojo. La miniatura (o el círculo con la inicial si el producto no tiene foto todavía) le da
   una referencia visual rápida sin tener que leer el nombre completo cada vez. */
.producto-boton {
  background: white;
  border: 1px solid #eceef1;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  font-size: 15.5px;
  font-weight: 600;
  color: #1a1f29;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 20px -14px rgba(16, 24, 40, 0.18);
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
  position: relative;
}

.producto-boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 28px -16px rgba(16, 24, 40, 0.26);
}

.producto-boton:active {
  transform: translateY(0) scale(0.98);
}

.producto-boton .miniatura {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eef1f4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.producto-boton .miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto-boton .nombre-producto {
  line-height: 1.25;
  padding-right: 40px;
}

.producto-boton .precio {
  color: #2e7d32;
  font-weight: 800;
  font-size: 18px;
  margin-top: 2px;
}

.producto-boton.combo {
  border-color: #ef6c00;
}

/* --- Comandero en dos pasos: categorías -> productos --- */

#vista-pedido .tabs-categoria {
  align-items: center;
  gap: 14px;
}

.btn-atras-menu {
  padding: 14px 22px;
  border: none;
  border-radius: 12px;
  background: #1f2933;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-atras-menu:active { transform: scale(0.97); }

.titulo-menu {
  font-size: 22px;
  font-weight: 800;
  color: #1a1f29;
}

.grid-productos.modo-categorias {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.categoria-boton {
  min-height: 120px;
  padding: 16px;
  border: none;
  border-radius: 16px;
  color: white;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 10px 20px -12px rgba(16, 24, 40, 0.45);
  transition: transform 0.1s ease;
}

.categoria-boton:active { transform: scale(0.97); }

.categoria-boton .nombre-categoria {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

.categoria-boton .cuantos-categoria {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
}

/* Productos más grandes para el dedo, ahora que ya no comparten espacio con las pestañas. */
#vista-pedido .grid-productos:not(.modo-categorias) {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

#vista-pedido .producto-boton {
  min-height: 140px;
  font-size: 17px;
}

#vista-pedido .producto-boton .precio {
  font-size: 20px;
}

.producto-boton .etiqueta-combo {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  color: white;
  background: #ef6c00;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 999px;
}

.producto-boton.combo .miniatura {
  top: 10px;
}

/* --- Carrito --- */

.carrito {
  flex: 1;
  min-width: 300px;
  min-height: 0;
  background: white;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.carrito h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.lista-carrito, .lista-revision {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.item-carrito {
  border-bottom: 1px solid #eee;
  padding: 3px 0;
}

.item-carrito-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

.item-carrito-nombre {
  flex: 1;
  font-size: 15px;
  line-height: 1.2;
}

.btn-nota-item {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: #9aa1a9;
  font-size: 17px;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-nota-item.con-nota {
  color: #1565c0;
  background: #e8f0fb;
}

.item-carrito .editar-niveles {
  display: flex;
  gap: 10px;
  padding-top: 2px;
}

.item-carrito-precio {
  font-weight: 600;
  min-width: 60px;
  text-align: right;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 3px;
}

.stepper button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #e0e0e0;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.btn-quitar {
  background: none;
  border: none;
  color: #c62828;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

.acciones-item {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding-left: 4px;
}

.link-accion {
  background: none;
  border: none;
  color: #1565c0;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgba(21, 101, 192, 0.35);
  transition: color 0.1s ease, text-decoration-color 0.1s ease;
}

.link-accion:hover {
  color: #0d47a1;
  text-decoration-color: currentColor;
}

.nota-item {
  font-size: 13px;
  color: #777;
  font-style: italic;
  margin-top: 1px;
  padding-left: 4px;
}

.incluidos-item {
  margin-top: 3px;
  padding-left: 10px;
  border-left: 3px solid #ef6c00;
}

.incluido-fila {
  font-size: 13px;
  color: #555;
  padding: 1px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.total-carrito {
  font-size: 20px;
  font-weight: 700;
  padding: 14px 0;
  text-align: right;
  border-top: 2px solid #eee;
  margin-top: 8px;
}

/* --- Botones grandes --- */

.btn-grande {
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: 10px;
  background: #2e7d32;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 16px -8px rgba(46, 125, 50, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn-grande:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn-grande:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.97);
}

.btn-grande:disabled {
  background: #a5d6a7;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-enviar {
  background: #ef6c00;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 16px -8px rgba(239, 108, 0, 0.45);
}

/* Tono distinto al de "Entrar" (verde) para que no se confundan con un solo vistazo. */
.btn-checador-toggle {
  background: #1565c0;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 16px -8px rgba(21, 101, 192, 0.45);
}

.btn-secundario {
  padding: 18px;
  border: none;
  border-radius: 10px;
  background: #e0e0e0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.btn-secundario:hover {
  background: #d4d6d9;
}

.btn-secundario:active {
  transform: translateY(1px);
}

.botones-revision {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.botones-revision .btn-secundario { flex: 1; }
.botones-revision .btn-enviar { flex: 2; }

/* --- Revision --- */

.fila-revision {
  background: white;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

.fila-revision-titulo {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
}

/* --- Modal --- */

.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-caja {
  background: white;
  border-radius: 16px;
  padding: 24px;
  width: min(420px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.35);
  animation: modal-aparece 0.15s ease-out;
}

/* --- Huella digital (huella.js) --- */

.huella-fondo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 32, 0.72);
}

.huella-caja {
  width: min(380px, 92vw);
  padding: 28px 24px 20px;
  border-radius: 16px;
  background: white;
  text-align: center;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.45);
  animation: modal-aparece 0.15s ease-out;
}

.huella-icono {
  color: #2e7d32;
  animation: huella-pulso 1.6s ease-in-out infinite;
}

@keyframes huella-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.94); }
}

.huella-titulo { margin: 8px 0 4px; font-size: 20px; }
.huella-mensaje { margin: 0 0 12px; color: #555; font-size: 15px; }
.huella-aviso { min-height: 22px; margin: 6px 0 14px; font-size: 15px; font-weight: 600; }
.huella-aviso.mal { color: #c62828; }
.huella-aviso.ok { color: #2e7d32; }

.huella-progreso {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.huella-progreso span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dfe3e8;
}

.huella-progreso span.hecha { background: #2e7d32; }

.huella-cancelar { width: 100%; }

.btn-huella {
  width: 100%;
  margin: 4px 0 12px;
  padding: 14px;
  border: 2px solid #2e7d32;
  border-radius: 10px;
  background: white;
  color: #2e7d32;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.login-huella-aviso {
  margin: -4px 0 12px !important;
  color: #2e7d32 !important;
  font-weight: 600;
}

.huella-estado {
  margin: 12px 0;
  padding: 12px;
  border-radius: 10px;
  background: #f5f7fa;
  font-size: 14px;
}

.huella-estado .huella-estado-botones {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.huella-estado button {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  cursor: pointer;
}

/* --- Ventana de cobro (caja) --- */

.cobro-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cobro-encabezado h3 { margin: 0; }

.cobro-total {
  font-size: 32px;
  font-weight: 800;
  color: #2e7d32;
  font-variant-numeric: tabular-nums;
}

.cobro-formas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.cobro-formas button {
  padding: 12px 6px;
  border: 2px solid #dfe3e8;
  border-radius: 10px;
  background: #fafafa;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.cobro-formas button.activa {
  border-color: #2e7d32;
  background: #e8f5e9;
  color: #1b5e20;
}

.cobro-fila {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.cobro-fila input { flex: 1; min-width: 0; margin: 0; }
.cobro-campo { flex: 1; min-width: 0; }
.cobro-campo input { width: 100%; }

.btn-rapido {
  flex-shrink: 0;
  padding: 11px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-rapido:active { background: #e8f5e9; }

.select-afiliacion {
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 10px;
  font-size: 16px;
}

.btn-dividir-pago {
  display: block;
  margin: -4px 0 10px;
  font-size: 14px;
}

.pagos-divididos { margin-bottom: 8px; }
.pagos-divididos [data-otra-forma] { padding: 6px 10px; font-size: 13px; }

.pago-linea {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.pago-linea select { flex: 1; min-width: 0; margin: 0; padding: 11px 8px; font-size: 15px; }
.pago-linea input { flex: 1; min-width: 0; margin: 0; }

.cobro-resumen {
  min-height: 22px;
  margin: 4px 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #1b5e20;
}

.cobro-resumen.mal { color: #c62828; }

/* --- Plano del local (plano.js): mesas en su lugar real, por salón --- */

.plano {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background-color: #f7f8fa;
  background-image: radial-gradient(#dde1e7 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid #e3e6ea;
  overflow: hidden;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}

.plano-vacio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #888;
  text-align: center;
}

.mesa-plano {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9dfe8;
  border: 2px solid #b4bdca;
  color: #3c4656;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 10px -6px rgba(16, 24, 40, 0.45);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

/* --escala: tamaño de mesas del salón (normal 1, chicas 0.7, mini 0.46), ver formatoPlano(). */
.mesa-plano.forma-redonda { width: calc(7.5% * var(--escala, 1)); aspect-ratio: 1; border-radius: 50%; }
.mesa-plano.forma-cuadrada { width: calc(8.5% * var(--escala, 1)); aspect-ratio: 1; border-radius: 10px; }
.mesa-plano.forma-rectangular { width: calc(clamp(13%, calc(6% + var(--cap) * 1.3%), 24%) * var(--escala, 1)); aspect-ratio: 2 / 1; border-radius: 10px; }

.mesa-plano-numero { font-size: max(12px, 2.1cqw); font-weight: 800; }
/* Salón con muchas mesas: número más chico, bordes finos y la etiqueta de abajo compacta. */
.plano-denso .mesa-plano { border-width: 1.5px; border-radius: 6px; }
.plano-denso .mesa-plano.forma-redonda { border-radius: 50%; }
.plano-denso .mesa-plano-numero { font-size: max(9px, 1.25cqw); }
.plano-denso .mesa-plano-etiqueta { font-size: 9px; padding: 1px 4px; top: calc(100% + 1px); }

.mesa-plano-etiqueta {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 6px;
  background: #3c4656;
  color: white;
  font-size: max(10px, 1.2cqw);
  font-weight: 700;
  white-space: nowrap;
}

.mesa-plano.libre { background: #e8f5e9; border-color: #a5d6a7; }
.mesa-plano.reservada { background: #d9dfe8; border-color: #8a96a8; }
.mesa-plano.ocupada { background: #ffcc80; border-color: #ef6c00; color: #5d2c00; }
.mesa-plano.bloqueada { background: #cfd3d8; border-color: #9aa1aa; color: #555; }
.mesa-plano.inactiva { opacity: 0.4; border-style: dashed; }
.mesa-plano.seleccionada { box-shadow: 0 0 0 4px #1565c0, 0 6px 14px -6px rgba(16, 24, 40, 0.5); }
.mesa-plano-etiqueta.etiqueta-ocupada { background: #ef6c00; }
.mesa-plano-etiqueta.etiqueta-bloqueada { background: #c62828; }

.plano-editor .mesa-plano { cursor: grab; touch-action: none; }
/* Foto del plano de fondo para calcar: debajo de las mesas, sin estorbar el arrastre. */
.plano-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; z-index: 0; }
.plano .mesa-plano { z-index: 1; }
.plano-fondo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; }
.plano-fondo-subir { cursor: pointer; margin: 0; }
.plano-ajuste { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; font-size: 14px; }
.plano-ajuste select { width: auto; margin: 0; padding: 6px 8px; }
.plano-fondo-opacidad, .plano-fondo-ver { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-size: 14px; }
.plano-fondo-opacidad input { width: 140px; margin: 0; }
.plano-fondo-ver input { width: auto; margin: 0; }
.plano-editor .mesa-plano.arrastrando { cursor: grabbing; transform: translate(-50%, -50%) scale(1.08); z-index: 5; box-shadow: 0 12px 24px -8px rgba(16, 24, 40, 0.5); }

.plano-editor-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.plano-editor-acciones { display: flex; gap: 8px; align-items: center; }

.plano-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
  font-size: 13px;
  color: #555;
}

.plano-leyenda i {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border-radius: 4px;
  vertical-align: -2px;
  border: 2px solid;
}

.leyenda-libre { background: #e8f5e9; border-color: #a5d6a7 !important; }
.leyenda-reservada { background: #d9dfe8; border-color: #8a96a8 !important; }
.leyenda-ocupada { background: #ffcc80; border-color: #ef6c00 !important; }
.leyenda-bloqueada { background: #cfd3d8; border-color: #c62828 !important; }

.hostess-salones { display: flex; flex-wrap: wrap; gap: 4px; }

.salon-tab {
  padding: 10px 18px;
  border: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: #6b7280;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.salon-tab.activa { color: #1a1f29; border-bottom-color: #1565c0; }
.salon-tab.inactivo { opacity: 0.5; }

/* --- Pantalla de la hostess --- */

#vista-hostess { padding: 0; overflow: hidden; }

.hostess-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.hostess-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px 12px;
  background: #1f2933;
  color: #e8ecf1;
}

.hostess-fecha { display: flex; gap: 6px; align-items: stretch; }

.hostess-flecha,
.hostess-hoy,
.hostess-fecha-texto {
  border: none;
  border-radius: 10px;
  background: #2c3947;
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.hostess-flecha { width: 42px; font-size: 22px; }
.hostess-fecha-texto { flex: 1; padding: 10px 8px; }
.hostess-hoy { padding: 0 12px; background: #ef6c00; }

.hostess-buscar {
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  background: #2c3947;
  color: white;
  font-size: 15px;
}

.hostess-buscar::placeholder { color: #9aa6b4; }

.hostess-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #3a4756;
  font-size: 16px;
  font-weight: 700;
}

.hostess-resumen-total { width: 100%; font-size: 13px; font-weight: 500; color: #9aa6b4; }

.hostess-reservaciones {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hostess-reservaciones .mensaje-vacio { color: #9aa6b4; }

.tarjeta-reserva {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-shrink: 0; /* que la lista se deslice en vez de aplastar las tarjetas */
  width: 100%;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #2c3947;
  color: #e8ecf1;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.tarjeta-reserva.activa { border-color: #64b5f6; background: #34465a; }
.tarjeta-reserva.estado-cancelado { opacity: 0.5; }
.tarjeta-reserva.estado-atendido { opacity: 0.7; }

.tarjeta-reserva-icono {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2e7d32;
  font-size: 18px;
}

.tarjeta-reserva.estado-sentada .tarjeta-reserva-icono,
.tarjeta-reserva.estado-llego .tarjeta-reserva-icono { background: #1565c0; }
.tarjeta-reserva.estado-atendido .tarjeta-reserva-icono { background: #607d8b; }
.tarjeta-reserva.estado-cancelado .tarjeta-reserva-icono { background: #c62828; }

.tarjeta-reserva-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tarjeta-reserva-nombre { font-size: 16px; font-weight: 800; color: white; }
.tarjeta-reserva-linea { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #b8c2cf; }
.tarjeta-reserva-nota { font-style: italic; }
.tarjeta-reserva-estado { font-size: 12px; font-weight: 700; color: #90caf9; }

.hostess-botones { display: flex; flex-direction: column; gap: 8px; }
.hostess-botones .btn-grande,
.hostess-botones .btn-secundario { width: 100%; padding: 13px; }

.hostess-principal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px 16px 16px;
  overflow-y: auto;
}

.hostess-detalle {
  padding: 16px 18px;
  border-radius: 14px;
  background: white;
}

.detalle-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detalle-encabezado h2 { margin: 0; font-size: 24px; }
.det-nombre-input { flex: 1; margin: 0; font-size: 20px; font-weight: 700; }
.det-listo { font-size: 18px; font-weight: 800; text-decoration: none; }
.det-sub { margin: 2px 0 14px; color: #888; font-size: 13px; }

.det-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
}

.det-grid label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: #666; }
.det-grid input,
.det-grid select,
.det-grid textarea { margin: 0; font-size: 16px; color: #1a1a1a; }
.det-grid .det-ancho { grid-column: span 3; }

.det-sentada {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff3e0;
  color: #5d2c00;
}

.det-sentar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: #e3f2fd;
}

.det-sentar label { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.det-sentar select { margin: 0; }
.det-btn-sentar { width: auto; padding: 14px 34px; background: #1565c0; }
.det-cancelar { color: #c62828; }

/* Cliente frecuente (plano.js) */
.marca-frecuente {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ffc107;
  color: #3e2a00;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
  white-space: nowrap;
}

.det-sugerencias {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 6px;
  border-radius: 10px;
  background: #fff8e1;
  border: 1px solid #ffe082;
}

.sugerencia-cliente {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: white;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}

.sugerencia-cliente span { font-size: 13px; color: #666; }
.sugerencia-cliente:active { background: #ffecb3; }

.det-frecuente {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff8e1;
  color: #5d4300;
}

.det-historial { margin-top: 16px; }
.det-historial-titulo { margin-bottom: 6px; font-size: 16px; font-weight: 800; }
.det-historial-vacio { margin: 0; color: #888; }

.det-historial-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f7fa;
  font-size: 14px;
}

.historial-alerta { color: #c62828; }

.det-historial-lista { max-height: 220px; overflow-y: auto; }

.historial-fila {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 0.6fr 0.9fr 0.8fr;
  gap: 4px 10px;
  padding: 7px 4px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.historial-fila.estado-cancelado,
.historial-fila.estado-reservado { color: #999; }
.historial-nota { grid-column: 1 / -1; font-size: 13px; color: #666; font-style: italic; }

.mesa-reserva-fila {
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

@media (max-width: 900px) {
  /* Pantalla angosta (tablet parada): lista arriba y plano abajo, y la vista completa se desliza.
     Antes la lista tenía tope de 45vh y las tarjetas se aplastaban hasta desaparecer. */
  #vista-hostess { overflow-y: auto; }
  .hostess-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; }
  .hostess-lista { max-height: none; }
  .hostess-reservaciones { flex: none; max-height: 55vh; }
  .hostess-principal { min-height: 75vh; }
  .det-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det-grid .det-ancho { grid-column: span 2; }
}

/* --- Caja en matriz: cuadritos en vez de renglones de lado a lado --- */

#lista-caja.lista-matriz,
#lista-mesas.lista-matriz {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

#lista-caja.lista-matriz .mensaje-vacio,
#lista-mesas.lista-matriz .mensaje-vacio { grid-column: 1 / -1; }

/* Mis mesas: el estado de cocina como etiqueta y el aviso de productos sin enviar. */
.tile-mesa { min-height: 118px; }

.tile-mesa .tile-estado {
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0f2f5;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

/* En Mis mesas nada se corta con "…": el estado y el detalle bajan de renglón si no caben. */
.tile-caja.tile-mesa .tile-sub { white-space: normal; overflow: visible; line-height: 1.3; }

.tile-mesa.mesa-lista .tile-estado { background: #2e7d32; color: white; }
.tile-mesa.estado-por_cobrar .tile-estado { background: #ede7f6; color: #4a148c; }

.tile-mesa .tile-alerta {
  font-size: 12px;
  font-weight: 700;
  color: #c62828;
}

.tile-caja {
  min-height: 92px;
  padding: 10px 12px;
  border: none;
  border-top: 6px solid #6a1b9a;
  border-radius: 10px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.tile-caja:active { transform: scale(0.97); }
.tile-caja.estado-abierto { border-top-color: #2e7d32; }
.tile-caja.estado-enviado_cocina { border-top-color: #ef6c00; }
.tile-caja.estado-cerrado { border-top-color: #9e9e9e; }

.tile-caja .tile-titulo { font-size: 17px; font-weight: 800; color: #1a1f29; }
.tile-caja .tile-monto { font-size: 19px; font-weight: 800; color: #2e7d32; font-variant-numeric: tabular-nums; }
.tile-caja .tile-sub { font-size: 12px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Covers pendientes de entregar a caja --- */

.tile-cover {
  border-top-color: #ef6c00;
  background: #fff8f1;
}

.tile-cover-tarjeta {
  border-top-color: #1565c0;
  background: #f1f6fd;
}

.tile-forma {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ef6c00;
  color: white;
  vertical-align: middle;
}

.tile-cover-tarjeta .tile-forma { background: #1565c0; }

.resumen-covers {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff3e0;
}

.resumen-covers-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 15px;
}

.aviso-covers {
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff3e0;
  color: #8a4b00;
  font-size: 14px;
}

/* --- Diseño de ticket (Estaciones) --- */

.diseno-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}

.diseno-ticket textarea { width: 100%; }

/* 48 columnas como la térmica de 80 mm: lo que se ve aquí es lo que sale en el papel. */
.vista-ticket {
  width: 48ch;
  margin: 0;
  padding: 14px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fffef8;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.35);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .diseno-ticket { grid-template-columns: 1fr; }
}

/* --- Aviso breve (se quita solo) --- */

.aviso-breve {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 90;
  transform: translate(-50%, 20px);
  padding: 14px 28px;
  border-radius: 12px;
  background: #2e7d32;
  color: white;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.aviso-breve.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- Teclado en pantalla (teclado.js) --- */

/* Mientras el teclado está abierto, la app y los modales se encogen al espacio de arriba
   para que lo que se escribe nunca quede tapado. */
.con-teclado body { height: calc(100vh - var(--alto-teclado, 0px)); }
.con-teclado .vista-login { height: calc(100vh - var(--alto-teclado, 0px)); }
.con-teclado .modal-fondo { bottom: var(--alto-teclado, 0px); }
.con-teclado .modal-caja { max-height: calc(100% - 24px); }

.teclado-pantalla {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 10px;
  background: #d5d9df;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.teclado-fila {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.teclado-pantalla .tecla {
  flex: 1 1 0;
  max-width: 96px;
  height: 54px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: white;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 22px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  touch-action: manipulation;
}

.teclado-pantalla .tecla:active { background: #b8c0ca; }

.teclado-pantalla .tecla-shift,
.teclado-pantalla .tecla-borrar,
.teclado-pantalla .tecla-simbolos,
.teclado-pantalla .tecla-letras {
  flex-grow: 1.5;
  max-width: 140px;
  background: #aeb6bf;
  font-size: 18px;
}

.teclado-pantalla .tecla-shift.activa { background: #2e7d32; color: white; }

.teclado-pantalla .tecla-espacio {
  flex-grow: 5;
  max-width: 480px;
  color: #555;
  font-size: 16px;
}

.teclado-pantalla .tecla-listo {
  flex-grow: 2;
  max-width: 180px;
  background: #2e7d32;
  color: white;
  font-size: 18px;
  font-weight: 700;
}

.teclado-numeros .teclado-fila {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.teclado-numeros .tecla,
.teclado-numeros .tecla-listo,
.teclado-numeros .tecla-borrar { max-width: none; }

@keyframes modal-aparece {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Para modales con tablas anchas (ej. líneas de una compra) que no caben en el ancho normal. */
.modal-caja.ancha {
  width: min(920px, 95vw);
}

.modal-caja h3 {
  margin-top: 0;
}

.modal-caja label {
  display: block;
  font-size: 14px;
  color: #555;
  margin-top: 14px;
  margin-bottom: 6px;
}

.modal-caja input, .modal-caja select, .modal-caja textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.modal-caja input:focus, .modal-caja select:focus, .modal-caja textarea:focus {
  outline: none;
  border-color: #2e7d32;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.modal-botones {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.opcion-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.opcion-lista button {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fafafa;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.opcion-lista-rapida {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.opcion-lista-rapida button {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fafafa;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.mensaje-vacio {
  color: #888;
  text-align: center;
  padding: 30px;
}

/* --- Modificadores Nivel 1 / Nivel 2 --- */

.panel-modificadores {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tarjeta-modificadores {
  background: white;
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid #eceef1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -18px rgba(16, 24, 40, 0.16);
}

.tarjeta-modificadores h3 {
  margin-top: 0;
}

.grupo-modificador {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.lista-opciones-grupo {
  max-height: 260px;
  overflow-y: auto;
  background: #f7f8f9;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
}

.fila-opcion-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-weight: 400;
}

.fila-opcion-nombre {
  flex: 1;
}

.fila-opcion-nombre i {
  color: #999;
  font-size: 12px;
  font-style: normal;
}

/* --- Login --- */

.vista-login {
  height: 100vh;
  display: flex;
  overflow-y: auto;
  background: #1f2933;
}

/* margin:auto centra como antes, pero si la caja no cabe (pantallas bajas con el teclado
   numérico) se puede desplazar en vez de cortarse por arriba. */
.login-caja {
  margin: auto;
  background: white;
  border-radius: 16px;
  padding: 36px;
  width: min(360px, 90vw);
  text-align: center;
}

.login-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.login-teclado button {
  height: 58px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #f5f7fa;
  color: #1f2933;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.login-teclado button:active {
  background: #dfe3e8;
}

.login-teclado .tecla-accion {
  font-size: 15px;
  color: #555;
}

@media (max-height: 820px) {
  .login-caja { padding: 20px 28px; }
  .leosoft-logo-login svg { width: 44px; height: 44px; }
  .login-caja p { margin-bottom: 12px; }
  .login-teclado button { height: 50px; }
}

.login-caja h1 {
  margin: 0 0 6px 0;
}

.login-caja p {
  color: #666;
  margin: 0 0 20px 0;
  font-size: 14px;
}

.login-caja input {
  width: 100%;
  padding: 16px;
  font-size: 22px;
  text-align: center;
  letter-spacing: 4px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 14px;
}

.login-error {
  color: #c62828;
  margin-top: 14px;
  font-size: 14px;
}

/* --- Usuario en la barra --- */

.usuario-actual {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 14px;
  color: #eef2f6;
  white-space: nowrap;
}
.usuario-actual small { font-size: 12px; color: #9fb0c0; }

/* --- Selector de reparto (modificador) --- */

.reparto-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.reparto-fila select {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.reparto-fila .stepper button {
  width: 38px;
  height: 38px;
  font-size: 20px;
}

.reparto-total {
  margin-top: 14px;
  font-weight: 700;
  text-align: center;
  font-size: 16px;
}

.reparto-total.completo { color: #2e7d32; }
.reparto-total.incompleto { color: #c62828; }

.mesero-etiqueta {
  font-size: 11px;
  opacity: 0.85;
}

/* --- Lista de mesas (en vez de la cuadricula fija) --- */

.lista-mesas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mesa-fila {
  background: white;
  border: none;
  border-left: 8px solid #2e7d32;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.mesa-fila.enviada { border-left-color: #ef6c00; }
.mesa-fila.por-cobrar { border-left-color: #6a1b9a; }

.total-caja-resumen {
  background: white;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
}

.mesa-fila.inactivo {
  opacity: 0.55;
  border-left-color: #999;
}

/* --- Clientes (CRM de la hostess) --- */

.cliente-fila.estado-cliente-reservado { border-left-color: #6a1b9a; }
.cliente-fila.estado-cliente-llego { border-left-color: #ef6c00; }
.cliente-fila.estado-cliente-atendido { border-left-color: #2e7d32; }
.cliente-fila.estado-cliente-cancelado { border-left-color: #999; opacity: 0.6; }

/* --- Panel de administración: encabezado fijo (menú, botones, filtros) + zona que se desplaza
   (la tabla/lista) por separado, para que nunca se pierdan de vista al bajar por una lista larga.
   Ver #admin-fijo / #admin-scroll más abajo. --- */

/* --- Flechas para desplazar tablas anchas (más limpio que un botón de texto, y no depende de
   que el navegador muestre su propia barra de scroll). Viven en #admin-filtros-fijos, junto a
   los demás filtros, así que ya están fuera de la zona que se desplaza sin necesitar "sticky". --- */

.tabla-scroll-controles {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tabla-scroll {
  overflow-x: auto;
}

.flecha-scroll {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #1f2933;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
}

.flecha-scroll:hover {
  background: #364150;
}

.flecha-scroll.flecha-inactiva {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.flecha-scroll:hover {
  background: #1f2933;
}

.flecha-izq { left: 6px; }
.flecha-der { right: 6px; }

/* --- Tabla normalizada (productos, tiempos) --- */

.tabla-normalizada {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eceef1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -18px rgba(16, 24, 40, 0.16);
}

.tabla-normalizada th,
.tabla-normalizada td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eef0f2;
  font-size: 14px;
  vertical-align: middle;
}

.tabla-normalizada th {
  background: #f7f8f9;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.tabla-normalizada tbody tr {
  transition: background 0.1s ease;
}

.tabla-normalizada tbody tr:hover {
  background: #f9fafb;
}

.tabla-normalizada tbody tr:last-child td {
  border-bottom: none;
}

.tabla-normalizada input,
.tabla-normalizada select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.tabla-normalizada tr.inactivo { opacity: 0.5; }

.estado-linea-alerta {
  color: #c0392b;
  font-weight: 700;
  font-size: 13px;
}

.estado-linea-ok {
  color: #2e7d32;
  font-weight: 700;
  font-size: 13px;
}

.filtros-ventas {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
  margin-bottom: 8px;
}

.filtros-ventas label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #555;
}

.filtros-ventas input,
.filtros-ventas select {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.filtros-ventas #ventas-agrupar-label {
  flex-direction: row;
  align-items: center;
}

.tabla-normalizada .btn-fila-guardar {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: #2e7d32;
  color: white;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* --- Ticket de impresión (corte de caja, formato térmico) --- */

#ticket-imprimible {
  display: none;
}

.ticket-centro { text-align: center; }

.ticket-separador {
  text-align: center;
  margin: 6px 0;
  letter-spacing: -1px;
}

.ticket-linea {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ticket-linea-sub {
  font-size: 11px;
  color: #444;
  margin: 0 0 4px 0;
}

.ticket-total {
  font-weight: 700;
  border-top: 1px dashed #000;
  margin-top: 4px;
  padding-top: 4px;
}

/* --- Cotización para el cliente (documento formal, tamaño carta) --- */

#cotizacion-imprimible {
  display: none;
}

.cotizacion-doc {
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1a1a;
}

.cotizacion-doc .cot-empresa {
  font-size: 22px;
  font-weight: 800;
  color: #16233f;
  letter-spacing: 0.5px;
}

.cotizacion-doc .cot-contacto {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

.cotizacion-doc .cot-regla {
  border: none;
  border-top: 2px solid #16233f;
  margin: 10px 0 16px 0;
}

.cotizacion-doc .cot-titulo {
  font-size: 17px;
  font-weight: 800;
  color: #16233f;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.cotizacion-doc .cot-subtitulo {
  font-size: 12px;
  color: #555;
  margin-bottom: 14px;
}

.cotizacion-doc .cot-seccion {
  font-size: 12px;
  font-weight: 800;
  color: #16233f;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid #c9a227;
  padding-bottom: 4px;
  margin: 18px 0 8px 0;
}

.cotizacion-doc table.cot-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 4px;
}

.cotizacion-doc table.cot-tabla-datos td {
  padding: 5px 10px;
  border-bottom: 1px solid #e2e2e2;
}

.cotizacion-doc table.cot-tabla-datos .cot-dato-etiqueta {
  font-weight: 700;
  width: 35%;
  color: #16233f;
}

.cotizacion-doc table.cot-tabla th {
  background: #16233f;
  color: white;
  text-align: left;
  padding: 7px 10px;
}

.cotizacion-doc table.cot-tabla th.cot-num,
.cotizacion-doc table.cot-tabla td.cot-num {
  text-align: right;
}

.cotizacion-doc table.cot-tabla td {
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
}

.cotizacion-doc table.cot-tabla tr.cot-fila-categoria td {
  background: #eef0f4;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  color: #16233f;
}

.cotizacion-doc table.cot-tabla tr.cot-fila-subtotal td {
  background: #f6f6f6;
  font-weight: 700;
}

.cotizacion-doc table.cot-tabla tr.cot-fila-total td {
  background: #16233f;
  color: white;
  font-weight: 800;
  font-size: 13px;
  border-bottom: none;
}

.cotizacion-doc .cot-notas {
  font-size: 11px;
  color: #666;
  font-style: italic;
  margin-top: 16px;
}

@media print {
  body * { visibility: hidden; }
  #ticket-imprimible, #ticket-imprimible * { visibility: visible; }
  #cotizacion-imprimible, #cotizacion-imprimible * { visibility: visible; }
  #ticket-imprimible {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 80mm;
    padding: 3mm;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: #000;
  }
  #cotizacion-imprimible {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 14mm 16mm;
  }
}

.mesa-fila .mesa-fila-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mesa-fila .mesa-fila-estado {
  font-size: 13px;
  font-weight: 400;
  color: #777;
}

/* --- Acciones del pedido (promociones, dividir mesa) --- */

.acciones-pedido {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}

/* --- Promociones aplicadas --- */

.lista-promos {
  margin-top: 4px;
}

.promo-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #2e7d32;
  padding: 4px 0;
}

.promo-fila .btn-quitar {
  font-size: 16px;
}

.subtotal-linea {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #777;
  padding: 2px 0;
}

.subtotal-linea.descuento { color: #c62828; }

.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.checklist-items label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #1a1a1a;
  margin: 0;
}

.checklist-items input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* --- Secciones "Ya ordenado" / "Nuevo" dentro del carrito --- */

.seccion-titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  padding: 6px 0 2px 0;
  border-top: 1px solid #eee;
  margin-top: 2px;
}

.seccion-titulo:first-child {
  border-top: none;
  margin-top: 0;
}

.seccion-titulo.nueva {
  color: #ef6c00;
}

.item-enviado {
  opacity: 0.7;
}

.estatus-item {
  font-weight: 700;
  font-size: 13px;
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
}

.estatus-preparando {
  color: #9e9e9e;
}

.estatus-listo {
  color: #2e7d32;
}

/* --- Pantalla de cocina/barra --- */

.cocina-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.grid-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-content: start;
  flex: 1 1 80%;
  min-width: 0;
}

.panel-devoluciones {
  flex: 0 0 20%;
  min-width: 220px;
  max-width: 320px;
  background: #fff3e0;
  border-radius: 12px;
  padding: 14px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.panel-devoluciones h3 {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: #c0392b;
}

.ticket-devolucion {
  background: white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  border-left: 5px solid #c0392b;
  font-size: 13px;
}

.ticket-devolucion .ticket-devolucion-mesa {
  font-weight: 700;
  margin-bottom: 4px;
}

.ticket-devolucion .ticket-devolucion-motivo {
  color: #777;
  font-style: italic;
  margin-bottom: 6px;
}

.ticket-devolucion button {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: #c0392b;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.ticket-devolucion button:disabled {
  background: #999;
}

.ticket {
  background: white;
  border-radius: 12px;
  padding: 16px;
  border-top: 8px solid #ef6c00;
  transition: background 0.3s ease, border-top-color 0.3s ease;
}

/* Semáforo de urgencia: verde = recién enviado, amarillo = ya se está tardando, rojo = urgente —
   así cocina/barra ve de reojo qué atender primero sin leer el cronómetro de cada ticket. */
.ticket.semaforo-verde {
  border-top-color: #2e7d32;
  background: #eef7ef;
}

.ticket.semaforo-amarillo {
  border-top-color: #f9a825;
  background: #fffaeb;
}

.ticket.semaforo-rojo {
  border-top-color: #c62828;
  background: #fdecea;
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.ticket-header .ticket-mesa {
  font-size: 20px;
  font-weight: 700;
}

.ticket-header .ticket-mesero {
  font-size: 13px;
  color: #777;
}

.ticket-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
}

.ticket-item:last-child { border-bottom: none; }

.ticket-item-info { flex: 1; }

.ticket-item-nombre {
  font-size: 16px;
  font-weight: 600;
}

.ticket-item-nota {
  font-size: 13px;
  color: #ef6c00;
  font-style: italic;
}

.ticket-item-tiempo {
  font-size: 13px;
  font-weight: 700;
  color: #1565c0;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.ticket-item.listo .ticket-item-tiempo {
  color: #2e7d32;
  font-weight: 400;
}

.btn-listo {
  padding: 10px 18px;
  border-radius: 8px;
  border: 2px solid #2e7d32;
  background: white;
  color: #2e7d32;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.ticket-item.listo {
  opacity: 0.5;
}

.ticket-item.listo .btn-listo {
  background: #2e7d32;
  color: white;
}

.ticket-item.listo .ticket-item-nombre {
  text-decoration: line-through;
}

.btn-confirmar-entrega {
  width: 100%;
  margin-top: 10px;
  background: #2e7d32;
}

/* --- Mapa de mesas del gerente (BI en vivo) --- */

.gerente-seccion-titulo {
  font-size: 15px;
  font-weight: 700;
  color: #1a1f29;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e8eb;
}

.gerente-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.gerente-tarjeta {
  background: white;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #eceef1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -16px rgba(16, 24, 40, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gerente-tarjeta:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 16px 28px -16px rgba(16, 24, 40, 0.2);
}

.gerente-tarjeta-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.gerente-tarjeta-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa0a8;
  flex-shrink: 0;
}

.gerente-tarjeta.abierto .gerente-tarjeta-label::before { background: #ef6c00; }
.gerente-tarjeta.cerrado .gerente-tarjeta-label::before { background: #2e7d32; }

.gerente-tarjeta-valor {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #12151a;
  font-variant-numeric: tabular-nums;
}

.gerente-tarjeta .link-accion {
  align-self: flex-start;
}

.gerente-barra-progreso {
  height: 14px;
  background: #eceef1;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
  display: flex;
}

.gerente-barra-progreso-relleno {
  height: 100%;
  background: linear-gradient(90deg, #2e7d32, #43a047);
  transition: width 0.4s ease;
}

.gerente-barra-progreso-relleno-abierto {
  height: 100%;
  background: repeating-linear-gradient(45deg, #ef6c00, #ef6c00 8px, #f4923d 8px, #f4923d 16px);
  transition: width 0.4s ease;
}

.gerente-progreso-texto {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 24px 0;
}

.gerente-mapa-mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.gerente-mesa-cuadro {
  aspect-ratio: 1;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white;
  font-weight: 700;
  padding: 8px;
  text-align: center;
  box-shadow: 0 6px 16px -8px rgba(16, 24, 40, 0.35);
  transition: transform 0.15s ease;
}

.gerente-mesa-cuadro:hover {
  transform: translateY(-2px);
}

.gerente-mesa-cuadro.estado-abierto,
.gerente-mesa-cuadro.estado-enviado_cocina {
  background: linear-gradient(160deg, #f57c1f, #ef6c00);
}

.gerente-mesa-cuadro.estado-por_cobrar {
  background: linear-gradient(160deg, #7b28ab, #6a1b9a);
}

.gerente-mesa-cuadro.estado-cerrado {
  background: linear-gradient(160deg, #388e3c, #2e7d32);
}

.gerente-mesa-numero {
  font-size: 18px;
}

.gerente-mesa-total {
  font-size: 15px;
}

.gerente-mesa-mesero {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
}

/* Envuelve la tabla de "Tiempos de cocina" en la misma tarjeta que el resto del dashboard,
   en vez de dejar la tabla flotando directo sobre el fondo gris. */
.gerente-tabla-card {
  background: white;
  border-radius: 14px;
  padding: 6px;
  border: 1px solid #eceef1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -16px rgba(16, 24, 40, 0.16);
}

.gerente-tabla-card .tabla-normalizada {
  box-shadow: none;
}

.gerente-tabla-card .tabla-normalizada th {
  background: transparent;
  color: #6b7280;
}

.gerente-tabla-card .tabla-normalizada tr:last-child td {
  border-bottom: none;
}

/* --- Estructura del menú: árbol Tipo > Categoría > Producto --- */

.estructura-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.estructura-tipo,
.estructura-categoria {
  background: white;
  border-radius: 10px;
  overflow: hidden;
}

.estructura-categoria {
  background: #f7f7f7;
}

.estructura-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
}

.estructura-header-tipo {
  font-size: 16px;
}

.estructura-flecha {
  color: #888;
  width: 14px;
}

.estructura-conteo {
  color: #888;
  font-size: 13px;
  margin-left: auto;
}

.estructura-acciones {
  display: flex;
  gap: 10px;
  margin-left: 12px;
}

.estructura-hijos {
  padding: 6px 16px 14px 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.estructura-categoria .estructura-hijos {
  padding-left: 30px;
}

.estructura-producto {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: white;
  border-radius: 8px;
  font-size: 14px;
}

.estructura-producto.inactivo {
  opacity: 0.5;
}

/* --- Pagos a proveedores: fila de un pago vencido (pendiente y ya pasó su fecha límite) --- */

.pago-vencido td {
  background: #fdecea;
  color: #c62828;
}

/* --- Logo de Leosoft: badge fijo en el encabezado y en la pantalla de login --- */

.leosoft-logo-login {
  margin-bottom: 12px;
}

.leosoft-logo-header {
  flex-shrink: 0;
}

/* --- Calendario de fiestas/eventos: vista mensual --- */

.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendario-celda-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #888;
  text-align: center;
  padding-bottom: 4px;
}

.calendario-celda {
  background: white;
  border-radius: 8px;
  min-height: 74px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 2px solid transparent;
}

.calendario-celda.vacia {
  background: transparent;
}

.calendario-celda.con-evento {
  border-color: #2e7d32;
}

.calendario-dia-numero {
  font-size: 12px;
  color: #888;
  font-weight: 600;
}

.calendario-evento {
  background: #e8f5e9;
  color: #1b5e20;
  border: none;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Links de reservación de los RPs (Admin → Comisionistas) --- */
.rp-link-caja { margin-top: 14px; padding: 12px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fafafa; text-align: left; }
.rp-link-fila { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.rp-link-fila input { flex: 1; min-width: 0; margin: 0; }
.rp-link-fila .btn-secundario { width: auto; margin: 0; }
.rp-link-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rp-link-acciones .btn-secundario { width: auto; margin: 0; text-decoration: none; display: inline-flex; align-items: center; }
.rp-link-nota { color: #777; font-size: 13px; margin: 6px 0 0; }
.rp-link-nota.aviso { color: #a0610a; }
.rp-link-qr { display: block; width: 170px; height: 170px; margin: 12px auto 0; background: #fff; padding: 6px; border-radius: 8px; }
.rp-url-publica { padding: 12px; margin-bottom: 12px; border: 1px dashed #c9c9c9; border-radius: 10px; }
.rp-url-publica label { font-weight: 600; }
.tarjeta-reserva-rp { color: #e1bee7; font-weight: 600; }
.web-sync-campos { display: grid; gap: 8px; margin: 8px 0; }
.web-sync-campos input { margin: 0; width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; }

/* --- Mapas del local (editor y hostess) --- */
.mapa-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #d6e4f5; border-radius: 12px; background: #f3f8fe; }
.mapa-barra-titulo { font-weight: 800; }
.mapa-barra-nota { width: 100%; margin: 2px 0 0; font-size: 13px; color: #5b6573; }
.mapa-select { width: auto; min-width: 200px; margin: 0; padding: 9px 10px; font-size: 16px; font-weight: 700; border-radius: 8px; border: 1px solid #b9c7d8; background: white; }
.hostess-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hostess-mapa { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 18px; }
.hostess-btn-meseros { width: auto; margin: 0; padding: 9px 14px; }
.mesa-plano-etiqueta.etiqueta-mesero { color: white; }

/* --- Facturación (autofactura) --- */
.fact-panel { display: flex; flex-direction: column; gap: 14px; }
.fact-intro { margin: 0; color: #4b5563; font-size: 14px; }
.fact-bloque { padding: 14px; border: 1px solid #e3e6ea; border-radius: 12px; background: white; }
.fact-bloque h4 { margin: 0 0 10px; font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.fact-grid label { margin: 0; }
.fact-grid input, .fact-grid select { margin-top: 4px; }
.fact-switch { display: flex !important; align-items: center; gap: 10px; font-weight: 700; }
.fact-switch input { width: auto; margin: 0; transform: scale(1.3); }
.fact-modo { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.fact-modo.prueba { background: #fff4e5; color: #8a4b00; }
.fact-modo.real { background: #e8f5e9; color: #1b5e20; }
.fact-conteo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.fact-estado { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; background: #eef1f4; }
.fact-estado.listo { background: #e8f5e9; color: #1b5e20; }
.fact-estado.pendiente { background: #fff4e5; color: #8a4b00; }
.fact-estado.error { background: #fdecea; color: #b71c1c; }
.fact-estado.vencido { background: #eceff1; color: #455a64; }
.fact-error { color: #b71c1c; }
.ticket-qr { text-align: center; margin: 6px 0; }
.ticket-qr img { width: 40mm; height: 40mm; }

/* --- Gastos: resumen y catálogo --- */
.gasto-resumen-total { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 14px; }
.gasto-resumen-total > div { flex: 1; min-width: 220px; padding: 12px 14px; border-radius: 12px; background: #f3f8fe; display: flex; flex-direction: column; gap: 4px; }
.gasto-resumen-total span { font-size: 13px; color: #5b6573; }
.gasto-resumen-total b { font-size: 22px; }
.gasto-fila-cat { cursor: pointer; }
.gasto-fila-cat:hover { background: #f7f9fc; }
.gasto-fila-sub td { color: #4b5563; font-size: 14px; background: #fafbfc; }
.gasto-barra-celda { width: 22%; min-width: 80px; }
.gasto-barra { display: block; height: 10px; border-radius: 5px; background: #1565c0; min-width: 2px; }
.gasto-var { font-size: 12px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: #eef1f4; color: #455a64; }
.gasto-var.sube { background: #fdecea; color: #b71c1c; }
.gasto-var.baja { background: #e8f5e9; color: #1b5e20; }
.gasto-catalogo input, #input-nueva-categoria-gasto, .rp-url-publica input { padding: 10px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; background: white; }
.gasto-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gasto-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.gasto-sub { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; background: #eef1f4; font-size: 14px; }
.gasto-sub.propia { background: #e3f2fd; color: #0d47a1; font-weight: 600; }
.gasto-sub button { border: none; background: transparent; color: #c0392b; cursor: pointer; padding: 0 2px; }
.gasto-origen-caja { padding: 1px 6px; border-radius: 6px; background: #fff4e5; color: #8a4b00; font-weight: 700; }

/* --- Ventas vs utilidad (diagrama de dispersión) --- */
.disp-filtros { align-items: flex-end; }
.disp-vista { display: inline-flex; border: 1px solid #dfe3e8; border-radius: 999px; overflow: hidden; background: white; }
.disp-vista button { border: none; background: transparent; padding: 9px 16px; font-size: 14px; font-weight: 600; color: #4b5563; cursor: pointer; }
.disp-vista button.activa { background: #1f2933; color: white; }
.disp-kpis { margin: 10px 0; }
.disp-aviso { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fff4e5; color: #8a4b00; font-size: 14px; }
.disp-marco-grafica { position: relative; background: white; border: 1px solid #e3e6ea; border-radius: 12px; padding: 8px; margin: 0 auto; min-width: 320px; box-sizing: border-box; }
.disp-tamano { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-size: 14px; font-weight: 600; }
.disp-tamano input { width: 150px; margin: 0; }
.disp-tamano span { min-width: 40px; color: #6b7280; }
.disp-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.disp-rejilla { stroke: #eef1f4; stroke-width: 1; }
.disp-marco { fill: none; stroke: #cfd6de; stroke-width: 1; }
.disp-eje { font-size: 12px; fill: #6b7280; }
.disp-titulo-eje { font-size: 13px; font-weight: 700; fill: #374151; }
.disp-cero { stroke: #c62828; stroke-width: 2.5; }
.disp-cero-texto { font-size: 12px; font-weight: 700; fill: #c62828; }
.disp-tendencia { stroke: #1f2933; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0.55; }
.disp-rotulo { font-size: 12px; font-weight: 600; }
.disp-punto { cursor: pointer; }
.disp-punto:hover > :first-child { fill-opacity: 0.55; }
.disp-tooltip { position: absolute; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: #1f2933; color: white; font-size: 13px; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); z-index: 2; }
.disp-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 14px; }
.disp-leyenda-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #dfe3e8; border-radius: 999px; background: white; font-size: 13px; font-weight: 600; cursor: pointer; }
.disp-leyenda-item.apagada { opacity: 0.35; text-decoration: line-through; }
.disp-color { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.disp-tabla tfoot td { font-weight: 800; background: #f7f8fa; border-top: 2px solid #dfe3e8; }

/* --- Pre-nómina en pantalla completa --- */
.pn-encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 12px; }
.pn-volver { width: auto; margin: 0; padding: 9px 14px; }
.pn-titulo { flex: 1; min-width: 260px; }
.pn-titulo h2 { margin: 0; font-size: 22px; }
.pn-titulo p { margin: 4px 0 0; color: #5b6573; font-size: 13px; }
.pn-estatus { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px; font-weight: 800; font-size: 12px; background: #eceff1; color: #455a64; }
.pn-estatus.borrador { background: #fff4e5; color: #8a4b00; }
.pn-estatus.revisado { background: #e3f2fd; color: #0d47a1; }
.pn-estatus.enviado { background: #e8f5e9; color: #1b5e20; }
.pn-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pn-acciones .btn-grande, .pn-acciones .btn-secundario { width: auto; margin: 0; padding: 10px 18px; font-size: 15px; }
.pn-descartar { color: #c62828; }
.pn-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.pn-resumen > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: white; border: 1px solid #e3e6ea; }
.pn-resumen > div:first-child { background: #1f2933; border-color: #1f2933; color: white; }
.pn-resumen > div:first-child span { color: #b8c6d4; }
.pn-resumen span { font-size: 12px; color: #6b7280; font-weight: 600; }
.pn-resumen b { font-size: 20px; }
.pn-ayuda { margin: 0 0 10px; font-size: 14px; color: #4b5563; }
.pn-tabla-marco { overflow-x: auto; border-radius: 12px; }
.pn-tabla { min-width: 1100px; }
.pn-tabla th, .pn-tabla td { white-space: nowrap; }
.pn-tabla thead th { position: sticky; top: 0; z-index: 1; }
.pn-tabla td { font-variant-numeric: tabular-nums; }
.pn-tabla .pn-col-empleado { font-weight: 700; }
.pn-tabla .pn-col-empleado small { display: block; font-weight: 400; color: #8a4b00; white-space: normal; max-width: 220px; }
.pn-tabla td small { color: #8b95a1; }
.pn-tabla .pn-col-neto { background: #f3f8fe; }
.pn-tabla tfoot td { font-weight: 800; background: #f7f8fa; border-top: 2px solid #dfe3e8; }
.pn-tabla tr.pn-pagada td { opacity: 0.7; }
.pn-negativo { color: #c62828; }
.pn-cero { color: #b0b8c1; }
.pn-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pn-chip.pagado { background: #e8f5e9; color: #1b5e20; }
.pn-chip.pendiente { background: #fff4e5; color: #8a4b00; }
.pn-col-botones { display: flex; gap: 6px; }
.pn-col-botones .btn-rapido { margin: 0; }
.pn-col-botones .pn-pagar { background: #2e7d32; color: white; border-color: #2e7d32; }

/* --- Metas de meseros --- */
.btn-metas { font-weight: 800; }
.btn-metas.meta-lograda { color: #a5d6a7; }
.metas-periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.meta-periodo { padding: 14px; border: 1px solid #e3e6ea; border-radius: 14px; background: white; }
.meta-periodo h4 { margin: 0 0 4px; font-size: 18px; }
.meta-numeros { margin: 0 0 10px; color: #4b5563; font-size: 14px; }
.meta-barra-bloque { margin-bottom: 12px; }
.meta-barra-titulo { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.meta-barra { display: flex; height: 14px; border-radius: 7px; background: #eef1f4; overflow: hidden; }
.meta-barra span { display: block; flex-shrink: 0; height: 100%; background: #1565c0; transition: width 0.4s; }
/* Provisional (mesas abiertas, ya enviado a cocina/barra): mismo color pero rayado y más claro. */
.meta-barra span.provisional {
  background: repeating-linear-gradient(135deg, rgba(21, 101, 192, 0.45) 0 6px, rgba(21, 101, 192, 0.2) 6px 12px);
}
.meta-barra-bloque.cerca .meta-barra span.provisional { background: repeating-linear-gradient(135deg, rgba(239, 108, 0, 0.45) 0 6px, rgba(239, 108, 0, 0.2) 6px 12px); }
.meta-prov-texto { color: #1565c0; font-weight: 600; }
.meta-leyenda { display: inline-block; width: 22px; height: 10px; border-radius: 5px; vertical-align: middle; margin: 0 4px 0 8px; }
.meta-leyenda.solida { background: #1565c0; }
.meta-leyenda.rayada { background: repeating-linear-gradient(135deg, rgba(21, 101, 192, 0.45) 0 5px, rgba(21, 101, 192, 0.2) 5px 10px); }
.meta-barra-bloque.cerca .meta-barra span { background: #ef6c00; }
.meta-barra-bloque.lograda .meta-barra span, .meta-barra.lograda span { background: #2e7d32; }
.meta-barra-nota { font-size: 13px; color: #5b6573; margin-top: 4px; }
.meta-barra-bloque.lograda .meta-barra-nota { color: #2e7d32; font-weight: 800; }
.meta-barra.chica { height: 8px; margin-top: 4px; }
.metas-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.metas-acciones .btn-secundario { width: auto; margin: 0; }
.metas-tabla input.meta-input { width: 100%; min-width: 90px; margin: 0; padding: 8px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; }
.metas-tabla input.meta-input.sugerido { background: #fff8e1; border-color: #ffca28; }
.metas-tabla select { margin: 4px 0; }
.meta-hoy { min-width: 120px; }
.metas-agregar-producto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.metas-agregar-producto input { flex: 1; min-width: 240px; margin: 0; padding: 10px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; }
.metas-agregar-producto .btn-secundario { width: auto; margin: 0; }

/* --- Privacidad: checador y pago de nómina --- */
.checador-confirmar { margin-top: 12px; padding: 16px; border-radius: 14px; background: #f3f8fe; text-align: center; }
.login-caja .checador-pregunta { margin: 0; color: #5b6573; font-size: 16px; }
.login-caja .checador-nombre { margin: 6px 0 10px; font-size: 26px; font-weight: 800; color: #1a1f29; }
.login-caja .checador-nota { margin: 0 0 8px; color: #8a4b00; font-weight: 700; }
.nomina-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.nomina-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 2px solid #d6e4f5; border-radius: 12px; background: white; text-align: left; cursor: pointer; touch-action: manipulation; }
.nomina-tile:hover { border-color: #1565c0; }
.nomina-tile.pagado { opacity: 0.55; cursor: default; border-color: #e3e6ea; }
.nomina-tile-nombre { font-size: 17px; font-weight: 800; }
.nomina-tile-periodo { font-size: 13px; color: #6b7280; }
.nomina-tile-estado { font-size: 13px; font-weight: 700; color: #1565c0; }
.nomina-tile.pagado .nomina-tile-estado { color: #2e7d32; }
.nomina-discreto { padding: 8px 10px; border-radius: 8px; background: #f3f8fe; }
.nomina-tile.transferencia { cursor: default; border-color: #e3e6ea; background: #fafbfc; }
.nomina-tile.transferencia .nomina-tile-estado { color: #6b7280; }
.pago-metodo-fijo { padding: 8px 10px; border-radius: 8px; background: #f7f8fa; }
.pago-metodo-fijo small { color: #6b7280; }
.pn-metodo { width: auto; margin: 0 6px 0 0; padding: 4px 8px; font-size: 13px; border-radius: 8px; }

/* --- Cobro: propina y CxC --- */
.propina-fila .btn-rapido.activa { background: #1565c0; color: white; border-color: #1565c0; }
.propina-otro { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.propina-otro input { width: 80px; margin: 0; }
.cobro-cxc { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #fff8e1; border: 1px solid #ffe082; }
.cxc-huella-ok { margin: 6px 0 0; color: #2e7d32; font-weight: 700; }
.cxc-detalle { padding: 8px 10px; border-radius: 8px; background: #fff8e1; }

/* --- Asignación de meseros --- */
.asig-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 8px; }
.asig-params label { margin: 0; }
.asig-params input, .asig-params select { margin-top: 4px; }
.asig-nota { font-weight: 400; font-size: 13px; color: #6b7280; }
.asig-meseros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.asig-mesero { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 10px; border: 2px solid #e3e6ea; border-radius: 10px; cursor: pointer; background: white; }
.asig-mesero.elegido { border-color: #1565c0; background: #f3f8fe; }
.asig-mesero input { width: auto; margin: 0; }
.asig-mesero i, .asig-resumen-fila i { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: #cfd3d8; }
.asig-mesero span { display: flex; flex-direction: column; line-height: 1.25; }
.asig-mesero small { color: #6b7280; font-size: 12px; }
.asig-checo { color: #2e7d32; font-size: 12px; font-weight: 700; }
.asig-aviso { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #fff4e5; color: #8a4b00; font-size: 14px; }
#asig-proponer { margin-bottom: 8px; }
.asig-editar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #eef4fb; }
.asig-editar select { width: auto; min-width: 180px; margin: 0; }
.asig-resumen { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.asig-resumen-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border-radius: 8px; background: #f7f8fa; font-size: 14px; }
.asig-resumen-fila.sin { background: #f1f1f1; color: #6b7280; }
.asig-resumen-venta { margin-left: auto; font-weight: 700; }

/* --- Cobro en dólares --- */
.chip-tipo-cambio { border: 1px solid #2e7d32; background: #e8f5e9; color: #1b5e20; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.chip-tipo-cambio.sin-tc { border-color: #c62828; background: #ffebee; color: #b71c1c; }
.cobro-dolares { background: #f1f8e9; border: 1px solid #c5e1a5; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.cobro-tc { font-size: 14px; margin-bottom: 6px; color: #33691e; }
.cobro-dolares .cobro-fila { flex-wrap: wrap; }
.cobro-dolares .cobro-fila input { flex: 1 1 100%; min-width: 0; font-size: 20px; }

/* --- Reparto de propinas (corte por mesero) --- */
.fila-reparto { display: grid; grid-template-columns: minmax(140px, 1fr) 70px 150px 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.fila-reparto input, .fila-reparto select { margin: 0; }
@media (max-width: 560px) { .fila-reparto { grid-template-columns: 1fr 70px 32px; } .fila-reparto select { grid-column: 1 / 3; } }
.reparto-resumen, .reparto-categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
.reparto-tarjeta { background: #f5f7f6; border: 1px solid #e0e5e2; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.reparto-tarjeta span { font-size: 12px; color: #666; }
.reparto-tarjeta b { font-size: 18px; }
.reparto-tarjeta small { font-size: 11px; color: #999; }
.reparto-destacada { background: #e8f5e9; border-color: #a5d6a7; }
.reparto-destacada b { color: #1b5e20; }
.tabla-reparto .col-total-reparto { background: #e8f5e9; font-weight: 700; }
.tabla-reparto .fila-total-reparto td { font-weight: 700; border-top: 2px solid #333; }
.casilla-del-cajon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff8e1; border: 1px solid #ffe082; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-weight: 600; cursor: pointer; }
.casilla-del-cajon input { width: 22px; height: 22px; margin: 0; }
.casilla-del-cajon small { font-weight: 400; color: #777; }

/* --- Cuentas contables --- */
.cc-filtros { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 12px; }
.cc-filtros label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; margin: 0; }
.cc-filtros input, .cc-filtros select { margin: 0; }
.cc-botones { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.cc-botones button { width: auto; padding: 10px 20px; }
.cc-crear { background: #e05252; }
.cc-tabla thead th { background: #3f6fb5; color: #fff; }
.cc-tabla td { vertical-align: middle; }
.cc-fila-sub td { background: #fafbfc; }
.cc-sub-nombre { padding-left: 34px !important; color: #333; }
.cc-abrir { border: none; background: none; cursor: pointer; font-size: 14px; width: 22px; padding: 0; color: #3f6fb5; }
.cc-num-subs { color: #999; font-weight: 400; }
.cc-col-acciones { text-align: right; white-space: nowrap; width: 1%; }
.cc-accion { border: none; background: none; cursor: pointer; font-size: 17px; padding: 4px 6px; border-radius: 6px; }
.cc-accion:hover { background: #eef2f7; }
.cc-estatus { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.cc-estatus.activo { background: #e8f5e9; color: #2e7d32; }
.cc-estatus.inactivo { background: #eee; color: #777; }
.cc-inactiva td { color: #999; }
@media (max-width: 700px) { .cc-filtros { grid-template-columns: 1fr; } }
.cc-filtros input, .cc-filtros select { padding: 10px 16px; border: 1px solid #d6dbe1; border-radius: 999px; font-size: 15px; background: #fff; width: 100%; box-sizing: border-box; font-weight: 400; }

/* --- Permisos por usuario --- */
.usuario-fila-permisos { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.usuario-fila-permisos .mesa-fila { flex: 1; margin-bottom: 0; }
.btn-permisos-usuario { border: 1px solid #c9d6ea; background: #eef3fb; color: #2c4f86; border-radius: 10px; padding: 0 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-permisos-usuario small { font-weight: 400; color: #b03a2e; }
.permisos-usuario { margin: -4px 0 10px; color: #555; }
.permisos-barra { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; }
.permisos-barra select { flex: 1; min-width: 200px; margin: 0; border-radius: 999px; padding: 10px 16px; }
.permisos-plegar { background: #4aaef5; color: #fff; border: none; border-radius: 6px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.permisos-arbol { max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.permisos-grupo { margin-bottom: 8px; }
.permisos-grupo-cabeza { display: flex; align-items: center; gap: 12px; background: #4aaef5; color: #fff; padding: 12px 16px; border-radius: 6px; cursor: pointer; user-select: none; }
.permisos-grupo-cabeza input, .permisos-item input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: #1f2a37; }
.permisos-grupo-nombre { font-weight: 700; font-size: 16px; flex: 1; }
.permisos-grupo-cuenta { font-size: 13px; opacity: .9; }
.permisos-hijos { padding: 6px 0 4px 34px; }
.permisos-item { display: flex; align-items: center; gap: 12px; padding: 8px 4px; font-weight: 400; font-size: 16px; cursor: pointer; margin: 0; border-bottom: 1px solid #f0f2f5; }
.permisos-arbol label.permisos-item { display: flex !important; align-items: center; }
.permisos-arbol label.permisos-item span { line-height: 1.3; }

/* --- Importar usuarios --- */
.importar-pasos { padding-left: 20px; line-height: 1.7; color: #444; }
.importar-resumen { margin: 12px 0 8px; }
.importar-hay-errores { color: #c0392b; }
.importar-tabla-caja { max-height: 40vh; overflow-y: auto; }
.importar-error td { background: #fdecea; }
.importar-crear td { background: #eef8ee; }
.importar-actualizar td { background: #eef3fb; }
.importar-sin-cambios td { color: #999; }

/* --- Buscador de Administración (🔍 / Ctrl+K) --- */
.admin-menu .admin-buscar { height: 40px; width: 40px; padding: 0; border: 1px solid rgba(74, 174, 245, 0.6); border-radius: 999px; background: rgba(74, 174, 245, 0.25); color: #eef2f6; font-size: 14px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.admin-menu .admin-buscar:hover { background: rgba(74, 174, 245, 0.4); }
.buscador-capa { position: fixed; inset: 0; background: rgba(15, 20, 28, 0.72); z-index: 3000; display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.buscador-caja { width: min(900px, 100%); max-height: 80vh; display: flex; flex-direction: column; gap: 14px; }
.buscador-entrada { position: relative; background: #fff; border-radius: 14px; padding: 16px; }
.buscador-entrada input { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 48px 12px 18px; border: 1px solid #c9d0d8; border-radius: 999px; font-size: 17px; }
.buscador-lupa { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; }
.buscador-resultados { background: #fff; border-radius: 14px; padding: 10px 16px; overflow-y: auto; }
.buscador-grupo { color: #1ba0d8; font-weight: 700; margin: 12px 0 4px; font-size: 15px; }
.buscador-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 12px 9px 24px; font-size: 15px; color: #3f6fb5; border-radius: 8px; cursor: pointer; }
.buscador-item:hover, .buscador-item.marcado { background: #eef4fc; }
.buscador-flecha { color: #9aa7b6; }
.buscador-vacio { padding: 18px; color: #888; text-align: center; }
.buscador-pie { color: #cfd6de; font-size: 12px; text-align: center; }

/* --- Usuarios: tabla compacta --- */
.usr-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 10px; }
.usr-buscar { flex: 0 1 240px; margin: 0; padding: 7px 12px; border: 1px solid #d6dbe1; border-radius: 999px; font-size: 14px; }
.usr-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.usr-chip { border: 1px solid #d6dbe1; background: #f7f8fa; border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; color: #444; }
.usr-chip b { color: #888; font-weight: 600; margin-left: 2px; }
.usr-chip.activo { background: #1f2a37; border-color: #1f2a37; color: #fff; }
.usr-chip.activo b { color: #cfd6de; }
.usr-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.usr-btn { border: 1px solid #d6dbe1; background: #fff; border-radius: 8px; padding: 6px 11px; font-size: 13px; font-weight: 600; cursor: pointer; color: #333; white-space: nowrap; }
.usr-btn:hover { background: #f1f4f8; }
.usr-btn-nuevo { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.usr-btn-nuevo:hover { background: #256628; }
.usr-tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); font-size: 14px; }
.usr-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #7a8594; background: #f7f8fa; padding: 8px 12px; font-weight: 700; }
.usr-tabla td { padding: 7px 12px; border-top: 1px solid #eef0f3; vertical-align: middle; }
.usr-tabla tbody tr { cursor: pointer; }
.usr-tabla tbody tr:hover td { background: #f6f9fd; }
.usr-nombre { font-weight: 600; white-space: nowrap; }
.usr-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e8eef7; color: #3f6fb5; font-size: 11px; font-weight: 700; margin-right: 9px; vertical-align: middle; }
.usr-rol { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #eef1f4; color: #455; white-space: nowrap; }
.usr-rol-admin { background: #e8eef7; color: #2c4f86; }
.usr-rol-gerente, .usr-rol-capitan { background: #fff3e0; color: #a35a00; }
.usr-rol-mesero { background: #e8f5e9; color: #2e7d32; }
.usr-rol-cajero { background: #f3e5f5; color: #7b1fa2; }
.usr-rol-hostess { background: #fce4ec; color: #ad1457; }
.usr-acceso { color: #666; font-size: 13px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-quitados { font-size: 12px; color: #b03a2e; font-weight: 600; }
.usr-completos { font-size: 12px; color: #9aa3ad; }
.usr-estado { font-size: 12px; font-weight: 600; color: #9aa3ad; }
.usr-estado.activo { color: #2e7d32; }
.usr-inactivo td { opacity: .55; }
.usr-botones { text-align: right; white-space: nowrap; width: 1%; }
.usr-icono { border: 1px solid transparent; background: none; border-radius: 8px; padding: 4px 7px; font-size: 16px; cursor: pointer; }
.usr-icono:hover { background: #e8eef7; border-color: #c9d6ea; }
@media (max-width: 760px) { .usr-tabla th:nth-child(3), .usr-tabla td:nth-child(3), .usr-tabla th:nth-child(4), .usr-tabla td:nth-child(4) { display: none; } .usr-acciones { margin-left: 0; } }
.lc-mono { font-family: Consolas, 'Courier New', monospace; font-size: 13px; color: #445; }
.usr-sin-click { cursor: default !important; }
.rp-url-publica.web-sync-compacta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px; }

/* --- Listas compactas: filtro por categoría y campos editables en el renglón --- */
.usr-selector { margin: 0; padding: 6px 10px; border: 1px solid #d6dbe1; border-radius: 999px; font-size: 13px; max-width: 200px; background: #fff; }
.usr-cuenta { font-size: 12px; color: #9aa3ad; white-space: nowrap; }
.lc-precio { display: inline-flex; align-items: center; gap: 2px; color: #666; font-weight: 600; }
.lc-input { width: 92px; margin: 0; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: #f3f5f8; font-size: 14px; font-weight: 700; color: #1f2a37; text-align: right; }
.lc-input:hover { border-color: #c9d0d8; }
.lc-input:focus { border-color: #3f6fb5; background: #fff; outline: none; }
.lc-input.lc-ok { background: #e8f5e9; border-color: #a5d6a7; }
.lc-input.lc-error { background: #fdecea; border-color: #e57373; }
.lc-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; margin: 0; font-weight: 600; }
.lc-switch input { width: 18px; height: 18px; margin: 0; }
/* Botones de acción de Administración (+ Nuevo, Excel, Importar...): más chicos. */
.admin-acciones { gap: 6px; }
.admin-acciones .btn-grande { padding: 7px 13px !important; font-size: 13px !important; border-radius: 8px !important; box-shadow: none !important; }
.lc-periodo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.lc-periodo label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: #667; margin: 0; }
.lc-periodo input, .lc-periodo select { margin: 0; padding: 6px 10px; border: 1px solid #d6dbe1; border-radius: 8px; font-size: 14px; }
.lc-vence-hoy { font-size: 12px; font-weight: 700; color: #e65100; }
.lc-vence-pronto { font-size: 12px; font-weight: 600; color: #a35a00; }
.usr-tabla tbody tr.lc-fila-vencida td { background: #fff5f4; }
.lc-asistencia { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.lc-periodo .usr-btn { align-self: flex-end; }

/* --- Eventos (fiestas) --- */
.ev-etapa { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; vertical-align: middle; }
.ev-barra { width: 90px; height: 6px; background: #eef0f3; border-radius: 999px; overflow: hidden; margin-bottom: 2px; }
.ev-barra span { display: block; height: 100%; background: #43a047; }
.ev-alertas { background: #fff8e1; border: 1px solid #ffe082; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.ev-alertas-titulo { font-weight: 700; color: #8a5a00; }
.ev-alerta { text-align: left; border: none; background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; border-left: 4px solid #f9a825; }
.ev-alerta-alto { border-left-color: #e53935; }
.ev-alerta:hover { background: #fffdf5; }
.ev-ficha { display: flex; flex-direction: column; gap: 10px; }
.ev-cabeza { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ev-titulo { flex: 1; min-width: 240px; }
.ev-titulo h2 { margin: 0 0 4px; font-size: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ev-cabeza-botones { display: flex; gap: 6px; }
.ev-pasos { display: flex; align-items: stretch; gap: 4px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow-x: auto; }
.ev-paso { flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px; border-radius: 10px; color: #9aa3ad; }
.ev-paso-icono { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef0f3; font-size: 15px; margin-bottom: 3px; }
.ev-paso-nombre { font-size: 13px; font-weight: 700; }
.ev-paso-ayuda { font-size: 10.5px; }
.ev-paso-hecho { color: #555; }
.ev-paso-hecho .ev-paso-icono { background: var(--c); color: #fff; font-weight: 700; }
.ev-paso-actual { color: #1f2a37; background: color-mix(in srgb, var(--c) 12%, white); outline: 2px solid var(--c); }
.ev-paso-actual .ev-paso-icono { background: var(--c); color: #fff; }
.ev-paso-gris { opacity: .45; }
.ev-paso-flecha { align-self: center; color: #cfd6de; font-size: 20px; }
.ev-siguiente { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: #f1f6fd; border: 1px solid #c9d6ea; border-radius: 12px; padding: 10px 14px; }
.ev-siguiente-listo { background: #e8f5e9; border-color: #a5d6a7; }
.ev-siguiente-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-siguiente-botones button:disabled { opacity: .45; cursor: not-allowed; }
.ev-btn-cancelar { color: #c0392b; }
.ev-dinero { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ev-dinero > div { background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.ev-dinero span { font-size: 12px; color: #7a8594; }
.ev-dinero b { font-size: 22px; }
.ev-dinero small { font-size: 11px; color: #9aa3ad; }
.ev-dinero-alerta b { color: #c0392b; }
.ev-avisos { background: #fff3e0; border: 1px solid #ffcc80; border-radius: 10px; padding: 8px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.ev-pestanas { margin-top: 4px; }
.ev-seccion { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 10px; }
.ev-seccion h4 { margin: 0 0 8px; }
.ev-seccion-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ev-seccion-cabeza h4 { margin: 0; }
.ev-fila-categoria td { background: #f4f6f9; font-weight: 700; font-size: 12px; text-transform: uppercase; color: #667; }
.ev-cuestionario { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 14px; margin-bottom: 10px; }
.ev-cuestionario label { font-size: 13px; color: #555; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-cuestionario input { margin: 0; }
.ev-pago-cancelado td b { text-decoration: line-through; }
.ev-tarea { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #eef0f3; }
.ev-tarea input { width: 20px; height: 20px; margin: 0; }
.ev-tarea-texto { flex: 1; display: flex; flex-direction: column; }
.ev-tarea-hecha .ev-tarea-texto b { text-decoration: line-through; color: #9aa3ad; }
.ev-tarea-vencida { background: #fff5f4; }
.ev-historial { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ev-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.ev-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; margin: 0; }
.ev-form input, .ev-form select, .ev-form textarea { margin: 0; }
.ev-ancho { grid-column: 1 / -1; }
.ev-cobro { display: flex; flex-direction: column; gap: 4px; }
.ev-cobro label { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.ev-cobro input { width: 18px; height: 18px; }
.ev-en-caja { flex-direction: row !important; align-items: center; gap: 8px !important; background: #f1f8e9; border-radius: 8px; padding: 8px 10px; }
.ev-en-caja input { width: 18px; height: 18px; }
.ev-disponibilidad { font-size: 13px; min-height: 18px; }
@media (max-width: 700px) { .ev-form { grid-template-columns: 1fr 1fr; } }
/* Calendario */
.cal-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cal-barra h3 { margin: 0 6px; text-transform: capitalize; min-width: 170px; text-align: center; }
.cal-leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #555; margin-bottom: 8px; align-items: center; }
.cal-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.calendario-celda.cal-libre { cursor: pointer; }
.calendario-celda.cal-libre:hover { background: #f6f9fd; }
.calendario-celda.cal-cotizando { cursor: pointer; background: #f7f9fc; }
.calendario-celda.cal-ocupado { background: #fff8e1; }
.calendario-celda.cal-hoy { outline: 2px solid #1e88e5; outline-offset: -2px; }
.calendario-celda.cal-pasado { opacity: .6; }
.calendario-evento { color: #fff !important; border: none; text-align: left; font-size: 12px; font-weight: 600; }
.cal-reservas { font-size: 11px; color: #7a8594; font-weight: 400; }

/* Eventos fase 2: margen, paquetes, contrato */
.ev-margen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.ev-margen > div { background: #f7f9fc; border: 1px dashed #cfd8e3; border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.ev-margen span { font-size: 12px; color: #7a8594; }
.ev-margen b { font-size: 18px; }
.ev-margen small { font-size: 11px; color: #9aa3ad; }
.ev-aviso-fuerte { background: #ffebee; border-color: #ef9a9a; margin-bottom: 10px; }
.pq-lineas { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.pq-fila { display: grid; grid-template-columns: 2.2fr 1.2fr .7fr .5fr 1fr 1fr 34px; gap: 6px; align-items: center; }
.pq-fila input { margin: 0; padding: 6px 8px; font-size: 13px; min-width: 0; }
.pq-fila input[type="checkbox"] { width: 18px; height: 18px; justify-self: center; }
.pq-cabeza { font-size: 11px; color: #7a8594; font-weight: 700; }
.pq-resumen { margin-top: 10px; }
.pq-opciones { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.pq-opcion { display: flex; align-items: center; gap: 10px; border: 1px solid #e3e7ee; border-radius: 10px; padding: 8px 12px; cursor: pointer; margin: 0; }
.pq-opcion:has(input:checked) { border-color: #2e7d32; background: #f1f8e9; }
.pq-opcion > div:nth-child(2) { flex: 1; font-size: 13px; }
.pq-opcion input { width: 18px; height: 18px; }
.pq-opcion-precio { display: flex; flex-direction: column; align-items: flex-end; }
.aj-plantilla { font-family: Consolas, 'Courier New', monospace; font-size: 12px; }
.aj-variables { font-size: 12px; margin-top: 6px; }
.aj-variables div { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 10px; margin-top: 6px; }
.cotizacion-doc .cot-version { font-size: 12px; background: #c9a227; color: #fff; border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
.cotizacion-doc .cot-descripcion { font-size: 12px; margin: 0 0 6px; }
.cotizacion-doc td.cot-incluye { font-size: 11px; color: #444; }
.contrato-doc { font-family: Georgia, 'Times New Roman', serif; font-size: 12px; line-height: 1.5; }
.contrato-doc table.cot-tabla { margin: 6px 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
@media (max-width: 700px) { .pq-fila { grid-template-columns: 1fr 1fr 1fr; } .pq-cabeza { display: none; } }
.contrato-doc .ctr-texto { white-space: pre-wrap; text-align: justify; margin: 0 0 8px; }
.contrato-doc .ctr-titulo { text-align: center; font-weight: 700; font-size: 13px; letter-spacing: .5px; margin: 10px 0; }
.contrato-doc .ctr-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 70px; text-align: center; page-break-inside: avoid; }
.contrato-doc .ctr-firmas span { display: block; border-top: 1px solid #000; margin-bottom: 4px; }

/* Eventos fase 3: operación, cierre, reporte */
.op-subtitulo { margin: 14px 0 6px; font-size: 13px; color: #445; }
.op-personal { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 10px; }
.op-personal label { display: flex; flex-direction: column; font-size: 12px; margin: 0; }
.op-personal input { margin: 2px 0 0; padding: 6px 8px; }
.op-crono-fila { display: grid; grid-template-columns: 110px 1fr 170px 34px; gap: 6px; margin-bottom: 4px; align-items: center; }
.op-crono-fila input, .op-crono-fila select { margin: 0; padding: 6px 8px; min-width: 0; }
.op-botones-crono { margin-top: 4px; }
.op-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
.op-areas label, .op-notas { display: flex; flex-direction: column; font-size: 13px; margin: 0; }
.op-areas textarea, .op-notas textarea { margin: 3px 0 0; font-size: 13px; }
.op-notas { margin-top: 8px; }
.cierre-tabla td, .cierre-tabla th { text-align: right; }
.cierre-tabla td:first-child, .cierre-tabla th:first-child { text-align: left; }
.cierre-total td { background: #f1f8e9; }
.cierre-input { width: 130px; margin: 0; padding: 5px 8px; }
.reporte-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reporte-barra label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.reporte-barra input { margin: 0; padding: 5px 8px; }
.reporte-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px; margin-top: 10px; }
.reporte-motivo { font-size: 13px; padding: 3px 0; border-bottom: 1px solid #f0f2f5; }
.reporte-motivo b { display: inline-block; min-width: 28px; }
tr[data-rep-evento] { cursor: pointer; }
.hoja-operacion .hoja-alerta { border: 2px solid #c0392b; color: #c0392b; font-weight: 800; padding: 8px 12px; margin: 8px 0 12px; font-size: 14px; }
.hoja-operacion .hoja-ok { border: 1px solid #2e7d32; color: #2e7d32; font-weight: 700; padding: 6px 12px; margin: 8px 0 12px; }
.hoja-operacion .hoja-personal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; }
.hoja-operacion .hoja-area { border-left: 3px solid #c9a227; padding: 4px 10px; margin-bottom: 8px; font-size: 12px; page-break-inside: avoid; }
.hoja-operacion .hoja-area div { white-space: pre-wrap; margin-top: 2px; }
.hoja-operacion .hoja-lista { font-size: 12px; margin: 0; padding-left: 4px; list-style: none; }
.hoja-operacion .ctr-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 50px; text-align: center; font-size: 12px; }
.hoja-operacion .ctr-firmas span { display: block; border-top: 1px solid #000; margin-bottom: 4px; }
@media (max-width: 700px) { .op-areas { grid-template-columns: 1fr; } .op-crono-fila { grid-template-columns: 90px 1fr; } .reporte-grupos { grid-template-columns: 1fr; } }

/* Caja y cortes en diseño compacto */
.caja-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.caja-estado-turno { font-size: 13px; color: #445; display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.caja-punto { width: 10px; height: 10px; border-radius: 50%; background: #c0392b; display: inline-block; }
.caja-punto.abierto { background: #2e7d32; box-shadow: 0 0 0 3px #2e7d3226; }
#lista-caja .usr-tabla td { padding-top: 10px; padding-bottom: 10px; }
.usr-tabla tr.caja-fila-cover td:first-child { border-left: 3px solid #8e24aa; }
.usr-tabla tr.caja-fila-por_cobrar td:first-child { border-left: 3px solid #e67e22; }
.usr-tabla tr.caja-fila-enviado_cocina td:first-child { border-left: 3px solid #ef6c00; }
.usr-tabla tr.caja-fila-abierto td:first-child { border-left: 3px solid #2e7d32; }
.usr-tabla tr.corte-faltante td { background: #fff5f4; }
.corte-detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.corte-detalle h4 { margin: 0 0 6px; font-size: 13px; color: #556; text-transform: uppercase; letter-spacing: .4px; }
.corte-fila { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; border-bottom: 1px solid #f0f2f5; }
.corte-fila b { font-variant-numeric: tabular-nums; }
.corte-fila-total { font-size: 15px; border-bottom: 2px solid #1f2a37; }
.corte-fila-mal b { color: #c0392b; }
@media (max-width: 700px) { .corte-detalle { grid-template-columns: 1fr; } }

/* Inventarios y kardex compactos */
.inv-tarjetas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 10px; }
.inv-tarjetas b { font-size: 19px; }
.usr-tabla tr.kardex-merma td { background: #fff5f4; }

/* Auditoría física y surtido compactos */
.aud-pasos .usr-chip { font-size: 14px; padding: 7px 14px; }
.aud-pendientes { background: #e67e22; color: #fff; border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.aud-cabeza { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.aud-cabeza > label { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; max-width: 560px; }
.aud-cabeza > label input { flex: 1; margin: 0; }
.aud-guardar { justify-content: center; }
.aud-conteo { display: inline-flex; align-items: center; gap: 4px; }
.aud-conteo input { width: 110px; margin: 0; padding: 5px 8px; }

/* Compras: reporte y detalle de factura */
.compras-rep-grafica { margin: 8px 0 12px; }
.compra-cabeza { margin: 6px 0 10px; }
.compra-folio { font-size: 14px !important; }
.compra-lineas td { vertical-align: top; }
.pago-form { grid-template-columns: 1fr 1fr; }
.compras-rep-grafica svg { max-height: 220px; width: 100%; }

/* Ventas y estado de resultados compactos */
.ventas-cortes { margin: 0 0 10px; align-items: center; }
.ventas-agrupar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 0 0 6px; }
.ventas-agrupar input { width: 16px; height: 16px; margin: 0; }
.usr-tabla tr.ventas-dia-evento td { background: #fff8e1; }
.usr-tabla tr.ventas-hora-pico td { background: #f1f8e9; }
.ventas-barra-hora { width: 40%; }
.ventas-barra-hora span { display: block; height: 10px; border-radius: 5px; background: #2e7d32; opacity: .75; }
.ventas-subtitulo { margin: 16px 0 6px; }
.er-cuerpo { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.2fr); gap: 10px; margin-bottom: 10px; }
.er-estado h4, .er-grafica h4 { margin: 0 0 8px; }
.er-renglon { display: grid; grid-template-columns: 1fr 130px 80px; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px; align-items: baseline; }
.er-renglon b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.er-renglon em { text-align: right; font-style: normal; font-size: 12px; color: #8a94a3; }
.er-renglon small { color: #9aa3ad; font-size: 11px; }
.er-encabezado { font-size: 11px; color: #7a8594; text-transform: uppercase; border-bottom: 2px solid #e3e7ee; }
.er-encabezado b { font-weight: 700; }
.er-sub span { padding-left: 16px; color: #556; font-size: 13px; }
.er-sub b { font-weight: 400; color: #556; }
.er-total { background: #f7f9fc; font-weight: 700; }
.er-total b { font-weight: 800; }
.er-final { border-top: 2px solid #1f2a37; border-bottom: none; font-size: 16px; font-weight: 800; padding-top: 8px; }
.er-final b { font-weight: 800; }
@media (max-width: 900px) { .er-cuerpo { grid-template-columns: 1fr; } }
.gerente-tarjeta-detalle { font-size: 11px; color: #6b7280; margin-top: 2px; }

/* Costos y facturación compactos */
.costos-nota { margin: -4px 0 8px; }
.fact-config { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 8px 14px; margin: 8px 0 10px; }
.fact-config > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 4px 0; }
.fact-config[open] > summary { margin-bottom: 8px; }

/* Metas y ventas vs utilidad compactos */
.metas-barra { align-items: center; }
.metas-sugerencia { background: #fff8e1; border: 1px solid #ffe082; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 0 0 10px; }
.metas-avance td { vertical-align: top; min-width: 150px; }
.metas-avance .meta-barra { margin: 4px 0 2px; }
.metas-tabla .meta-input { width: 120px; margin: 0; padding: 5px 8px; }
.disp-revisar { background: #fff3e0; border: 1px solid #ffcc80; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 0 0 10px; }
.disp-color { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* Estructura y cuentas contables compactas */
.estructura-menu { display: flex; flex-direction: column; gap: 6px; }
.estructura-producto { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #f0f2f5; }
.estructura-producto .usr-nombre { flex: 1; min-width: 0; }
.estructura-datos { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
.estructura-producto .estructura-acciones, .estructura-header .estructura-acciones { display: inline-flex; gap: 2px; margin-left: auto; }
.estructura-alerta { font-size: 12px; color: #c0392b; font-weight: 600; }
.estructura-nuevo { margin: 8px 10px; }
.cc-separador { width: 1px; height: 20px; background: #dde2ea; margin: 0 4px; align-self: center; }
.cc-tabla .cc-sub-nombre { padding-left: 34px; color: #445; }

/* Estaciones y modificadores compactos */
.estaciones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.estaciones-grid select { margin: 0; }
.zona-nueva { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.zona-nueva input { flex: 1; min-width: 160px; margin: 0; }
.zona-nueva select { margin: 0; width: auto; }
.modif-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.3fr); gap: 10px; align-items: start; }
.usr-tabla tr.modif-fila-activa td { background: #e8f5e9; }
.usr-tabla tr.modif-fila-activa td:first-child { box-shadow: inset 3px 0 0 #2e7d32; }
@media (max-width: 900px) { .estaciones-grid, .modif-layout { grid-template-columns: 1fr; } }

/* Salones y mesas (compacto) */
.inv-tarjetas .plano-mapa-nombre { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mapa-barra.lc-periodo { flex-wrap: wrap; align-items: center; gap: 6px; }
.mapa-barra.lc-periodo select { width: auto; margin: 0; }
.plano-nota { margin: 4px 0 8px; font-size: 13px; }
.plano-form-mesa { margin-bottom: 8px; }
@media (max-width: 600px) { .plano-form-mesa { grid-template-columns: 1fr 1fr; } }

/* Hostess (compacto): cifras del día, filtros con conteo y tarjetas delgadas con la hora al frente */
.hostess-resumen { display: block; font-size: 14px; }
.hostess-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.hostess-cifras > div { background: #2c3947; border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; }
.hostess-cifras b { font-size: 20px; color: white; line-height: 1.1; }
.hostess-cifras span { font-size: 11px; font-weight: 500; color: #9aa6b4; }
.hostess-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hostess-chips button { border: 1px solid #3a4756; background: transparent; color: #cfd8e3; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.hostess-chips button b { color: #9aa6b4; margin-left: 2px; }
.hostess-chips button.activo { background: #e8ecf1; color: #1f2933; border-color: #e8ecf1; }
.hostess-chips button.activo b { color: #1f2933; }
.hostess-reservaciones { gap: 6px; }
.tarjeta-reserva { padding: 8px 10px; gap: 10px; align-items: center; }
.tarjeta-reserva-hora { flex-shrink: 0; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; border-radius: 8px; background: #2e7d32; color: white; font-size: 12px; font-weight: 800; white-space: nowrap; }
.tarjeta-reserva-hora i { font-style: normal; font-size: 13px; }
.tarjeta-reserva.estado-sentada .tarjeta-reserva-hora, .tarjeta-reserva.estado-llego .tarjeta-reserva-hora { background: #1565c0; }
.tarjeta-reserva.estado-atendido .tarjeta-reserva-hora { background: #607d8b; }
.tarjeta-reserva.estado-cancelado .tarjeta-reserva-hora { background: #c62828; }
.tarjeta-reserva-info { gap: 2px; flex: 1; }
.tarjeta-reserva-nombre { font-size: 15px; }
.tarjeta-reserva-linea { font-size: 12px; gap: 2px 10px; }
.tarjeta-reserva-nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tarjeta-reserva-estado { font-size: 11px; }

/* Asignación de meseros (compacta) */
.asig-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.asig-titulo h3 { margin: 0; }
.asig-ajustes { margin-left: auto; font-size: 13px; }
.asig-ajustes summary { cursor: pointer; color: #6b7280; }
.asig-ajustes[open] { flex-basis: 100%; }
.asig-ajustes .asig-params { margin-top: 8px; }
.asig-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.asig-meseros { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin: 4px 0 10px; }
.asig-mesero { padding: 5px 8px; border-width: 1px; font-size: 14px; }
.asig-mesero.elegido { border-color: #1565c0; box-shadow: inset 0 0 0 1px #1565c0; }
.asig-plano-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.asig-plano-barra .hostess-salones { flex: 1; min-width: 0; }
.asig-punto { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: #cfd3d8; margin-right: 6px; }
.asig-tabla { margin-top: 10px; }
.asig-tabla tbody tr { cursor: default; }
.asig-part { min-width: 120px; white-space: nowrap; }
.asig-part .ev-barra { display: inline-block; width: 70px; vertical-align: middle; margin-right: 6px; }

/* Propinas por mesero (compacto) */
.propinas-encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.propinas-encabezado h3 { margin: 0; flex: 1; }
.propinas-encabezado select { width: auto; margin: 0; }
.propinas-regla { margin: 0 0 8px; font-size: 13px; }
.tabla-reparto.usr-tabla td, .tabla-reparto.usr-tabla th { white-space: nowrap; display: table-cell !important; } /* se desliza de lado; en celular no se esconde la propina */
.tabla-reparto .fila-total-reparto td { font-weight: 700; border-top: 2px solid #d9dee5; }

/* Puestos: ficha en dos columnas */
.puesto-form { grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
.puesto-form .puesto-ancho { grid-column: 1 / -1; }
.puesto-form .puesto-horas { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.puesto-form .puesto-horas.oculto { display: none; }

/* Pagar nómina (capitán/gerente) */
.pagar-nomina-cifras { grid-template-columns: repeat(3, 1fr); }
.pagar-nomina-lista { max-height: 50vh; overflow-y: auto; }
.pagar-nomina-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.pagar-nomina-grid .nomina-tile { padding: 8px 10px; min-height: 0; text-align: left; }
.pagar-nomina-grid .nomina-tile-nombre .usr-nombre { font-size: 14px; }
.pagar-nomina-grid .nomina-tile-estado { font-size: 12px; }
.pagar-nomina-periodo { margin: 10px 0 4px; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; }

/* Asistencia / incidencias: vista por registro o por persona, y tipos como botones */
.nomina-vista { display: flex; gap: 6px; margin: 4px 0 8px; }
.inc-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.inc-tipos button { border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: white; color: var(--c); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.inc-tipos button.activo { background: var(--c); color: white; }

/* Préstamos: detalle */
.prestamo-cifras { grid-template-columns: repeat(3, 1fr); }
.prestamo-barra { height: 8px; margin: 4px 0 8px; width: 100%; max-width: none; }

/* CRM: detalle de una reservación */
.crm-res-datos { margin-bottom: 10px; font-size: 14px; }
@media (max-width: 600px) { .crm-res-datos { grid-template-columns: 1fr 1fr; } }