/* Cobranza — un solo lugar donde vive el aspecto del panel.
   Mobile primero: la grilla scrollea adentro de su caja (nunca la página), y ninguna acción se
   esconde con display:none en una media query — la paridad se verifica con un diff de acciones y
   un botón escondido no es un permiso. */

/* El panel entero esconde y muestra con el atributo `hidden`, y eso sólo funciona mientras ninguna
   regla de acá le dé un `display` propio: el `display:none` del navegador para `[hidden]` lo pisa
   cualquier declaración de autor, aunque sea menos específica. Sin esta línea, `.modal` quedaba
   visible al cargar la página —633 px de overlay encima del login— con `elemento.hidden === true`
   devolviendo `true`. O sea el guard existía, decía que estaba cerrado, y estaba abierto. */
[hidden] { display: none !important; }

:root {
  --tinta: #16181d;
  --tinta-suave: #5b6472;
  --papel: #f6f7f9;
  --tarjeta: #ffffff;
  --borde: #dfe3ea;
  --azul: #1d4ed8;
  --azul-flojo: #eaefff;
  --verde: #0f7a46;
  --verde-flojo: #e6f6ed;
  --ambar: #8a5a00;
  --ambar-flojo: #fdf3dd;
  --rojo: #b42318;
  --rojo-flojo: #fdeceb;
  --gris-flojo: #f0f2f5;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --radio: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #e8ebf0; --tinta-suave: #a2acbb; --papel: #11141a; --tarjeta: #181c23;
    --borde: #2b313c; --azul: #6c8cff; --azul-flojo: #1d2440; --verde: #4cc38a;
    --verde-flojo: #14291f; --ambar: #e0b341; --ambar-flojo: #2c2410; --rojo: #f27168;
    --rojo-flojo: #33181a; --gris-flojo: #1f242c;
  }
}
:root[data-theme="dark"] {
  --tinta: #e8ebf0; --tinta-suave: #a2acbb; --papel: #11141a; --tarjeta: #181c23;
  --borde: #2b313c; --azul: #6c8cff; --azul-flojo: #1d2440; --verde: #4cc38a;
  --verde-flojo: #14291f; --ambar: #e0b341; --ambar-flojo: #2c2410; --rojo: #f27168;
  --rojo-flojo: #33181a; --gris-flojo: #1f242c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 4px; }
.sub { color: var(--tinta-suave); font-size: 13px; margin: 0 0 12px; }

button { font: inherit; border-radius: 8px; padding: 9px 14px; cursor: pointer; border: 1px solid transparent; }
button:disabled { opacity: .55; cursor: default; }
.primario { background: var(--azul); color: #fff; }
.secundario { background: var(--tarjeta); color: var(--tinta); border-color: var(--borde); }

input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 8px; padding: 9px 10px; width: 100%;
}
textarea { resize: vertical; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }

.error {
  background: var(--rojo-flojo); color: var(--rojo); border: 1px solid var(--rojo);
  border-radius: 8px; padding: 9px 11px; font-size: 14px; margin: 12px 0 0;
}

/* ── Login ──────────────────────────────────────────────────────────────── */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login .tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 22px; width: 100%; max-width: 380px;
}
.login button { width: 100%; margin-top: 18px; }

/* ── Barra ──────────────────────────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 10px 16px;
  background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 10px; }
.acciones { display: flex; gap: 8px; }
.chip {
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
  background: var(--gris-flojo); color: var(--tinta-suave); border: 1px solid var(--borde);
}
.menu { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 16px 0; }
.menu button[aria-current="true"] { background: var(--azul-flojo); border-color: var(--azul); color: var(--azul); }

main { padding: 12px 16px 40px; max-width: 1200px; margin: 0 auto; }

.fila-filtros { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.fila-filtros label { margin: 0 0 5px; }
.fila-filtros select, .fila-filtros input { width: auto; min-width: 150px; }
.rango { color: var(--tinta-suave); font-size: 13px; padding-bottom: 9px; }

.guia {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 10px 12px; margin: 14px 0;
}
.guia summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.guia p { font-size: 14px; color: var(--tinta-suave); }
.guia li { font-size: 14px; color: var(--tinta-suave); }

/* ── Grilla ─────────────────────────────────────────────────────────────── */
.caja-tabla {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow-x: auto; box-shadow: var(--sombra);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-suave); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
.col-persona { position: sticky; left: 0; background: var(--tarjeta); min-width: 190px; z-index: 1; }

/* En un teléfono esa columna deja de ayudar y se convierte en una tapa. Medido a 393 px: la caja de
   la tabla mide 367 px y la columna de la persona 310 — el 85% del ancho —, así que la columna de
   acciones queda abajo del `sticky`, con su fondo opaco encima. El botón de cobrar se ve, mide bien
   y `elementFromPoint` sobre su centro devuelve el `th` del nombre: o sea el toque cae en el nombre
   y no se puede cobrar desde el celular. Sin `sticky` la tabla scrollea entera y el botón recibe el
   toque. No se esconde ninguna acción: se deja de pintar una columna encima de otra. */
@media (max-width: 600px) {
  .col-persona { position: static; min-width: 0; }
}
.persona-nombre { font-weight: 600; }
.persona-dato { font-size: 12px; color: var(--tinta-suave); }
.persona-falta { font-size: 12px; color: var(--rojo); }

.celda { width: 100%; text-align: left; background: var(--gris-flojo); border: 1px solid var(--borde); }
.celda .plata { font-weight: 600; display: block; }
.celda .nota { font-size: 12px; display: block; color: var(--tinta-suave); }
.celda[data-estado="paga"] { background: var(--verde-flojo); border-color: var(--verde); }
.celda[data-estado="paga"] .plata { color: var(--verde); }
.celda[data-estado="en_termino"] { background: var(--ambar-flojo); border-color: var(--ambar); }
.celda[data-estado="en_termino"] .plata { color: var(--ambar); }
.celda[data-estado="atrasada"] { background: var(--rojo-flojo); border-color: var(--rojo); }
.celda[data-estado="atrasada"] .plata { color: var(--rojo); }
.celda-vacia { color: var(--tinta-suave); font-size: 12px; }
.marca-parcial { font-size: 11px; font-weight: 700; color: var(--azul); display: block; }

.arqueo {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0;
}
.arqueo div {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 10px 12px; min-width: 130px; flex: 1 1 130px;
}
.arqueo dt, .arqueo .rot { font-size: 12px; color: var(--tinta-suave); display: block; }
.arqueo .val { font-size: 18px; font-weight: 700; }
.fuente { font-size: 12px; color: var(--tinta-suave); margin: 8px 0 0; }

/* ── Lista (gimnasio) ───────────────────────────────────────────────────── */
.socio-plan { font-size: 12px; color: var(--tinta-suave); }
.pill { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid; display: inline-block; }
.pill[data-estado="paga"] { color: var(--verde); border-color: var(--verde); background: var(--verde-flojo); }
.pill[data-estado="en_termino"] { color: var(--ambar); border-color: var(--ambar); background: var(--ambar-flojo); }
.pill[data-estado="atrasada"] { color: var(--rojo); border-color: var(--rojo); background: var(--rojo-flojo); }
.pill[data-estado="sin_emitir"] { color: var(--tinta-suave); border-color: var(--borde); background: var(--gris-flojo); }
.pill-baja { color: var(--rojo); border-color: var(--rojo); background: var(--rojo-flojo); }
.motivo { font-size: 12px; color: var(--tinta-suave); }
.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(9, 12, 18, .55); display: grid; place-items: center; padding: 16px; z-index: 10; }
.modal-caja {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px; width: 100%; max-width: 460px;
  max-height: 90dvh; overflow-y: auto;
}
.modal-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.monto { display: flex; align-items: center; gap: 8px; }
.monto .signo { font-size: 18px; color: var(--tinta-suave); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chips button { font-size: 13px; padding: 5px 10px; background: var(--gris-flojo); border-color: var(--borde); color: var(--tinta); }
.obligaciones { background: var(--gris-flojo); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.obligaciones ul { margin: 6px 0 0; padding-left: 18px; }
.obligaciones li { margin: 2px 0; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: 999px;
  font-size: 14px; z-index: 20; max-width: 92vw; text-align: center;
}
.toast[data-tipo="mal"] { background: var(--rojo); color: #fff; }

@media (max-width: 560px) {
  .barra { padding: 10px 12px; }
  main { padding: 12px 12px 40px; }
  .fila-filtros select, .fila-filtros input { min-width: 0; flex: 1 1 140px; }
}