/**
 * listadoWEBlrp - Estilos modernos, accesibles y responsive
 * Compatible con la estructura existente del DataGrid y controles ASP.NET
 */

/* Enlace "saltar al contenido" para teclado y lectores de pantalla */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--lrp-primary, #9D0135);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  z-index: 100;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0.5rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Variables para tema y espaciado */
.listado-lrp-page {
  --lrp-primary: #9D0135;
  --lrp-primary-dark: #7a0129;
  --lrp-header-bg: #337ab7;
  --lrp-header-text: #ffffff;
  --lrp-surface: #fff;
  --lrp-surface-alt: #f1f5f9;
  --lrp-border: #e2e8f0;
  --lrp-text: #1e293b;
  --lrp-text-muted: #64748b;
  --lrp-focus: #9D0135;
  --lrp-focus-ring: rgba(157, 1, 53, 0.35);
  --lrp-radius: 12px;
  --lrp-radius-sm: 8px;
  --lrp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --lrp-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.06);
  --lrp-max-width: none;
  box-sizing: border-box;
}

.listado-lrp-page *,
.listado-lrp-page *::before,
.listado-lrp-page *::after {
  box-sizing: inherit;
}

/* Contenedor principal */
.listado-lrp-page {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--lrp-text);
  line-height: 1.5;
  padding: 1rem;
  max-width: var(--lrp-max-width);
  width: 100%;
  margin: 0;
}

/* Título principal de reservas */
.listado-lrp-page #TituloReservas {
  margin-bottom: 0.5rem;
}

.listado-lrp-page #TituloReservas .h2,
.listado-lrp-page .h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  color: #337ab7;
  margin: 0 0 0.25em;
  letter-spacing: -0.02em;
}

/* Título de página (LblTituloPagina): anula #LblTituloPagina { color: #9D0135 } de otras hojas */
.listado-lrp-page [id$="LblTituloPagina"] {
  color: #337ab7 !important;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  display: inline-block;
  padding-left: 1rem;
  border-left: 4px solid #337ab7;
  margin-bottom: 0;
}

.listado-lrp-page .listado-lrp-page-title {
  margin: 0 0 0.75rem;
  padding: 0;
  display: block;
}

.listado-lrp-page .listado-lrp-page-title .listado-lrp-page-title-label {
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 600;
  color: #337ab7 !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: inline-block;
  padding-left: 1rem;
  border-left: 4px solid #337ab7;
}

.listado-lrp-page .h4 {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--lrp-text);
  margin: 0 0 0.5em;
}

.listado-lrp-page p {
  margin: 0 0 0.75rem;
}

/* Bloque título + descripción */
.listado-lrp-page .listado-lrp-intro {
  margin-bottom: 1.5rem;
}

.listado-lrp-page .listado-lrp-intro p:last-child {
  margin-bottom: 0;
}

/* Enfoque accesible en elementos interactivos */
.listado-lrp-page a:focus-visible,
.listado-lrp-page button:focus-visible,
.listado-lrp-page input:focus-visible,
.listado-lrp-page [tabindex="0"]:focus-visible {
  outline: 2px solid var(--lrp-focus);
  outline-offset: 2px;
}

/* Contenedor de la tabla */
.listado-lrp-page .listado-lrp-table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  background: #fff;
  border: 1px solid #d4e4ee;
}

/* Tabla base */
.listado-lrp-page .listado-lrp-table-wrapper table,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1rem;
}

.listado-lrp-page .listado-lrp-table-wrapper th,
.listado-lrp-page .listado-lrp-table-wrapper td {
  padding: 1rem 1.25rem;
  text-align: center;
  vertical-align: middle;
  font-size: 1rem;
  line-height: 1.4;
}

/* Líneas entre filas: tono azul muy suave, en armonía con las filas alternas */
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:not(:first-child) td,
.listado-lrp-page .listado-lrp-table-wrapper tbody td {
  border-bottom: 1px solid #d4e4ee;
}

/* Cabecera: fondo #337ab7, texto blanco, esquinas superiores redondeadas */
.listado-lrp-page .listado-lrp-table-wrapper thead th,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead th,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child th,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child td,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead td,
.listado-lrp-page .listado-lrp-table-wrapper th[scope="col"] {
  background: #337ab7 !important;
  background-color: #337ab7 !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 1.125rem 1.25rem;
  border: none;
  border-bottom: 2px solid #2868a0;
}

.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child th:first-child,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child td:first-child,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead th:first-child,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead td:first-child {
  border-top-left-radius: 11px;
}

.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child th:last-child,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child td:last-child,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead th:last-child,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead td:last-child {
  border-top-right-radius: 11px;
}

.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child th,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child td,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead th,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead td {
  color: #ffffff !important;
}

.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child *,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead * {
  color: #ffffff !important;
}

/* Filas alternas suaves */
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tbody tr:nth-child(even) td,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:nth-child(even):not(:first-child) td {
  background: #e1eef4 !important;
}

.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tbody tr:nth-child(odd) td,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:nth-child(odd):not(:first-child) td {
  background: #fff !important;
}

/* Botón de inscripción: icono moderno */
.listado-lrp-page .listado-lrp-table-wrapper input[type="image"].btn-inscripcion-icon,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid input[type="image"].btn-inscripcion-icon,
.listado-lrp-page .listado-lrp-table-wrapper input[type="image"],
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid input[type="image"] {
  cursor: pointer;
  padding: 0.35rem;
  border: none;
  border-radius: 50%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-block;
  vertical-align: middle;
}

.listado-lrp-page .listado-lrp-table-wrapper input[type="image"]:hover,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid input[type="image"]:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(51, 122, 183, 0.35);
}

.listado-lrp-page .listado-lrp-table-wrapper input[type="image"]:focus-visible,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid input[type="image"]:focus-visible {
  outline: 2px solid #337ab7;
  outline-offset: 2px;
}

/* Celdas de datos: color de texto y tamaño */
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tbody td,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:not(:first-child) td {
  color: #334155;
  font-size: 1rem;
}

/* Cabecera del grid: fondo #337ab7 y texto blanco (anula estilos inline del servidor) */
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead th,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid thead td,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid th,
.listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid tr:first-child td {
  background: #337ab7 !important;
  background-color: #337ab7 !important;
  color: #ffffff !important;
  border: none;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* Forzar cabecera #337ab7 por id de tabla (gana a otras hojas y a ItemStyle BackColor="White") */
.listado-lrp-page .listado-lrp-table-wrapper table[id$="ListadoVisitas"] tr:first-child th,
.listado-lrp-page .listado-lrp-table-wrapper table[id$="ListadoVisitas"] tr:first-child td {
  background: #337ab7 !important;
  background-color: #337ab7 !important;
  color: #ffffff !important;
}

/* Pager si existe */
.listado-lrp-page .listado-lrp-table-wrapper .pager,
.listado-lrp-page .listado-lrp-table-wrapper table + div {
  padding: 1rem 1.25rem;
  text-align: center;
  background: var(--lrp-surface-alt);
  border-top: 1px solid var(--lrp-border);
  font-size: 1rem;
}

/* En móvil: más padding y tipografía legible */
@media (max-width: 640px) {
  .listado-lrp-page {
    padding: 0.75rem;
  }

  .listado-lrp-page .listado-lrp-table-wrapper th,
  .listado-lrp-page .listado-lrp-table-wrapper td {
    padding: 0.85rem 0.75rem;
    font-size: 1rem;
  }

  .listado-lrp-page .listado-lrp-table-wrapper .listado-visitas-grid th {
    font-size: 0.9375rem !important;
  }
}

/* Reducir movimiento para preferencia de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .listado-lrp-page .listado-lrp-table-wrapper input[type="image"] {
    transition: none;
  }
}
