/* Identidad del Club: grafito oscuro, verde del logotipo, cuero y verde limón de la pelota.
   Todos los colores viven aquí: para ajustar la paleta autorizada basta cambiar estas variables. */
:root {
  /* Paleta tomada del logotipo oficial: bosque, salvia, crema y bronce */
  --fondo: #0d1712;
  --panel: #14231c;
  --panel-2: #1c2f25;
  --borde: #2f4639;
  --texto: #efeadd;
  --tenue: #a6b5a8;
  --verde: #3b6f47;
  --verde-oscuro: #1b3a29;
  --verde-claro: #6c9f6b;
  --crema: #ebe6d9;
  --bosque: #183020;
  --cuero: #7a6040;
  --bronce: #c5a26d;
  --lima: #c3d84a;
  --alerta: #d9a23b;
  --peligro: #c8504a;
  --info: #5b86a6;
  --morado: #8a6fc0;
  --ocupada: #d1803f; /* cobre: la cancha está ocupada (distinto del verde de "libre") */
  --radio: 10px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
a { color: var(--bronce); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
main { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* Barra superior: crema como el logotipo, con filete bronce */
.barra {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .4rem 1rem; background: var(--crema); color: var(--bosque);
  border-bottom: 3px solid var(--cuero);
}
.marca { display: flex; align-items: center; gap: .65rem; color: var(--cuero); font-weight: 650; line-height: 1.1; }
.marca:hover { text-decoration: none; }
.marca img { height: 46px; width: auto; display: block; }
.marca span { font-size: 1.02rem; letter-spacing: .01em; }
.barra nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.barra nav a { padding: .45rem .65rem; border-radius: 8px; color: var(--bosque); font-weight: 500; }
.barra nav a:hover { background: rgba(24, 48, 32, .1); text-decoration: none; }
.barra nav a.activa { background: var(--bosque); color: var(--crema); text-decoration: none; }
.usuario { display: flex; align-items: center; gap: .75rem; color: #4d5b4f; font-size: .9rem; }
.usuario form { margin: 0; }
.barra button { background: transparent; color: var(--bosque); border-color: var(--cuero); }
.barra button:hover { background: var(--bosque); color: var(--crema); border-color: var(--bosque); }

/* Botones y campos */
.boton, button {
  display: inline-block; cursor: pointer; border: 1px solid var(--borde); background: var(--panel-2);
  color: var(--texto); padding: .5rem .9rem; border-radius: 8px; font: inherit;
}
.boton:hover, button:hover { border-color: var(--verde-claro); text-decoration: none; }
.boton.primario, button.primario { background: var(--verde); border-color: var(--verde-claro); font-weight: 600; }
.boton.primario:hover, button.primario:hover { background: var(--verde-claro); }
.boton.peligro, button.peligro { border-color: var(--peligro); color: #ffb5b0; }
.boton.pequeno { padding: .25rem .6rem; font-size: .85rem; }
input, select, textarea {
  background: var(--fondo); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 8px; padding: .5rem .6rem; font: inherit; max-width: 100%;
}
input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--lima); outline-offset: 1px;
}
label { display: block; color: var(--tenue); font-size: .85rem; margin-bottom: .2rem; }
.campo { margin-bottom: .9rem; }
.campo small { color: var(--tenue); }
.errores, .aviso.error { color: #ffb5b0; }

.tarjeta-panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem;
}
.rejilla-paneles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Avisos */
.avisos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.aviso { padding: .65rem .9rem; border-radius: 8px; border: 1px solid var(--borde); background: var(--panel-2); }
.aviso.success { border-color: var(--verde-claro); }
.aviso.error { border-color: var(--peligro); }
.aviso.warning { border-color: var(--alerta); }

/* Agenda: navegación y filtros */
.agenda-cabecera { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-bottom: .75rem; }
.pestanas { display: flex; gap: .25rem; }
.pestanas a { padding: .4rem .9rem; border: 1px solid var(--borde); border-radius: 8px; color: var(--texto); }
.pestanas a.activa { background: var(--verde); border-color: var(--verde-claro); }
.navegacion { display: flex; gap: .4rem; align-items: center; }
.navegacion .titulo { font-weight: 600; min-width: 14rem; text-align: center; }
.navegacion .titulo::first-letter { text-transform: uppercase; }
.filtros {
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .75rem; margin-bottom: .75rem; align-items: end;
}
.filtros .campo { margin: 0; }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .5rem 0 1rem; font-size: .8rem; color: var(--tenue); }
.leyenda span::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: 3px; margin-right: .35em; vertical-align: -1px; background: var(--c, var(--verde)); border: 1px solid transparent; }

/* Estados de reserva (el color siempre va acompañado del nombre del estado) */
.estado-reservada { --c: var(--ocupada); }
.estado-jugada { --c: var(--info); }
.estado-cancelada_a_tiempo { --c: #566559; }
.estado-cancelada_tarde { --c: #e0b83c; }
.estado-no_show { --c: var(--peligro); }
.estado-liberada { --c: var(--morado); }
.estado-pendiente_pago { --c: var(--lima); }
.estado-expirada { --c: #6b7a6e; }

/* Cuadrículas */
.cuadricula-contenedor { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); }
table.cuadricula { border-collapse: collapse; width: 100%; min-width: 640px; table-layout: fixed; }
.cuadricula th, .cuadricula td { border: 1px solid var(--borde); vertical-align: top; padding: .3rem; }
.cuadricula thead th { background: var(--panel-2); font-weight: 600; text-align: center; padding: .55rem .3rem; }
.cuadricula thead th small { display: block; color: var(--tenue); font-weight: 400; text-transform: capitalize; }
.cuadricula th.hora { width: 4.6rem; background: var(--panel-2); color: var(--tenue); text-align: center; font-weight: 500; }
.cuadricula td { height: 5.4rem; }
.cuadricula td.pasada { background: rgba(235, 230, 217, .03); }
.cuadricula th.hoy { box-shadow: inset 0 -3px 0 var(--lima); }
.reserva {
  display: block; margin-bottom: .25rem; padding: .3rem .45rem; border-radius: 6px; font-size: .8rem;
  background: color-mix(in srgb, var(--c) 28%, var(--panel)); border-left: 6px solid var(--c);
  color: var(--texto); overflow: hidden;
}
a.reserva:hover { text-decoration: none; filter: brightness(1.2); }
.reserva strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reserva .etiqueta { font-size: .72rem; color: color-mix(in srgb, var(--c) 55%, white); text-transform: uppercase; letter-spacing: .03em; }
.reserva .hora { color: var(--tenue); font-size: .72rem; }
.reserva.propia { outline: 1px solid var(--lima); }
.reserva.atenuada { opacity: .3; }
.reserva.inactiva { background: transparent; border-left-style: dashed; opacity: .8; }
.reserva.estado-cancelada_a_tiempo strong, .reserva.estado-liberada strong, .reserva.estado-expirada strong { text-decoration: line-through; }
.reserva.estado-pendiente_pago { border-left-style: dashed; }
.libre-accion {
  display: block; text-align: center; padding: .35rem; border: 1px dashed var(--verde-claro); border-radius: 6px;
  color: var(--verde-claro); font-size: .8rem;
}
.libre-accion:hover { background: var(--verde-oscuro); text-decoration: none; color: var(--texto); }
.libre-pasado { display: block; text-align: center; color: #5d6e61; font-size: .75rem; padding: .35rem; }

/* Mes */
table.mes th { text-align: center; padding: .4rem; background: var(--panel-2); text-transform: capitalize; }
table.mes td { height: auto; min-height: 6.5rem; padding: .35rem; }
table.mes td.fuera { opacity: .35; }
table.mes td.hoy { box-shadow: inset 0 0 0 2px var(--lima); }
.dia-num { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .25rem; }
.dia-num .coincide { font-size: .72rem; color: var(--lima); }
.ocupacion { font-size: .72rem; color: var(--tenue); margin-bottom: .2rem; }
.ocupacion .barra-oc { height: 5px; background: var(--fondo); border-radius: 3px; overflow: hidden; margin-top: 2px; }
.ocupacion .barra-oc i { display: block; height: 100%; background: var(--verde-claro); }
.ocupacion .barra-oc i.alta { background: var(--alerta); }
.ocupacion .barra-oc i.llena { background: var(--peligro); }
.actualizado { color: var(--tenue); font-size: .8rem; margin-top: .5rem; }

/* Detalle y formularios */
.dos-columnas { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 3fr 2fr; } }
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.datos dt { color: var(--tenue); }
dl.datos dd { margin: 0; }
.insignia { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem;
  background: color-mix(in srgb, var(--c) 30%, var(--panel)); border: 1px solid var(--c); }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.acciones form { margin: 0; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--borde); }
.tabla th { color: var(--tenue); font-weight: 500; font-size: .85rem; }
.tabla td.num, .tabla th.num { text-align: right; }
.reglas { border-left: 3px solid var(--alerta); padding-left: .75rem; color: var(--tenue); }
.destacado { font-size: 1.6rem; font-weight: 700; }
.vacio { color: var(--tenue); padding: 1rem; text-align: center; }

/* Acceso (login y registro) */
body.acceso {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem;
  background: linear-gradient(rgba(9, 20, 14, .72), rgba(9, 20, 14, .88)), url("fondo-login.jpg") center / cover fixed;
}
body.acceso main { width: 100%; padding: 0; margin: 0; }
.caja-acceso { margin-inline: auto; width: min(440px, 100%); background: rgba(16, 30, 23, .95); border: 1px solid var(--borde); border-top: 3px solid var(--bronce); border-radius: 14px; padding: 1.4rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.caja-acceso .logo { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); display: block; width: min(340px, 90%); margin: 0 auto 1.1rem; border-radius: 10px; object-fit: contain; }
.caja-acceso .boton, .caja-acceso button { width: 100%; text-align: center; }
.caja-acceso .enlaces { display: grid; gap: .4rem; margin-top: 1rem; text-align: center; font-size: .9rem; }

@media (max-width: 640px) {
  .navegacion .titulo { min-width: 0; flex: 1; }
  .marca img { height: 42px; } .marca span { font-size: .9rem; }
}

/* --- Socios, registro y seguimiento --- */
.caja-acceso.ancha { width: min(720px, 100%); }
.enlaces-acceso { text-align: center; color: var(--tenue); font-size: .9rem; margin: 1rem 0 0; }
.planes { display: grid; gap: .6rem; margin-bottom: 1rem; }
.plan-opcion { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.plan-opcion:has(input:checked) { border-color: var(--verde-claro); background: color-mix(in srgb, var(--verde) 22%, var(--panel-2)); }
.plan-cuerpo { display: grid; gap: .15rem; flex: 1; }
.plan-cuerpo .precio { font-size: 1.15rem; font-weight: 700; }
.plan-cuerpo small { color: var(--tenue); }
.en-linea { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.insignia { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; border: 1px solid var(--borde); background: var(--panel-2); }
.estado-m-vigente { border-color: var(--verde-claro); }
.estado-m-por_vencer, .estado-m-pendiente_pago { border-color: var(--alerta); }
.estado-m-vencida, .estado-m-suspendida, .estado-m-baja { border-color: var(--peligro); }
.texto-peligro { color: #ffb5b0; }

/* --- Fotos de acceso --- */
.foto-integrante { display: block; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--borde); }
.foto-integrante.vacia { display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--tenue); background: var(--panel-2); text-align: center; }
.form-foto { display: grid; gap: .5rem; margin-top: .5rem; max-width: 460px; }
.form-foto small { color: var(--tenue); }
.consentimiento { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; }
.consentimiento input { margin-top: .2rem; }
details > summary { cursor: pointer; display: inline-block; list-style: none; }
.acceso-si { color: #8fd19e; } .acceso-no { color: #ffb5b0; }

/* --- Login en pantallas chicas --- */
@media (hover: none), (max-width: 640px) {
  /* "fixed" no funciona bien en iOS/Android: la imagen se agranda y salta al hacer scroll */
  body.acceso { background-attachment: scroll; }
}
@media (max-width: 640px) {
  body.acceso { padding: .75rem; }
  .caja-acceso { padding: 1.1rem; }
  /* 16 px evita que iPhone haga zoom al tocar un campo */
  body.acceso input, body.acceso select { font-size: 16px; }
}
@media (max-height: 520px) {
  body.acceso { place-items: start center; }
  .caja-acceso .logo { width: min(200px, 60%); margin-bottom: .6rem; }
}

/* Socios: multa pendiente junto al estado */
.insignia.multa-pend { border-color: var(--peligro); background: color-mix(in srgb, var(--peligro) 22%, var(--panel)); color: #ffb5b0; font-weight: 600; margin-left: .3rem; }
.insignia.multa-pend:hover { text-decoration: none; filter: brightness(1.2); }

/* ==== Login: tarjeta metálica con el logotipo sobresaliendo ==== */
/* Solo la pantalla de acceso (acceso.html); registro y recuperación de clave conservan la caja normal. */
.caja-acceso.caja-login {
  --corte: 22px;
  position: relative; isolation: isolate; display: flow-root; width: min(430px, 100%);
  margin-top: clamp(6.5rem, 17vh, 9.5rem); padding: 0 1.6rem 1.7rem;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55));
}
/* Marco metálico (capa exterior clara) y cuerpo oscuro con brillo diagonal (capa interior) */
.caja-login::before, .caja-login::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(0 var(--corte), var(--corte) 0, calc(100% - var(--corte)) 0, 100% var(--corte),
    100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
}
.caja-login::before {
  inset: 0;
  background: linear-gradient(150deg, #a9b6ae 0%, #4b5b52 22%, #1b2a22 48%, #6f7e75 66%, #2a3a31 100%);
}
.caja-login::after {
  inset: 2px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(170deg, #1d3328 0%, #13211a 45%, #0e1913 100%);
}
/* El logotipo asoma por arriba de la tarjeta: la placa fuera, la montaña cruzando el borde */
.caja-login .logo {
  position: relative; z-index: 2; width: 88%; margin: -30% auto .6rem; border-radius: 0;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
}
.caja-login h1 { font-size: 1.6rem; margin: 0 0 .9rem; color: var(--crema); text-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.caja-login label { color: #9fbb95; font-weight: 500; }
.caja-login input {
  background: linear-gradient(180deg, #1f392c, #2a4d3c); color: var(--crema);
  border: 1px solid rgba(239, 234, 221, .75); border-radius: 10px; padding: .75rem .85rem;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), inset 0 3px 8px rgba(0, 0, 0, .45);
}
.caja-login input:focus {
  outline: none; border-color: var(--lima);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 0 0 5px rgba(195, 216, 74, .45), inset 0 3px 8px rgba(0, 0, 0, .45);
}
.caja-login button.primario {
  margin-top: .5rem; padding: .8rem 1rem; font-weight: 700; letter-spacing: .02em; color: #f4f1e6;
  background: linear-gradient(180deg, #7fae7a 0%, #5a8a5a 55%, #4a7a4c 100%);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(0, 0, 0, .25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.caja-login button.primario:hover { filter: brightness(1.08); }
.caja-login .enlaces-acceso { color: #9fb394; }
.caja-login .enlaces-acceso a { color: #d3c9a2; }
.caja-login .aviso { margin: 0 0 .8rem; }

@media (max-width: 640px) {
  .caja-acceso.caja-login { padding: 0 1.1rem 1.4rem; margin-top: clamp(5.5rem, 15vh, 8rem); }
  .caja-login h1 { font-size: 1.4rem; }
}
@media (max-height: 560px) {
  .caja-acceso.caja-login { margin-top: 6rem; }
  .caja-login .logo { width: 62%; margin-top: -24%; }
}

/* Agenda (vista Día): tira de días */
.tira-dias { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 .25rem; }
.tira-lista { display: flex; flex: 1; justify-content: space-between; gap: .25rem; max-width: 34rem; }
.tira-dia { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1; color: var(--tenue);
  font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-decoration: none; }
.tira-num { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto); font-size: 1rem; font-weight: 600;
  transition: background .15s, border-color .15s; }
.tira-mes { font-weight: 500; letter-spacing: 0; }
.tira-dia:hover .tira-num { border-color: var(--verde-claro); }
.tira-dia.hoy .tira-num { border-color: var(--bronce); }
.tira-dia.activo { color: var(--texto); }
.tira-dia.activo .tira-num { background: var(--verde); border-color: var(--verde-claro); color: #fff; }
.tira-flecha { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--borde); color: var(--texto); text-decoration: none; flex: none; }
.tira-flecha:hover { background: var(--panel-2); }
.tira-titulo { margin: .1rem 0 .75rem; font-weight: 600; }
.tira-titulo::first-letter { text-transform: uppercase; }
@media (max-width: 640px) {
  .tira-num { width: 2.3rem; height: 2.3rem; font-size: .9rem; }
  .tira-dia { font-size: .68rem; }
  .tira-flecha { width: 1.9rem; height: 1.9rem; }
}

/* Vista Día compacta: todo el día en una sola pantalla */
.compacta .agenda-cabecera { gap: .4rem 1rem; margin-bottom: .4rem; flex-wrap: nowrap; }
.compacta .agenda-cabecera h1 { margin: 0; font-size: 1.5rem; }
.compacta .tira-dias { flex: 1; min-width: 0; margin: 0; gap: .35rem; }
.compacta .tira-lista { max-width: 30rem; }
.compacta .tira-dia { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 .35rem; font-size: .68rem; }
.compacta .tira-sem { flex-basis: 100%; text-align: center; line-height: 1.1; }
.compacta .tira-num { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
.compacta .tira-mes { display: none; }
.compacta .tira-flecha { width: 1.8rem; height: 1.8rem; }
.compacta .tira-titulo { margin: 0; white-space: nowrap; font-size: .95rem; }
.compacta .filtros { padding: .4rem .6rem; margin-bottom: .35rem; gap: .4rem; }
.compacta .filtros label { font-size: .72rem; margin-bottom: .1rem; }
.compacta .filtros select, .compacta .filtros input, .compacta .filtros button, .compacta .filtros .boton { padding-block: .3rem; }
.compacta .leyenda { margin: .1rem 0 .35rem; font-size: .75rem; }
.compacta .cuadricula thead th { padding: .3rem; }
.compacta .cuadricula thead th small { font-size: .72rem; }
.compacta .cuadricula td { height: auto; padding: .2rem; }
.compacta .cuadricula th.hora { padding: .15rem; font-size: .8rem; line-height: 1.15; }
.compacta .cuadricula th.hora small { font-size: .7rem; }
.compacta .reserva { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .25rem .45rem; white-space: nowrap; }
.compacta .reserva + .reserva { margin-top: .2rem; }
.compacta .reserva .etiqueta { flex: none; font-size: .68rem; }
.compacta .reserva strong { flex: 1; min-width: 0; font-size: .8rem; }
.compacta .reserva .hora { flex: none; font-size: .7rem; }
.compacta .libre-accion, .compacta .libre-pasado { padding: .2rem; }
.compacta .actualizado { margin: .3rem 0 0; font-size: .72rem; }
@media (max-width: 900px) {
  .compacta .agenda-cabecera { flex-wrap: wrap; }
  .compacta .tira-dias { flex-basis: 100%; }
  .compacta .tira-titulo { white-space: normal; }
}

/* Vista Día: las filas se reparten la altura disponible de la pantalla */
.compacta .cuadricula td { height: max(2.7rem, calc((100vh - 23rem) / var(--filas, 10))); vertical-align: middle; }
.compacta .reserva, .compacta .libre-accion { margin-block: 0; }
@media (min-height: 980px) {
  .compacta .agenda-cabecera h1 { font-size: 1.8rem; }
  .compacta .tira-num { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
  .compacta .tira-dia { font-size: .75rem; }
  .compacta .filtros { padding: .6rem .75rem; margin-bottom: .6rem; }
  .compacta .filtros label { font-size: .8rem; }
  .compacta .leyenda { margin: .3rem 0 .6rem; font-size: .8rem; }
  .compacta .cuadricula thead th { padding: .5rem .3rem; }
  .compacta .cuadricula th.hora { font-size: .9rem; }
  .compacta .cuadricula td { height: max(4rem, calc((100vh - 25rem) / var(--filas, 10))); padding: .3rem; }
  .compacta .reserva { display: block; padding: .35rem .5rem; white-space: normal; }
  .compacta .reserva .etiqueta { font-size: .72rem; }
  .compacta .reserva strong { font-size: .9rem; }
  .compacta .reserva .hora { font-size: .75rem; }
  .compacta .libre-accion, .compacta .libre-pasado { padding: .5rem; font-size: .85rem; }
}
.compacta .cuadricula tbody th.hora { vertical-align: middle; }

/* Pantallas altas: tarjetas de dos líneas (estado + horario / nombre) y margen extra para el navegador */
@media (min-height: 980px) {
  .compacta .cuadricula td { height: max(3.4rem, calc((100vh - 29rem) / var(--filas, 10))); }
  .compacta .reserva { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; padding: .3rem .5rem; white-space: nowrap; }
  .compacta .reserva .etiqueta { order: 1; }
  .compacta .reserva .hora { order: 2; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .compacta .reserva strong { order: 3; flex: 0 0 100%; }
}

/* Semana y Mes: mismo criterio que Día (caben en una pantalla) */
.ocupacion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; }
.ocupacion .oc-nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocupacion .oc-num { font-weight: 600; color: var(--texto); }
.ocupacion .barra-oc { flex-basis: 100%; }
.compacta .cancha-titulo { margin: 0 0 .3rem; font-size: 1.05rem; }
.compacta.v-semana .cuadricula td { height: max(2.7rem, calc((100vh - 28rem) / var(--filas, 10))); }
.compacta.v-semana .cuadricula th.hora { width: 5.2rem; }
.compacta.v-mes .cuadricula thead th { padding: .3rem; }
.compacta.v-mes .cuadricula td { height: max(6.5rem, calc((100vh - 23rem) / var(--filas, 5))); padding: .3rem .4rem; vertical-align: top; }
.compacta.v-mes .dia-num { margin-bottom: .15rem; }
.compacta.v-mes .ocupacion { font-size: .7rem; margin-bottom: .15rem; }
.compacta.v-mes .barra-oc { height: 4px; margin-top: 1px; }
@media (min-height: 980px) {
  .compacta.v-semana .cuadricula td { height: max(3.4rem, calc((100vh - 31rem) / var(--filas, 10))); }
  .compacta.v-mes .cuadricula td { height: max(7.5rem, calc((100vh - 29rem) / var(--filas, 5))); }
  .compacta.v-mes .ocupacion { font-size: .75rem; margin-bottom: .25rem; }
  .compacta.v-mes .barra-oc { height: 5px; }
}
.compacta.v-mes .ocupacion { line-height: 1.2; }

/* Cancha como botones (chips) dentro de los filtros */
.campo-canchas { grid-column: span 2; }
.etiqueta-campo { display: block; font-size: .85rem; color: var(--tenue); margin-bottom: .25rem; }
.chips-cancha { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--texto); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--verde-claro); text-decoration: none; }
.chip.activo { background: var(--verde); border-color: var(--verde-claro); color: #fff; font-weight: 600; }
.compacta .etiqueta-campo { font-size: .72rem; margin-bottom: .1rem; }
.compacta .chip { padding: .25rem .65rem; font-size: .85rem; }
@media (max-width: 640px) { .campo-canchas { grid-column: 1 / -1; } }
.compacta .filtros { display: flex; flex-wrap: wrap; align-items: flex-end; }
.compacta .filtros .campo { flex: 1 1 130px; min-width: 0; }
.compacta .filtros .campo-canchas { flex: 2 1 auto; }
.compacta .filtros .acciones { flex: 0 0 auto; }
@media (max-width: 640px) { .compacta .filtros .campo { flex-basis: 45%; } .compacta .filtros .campo-canchas { flex-basis: 100%; } }

/* Celular (vista Día): horarios como botones, como en las apps de reservas */
.slots-movil { display: none; }
@media (max-width: 700px) {
  .v-dia .slots-movil { display: block; }
  .v-dia .cuadricula-contenedor { display: none; }
  .v-dia .leyenda { display: none; }
  .v-dia .agenda-cabecera h1 { font-size: 1.35rem; }
  .v-dia .tira-lista { max-width: none; }
  .v-dia .tira-dia { flex-direction: column; gap: .2rem; font-size: .7rem; }
  .v-dia .tira-num { width: 2.5rem; height: 2.5rem; font-size: .95rem; }
  .v-dia .tira-mes { display: block; font-size: .7rem; }
  .v-dia .tira-titulo { font-size: .9rem; }
  .slots-cancha { margin-bottom: 1.1rem; }
  .slots-cancha h2 { font-size: 1.05rem; margin: .2rem 0 .5rem; }
  .slots-cancha h2 small { color: var(--tenue); font-weight: 500; font-size: .8rem; }
  .slots-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 3.4rem; padding: .35rem .2rem; border-radius: 10px; border: 1px solid var(--borde);
    background: var(--panel); color: var(--texto); text-align: center; text-decoration: none; }
  .slot b { font-size: 1rem; }
  .slot small { font-size: .68rem; color: var(--tenue); }
  .slot.libre { background: var(--panel-2); border-color: var(--verde-claro); }
  .slot.libre b { color: #fff; }
  .slot.libre:active { background: var(--verde); }
  .slot.ocupado { background: color-mix(in srgb, var(--ocupada) 20%, var(--panel)); border-color: color-mix(in srgb, var(--ocupada) 55%, var(--borde)); }
  .slot.ocupado b { text-decoration: line-through; color: var(--tenue); }
  .slot.ocupado small { color: color-mix(in srgb, var(--ocupada) 60%, white); }
  .slot.propio { background: color-mix(in srgb, var(--lima) 18%, var(--panel)); border-color: var(--lima); }
  .slot.propio b { text-decoration: none; color: #fff; }
  .slot.propio small { color: var(--lima); }
  .slot.pasado { background: transparent; border-color: color-mix(in srgb, var(--borde) 60%, transparent); }
  .slot.pasado b { text-decoration: line-through; color: #5d6e61; font-weight: 500; }
  .slot.pasado small { color: #5d6e61; }
}
@media (max-width: 700px) {
  .v-dia .tira-lista { gap: 0; }
  .v-dia .tira-dia { flex: 1 1 0; min-width: 0; }
  .v-dia .tira-sem { flex-basis: auto; }
  .v-dia .tira-num { width: 2.3rem; height: 2.3rem; font-size: .9rem; }
  .v-dia .tira-flecha { width: 1.7rem; height: 1.7rem; }
  .v-dia .tira-dias { gap: .25rem; }
}

/* --- Pago con tarjeta (Openpay) --- */
.pago-caja { margin: .6rem 0; }
.pago-caja > summary { display: inline-block; cursor: pointer; list-style: none; }
.pago-caja > summary::-webkit-details-marker { display: none; }
.pago-tarjeta { max-width: 26rem; margin-top: .8rem; padding: 1rem; border: 1px solid var(--borde, #cfd8d2); border-radius: 10px; background: rgba(255,255,255,.04); }
.pago-tarjeta .campo { margin-bottom: .6rem; }
.pago-tarjeta input { width: 100%; }
.pago-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pago-seguro, .pago-nota { font-size: .85rem; color: var(--tenue); margin: .2rem 0 .7rem; }
.pago-error[hidden] { display: none; }

/* Certificación Openpay: logos, pie de página y textos legales */
.pago-logos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 .8rem; }
.pago-logos img { background: #fff; border-radius: 4px; padding: 2px 6px; height: 28px; width: auto; }
.pie-club { text-align: center; font-size: .85rem; opacity: .8; padding: 1.2rem 1rem 2rem; }
.pie-club p { margin: .2rem 0; }
.legal { max-width: 46rem; margin: 1rem auto; line-height: 1.55; }
.legal h2 { margin-top: 1.4rem; font-size: 1.1rem; }
.legal-nota { font-size: .85rem; opacity: .7; }