/* Panel del predio: Agenda · Canchas · El predio · Cobros.
 *
 * Todo con las variables de panel.css (--bg-card, --border, --cyan…): así el MODO CLARO sale
 * gratis, sin escribir una sola regla dos veces. Ni un hex suelto acá abajo.
 */

/* ─── Formularios (dos columnas que se apilan en el celular) ─────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .ancho, .campo.ancho { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ─── Agenda ─────────────────────────────────────────────────────────────────────────────── */
.ag-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-dias { display: flex; align-items: center; gap: 4px; }
.ag-dia-texto { font-weight: 600; font-size: 15px; min-width: 190px; text-align: center; }

.ag-tabla { padding: 18px 20px 20px; overflow-x: auto; }
/* El alto de un hueco y el aire entre huecos: de acá sale el alto de un turno de 2 horas. */
.ag-grilla { --fila: 54px; --hueco: 6px; display: flex; gap: 10px; align-items: flex-start; min-width: 520px; }
.ag-col-caja { flex: 1 1 0; min-width: 120px; display: flex; flex-direction: column; }
.ag-col-caja.ag-horas { flex: 0 0 54px; min-width: 54px; }
.ag-col-cabeza { min-height: 40px; padding-bottom: 12px; }
.ag-col { display: flex; flex-direction: column; gap: var(--hueco); }
.ag-hora { height: var(--fila); font-size: 12.5px; color: var(--text-muted); padding-top: 4px; box-sizing: border-box; }
.ag-nada { height: var(--fila); }

.ag-celda {
  height: calc(var(--largo) * var(--fila) + (var(--largo) - 1) * var(--hueco));
  border-radius: var(--r-medio); border: 1px solid transparent; padding: 0 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px; overflow: hidden; text-align: left;
}
/* El día, por reloj (sec-agenda.js, dibujarDia): renglones de --u horas; cada celda dice en qué
   renglón empieza y cuántos ocupa. Una hora sigue midiendo --fila, como en la semana. */
.ag-col.ag-reloj {
  display: grid; row-gap: var(--hueco);
  grid-template-rows: repeat(var(--filas), calc((var(--fila) + var(--hueco)) * var(--u) - var(--hueco)));
}
.ag-reloj > .ag-celda, .ag-reloj > .ag-hora, .ag-reloj > .ag-cerrado { height: auto; min-height: 0; }
.ag-libre { background: var(--bg-sutil); border-color: var(--border); align-items: center; color: var(--text-agarre); }
.ag-libre:hover { border-color: var(--border-hi); color: var(--cyan); }
.ag-libre.pasado { opacity: .45; }
.ag-turno { background: var(--bg-card-pressed); border-color: var(--border-fuerte); }
.ag-turno:hover { border-color: var(--border-hover); }
/* Partido de un torneo en esta cancha (lib/turnos_torneos.php): ocupa igual, pero se distingue. */
.ag-partido { background: var(--accent-soft); border-color: var(--border-hi); }
.ag-partido .ag-detalle { color: var(--cyan); }
.ag-nombre { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-detalle { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-detalle svg { width: 12px; height: 12px; flex: none; }

.ag-pie { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.ag-leyenda { display: inline-flex; align-items: center; gap: 7px; }
.ag-detalles { display: flex; flex-direction: column; gap: 10px; }
.ag-detalle-fila { display: flex; align-items: baseline; gap: 12px; }
.ag-detalle-fila > span:first-child { flex: 1; }

/* La semana y el mes. La semana usa la MISMA grilla que el día (.ag-grilla): lo único que cambia
   es que las columnas son días en vez de canchas, así un turno de 2 horas se dibuja igual. */
.ag-selector { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-dia-texto.ancho { min-width: 250px; }
.ag-semana { min-width: 720px; }
.ag-semana .ag-col-caja { min-width: 96px; }
/* Siete días × quince horas son más de cien huecos: con el "+" a pleno la semana se lee como un
   tablero de cruces. Queda apenas insinuado y aparece entero cuando el mouse pasa por encima. */
.ag-semana .ag-libre svg { opacity: .3; transition: opacity .12s; }
.ag-semana .ag-libre:hover svg { opacity: 1; }

/* Botón pelado: sin esto se dibuja con el fondo que le pone el navegador (una caja blanca).
   Y la altura FIJA es la que mantiene las horas de la izquierda alineadas con las filas: la
   columna de horas tiene la cabecera vacía, así que si esta crece, todo lo de al lado se corre. */
.ag-grilla .ag-col-cabeza { height: 56px; box-sizing: border-box; padding-bottom: 12px; }
.ag-dia-cab {
  background: none; border: 0; width: 100%; text-align: center;
  border-radius: var(--r-medio); padding: 4px 2px; cursor: pointer;
}
.ag-dia-cab:hover { background: var(--bg-card-pressed); }
.ag-dia-cab.hoy .t-fuerte { color: var(--cyan); }

/* Cuántas canchas quedan libres a esa hora. Tres estados y nada de rojo: "completo" es una buena
   noticia para el club, no un error. */
.ag-ocupa { background: var(--bg-sutil); border-color: var(--border); align-items: center; gap: 1px; }
.ag-ocupa:hover { border-color: var(--border-hi); }
.ag-ocupa.algo { background: var(--accent-soft); border-color: var(--border-hi); }
.ag-ocupa.lleno { background: var(--bg-card-pressed); border-color: var(--border-fuerte); }
.ag-ocupa-num { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.ag-ocupa.algo .ag-ocupa-num { color: var(--cyan); }
.ag-ocupa.lleno .ag-ocupa-num { font-size: 13px; color: var(--text-dim); font-weight: 500; }

.ag-mes-caja { padding: 18px 20px 20px; overflow-x: auto; }
.ag-mes-cab, .ag-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 620px; }
.ag-mes-cab { margin-bottom: 8px; }
.ag-mes-cab span { font-weight: 600; font-size: 12.5px; color: var(--text-muted); text-align: center; }
.ag-mes-vacio { min-height: 84px; }
.ag-mes-dia {
  min-height: 84px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--r-medio); padding: 8px 10px; text-align: left;
  background: var(--bg-sutil);
}
.ag-mes-dia:hover { border-color: var(--border-hi); }
.ag-mes-dia.con { background: var(--accent-soft); border-color: var(--border-hi); }
.ag-mes-dia.hoy { box-shadow: inset 0 0 0 1.5px var(--cyan); }
.ag-mes-num { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.ag-mes-dia.con .ag-mes-num, .ag-mes-dia.hoy .ag-mes-num { color: var(--text); }
.ag-mes-turnos { font-size: 13px; font-weight: 600; color: var(--cyan); margin-top: auto; }
.ag-mes-plata { font-size: 12.5px; color: var(--text-dim); }

/* En el celular el mes entra ENTERO: los casilleros achican y se quedan con lo imprescindible (el
   día y cuántos turnos). Con scroll horizontal habría que arrastrar para ver el fin de semana,
   que es justo lo que se mira. La semana sí scrollea: son 7 días × 15 horas, no hay forma. */
@media (max-width: 720px) {
  .ag-mes-caja { padding: 14px 12px 16px; }
  .ag-mes-cab, .ag-mes { min-width: 0; gap: 4px; }
  .ag-mes-cab span { font-size: 11px; }
  .ag-mes-vacio { min-height: 58px; }
  .ag-mes-dia { min-height: 58px; padding: 5px 4px; align-items: center; }
  .ag-mes-num { font-size: 13px; }
  .ag-mes-turnos { font-size: 12.5px; }
  .ag-mes-palabra, .ag-mes-plata { display: none; }
}

/* ─── Canchas ────────────────────────────────────────────────────────────────────────────── */
.cn { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 880px) { .cn { grid-template-columns: 1fr; } }
.cn-lista { display: flex; flex-direction: column; gap: 10px; }
.cn-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-grande); padding: 14px 16px;
}
.cn-item:hover { background: var(--bg-card-pressed); }
.cn-item.activa { background: var(--accent-soft); border-color: var(--border-hi); }
.cn-item.activa .t-fuerte { color: var(--cyan); }

.cn-ficha { display: flex; flex-direction: column; gap: 18px; }
.cn-bloque { display: flex; flex-direction: column; gap: 10px; }
.cn-rot { font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); }

.cn-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .cn-opciones { grid-template-columns: 1fr; } }
.cn-opcion {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-grande); padding: 14px 16px;
}
.cn-opcion:hover { border-color: var(--border-hover); }
.cn-opcion.activa { background: var(--accent-soft); border-color: var(--border-hi); }
.cn-opcion.activa .t-fuerte { color: var(--cyan); }
.cn-opcion > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.cn-punto { width: 20px; height: 20px; border-radius: var(--r-pill); border: 1.5px solid var(--border-fuerte); flex: none; margin-top: 1px; }
.cn-opcion.activa .cn-punto { border-color: var(--cyan); background: var(--cyan); box-shadow: inset 0 0 0 4px var(--bg-card); }
.cn-sena { display: flex; flex-direction: column; gap: 8px; }
.cn-ayuda { margin: 0; }

.cn-dias { display: flex; flex-direction: column; }
.cn-dia { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.cn-dia:last-child { border-bottom: 0; }
.cn-dia-nombre { flex: 1; font-size: 15px; font-weight: 500; }
.cn-horas { display: flex; align-items: center; gap: 8px; }
.cn-horas .input { width: 112px; }
.cn-pie { display: flex; align-items: center; gap: 10px; }

/* ─── El predio ──────────────────────────────────────────────────────────────────────────── */
.pr { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.pr-visible { display: flex; align-items: center; gap: 16px; }
.pr-visible > div { flex: 1; }
.pr-visible p { margin: 2px 0 0; }
.pr-pie { display: flex; justify-content: flex-end; }

/* ─── Cobros ─────────────────────────────────────────────────────────────────────────────── */
.cb-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 720px) { .cb-numeros { grid-template-columns: 1fr; } }
.cb-plata { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; line-height: 34px; }
.cb-plata.dim { color: var(--text-dim); }
.cb-tabla { padding: 8px 20px 12px; overflow-x: auto; }
.cb-fila {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px 170px 110px; gap: 12px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; min-width: 560px;
}
.cb-fila:last-child { border-bottom: 0; }
.cb-cabeza { font-weight: 600; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-muted); padding: 10px 0; }
.cb-der { text-align: right; }

/* Una cancha que ese día no abre: cartel, no una columna vacía (se lee como error). */
.ag-cerrado {
  border: 1px dashed var(--border-fuerte); border-radius: var(--r-medio);
  padding: 16px 10px; text-align: center; font-size: 13px; color: var(--text-muted);
}

/* ─── Caja ───────────────────────────────────────────────────────────────────────────────── */
.cj { display: flex; flex-direction: column; gap: 16px; }
.cj .cb-numeros { margin-bottom: 0; }
.cb-plata.pos { color: var(--cyan); }
.cb-plata.neg { color: var(--err); }
.cj-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .cj-dos { grid-template-columns: 1fr; } }
.cj-bloque { display: flex; flex-direction: column; gap: 14px; }
.cj-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cj-lista { display: flex; flex-direction: column; gap: 12px; }
.cj-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; font-size: 14.5px; }
.cj-cat { display: flex; flex-direction: column; gap: 6px; }
.cj-barra { height: 4px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.cj-barra span { display: block; height: 100%; border-radius: 999px; background: var(--cyan); }
.cj-barra.gasto span { background: var(--text-muted); }
.cj-tabla { overflow-x: auto; margin: -4px 0; }
.cj-fila {
  display: grid; grid-template-columns: 90px minmax(0, 1fr) 130px 110px 44px; gap: 12px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; min-width: 560px;
}
.cj-fila-pend { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) 100px 90px; }
.cj-fila:last-child { border-bottom: 0; }
.cj-fila.anulado > span { text-decoration: line-through; opacity: .5; }
.cj-corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-gasto { color: var(--text-dim); }
.cj-pie { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cj-cats { display: flex; flex-direction: column; gap: 22px; }
.cj-cats-bloque { display: flex; flex-direction: column; gap: 8px; }
.cj-cats-fila { display: flex; gap: 8px; align-items: center; }
.cj-cats-fila .input, .cj-cats-fila input { flex: 1; min-width: 0; }
/* En el celular cada fila son dos renglones: quién y cuánto arriba, cuándo y dónde abajo, el
   botón al costado. Una tabla que hay que arrastrar para llegar a "Cobrar" no se usa. */
@media (max-width: 720px) {
  .cj-fila, .cj-fila-pend {
    min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px;
    grid-template-areas: "quien monto accion" "cuando extra accion";
  }
  .cj-quien { grid-area: quien; }
  .cj-monto { grid-area: monto; }
  .cj-accion { grid-area: accion; }
  .cj-cuando { grid-area: cuando; font-size: 13px; }
  .cj-extra { grid-area: extra; font-size: 13px; text-align: right; }
}

/* ─── Caja: de dónde entró + filtro (2026-10-14) ─────────────────────────────────────────── */
.cj-origenes-caja { border-color: var(--border-hi); }
.cj-origenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 720px) { .cj-origenes { grid-template-columns: 1fr; gap: 18px; } }
.cj-origen { display: flex; flex-direction: column; gap: 8px; }
.cj-linea-dos { grid-template-columns: minmax(0, 1fr) auto; }
.cj-origen-plata { font-size: 22px; font-weight: 700; }
.cj-titulo-filtro { align-items: center; flex-wrap: wrap; }
.cj-fila-grupo { background: var(--accent-soft); border-radius: var(--r-medio); padding-left: 8px; padding-right: 8px; }
.cj-ver { font-size: 13px; margin-left: 4px; }

/* ─── Buffet ─────────────────────────────────────────────────────────────────────────────── */
.bf { display: flex; flex-direction: column; gap: 16px; }
/* En la compu la venta va a la derecha, a lo alto; en el celular justo debajo de los productos
   (antes de la lista de ventas), para no tener que bajar hasta el fondo para cobrar. */
.bf-vender {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start;
  grid-template-areas: "prod ticket" "ventas ticket"; grid-template-rows: auto 1fr;
}
.bf-izq { grid-area: prod; }
.bf-ticket { grid-area: ticket; }
.bf-ventas-hoy { grid-area: ventas; min-width: 0; }
.bf-izq { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bf-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bf-filtros .chips { flex: 1 1 auto; }
.bf-filtros .bf-buscar { flex: 0 1 240px; min-width: 180px; }
.bf-filtros .bf-buscar:only-child { flex: 1 1 auto; }
.bf-buscar { display: flex; align-items: center; gap: 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-grande); padding: 0 14px; color: var(--text-muted); }
.bf-buscar .input { border: 0; background: transparent; padding-left: 0; flex: 1; min-width: 0; }
.bf-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bf-prod {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 108px;
  padding: 14px 16px; border-radius: var(--r-grande); background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; width: auto;
}
.bf-prod:hover { border-color: var(--border-hover); }
.bf-prod:active { background: var(--bg-card-pressed); }
.bf-prod.en { border-color: var(--border-hi); background: var(--accent-soft); }
.bf-prod.off { opacity: .45; cursor: not-allowed; }
.bf-nombre { font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.bf-prod.en .bf-nombre { padding-right: 30px; }
.bf-precio { font-weight: 700; font-size: 19px; margin-top: auto; }
.bf-cant {
  position: absolute; top: 10px; right: 10px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--cyan); color: var(--on-accent); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center;
}
.bf-poco { color: var(--warn); }
.bf-sin { color: var(--err); }
.bf-ticket { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.bf-ticket-tit { font-size: 17px; }
.bf-lineas { display: flex; flex-direction: column; }
.bf-linea { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.bf-linea-txt { flex: 1; min-width: 0; }
.bf-linea-cant { width: 22px; text-align: center; }
.bf-linea-sub { width: 78px; }
.bf-vacia { padding: 26px 8px; text-align: center; border: 1px dashed var(--border-fuerte); border-radius: var(--r-grande); }
.bf-total { display: flex; justify-content: space-between; align-items: baseline; }
.bf-etiqueta { margin-bottom: 8px; }
.bf-cobrar { width: 100%; min-height: 50px; font-size: 16px; letter-spacing: .4px; }
.bf-dia { margin-bottom: 0; }
.bf-productos { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bf-fila-prod { grid-template-columns: minmax(0, 1fr) 130px 100px 170px; }
.bf-editando { background: var(--accent-soft); }
.bf-acciones { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.bf-acciones .boton { width: auto; }
.bf-form .boton { width: 100%; }
@media (max-width: 1000px) {
  .bf-vender { grid-template-columns: 1fr; grid-template-areas: "prod" "ticket" "ventas"; grid-template-rows: auto; }
  .bf-productos { grid-template-columns: 1fr; }
  .bf-ticket { position: static; }
}
@media (max-width: 720px) {
  .bf-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-fila-prod { grid-template-columns: minmax(0, 1fr) auto auto; }
}

/* ─── Cobrar turno + buffet / cuentas abiertas (tanda 2) ─────────────────────────────────── */
.cj-buffet {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-grande);
  border: 1px solid var(--border-hi); background: var(--accent-soft); cursor: pointer;
}
.cj-buffet input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--cyan); flex: none; }
.cj-buffet-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bf-cuentas { display: flex; flex-direction: column; gap: 10px; }
.bf-cuentas-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.bf-cuenta {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; min-width: 170px; border-radius: var(--r-grande);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font: inherit; text-align: left; cursor: pointer; width: auto;
}
.bf-cuenta:hover { border-color: var(--border-hover); }
.bf-cuenta.activa { border-color: var(--border-hi); background: var(--accent-soft); }
.bf-cuenta-turno { font-size: 12px; color: var(--text-muted); }
.bf-cuenta.activa .bf-cuenta-turno { color: var(--cyan); }
.bf-ticket-sub { font-size: 12px; letter-spacing: .06em; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.bf-ya { display: flex; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.bf-ya > span:first-child { flex: 1; min-width: 0; }
.bf-botones { display: flex; flex-direction: column; gap: 8px; }
.bf-botones .boton { width: 100%; min-height: 46px; }
.bf-botones .bf-cobrar { min-height: 50px; }
.bf-opcion {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: var(--r-grande);
  border: 1px solid var(--border-fuerte); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.bf-opcion.activo { border-color: var(--border-hi); background: var(--accent-soft); }
.bf-opcion-txt { flex: 1; display: flex; flex-direction: column; }
.bf-opciones { display: flex; flex-direction: column; gap: 8px; }
.bf-cuenta-sel { color: var(--cyan); }

/* ─── Equipo del predio (2026-10-14) ─────────────────────────────────────────────────────── */
.eq-lista { display: flex; flex-direction: column; }
.eq-fila {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 170px 150px 40px; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.eq-fila:last-child { border-bottom: 0; }
.eq-fila .avatar { color: var(--on-accent); }
.eq-quien { display: flex; flex-direction: column; min-width: 0; }
.eq-quien > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-rol .select { width: 100%; }
.eq-pend { color: var(--warn); }
.eq-solo { padding-top: 12px; }
.eq-permisos { margin-top: 16px; }
.eq-perm { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 90px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; min-width: 520px; }
.eq-perm > span:not(:first-child) { text-align: center; }
.eq-perm-cabeza { font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-muted); }
.eq-si { color: var(--ok); font-weight: 700; }
.eq-no { color: var(--text-muted); }
@media (max-width: 720px) {
  .eq-fila { grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "av quien x" "av rol x" "av visto x"; gap: 4px 12px; }
  .eq-fila .avatar { grid-area: av; }
  .eq-quien { grid-area: quien; }
  .eq-rol { grid-area: rol; }
  .eq-fila > span:nth-child(4) { grid-area: visto; }
  .eq-fila > :last-child { grid-area: x; }
}

/* ─── Cierre de caja (2026-10-14) ───────────────────────────────────────────────────────── */
.cc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cc { grid-template-columns: 1fr; } }
.cc-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 15px; }
.cc-total { border-top: 1px solid var(--border-fuerte); margin-top: 6px; padding-top: 14px; }
.cc-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.cc-estado.cerrada { border-color: var(--border-fuerte); background: transparent; color: var(--text-dim); }
.cc-dif { padding: 12px 14px; border-radius: var(--r-grande); font-weight: 600; }
.cc-dif.justo { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border); }
.cc-dif.falta { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); }
.cc-dif.sobra { color: var(--cyan); background: var(--accent-soft); border: 1px solid var(--border-hi); }
.cc-form { display: flex; flex-direction: column; gap: 14px; }
.cc-form .boton { width: 100%; }
.cc-monto { font-size: 22px !important; font-weight: 700; }
.cc-hist { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px 110px 120px 150px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; min-width: 760px; }
.cc-hist:last-child { border-bottom: 0; }
.cc-hist-cabeza { font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-muted); }
.cc-hist .num { text-align: right; }
.cj-pestanas { margin-bottom: 16px; }
.bf-caja { display: inline-flex; align-items: center; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ok-border); background: var(--ok-bg); color: var(--ok); text-decoration: none; }
.bf-caja.cerrada { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.bf-encabezado-izq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cj-quien-txt { color: var(--text-muted); }
.cc-dif-txt.justo { color: var(--ok); }
.cc-dif-txt.falta { color: var(--warn); }
.cc-dif-txt.sobra { color: var(--cyan); }
@media (max-width: 720px) {
  .eq-perm { min-width: 0; grid-template-columns: minmax(0, 1fr) 66px 66px 46px; gap: 6px; font-size: 13.5px; }
  .eq-perm-cabeza { font-size: 9.5px; letter-spacing: .4px; }
  .eq-perm .t-apoyo { font-size: 11.5px; line-height: 1.2; }
}
/* Celular: cada cierre en dos renglones (cuándo + diferencia arriba, quién + nota abajo). */
@media (max-width: 720px) {
  .cc-hist { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; grid-template-areas: "cuando dif" "quien nota"; }
  .cc-hist-cabeza, .cc-h-debia, .cc-h-conto { display: none; }
  .cc-h-cuando { grid-area: cuando; }
  .cc-h-dif { grid-area: dif; }
  .cc-h-quien { grid-area: quien; font-size: 13px; color: var(--text-dim); }
  .cc-h-nota { grid-area: nota; text-align: right; }
}