/* Canchas: el mismo molde que Pater. Menú a la izquierda con el color del lugar, fondo crema,
   tarjetas blancas con aire, un número grande por tarjeta y lo demás en letra común.
   Los títulos y los números grandes van con la letra del club, la misma del portal de las familias
   (base.html la define con el tema). Los colores fuertes son sólo para el estado (pagó, debe, no vino)
   y siempre van con la palabra. */
@font-face { font-family: 'Barlow'; src: url('/estatico/fuentes/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/estatico/fuentes/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/estatico/fuentes/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/estatico/fuentes/barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --marca: #1F5A3A; --marca-osc: #17442C; --marca-suave: #E4EFE7;
  --tinta: #2B2321; --tinta-2: #4A403C; --tinta-3: #7A6E69; --borde: #E8DFD6; --borde-2: #EFE8E1;
  --fondo: #F4F1EC; --panel: #fff; --verde: #2E7D4F; --verde-fondo: #E3F1E8; --rojo: #A3221F; --rojo-fondo: #F8E2E0;
  --amarillo-fondo: #FBF0DC; --amarillo-borde: #B7791F; --azul: #2F5DA8; --azul-fondo: #E6EEF9; --gris-fondo: #F1ECE6;
  --barra: #2E7D4F; --gasto: #A8573E;
  --f: 'Barlow', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-num: 'Barlow', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --titulo: 'Barlow', system-ui, sans-serif; --titulo-may: none; --titulo-esp: 0; --titulo-peso: 700;
  --sombra: 0 1px 2px rgba(29, 27, 25, .05), 0 13px 34px -21px rgba(29, 27, 25, .28);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f); font-size: 17px; line-height: 1.45; background: var(--fondo); color: var(--tinta); min-height: 100vh; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--marca); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; }
h1 { font-size: 30px; } h2 { font-size: 21px; font-weight: 700; } h3 { font-size: 17px; }
h1, .numero-grande, .rp-n, .menu-nombre { font-family: var(--titulo); text-transform: var(--titulo-may); letter-spacing: var(--titulo-esp); font-weight: var(--titulo-peso); }
h1 { font-size: 40px; line-height: 1; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.der { text-align: right; }
.chico { font-size: 15px; }
.suave { color: var(--tinta-3); }
.oculto { display: none !important; }
.bien { color: var(--verde); } .mal { color: var(--rojo); } .igual { color: var(--tinta-3); }
.nowrap { white-space: nowrap; }

/* ───────── Menú de la izquierda ───────── */
body.con-menu { padding-left: 250px; }
.menu { position: fixed; inset: 0 auto 0 0; width: 250px; color: #fff; display: flex; flex-direction: column; padding: 26px 16px 16px; z-index: 50;
  background: linear-gradient(160deg, var(--marca) 0%, var(--marca-osc) 100%); isolation: isolate; }
.menu::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none;
  background: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 21px); }
.menu-marca { display: block; text-decoration: none; color: #fff; text-align: center; padding: 6px 4px 26px; }
.menu-logo { display: block; width: 89px; height: 89px; margin: 0 auto 13px; border-radius: 50%; background: #fff; object-fit: contain; padding: 4px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 8px 21px -8px rgba(0, 0, 0, .5); }
.menu-nombre { display: block; font-size: 26px; line-height: 1.02; }
.menu-sub { display: block; font-size: 15px; opacity: .8; margin-top: 4px; }
.menu-nav { display: flex; flex-direction: column; gap: 6px; }
.menu-nav a { display: flex; align-items: center; gap: 13px; color: #fff; text-decoration: none; font-size: 18px; font-weight: 600; padding: 11px 14px;
  border-radius: 13px; transition: background .15s; }
.menu-nav a svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.menu-nav a:hover { background: rgba(255, 255, 255, .1); }
.menu-nav a.on { background: #fff; color: var(--marca-osc); box-shadow: 0 8px 21px -13px rgba(0, 0, 0, .6); }
.menu-nav a.on svg { opacity: 1; }
.menu-pie { margin: auto 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; }
.menu-quien { font-size: 15px; opacity: .85; }
.menu-salir { background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff; border-radius: 8px; padding: 5px 12px; font-size: 15px; }
.menu-inexa { background: #fff; color: #66727F; border: 0; border-radius: 4px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; text-align: left; cursor: pointer; }
.menu-inexa img { display: block; flex: none; }
.menu-avisar { margin: auto 6px 12px; align-self: flex-start; }   /* «Avisar un problema», con el look de «Salir» */
.menu-avisar + .menu-pie { margin-top: 0; }
.acerca p { margin: 6px 0; }
.acerca-logo { display: block; margin: 0 0 14px; }
.menu-cuenta { display: none; }
.cuenta { display: grid; gap: 10px; } .cuenta form .btn { width: 100%; }
/* En el celular: una barra de una línea (escudo, nombre y la cuenta) y las secciones en una tira que se
   desliza de costado, como las pestañas de una app. Nada se apila en dos renglones. */
@media (max-width: 900px) {
  body.con-menu { padding-left: 0; }
  .menu { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 8px 12px 0; }
  .menu-marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; text-align: left; }
  .menu-logo { width: 38px; height: 38px; margin: 0; padding: 2px; flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16); }
  .menu-nombre { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-sub, .menu-inexa, .menu-avisar, .menu-pie { display: none; }
  .menu-cuenta { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: none;
    border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-size: 16px; font-weight: 700; }
  .menu-nav { position: relative; order: 3; flex-basis: 100%; flex-direction: row; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none;
    margin: 6px -12px 0; padding: 0 8px 8px; -webkit-overflow-scrolling: touch; }
  .menu-nav::-webkit-scrollbar { display: none; }
  .menu-nav a { padding: 7px 13px; font-size: 16px; white-space: nowrap; flex: none; gap: 8px; border-radius: 99px; }
  .menu-nav a svg { width: 18px; height: 18px; }
}

/* ───────── Estructura ───────── */
.contenido { padding: 24px 32px 40px; }
@media (max-width: 900px) { .contenido { padding: 16px 16px 40px; } }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecera p { margin: 4px 0 0; color: var(--tinta-3); font-size: 16px; }
.cabecera-der { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tarjeta { background: var(--panel); border: 0; border-radius: 21px; padding: 26px; min-width: 0; box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 22px; }
.tarjeta > h2, .tarjeta-cab h2 { margin-bottom: 14px; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tarjeta-cab p { margin: -6px 0 12px; color: var(--tinta-3); }
.grilla-2 { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1000px) { .grilla-2 { grid-template-columns: 1fr 1fr; } }
.grilla-2 > .tarjeta + .tarjeta { margin-top: 0; }
.bloque { margin-top: 22px; }
.vacio { text-align: center; padding: 22px 10px; color: var(--tinta-3); }
.rotulo { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 8px; }
.numero-grande { font-size: 55px; color: var(--marca-osc); line-height: 1; margin: 8px 0 6px; }
.banda { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-radius: 13px; padding: 8px 16px; margin-bottom: 21px;
  background: var(--amarillo-fondo); color: #6b4e00; }
.estado-caja { background: var(--verde-fondo); color: var(--verde); font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 99px; }
.estado-caja.cerrada { background: var(--gris-fondo); color: var(--tinta-3); }

/* ───────── Botones y formularios ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--marca); background: var(--panel); color: var(--marca-osc);
  font-weight: 700; padding: 0 21px; border-radius: 13px; min-height: 48px; text-decoration: none; font-size: 17px; text-align: center; }
.btn:hover { background: var(--marca-suave); }
.btn-primario { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca, #fff); box-shadow: 0 8px 21px -13px var(--marca-osc); }
.btn-primario:hover { background: var(--marca-osc); }
.btn-borde.on { background: var(--marca-suave); }
.btn-peligro { border-color: var(--rojo); color: var(--rojo); }
.btn-chico { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn-ancho { width: 100%; }
.btn-texto { background: none; border: 0; padding: 8px 4px; font-weight: 600; color: var(--marca); font-size: 16px; }
.btn-texto:hover { text-decoration: underline; }
.btn-texto.mal { color: var(--rojo); }
.barras-gasto .pista i { background: var(--gasto); }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label, .etiqueta { font-size: 16px; font-weight: 600; }
.campo small { font-size: 14px; color: var(--tinta-3); font-weight: 400; }
input, select, textarea { font: inherit; font-size: 17px; color: var(--tinta); background: #fff; border: 1.5px solid #CFC5BB; border-radius: 10px; padding: 9px 12px; min-height: 46px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--marca-suave); outline-offset: 0; border-color: var(--marca); }
input[type=color] { padding: 3px; width: 70px; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; accent-color: var(--marca); }
.fila-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.form-corto { max-width: 420px; margin-top: 12px; }
.check-fila { display: flex; gap: 12px; align-items: center; min-height: 46px; font-weight: 600; }
.opciones { display: grid; gap: 8px; }
.opcion { display: flex; gap: 12px; align-items: center; border: 1.5px solid #CFC5BB; border-radius: 10px; padding: 10px 14px; min-height: 52px; font-weight: 600; background: #fff; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
details.mas > summary { cursor: pointer; font-weight: 600; padding: 10px 0; color: var(--marca); }

/* ───────── Tablas ───────── */
.tabla-env, .tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabla th { font-size: 14px; font-weight: 600; color: var(--tinta-2); text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--borde-2); vertical-align: middle; }
.tabla td.num, .tabla th.num { text-align: right; }
.tabla td:last-child, .tabla th:last-child { padding-right: 0; }
.tabla small { color: var(--tinta-3); font-size: 14px; display: block; }
.tabla-suave tr:nth-child(even) td { background: #FCFAF7; }
.cab-fija th { position: sticky; top: 0; background: #fff; z-index: 1; }

/* ───────── Avisos (abajo, con "Deshacer") ───────── */
#mensajes { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; width: max-content;
  max-width: calc(100vw - 24px); pointer-events: none; }
.aviso { pointer-events: auto; background: #2B2321; color: #fff; border-radius: 12px; padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 14px;
  font-size: 17px; min-height: 54px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.aviso.error { background: var(--rojo); }
.aviso button { background: #fff; color: #111; border: 0; padding: 0 16px; min-height: 42px; border-radius: 8px; font-weight: 600; white-space: nowrap; }

/* ───────── Ventanas (fichas, retiro, cierre) ───────── */
dialog.hoja { border: 0; padding: 0; background: var(--fondo); color: var(--tinta); width: min(620px, 96vw); max-width: 96vw; max-height: 94vh; overflow: auto; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
dialog.hoja-chica { width: min(520px, 96vw); }
dialog.hoja::backdrop { background: rgba(43, 35, 33, .45); }
@media (max-width: 640px) { dialog.hoja { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; margin: 0; border-radius: 0; } }
.hoja-in { position: relative; padding: 24px 30px 22px; }
.hoja-cab { padding-right: 110px; margin-bottom: 14px; }
dialog.hoja-chica .hoja-cab { padding-right: 0; }
.hoja-cab h2 { font-size: 26px; }
.hoja-sub { margin: 6px 0 0; font-size: 16px; color: var(--tinta-3); }
.hoja-pie { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 16px; }
.cerrar-x { position: absolute; top: 22px; right: 22px; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--borde); border-radius: 10px; background: #fff; font-weight: 600; font-size: 16px; }
.cuentas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.cuentas div { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; }
.cuentas span { display: block; font-size: 14px; color: var(--tinta-3); }
.cuentas b { font-size: 24px; font-weight: 600; white-space: nowrap; }
.cuentas .debe-c { background: var(--rojo-fondo); border-color: var(--rojo-fondo); }
.cuentas .debe-c b { color: var(--rojo); }
.botones { display: grid; gap: 10px; margin-top: 12px; }
.botones form { display: contents; }
.boton { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 58px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--marca);
  background: #fff; color: var(--marca); font-weight: 600; font-size: 19px; text-decoration: none; width: 100%; line-height: 1.2; }
.boton:hover { background: var(--marca-suave); }
.boton.verde { background: var(--marca); border-color: var(--marca); color: #fff; }
.boton.verde:hover { background: var(--marca-osc); }
.boton.rojo { border-color: var(--rojo); color: var(--rojo); }
.boton.wa { border-color: #128c4a; color: #0b6b37; }
.botones-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.separa { border: 0; border-top: 1px solid var(--borde); margin: 18px 0 6px; }
.separa-chico { margin-top: 10px; }
.nota-hoja { font-size: 16px; color: var(--tinta-2); margin: 8px 0; }
.historial-cli { font-size: 16px; background: #fff; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.historial-cli.falta { background: var(--rojo-fondo); }
.cobros-lista h3, .hoja h3 { margin: 18px 0 6px; }
.cobro-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borde); flex-wrap: wrap; font-size: 16px; }
.cobro-fila.anulado b { text-decoration: line-through; }
.cobro-fila.anulado { color: #777; }
.anular { flex-basis: 100%; }
.anular summary { color: var(--rojo); font-weight: 600; padding: 6px 0; cursor: pointer; }
.anular form { display: flex; gap: 8px; flex-wrap: wrap; }
.anular input { flex: 1; min-width: 180px; }
.cambios-mini { font-size: 15px; color: var(--tinta-2); padding-left: 20px; }

/* ═══════════════ TURNOS: la libreta entera en una pantalla ═══════════════ */
.dia-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dia-nav .flecha { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; text-decoration: none; color: var(--tinta); font-size: 14px; }
.dia-nav .flecha:hover { background: var(--gris-fondo); }
.dia-elegir { position: relative; margin: 0; }
.dia-nombre { display: block; min-width: 230px; text-align: center; font-size: 20px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 10px; }
.dia-nombre:hover { background: var(--gris-fondo); }
.dia-elegir input[type=date] { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
@media (min-width: 901px) {
  body.pantalla-fija { height: 100vh; overflow: hidden; }
  body.pantalla-fija .contenido { height: 100vh; display: flex; flex-direction: column; padding-bottom: 20px; }
  body.pantalla-fija #libreta { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.pantalla-fija .libreta-env { flex: 1; min-height: 0; overflow: auto; }
  /* Caja y Gastos: la última tarjeta llena lo que sobra de la pantalla. En una pantalla chica no se
     achica: muestra sus filas enteras y la página baja un poco. */
  body.pantalla-llena .contenido { min-height: 100vh; display: flex; flex-direction: column; }
  body.pantalla-llena .llenar { flex: 1; display: flex; }
  body.pantalla-llena .llenar > .tarjeta { flex: 1; }
  /* Todas las horas del mismo alto, repartiendo la pantalla: lo que queda arriba (título, nombres
     de las canchas, márgenes) son unos 196 px. Si no entra, la libreta se desplaza adentro. */
  body.pantalla-fija .libreta tbody th, body.pantalla-fija .libreta tbody td { height: max(32px, calc((100vh - 196px) / var(--filas))); }
}
.libreta-env { background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow-x: auto; contain: paint; /* en el celular la tabla ancha no agranda la página */ }
.libreta { border-collapse: separate; border-spacing: 0; width: 100%; min-width: calc(64px + var(--cols) * 140px); table-layout: fixed; }
.libreta th, .libreta td { border-right: 1px solid var(--borde-2); border-bottom: 1px solid var(--borde-2); }
.libreta tr > :last-child { border-right: 0; }
.libreta tbody tr:last-child > * { border-bottom: 0; }
.libreta thead th { position: sticky; top: 0; z-index: 3; background: #fff; font-size: 16px; font-weight: 600; padding: 7px 6px; border-bottom: 1px solid var(--borde); }
.libreta thead th small { display: block; font-size: 13px; font-weight: 400; color: var(--tinta-3); }
.libreta .col-hora { width: 64px; }
.libreta tbody th { font-size: 15px; font-weight: 600; color: var(--tinta-3); padding: 4px; text-align: center; vertical-align: top; font-variant-numeric: tabular-nums; }
.libreta tbody tr.ahora th { color: #fff; background: var(--marca); }
.libreta td { padding: 2px; vertical-align: top; height: 1px; /* deja que el casillero llene la celda */ }
.casillero { display: flex; flex-direction: column; justify-content: center; gap: 1px; width: 100%; height: 100%; min-height: 0; padding: 1px 10px; border: 0; border-radius: 7px;
  background: transparent; text-align: left; text-decoration: none; color: var(--tinta); }
.casillero .quien { font-size: 15px; font-weight: 600; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casillero .estado { font-size: 13px; font-weight: 600; line-height: 1.1; }
.casillero .estado small { font-weight: 400; color: var(--tinta-3); }
.casillero .detalle { font-size: 12px; color: var(--tinta-3); }
.casillero.libre { color: transparent; justify-content: center; align-items: center; font-size: 18px; line-height: 1; }
.casillero.libre:hover { background: var(--marca-suave); color: var(--marca); }
td.nada { background: #FBF9F6; }
td.e-pago .casillero { background: var(--verde-fondo); } .e-pago .estado { color: var(--verde); }
td.e-debe .casillero { background: var(--rojo-fondo); } .e-debe .estado { color: var(--rojo); }
td.e-novino .casillero { background: #EEEAE6; } .e-novino .quien { text-decoration: line-through; } .e-novino .estado { color: var(--rojo); }
td.e-sena .casillero { background: var(--amarillo-fondo); } .e-sena .estado { color: #6b4e00; }
td.e-reservado .casillero { background: var(--azul-fondo); } .e-reservado .estado { color: var(--azul); }
@media (max-width: 900px) { .dia-nombre { min-width: 0; font-size: 17px; } .casillero { min-height: 56px; } }

/* ═══════════════ CAJA ═══════════════ */
.cuenta { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; font-size: 17px; margin-top: 18px; color: var(--tinta-2); }
.cuenta.chico { font-size: 15px; margin-top: 6px; gap: 6px 14px; }
.cuenta .total { font-weight: 600; color: var(--tinta); padding-top: 12px; }
.acciones-caja { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.acciones-caja .btn-primario { margin-left: auto; }
.billetes { display: grid; gap: 6px; }
.billete { display: grid; grid-template-columns: 1fr 120px 100px; gap: 12px; align-items: center; font-size: 16px; }
.billete input { text-align: right; min-height: 36px; padding: 3px 10px; -moz-appearance: textfield; }
.billete input::-webkit-inner-spin-button, .billete input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.billete .sub { text-align: right; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.resultado-conteo { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 12px 18px; margin: 14px 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; }
.resultado-conteo .chico { grid-column: 1 / -1; }
.contado { font-size: 20px; font-weight: 600; }
.dif { font-size: 20px; font-weight: 600; }
.dif:empty { display: none; }
.dif-ok { color: var(--verde); } .dif-mal { color: var(--rojo); } .dif-vacio { font-size: 15px; color: var(--tinta-3); }
.acciones { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.barras { display: grid; gap: 12px; }
.barra-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 16px; }
.barra-fila .pista { grid-column: 1 / -1; height: 10px; background: var(--borde-2); border-radius: 99px; overflow: hidden; }
.barra-fila .pista i { display: block; height: 100%; background: var(--barra); border-radius: 99px; }
.barra-fila .pista i.gasto { background: var(--gasto); }

/* login */
.entrar-env { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrar-caja { width: min(420px, 100%); background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 30px 28px; }
.entrar-caja h1 { text-align: center; margin: 4px 0 6px; color: var(--marca); }
.entrar-caja p { text-align: center; margin: 0 0 18px; color: var(--tinta-3); }
.error { background: var(--rojo-fondo); color: var(--rojo); border-radius: 10px; padding: 12px; margin-bottom: 14px; font-weight: 600; }
.ayuda-demo { margin-top: 16px; font-size: 15px; background: var(--gris-fondo); border-radius: 10px; padding: 12px; }

/* ajustes */
.dias-check { display: flex; gap: 6px; flex-wrap: wrap; }
.dias-check label { display: flex; align-items: center; gap: 8px; font-size: 16px; border: 1.5px solid #CFC5BB; border-radius: 10px; padding: 0 12px; min-height: 44px; background: #fff; }
code { font-size: 14px; background: var(--gris-fondo); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.cancha-fila { display: grid; gap: 10px; align-items: end; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borde-2); padding-bottom: 14px; margin-bottom: 14px; }
.cancha-fila .campo { margin: 0; }
.cancha-fila .cf-nombre { grid-column: 1 / -1; }
@media (min-width: 760px) { .cancha-fila { grid-template-columns: 2fr 1fr 1fr 80px auto auto; } .cancha-fila .cf-nombre { grid-column: auto; } }
.tarifa-editar summary { color: var(--marca); font-weight: 600; cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.tarifa-editar[open] { background: var(--fondo); border-radius: 10px; padding: 0 10px 10px; }

/* semana */
.semana { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: 3px; background: #fff; border: 2px solid var(--borde-2); border-radius: 12px; padding: 10px; }

.du-reclamar { display: inline-flex; align-items: center; padding: 0 12px; min-height: 52px; border-radius: 10px; border: 2px solid #128c4a; color: #0b6b37; font-weight: 700; text-decoration: none; white-space: nowrap; background: #fff; }

@media (max-width: 640px) {

  .cuentas b { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .barra, .pie-plata, #mensajes, .acciones-dia, .dias { display: none !important; } }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.historial-cli b { font-weight: 700; }

/* ═══════════════ REPORTES (una página) ═══════════════ */
.rp-periodos { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-periodos .btn.on { background: var(--marca); color: #fff; }
.rp-numeros { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rp-numeros .tarjeta + .tarjeta { margin-top: 0; }
.rp-et { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.rp-n { display: block; font-size: 42px; line-height: 1; margin: 8px 0 6px; }
.rp-n.mal { color: var(--rojo); }
.hero.rp-quedo { display: block; }                              /* «Quedó», lo que importa, con el color del club */
.rp-quedo .rp-et { color: rgba(255, 255, 255, .7); }
.rp-quedo .rp-n.mal { color: #FF8F7E; }
.rp-numeros .rp-quedo small { color: rgba(255, 255, 255, .8); }
.rp-numeros small { color: var(--tinta-3); font-size: 14px; }
.rp-barras { display: grid; gap: 12px; }
.rp-seccion { margin: 40px 0 16px; font-size: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.rp-seccion small { font-size: 15px; font-weight: 400; }
.rp-sub { font-size: 17px; margin: 26px 0 8px; }
.rp-peso { display: block; height: 5px; max-width: 160px; margin-top: 6px; background: var(--borde-2); border-radius: 99px; overflow: hidden; }
.rp-peso i { display: block; height: 100%; background: var(--barra); }
.rp-mes small { display: inline; font-weight: 400; font-size: 12px; }
.rp-mes td, .rp-mes th { white-space: nowrap; }
.rp-total td { border-bottom: 0; border-top: 1px solid var(--borde); }
.rp-cuotas-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-cuotas-cab h2 { margin: 0; }
.rp-cuotas-grilla { display: grid; gap: 26px; margin-top: 16px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .rp-cuotas-grilla { grid-template-columns: 1fr 1fr 1fr; } }
.rp-cuotas-grilla > * { min-width: 0; }
.rp-cuotas-grilla .rp-et { margin-bottom: 10px; }
.rp-cuotas-txt { margin: 10px 0 0; font-size: 15px; }
.rp-act .barra-fila small { font-size: 13px; }
.rp-deben li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borde-2); font-size: 15px; }
.rp-deben a { color: var(--tinta); font-weight: 600; }
.columnas { display: flex; align-items: flex-end; gap: 6px; height: 210px; padding-top: 6px; }
.columnas .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.columnas .col i { display: block; width: 100%; max-width: 34px; background: var(--barra); border-radius: 4px 4px 0 0; min-height: 2px; }
.columnas .col-n { font-size: 12px; color: var(--tinta-3); }
.columnas .col-h { font-size: 13px; color: var(--tinta-2); }

/* ═══════════════ GASTOS ═══════════════ */
.gastos-grilla { display: grid; gap: 22px; grid-template-columns: 1fr; }
.gastos-grilla > *, .gastos-der .llenar > .tarjeta { min-width: 0; }   /* en el celular la tabla se desliza adentro, no agranda la página */
.gastos-der { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.gastos-der > .tarjeta { margin: 0; }
@media (min-width: 1000px) { .gastos-grilla { grid-template-columns: 360px 1fr; } }
@media (min-width: 901px) { body.pantalla-llena .gastos-grilla { flex: 1; } }
.gastos-der .llenar .tabla-env { max-height: max(300px, calc(100vh - 590px)); overflow: auto; }
.barras-chicas { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; margin-top: 16px; font-size: 15px; }
.barras-chicas .pista { height: 10px; background: var(--borde-2); border-radius: 99px; overflow: hidden; }
.barras-chicas .pista i { display: block; height: 100%; background: var(--gasto); border-radius: 99px; }

/* ═══════════════ CONFIGURACIÓN Y SISTEMA: pestañas ═══════════════ */
.cf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.cf-tabs a { text-decoration: none; color: var(--tinta-2); font-weight: 600; font-size: 16px; padding: 8px 17px; border-radius: 99px; background: var(--fondo); border: 1px solid transparent; }
.cf-tabs a:hover { border-color: var(--borde); }
.cf-tabs a.on { background: var(--marca); color: #fff; border-color: var(--marca); }
.traza { white-space: pre-wrap; font-size: 13px; background: var(--gris-fondo); padding: 10px; border-radius: 8px; max-height: 360px; overflow: auto; }
/* El cartel de error de abajo no hereda el recuadro de error de la pantalla de entrada. */
#mensajes .aviso.error { background: var(--rojo); color: #fff; margin: 0; padding: 8px 8px 8px 18px; font-weight: 400; }
/* Primer arranque: la misma caja de la entrada, un poco más ancha. */
.entrar-caja.primer-arranque { width: min(480px, 100%); }
.primer-logo { display: block; margin: 0 auto 8px; border-radius: 12px; }
.primer-fila { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.primer-pie { margin: 16px 0 0 !important; }

/* Código de activación: 16 caracteres, como los de los juegos. */
.codigo-activacion { font-family: Consolas, "Cascadia Mono", monospace; font-size: 24px; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Mercado Pago y Cuotas: dos columnas en proporción áurea (38,2 / 61,8) ---------- */
.mp-grilla { display: grid; gap: 22px; grid-template-columns: 1fr; margin-bottom: 22px; }
@media (min-width: 1000px) { .mp-grilla { grid-template-columns: 38.2fr 61.8fr; } }
.mp-grilla > * { min-width: 0; }
.aviso-mal { border-left: 4px solid var(--rojo); margin-bottom: 22px; }
form.en-linea { display: inline-flex; gap: 8px; align-items: center; }
form.en-linea select { width: auto; }
.cuotas-resumen { display: grid; gap: 22px; grid-template-columns: 1fr; margin-bottom: 22px; }
@media (min-width: 800px) { .cuotas-resumen { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.pista-grande { height: 10px; border-radius: 5px; background: var(--linea, #e5e5e5); overflow: hidden; margin-top: 10px; }
.pista-grande i { display: block; height: 100%; background: var(--verde); }

/* Cuotas: arriba, el mes en una tarjeta con el color del club y un anillo con el porcentaje cobrado. */
.cuotas-resumen { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .cuotas-resumen { grid-template-columns: 61.8fr 38.2fr; } }
.hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; display: flex; align-items: center; gap: 26px 34px; flex-wrap: wrap;
  background: linear-gradient(150deg, var(--marca) 0%, var(--marca-osc) 100%); box-shadow: 0 21px 44px -26px var(--marca-osc); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; background: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 21px); }
.hero .rotulo { color: rgba(255, 255, 255, .7); }
.hero .numero-grande { color: #fff; font-size: clamp(44px, 12vw, 68px); }
.cuotas-resumen > .tarjeta + .tarjeta { margin-top: 0; }
.hero-txt { flex: 1 1 260px; min-width: 0; }
.hero-txt p { margin: 0; color: rgba(255, 255, 255, .8); }
.hero-txt b { color: #fff; }
.anillo { --p: 0; position: relative; flex: none; width: 144px; height: 144px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0); }
.anillo::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--marca-osc); }
.anillo > * { position: relative; }
.anillo b { display: block; font: var(--titulo-peso) 42px/1 var(--titulo); letter-spacing: var(--titulo-esp); }
.anillo small { display: block; font-size: 13px; opacity: .75; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
@media (max-width: 600px) { .anillo { width: 110px; height: 110px; } .anillo::before { inset: 11px; } .anillo b { font-size: 32px; } .hero { gap: 21px; } }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ficha { display: inline-block; font-size: 14px; font-weight: 600; padding: 5px 13px; border-radius: 99px;
  background: rgba(255, 255, 255, .13); color: #fff; }
.ficha.sube { background: #fff; color: var(--marca-osc); }
.deben .numero-grande { color: var(--rojo); }
.deben .numero-grande small { font-size: 34px; color: var(--tinta-3); }
.reparto { display: flex; height: 13px; border-radius: 99px; overflow: hidden; background: var(--borde-2); margin: 13px 0 10px; gap: 2px; }
.reparto i { display: block; height: 100%; }
.reparto .r-bien { background: var(--verde); } .reparto .r-gracia { background: #E0B04A; } .reparto .r-mal { background: var(--rojo); }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 13px; padding: 0; list-style: none; font-size: 14px; color: var(--tinta-2); }
.leyenda li::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--c); }

/* La lista de la gente: iniciales en un círculo y el estado en una pastilla. */
.persona { display: flex; align-items: center; gap: 13px; min-width: 0; }
.persona > span { min-width: 0; }
.persona a { color: var(--tinta); text-decoration: none; }
.persona a:hover { text-decoration: underline; }
.inicial { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--marca-suave); color: var(--marca-osc); }
.inicial.mal { background: var(--rojo-fondo); color: var(--rojo); }
.pastilla { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 99px; white-space: nowrap; }
.pastilla.bien { background: var(--verde-fondo); color: var(--verde); }
.pastilla.mal { background: var(--rojo-fondo); color: var(--rojo); }
.pastilla.igual { background: #FBF0DC; color: #8A5A0B; }
.cuotas-tabla tr:hover td { background: #FCFAF7; }
.cuotas-filtro { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.cuotas-filtro input[type=search] { flex: 1 1 260px; }
.cuotas-filtro select { flex: 0 1 220px; }
.cuotas-ficha { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .cuotas-ficha { grid-template-columns: 61.8fr 38.2fr; } }
.cuotas-ficha > * { min-width: 0; }
.cuotas-act { display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1.5fr 1.5fr auto auto auto; align-items: center; }
@media (max-width: 900px) { .cuotas-act { grid-template-columns: 1fr 1fr; } }
fieldset.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }
/* En el celular, cada persona es una tarjetita: nombre y estado arriba, botones abajo. */
@media (max-width: 700px) {
  .cuotas-tabla tr:first-child { display: none; }
  .cuotas-tabla tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--linea, #e5e5e5); }
  .cuotas-tabla td { border: 0; padding: 0; }
  .cuotas-tabla td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--tinta-3); font-size: 14px; }
  .cuotas-tabla td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  .cuotas-tabla td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .cuotas-tabla td:nth-child(4):empty { display: none; }
}

/* Mercado Pago dentro de Caja: una franja que lleva al detalle (el módulo no tiene lugar propio en el menú). */
.mp-franja { display: flex; align-items: center; gap: 16px; margin-bottom: 0; text-decoration: none; color: var(--tinta); padding: 14px 22px; }
.mp-franja:hover { border-color: var(--tinta-3); }
.mp-franja > span:nth-child(2) { flex: 1; min-width: 0; }
.mp-franja small { display: block; color: var(--tinta-2); }
.mp-marca { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #00b1ea; color: #fff; font-weight: 800; font-size: 14px; flex: none; }
.mp-pide { background: var(--aviso, #fbefd9); color: var(--tinta); border-radius: 99px; padding: 6px 13px; font-weight: 600; font-size: 14px; }
.miga { margin: 0 0 4px; font-size: 14px; } .miga a { color: var(--tinta-2); text-decoration: none; }

/* Cruces entre módulos: lo que un módulo suma en la pantalla de otro. */
.cruce { border-left: 4px solid var(--verde); }
.cruce p { margin: 6px 0 0; }
.cruce-hoja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--fondo-2, #f3efe7); }
.cruce-hoja a { color: var(--tinta); text-decoration: none; border: 1px solid var(--borde); border-radius: 99px; padding: 4px 11px; background: #fff; }
.cruce-hoja a b { font-weight: 600; margin-left: 4px; }

/* Renglón con un texto y una acción a la derecha (las otras actividades de un jugador). */
.lista-limpia { list-style: none; margin: 13px 0; padding: 0; }
.renglon-accion { display: flex; justify-content: space-between; align-items: center; gap: 13px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.renglon-accion:last-child { border-bottom: 0; }
.renglon-accion form { margin: 0; }

/* ───────── Celular: tablas en renglones ─────────
   Una tabla con «tabla-apilar» deja de tener columnas en el celular: cada fila es un renglón con el primer
   dato arriba y el resto al lado, como una lista de una app. Lo que sólo sirve en la PC lleva «solo-pc». */
@media (max-width: 640px) {
  .tabla-apilar, .tabla-apilar tbody { display: block; }
  .tabla-apilar tr:has(> th), .tabla-apilar .solo-pc { display: none; }
  .tabla-apilar tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--borde-2); }
  .tabla-apilar td { display: block; padding: 0; border: 0; text-align: left; }
  .tabla-apilar td:first-child { flex-basis: 100%; }
  .tabla-apilar td.num { text-align: left; }
  .tabla-apilar td.der, .tabla-apilar td:last-child:not(:first-child) { margin-left: auto; text-align: right; }
  .tabla-apilar td.der:empty { display: none; }
  .tabla-apilar td.texto { flex-basis: 100%; margin-left: 0; text-align: left; }
  .tabla-apilar td[data-et][data-et] { margin-left: 0; text-align: left; }   /* gana sobre «la última va a la derecha» */
  .tabla-apilar td[data-et]::before { content: attr(data-et); display: block; font-size: 12px; color: var(--tinta-3); }
  .rp-negocios tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .rp-negocios td:first-child { grid-column: 1 / -1; }
  .rp-mes th:first-child, .rp-mes td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
  .tabla-apilar form.en-linea { flex-wrap: wrap; }
  .mp-franja { flex-wrap: wrap; gap: 6px 14px; padding: 14px 16px; }
  .mp-franja > :last-child:not(:nth-child(2)) { flex-basis: 100%; padding-left: 56px; }
  .cabecera-der { gap: 8px; }
  .cabecera-der .btn { padding-left: 14px; padding-right: 14px; }
}