* { 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 a.btn-barra { text-decoration: none; }
@media (max-width: 1440px) {
  #btn-tablero .btn-etiqueta { display: none; }
  #btn-tablero { padding: 0 11px; }
}
.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; }
}
/* Cuando los botones del puesto no caben (lo decide ajustarBarraAcciones), van solo con ícono;
   Metas conserva su avance. El nombre completo sale al pasar el cursor. */
.barra-acciones.compacta .btn-barra:not(.btn-metas) .btn-etiqueta,
.barra-acciones.compacta .btn-barra:not(.btn-metas) .btn-corta { display: none; }
.barra-acciones.compacta .btn-barra:not(.btn-metas) { padding: 0 11px; }
@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; }
}

/* Administración con poco espacio: el indicador de la nube queda como ícono (el detalle sale al
   pasar el cursor; en ámbar sigue avisando) y el título de sección se esconde, para que el menú
   quepa en un solo renglón. */
@media (max-width: 1600px) {
  .barra-superior.modo-admin .estado-nube .estado-nube-texto { display: none; }
  .barra-superior.modo-admin .estado-nube { padding: 4px 8px; }
}
@media (max-width: 1366px) {
  .barra-superior.modo-admin .titulo-seccion { display: none; }
}
@media (max-width: 1100px) {
  .barra-superior.modo-admin h1 { display: none; }
}
/* Celular o tablet angosta: el menú de Administración baja a su propio renglón (antes se amontonaba
   encima del título y empujaba "Salir" fuera de la pantalla). Sus listas abren a todo lo ancho. */
@media (max-width: 860px) {
  .barra-superior.modo-admin { flex-wrap: wrap; row-gap: 10px; }
  .barra-superior.modo-admin h1 { display: block; flex: 1 1 auto; font-size: 18px; }
  .barra-superior.modo-admin .admin-menu { order: 99; flex: 1 0 100%; justify-content: flex-start; position: relative; }
  .barra-superior.modo-admin .admin-menu .menu-grupo { position: static; }
  .barra-superior.modo-admin .admin-menu .menu-grupo-panel,
  .barra-superior.modo-admin .admin-menu .menu-grupo:nth-of-type(-n + 3) .menu-grupo-panel {
    left: 0; right: 0; width: auto; max-width: none; top: calc(100% + 8px);
  }
}
@media (max-width: 480px) {
  .barra-superior.modo-admin h1 { display: none; }
  .barra-superior.modo-admin .estado-nube,
  .barra-superior.modo-admin .estado-nube.oculto + #btn-tablero { margin-left: auto; }
}

.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;
}

/* Conexión con la nube (administración y gerencia): verde = al día, ámbar = sin señal o pendientes. */
.estado-nube {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
}
.estado-nube.ok { color: #c8e6c9; background: rgba(102, 187, 106, 0.18); }
.estado-nube.alerta { color: #1f2933; background: #ffb300; }
@media (max-width: 1180px) {
  .estado-nube .estado-nube-texto { display: none; }
  .estado-nube { padding: 4px 8px; }
}

/* --- 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;
}

/* Barra de la comanda: solo en celular (abajo, fija). */
.barra-comanda { display: none; }

/* Celular vertical: una sola columna que se desplaza completa (datos, buscador, categorías,
   productos y al final la comanda), productos de dos en dos, y la barra fija que resume la
   comanda y lleva a ella. Antes quedaban dos columnas y la de productos se aplastaba. */
@media (max-width: 760px) {
  #vista-pedido { display: block; overflow-y: auto; padding: 12px 12px 88px; }
  #vista-pedido .info-pedido { gap: 6px 14px; font-size: 13px; }
  #vista-pedido .acciones-pedido { flex-wrap: wrap; gap: 8px; }
  #vista-pedido .grid-productos,
  #vista-pedido .grid-productos.modo-categorias,
  #vista-pedido .grid-productos:not(.modo-categorias) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding: 2px;
  }
  #vista-pedido .categoria-boton { min-height: 92px; padding: 12px 14px; }
  #vista-pedido .categoria-boton .nombre-categoria { font-size: 18px; }
  #vista-pedido .producto-boton { min-height: 104px; font-size: 15px; }
  #vista-pedido .producto-boton .precio { font-size: 17px; }
  #vista-pedido .btn-atras-menu { padding: 10px 16px; font-size: 16px; }
  #vista-pedido .titulo-menu { font-size: 18px; }
  #vista-pedido .carrito { margin-top: 16px; scroll-margin-top: 8px; }

  .barra-comanda {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 20;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: #1f2933;
    color: white;
    font-size: 15px;
    text-align: left;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
    cursor: pointer;
  }
  #vista-pedido.oculto .barra-comanda { display: none; }
  .barra-comanda #barra-comanda-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-comanda-nuevos { color: #ffb74d; font-weight: 700; }
  .barra-comanda-total { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
  .barra-comanda-ver { color: #a5d6a7; font-weight: 700; }
}

/* Encabezado en celular: "Mis mesas" solo con su flecha, para que quepan título y "Salir". */
@media (max-width: 480px) {
  .barra-superior { padding: 8px 10px; gap: 8px; min-height: 56px; }
  .barra-superior .btn-barra-volver .btn-etiqueta { display: none; }
  .barra-superior .btn-barra-volver { padding: 0 10px; }
  .barra-superior h1 { font-size: 17px; min-width: 0; }
  .barra-superior .btn-barra { height: 38px; }
  .barra-acciones .btn-metas .btn-etiqueta { display: none; }
  .barra-acciones .btn-metas { padding: 0 10px; }
}

.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;
}

/* Secciones dentro de cada menú de Administración (ej. "Comprar", "Almacén"): títulos chicos y grises, no se tocan. */
.menu-grupo-panel .menu-seccion {
  padding: 10px 12px 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a919c;
  pointer-events: none;
  user-select: none;
}
.menu-grupo-panel .menu-seccion:first-child { padding-top: 4px; }
.menu-grupo-panel .menu-seccion.oculto { display: none; }

.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: #2e7d32;
  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;
}

/* Acciones secundarias: antes eran links azules subrayados; ahora son botones suaves tipo "chip". */
.link-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef6ee;
  border: 1px solid #cfe3d0;
  border-radius: 999px;
  color: #1f6a24;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  padding: 6px 12px;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.link-accion:hover {
  background: #e0efe1;
  border-color: #b9d8bb;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.16);
}

.link-accion:active { transform: scale(0.97); box-shadow: none; }
.link-accion:focus-visible { outline: 3px solid rgba(46, 125, 50, 0.35); outline-offset: 2px; }
.link-accion:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.link-accion.oculto { display: none; }

.chip-icono { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Variantes: principal (verde sólido), acento (ámbar), peligro (rojo suave), mini (dentro de un renglón). */
.chip-primario { background: #2e7d32; border-color: #2e7d32; color: #fff; box-shadow: 0 2px 6px rgba(46, 125, 50, 0.28); }
.chip-primario:hover { background: #276b2b; border-color: #276b2b; box-shadow: 0 3px 9px rgba(46, 125, 50, 0.36); }
.chip-acento { background: #fff4e0; border-color: #f3d9a4; color: #8a5300; }
.chip-acento:hover { background: #ffecc9; border-color: #e9c47c; box-shadow: 0 2px 6px rgba(138, 83, 0, 0.16); }
.chip-peligro { background: #fdecea; border-color: #f4c9c4; color: #b3261e; }
.chip-peligro:hover { background: #fadbd7; border-color: #ecaaa3; box-shadow: 0 2px 6px rgba(179, 38, 30, 0.16); }
.chip-mini { padding: 3px 9px; font-size: 12px; }

/* Barra de acciones de la comanda: los chips en una fila que baja de renglón si no caben. */
.acciones-pedido { flex-wrap: wrap; align-items: center; gap: 8px; }
#vista-pedido .acciones-pedido { flex-wrap: wrap; gap: 8px; }
#vista-pedido .info-pedido .link-accion { margin-left: auto; }
/* Ronda y Cancelar varios: dos chips lado a lado arriba de la comanda (si ninguno aplica, el contenedor no ocupa lugar). */
.carrito-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.carrito-acciones:not(:has(.link-accion:not(.oculto))) { display: none; }
.item-carrito .editar-niveles { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

.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: #37474f;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 16px -8px rgba(55, 71, 79, 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: 12px 18px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.huella-estado #btn-registrar-huella { background: #2e7d32; border-color: #2e7d32; color: white; }

/* Huellas de empleados (gerente): una fila por empleado con su estado y botón grande para tablet. */
.huellas-resumen { font-size: 13px; color: #607080; margin: 8px 0 6px; min-height: 18px; }
.lista-huellas { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; padding: 2px; }
.fila-huella {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: white;
  border: 1px solid #e3e7ec;
  border-left: 5px solid #cfd6de;
}
.fila-huella.con-huella { border-left-color: #2e7d32; }
.fila-huella-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fila-huella-datos b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-huella-datos span { font-size: 13px; color: #607080; }
.fila-huella-estado { font-size: 13px; font-weight: 600; color: #607080; white-space: nowrap; }
.fila-huella.con-huella .fila-huella-estado { color: #2e7d32; }
.fila-huella .btn-grande, .fila-huella .btn-secundario { width: auto; padding: 10px 16px; font-size: 15px; white-space: nowrap; margin: 0; }
.fila-huella-nota { font-size: 12px; color: #8a96a3; max-width: 120px; text-align: right; }

/* --- 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: #2e7d32; }
.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; }

/* En tablet o más grande, tarjetas de mesa más grandes: se tocan con prisa y a media luz. */
@media (min-width: 768px) {
  #lista-mesas.lista-matriz { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  .tile-caja.tile-mesa { min-height: 140px; padding: 14px 16px; border-radius: 14px; gap: 4px; }
  .tile-caja.tile-mesa .tile-titulo { font-size: 19px; }
  .tile-caja.tile-mesa .tile-monto { font-size: 22px; }
  .tile-caja.tile-mesa .tile-sub { font-size: 13px; }
}

.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: calc(48ch + 26px); /* 48 columnas + el relleno y el borde */
  max-width: 100%;
  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;
}
/* Tamaños de la térmica: doble de alto (mismas columnas) y doble de alto y ancho (24 columnas). */
.vista-ticket .vt-alta { display: inline-block; line-height: 2.5em; transform: scaleY(2); }
.vista-ticket .vt-grande { display: inline-block; line-height: 2.5em; transform: scale(2); transform-origin: left center; }

@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;
}

/* Rentabilidad diaria (Finanzas → Gastos): una fila por día; en pantallas angostas solo Día, Ventas, Utilidad y Margen (el detalle sale al tocar el día) */
.rd-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; font-variant-numeric: tabular-nums; }
.rd-tabla th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #7a8594; background: #f7f8fa; padding: 8px 12px; font-weight: 700; }
.rd-tabla td { text-align: right; padding: 7px 12px; border-top: 1px solid #eef0f3; vertical-align: middle; }
.rd-tabla th:first-child, .rd-tabla td:first-child { text-align: left; }
.rd-tabla tbody tr { cursor: pointer; }
.rd-tabla tbody tr:hover td { background: #f6f9fd; }
.rd-tabla tbody tr.rd-perdida td { background: #fff7f6; }
.rd-tabla tfoot td { background: #f7f8fa; border-top: 2px solid #dfe5e1; }
.rd-barra { height: 4px; background: #eef0f3; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.rd-barra i { display: block; height: 100%; margin-left: auto; border-radius: 3px; }
@media (max-width: 760px) { .rd-tabla .rd-detalle { display: none; } .rd-tabla th, .rd-tabla td { padding: 7px 8px; } }

/* Presentaciones de un ingrediente (bidón 5 L, caja de 12…) en la ficha del ingrediente */
.pres-fila { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.modal-caja .pres-fila input.pres-nombre { flex: 1; min-width: 0; }
.modal-caja .pres-fila input.pres-contenido { flex: 0 0 110px; width: 110px; }
.pres-fila .pres-unidad { flex: 0 0 auto; min-width: 28px; }

/* Personal → Empleados: la ficha de una persona, por secciones (Datos · Acceso al punto de venta · Pago · Baja) */
.modal-caja:has(.per-ficha) { width: min(760px, 95vw); }
.per-ficha h3 { margin-bottom: 10px; }
.per-seccion { border: 1px solid #e3e8ee; border-radius: 12px; padding: 12px 14px 14px; margin: 0 0 12px; background: #fbfcfd; }
.per-seccion h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #5b6673; }
.per-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; align-items: end; }
.modal-caja .per-campos label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: #555; }
.modal-caja .per-campos label.per-ancho { grid-column: 1 / -1; }
.modal-caja .per-campos input, .modal-caja .per-campos select { padding: 10px 11px; font-size: 15px; background: white; }
.modal-caja label.per-casilla { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; color: #1f2933; }
.modal-caja label.per-casilla input { width: auto; margin: 0; }
.per-acceso-estado { margin: 0 0 10px; font-size: 15px; color: #1f2933; }
.per-acceso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.per-acceso-acciones .btn-secundario { width: auto; margin: 0; padding: 8px 14px; font-size: 14px; }
.per-acceso-acciones label.per-casilla { margin: 0; }
.per-admin { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f1f8f2; border: 1px solid #d5e8d8; }
.per-detalle { margin-top: 10px; }
.per-detalle summary { cursor: pointer; font-size: 14px; color: #2e7d32; font-weight: 600; }
.per-detalle[open] summary { margin-bottom: 6px; }
.per-seccion .huella-estado { margin-top: 10px; }
.per-aviso { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #eef5fd; border: 1px solid #cfe0f5; color: #1f3a5f; font-size: 14px; }
.per-opciones { display: grid; gap: 10px; margin: 6px 0 4px; }
.per-opcion { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid #d6dbe1; background: white; cursor: pointer; font-size: 15px; }
.per-opcion:hover { border-color: #2e7d32; background: #f6faf6; }
.per-opcion span { font-size: 13px; color: #6b7280; }

/* Recetas del menú y subrecetas: cada renglón es ingrediente + cantidad + en qué va (unidad base o una presentación) */
.modal-caja:has(.rec-editor) { width: min(600px, 94vw); }
.rec-fila { padding: 10px 0; border-bottom: 1px solid #eee; }
.rec-linea { display: flex; align-items: center; gap: 8px; }
.rec-linea + .rec-linea { margin-top: 6px; }
.modal-caja .rec-linea select, .modal-caja .rec-linea input { padding: 9px 10px; font-size: 15px; }
.modal-caja .rec-linea .rec-tipo { flex: 0 0 128px; width: 128px; }
.modal-caja .rec-linea .rec-item { flex: 1; min-width: 0; }
.modal-caja .rec-linea .rec-cantidad { flex: 0 0 104px; width: 104px; text-align: right; }
.modal-caja .rec-linea .rec-unidad { flex: 1; min-width: 0; }
.rec-unidad-fija { flex: 1; min-width: 0; color: #555; font-size: 14px; }
.rec-equivale { margin-top: 4px; font-size: 13px; color: #5f6b76; min-height: 17px; text-align: right; }
.rec-nueva { margin-top: 6px; padding: 8px; background: #f4f8f4; border-radius: 8px; }
.rec-resumen { margin: 6px 0 8px; font-size: 15px; }
@media (max-width: 520px) { /* en celular el ingrediente va en su propio renglón para que se lea completo */
  .rec-cabecera.rec-con-tipo { flex-wrap: wrap; }
  .modal-caja .rec-cabecera.rec-con-tipo .rec-tipo { order: 1; flex: 1; width: auto; }
  .rec-cabecera.rec-con-tipo .btn-quitar { order: 2; }
  .modal-caja .rec-cabecera.rec-con-tipo .rec-item { order: 3; flex: 0 0 100%; }
}

/* Surtidos: renglones del formulario "Levantar surtido" (se acomodan solos en celular) */
.sur-fila { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eef1ef; }
.sur-fila:last-child { border-bottom: 0; }
.sur-info { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.modal-caja .sur-fila input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; }
.modal-caja .sur-fila .sur-cant { flex: 0 0 auto; width: 92px; padding: 8px 10px; text-align: right; }
.sur-quitar { flex: 0 0 auto; }

/* En un modal largo (con lista), los botones se quedan a la vista al fondo en vez de quedar escondidos abajo. */
.modal-botones-fijos {
  position: sticky;
  bottom: -24px; /* el modal tiene 24px de relleno: así los botones quedan pegados al borde de abajo */
  background: white;
  margin-top: 14px;
  padding: 12px 0 18px;
  border-top: 1px solid #e6ebe8;
  z-index: 1;
}

.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;
}
.total-caja-resumen:empty { display: none; }

.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-espacio { height: 3.5em; } /* espacio para firmar (en la térmica son renglones en blanco) */

.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;
  }
  /* Tamaño de letra de Estaciones también en la ventana de impresión */
  #ticket-imprimible[data-letra="alta"] { font-size: 15px; }
  #ticket-imprimible[data-letra="alta"] .ticket-linea-sub { font-size: 13px; }
  #ticket-imprimible[data-total="alta"] .ticket-total-venta { font-size: 17px; }
  #ticket-imprimible[data-total="grande"] .ticket-total-venta { font-size: 22px; }
  #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: 8px;
  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;
}

/* Comanda: lo que se está capturando (por enviar) va arriba y resaltado en azul */
.seccion-titulo.por-enviar {
  color: #2e7d32;
}
.item-carrito.item-nuevo {
  background: #e8f5e9;
  border-radius: 8px;
  box-shadow: inset 5px 0 0 #2e7d32;
  padding: 4px 4px 4px 10px;
  margin-bottom: 4px;
}
.item-nuevo .item-carrito-nombre {
  font-weight: 700;
}

/* Mientras se envía a cocina / barra la comanda no acepta cambios */
#vista-pedido.enviando #grid-productos,
#vista-pedido.enviando #lista-carrito {
  pointer-events: none;
  opacity: 0.6;
}

/* Modo espera: el servidor no responde (se reintenta solo). Va dentro de la página, arriba de
   todo: empuja la pantalla hacia abajo y no tapa la barra (Salir, Mis mesas). */
.aviso-sin-conexion {
  flex-shrink: 0;
  background: #c62828;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.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: #2e7d32;
  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;
}

/* Lo incluido en un producto (mezcladores de una botella): pegado debajo, con sangría y una línea
   que lo une a su botella; el botón "Listo" de la botella también los marca. */
.ticket-item.incluido {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 3px solid #c8e6c9;
  border-bottom-color: transparent;
}
.ticket-item.incluido .ticket-item-nombre { font-size: 15px; font-weight: 600; color: #37474f; }
@media (min-width: 1024px) {
  .ticket-item.incluido .ticket-item-nombre { font-size: 17px; }
}
.ticket-item.incluido .ticket-item-tiempo { display: none; }
.ticket-item.incluido .btn-listo { padding: 6px 12px; font-size: 13px; border-width: 1px; }
.marca-incluido { color: #2e7d32; font-weight: 800; }

/* Pantalla de cocina/barra: se lee de pie, a un metro y con prisa. En pantallas grandes todo más
   grande (producto, nota, cronómetro, mesa) y el botón "Listo" más fácil de atinar. */
@media (min-width: 1024px) {
  .grid-tickets { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .ticket { padding: 18px 20px; }
  .ticket-header .ticket-mesa { font-size: 24px; }
  .ticket-header .ticket-mesero { font-size: 14px; }
  .ticket-item { padding: 12px 0; }
  .ticket-item-nombre { font-size: 20px; font-weight: 700; line-height: 1.25; }
  .ticket-item-nota { font-size: 16px; }
  .ticket-item-tiempo { font-size: 15px; }
  .btn-listo { padding: 14px 22px; font-size: 17px; border-radius: 10px; }
  .panel-devoluciones h3 { font-size: 17px; }
  .ticket-devolucion { font-size: 15px; }
}

.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 #d3e6d4; 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: #2e7d32; 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: #e8f5e9; color: #1b5e20; 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: #e8f5e9; color: #1b5e20; }
.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; }
/* Propinas: columna informativa (no se suma al pago de la nómina) */
.pn-tabla .pn-col-info { color: #8b95a1; }
.pn-tabla th.pn-col-info small { font-weight: 500; }
.pn-tabla tfoot td.pn-col-info { font-weight: 600; }
.pn-tabla td small.pn-en-pago { color: #8a4b00; font-weight: 700; }
.pn-aviso-propinas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: #fff4e5; border: 1px solid #f1d6a8; color: #6b3d00; font-size: 14px; }
.pn-aviso-propinas > div { flex: 1; min-width: 220px; }
.pn-aviso-propinas .btn-grande { width: auto; margin: 0; padding: 10px 16px; font-size: 14px; }
.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 { white-space: nowrap; }
.pn-col-botones .btn-rapido { display: inline-block; margin: 0; }
.pn-col-botones .btn-rapido + .btn-rapido { margin-left: 6px; }
.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: #2e7d32; 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(46, 125, 50, 0.45) 0 6px, rgba(46, 125, 50, 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: #2e7d32; 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: #2e7d32; }
.meta-leyenda.rayada { background: repeating-linear-gradient(135deg, rgba(46, 125, 50, 0.45) 0 5px, rgba(46, 125, 50, 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 #d3e6d4; border-radius: 12px; background: white; text-align: left; cursor: pointer; touch-action: manipulation; }
.nomina-tile:hover { border-color: #2e7d32; }
.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: #2e7d32; }
.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-tabla select.pn-metodo { width: auto; min-width: 110px; max-width: 150px; margin: 0 6px 0 0; padding: 4px 8px; font-size: 13px; border-radius: 8px; }

/* --- Cobro: propina y CxC --- */
.propina-fila .btn-rapido.activa { background: #2e7d32; color: white; border-color: #2e7d32; }
.pisos-mesa { display: flex; gap: 8px; }
.pisos-mesa .btn-rapido { flex: 1; padding: 12px 8px; font-size: 16px; }
.pisos-mesa .btn-rapido.activa { background: #2e7d32; color: white; border-color: #2e7d32; }
.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: #2e7d32; 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: #1f2933; 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: #2e7d32; }
.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 #cfe0d0; background: #eef6ee; color: #1b5e20; 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: #2e7d32; 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: #2e7d32; 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: #eef6ee; }
.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: #2e7d32; 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: #2e7d32; 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: #e8f5e9; color: #2e7d32; 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: #e8f5e9; color: #1b5e20; }
.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: #e8f5e9; border-color: #cfe0d0; }
@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: #2e7d32; 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 #cfe0d0; 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; 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: #2e7d32; box-shadow: inset 0 0 0 1px #2e7d32; }
.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; } }


/* --- Mis mesas: barra para encontrar cuentas rápido cuando hay muchas --- */
.barra-mesas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.barra-mesas .buscar-mesas { flex: 1 1 220px; min-width: 160px; padding: 12px 14px; font-size: 16px; border-radius: 12px; border: 1px solid #cfd8dc; background: white; }
.barra-mesas .chips-mesas { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.chip-mesas { border: 1px solid #cfd8dc; background: white; color: #333; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.chip-mesas.activo { background: #1a1f29; color: white; border-color: #1a1f29; }
.chip-mesas.chip-lista { border-color: #2e7d32; color: #2e7d32; }
.chip-mesas.chip-lista.activo { background: #2e7d32; color: white; }
.barra-mesas select, .barra-mesas .btn-vista-mesas { padding: 10px 12px; font-size: 14px; border-radius: 10px; border: 1px solid #cfd8dc; background: white; }
.barra-mesas .btn-vista-mesas { font-weight: 700; cursor: pointer; }
.barra-mesas .btn-vista-mesas.activo { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }
.grupo-mesero-titulo { grid-column: 1 / -1; font-weight: 800; font-size: 15px; margin-top: 8px; padding: 6px 2px; border-bottom: 2px solid #e0e0e0; color: #1a1f29; }
.grupo-mesero-titulo span { font-weight: 600; color: #666; margin-left: 6px; }
.tile-mesa .tile-tiempo { font-size: 12px; color: #888; font-weight: 600; }
.tile-mesa .tile-tiempo.larga { color: #c62828; }

#lista-mesas.lista-matriz.lista-compacta { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
#lista-mesas.lista-compacta .tile-caja.tile-mesa { min-height: 96px; padding: 9px 11px; border-radius: 12px; gap: 2px; }
#lista-mesas.lista-compacta .tile-caja.tile-mesa .tile-titulo { font-size: 17px; }
#lista-mesas.lista-compacta .tile-caja.tile-mesa .tile-monto { font-size: 19px; }
#lista-mesas.lista-compacta .tile-caja.tile-mesa .tile-sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lista-mesas.lista-compacta .tile-mesa .tile-estado { font-size: 11px; padding: 1px 7px; }


/* --- Metas (gerente): resumen de la noche = cobrado + abiertas --- */
.resumen-noche { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 10px 0 14px; padding: 12px 14px; background: #f1f8e9; border: 1px solid #c5e1a5; border-radius: 14px; }
.resumen-noche > div { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
.resumen-noche .rn-etq { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #5f6b52; }
.resumen-noche b { font-size: 22px; font-variant-numeric: tabular-nums; color: #1a1f29; }
.resumen-noche small { font-size: 12px; color: #777; }
.resumen-noche .rn-signo { font-size: 22px; font-weight: 700; color: #888; }
.resumen-noche .rn-total b { font-size: 28px; color: #1b5e20; }


/* --- Ayuda: manuales dentro del sistema --- */
.ayuda-manual { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e5e8ec; }
.ayuda-botones { display: flex; gap: 8px; align-items: center; }
.ayuda-botones a, .modal-botones a.btn-grande { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 12px 16px; border-radius: 12px; font-weight: 700; }
.ayuda-botones a.btn-secundario { background: #e8e8e8; color: #222; }
.ayuda-visor { width: 100%; height: 56vh; border: 1px solid #cfd8dc; border-radius: 10px; background: #f4f5f7; }


/* --- Impresión: estado de impresoras y tickets sin imprimir --- */
.impresion-alerta { background: #c62828; color: white; border-radius: 999px; padding: 1px 7px; font-size: 12px; font-weight: 800; margin-left: 4px; }
#btn-impresion.con-alerta { border-color: #ef9a9a; }
.imp-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e5e8ec; font-size: 14px; }
.imp-fila .imp-info { flex: 1 1 200px; }
.imp-fila small { color: #777; }
.imp-estado { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.imp-estado.ok { background: #e8f5e9; color: #1b5e20; }
.imp-estado.espera { background: #fff3e0; color: #e65100; }
.imp-estado.mal { background: #fdecea; color: #c62828; }
.imp-botones { display: flex; gap: 6px; }
.imp-botones button { padding: 6px 10px; border-radius: 8px; border: 1px solid #cfd8dc; background: white; font-weight: 700; cursor: pointer; }
.imp-lista { max-height: 46vh; overflow: auto; }


/* --- Cierre de turno: contador de billetes y avisos previos --- */
.aviso-ok { background: #e8f5e9; color: #1b5e20; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 6px 0; }
.contador-billetes { margin: 6px 0 10px; border: 1px solid #cfd8dc; border-radius: 10px; padding: 6px 10px; background: #fafbfc; }
.contador-billetes summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.contador-billetes .cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.contador-billetes label { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0; }
.contador-billetes label span { min-width: 54px; font-weight: 700; }
.contador-billetes input { width: 100%; padding: 8px; font-size: 16px; }
.contador-billetes .cb-total { text-align: right; font-size: 15px; }


/* --- Huellas y códigos --- */
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.acc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid #e5e8ec; }
.acc-datos { flex: 1 1 200px; display: flex; flex-direction: column; }
.acc-datos span { font-size: 12px; color: #777; }
.acc-estado { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.acc-estado.ok { background: #e8f5e9; color: #1b5e20; }
.acc-estado.falta { background: #fff3e0; color: #e65100; }
.acc-fila button { width: auto; min-width: 0; padding: 9px 14px; font-size: 14px; border-radius: 10px; }


/* --- Barra superior: menos amontonada. Impresión y Ayuda van solo con ícono en Administración y en
   pantallas medianas (el nombre sale al pasar el cursor); el resto de botones ya se compacta solo. --- */
.barra-superior.modo-admin #btn-impresion .btn-etiqueta,
.barra-superior.modo-admin #btn-ayuda .btn-etiqueta,
.barra-superior.modo-admin #btn-huellas .btn-etiqueta,
.barra-superior.modo-admin #btn-huellas .btn-corta { display: none; }
.barra-superior.modo-admin #btn-impresion,
.barra-superior.modo-admin #btn-ayuda,
.barra-superior.modo-admin #btn-huellas { padding: 0 11px; }
@media (max-width: 1280px) {
  #btn-impresion .btn-etiqueta, #btn-ayuda .btn-etiqueta { display: none; }
  #btn-impresion, #btn-ayuda { padding: 0 11px; }
}
/* El menú de Administración se queda en un solo renglón mientras quepa; si no, baja ordenado debajo. */
.barra-superior.modo-admin .admin-menu { gap: 6px; }
.barra-superior.modo-admin { column-gap: 8px; }
@media (max-width: 1700px) {
  .barra-superior.modo-admin .titulo-seccion,
  .barra-superior.modo-admin .barra-usuario .usuario-actual,
  .barra-superior.modo-admin #btn-tablero .btn-etiqueta,
  .barra-superior.modo-admin .btn-barra-salir .btn-etiqueta { display: none; }
  .barra-superior.modo-admin #btn-tablero,
  .barra-superior.modo-admin .btn-barra-salir { padding: 0 11px; }
}

.insignia-pagares { display:inline-block; min-width:18px; padding:0 6px; margin-left:4px; border-radius:9px; background:#c0392b; color:#fff; font-size:12px; font-weight:700; text-align:center; }

/* Cancelar varios productos de la comanda */
.barra-cancelar-varios { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 6px; background: #fdecea; border: 1px solid #f5c2bd; border-radius: 10px; font-size: 14px; }
.item-seleccionable { cursor: pointer; }
.item-seleccionable.item-marcado { background: #fdecea; outline: 2px solid #c0392b; border-radius: 8px; }
.casilla-cancelar { font-size: 22px; line-height: 1; padding-left: 4px; }

.btn-repetir { margin-left: 4px; padding: 3px 8px; border: 1px solid #c9ced6; border-radius: 8px; background: #f4f5f7; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }

/* Cortesías de gerencia */
.cortesias-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; padding: 12px; align-items: start; }
.cortesias-bloque { background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.cortesias-bloque .usr-chips { margin: 6px 0; flex-wrap: wrap; }
.cortesias-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.cortesias-izq > .usr-chips { margin: 8px 0; flex-wrap: wrap; }
.cortesias-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.cortesias-grid .producto-boton { position: relative; }
.cortesia-elegido { outline: 3px solid #2e7d32; background: #e8f5e9; }
.cortesia-cuenta { position: absolute; top: 6px; right: 6px; min-width: 24px; padding: 1px 7px; border-radius: 12px; background: #2e7d32; color: #fff; font-weight: 800; font-size: 14px; text-align: center; }
.cortesias-der { background: #fff; border-radius: 12px; padding: 12px; position: sticky; top: 8px; }
.cortesia-fila { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eee; }
.cortesia-hoy-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.cortesia-hoy-fila.anulada { opacity: 0.5; text-decoration: line-through; }
@media (max-width: 800px) {
  .cortesias-layout { grid-template-columns: 1fr; }
  .cortesias-der { position: static; }
  .cortesias-campos { grid-template-columns: 1fr; }
}
.cortesias-campos input, #input-cortesia-buscar { width: 100%; padding: 9px 12px; border: 1px solid #cfd4db; border-radius: 10px; font-size: 14px; box-sizing: border-box; background: #fff; }
.cortesias-bloque > label { font-weight: 700; font-size: 14px; }
.cortesias-bloque .usr-chip, .cortesias-izq > .usr-chips .usr-chip { padding: 8px 14px; font-size: 14px; }


/* Selector de negocio (arriba, administración): como el de Wansoft, cambia de negocio completo. */
.selector-negocio { position: relative; flex: none; }
.selector-negocio .btn-barra { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); max-width: 260px; }
.selector-negocio .btn-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.selector-negocio .negocio-flecha { font-size: 11px; opacity: 0.8; margin-left: 2px; }
.selector-negocio.solo-uno .negocio-flecha { display: none; }
.selector-negocio.solo-uno .btn-barra { cursor: default; }
.menu-negocios { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: #fff; color: #1f2933; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); padding: 6px; z-index: 30; }
.menu-negocios.oculto { display: none; }
.negocio-opcion { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 12px; border-radius: 8px; font-size: 15px; color: #1f2933; cursor: pointer; }
.negocio-opcion:hover { background: #eef6ee; }
.negocio-opcion.actual { font-weight: 800; color: #1b5e20; cursor: default; }
.negocio-nota { font-size: 12px; color: #8a4b00; background: #fff8e1; border-radius: 8px; padding: 8px 10px; margin: 4px; }

.negocio-grupo { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; padding: 8px 12px 2px; }
.suc-pasos { padding-left: 20px; display: grid; gap: 10px; }
.suc-cmd { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.suc-cmd code { flex: 1; background: #1f2933; color: #e8f5e9; border-radius: 8px; padding: 8px 10px; font-size: 12px; overflow-x: auto; white-space: nowrap; }

/* --- Administración: barra en dos renglones limpios ---
   Arriba: logo, "Administración", negocio y la sección abierta; a la derecha, nube, ayuda, tablero, usuario y salir (todos del mismo alto).
   Abajo: el menú (Catálogo, Compras…) como pestañas planas en un renglón propio, con el grupo abierto subrayado. Antes el menú compartía
   renglón con todo lo demás y, en pantallas medianas, se partía en dos filas de píldoras amontonadas. */
.barra-superior.modo-admin { flex-wrap: wrap; row-gap: 0; padding: 8px 16px 0; min-height: 0; column-gap: 10px; }
.barra-superior.modo-admin h1 { display: block; flex: 0 0 auto; font-size: 18px; }
.barra-superior.modo-admin .titulo-seccion { display: inline-block; font-size: 13px; padding: 7px 12px; }
.barra-superior.modo-admin .barra-acciones { margin-left: auto; }
.barra-superior.modo-admin .estado-nube { display: inline-flex; align-items: center; height: 42px; padding: 0 12px; border-radius: 999px; }
.barra-superior.modo-admin .admin-menu {
  order: 99;
  flex: 1 0 100%;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 6px -16px 0;
  padding: 2px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}
.barra-superior.modo-admin .admin-menu .menu-grupo { position: relative; }
.barra-superior.modo-admin .admin-menu .boton-grupo {
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #b8c6d4;
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 transparent;
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
}
.barra-superior.modo-admin .admin-menu .boton-grupo:hover:not(.grupo-activo) { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.18); }
.barra-superior.modo-admin .admin-menu .boton-grupo.grupo-activo { background: transparent; color: #fff; border-color: transparent; box-shadow: inset 0 -3px 0 #66bb6a; }
.barra-superior.modo-admin .admin-menu .admin-buscar {
  width: 36px; height: 36px; margin: 0 6px 0 2px; border-radius: 50%; border: 1px solid rgba(74, 174, 245, 0.5);
  background: rgba(74, 174, 245, 0.2); color: #eef2f6; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.barra-superior.modo-admin .admin-menu .admin-buscar:hover { background: rgba(74, 174, 245, 0.4); }
.barra-superior.modo-admin .admin-menu .menu-grupo-panel { top: calc(100% + 2px); }
/* Con el menú abajo, arriba vuelve a caber el nombre del usuario y "Salir" con texto hasta pantallas medianas. */
@media (min-width: 1101px) {
  .barra-superior.modo-admin .barra-usuario .usuario-actual,
  .barra-superior.modo-admin .btn-barra-salir .btn-etiqueta { display: inline; }
  .barra-superior.modo-admin .btn-barra-salir { padding: 0 14px 0 12px; }
}
@media (min-width: 1281px) {
  .barra-superior.modo-admin .estado-nube .estado-nube-texto { display: inline; }
}
@media (max-width: 1100px) {
  .barra-superior.modo-admin .titulo-seccion { display: none; }
}
@media (max-width: 860px) {
  .barra-superior.modo-admin .admin-menu { padding: 2px 6px; }
  .barra-superior.modo-admin .admin-menu .boton-grupo { padding: 0 10px; font-size: 13px; height: 40px; }
}
@media (max-width: 480px) {
  .barra-superior.modo-admin h1 { display: none; }
}

/* --- Checklist vivo, Pendientes y avisos ("Mi turno" en el local; Plantillas y Resultados en administración) --- */
.ck-insignia { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e53935; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #1b2530; }
.ck-insignia.oculto { display: none; }
#btn-mi-turno { position: relative; }
.ck-raiz { max-height: 82vh; display: flex; flex-direction: column; min-width: 0; }
.ck-cabeza { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex: 0 0 auto; }
.ck-tabs { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; }
.ck-tab { flex: 0 0 auto; white-space: nowrap; border: 1px solid #dfe3e8; background: #fff; color: #1f2933; border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 700; cursor: pointer; }
.ck-tab.activa { background: #1f2933; border-color: #1f2933; color: #fff; }
.ck-cuenta { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: #e3e8ee; color: #1f2933; font-size: 12px; text-align: center; }
.ck-tab.activa .ck-cuenta { background: rgba(255, 255, 255, 0.25); color: #fff; }
.ck-cuenta.rojo { background: #e53935; color: #fff; }
.ck-cerrar { padding: 8px 14px; white-space: nowrap; flex: 0 0 auto; font-size: 16px; }
.ck-cuerpo { overflow-y: auto; min-height: 0; padding-right: 2px; }
.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.ck-chip { border: 1px solid #dfe3e8; background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; color: #1f2933; }
.ck-chip.activo { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.ck-sep { width: 1px; height: 22px; background: #dfe3e8; margin: 0 4px; }
.ck-nuevo { width: auto !important; padding: 8px 16px !important; font-size: 14px !important; margin-left: auto; }
.ck-progreso { height: 10px; border-radius: 6px; background: #e3e8ee; overflow: hidden; }
.ck-progreso-relleno { height: 100%; background: linear-gradient(90deg, #66bb6a, #2e7d32); transition: width 0.3s; }
.ck-progreso-texto { margin: 6px 0 10px; font-size: 14px; color: #52606d; }
.ck-momento { margin: 14px 0 6px; font-size: 14px; letter-spacing: 0.3px; color: #52606d; text-transform: uppercase; }
.ck-fila { border: 1px solid #e3e8ee; border-left: 5px solid #cbd2d9; border-radius: 10px; background: #fff; margin-bottom: 8px; overflow: hidden; }
.ck-fila.ck-completada { border-left-color: #43a047; background: #f6fbf6; }
.ck-fila.ck-problema { border-left-color: #f9a825; background: #fffaf0; }
.ck-fila.ck-sin_completar, .ck-fila.ck-vencida { border-left-color: #e53935; }
.ck-fila-cabeza { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 16px; color: #1f2933; }
.ck-icono { font-size: 22px; line-height: 1.1; }
.ck-titulo { flex: 1; min-width: 0; font-weight: 700; }
.ck-titulo small { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; font-weight: 500; }
.ck-flecha { color: #9aa5b1; padding-top: 2px; }
.ck-etq { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef1f4; color: #52606d; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ck-etq.rojo { background: #fde8e6; color: #b3261e; }
.ck-etq.verde { background: #e3f4e5; color: #1b5e20; }
.ck-etq.amarillo { background: #fff3cd; color: #8a6100; }
.ck-detalle { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.ck-detalle.oculto { display: none; }
.ck-instructivo { padding: 8px 10px; background: #f4f6f8; border-radius: 8px; font-size: 14px; color: #364152; }
.ck-criterios { margin: 0; padding-left: 20px; font-size: 14px; color: #364152; }
.ck-caja { padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.ck-caja.rojo { background: #fde8e6; color: #7a1c14; }
.ck-caja.amarillo { background: #fff3cd; color: #6b4e00; }
.ck-caja.verde { background: #e3f4e5; color: #1b5e20; }
.ck-pareja { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ck-foto { margin: 0; text-align: center; }
.ck-foto img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; border: 1px solid #dfe3e8; cursor: zoom-in; background: #f4f6f8; min-height: 80px; }
.ck-foto img.ck-grande { position: fixed; inset: 5vh 4vw; width: 92vw; height: 90vh; max-height: none; object-fit: contain; z-index: 4000; background: rgba(0, 0, 0, 0.9); cursor: zoom-out; }
.ck-foto figcaption { font-size: 12px; color: #52606d; margin-top: 3px; }
.ck-vacia { display: flex; align-items: center; justify-content: center; min-height: 90px; border: 2px dashed #cbd2d9; border-radius: 8px; color: #9aa5b1; font-size: 13px; }
.ck-tomar { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 12px 14px; font-weight: 700; text-align: center; }
.ck-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-botones .btn-grande, .ck-botones .btn-secundario { flex: 1 1 160px; width: auto; }
.ck-ok { background: #2e7d32 !important; }
.ck-mal { background: #c0392b !important; }
.ck-problema, .ck-form, .ck-validar { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: #f4f6f8; }
.ck-problema.oculto, .ck-form.oculto { display: none; }
.ck-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ck-pend { border: 1px solid #e3e8ee; border-left: 5px solid #cbd2d9; border-radius: 10px; background: #fff; padding: 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.ck-pend.ck-prio-alta { border-left-color: #e53935; }
.ck-pend.ck-prio-media { border-left-color: #f9a825; }
.ck-pend.ck-prio-baja { border-left-color: #66bb6a; }
.ck-pend.ck-vencida { background: #fff6f5; }
.ck-pend-cabeza { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 16px; }
.ck-pend-sub { font-size: 13px; color: #52606d; }
.ck-reasignar select { width: auto; max-width: 100%; }
.ck-aviso { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e3e8ee; border-left: 5px solid #cbd2d9; margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.ck-aviso.nuevo { background: #eef6ff; border-left-color: #1e88e5; }
.ck-aviso.ck-nivel-2 { border-left-color: #e53935; }
.ck-aviso small { color: #7b8794; }
/* Administración */
.ck-barra-admin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ck-inactivas { font-size: 13px; color: #52606d; display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.ck-inactivas input { width: auto; }
.ck-area { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08); margin-bottom: 14px; padding: 12px; }
.ck-area header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ck-area-nombre { flex: 1; min-width: 0; font-size: 17px; }
.ck-area-nombre small { display: block; color: #7b8794; font-weight: 500; font-size: 12px; }
.ck-miniatura { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid #dfe3e8; flex: 0 0 auto; }
.ck-miniatura.vacia { display: flex; align-items: center; justify-content: center; font-size: 22px; background: #f4f6f8; color: #9aa5b1; }
.ck-inactivo { opacity: 0.55; }
.ck-dias { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ck-dias label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.ck-dias input { width: auto; }
.ck-form-ancho { max-width: 560px; }
.ck-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 10px; }
.ck-filtros label { font-size: 13px; color: #52606d; }
.ck-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 12px 0; }
.ck-bloque { background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08); margin-bottom: 12px; overflow-x: auto; }
.ck-bloque h4 { margin: 0 0 6px; font-size: 14px; color: #364152; }
.ck-barrita { height: 8px; border-radius: 4px; background: #e3e8ee; overflow: hidden; }
.ck-barrita div { height: 100%; background: #43a047; }
@media (max-width: 600px) {
  .ck-tab { padding: 8px 12px; font-size: 14px; }
  .ck-tab:not(.activa) .ck-txt { display: none; }
  .ck-cabeza { align-items: flex-start; }
}

/* --- Eventos con artista --- */
.eva-cabeza { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.eva-titulo { flex: 1 1 220px; min-width: 0; font-size: 18px; }
.eva-titulo small { display: block; color: #52606d; font-size: 13px; font-weight: 500; }
.eva-equilibrio { background: #eef6ff; border: 1px solid #c8def5; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.eva-equilibrio h4 { margin: 0 0 4px; }
.eva-equilibrio p { margin: 4px 0; }
.eva-equilibrio.eva-aviso { background: #fff3cd; border-color: #f0d98a; }
.eva-grande { font-size: 20px; color: #0d47a1; }
.eva-tarjetas { margin-bottom: 12px; }
.eva-columnas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1000px) { .eva-columnas { grid-template-columns: minmax(0, 1fr); } }
.eva-celda { display: flex; gap: 4px; align-items: center; }
.eva-celda input { width: 100%; text-align: right; }
tr.eva-amarilla td { background: #fffbe0; }
.eva-agregar { margin: 8px 0; font-size: 14px; }
.eva-socio { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.eva-socio input[type=text] { flex: 1; min-width: 0; }
.eva-socio input[type=number] { width: 90px; text-align: right; }
.eva-cats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
.eva-cats label { display: inline-flex; gap: 5px; align-items: center; margin: 0; font-size: 14px; }
.eva-cats input { width: auto; }
.eva-reporte { border-collapse: collapse; width: 100%; font-size: 14px; }
.eva-reporte th { background: #1f2933; color: #fff; text-align: left; padding: 7px 10px; }
.eva-reporte th:nth-child(n+2) { text-align: right; }
.eva-reporte td { padding: 6px 10px; border-bottom: 1px solid #e3e8ee; }
.eva-reporte td.num { text-align: right; white-space: nowrap; }
.eva-reporte .eva-ingreso td.num:nth-child(2) { color: #1b7f3a; font-weight: 700; }
.eva-reporte .eva-costo td.num:nth-child(2), .eva-reporte .eva-costo-resaltado td.num:nth-child(2) { color: #c0392b; font-style: italic; }
.eva-reporte .eva-costo-resaltado td { background: #fff59d; }
.eva-reporte .eva-sep td { border: 0; padding: 5px; }
.eva-reporte .eva-utilidad td { font-weight: 800; font-size: 15px; background: #f4f6f8; }
.eva-reporte td.num:last-child { font-weight: 700; }


/* ---------- Tanda 1: alertas, módulos, hombres/mujeres, seguridad, precio, efectivo (ver docs/TANDA1.md) ---------- */
.barra-superior #btn-alertas, .barra-superior #btn-mensajes, .barra-superior #btn-efectivo, .barra-superior #btn-mi-turno { position: relative; }
.al-lista { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
.al-fila { padding: 10px 12px; border-radius: 10px; background: #f4f6f8; display: flex; flex-direction: column; gap: 2px; }
.al-fila.nueva { background: #fff3e0; border-left: 4px solid #fb8c00; }
.al-fila small { color: #777; }
.mod-lista { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.mod-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dfe5ea; border-radius: 12px; background: #fff; cursor: pointer; }
.mod-fila input { width: 24px; height: 24px; flex: none; }
.mod-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mod-texto small { color: #667; }
.mod-estado { font-size: 12px; font-weight: 700; color: #888; background: #eceff1; padding: 4px 10px; border-radius: 999px; }
.mod-estado.si { color: #1b5e20; background: #e0f2e1; }
.gen-fila { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.gen-etq { flex: 1; font-size: 18px; font-weight: 600; }
.gen-fila button { width: 58px; height: 58px; border-radius: 14px; border: 0; background: #e8eef3; font-size: 30px; font-weight: 700; color: #1b3a52; touch-action: manipulation; }
.gen-fila button.gen-mas { background: #1b5e20; color: #fff; }
.gen-num { min-width: 52px; text-align: center; font-size: 30px; }
.gen-total { text-align: center; color: #556; margin: 4px 0 8px; }
.seg-total { text-align: center; padding: 14px; background: #1b2530; color: #fff; border-radius: 16px; margin-bottom: 14px; }
.seg-total span { display: block; font-size: 14px; opacity: .8; }
.seg-total b { font-size: 48px; }
.seg-botones { display: flex; flex-direction: column; gap: 12px; }
.seg-boton { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 96px; padding: 12px 18px; border: 0; border-radius: 18px; background: #1b5e20; color: #fff; font-size: 22px; font-weight: 700; text-align: left; touch-action: manipulation; }
.seg-boton:nth-child(2) { background: #1565c0; }
.seg-boton:nth-child(3) { background: #6a1b9a; }
.seg-boton:active { transform: scale(.98); filter: brightness(.9); }
.seg-icono { font-size: 40px; }
.seg-texto { flex: 1; }
.seg-cuenta { font-size: 40px; }
.seg-sub { margin: 16px 0 6px; font-size: 14px; color: #445; }
.seg-lista { display: flex; flex-direction: column; gap: 6px; }
.seg-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #f4f6f8; border-radius: 10px; }
.seg-fila .link-accion { width: auto; }
#vista-seguridad { max-width: 560px; margin: 0 auto; padding: 14px 16px 30px; }
.pr-resultados { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pr-opcion { display: flex; justify-content: space-between; padding: 12px 14px; border: 1px solid #dfe5ea; border-radius: 10px; background: #fff; font-size: 16px; text-align: left; }
.pr-elegido { padding: 10px 12px; margin: 10px 0 4px; background: #e8f5e9; border-radius: 10px; }
.pr-tipos { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.pr-tipo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dfe5ea; border-radius: 12px; }
.pr-tipo input { width: 22px; height: 22px; flex: none; }
.pr-tipo span { display: flex; flex-direction: column; }
.pr-tipo small { color: #667; }
.pr-recientes { margin-top: 12px; }
.pr-recientes summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.ef-lista { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.ef-fila { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 12px; border: 1px solid #dfe5ea; border-radius: 12px; background: #fff; }
.ef-dato { flex: 1; }
.ef-dato small { color: #667; }
.ef-acc { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ef-entregar { width: auto; padding: 12px 18px; }
.caja-aviso-efectivo { margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: #fff3e0; border-left: 5px solid #fb8c00; font-size: 15px; }
.caja-aviso-efectivo.oculto { display: none; }
.caja-aviso-efectivo .link-accion { width: auto; display: inline; }
.gp-dias { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-dia { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #dfe5ea; border-radius: 8px; }
.t1-horas { display: flex; align-items: flex-end; gap: 6px; padding: 6px 0; overflow-x: auto; }
.t1-hora { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.t1-barra { width: 18px; background: #1565c0; border-radius: 4px 4px 0 0; }

/* ---------- Tanda 2: compras operativas, hostess, menú digital, calificaciones, presupuesto (ver docs/TANDA2.md) ---------- */
.co-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.co-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px; border: 2px solid #dfe5ea; border-radius: 12px; background: #fff; color: inherit; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.co-boton.on { border-color: #1b5e20; background: #e8f5e9; color: #1b5e20; }
.co-archivo { width: 100%; min-height: 52px; border: 2px dashed #9aa7b2; border-radius: 12px; background: #f7f9fa; font: inherit; font-weight: 600; cursor: pointer; }
.co-archivo.listo { border-style: solid; border-color: #2e7d32; background: #e8f5e9; color: #1b5e20; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.hs-chip { min-height: 56px; padding: 10px 22px; border: 2px solid #dfe5ea; border-radius: 999px; background: #fff; font: inherit; font-size: 17px; font-weight: 700; touch-action: manipulation; cursor: pointer; }
.hs-chip.on { border-color: #1b5e20; background: #1b5e20; color: #fff; }
.hostess-item { padding: 2px 0 0 6px; }
.hs-falta { color: #c0392b !important; font-weight: 700; }
.t2-tarjetas { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.t2-tarjeta { flex: 1; min-width: 130px; padding: 12px 14px; border-radius: 14px; background: #f4f6f8; display: flex; flex-direction: column; }
.t2-tarjeta span { font-size: 12px; color: #667; }
.t2-tarjeta b { font-size: 20px; }
.t2-tarjeta small { color: #889; }
.t2-bloque { margin: 14px 0 22px; }
.t2-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; align-items: end; max-width: 900px; }
.t2-form label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 4px; }
.t2-form input[type=color] { height: 44px; padding: 2px; }
.t2-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.t2-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.t2-ficha div { background: #f4f6f8; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.t2-ficha span { font-size: 12px; color: #667; }
.t2-barras { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.t2-barra-fila { display: flex; align-items: center; gap: 10px; }
.t2-barra-fila span { width: 50px; }
.t2-barra-fila div { flex: 1; background: #eceff1; border-radius: 6px; height: 14px; overflow: hidden; }
.t2-barra-fila i { display: block; height: 100%; background: #1b5e20; }
.pr-barra { height: 10px; background: #eceff1; border-radius: 5px; overflow: hidden; }
.pr-barra i { display: block; height: 100%; }
.pr-tabla input { padding: 6px 8px; }
.pr-total { background: #f4f6f8; }

/* ---------- Tanda 3: operaciones, carrito, herramientas, mantenimiento, flotilla (ver docs/TANDA3.md) ---------- */
.t3-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 10px 0; }
.t3-tile { position: relative; display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 14px 18px; border: 0; border-radius: 18px; background: #1b2530; color: #fff; text-align: left; font: inherit; cursor: pointer; touch-action: manipulation; }
.t3-tile:active { transform: scale(.98); }
.t3-icono { font-size: 40px; }
.t3-texto { display: flex; flex-direction: column; } .t3-texto b { font-size: 20px; } .t3-texto small { opacity: .8; }
#vista-operaciones { max-width: 720px; margin: 0 auto; padding: 16px; }
.t3-lista { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.t3-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #dfe5ea; border-radius: 12px; background: #fff; }
.t3-fila.ambar { border-left: 5px solid #e08a00; background: #fff8ec; } .t3-fila.rojo { border-left: 5px solid #c0392b; background: #fdeeee; }
.t3-dato { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .t3-dato small { color: #667; }
/* En el celular, los botones de cada renglón (Salida, Gasto, Apartar…) se pasan abajo en vez de apretar el texto. */
.t3-fila { flex-wrap: wrap; }
.t3-fila > .t3-dato { flex: 1 1 220px; }
.t3-fila > .co-botones { flex: 0 1 auto; margin: 0; }
@media (max-width: 600px) { .t3-fila > .co-botones { flex: 1 1 100%; } .t3-fila > .co-botones .co-boton { flex: 1 1 auto; text-align: center; padding-inline: 8px; } }
.t2-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.seg-fila.anulada { opacity: .5; text-decoration: line-through; }
.car-cerrado { text-align: center; padding: 60px 20px; } .car-cerrado h2 { margin: 10px 0; }
#vista-carrito { max-width: 760px; margin: 0 auto; padding: 12px 14px 30px; }
.car-resumen { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #1b2530; color: #fff; margin-bottom: 10px; }
.car-aviso { padding: 10px 14px; border-radius: 12px; background: #fff3e0; border-left: 5px solid #fb8c00; margin: 8px 0; }
.car-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 10px 0; }
.car-producto { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 120px; padding: 12px; border: 3px solid #dfe5ea; border-radius: 20px; background: #fff; font: inherit; touch-action: manipulation; cursor: pointer; }
.car-producto.on { border-color: #1b5e20; background: #e8f5e9; }
.car-producto:active { transform: scale(.97); }
.car-nombre { font-size: 20px; font-weight: 800; text-align: center; } .car-precio { font-size: 18px; color: #1b5e20; font-weight: 700; }
.car-cuenta { position: absolute; top: 8px; right: 10px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; background: #1b5e20; color: #fff; font-weight: 800; font-size: 18px; line-height: 34px; text-align: center; }
.car-cobro { position: sticky; bottom: 0; padding: 12px; background: #f4f6f8; border-radius: 16px; margin-top: 8px; }
.car-total { font-size: 44px; font-weight: 800; text-align: center; }
.car-pagar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.car-pagar .btn-grande { min-height: 72px; font-size: 22px; } .car-tarjeta { background: #1565c0 !important; }
.car-billetes { display: flex; flex-wrap: wrap; gap: 8px; } .car-billetes .co-boton { min-width: 90px; min-height: 56px; font-size: 18px; }
.car-cambio { font-size: 24px; text-align: center; margin: 10px 0; }
.car-gracias { text-align: center; padding: 10px; } .car-gracias h2 { font-size: 44px; margin: 6px 0; }


/* ---------- Pantalla de carga al entrar o cambiar de negocio (en lugar de la pantalla de código) ---------- */
.pantalla-carga { display: none; position: fixed; inset: 0; z-index: 10000; background: #1f2933; color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
html.con-sesion .pantalla-carga { display: flex; }
html.con-sesion #vista-login { display: none !important; }
.pc-logo { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, #2e7d32, #1b5e20); font-size: 44px; font-weight: 800; line-height: 72px; text-align: center; }
.pantalla-carga p { margin: 0; font-size: 18px; opacity: .9; }
.pc-barra { width: 160px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.pc-barra i { display: block; width: 40%; height: 100%; background: #a5d6a7; border-radius: 2px; animation: pc-corre 1.1s ease-in-out infinite; }
@keyframes pc-corre { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.pasando-negocio { position: fixed; inset: 0; z-index: 10001; background: rgba(31, 41, 51, .92); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; font-size: 20px; }

/* Menú digital: tablas de comportamiento con todas sus columnas también en celular (el estilo general esconde la 3 y la 4) */
.usr-tabla.t2-ancha th, .usr-tabla.t2-ancha td { display: table-cell !important; }
.usr-tabla.t2-ancha tbody tr { cursor: default; }

/* Límite de cortesías */
.cl-aviso { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: #eef5ff; color: #1b3a63; font-size: 13px; }
.cl-aviso.cl-cerca { background: #fff6e0; color: #6b4a00; }
.cl-aviso.cl-agotado { background: #fdecea; color: #8a1c12; }
.cl-aviso.cl-libre { background: #f3f4f6; color: #555; }
.cl-barra { height: 8px; border-radius: 99px; background: rgba(0,0,0,.1); overflow: hidden; margin: 5px 0; }
.cl-barra span { display: block; height: 100%; background: #2e7d32; border-radius: 99px; }
.cl-cerca .cl-barra span { background: #e0a000; }
.cl-agotado .cl-barra span { background: #c0392b; }
.cl-tope { font-weight: 600; opacity: .8; }
#btn-dar-cortesia.cl-pasa { background: #c0392b; }
.cl-bloque { background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cl-regla { border-top: 1px solid #eef0f3; padding: 10px 0; }
.cl-regla.cl-apagada { opacity: .55; }
.cl-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cl-monto { margin-left: auto; font-weight: 700; }
.cl-rojo { color: #c0392b; font-weight: 700; }
.cl-form { margin-top: 12px; border-top: 1px dashed #cfd4db; padding-top: 10px; }

/* Módulos del grupo (árbol del corporativo) */
.arbol-modulos { background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.am-nodo { margin: 2px 0; }
.am-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 6px; font-size: 15px; cursor: pointer; border-radius: 8px; color: inherit; }
.am-cab:hover { background: #f4f6f9; }
.am-cab small { color: #7a8594; margin-left: auto; font-size: 12px; }
.am-cab.am-error { cursor: default; color: #8a1c12; }
.am-flecha { width: 14px; color: #7a8594; }
.am-hijos { margin-left: 13px; padding-left: 12px; border-left: 2px solid #dfe4ea; }
.am-hoja { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid #f0f2f5; }
.am-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.am-texto small, .am-desc { color: #7a8594; font-size: 12px; line-height: 1.3; }
.am-desc { margin: 4px 0 6px; }
.am-sw { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.am-sw input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.am-sw span { position: absolute; inset: 0; background: #c9ced6; border-radius: 99px; transition: background .15s; }
.am-sw span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.am-sw input:checked + span { background: #2e7d32; }
.am-sw input:checked + span::after { left: 23px; }
.am-sw.am-cambia span { outline: 3px solid #f0b429; outline-offset: 1px; }
.am-barra { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; justify-content: flex-end; background: #fff8e1; border: 1px solid #f0b429; border-radius: 12px; padding: 10px 14px; margin-top: 12px; }
.am-barra span { margin-right: auto; }

/* Velas de ventas (gráfica tipo bolsa) */
.vl-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.vl-zoom { display: flex; gap: 6px; }
.vl-zoom .usr-btn { min-width: 44px; font-size: 18px; font-weight: 700; }
.vl-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.vl-tarjeta { background: #fff; border-radius: 12px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.vl-tarjeta span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #7a8594; font-weight: 700; }
.vl-tarjeta b { font-size: 17px; }
.vl-tarjeta small { color: #7a8594; font-size: 12px; }
.vl-tarjeta.vl-sube b, .vl-tarjeta.vl-sube small { color: #2e9e5b; }
.vl-tarjeta.vl-baja b, .vl-tarjeta.vl-baja small { color: #d64545; }
.vl-info { background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.vl-info-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.vl-cambio { font-weight: 700; font-size: 13px; }
.vl-info-cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 4px 10px; }
.vl-info-cuerpo div { display: flex; flex-direction: column; }
.vl-info-cuerpo span { font-size: 11px; color: #7a8594; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.vl-info-cuerpo b { font-size: 14px; }
.vl-info-cuerpo small { color: #7a8594; font-size: 11px; }
.vl-grafica { display: flex; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
.vl-eje { flex: none; width: 48px; background: #fff; border-right: 1px solid #eef0f3; }
.vl-scroll { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
#vl-svg { display: block; cursor: pointer; }
.vl-reja { stroke: #eef0f3; stroke-width: 1; }
.vl-etq { font-size: 10px; fill: #7a8594; }
.vl-etq-v { font-weight: 700; }
.vl-sel { fill: rgba(30, 90, 200, .09); }
.vl-ma { stroke: #1b5fd1; stroke-width: 1.6; stroke-linejoin: round; }
.vl-parcial { stroke-dasharray: 3 2; }
.vl-pasos { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.vl-nota { font-size: 12px; line-height: 1.45; }

/* Almacén central */
.al-tarjeta { background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.al-tarjeta.al-venc { box-shadow: 0 0 0 2px #e6a19a; }
.al-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.al-estado { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid; }
.al-sub { color: #6b7685; font-size: 13px; margin: 3px 0; }
.al-nota { background: #fff8e1; border-left: 4px solid #f9a825; padding: 6px 10px; border-radius: 6px; font-size: 13px; margin: 6px 0; }
.al-nota-alm { background: #eaf2ff; border-left-color: #1565c0; }
.al-rojo { color: #c0392b; font-weight: 700; } .al-verde { color: #2e7d32; font-weight: 700; } .al-naranja { color: #e08a00; font-weight: 700; }
.al-disp { margin-left: auto; font-weight: 700; font-size: 13px; }
.al-fuera { background: #eef5ff; border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 4px 0; }
.al-fuera.al-fuera-venc { background: #fdecea; color: #8a1c12; }
.al-barra { display: flex; gap: 8px; margin: 8px 0; } .al-barra input { flex: 1; padding: 9px 12px; border: 1px solid #cfd4db; border-radius: 10px; font-size: 14px; }
.al-modal-lista { max-height: 50vh; overflow-y: auto; margin: 6px 0; }
.al-fila-mod { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #eef0f3; }
.al-hist { padding: 8px 0; border-top: 1px solid #eef0f3; font-size: 14px; }
.al-reg { margin: 3px 0 0 14px; font-size: 13px; color: #2e7d32; } .al-reg-danado { color: #e08a00; } .al-reg-faltante { color: #c0392b; font-weight: 600; }
.al-ing { display: block; width: 100%; text-align: left; background: #f4f6f9; border: 0; border-radius: 10px; padding: 10px 12px; margin: 4px 0; font-size: 15px; cursor: pointer; }
.bp-barra { display: flex; width: 120px; height: 8px; border-radius: 99px; overflow: hidden; background: #eee; margin-top: 4px; } .bp-barra span { background: #2f6fd1; } .bp-barra .bp-reg { background: #e0a000; }
/* Almacén: tablas compactas para que quepan en el celular */
#bp-cuerpo .usr-tabla, .al-tarjeta .usr-tabla { font-size: 13px; }
#bp-cuerpo .usr-tabla th, #bp-cuerpo .usr-tabla td, .al-tarjeta .usr-tabla th, .al-tarjeta .usr-tabla td { padding: 6px 6px; }
#bp-cuerpo .bp-barra { width: 90px; }
#bp-cuerpo .usr-tabla th { font-size: 10px; letter-spacing: 0; }

.al-pasado { opacity: .6; }

/* Matriz de asistencia */
.mx-scroll { overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); -webkit-overflow-scrolling: touch; }
.mx-tabla { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.mx-tabla th, .mx-tabla td { padding: 0; text-align: center; border-bottom: 1px solid #eef0f3; }
.mx-nombre { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left !important; padding: 6px 10px !important; min-width: 130px; max-width: 160px; border-right: 1px solid #e3e7ec; }
.mx-nombre b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-nombre small { color: #7a8594; font-size: 11px; }
.mx-dia { min-width: 26px; font-size: 12px; font-weight: 700; color: #4a5560; padding: 4px 0 !important; } .mx-dia span { display: block; font-size: 10px; color: #8a94a3; font-weight: 600; }
.mx-dia.mx-cerrado-col { color: #b6bcc6; } .mx-dia.mx-hoy { background: #e8f0fe; color: #1b3a63; }
.mx-celda { min-width: 26px; height: 34px; font-weight: 800; cursor: pointer; }
.mx-celda:hover { outline: 2px solid #1565c0; outline-offset: -2px; }
.mx-ok { color: #2e9e5b; background: #eaf7ef; } .mx-falta { color: #fff; background: #d64545; } .mx-sinsalida { color: #8a5a00; background: #ffe7a8; } .mx-larga { color: #8a1c12; background: #ffd9b0; }
.mx-turno { color: #1565c0; background: #e3efff; } .mx-pend { color: #8a94a3; } .mx-cerrado { color: #c9ced6; background: #f6f7f9; cursor: default; } .mx-na { color: #c9ced6; cursor: default; }
.mx-tot { min-width: 34px; font-weight: 700; padding: 0 4px !important; } .mx-rojo { color: #d64545; } .mx-naranja { color: #c77700; }
.mx-prob .mx-nombre { box-shadow: inset 3px 0 0 #d64545; }
.mx-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #4a5560; margin: 4px 0 8px; } .mx-leyenda i { display: inline-block; min-width: 20px; text-align: center; font-style: normal; font-weight: 800; border-radius: 4px; padding: 1px 3px; }

.mx-horas { display: flex; flex-wrap: wrap; gap: 10px; } .mx-horas label { flex: 1; min-width: 150px; font-size: 13px; font-weight: 600; } .mx-horas input { width: 100%; padding: 8px; border: 1px solid #cfd4db; border-radius: 8px; font-size: 14px; box-sizing: border-box; }
.mx-turno-ed { border-top: 1px solid #eef0f3; padding: 8px 0; }
/* Ingrediente a una categoría */
.rc-check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; margin: 3px 0; cursor: pointer; }
.rc-check input { width: auto !important; margin: 0 !important; flex: none; }

/* Revisión de recetas */
.rv-ing { background: #fff; border-radius: 12px; margin-bottom: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .rv-ing summary { padding: 10px 14px; cursor: pointer; font-size: 14px; } .rv-ing[open] summary { border-bottom: 1px solid #eef0f3; } .rv-ing .usr-tabla { box-shadow: none; }

/* Pantallas hermanas: en el menú sale una sola; las demás se alcanzan con la barra de arriba de la pantalla. */
.menu-grupo-panel button.en-familia { display: none; }
.menu-grupo-panel button.familia-activa { background: #1f2933; color: white; }
.familia-pantallas { gap: 6px; }

/* Botón Inicio del menú de Administración (misma forma que los grupos, pero sin desplegable). */
.admin-menu .admin-inicio {
  flex: 0 0 auto; height: 40px; padding: 0 16px; 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 .admin-inicio:hover:not(.activa) { background: rgba(255, 255, 255, 0.15); }
.admin-menu .admin-inicio.activa { background: white; color: #1a1f29; border-color: white; }
@media (max-width: 760px) { .admin-menu .admin-inicio { padding: 0 11px; font-size: 13px; height: 38px; } }

/* Pantalla de Inicio: tarjetas con el número grande; la rayita de la izquierda dice cómo va (verde bien, ámbar por revisar, rojo urgente). */
.ini-encabezado { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 4px 0 14px; }
.ini-encabezado h2 { margin: 0; font-size: 24px; font-weight: 700; color: #1a1f29; }
.ini-fecha { color: #6b7380; font-size: 13px; }
.ini-fecha .link-accion { margin-left: 6px; }
.ini-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ini-tarjeta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; min-height: 112px;
  background: #fff; border: 1px solid #e6e8ec; border-left: 5px solid #d5d9e0; border-radius: 14px; cursor: pointer; font: inherit; color: #1a1f29;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.ini-tarjeta:hover { box-shadow: 0 6px 16px -6px rgba(16, 24, 40, 0.18); transform: translateY(-1px); }
.ini-tarjeta.ini-ok { border-left-color: #2e9e5b; }
.ini-tarjeta.ini-atencion { border-left-color: #e9a13a; }
.ini-tarjeta.ini-alerta { border-left-color: #d6453d; }
.ini-ancha { grid-column: 1 / -1; }
.ini-titulo { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #6b7380; }
.ini-grande { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.ini-ancha .ini-grande { font-size: 40px; }
.ini-apoyo { font-size: 13px; color: #4a5160; line-height: 1.4; }
.ini-cambio { font-size: 13px; font-weight: 600; }
.ini-sube { color: #1f7a45; } .ini-baja { color: #b8452f; }
.ini-lista { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; font-size: 13px; color: #4a5160; }

/* Calendario: noches con artista (rosa) y cruce con una fiesta apartada (borde rojo). */
.calendario-evento.cal-artista { background: #ad1457; color: #fff; }
.calendario-celda.cal-con-artista:not(.cal-ocupado) { box-shadow: inset 0 0 0 2px #ad145733; }
.calendario-celda.cal-cruce { box-shadow: inset 0 0 0 2px #d6453d; }

/* Pre-nómina: efectivo y transferencia se distinguen (quien transfiere ve rápido a quién y cuánto). */
.pn-metodos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.pn-m-chip { border: 1px solid #d5d9e0; background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; color: #1f2933; }
.pn-m-chip.activo { background: #1f2933; color: #fff; border-color: #1f2933; }
.pn-m-chip.pn-m-efectivo:not(.activo) { border-color: #9ccfa9; background: #f1faf3; }
.pn-m-chip.pn-m-transf:not(.activo) { border-color: #9cbfe6; background: #eff6fd; }
.pn-tabla tr.pn-fila-transf td:first-child { border-left: 5px solid #3b82c4; }
.pn-tabla tr.pn-fila-transf { background: #f4f9fe; }
.pn-tabla tr.pn-fila-efectivo td:first-child { border-left: 5px solid #43a047; }
.pn-reabierta { margin: 4px 0 0; font-size: 13px; color: #8a4b00; }

/* Resumen de pago de la pre-nómina: total (rosa), lo que se resta por grupos, y el efectivo a juntar (amarillo). */
.pn-resumen-caja { max-width: 620px; margin: 14px 0; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(31, 41, 51, .12); border: 1px solid #e3d3ea; background: #fff; }
.pn-resumen { border-collapse: collapse; width: 100%; font-size: 14px; }
.pn-resumen td { padding: 8px 16px; border: 0; }
.pn-resumen .pn-res-monto { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.pn-resumen .pn-res-total td { background: linear-gradient(90deg, #ecd0f4, #f6e3fa); font-weight: 800; font-size: 19px; padding: 14px 16px; color: #3a1a47; }
.pn-resumen .pn-res-grupo td { background: #faf6fc; font-weight: 700; color: #4a3a55; border-top: 1px solid #efe5f3; font-size: 13px; padding-top: 10px; }
.pn-resumen .pn-res-grupo .pn-res-monto { color: #c0392b; }
.pn-resumen .pn-res-persona td { padding: 5px 16px 5px 34px; color: #333; font-size: 13.5px; border-top: 1px dashed #f0eaf3; }
.pn-resumen .pn-res-persona .pn-res-monto { font-weight: 600; color: #555; }
.pn-resumen .pn-res-n { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(0, 0, 0, .07); font-size: 11.5px; font-weight: 700; }
.pn-resumen .pn-res-final td { background: linear-gradient(90deg, #fff200, #ffe94d); color: #1a1a1a; font-weight: 800; font-size: 19px; padding: 15px 16px; border-top: 2px solid #e6d800; }
@media (max-width: 600px) { .pn-resumen .pn-res-total td, .pn-resumen .pn-res-final td { font-size: 16px; } .pn-resumen td { padding-left: 12px; padding-right: 12px; } }

/* Transferencias por comprobar: barra de acciones en una sola fila. */
.tr-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.tr-barra .btn-grande, .tr-barra .btn-secundario { width: auto; padding: 8px 16px; font-size: 14px; }

/* Metas: carrera con premio y venta por categoría. */
.carrera { margin: 0 0 14px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #fff7d6, #ffe9a8); border: 1px solid #f0cf5a; }
.carrera.termino { background: linear-gradient(135deg, #e7f6e9, #cfeed4); border-color: #8fd09a; }
.carrera h4 { margin: 0 0 2px; font-size: 18px; }
.carrera-premio { margin: 0 0 8px; font-size: 14px; }
.carrera-aviso { font-size: 13px; font-weight: 700; color: #8a5a00; margin-bottom: 8px; }
.carrera-ganador { font-size: 15px; font-weight: 600; margin: 6px 0 10px; }
.carrera-fila { display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; align-items: center; margin: 5px 0; font-size: 14px; }
.carrera-fila.yo .carrera-nombre { font-weight: 800; }
.carrera-fila .meta-barra { height: 16px; }
.carrera-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; margin-bottom: 10px; }
.carrera-editor label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.carrera-editor .carrera-activa { flex-direction: row; align-items: center; gap: 8px; }
.meta-categorias { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #dfe3e8; }
.meta-categorias h5 { margin: 0 0 6px; font-size: 13px; color: #5b6770; }
.meta-cat-fila { display: flex; justify-content: space-between; font-size: 14px; padding: 2px 0; }

/* Hostess: ocasión de la reservación (cumpleaños, despedida…) a la vista. */
.tarjeta-reserva-ocasion { color: #ad1457; font-weight: 700; }
.det-whatsapp { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }

/* Hostess: escáner del pase del cliente. */
.hostess-buscar-fila { display: flex; gap: 8px; align-items: stretch; } .hostess-buscar-fila .hostess-buscar { flex: 1; min-width: 0; }
.hostess-escanear { white-space: nowrap; padding: 0 14px; }
.esc-marco { position: relative; border-radius: 14px; overflow: hidden; background: #000; }
.esc-marco video { display: block; width: 100%; max-height: 52vh; object-fit: cover; }
.esc-guia { position: absolute; inset: 14% 18%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .28); pointer-events: none; }
.pase-ocasion { margin: 0 0 8px; color: #ad1457; font-size: 15px; }
.pase-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 8px 0; }
.pase-datos div { display: flex; flex-direction: column; font-size: 13px; color: #6b7783; } .pase-datos b { color: #1b2530; font-size: 15px; }

/* Inicio tipo apps (como el Inicio de Windows): buscador, Anclado, Recientes y Todo por categorías. */
.ini-buscador { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #dfe3e8; border-radius: 999px; padding: 4px 16px; margin: 4px 0 18px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); max-width: 760px; }
.ini-buscador input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; padding: 12px 0; min-width: 0; }
.ini-seccion { margin: 0 0 20px; }
.ini-seccion-titulo, .ini-seccion-titulo-fijo { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 0 10px; padding: 0; background: none; border: 0; font: inherit; font-size: 16px; font-weight: 800; color: #1f2933; text-align: left; cursor: pointer; }
.ini-seccion-titulo-fijo { cursor: default; } .ini-seccion-titulo small, .ini-seccion-titulo-fijo small { font-weight: 500; color: #7a8594; font-size: 12px; }
.ini-apps-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ini-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 14px; background: #fff; border: 1px solid #e6e9ed; cursor: pointer; text-align: center; transition: transform .08s, box-shadow .12s, background .12s; user-select: none; }
.ini-app:hover { background: #f3faf4; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); transform: translateY(-1px); } .ini-app:active { transform: scale(.97); } .ini-app:focus-visible { outline: 2px solid #2e7d32; }
.ini-app-icono { font-size: 30px; line-height: 1; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #eef3ef; }
.ini-app-nombre { font-size: 13px; font-weight: 600; line-height: 1.2; color: #25303b; word-break: break-word; }
.ini-app-pin { position: absolute; top: 4px; right: 5px; border: 0; background: none; font-size: 16px; line-height: 1; color: #c3cad1; cursor: pointer; padding: 4px; border-radius: 8px; }
.ini-app-pin:hover { color: #e0a800; background: #fff8dc; } .ini-app-pin.on { color: #e0a800; }
.ini-categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.ini-categoria { background: #f6f8f7; border: 1px solid #e6ebe8; border-radius: 18px; padding: 12px 12px 14px; }
.ini-categoria h4 { margin: 0 0 10px 4px; font-size: 15px; color: #33413a; }
.ini-categoria .ini-app { background: #fff; }
.ini-resumen .ini-rejilla { margin-bottom: 4px; }
@media (max-width: 600px) { .ini-categorias { grid-template-columns: 1fr; } .ini-apps-rejilla { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }
/* Perfiles de inicio */
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #dfe3e8; border-radius: 999px; font-size: 13px; background: #fff; cursor: pointer; }
.pf-chip input { width: auto; margin: 0; } .pf-grupo { margin: 8px 0; } .pf-grupo > b { display: block; margin-bottom: 4px; font-size: 13px; color: #44505b; }
.pf-apps { max-height: 34vh; overflow: auto; padding-right: 4px; }
.pf-chip { margin: 0 !important; }

/* Inicio en dos columnas: apps a la izquierda, mensajes con @ a la derecha (en pantallas angostas los mensajes salen con el botón 💬 de la barra). */
.ini-pagina { display: block; }
.ini-der { display: none; }
@media (min-width: 1100px) {
  .ini-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
  .ini-der { display: block; position: sticky; top: 8px; max-height: calc(100vh - 90px); }
}
.msg-panel { background: #fff; border: 1px solid #e3e7ec; border-radius: 22px; padding: 14px 14px 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); display: flex; flex-direction: column; max-height: inherit; }
.ini-der .msg-panel { max-height: calc(100vh - 90px); }
.msg-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .msg-cab h3 { margin: 0; font-size: 18px; flex: 1; }
.msg-sin-leer { background: #e53935; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; }
.msg-redactar { position: relative; background: #f4f7f6; border-radius: 16px; padding: 8px; margin-bottom: 10px; }
.msg-redactar textarea { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; resize: none; padding: 6px; }
.msg-redactar-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .msg-redactar-pie .usr-completos { font-size: 12px; flex: 1; }
.msg-enviar { width: auto !important; padding: 8px 18px !important; font-size: 14px !important; border-radius: 999px !important; }
.msg-respondiendo { font-size: 12px; color: #2e7d32; font-weight: 700; padding: 2px 6px; } .msg-respondiendo button { border: 0; background: none; cursor: pointer; color: #888; }
.msg-sugerencias { position: absolute; left: 8px; right: 8px; top: 62px; background: #fff; border: 1px solid #dfe3e8; border-radius: 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); z-index: 30; overflow: hidden; }
.msg-sugerencias button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .msg-sugerencias button:hover { background: #eef7ef; }
.msg-tabs { display: flex; gap: 6px; margin-bottom: 8px; } .msg-tabs button { flex: 1; padding: 7px; border: 0; border-radius: 999px; background: #eef1f4; font: inherit; font-size: 13px; font-weight: 700; color: #5c6772; cursor: pointer; } .msg-tabs button.activa { background: #1f2933; color: #fff; }
.msg-lista { overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; min-height: 120px; }
.msg-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 800; flex: none; }
.msg-tarjeta { position: relative; display: flex; gap: 11px; padding: 11px 36px 10px 11px; border-radius: 18px; background: #f7f8fa; border: 1px solid transparent; cursor: pointer; }
.msg-tarjeta.nuevo { background: linear-gradient(135deg, #e3f6ef, #f4fbf8); border-color: #7fd1b3; box-shadow: 0 3px 12px rgba(0, 150, 110, .16); }
.msg-tarjeta.hecho { opacity: .55; } .msg-tarjeta.enviado { cursor: default; padding-right: 11px; }
.msg-cuerpo { flex: 1; min-width: 0; } .msg-linea { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .msg-hora { font-size: 12px; color: #7a8594; white-space: nowrap; }
.msg-texto { font-size: 14px; line-height: 1.35; margin-top: 2px; word-break: break-word; }
.msg-mencion { color: #1565c0; font-weight: 700; background: #e8f1fb; border-radius: 6px; padding: 0 3px; } .msg-mencion.yo { color: #fff; background: #1b8f6a; }
.msg-acciones { display: flex; gap: 6px; margin-top: 6px; } .msg-acciones button { border: 0; background: rgba(0, 0, 0, .06); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; color: #3d4852; cursor: pointer; } .msg-acciones button:hover { background: rgba(0, 0, 0, .12); }
.msg-estrella { position: absolute; top: 8px; right: 8px; border: 0; background: none; font-size: 19px; color: #c3cad1; cursor: pointer; line-height: 1; } .msg-estrella.on { color: #e0a800; }
.msg-leyeron { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; font-size: 12px; color: #7a8594; } .msg-leyeron .leyo { color: #2e7d32; font-weight: 700; } .msg-leyeron .hecho { color: #1565c0; font-weight: 700; }
.msg-vacio { text-align: center; color: #7a8594; padding: 26px 10px; font-size: 14px; }

/* ---------- Panorama de clientes (tema oscuro; paleta validada en fondo #14172b) ---------- */
.pc { --pc-fondo: #0e1126; --pc-sup: #171b33; --pc-sup2: #1d2240; --pc-texto: #ffffff; --pc-texto2: #c3c8e0; --pc-muted: #8b91b3; --pc-linea: rgba(255, 255, 255, .08);
  background: radial-gradient(1200px 500px at 10% -10%, rgba(144, 133, 233, .20), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(25, 158, 112, .14), transparent 55%), var(--pc-fondo);
  color: var(--pc-texto); border-radius: 26px; padding: 18px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pc-filtros { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pc-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--pc-linea); background: var(--pc-sup); color: var(--pc-texto2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .pc-chip.on { background: #fff; color: #14172b; border-color: #fff; }
.pc-fechas { display: flex; gap: 10px; color: var(--pc-muted); font-size: 13px; } .pc-fechas label { display: flex; align-items: center; gap: 6px; } .pc-fechas input { background: var(--pc-sup); color: var(--pc-texto); border: 1px solid var(--pc-linea); border-radius: 10px; padding: 6px 8px; font: inherit; color-scheme: dark; }
.pc-cargando { padding: 80px 10px; text-align: center; color: var(--pc-muted); }
.pc-hallazgos { background: var(--pc-sup); border: 1px solid var(--pc-linea); border-radius: 20px; padding: 14px 18px 8px; margin-bottom: 16px; } .pc-hallazgos h3 { margin: 0 0 8px; font-size: 17px; } .pc-hallazgos h3 small { color: var(--pc-muted); font-weight: 500; font-size: 12px; margin-left: 8px; }
.pc-hallazgos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 2px 22px; } .pc-hallazgos li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; } .pc-hallazgos li span { font-size: 20px; line-height: 1.3; } .pc-hallazgos li p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--pc-texto2); } .pc-hallazgos b { color: #fff; }
.pc-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 14px; }
.pc-hero { border-radius: 22px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.pc-hero span { font-size: 14px; opacity: .92; } .pc-hero b { font-size: 38px; line-height: 1.1; font-weight: 800; } .pc-hero small { opacity: .85; font-size: 12.5px; }
.pc-hero.h1 { background: linear-gradient(135deg, #9085e9, #d55181); } .pc-hero.h2 { background: linear-gradient(135deg, #199e70, #3987e5); } .pc-hero.h3 { background: linear-gradient(135deg, #3987e5, #9085e9); } .pc-hero.h4 { background: linear-gradient(135deg, #d95926, #d55181); }
.pc-delta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(0, 0, 0, .25); } .pc-delta.sube { color: #fff; } .pc-delta.baja { color: #ffd6d6; } .pc-delta.nulo { opacity: .8; font-weight: 600; }
.pc-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pc-mini { display: flex; gap: 12px; align-items: center; background: var(--pc-sup); border: 1px solid var(--pc-linea); border-radius: 18px; padding: 12px 14px; } .pc-mini i { font-style: normal; font-size: 22px; width: 42px; height: 42px; border-radius: 14px; background: var(--pc-sup2); display: flex; align-items: center; justify-content: center; }
.pc-mini div { display: flex; flex-direction: column; } .pc-mini span { font-size: 12px; color: var(--pc-muted); } .pc-mini b { font-size: 21px; } .pc-mini small { font-size: 11.5px; color: var(--pc-muted); }
.pc-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.pc-card { background: var(--pc-sup); border: 1px solid var(--pc-linea); border-radius: 22px; padding: 16px 16px 12px; min-width: 0; }
.pc-c3 { grid-column: span 3; } .pc-c4 { grid-column: span 4; } .pc-c6 { grid-column: span 6; } .pc-c8 { grid-column: span 8; }
@media (max-width: 1100px) { .pc-c3, .pc-c4 { grid-column: span 6; } .pc-c8 { grid-column: span 12; } }
@media (max-width: 720px) { .pc { padding: 12px; border-radius: 18px; } .pc-c3, .pc-c4, .pc-c6, .pc-c8 { grid-column: span 12; } .pc-hero b { font-size: 32px; } }
.pc-card header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 8px; } .pc-card h4 { margin: 0; font-size: 16px; } .pc-card header p { margin: 2px 0 0; font-size: 12.5px; color: var(--pc-muted); line-height: 1.3; }
.pc-vertabla { border: 1px solid var(--pc-linea); background: transparent; color: var(--pc-texto2); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; } .pc-vertabla:hover, .pc-vertabla.on { background: var(--pc-sup2); color: #fff; }
.gr-svg { width: 100%; height: auto; display: block; overflow: visible; } .gr-rejilla { stroke: rgba(255, 255, 255, .09); stroke-width: 1; } .gr-eje { fill: #8b91b3; font-size: 11.5px; } .gr-eje.c { text-align: center; }
.gr-valor { fill: #fff; font-size: 12px; font-weight: 700; } .gr-cruz { stroke: rgba(255, 255, 255, .35); stroke-width: 1; } .gr-barra { outline: none; } .gr-barra:hover path, .gr-barra:focus path { filter: brightness(1.25); }
.gr-ley { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--pc-texto2); margin-bottom: 4px; } .gr-ley i, .gr-dona-ley i, .gr-tt-fila i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .gr-dona-ley i { width: 11px; height: 11px; border-radius: 3px; }
.gr-vacio { padding: 36px 10px; text-align: center; color: var(--pc-muted); font-size: 13px; }
.gr-bh { display: flex; flex-direction: column; gap: 7px; } .gr-bh-fila { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; outline: none; border-radius: 8px; } .gr-bh-fila:hover, .gr-bh-fila:focus { background: rgba(255, 255, 255, .05); }
.gr-bh-etq { color: var(--pc-texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-bh-pista { height: 12px; display: flex; align-items: center; } .gr-bh-barra { display: block; height: 10px; border-radius: 0 4px 4px 0; } .gr-bh-val { font-size: 13px; min-width: 52px; text-align: right; }
.gr-dona-caja { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; } .gr-dona { width: 150px; height: 150px; flex: none; } .gr-sector { outline: none; } .gr-sector:hover, .gr-sector:focus { filter: brightness(1.2); }
.gr-dona-v { fill: #fff; font-size: 24px; font-weight: 800; } .gr-dona-e { fill: #8b91b3; font-size: 11px; } .gr-dona-ley { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--pc-texto2); min-width: 130px; } .gr-dona-ley div { display: flex; align-items: center; gap: 4px; } .gr-dona-ley span { flex: 1; } .gr-dona-ley b { color: #fff; }
.gr-calor { display: grid; gap: 3px; align-items: center; } .gr-calor .gr-eje { font-size: 11px; text-align: center; } .gr-celda { height: 26px; border-radius: 6px; outline: none; } .gr-celda:hover, .gr-celda:focus { box-shadow: 0 0 0 2px #fff; }
.gr-calor-esc { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 8px; font-size: 11px; color: var(--pc-muted); } .gr-calor-esc i { width: 22px; height: 10px; border-radius: 3px; }
.gr-tabla-caja { max-height: 320px; overflow: auto; } .gr-tabla { width: 100%; border-collapse: collapse; font-size: 13px; } .gr-tabla th { text-align: left; color: var(--pc-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--pc-linea); position: sticky; top: 0; background: var(--pc-sup); } .gr-tabla td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--pc-texto2); } .gr-tabla .num { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.gr-tt { position: fixed; z-index: 99999; display: none; pointer-events: none; background: #0b0d1c; color: #fff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 8px 11px; font-size: 12.5px; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); max-width: 260px; }
.gr-tt-t { color: #c3c8e0; font-size: 12px; margin-bottom: 3px; } .gr-tt-fila { display: flex; align-items: baseline; gap: 6px; } .gr-tt-fila b { font-size: 15px; } .gr-tt-fila span { color: #c3c8e0; } .gr-tt-s { color: #8b91b3; font-size: 11.5px; margin-top: 3px; }
/* Panorama: filtros conectados (clic en una marca filtra todo lo demás) */
.gr-pick { cursor: pointer; } .gr-hay-sel .gr-pick:not(.sel) { opacity: .38; } .gr-pick.sel { opacity: 1; } .gr-bh-fila.sel { background: rgba(57, 135, 229, .18); box-shadow: inset 0 0 0 1px #3987e5; } .gr-celda.sel { box-shadow: 0 0 0 2px #fff; } .gr-sector.sel { filter: brightness(1.25); } .gr-dona-ley > div.gr-pick { cursor: pointer; border-radius: 6px; }
.pc-filtrando { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; background: rgba(57, 135, 229, .14); border: 1px solid rgba(57, 135, 229, .5); }
.pc-filtrando > span { font-weight: 700; font-size: 13px; } .pc-filtrando small { flex-basis: 100%; opacity: .75; font-size: 12px; }
.pc-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: #3987e5; color: #fff; border: 0; font-size: 13px; cursor: pointer; } .pc-fchip b { font-weight: 700; } .pc-fchip i { font-style: normal; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.pc-limpiar { margin-left: auto; background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
.pc-card.pc-sinfiltro { opacity: .55; } .pc-card.pc-sinfiltro header p::after { content: ' · no cambia con este filtro'; font-style: italic; }
.pc-pista { font-size: 12px; opacity: .65; margin: -6px 0 12px; }

/* Mapa de la hostess: tres columnas (ya llegaron · mapa · próximas) y estados de la mesa (pidiendo / en pago / pagó) */
.hostess-layout { grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(280px, 340px); }
.hostess-llegadas { order: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 12px; background: #1f2933; color: #e8ecf1; border-right: 1px solid #33414f; }
.hostess-principal { order: 2; } .hostess-lista { order: 3; }
.hostess-llegadas h3 { margin: 0; font-size: 16px; }
.hostess-llegadas-cifra { font-size: 13px; color: #b8c2cf; background: #2c3947; border-radius: 10px; padding: 8px 10px; } .hostess-llegadas-cifra b { color: #fff; font-size: 18px; }
.mesa-plano.pago { background: #e1bee7; border-color: #8e24aa; color: #3a0d44; } .mesa-plano.pagada { background: #b2dfdb; border-color: #00796b; color: #00332e; }
.mesa-plano-etiqueta.etiqueta-pago { background: #8e24aa; } .mesa-plano-etiqueta.etiqueta-pagada { background: #00796b; }
.leyenda-pago { background: #e1bee7; border-color: #8e24aa !important; } .leyenda-pagada { background: #b2dfdb; border-color: #00796b !important; }
.tarjeta-reserva-van { font-weight: 700; color: #ffcc80; } .tarjeta-reserva-van.completo { color: #81c784; }
.tarjeta-reserva.nueva { animation: hostess-nueva 1.2s ease-in-out infinite; border-color: #ffca28; }
@keyframes hostess-nueva { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 202, 40, .0); } 50% { box-shadow: 0 0 0 5px rgba(255, 202, 40, .55); } }
.hostess-alerta { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 3000; max-width: min(92vw, 520px); background: #ffca28; color: #3e2c00; border: 0; border-radius: 14px; padding: 14px 18px; font-size: 17px; font-weight: 800; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .55); cursor: pointer; text-align: left; animation: hostess-nueva 1.2s ease-in-out infinite; } .hostess-alerta small { display: block; font-weight: 600; font-size: 13px; opacity: .8; }
.mesas-por-liberar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; background: #e0f2f1; border: 1px solid #00796b; } .mesas-por-liberar > span { font-weight: 700; color: #00332e; width: 100%; } .mesas-por-liberar .btn-secundario { width: auto; margin: 0; padding: 10px 14px; border-color: #00796b; }
@media (max-width: 1100px) { .hostess-layout { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(250px, 300px); } }
@media (max-width: 800px) { .hostess-llegadas, .hostess-lista, .hostess-principal { order: 0; } .hostess-layout { grid-template-columns: 1fr; } .hostess-llegadas { border-right: 0; } }

/* Seguridad: pestañas y resguardo de objetos */
.seg-pestanas { display: flex; gap: 8px; margin-bottom: 12px; } .seg-pestanas button { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid #c5ccd6; background: #fff; font-size: 16px; font-weight: 700; cursor: pointer; } .seg-pestanas button.activa { background: #1f2933; color: #fff; border-color: #1f2933; }
.rg-barra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .rg-barra button { flex: 1; min-width: 160px; margin: 0; } .rg-buscar { width: 100%; margin-bottom: 8px; }
.rg-fila { align-items: center; gap: 10px; } .rg-fila.rg-entregado { opacity: .65; } .rg-acciones { display: flex; gap: 8px; align-items: center; flex: none; } .rg-acciones .btn-secundario { width: auto; margin: 0; padding: 10px 14px; } .rg-sin { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* Segundo nivel de pestañas (Borradores / Confirmadas…): azul, para distinguirlo de las pantallas hermanas de arriba (blanco / negro) */
[id^="subtabs-"] .tab-categoria { background: #e3effd; border-color: #9ec1f0; color: #0d47a1; }
[id^="subtabs-"] .tab-categoria:hover:not(.activa) { background: #cfe3fb; }
[id^="subtabs-"] .tab-categoria.activa { background: #1565c0; border-color: #1565c0; color: #fff; }

/* --- Administración: barra de arriba más limpia (un solo renglón de herramientas) ---
   Mensajes, alertas, ayuda, tablero, impresión y salir pasan a ser botones redondos con ícono (el nombre sale al pasar el mouse);
   la nube se reduce a su punto de estado; el usuario muestra nombre y puesto en dos líneas; y en el Inicio ya no sale la etiqueta "Inicio". */
.barra-superior.modo-admin .btn-barra { height: 38px; }
.barra-superior.modo-admin #btn-mensajes .btn-etiqueta,
.barra-superior.modo-admin #btn-alertas .btn-etiqueta,
.barra-superior.modo-admin #btn-ayuda .btn-etiqueta,
.barra-superior.modo-admin #btn-tablero .btn-etiqueta,
.barra-superior.modo-admin #btn-impresion .btn-etiqueta,
.barra-superior.modo-admin #btn-huellas .btn-etiqueta,
.barra-superior.modo-admin .btn-barra-salir .btn-etiqueta,
.barra-superior.modo-admin .estado-nube .estado-nube-texto { display: none; }
.barra-superior.modo-admin #btn-mensajes,
.barra-superior.modo-admin #btn-alertas,
.barra-superior.modo-admin #btn-ayuda,
.barra-superior.modo-admin #btn-tablero,
.barra-superior.modo-admin #btn-impresion,
.barra-superior.modo-admin #btn-huellas,
.barra-superior.modo-admin .btn-barra-salir { width: 38px; padding: 0; justify-content: center; position: relative; }
.barra-superior.modo-admin .estado-nube { height: 38px; padding: 0 10px; }
.barra-superior.modo-admin #usuario-actual { display: flex; flex-direction: column; line-height: 1.15; }
.barra-superior.modo-admin #usuario-actual small { font-size: 11px; opacity: .7; font-weight: 500; }
.barra-superior.modo-admin .barra-usuario { gap: 8px; }
.barra-superior.modo-admin .estado-conexion { align-self: center; }

/* Carga masiva del menú: opciones grandes con su explicación */
.carga-op { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; margin: 6px 0; border-radius: 12px; border: 1px solid #c9d1da; background: #fff; cursor: pointer; }
.carga-op:hover { background: #f1f6f2; border-color: #1d6f42; } .carga-op > span { font-size: 26px; } .carga-op b { display: block; font-size: 16px; } .carga-op small { display: block; color: #667; font-size: 13px; margin-top: 2px; line-height: 1.3; }
.carga-avanzado { margin-top: 10px; } .carga-avanzado summary { cursor: pointer; font-weight: 700; padding: 8px 0; color: #556; }

/* --- Administración: más espacio para la tabla ---
   Las pestañas de la pantalla y sus botones de acción (+ Nuevo, Carga masiva…) comparten renglón (botones a la derecha) en vez de ocupar uno cada uno;
   si la pantalla tiene sub-pestañas, los botones se van a su renglón. Sin botones visibles no queda ni el hueco. */
#admin-fijo { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 12px; padding-top: 10px; }
#admin-fijo > * { flex: 0 0 100%; min-width: 0; }
#admin-fijo > #familia-pantallas:not(.oculto),
#admin-fijo > [id^="subtabs-"]:not(.oculto) { flex: 1 1 0; }
#admin-fijo:has([id^="subtabs-"]:not(.oculto)) > #familia-pantallas { flex: 0 0 100%; }
#admin-fijo > .admin-acciones { flex: 0 0 auto; margin-left: auto; margin-bottom: 10px; justify-content: flex-end; }
#admin-fijo > .admin-acciones:not(:has(button:not(.oculto))) { display: none; }
#admin-fijo > .admin-acciones .btn-grande { padding: 8px 16px; }
#admin-fijo .tabs-categoria { margin-bottom: 8px !important; }
#admin-fijo > #admin-filtros-fijos:empty { display: none; }

/* Pestañas de segundo nivel: el color azul completo (fondo, letra y activa), con la fuerza suficiente para ganarle a las pestañas normales de Administración */
#admin-fijo [id^="subtabs-"] .tab-categoria { background: #e3effd; border-color: #9ec1f0; color: #0d47a1; }
#admin-fijo [id^="subtabs-"] .tab-categoria:hover:not(.activa) { background: #cfe3fb; }
#admin-fijo [id^="subtabs-"] .tab-categoria.activa { background: #1565c0; border-color: #1565c0; color: #fff; }

/* En el Inicio la etiqueta de sección va vacía: que no deje la píldora en blanco junto al título */
.barra-superior.modo-admin .titulo-seccion:empty { display: none; }

/* Huellas y códigos: el código a la vista */
.acc-codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: 3px; padding: 4px 12px; border-radius: 10px; background: #e3effd; color: #0d47a1; white-space: nowrap; }

/* En iPhone los campos de fecha traen un ancho propio y se salen del recuadro: se ajustan al ancho disponible. */
#modal-caja input[type="date"], #modal-caja input[type="month"], #modal-caja input[type="time"] { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }

/* Tablero de control (BSC) */
.bsc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 6px; }
.bsc-kpi { background: #fff; border: 1px solid #dfe6e2; border-left: 5px solid #b8c2bc; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bsc-verde { border-left-color: #2e7d32; } .bsc-amarillo { border-left-color: #d98a00; } .bsc-rojo { border-left-color: #c0392b; } .bsc-gris { border-left-color: #b8c2bc; }
.bsc-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .bsc-sem { font-size: 12px; white-space: nowrap; }
.bsc-valor { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bsc-pie { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; }
.bsc-delta { font-size: 12px; color: #6b7a73; } .bsc-delta.bien { color: #2e7d32; } .bsc-delta.mal { color: #c0392b; }

/* Resumen rápido de reservaciones (Mi trabajo del operador) */
.rv-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin-top: 6px; }
.cuenta-rv { background: #f4f7f5; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.cuenta-rv b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; } .cuenta-rv span { font-size: 12px; color: #667; }

/* iPhone / iPad: el alto de pantalla cambia cuando la barra del navegador sube o baja y la página entera se corría (el encabezado con "Salir" quedaba fuera de vista).
   En pantallas chicas la app se fija al área visible: el encabezado se queda arriba y solo se mueve lo de adentro. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 900px) {
  html { overscroll-behavior: none; }
  body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: auto; width: 100%; }
}
.op-salir { margin: 14px 0 6px; width: 100%; min-height: 48px; border: 1px solid #d7dde3; border-radius: 12px; background: #fff; color: #5b6770; font-size: 16px; }

/* Productos agotados (módulo bloqueo_agotados): tecla deshabilitada con su etiqueta */
.producto-boton.agotado { opacity: .45; filter: grayscale(1); position: relative; }
.producto-boton .etiqueta-agotado { position: absolute; top: 6px; left: 6px; background: #c0392b; color: #fff; font-weight: 800; font-size: 12px; padding: 2px 6px; border-radius: 4px; letter-spacing: .5px; z-index: 2; }