:root {
  --verde: #1f7a3e;
  --verde-oscuro: #15592c;
  --verde-claro: #e3f1e7;
  --amarillo: #f7b733;
  --amarillo-claro: #fdf0cf;
  --rojo: #c0392b;
  --rojo-claro: #fbe4e1;
  --azul: #2b6cb0;
  --azul-claro: #e2ecf7;
  --fondo: #f6f3ea;
  --tarjeta: #ffffff;
  --texto: #1f2421;
  --texto-suave: #5f6762;
  --borde: #e2ddd0;
  --sombra: 0 1px 2px rgba(31, 36, 33, .06), 0 4px 14px rgba(31, 36, 33, .06);
  --radio: 14px;
  --toque: 56px; /* altura mínima de botones, cómoda para dedos */
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--fondo); overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.2; }

/* ---------- Pantalla de PIN ---------- */
.pantalla-pin {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 16px;
  background: linear-gradient(160deg, var(--verde) 0%, var(--verde-oscuro) 100%);
}
.caja-pin {
  width: min(380px, 100%);
  background: var(--tarjeta);
  border-radius: 22px;
  padding: 28px 24px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  text-align: center;
}
.marca { font-size: 28px; font-weight: 800; letter-spacing: -.5px; color: var(--verde-oscuro); }
.marca span { color: var(--amarillo); }
.sub-marca { color: var(--texto-suave); margin-top: 4px; font-size: 15px; }
.titulo-pin { margin: 22px 0 14px; font-size: 18px; font-weight: 600; }
.puntos { display: flex; justify-content: center; gap: 16px; margin-bottom: 10px; }
.punto { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--verde); transition: background .12s; }
.punto.lleno { background: var(--verde); }
.puntos.error { animation: temblar .35s; }
.puntos.error .punto { border-color: var(--rojo); }
@keyframes temblar { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.mensaje-pin { min-height: 22px; color: var(--rojo); font-size: 14px; margin-bottom: 8px; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tecla {
  height: 68px; border-radius: 16px; border: 1px solid var(--borde);
  background: #fbfaf6; font-size: 28px; font-weight: 600;
  transition: transform .06s, background .12s;
}
.tecla:active { transform: scale(.96); background: var(--verde-claro); }
.tecla.accion { font-size: 16px; color: var(--texto-suave); background: transparent; border-color: transparent; }
.pie-pin { margin-top: 16px; font-size: 13px; color: var(--texto-suave); }

/* ---------- Estructura general ---------- */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--verde); color: #fff;
}
.barra .marca { color: #fff; font-size: 20px; }
.barra .espacio { flex: 1; }
.chip-usuario { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.chip-usuario b { font-size: 15px; }
.chip-usuario small { font-size: 12px; opacity: .85; text-transform: capitalize; }
.btn-barra {
  min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600;
}
.btn-volver { font-size: 22px; padding: 0 14px; }

.contenido { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.encabezado h1 { font-size: 24px; }
.encabezado p { margin: 4px 0 0; color: var(--texto-suave); }

/* ---------- Inicio: mosaico de módulos ---------- */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.modulo {
  position: relative; text-align: left;
  min-height: 118px; padding: 16px;
  border-radius: var(--radio); border: 1px solid var(--borde);
  background: var(--tarjeta); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .08s, border-color .12s;
}
.modulo:active:not(:disabled) { transform: scale(.98); }
.modulo:hover:not(:disabled) { border-color: var(--verde); }
.modulo .ico { font-size: 30px; line-height: 1; }
.modulo b { font-size: 17px; }
.modulo small { color: var(--texto-suave); font-size: 13px; }
.modulo:disabled { opacity: 1; background: #faf8f2; }
.modulo:disabled b, .modulo:disabled .ico { opacity: .55; }
.etiqueta {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--amarillo-claro); color: #8a5a00;
}

/* ---------- Tarjetas, listas y formularios ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 14px; }
.tarjeta-cuerpo { padding: 16px; }
.lista { list-style: none; margin: 0; padding: 0; }
.fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: var(--toque);
  border-top: 1px solid var(--borde);
}
.lista .fila:first-child { border-top: 0; }
.fila .principal { flex: 1; min-width: 0; }
.fila .principal b { display: block; }
.fila .principal small { color: var(--texto-suave); }
.inactivo { opacity: .55; }

.insignia { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.rol-propietario { background: var(--amarillo-claro); color: #8a5a00; }
.rol-administrador { background: var(--azul-claro); color: var(--azul); }
.rol-mesero { background: var(--verde-claro); color: var(--verde-oscuro); }

.btn {
  min-height: 48px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--borde); background: var(--tarjeta); font-weight: 600;
}
.btn-primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-peligro { color: var(--rojo); border-color: #eec2bc; }
.btn-chico { min-height: 40px; padding: 0 12px; font-size: 14px; }

.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo input, .campo select {
  min-height: 52px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--borde); background: #fff; font-size: 17px;
}
.campo input:focus, .campo select:focus { border-color: var(--verde); outline: none; box-shadow: 0 0 0 3px var(--verde-claro); }
.ayuda { font-size: 13px; color: var(--texto-suave); }
.acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Mesas ---------- */
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--texto-suave); }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.grupo-mesas { margin-top: 18px; }
.grupo-mesas h2 { font-size: 15px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.mesa {
  aspect-ratio: 1 / 1; border-radius: 18px; border: 2px solid var(--verde);
  background: var(--verde-claro); display: grid; place-items: center; align-content: center; gap: 2px;
  font-weight: 700; font-size: 18px; color: var(--verde-oscuro);
}
.mesa small { font-weight: 500; font-size: 12px; }
.mesa.ocupada { background: var(--amarillo-claro); border-color: var(--amarillo); color: #8a5a00; }
.mesa.por_cobrar { background: var(--rojo-claro); border-color: var(--rojo); color: var(--rojo); }
.mesa.barra { aspect-ratio: 2 / 1; }
.mesa.llevar { aspect-ratio: 2 / 1; border-style: dashed; }

/* ---------- Menú ---------- */
.pestanas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: thin; }
.pestana {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--tarjeta); font-weight: 600; font-size: 15px;
}
.pestana.activa { background: var(--verde); border-color: var(--verde); color: #fff; }
.buscador { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--borde); font-size: 17px; margin-bottom: 12px; background: #fff; }
.precio { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.precio-emp { display: block; text-align: right; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.cat-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 6px; font-size: 13px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; background: #fbfaf6; border-top: 1px solid var(--borde); }
.tarjeta > .cat-titulo:first-child { border-top: 0; border-radius: var(--radio) var(--radio) 0 0; }
.enlace { border: 0; background: none; padding: 6px 0; min-height: 36px; color: var(--verde); font-weight: 700; font-size: 13px; text-transform: none; letter-spacing: 0; }
.fila.tocable { cursor: pointer; }
.fila.tocable:hover { background: #fbfaf6; }
.interruptor { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--texto-suave); cursor: pointer; }
.interruptor input { width: 22px; height: 22px; accent-color: var(--verde); }
.campo .interruptor { font-size: 14px; }

/* ---------- Precios de empleado ---------- */
.fila-precio.cambiado { background: var(--amarillo-claro); }
.advertencia { display: block; color: var(--rojo); font-weight: 600; }
.entrada-precio { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--texto-suave); }
.entrada-precio input {
  width: 110px; min-height: 48px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borde);
  font-size: 18px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; background: #fff;
  color: var(--texto);
}
.entrada-precio input::placeholder { color: #b9b4a6; font-weight: 500; }
.entrada-precio input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.entrada-precio input:disabled { background: #f2efe6; }
.barra-guardar {
  position: sticky; bottom: 0; z-index: 4; margin-top: 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 -6px 20px rgba(31, 36, 33, .12); font-weight: 700;
}
.barra-guardar[hidden] { display: none; }

/* ---------- Tabla (bitácora) ---------- */
.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-top: 1px solid var(--borde); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); background: #fbfaf6; border-top: 0; }
td.fecha { white-space: nowrap; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* ---------- Conectar tablets ---------- */
.direccion { font-size: 26px; font-weight: 800; color: var(--verde-oscuro); word-break: break-all; margin: 6px 0; }
.pasos { margin: 0; padding-left: 20px; line-height: 1.7; }

/* ---------- Ventana emergente y avisos ---------- */
.fondo-modal { position: fixed; inset: 0; z-index: 20; background: rgba(20, 24, 22, .45); display: grid; place-items: center; padding: 16px; }
.modal { width: min(460px, 100%); max-height: 90vh; overflow: auto; background: var(--tarjeta); border-radius: 18px; padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.modal h2 { font-size: 20px; margin-bottom: 14px; }
.aviso {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  background: var(--texto); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600;
  max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.aviso.error { background: var(--rojo); }
.vacio { padding: 28px 16px; text-align: center; color: var(--texto-suave); }
.cargando { padding: 40px; text-align: center; color: var(--texto-suave); }

@media (max-width: 520px) {
  .encabezado h1 { font-size: 21px; }
  .mosaico { grid-template-columns: 1fr 1fr; gap: 10px; }
  .modulo { min-height: 104px; padding: 12px; }
  .modulo b { font-size: 15px; }
  .etiqueta { position: static; align-self: flex-start; }
  .chip-usuario small { display: none; }
  .mapa { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
}

/* ================= Etapa 3: plano, cuentas y comandas ================= */
.contenido-ancho { max-width: 1400px; }
.leyenda i.c-libre, .leyenda i.c-ocupada, .leyenda i.c-cuenta, .leyenda i.c-pend { border: 2px solid; }
.leyenda i.c-libre { background: #eeece4; border-color: #9a9d93; }
.leyenda i.c-ocupada { background: var(--verde-claro); border-color: var(--verde); }
.leyenda i.c-cuenta { background: var(--amarillo-claro); border-color: #c98a00; }
.leyenda i.c-pend { background: var(--rojo); border-color: var(--rojo); border-radius: 50%; }

.plano-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 12px; align-items: start; }
.plano-caja { padding: 8px; }
.plano { width: 100%; height: auto; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.plano .zona { fill: #fbfaf6; stroke: var(--borde); stroke-width: 1.5; }
.plano .zona.balcon { fill: #f7f3e8; stroke-dasharray: 6 5; }
.plano .zona-nombre { font-size: 15px; font-weight: 700; fill: var(--texto-suave); }
.plano .zona-nota { font-size: 11px; fill: var(--texto-suave); }
.plano .puerta { fill: var(--fondo); stroke: var(--borde); }
.plano .silla { fill: #fff; stroke: #b9b4a6; stroke-width: 1.2; }
.plano .mesa-svg { cursor: pointer; outline: none; }
.plano .tabla { fill: #eeece4; stroke: #9a9d93; stroke-width: 2; transition: stroke-width .1s; }
.plano .mesa-svg.ocupada .tabla { fill: var(--verde-claro); stroke: var(--verde); }
.plano .mesa-svg.cuenta .tabla { fill: var(--amarillo-claro); stroke: #c98a00; }
.plano .mesa-svg:hover .tabla, .plano .mesa-svg:focus-visible .tabla { stroke-width: 3; }
.plano .mesa-svg.sel .tabla { stroke: var(--azul); stroke-width: 4; }
.plano .num { font-size: 18px; font-weight: 800; fill: var(--texto); pointer-events: none; }
.plano .sub { font-size: 11px; font-weight: 600; fill: var(--texto-suave); pointer-events: none; }
.plano .insignia-n circle { fill: var(--verde-oscuro); }
.plano .insignia-n text { fill: #fff; font-size: 12px; font-weight: 800; pointer-events: none; }
.plano .insignia-p { fill: var(--rojo); stroke: #fff; stroke-width: 2; }
.plano.editando .mesa-svg { cursor: grab; }
.plano.editando .mesa-svg:active { cursor: grabbing; }

.panel-mesa { position: sticky; top: 80px; overflow: hidden; }
.panel-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.panel-cabeza.sin-borde { border: 0; padding: 0; }
.panel-cabeza b { display: block; font-size: 18px; }
.panel-cabeza small { color: var(--texto-suave); }
.icono-cliente { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 800; }
.etiqueta-mini { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); }
.etiqueta-mini.cuenta { background: var(--amarillo-claro); color: #8a5a00; }
.etiqueta-mini.pend { background: var(--rojo-claro); color: var(--rojo); }

/* ---------- Pantalla de la cuenta ---------- */
.cuenta-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cuenta-cabeza small { color: var(--texto-suave); }
.cuenta-cabeza h1 { font-size: 24px; margin: 2px 0 4px; }
.nombre-cliente { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; text-align: left; }
.nombre-cliente span { font-size: 16px; color: var(--texto-suave); }
.cambio-vista { display: none; }
.cuenta-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.pestanas-chicas .pestana { min-height: 40px; font-size: 14px; }
.menu-panel, .ticket, .plano-caja, .panel-mesa { min-width: 0; }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.producto {
  min-height: 84px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--borde); background: var(--tarjeta);
  box-shadow: var(--sombra); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 6px; text-align: left;
  transition: transform .06s, background .2s;
}
.producto b { font-size: 15px; line-height: 1.25; }
.producto span { font-weight: 700; color: var(--verde-oscuro); font-variant-numeric: tabular-nums; }
.producto:active { transform: scale(.97); }
.producto.agregado { background: var(--verde-claro); border-color: var(--verde); }

.ticket { position: sticky; top: 80px; display: flex; flex-direction: column; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); }
.ticket-cuerpo { overflow-y: auto; flex: 1; }
.bloque { border-bottom: 1px solid var(--borde); }
.bloque.pendiente { background: #fffaf0; }
.bloque-titulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); }
.bloque.pendiente .bloque-titulo { color: #8a5a00; }
.bloque-titulo .enlace { text-transform: none; letter-spacing: 0; }
.renglones { list-style: none; margin: 0; padding: 0 16px 8px; }
.renglon { padding: 8px 0; border-top: 1px dashed var(--borde); }
.renglon:first-child { border-top: 0; }
.renglon-linea { display: flex; align-items: center; gap: 10px; }
.renglon-nombre { flex: 1; font-weight: 600; }
.cant-fija { min-width: 28px; }
.cantidad { display: flex; align-items: center; gap: 6px; }
.cantidad b { min-width: 20px; text-align: center; }
.mini { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; font-size: 20px; font-weight: 700; line-height: 1; }
.nota { font-size: 13px; color: var(--texto-suave); margin: 2px 0 0 0; }
.renglon-acciones { display: flex; gap: 16px; }
.enlace.peligro { color: var(--rojo); }
.renglon.cancelado .renglon-nombre, .renglon.cancelado .precio { text-decoration: line-through; color: var(--texto-suave); }
.ticket-pie { border-top: 1px solid var(--borde); padding: 12px 16px 14px; display: grid; gap: 10px; background: var(--tarjeta); border-radius: 0 0 var(--radio) var(--radio); }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.total b { font-size: 28px; font-variant-numeric: tabular-nums; }
.btn-grande { min-height: 58px; font-size: 18px; width: 100%; }
.ticket-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ticket-pie .ayuda { margin: 0; text-align: center; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.sugerencias .pestana { min-height: 38px; font-size: 14px; }
.fila-campo { display: flex; gap: 8px; }
.fila-campo select { flex: 1; }
.paso { display: flex; align-items: center; gap: 10px; }
.paso span { flex: 1; font-weight: 600; }
.paso b { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Comanda ---------- */
.comanda-vista { background: #fff; border: 1px dashed var(--borde); border-radius: 10px; padding: 14px; max-height: 50vh; overflow: auto; }
.comanda { font-family: "Consolas", "Courier New", monospace; color: #000; width: 100%; max-width: 72mm; margin: 0 auto; font-size: 14px; }
.comanda-negocio { text-align: center; font-size: 13px; letter-spacing: 1px; }
.comanda-num { text-align: center; font-size: 22px; font-weight: 800; margin-top: 2px; }
.comanda-mesa { text-align: center; font-size: 26px; font-weight: 800; margin-top: 4px; }
.comanda-cliente { text-align: center; font-size: 20px; font-weight: 700; border: 2px solid #000; padding: 3px 6px; margin: 6px 0; word-break: break-word; }
.comanda-meta { text-align: center; font-size: 12px; }
.comanda-linea { border-top: 2px dashed #000; margin: 8px 0; }
.comanda-item { font-size: 18px; font-weight: 700; margin: 6px 0; }
.comanda-item b { display: inline-block; min-width: 26px; }
.comanda-item.cancelado { text-decoration: line-through; }
.comanda-nota { font-size: 15px; font-weight: 600; padding-left: 26px; }
#zona-impresion { display: none; }

@media print {
  @page { size: 80mm auto; margin: 3mm; }
  html, body { background: #fff !important; min-height: 0 !important; height: auto !important; }
  body > *:not(#zona-impresion) { display: none !important; }
  #zona-impresion { display: block !important; width: 74mm; }
}

/* ---------- Pantallas angostas (celular y tablet vertical) ---------- */
@media (max-width: 859px) {
  .plano-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-mesa, .ticket { position: static; max-height: none; }
  .cambio-vista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; position: sticky; top: 68px; z-index: 3; background: var(--fondo); padding: 6px 0; }
  .cambio-vista .pestana { width: 100%; }
  .cuenta-grid { grid-template-columns: minmax(0, 1fr); }
  .cuenta-grid.ver-menu .ticket { display: none; }
  .cuenta-grid.ver-cuenta .menu-panel { display: none; }
  .productos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 520px) {
  .productos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .producto { min-height: 78px; }
  .cuenta-cabeza h1 { font-size: 20px; }
}

/* ================= Cuentas de empleados ================= */
.resumen-empleados { width: 100%; text-align: left; margin-bottom: 16px; padding: 0; border-radius: var(--radio); border: 2px solid var(--amarillo); background: var(--tarjeta); box-shadow: var(--sombra); overflow: hidden; }
.re-cabeza { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.re-cabeza .ico { font-size: 28px; }
.re-cabeza b { display: block; font-size: 17px; }
.re-cabeza small { color: var(--texto-suave); }
.re-total { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--verde-oscuro); }
.re-total.debe, .saldo.debe, .saldo-caja b.debe { color: var(--rojo); }
.re-lista { list-style: none; margin: 0; padding: 4px 16px 12px; border-top: 1px solid var(--borde); background: #fffaf0; }
.re-lista li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.re-lista li span { font-weight: 700; }
.re-lista li small { flex: 1; color: var(--texto-suave); }
.re-lista li b { font-variant-numeric: tabular-nums; }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metrica { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.metrica small { display: block; color: var(--texto-suave); font-size: 13px; }
.metrica b { font-size: 26px; font-variant-numeric: tabular-nums; }
.empleados-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.empleado { overflow: hidden; }
.empleado-cabeza { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; background: none; text-align: left; }
.empleado-cabeza .principal { flex: 1; min-width: 0; }
.empleado-cabeza b { display: block; font-size: 17px; }
.empleado-cabeza small { color: var(--texto-suave); }
.saldo { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--verde-oscuro); }
.empleado-semana { display: flex; gap: 16px; padding: 0 16px 10px; font-size: 14px; color: var(--texto-suave); }
.empleado-semana b { color: var(--texto); }
.empleado-acciones { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px 14px; border-top: 1px solid var(--borde); background: #fbfaf6; }
.bajas { margin-top: 16px; }
.bajas summary { cursor: pointer; font-weight: 700; color: var(--texto-suave); min-height: 44px; display: flex; align-items: center; }
.saldo-caja { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; margin-bottom: 14px; }
.saldo-caja small { display: block; color: var(--texto-suave); }
.saldo-caja b { font-size: 34px; font-variant-numeric: tabular-nums; color: var(--verde-oscuro); }
.movimientos .fila { align-items: flex-start; }
.movimientos .principal small { display: block; margin-top: 2px; }
.movimientos .enlace { min-height: 32px; padding: 2px 0; }
.mov-montos { text-align: right; }
.mov-montos small { display: block; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.precio.abono { color: var(--verde-oscuro); }
.fila.anulado .principal b, .fila.anulado .precio { text-decoration: line-through; color: var(--texto-suave); }
.etiqueta-mini.mov-consumo { background: var(--azul-claro); color: var(--azul); }
.etiqueta-mini.mov-adelanto { background: var(--amarillo-claro); color: #8a5a00; }
.etiqueta-mini.mov-descuento { background: var(--verde-claro); color: var(--verde-oscuro); }
.ec-linea { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 700; margin-top: 6px; }
.ec-desc { font-size: 13px; }
.ec-total { font-size: 20px; }
.ec-firma { margin-top: 48px; border-top: 1px solid #000; text-align: center; font-size: 12px; padding-top: 4px; }
.etiqueta-mini.mov-abono { background: var(--verde-claro); color: var(--verde-oscuro); }
.pagado { color: var(--verde-oscuro); }
.etiqueta-campo { font-weight: 600; font-size: 14px; }
.opciones-forma { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 12px; font-weight: 600; cursor: pointer; background: #fff; }
.opcion input { flex: none; width: 20px !important; height: 20px; min-height: 0 !important; margin: 0; padding: 0; accent-color: var(--verde); }
.opcion:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.aviso-queda { margin: 0; font-weight: 600; color: var(--verde-oscuro); min-height: 1.2em; }
.aviso-queda.error { color: var(--rojo); }

/* ================= Etapa 4: cobro y propinas ================= */
.cobro-grid, .propinas-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cobro-item { flex: 1; min-width: 0; color: var(--texto); }
.cobro-item small { color: var(--texto-suave); }
.cobro-dividir { display: grid; gap: 10px; border-top: 1px solid var(--borde); }
.dividir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.dividir span { margin-right: 4px; }
.cobro-totales { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--borde); }
.cobro-totales div { padding: 14px 16px; }
.cobro-totales small { display: block; color: var(--texto-suave); font-size: 13px; }
.cobro-totales b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cobro-totales .falta { background: var(--amarillo-claro); }
.cobro-totales .falta b { font-size: 28px; }
.pagos .fila { background: #f6fbf7; }
.formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.forma { min-height: 56px; border-radius: 12px; border: 1px solid var(--borde); background: #fff; font-weight: 700; font-size: 15px; }
.forma.activa { border: 2px solid var(--verde); background: var(--verde-claro); color: var(--verde-oscuro); }
.rapidos { display: flex; gap: 6px; flex-wrap: wrap; }
.rapidos .pestana { min-height: 42px; }
.cambio { text-align: center; }
.cambio small { display: block; color: var(--texto-suave); }
.cambio b { font-size: 34px; color: var(--verde-oscuro); font-variant-numeric: tabular-nums; }
.cambio.grande b { font-size: 48px; }
.cambio .error, .ayuda.error { color: var(--rojo); font-weight: 700; }
.pagada { text-align: center; font-size: 48px; }
.total.parcial { font-size: 15px; color: var(--texto-suave); }
.total.parcial b { font-size: 20px; color: var(--rojo); }
.ticket-botones.tres { grid-template-columns: 1fr 1fr 1fr; }
.ticket-botones.tres .btn { padding: 0 8px; font-size: 14px; }
.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.resumen-propinas { border-color: var(--azul); }
.ec-linea.normal { font-weight: 500; font-size: 14px; }
.ticket-cliente .comanda-num { font-size: 20px; }
@media (max-width: 859px) {
  .cobro-grid, .propinas-grid { grid-template-columns: minmax(0, 1fr); }
  .cobro-grid .cobro-panel { order: -1; }
  .ticket-botones.tres { grid-template-columns: 1fr 1fr; }
  .ticket-botones.tres .btn:last-child { grid-column: span 2; }
  .propinas-grid .fila, .tarjeta .fila { flex-wrap: wrap; }
}
.mov-montos .enlace { display: block; margin-left: auto; min-height: 30px; }

/* ================= Cobro por persona y facturas ================= */
.modo-cobro { margin-bottom: 12px; }
.modo-cobro .pestana { min-height: 48px; font-size: 16px; }
.personas-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borde); background: #fbfaf6; }
.persona { display: flex; flex-direction: column; align-items: flex-start; min-width: 104px; min-height: 58px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--borde); background: #fff; text-align: left; }
.persona span { font-weight: 700; font-size: 14px; }
.persona b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--verde-oscuro); }
.persona.activa { border: 2px solid var(--azul); background: var(--azul-claro); }
.persona.agregar { justify-content: center; font-weight: 700; color: var(--verde); border-style: dashed; }
.fila.asignable { cursor: pointer; user-select: none; -webkit-user-select: none; }
.fila.asignable:active { background: var(--azul-claro); }
.fila.asignable.agotado { background: #f7f6f1; }
.fila.asignable.agotado .principal b { color: var(--texto-suave); }
.mas-uno { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--azul-claro); color: var(--azul); }
.agotado .mas-uno { background: var(--verde-claro); color: var(--verde-oscuro); }
.chips-asig { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-asig { min-height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borde); background: #fff; font-size: 13px; font-weight: 700; }
.chip-asig.activa { border-color: var(--azul); color: var(--azul); }
.chip-asig span { color: var(--rojo); margin-left: 4px; }
.personas-resumen { display: grid; gap: 10px; }
.persona-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; }
.persona-card small { display: block; color: var(--texto-suave); }
.persona-card.pagada { background: var(--verde-claro); border-color: var(--verde); }
.cobrando-a { padding: 10px 12px; border-radius: 10px; background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.datos-factura { display: grid; gap: 12px; padding: 12px; border: 1px dashed var(--borde); border-radius: 12px; background: #fbfaf6; }
.datos-factura[hidden] { display: none; }
.fila-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.facturas { display: grid; gap: 14px; }
.factura-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; font-size: 14px; }
.factura-datos small { display: block; color: var(--texto-suave); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.factura-datos .completo { grid-column: 1 / -1; }
@media (max-width: 520px) { .fila-dos { grid-template-columns: 1fr; } }
.formulario > *, .campo { min-width: 0; }
.campo input, .campo select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.modo-cobro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
.modo-cobro .pestana { white-space: normal; line-height: 1.2; padding: 6px 10px; }
.campo-quien input { font-size: 18px; font-weight: 700; }
.volver-personas { justify-self: start; }
.nombre-persona { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; text-align: left; min-height: 32px; }
.nombre-persona span { color: var(--texto-suave); font-size: 14px; }
.nota-factura { margin: 0; font-size: 14px; color: var(--verde-oscuro); font-weight: 600; }
.aviso-faltan { margin-bottom: 12px; padding: 12px 16px; border-radius: var(--radio); background: var(--amarillo-claro); color: #8a5a00; font-weight: 700; }
.factura.incompleta { border-color: var(--amarillo); border-width: 2px; }
.faltan { padding: 8px 16px; background: var(--amarillo-claro); color: #8a5a00; font-weight: 700; font-size: 14px; }
.falta-dato { color: #b07400; font-weight: 700; }
.panel-cabeza small b { display: inline; font-size: inherit; }

/* ================= Etapa 5: caja y corte ================= */
.caja-cerrada { max-width: 460px; margin: 24px auto; padding: 28px 24px; text-align: center; display: grid; gap: 10px; }
.caja-cerrada .ico { font-size: 44px; }
.caja-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radio); background: var(--verde-claro); color: var(--verde-oscuro); }
.punto-verde { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.caja-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cuadre-caja { display: grid; gap: 2px; }
.cuadre-caja .linea { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--borde); font-size: 16px; }
.cuadre-caja .linea b { font-variant-numeric: tabular-nums; }
.cuadre-caja .linea.suave { color: var(--texto-suave); font-size: 14px; }
.cuadre-caja .total-caja { border-bottom: 0; margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--amarillo-claro); font-size: 18px; }
.cuadre-caja .total-caja b { font-size: 26px; }
.cuadre-caja .total-caja.cuadra { background: var(--verde-claro); color: var(--verde-oscuro); }
.cuadre-caja .total-caja.sobra { background: var(--azul-claro); color: var(--azul); }
.cuadre-caja .total-caja.falta { background: var(--rojo-claro); color: var(--rojo); }
.denominaciones { display: grid; gap: 6px; }
.denominacion { display: grid; grid-template-columns: 1fr auto 96px; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--borde); }
.denominacion span { font-weight: 600; }
.denominacion input { width: 64px; min-height: 42px; text-align: center; font-size: 18px; font-weight: 700; border: 1px solid var(--borde); border-radius: 10px; }
.subtotal-den { text-align: right; font-variant-numeric: tabular-nums; color: var(--verde-oscuro); }
.grande-input { font-size: 28px !important; font-weight: 800; min-height: 64px !important; }
.opciones-forma.tres { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.opciones-forma.tres .opcion { padding: 0 10px; gap: 8px; line-height: 1.2; font-size: 14px; overflow-wrap: anywhere; }
.opciones-forma.tres { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.opcion:has(input:disabled) { opacity: .5; }
.cambio.falta b { color: var(--rojo); }
.texto-rojo { color: var(--rojo); }
.resumen-caja { border-color: var(--verde); }
.resumen-caja.alerta { border-color: var(--rojo); }
.aviso-caja { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 859px) {
  .caja-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) { .denominacion { grid-template-columns: 1fr auto; } .subtotal-den { display: none; } }

.btn-bloque { width: 100%; margin-top: 8px; }

.pasos-mf { margin: 8px 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.boton-mf { display: inline-flex; font-size: 18px; padding: 12px 20px; cursor: grab; }

/* ================= Etapa 9: reportes ================= */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; }
.rep-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .pestana { min-height: 40px; font-size: 14px; padding: 0 14px; }
.chips.chicas .pestana { min-height: 32px; font-size: 13px; padding: 0 10px; }
.rep-fechas { display: flex; gap: 10px; flex-wrap: wrap; }
.rep-fechas label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--texto-suave); }
.rep-fechas input { min-height: 40px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 10px; font: inherit; background: #fff; }
.rep-titulo { font-size: 18px; margin: 4px 0 12px; }
.rep-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; min-width: 0; }
.kpi small { color: var(--texto-suave); font-weight: 600; }
.kpi b { font-size: 26px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi span { color: var(--texto-suave); font-size: 13px; }
.kpi.principal { border-color: var(--verde); background: var(--verde-claro); }
.kpi.principal b { color: var(--verde-oscuro); font-size: 30px; }
.rep-bloque { margin-bottom: 14px; }
.rep-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rep-dos .rep-bloque { margin-bottom: 14px; }
.barra-100 { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.barra-100 i { min-width: 3px; }
.formas-rep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.formas-rep > div { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; }
.formas-rep .muestra { width: 12px; height: 12px; border-radius: 3px; grid-row: 1 / 3; }
.formas-rep span:nth-child(2) { font-weight: 700; display: grid; }
.formas-rep span small { font-weight: 400; color: var(--texto-suave); }
.formas-rep b { font-variant-numeric: tabular-nums; font-size: 18px; text-align: right; }
.formas-rep em { font-style: normal; color: var(--texto-suave); grid-column: 3; text-align: right; font-size: 13px; }
.leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--texto-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grafica { width: 100%; height: auto; display: block; }
.g-rejilla { stroke: #ece8dd; stroke-width: 1; }
.g-base { stroke: #b9b3a3; stroke-width: 1; }
.g-eje { font-size: 11px; fill: var(--texto-suave); }
.g-valor { font-size: 12px; font-weight: 700; fill: var(--texto); }
.g-blanco { fill: transparent; }
.g-col:hover .g-blanco { fill: rgba(31, 36, 33, .05); }
.barras-h { display: grid; gap: 6px; }
.bh-fila { display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bh-num { color: var(--texto-suave); font-size: 13px; text-align: right; }
.bh-nombre { font-weight: 600; font-size: 14px; display: grid; min-width: 0; }
.bh-nombre small { font-weight: 400; color: var(--texto-suave); font-size: 12px; }
.bh-nombre, .bh-nombre small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-barra { height: 12px; background: #f1eee5; border-radius: 4px; overflow: hidden; display: block; }
.bh-barra i { display: block; height: 100%; background: var(--verde); border-radius: 0 4px 4px 0; }
.bh-valor { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.alerta-suave { border-color: var(--amarillo); }
.sin-venta { display: grid; gap: 8px; font-size: 14px; }
.sin-venta div { display: grid; grid-template-columns: 160px 1fr; gap: 8px; }
.sin-venta span { color: var(--texto-suave); }
.tabla-rep { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-rep th { text-align: left; color: var(--texto-suave); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.tabla-rep td { padding: 8px; border-bottom: 1px dashed var(--borde); }
.tabla-rep .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-rep small { color: var(--texto-suave); }
.texto-verde { color: var(--verde) !important; }
.horas-rep { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; align-items: end; height: 120px; margin-bottom: 14px; }
.horas-rep div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; }
.horas-rep i { width: 100%; background: var(--verde); border-radius: 4px 4px 0 0; display: block; }
.horas-rep small { font-size: 10px; color: var(--texto-suave); }
.dias-rep { display: grid; gap: 5px; }
.dias-rep div { display: grid; grid-template-columns: 40px 1fr 56px; gap: 8px; align-items: center; font-size: 13px; }
.dias-rep b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 859px) {
  .rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-dos, .formas-rep { grid-template-columns: minmax(0, 1fr); }
  .sin-venta div { grid-template-columns: 1fr; gap: 2px; }
  .kpi b { font-size: 21px; } .kpi.principal b { font-size: 24px; }
}
@page carta { size: letter; margin: 12mm; }
@media print {
  #zona-impresion.carta { page: carta; width: auto !important; font-size: 11px; }
  .rep-impreso h1 { font-size: 18px; margin: 0 0 6px; }
  .rep-impreso .tarjeta, .rep-impreso .kpi { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
  .rep-impreso button, .rep-impreso .chips { display: none !important; }
  .rep-impreso * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.tabla-scroll { overflow-x: auto; max-width: 100%; }
.tabla-scroll + .btn { margin-top: 10px; }
.rep-dos > .rep-bloque, .rep-dos > .tarjeta { margin-top: 0; }
#rep-cuerpo { min-width: 0; }
@media (max-width: 859px) {
  .bh-fila { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 3px; }
  .bh-nombre { grid-column: 2 / 4; }
  .bh-barra { grid-column: 2; }
  .bh-valor { grid-column: 3; grid-row: 2; }
  .bh-num { grid-row: 1 / 3; }
  .horas-rep { gap: 2px; }
  .horas-rep small { font-size: 9px; }
}
@media (max-width: 520px) { .kpi.principal b { font-size: 21px; } .kpi b { font-size: 19px; } }

/* ---- Limpiar datos de prueba ---- */
.limpieza-acciones { display: flex; gap: 8px; margin: 8px 0; }
.lista-limpieza { padding: 4px 0; margin-bottom: 90px; }
.fila-limpieza { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px dashed var(--borde); cursor: pointer; }
.fila-limpieza:last-child { border-bottom: 0; }
.fila-limpieza input { width: 22px; height: 22px; accent-color: var(--rojo); }
.fila-limpieza span { display: grid; min-width: 0; }
.fila-limpieza small { color: var(--texto-suave); overflow-wrap: anywhere; }
.fila-limpieza .num { font-variant-numeric: tabular-nums; }
.fila-limpieza.marcada { background: var(--rojo-claro); }
.fila-limpieza.bloqueada { opacity: .55; cursor: not-allowed; }
.barra-limpieza { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 20; display: flex; gap: 14px; align-items: center; background: #fff; border: 2px solid var(--rojo); border-radius: 14px; padding: 10px 14px; box-shadow: var(--sombra); width: min(560px, calc(100% - 32px)); justify-content: space-between; font-weight: 700; }
.barra-limpieza.oculta { display: none; }
.btn-peligro-lleno { background: var(--rojo); color: #fff; border-color: var(--rojo); }

/* ================= Etapa 6: huéspedes y empresas ================= */
.etiqueta-huesped { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--azul); background: var(--azul-claro); color: var(--azul); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; max-width: 100%; text-align: left; }
.etiqueta-huesped.empresa { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-oscuro); }
.etiqueta-huesped.suave { border-style: dashed; background: #fff; color: var(--texto-suave); font-weight: 600; }
.cobrar-aqui { display: block; margin: 8px auto 0; }
.grupo-elegir { border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.grupo-elegir.abierto { border-color: var(--verde); }
.grupo-cabeza { width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 12px 14px; background: #fff; border: 0; font: inherit; cursor: pointer; text-align: left; }
.grupo-cabeza small { color: var(--texto-suave); }
.chips-huesped { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.chip-huesped { display: grid; padding: 8px 14px; min-height: 44px; border-radius: 12px; border: 1px solid var(--borde); background: #fff; font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.chip-huesped small { font-weight: 400; color: var(--texto-suave); }
.chip-huesped.activo { border-color: var(--verde); background: var(--verde-claro); }
.chip-huesped.suave { color: var(--texto-suave); border-style: dashed; font-weight: 600; }
.nuevo-huesped { padding: 0 14px 12px; gap: 6px; }
.nuevo-huesped input { min-width: 0; }
.grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: 12px; }
.grupo.baja { opacity: .6; }
.saldo-grupo { display: grid; text-align: right; }
.saldo-grupo small { color: var(--texto-suave); font-size: 12px; }
.saldo-grupo b { font-size: 22px; font-variant-numeric: tabular-nums; }
.reglas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.regla { display: grid; padding: 6px 8px; border-radius: 10px; background: #f4f1e8; font-size: 13px; color: var(--texto-suave); }
.regla b { color: var(--texto); }
.regla.empresa { background: var(--verde-claro); color: var(--verde-oscuro); }
.huespedes-lista { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; }
.huespedes-lista small { color: var(--texto-suave); }
.regla-campo .opciones-forma { margin-top: 4px; }
.fiscal-grupo { margin: 8px 0 12px; }
.fiscal-grupo summary { cursor: pointer; font-weight: 700; color: var(--azul); padding: 6px 0; }
.lista-huespedes { display: grid; gap: 6px; margin-bottom: 12px; max-height: 50vh; overflow: auto; }
.fila-huesped { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto auto; gap: 6px; align-items: center; }
.fila-huesped input { min-height: 40px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 10px; font: inherit; min-width: 0; }
.fila-huesped.baja input { text-decoration: line-through; color: var(--texto-suave); }
.acciones-grupo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kpi.alerta { border-color: var(--rojo); }
.kpi.alerta b { color: var(--rojo); }
.fila-total td { font-weight: 800; border-top: 2px solid var(--borde); }
.dias-grupo { display: grid; gap: 16px; }
.dia-cabeza { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: #f4f1e8; border-radius: 10px; }
.dia-cabeza span { color: var(--texto-suave); font-size: 14px; }
.horario-grupo { margin: 8px 0 0 8px; }
.horario-cabeza { display: flex; gap: 8px; align-items: baseline; font-weight: 800; padding: 4px 0; border-bottom: 1px solid var(--borde); }
.horario-cabeza small { font-weight: 400; color: var(--texto-suave); }
.horario-cabeza b { margin-left: auto; font-variant-numeric: tabular-nums; }
.consumo { padding: 8px 0 8px 10px; border-bottom: 1px dashed var(--borde); border-left: 3px solid var(--borde); }
.consumo.a-empresa { border-left-color: var(--verde); }
.consumo-cabeza { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.consumo-cabeza .hora { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.consumo-cabeza small { color: var(--texto-suave); }
.consumo-cabeza .num { margin-left: auto; font-variant-numeric: tabular-nums; }
.consumo-items { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.etiqueta-mini.empresa { background: var(--verde-claro); color: var(--verde-oscuro); }
.etiqueta-mini.pagado { background: #eee; color: var(--texto-suave); }
@media (max-width: 859px) {
  .grupos { grid-template-columns: minmax(0, 1fr); }
  .fila-huesped { grid-template-columns: minmax(0, 1fr) 60px; }
  .fila-huesped .btn { grid-column: span 1; }
  .horario-grupo { margin-left: 0; }
}
@media (max-width: 520px) { .tabla-rep { font-size: 13px; } .tabla-rep th, .tabla-rep td { padding: 6px 5px; } .tabla-rep th { font-size: 11px; letter-spacing: 0; } }
.lista-cobradas { display: grid; gap: 6px; max-height: 55vh; overflow: auto; margin-bottom: 8px; }
.fila-cobrada { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; }
.fila-cobrada > div { display: grid; min-width: 0; }
.fila-cobrada small { color: var(--texto-suave); }
.fila-cobrada .items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-cobrada select { min-height: 40px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 8px; font: inherit; background: #fff; min-width: 0; }
.fila-cobrada.ligada { border-color: var(--verde); background: var(--verde-claro); }
.consumo-acciones { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; }
.consumo-acciones .enlace { font-size: 13px; }
@media print { .consumo-acciones { display: none !important; } }

/* ---- 1.0.4: Ventas del día ---- */
.ventas-dia { display: grid; gap: 12px; }
.venta.est-cargo_habitacion { border-left: 4px solid var(--verde); }
.venta.est-cargo_empleado { border-left: 4px solid var(--amarillo); }
.venta .panel-cabeza > div { display: grid; gap: 2px; }
.venta-items { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.venta-items small { color: var(--texto-suave); }
.venta-items .tachado { text-decoration: line-through; color: var(--texto-suave); }
.venta-pagos { display: grid; gap: 6px; margin-top: 10px; }
.venta-pago { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; background: #f7f5ee; border-radius: 10px; }
.venta-pago > span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.venta-pago small { color: var(--texto-suave); width: 100%; }
.venta-nota { margin-top: 8px; padding: 8px 10px; background: var(--amarillo-claro); border-radius: 10px; font-size: 14px; }
.ventas-dia { grid-template-columns: minmax(0, 1fr); }
.venta { min-width: 0; }
.venta .panel-cabeza > div { min-width: 0; }
.venta .panel-cabeza b, .venta .panel-cabeza small { overflow-wrap: anywhere; }
.venta-pago .btn { flex: none; }
.venta-pagos { grid-template-columns: minmax(0, 1fr); }
.venta-pago > span { flex: 1 1 auto; }
.venta-pago small { overflow-wrap: anywhere; }
.venta-pago { flex-wrap: wrap; }
.venta-pago b { overflow-wrap: anywhere; min-width: 0; }
.venta .panel-cabeza .etiqueta-mini { justify-self: start; }

/* ---- 1.1.0: Inventario ---- */
.producto .quedan, .producto .agotado { display: block; font-size: 12px; font-weight: 700; color: var(--texto-suave); margin-top: 2px; }
.producto .quedan.pocas { color: #a15c00; }
.producto .agotado { color: var(--rojo); }
.producto.sin-existencia { opacity: .55; cursor: not-allowed; }
.tabla-inv .existencia { font-size: 20px; }
.etiqueta-mini.inv-ok { background: var(--verde-claro); color: var(--verde-oscuro); }
.etiqueta-mini.inv-bajo { background: var(--amarillo-claro); color: #8a5a00; }
.etiqueta-mini.inv-agotado { background: var(--rojo-claro); color: var(--rojo); }
tr.inv-agotado td { background: #fdf3f1; }
.acciones-inv { white-space: nowrap; }
.acciones-inv .btn { margin-left: 4px; }
.sin-inv { display: grid; gap: 8px; }
.sin-inv > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.sin-inv small { color: var(--texto-suave); }
.historial-inv { max-height: 55vh; overflow: auto; }
.resumen-inv { border-color: var(--amarillo); }
@media (max-width: 859px) { .acciones-inv { white-space: normal; } .acciones-inv .btn { margin: 2px 0; } }

/* ---- 1.2.0: Gastos ---- */
.mes-actual { align-self: center; padding: 0 8px; text-transform: capitalize; }
.kpi.alerta-gasto { border-color: var(--rojo); background: var(--rojo-claro); }
.kpi.alerta-gasto b { color: var(--rojo); }
.lista-gastos { display: grid; gap: 2px; }
.gasto { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed var(--borde); }
.gasto.por-confirmar { background: var(--amarillo-claro); border-radius: 10px; padding: 8px 10px; }
.g-fecha { color: var(--texto-suave); font-variant-numeric: tabular-nums; font-size: 14px; }
.g-concepto { display: grid; min-width: 0; }
.g-concepto small { color: var(--texto-suave); overflow-wrap: anywhere; }
.g-monto { font-variant-numeric: tabular-nums; color: var(--rojo); }
.g-acciones { display: flex; gap: 6px; }
.bh-boton { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding: 4px; border-radius: 8px; }
.bh-boton.activo, .linea-boton.activo { background: var(--rojo-claro); }
.linea-boton { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.proximos { margin-top: 12px; }
.proximos > b { display: block; margin-bottom: 4px; }
.lista-cobros { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin-bottom: 8px; }
.cobro-auto { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.cobro-auto span { display: grid; }
.cobro-auto small { color: var(--texto-suave); }
.cobro-auto.pausado { opacity: .55; }
.sugerencias-cobro { margin-bottom: 10px; }
.sub-modal { font-size: 15px; margin: 12px 0 6px; }
.catalogo { display: grid; gap: 6px; }
.fila-catalogo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.fila-catalogo input { min-height: 40px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 10px; font: inherit; min-width: 0; }
.fila-catalogo.baja input { text-decoration: line-through; color: var(--texto-suave); }
@media (max-width: 600px) {
  .gasto { grid-template-columns: minmax(0, 1fr) auto; }
  .g-fecha { grid-column: 1 / 3; font-size: 12px; }
  .g-acciones { grid-column: 1 / 3; }
}

/* ---- 1.3.0: importar y clasificar gastos ---- */
.sel-cat { min-height: 34px; border: 1px solid var(--borde); border-radius: 8px; padding: 0 6px; font: inherit; font-size: 13px; background: #fff; max-width: 170px; }
.resultado-imp { display: grid; gap: 6px; padding-left: 4px; list-style: none; }
.diagnostico pre { font-size: 11px; background: #f4f1e8; padding: 8px; border-radius: 8px; max-height: 200px; overflow: auto; white-space: pre-wrap; }
.reglas-lista { display: grid; gap: 10px; max-height: 40vh; overflow: auto; margin-bottom: 8px; }
.chips-reglas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip-regla { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: #f4f1e8; font-size: 13px; }
.chip-regla small { color: var(--texto-suave); }
.chip-regla button { border: 0; background: none; cursor: pointer; color: var(--texto-suave); padding: 2px 6px; }
.mp-cuenta { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 10px; }
.mp-cuenta > div:first-child { display: grid; }
.mp-cuenta small { color: var(--texto-suave); overflow-wrap: anywhere; }
.mp-cuenta input { min-height: 42px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 10px; font: inherit; min-width: 0; flex: 1; }
.mp-cuenta select { min-height: 42px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 8px; font: inherit; }
.pasos-llave { margin-bottom: 12px; }
.pasos-llave summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.pasos-llave ol { display: grid; gap: 4px; padding-left: 20px; margin-top: 6px; }

/* ---- 1.4.0: pasarelas de pago ---- */
.pasarelas-opc { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pasarela-opc { display: grid; gap: 2px; text-align: left; padding: 10px 12px; min-height: 58px; border: 2px solid var(--borde); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; }
.pasarela-opc small { color: var(--texto-suave); font-size: 12px; line-height: 1.25; }
.pasarela-opc.activa { border-color: var(--verde, #1f7a3d); background: #eef7f0; }
.pasarela-opc:disabled { opacity: .5; cursor: not-allowed; }
.espera-pasarela { display: grid; gap: 10px; }
.espera-pasarela h2 { text-align: center; }
.qr-pago { width: min(280px, 70vw); margin: 0 auto; }
.qr-pago svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.terminal-ico { font-size: 64px; text-align: center; }
.centrado { text-align: center; }
.estado-pasarela { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; border-radius: 10px; background: #f4f1e8; }
.estado-pasarela.error { background: #fdecea; color: #a1281c; }
.girando { width: 16px; height: 16px; flex: none; border: 3px solid #cfd8cf; border-top-color: var(--verde, #1f7a3d); border-radius: 50%; animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }
.pasarela-card.apagada { opacity: .75; }
.pasarela-card .fila-campo input { min-height: 42px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 10px; font: inherit; flex: 1; min-width: 0; }
.etiqueta-ok { font-size: 12px; font-weight: 700; color: #1f7a3d; background: #e3f3e7; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

/* ---- 1.4.1: captura de tarjeta no presencial ---- */
.captura-tarjeta { display: grid; gap: 10px; }
.captura-tarjeta .autorizacion { align-items: flex-start; padding: 10px 12px; border: 2px solid #e8c56a; background: #fdf6e3; border-radius: 12px; line-height: 1.35; }
#ct-brick { min-height: 120px; }
.aviso-riesgo { background: #fdf6e3; border-radius: 10px; padding: 8px 10px; }
.estado-pasarela[hidden] { display: none; }

/* ---- 1.5.0: tiempo real ---- */
.en-vivo { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.en-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #f2c14e; flex: none; }
.en-vivo.si i { background: #6ee7a0; box-shadow: 0 0 0 3px rgba(110,231,160,.25); }
@media (max-width: 520px) { .en-vivo span { display: none; } .en-vivo { padding: 6px; margin-right: 6px; } }
.cambios-vivo { position: fixed; left: 50%; top: 78px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 14px; background: #1f2a22; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 14px; }
.cambios-vivo[hidden] { display: none; }
.cambios-vivo .enlace { color: #cfd8cf; }

/* ---- 1.6.0: vincular equipos (modo internet) ---- */
.caja-pin.vincular { display: grid; gap: 12px; text-align: left; }
.caja-pin.vincular .marca, .caja-pin.vincular .titulo-pin { text-align: center; }
.codigo-equipos { font: 700 28px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; padding: 12px 14px; background: #f4f1e8; border-radius: 12px; text-align: center; margin-bottom: 10px; overflow-wrap: anywhere; }

/* ---- 1.7.0: modo sin conexión ---- */
.barra-hub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 16px; font-size: 14px; text-align: center; background: #e8f0fb; color: #173b6b; border-bottom: 1px solid #c9d9f0; }
.barra-hub[hidden] { display: none; }
.barra-hub.aviso { background: #fdf3dc; color: #6b4a07; border-color: #f0d9a0; }
.barra-hub.ok { background: #e3f3e7; color: #154d27; border-color: #b8dfc3; }
.barra-hub a.btn { text-decoration: none; }
.sin-nube { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(20, 24, 22, .55); }
.sin-nube-caja { width: min(440px, 100%); background: #fff; border-radius: 18px; padding: 20px; display: grid; gap: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.sin-nube-caja > b:first-child { font-size: 20px; }
.sin-nube-caja ol { padding-left: 20px; display: grid; gap: 4px; }
.sin-nube-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sin-nube-botones .btn { flex: 1; text-align: center; text-decoration: none; }
.llave-replica { font-size: 16px; letter-spacing: 1px; }
.barra-hub .btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---- 1.7.1: logo del restaurante ---- */
.logo-barra { display: block; height: 56px; width: auto; margin: -6px 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.marca-logo { line-height: 0; text-align: center; }
.logo-pin { display: block; width: min(260px, 72%); height: auto; margin: 0 auto 4px; }
@media (max-width: 520px) { .logo-barra { height: 46px; margin: -4px 0; } }

/* 1.8.0: propina al bote */
.propina-bote { border: 1px dashed var(--borde, #d8d2c4); border-radius: 12px; padding: 10px 12px; }
.propina-bote summary { cursor: pointer; font-weight: 600; }
.propina-bote[open] summary { margin-bottom: 8px; }

/* 1.8.1: mi cuenta / deudas anotadas por el empleado */
.etiqueta-mini.propio { background: #fff3d6; color: #7a5200; }
.ligar-usuario { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-top: 14px; }
.ligar-usuario small { display: block; color: var(--texto-suave, #6b6458); margin-top: 2px; }
.anotado-ellos { padding: 12px 16px; margin-bottom: 14px; }
.anotado-ellos summary { cursor: pointer; }
.anotado-ellos .fila { gap: 10px; }
.cats-deuda { flex-wrap: wrap; }

/* 1.8.2: pagado por renglón */
.pagado-renglon { display: block; color: #1f7a3d; font-weight: 700; margin-top: 2px; }
.btn-pagado { border-color: #1f7a3d; color: #1f7a3d; }
.movimientos .renglon-acciones { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* 1.8.4: roles del hotel */
.rol-recamarista { background: #f3e8ff; color: #5b2a86; }
.rol-mantenimiento { background: #e6f0fb; color: #1d4f86; }