/* ══════════════════════════════════════════════════════════════
   CLUB VICIO — panel de administración
   Hereda la paleta y los componentes de caja.css; acá sólo va
   lo propio de esta pantalla.
   ══════════════════════════════════════════════════════════════ */

/* caja.css no define este tono; el panel lo usa para destacar puntos */
:root { --oro-suave: #F7F0DA; }
@media (prefers-color-scheme: dark) { :root { --oro-suave: #29220F; } }

/* ── Solapas ──
   Son siete y en un teléfono no entran: la última terminaba 146 px
   afuera de la pantalla. Y como nada las frenaba, empujaban la PÁGINA
   ENTERA hacia la derecha —encabezado incluido—, que es por qué el
   panel se veía corrido y con los botones de arriba cortados.

   La solución no es achicar la letra hasta que entren: siete palabras
   ilegibles no son un menú. Se desplazan de costado dentro de su propia
   barra, y la página queda quieta. En una pantalla ancha entran todas y
   no se nota nada. */
.solapas {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* La barrita de desplazamiento acá sería ruido: se entiende arrastrando. */
  scrollbar-width: none;
}
.solapas::-webkit-scrollbar { display: none; }

.solapa {
  /* Ni se estiran ni se aprietan: cada una ocupa lo que dice su palabra.
     Con flex:1 el navegador las apretaba hasta partirlas en dos renglones
     antes de rendirse y desbordar igual. */
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 11px 14px;
  cursor: pointer;
}

/* Cuando entran todas, que ocupen el ancho como antes. */
@media (min-width: 660px) {
  .solapas { overflow-x: visible; }
  .solapa { flex: 1; padding: 11px 8px; }
}
.solapa.activa { background: var(--surface); color: var(--ink); box-shadow: var(--sombra); }
.solapa:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* ── Acciones de cada vista ── */
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones .boton { width: auto; flex: 1 1 auto; min-width: 150px; font-size: 15px; padding: 12px 16px; }

/* ── Encabezado de categoría ── */
.grupo {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 18px 2px 8px;
}
.grupo:first-child { padding-top: 4px; }

/* ── Fila de producto o premio ── */
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: var(--f-ui);
  color: var(--ink);
}
.item:hover { border-color: var(--line-2); }
.item:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.item.apagado { opacity: .55; }

.item-nombre { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.item-datos  { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px 10px; }

.etiqueta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--oro-suave);
  color: var(--oro);
  white-space: nowrap;
}
.etiqueta.apagada { background: var(--surface); color: var(--ink-3); border: 1px solid var(--line); }
.etiqueta.alerta  { background: var(--alerta-bg); color: var(--alerta); }

.item-precio {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Botón chico dentro de una fila (crear premio de un producto) */
.item-accion {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--oro);
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.item-accion:hover { border-color: var(--oro); }

/* ── Formularios de las hojas ── */
.hoja-panel select {
  font-family: var(--f-ui);
  font-size: 16px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 13px 14px;
  width: 100%;
  appearance: none;
}

.opcional { font-style: normal; color: var(--ink-3); font-weight: 400; }

.interruptor {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  cursor: pointer;
}
.interruptor input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--oro); }
.interruptor strong { display: block; font-size: 15px; font-weight: 600; }
.interruptor small  { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }

.nota-puntos {
  background: var(--oro-suave);
  border-left: 3px solid var(--oro);
  border-radius: 0 8px 8px 0;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* ── Quitar un premio de la lista ──
   Va separado del resto por una línea y en el color de alerta, porque no
   es un ajuste más: saca el premio del catálogo. Y va DESPUÉS de
   Guardar, no antes, para que el pulgar que baja buscando el botón
   principal no se lo encuentre primero. */
.quitar-premio {
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.quitar-premio .boton { width: auto; align-self: flex-start; padding-left: 0; }
.quitar-premio .pista { font-size: 12.5px; }
.texto.peligro { color: var(--alerta); }

.vacio-admin {
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.55;
  padding: 24px 4px;
  text-align: center;
}

/* ── Un aviso que salió bien no puede verse igual que un error ── */
.aviso.bien {
  background: var(--surface-2);
  color: var(--ok);
  border-left-color: var(--ok);
}

/* caja.css usa .lista para el historial del turno: fondo de línea, alto
   acotado y filas pegadas. Acá las filas son tarjetas separadas y la
   lista puede ser larga, así que se reinicia. */
/* #lista-imagenes está acá por un error que encontré mirando una captura
   y no leyendo el código: .lista trae max-height: 40vh de caja.css, y el
   bloque del QR es alto. Los botones Guardar y Cancelar quedaban FUERA
   de ese recorte, invisibles, con la imagen ya elegida. O sea: se podía
   elegir el QR nuevo y no había manera de guardarlo. */
#lista-carta, #lista-premios-admin, #lista-clientes,
#lista-mejores, #lista-dormidos, #lista-canjeados, #ficha-movimientos,
#lista-imagenes, #lista-ajustes {
  display: block;
  background: none;
  border-radius: 0;
  max-height: none;
  overflow: visible;
}

/* ══════════════════════════════════════════════════════════════
   FOTOS DE LA CARTA
   ══════════════════════════════════════════════════════════════ */

.campo-etq {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
}

.campo-foto { display: block; }

.foto-fila { display: flex; align-items: center; gap: 14px; }

.foto-vista {
  width: 84px; height: 84px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px dashed var(--line-2);
  background: var(--surface-2) center/cover no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.foto-vista span {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  padding: 4px;
}
.foto-vista.con-foto { border-style: solid; border-color: var(--line); }
.foto-vista.con-foto span { display: none; }

.foto-botones { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.foto-elegir { text-align: center; cursor: pointer; padding: 11px 14px; font-size: 15px; }
.foto-botones .texto { padding: 4px; }

/* Miniatura en la lista de la carta */
.item-foto {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--surface) center/cover no-repeat;
  border: 1px solid var(--line);
}
.item-foto.vacia {
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--ink-3);
  border-style: dashed;
}


/* ══════════════════════════════════════════════════════════════
   CLIENTES Y DATOS
   ══════════════════════════════════════════════════════════════ */

.buscador { display: flex; gap: 8px; margin-bottom: 6px; }

.buscador input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;               /* menos de 16 y el iPhone hace zoom solo */
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}
.buscador input:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }
.buscador .boton { width: auto; flex: 0 0 auto; }

.titulo-bloque {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  margin: 22px 0 2px;
}

/* ── Tarjetas de cifras ── */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
.tarjeta-etq { font-size: 12px; color: var(--ink-3); }
.tarjeta-num {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 3px;
}
.tarjeta-pie { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }

/* El número de puesto en el ranking */
.puesto {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-right: 10px;
}
#lista-mejores .item:nth-child(1) .puesto,
#lista-mejores .item:nth-child(2) .puesto,
#lista-mejores .item:nth-child(3) .puesto {
  background: var(--oro-suave); border-color: var(--oro-vivo); color: var(--oro);
}

.item-precio.suma  { color: var(--ok); }
.item-precio.resta { color: var(--ink-2); }

.acciones-rango { align-items: flex-end; margin-bottom: 4px; }
.campo-rango { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 150px; }
.campo-rango span { font-size: 12.5px; color: var(--ink-3); }
.campo-rango select {
  font: inherit; font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}
.acciones-rango .boton { flex: 0 0 auto; min-width: 0; }

/* ── Mapa de horas ── */
/* Una tabla ancha no se achica: se desplaza. Encogerla haría ilegibles
   justo las casillas que uno quiere comparar. */
.mapa-horas { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 4px; }

.tabla-horas { border-collapse: collapse; font-size: 11.5px; }
.tabla-horas th {
  font-weight: 600; color: var(--ink-3);
  padding: 3px 5px; text-align: center;
  font-family: var(--f-mono);
}
.tabla-horas tbody th { text-align: right; padding-right: 8px; }
.tabla-horas td { padding: 1px; }

.celda {
  display: grid; place-items: center;
  width: 30px; height: 26px;
  border-radius: 6px;
  background: var(--oro-vivo);
  color: var(--ink);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 11px;
}
@media (prefers-color-scheme: dark) { .celda { color: #131209; } }


/* Acá había un tope de 38vh, para que se desplazara la lista y no la hoja
   entera y el botón de cerrar quedara siempre a mano. La idea era buena y
   el resultado malo: en un teléfono eso dejaba una ventanita de 208 px
   —tres movimientos de ocho— metida dentro de una hoja que también se
   desplaza. Dos zonas de scroll encimadas: uno intenta mover la hoja, la
   lista se come el gesto, y el historial del cliente queda imposible de
   leer. Lo midió una captura, no el código.

   Ahora la lista crece lo que tenga que crecer y lo que se desplaza es la
   hoja, como en todas las demás. Cerrar sigue a mano: se toca el fondo o
   se arrastra la barrita de arriba.

   Esa línea volvía a poner el max-height que el reinicio de arriba ya le
   había sacado; dos reglas peleando por lo mismo, ganaba la última. */


/* ══════════════════════════════════════════════════════════════
   AVISOS
   ══════════════════════════════════════════════════════════════ */

/* El formulario usa la caja de las hojas, pero acá no es una hoja
   flotante: va apoyado en la página. */
.hoja-panel.plano {
  position: static;
  transform: none;
  max-height: none;
  overflow-y: visible;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 4px 18px 18px;
  margin: 10px 0 4px;
}

#form-aviso textarea {
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
  width: 100%;
}
#form-aviso textarea:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }

/* El contador de caracteres, discreto hasta que importa */
.opcional { font-family: var(--f-mono); font-size: 12px; }

/* Y cuando importa, se ve. Con {nombre} adentro el largo real se puede
   pasar sin que el campo parezca lleno: el número en rojo es el único
   aviso de que el teléfono va a cortar el título. */
.opcional.pasado { color: var(--alerta); font-weight: 700; }

.titulo-bloque.chico { font-size: 14px; font-family: var(--f-ui); margin-top: 20px; }

/* El botoncito que mete {nombre} en el texto: escribirlo a mano invita
   a equivocarse ({Nombre}, {nombres}) y el error no avisa, sale crudo
   en el teléfono de todo el mundo. */
.ficha {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 600;
  background: var(--oro-suave); color: var(--oro);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; margin-right: 6px; cursor: pointer;
}
.ficha:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* Un `span` adentro de `.campo` es el rótulo del campo, y va en
   mayúsculas. Cuando ese span es una pista, no: «PASADO ESE PLAZO EL
   REGALO SE SUELTA SOLO» grita una aclaración que no es un rótulo. */
.campo > .pista {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 12.5px; line-height: 1.5;
}

/* El desplegable de rol, en la fila de cada persona. Angosto a propósito:
   no compite con el nombre, que es lo que se lee primero. */
.rol-sel {
  flex: 0 0 auto;
  width: auto;
  min-width: 130px;
  font-size: 13.5px;
  padding: 8px 10px;
}

#regalo-premio, #regalo-dias { width: 100%; }
#lista-cumples .item-precio { font-size: 18px; }

/* «Sin regalo» al lado del cumpleañero: la explicación de una ausencia
   que si no se lee como una falla del sistema. */
.marca-espera {
  color: var(--alerta); font-weight: 600;
}

#regalo-nuevo {
  display: grid; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; margin: 4px 0 10px;
}

/* Corregir un cumpleaños es raro y delicado: plegado, para que no se
   toque sin querer mientras se mira la ficha. */
#bloque-cumple { margin-top: 16px; }
#bloque-cumple summary {
  cursor: pointer; font-size: 14px; color: var(--ink-2);
  padding: 8px 2px; list-style: none;
}
#bloque-cumple summary::-webkit-details-marker { display: none; }
#bloque-cumple summary::before { content: "▸ "; color: var(--ink-3); }
#bloque-cumple[open] summary::before { content: "▾ "; }
.fila-cumple { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; margin: 8px 0 12px; }

/* ── Cómo se va a ver en el teléfono ── */
.vista-aviso {
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  padding: 14px;
  margin: 4px 0 14px;
}

.vista-marco {
  display: flex;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
  box-shadow: var(--sombra);
}

.vista-icono {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: url("../img/icon-192.png") center/cover no-repeat, var(--surface-2);
  border: 1px solid var(--line);
}

.vista-texto { min-width: 0; flex: 1; }
.vista-app    { font-size: 11px; color: var(--ink-3); }
.vista-titulo { font-size: 14px; font-weight: 700; line-height: 1.3; margin-top: 1px;
                overflow-wrap: anywhere; }
.vista-cuerpo { font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-top: 2px;
                overflow-wrap: anywhere; }

#lista-avisos { display: block; background: none; border-radius: 0; max-height: none; overflow: visible; }


/* ══════════════════════════════════════════════════════════════
   PENDIENTES · ventas cobradas sin conexión y sin dueño conocido
   ══════════════════════════════════════════════════════════════ */

.globo-solapa {
  display: inline-block;
  min-width: 18px; padding: 1px 5px;
  margin-left: 5px;
  border-radius: 9px;
  background: var(--alerta);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700; line-height: 16px;
  text-align: center;
  vertical-align: middle;
}

.pendiente {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 15px;
}
.pendiente + .pendiente { margin-top: 10px; }

.pendiente-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}

.pendiente-buscar { display: flex; gap: 8px; align-items: stretch; }
.pendiente-buscar .buscador { margin-bottom: 0; flex: 1; }
.pendiente-buscar .boton { width: auto; flex: 0 0 auto; }

.pendiente-resultados:not(:empty) { margin-top: 10px; }

.fila-resultado {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  font-size: 14px;
}
.fila-resultado + .fila-resultado { margin-top: 6px; }

.pendiente [data-descartar] { margin-top: 8px; padding-left: 0; }

.buscador {
  width: 100%;
  font-family: var(--f-ui);
  font-size: 16px;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 10px;
}
.buscador:focus {
  outline: 2px solid var(--oro-vivo);
  outline-offset: 1px;
  border-color: var(--oro-vivo);
}


/* ── El pie de la app: seis campos con su botón ── */
.ajuste {
  display: flex; align-items: flex-end; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.ajuste:last-child { border-bottom: 0; }
.ajuste .campo { flex: 1; min-width: 0; }
.ajuste .boton { width: auto; flex: 0 0 auto; }

/* Los ajustes que son un párrafo y no un renglón: los mensajes de
   WhatsApp del pedido. Hereda la forma de los campos de texto de al
   lado para que la columna no se vea desprolija. */
.ajuste textarea {
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
.ajuste textarea:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }

@media (max-width: 560px) {
  .ajuste { flex-direction: column; align-items: stretch; }
  .ajuste .boton { width: 100%; }
}


/* ══════════ El QR para cobrar (migración 38) ══════════

   La vista previa es grande a propósito: la propietaria tiene que poder
   escanearla desde esta misma pantalla con el teléfono para comprobar
   que funciona. Un QR de 80 px no se deja leer por ninguna app de
   banco, y entonces la comprobación no se hace nunca. */

.ajuste-imagen {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ajuste-imagen:last-child { border-bottom: 0; }

.ajuste-imagen-rotulo {
  margin: 0 0 10px;
  font-weight: 600;
}

.imagen-vista {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  /* Fondo blanco siempre: un QR con transparencia sobre fondo oscuro
     deja de leerse, y el panel se ve en modo oscuro a la noche. */
  background: #fff;
  padding: 10px;
}

.imagen-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 14px;
  text-align: center;
  padding: 12px;
}

.ajuste-imagen .acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 6px;
}
.ajuste-imagen .acciones .boton { width: auto; }

/* El <label> que hace de botón para elegir archivo. Sin cursor no
   parece tocable, y sin el centrado su texto queda pegado a la
   izquierda mientras el del botón de al lado va centrado: dos botones
   iguales que no se ven iguales. */
.ajuste-imagen label.boton {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.aviso-sin-guardar {
  margin-top: 8px;
  color: var(--alerta);
}


/* ══════════ El interruptor del delivery ══════════ */

.interruptor-caja {
  padding: 14px 0 4px;
}

.interruptor-estado {
  margin: 0 0 10px;
  font-weight: 600;
}
.interruptor-estado.cerrado { color: var(--alerta); }

#btn-delivery { width: auto; }

/* Los botones del QR NO se estiran al ancho de la pantalla en el
   teléfono, al revés que los demás: son dos o tres, cortos, y apilados
   a lo ancho ocupan media pantalla de alto para decir «Elegir otra». */
@media (max-width: 560px) {
  #btn-delivery { width: 100%; }
}

/* Una imagen que no carga no puede verse como un hueco cualquiera: si el
   QR se rompe, hay que notarlo acá y no cuando un cliente no pueda pagar. */
.imagen-vista.rota {
  min-height: 90px;
  border-style: dashed;
  border-color: var(--alerta);
  color: var(--alerta);
  font-size: 14px;
  padding: 16px;
}


/* ══════════ Loyverse ══════════ */

/* ── EL CARTEL DEL RELOJ ──
   Es lo único de este bloque que hay que mirar seguido, así que va
   arriba y dentro de una caja, no suelto entre dos párrafos de ayuda.

   `aviso-suave` y no `aviso`: cuando el stock quedó viejo, la carta
   sigue vendiendo y nadie está en problemas. Es un «andá a mirar», no
   una alarma roja, y gastar el rojo en esto haría que el rojo de verdad
   deje de llamar la atención. */
.stock-caja {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.stock-caja .pista { margin: 0; }
.aviso-suave {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--oro);
}

.loyverse-caja { padding: 8px 0 4px; }
#btn-probar-loyverse { width: auto; }

#resultado-loyverse {
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.ly-titulo {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--ok);
}
.ly-titulo.mal { color: var(--alerta); }

.ly-dato { margin: 0 0 4px; font-size: 15px; }

.ly-lista {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.ly-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  font-size: 14px;
}
.ly-nombre { min-width: 0; overflow-wrap: anywhere; }
.ly-stock {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
/* El cero se ve distinto porque es el que importa: es el producto que la
   app no tendría que seguir ofreciendo. */
.ly-stock.cero { color: var(--alerta); }
.ly-stock.sin  { color: var(--ink-3); font-weight: 400; font-family: var(--f-ui); font-size: 13px; }

.ly-aviso {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-left: 3px solid var(--alerta);
  background: var(--surface-2);
  font-size: 14px;
}

/* Lo que Loyverse contestó, cuando no lo entendimos. Se puede seleccionar
   y copiar: es lo que hay que mandarme para arreglarlo. */
.ly-asomo {
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 11rem;
  overflow: auto;
  user-select: text;
}

@media (max-width: 560px) {
  #btn-probar-loyverse { width: 100%; }
}

/* La línea de «cuántos quedan sin control» se destaca: es la que dice
   cuánto trabajo falta del lado de Loyverse, y es fácil pasarla por alto
   entre dos números que parecen buenos. */
.ly-ojo {
  font-weight: 600;
  color: var(--alerta);
}


/* ══════════ Emparejar con Loyverse ══════════ */

#lista-emparejar { display: block; background: none; max-height: none; overflow: visible; }

.grupo-emparejar {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.grupo-emparejar:first-child { margin-top: 4px; }

.emp-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}
/* El que ya está resuelto se apaga un poco: lo que importa mirar es lo
   que falta, no lo que ya se hizo.

   Se llama emp-listo y no «lista» porque `lista` YA EXISTE en este
   proyecto —caja.css la usa para el historial del turno, con
   max-height: 40vh y flex-direction: column—. La primera versión usaba
   ese nombre, y cada fila emparejada se estiraba hasta ocupar media
   pantalla. En el código no se ve; lo descubrí mirando una captura. */
.emp-fila.emp-listo { background: var(--surface-2); }

.emp-txt { flex: 1 1 14rem; min-width: 0; }
.emp-nombre { margin: 0 0 3px; font-weight: 600; overflow-wrap: anywhere; }

.emp-apagado {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 1px 7px;
}

.emp-ok    { font-size: 13px; color: var(--ok); }
.emp-sug   { font-size: 13px; color: var(--oro); }
.emp-falta { font-size: 13px; color: var(--ink-3); }
/* Lo que hay que mirar de nuevo: emparejado con algo que no lleva stock,
   o con algo que ya no está en Loyverse. */
.emp-ojo   { font-size: 13px; color: var(--alerta); }

.emp-elegir {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 1 16rem;
  min-width: 0;
}
.emp-elegir select {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 14px;
  min-height: 42px;
}
.emp-elegir .boton { width: auto; flex: 0 0 auto; }

@media (max-width: 560px) {
  .emp-elegir { flex: 1 1 100%; }
}


/* ══════════ El estado de las capturas de pago (migración 49) ══════════

   En gris mientras el borrado automático está al día; en rojo cuando
   quedan capturas vencidas sin borrar. Es el único aviso de que la
   tarea de la noche se cayó, así que tiene que verse distinto: un
   renglón gris más, entre otros renglones grises, no lo mira nadie. */

#estado-comprobantes { margin: 10px 0 0; }
#estado-comprobantes.roja {
  color: var(--alerta);
  font-weight: 600;
}


/* ══════════ El visor de la captura de pago (migración 50) ══════════

   El mismo que el de la caja, y a propósito: es la misma cosa mirada
   desde otra pantalla. Acá hace falta porque la caja sólo muestra los
   pedidos hasta la medianoche, y un reclamo de pago llega después. */

#visor-comprobante {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(0, 0, 0, .92);
  cursor: zoom-out;
}
#visor-comprobante img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 8px;
  background: #fff;
}
#visor-comprobante p { margin: 0; color: #CFCABF; font-size: 13px; }

/* Los dos botones de cada pedido del historial. Van juntos y chicos:
   lo que importa de la fila es el pedido, no lo que se puede hacer
   con su captura. */
.acciones-captura {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}