/* Cuadro de reservas "nuevo" (Booking/Grid.aspx).
   Todo va bajo .cuadro-v2: sin esa clase el cuadro sale exactamente como siempre (estilosSvg.css).
   La clase la pone Grid.aspx salvo que el Web.config tenga EstiloCuadroReservas=clasico.
   El rayado de lo ocupado es el <pattern id="cuadroV2Rayado"> que va en Grid.aspx. */

/* ---- fondo: cuadricula marcada; lo pasado / no reservable, velo gris liso ---- */
.cuadro-v2 svg#tablaReserva rect.celda { stroke: #c9d0cd !important; }
.cuadro-v2 svg#tablaReserva rect.subDivision.buttonHora { stroke: #e1e6e3 !important; }
.cuadro-v2 svg#tablaReserva rect.subDivision.buttonHora[habilitado="false"] { fill: #f1f3f2 !important; }

/* ---- hora de la celda libre: solo al pasar el raton ---- */
.cuadro-v2 svg#tablaReserva g[datahora] > text.celdaTxt { opacity: 0; pointer-events: none; }
.cuadro-v2 svg#tablaReserva g[datahora]:hover > text.celdaTxt { opacity: 1; fill: #0f766e; font-weight: 700; }
.cuadro-v2 svg#tablaReserva rect.subDivision.buttonHora[habilitado="true"]:hover { fill: rgba(2, 171, 166, .12) !important; }
.cuadro-v2 svg#tablaReserva rect.cabezaColumna + text.celdaTxt { font-weight: 700; fill: #5b6563; }

/* ---- ocupado: rayado gris suave con la hora tenue ---- */
.cuadro-v2 svg#tablaReserva rect.evento.evtOcupado { fill: url(#cuadroV2Rayado) !important; stroke: #dfe3e1 !important; stroke-width: 1px !important; }
.cuadro-v2 svg#tablaReserva g.evtOcupado text.fechaSupEvtSolo,
.cuadro-v2 svg#tablaReserva g.evtOcupado text.fechaSupEvt { fill: #9aa19e !important; font-weight: 500 !important; }

/* lo pasado / no reservable no se puede pulsar: sin mano (lo ocupado si: lleva a la lista de espera) */
.cuadro-v2 svg#tablaReserva rect.subDivision.buttonHora[habilitado="false"] { cursor: default !important; }

/* ---- partida abierta: verde suave con borde, texto negro ---- */
.cuadro-v2 svg#tablaReserva rect.evento.evtPartida { fill: #dcf3e4 !important; stroke: #2f9e5b !important; stroke-width: 1.5px !important; }
.cuadro-v2 svg#tablaReserva text.v2Tipo,
.cuadro-v2 svg#tablaReserva text.v2Faltan,
.cuadro-v2 svg#tablaReserva text.v2Nivel { pointer-events: none; }
.cuadro-v2 svg#tablaReserva text.v2Tipo { fill: #1a1a1a; font-size: 11.5px; font-weight: 700; }
.cuadro-v2 svg#tablaReserva text.v2Faltan { fill: #1a1a1a; font-size: 10.5px; font-weight: 700; }
.cuadro-v2 svg#tablaReserva text.v2Nivel { fill: #3a3a3a; font-size: 10.5px; }

/* ---- reserva propia (tambien si es una partida en la que estas): como la partida, en azul claro ---- */
.cuadro-v2 svg#tablaReserva rect.evento.evtPropia { fill: #dbeafe !important; stroke: #2563eb !important; stroke-width: 1.5px !important; }
.cuadro-v2 svg#tablaReserva g.evtPropia text.fechaSupEvtSolo,
.cuadro-v2 svg#tablaReserva g.evtPropia text.fechaSupEvt,
.cuadro-v2 svg#tablaReserva g.evtPropia text.textoEvento,
.cuadro-v2 svg#tablaReserva g.evtPropia text.v2Tipo,
.cuadro-v2 svg#tablaReserva g.evtPropia text.v2Faltan { fill: #1e3a8a !important; font-weight: 700; }
.cuadro-v2 svg#tablaReserva g.evtPropia text.v2Nivel { fill: #1e40af !important; }

/* ---- actividad publica ("Mostrar actividades" en el cuadro): el color de cada actividad lo pone estructura.js;
        este violeta solo es para la actividad sin color ---- */
.cuadro-v2 svg#tablaReserva rect.evento.evtActividad { fill: #ede9fe !important; stroke: #7c3aed !important; stroke-width: 1.5px !important; }
.cuadro-v2 svg#tablaReserva text.v2Completa { fill: #9a3412; font-size: 10.5px; font-weight: 700; pointer-events: none; }

/* ---- huecos de horario fijo con precio: hora y pastilla verde suave centradas ---- */
.cuadro-v2 svg#tablaReserva text.horaFijaConTexto { fill: #374151; font-weight: 600; pointer-events: none; }
.cuadro-v2 svg#tablaReserva rect.rectPrecio { fill: #e3f4e9 !important; pointer-events: none; }
.cuadro-v2 svg#tablaReserva text.textPrecio { fill: #1d7a45; font-size: 11px !important; font-weight: 700; pointer-events: none; }
/* solo el hueco de horario fijo (g id="ocupacion_..."); en las celdas normales se ilumina solo el tramo */
.cuadro-v2 svg#tablaReserva g[id^="ocupacion_"]:has(> rect.buttonHora[habilitado="true"]):hover > rect.interiorTabla { fill: #f0faf4 !important; }

/* ---- leyenda ---- */
.leyendaCuadro.cuadro-v2 .ley-ocupado { background: repeating-linear-gradient(45deg, #e6e9e8 0 2px, #f6f7f7 2px 6px) !important; box-shadow: inset 0 0 0 1px #dfe3e1; }
.leyendaCuadro.cuadro-v2 .ley-partida { background: #dcf3e4 !important; box-shadow: inset 0 0 0 1.5px #2f9e5b; }
.leyendaCuadro.cuadro-v2 .ley-propia { background: #dbeafe !important; box-shadow: inset 0 0 0 1.5px #2563eb; }

.leyendaCuadro.cuadro-v2 .ley-actividad { background: linear-gradient(90deg, #fdf6c3 0 33%, #dbeafe 33% 66%, #f3e8f3 66%) !important; box-shadow: inset 0 0 0 1.5px #8a8a8a; }

/* ---- fichas al pulsar una partida o una actividad (fichasCuadroV2.js) ---- */
.fichaCuadroV2 { position: fixed; z-index: 10050; width: 310px; max-width: calc(100vw - 20px); box-sizing: border-box; background: #fff; color: #222;
  border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .25); padding: 16px 18px; font-size: 14px; line-height: 1.4; text-align: left; }
.fichaCuadroV2.fichaV2Movil { left: 10px !important; right: 10px; bottom: 10px; top: auto !important; width: auto; max-width: none; }
.fichaCuadroV2 .fichaV2Cerrar { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #555; padding: 4px 6px; }
.fichaCuadroV2 .fichaV2Titulo { font-weight: 800; font-size: 16px; margin: 0 22px 2px 0; }
.fichaCuadroV2 .fichaV2Cuando { color: #555; }
.fichaCuadroV2 .fichaV2Donde { color: #777; font-size: 13px; }
.fichaCuadroV2 .fichaV2Plazas { margin: 10px 0; }
.fichaCuadroV2 .fichaV2Faltan { color: #15803d; }
.fichaCuadroV2 .fichaV2Completa { color: #9a3412; }
.fichaCuadroV2 .fichaV2Pista { display: flex; align-items: center; justify-content: center; gap: 6px; background: #f6f8f7; border-radius: 12px; padding: 10px 6px; margin-bottom: 6px; }
.fichaCuadroV2 .fichaV2Jugador { width: 52px; text-align: center; font-size: 11px; }
.fichaCuadroV2 .fichaV2Jugador span { display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fichaCuadroV2 .fichaV2Avatar { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; background: #dcf3e4; border: 1.5px solid #2f9e5b; color: #1d6b3d;
  display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; }
.fichaCuadroV2 .fichaV2Avatar img { width: 100%; height: 100%; object-fit: cover; }
.fichaCuadroV2 .fichaV2Libre .fichaV2Avatar { background: #fff; border-style: dashed; color: #2f9e5b; font-size: 20px; font-weight: 700; }
.fichaCuadroV2 .fichaV2Libre span { color: #2f9e5b; font-weight: 700; }
.fichaCuadroV2 .fichaV2Vs { font-weight: 800; color: #9aa19e; font-size: 12px; padding: 0 4px; }
.fichaCuadroV2 .fichaV2Nota { font-size: 12px; color: #888; text-align: center; margin-bottom: 8px; }
.fichaCuadroV2 .fichaV2Boton { display: block; text-align: center; margin-top: 10px; background: #342a29; color: #fff !important; border-radius: 10px;
  padding: 10px 16px; font-weight: 700; text-decoration: none !important; }
.fichaCuadroV2 .fichaV2Boton.fichaV2Secundario { margin-top: 6px; background: #fff !important; color: #342a29 !important; border: 1.5px solid #342a29; padding: 8px 16px; }
.fichaCuadroV2 .fichaV2Enlace { display: block; text-align: center; margin-top: 8px; font-weight: 700; font-size: 13px; color: #342a29; }
.fichaCuadroV2 .fichaV2Boton:focus-visible, .fichaCuadroV2 .fichaV2Enlace:focus-visible, .fichaCuadroV2 .fichaV2Cerrar:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* ficha de iniciar reserva (hueco libre) */
.fichaCuadroV2 .fichaV2Cabecera { display: flex; align-items: center; gap: 10px; margin-right: 22px; }
.fichaCuadroV2 .fichaV2Cabecera .fichaV2Titulo { margin-right: 0; }
.fichaCuadroV2 .fichaV2Foto { width: 46px; height: 46px; flex: none; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid #e5e7eb; box-sizing: border-box; padding: 2px; }
.fichaCuadroV2 .fichaV2Descripcion { margin: 10px 0 0; padding: 8px 10px; background: #f6f8f7; border-radius: 8px; color: #444; font-size: 13px; }
.fichaCuadroV2 .fichaV2Etiqueta { margin-top: 12px; font-size: 11.5px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.fichaCuadroV2 .fichaV2Opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-top: 6px; }
.fichaCuadroV2 .fichaV2Opciones .fichaV2Boton { margin-top: 0; padding: 9px 10px; }
.fichaCuadroV2 .fichaV2SinOpciones { margin: 12px 0 0; }
.fichaCuadroV2 .fichaV2Normas { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; color: #555; cursor: pointer; }
.fichaCuadroV2 .fichaV2Normas input { margin: 2px 0 0; flex: none; width: 16px; height: 16px; }
.fichaCuadroV2 .fichaV2Normas a { color: #2563eb; }
.fichaCuadroV2 .fichaV2Normas.fichaV2Aviso { color: #b91c1c; }
.fichaCuadroV2 .fichaV2Normas.fichaV2Aviso input { outline: 2px solid #b91c1c; outline-offset: 1px; }