/* ============================================================
   Mejoras para el contenido de #lista_buscar (tablas/horarios)
   ============================================================ */

.reservas-page #lista_buscar{
  margin-top: 14px;
}

/* Cada bloque de lugar/cancha (si viene como barra o div) */
.reservas-page #lista_buscar .mpsm-tool,
.reservas-page #lista_buscar .tool,
.reservas-page #lista_buscar .titulo_lugar,
.reservas-page #lista_buscar .titulo,
.reservas-page #lista_buscar .title-bar{
  background: #0f766e !important;  /* teal elegante */
  color: #fff !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  margin: 18px 0 10px !important;
  border: 0 !important;
}

/* Contenedor de cada tabla como "card" */
.reservas-page #lista_buscar table{
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #e7edf5 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(16,24,40,.08) !important;
  margin-bottom: 18px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Cabecera */
.reservas-page #lista_buscar table thead th{
  background: #f6f8fb !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 12px 10px !important;
  border-bottom: 1px solid #e7edf5 !important;
  white-space: nowrap;
}

/* Celdas */
.reservas-page #lista_buscar table td{
  padding: 10px 10px !important;
  border-bottom: 1px solid #f0f4f8 !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: #0f172a !important;
}

/* Zebra */
.reservas-page #lista_buscar table tbody tr:nth-child(even) td{
  background: #fbfdff !important;
}

/* Primera columna (Horario) un poco más fuerte */
.reservas-page #lista_buscar table td:first-child,
.reservas-page #lista_buscar table th:first-child{
  font-weight: 900 !important;
  color: #111827 !important;
  width: 120px;
}

/* =========================
   Convertir estados en "pill"
   ========================= */

/* Si el backend imprime textos dentro de <td> con esas clases */
.reservas-page #lista_buscar .libre,
.reservas-page #lista_buscar .reservado,
.reservas-page #lista_buscar .programado,
.reservas-page #lista_buscar .institucional,
.reservas-page #lista_buscar .pagado,
.reservas-page #lista_buscar .ocupado{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  white-space: nowrap;
}

/* Paleta suave (sin bloques fosforescentes) */
.reservas-page #lista_buscar .libre{
  background: rgba(34,197,94,.14) !important;
  color: #166534 !important;
}
.reservas-page #lista_buscar .reservado{
  background: rgba(245,158,11,.16) !important;
  color: #92400e !important;
}
.reservas-page #lista_buscar .programado{
  background: rgba(59,130,246,.14) !important;
  color: #1e3a8a !important;
}
.reservas-page #lista_buscar .institucional{
  background: rgba(100,116,139,.16) !important;
  color: #334155 !important;
}
.reservas-page #lista_buscar .pagado{
  background: rgba(16,185,129,.14) !important;
  color: #065f46 !important;
}
.reservas-page #lista_buscar .ocupado{
  background: rgba(239,68,68,.14) !important;
  color: #7f1d1d !important;
}

/* Si los estados vienen como fondo en el TD (verde/azul fuerte),
   lo suavizamos forzando background transparente */
.reservas-page #lista_buscar td[style*="background"],
.reservas-page #lista_buscar td[bgcolor]{
  background: transparent !important;
}

/* =========================
   Responsive: tabla scrolleable
   ========================= */
@media (max-width: 992px){
  .reservas-page #lista_buscar table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}