.uv-red-centros {
  max-width: 1200px;
  margin: 0 auto;
}

/* Los controles de formulario NO heredan font-family del body por defecto
   (comportamiento estándar del navegador) — sin esto caían al fallback
   Arial del user-agent en vez de Lato (medido contra producción, #158
   Parte 7). No afecta a .material-icons: ese span tiene su propia regla
   de font-family con más especificidad, gana igual. */
.uv-red-centros button,
.uv-red-centros input,
.uv-red-centros select {
  font-family: var(--wp--preset--font-family--lato, 'Lato', sans-serif);
}

.uv-rc-buscador {
  padding: 24px 0;
  text-align: center;
}

/* Réplica de .umivale-section-title (umivaleactiva.es/red-de-centros:
   h3.umivale-section-title, "¿Dónde puedes ser atendido?"): color azul,
   ~1.825em → titulo-xl es el token más cercano. Peso: el CSS estático de
   producción dice 500, pero el COMPUTED real (getComputedStyle, #158 Parte
   7) da 700 — alguna regla más específica lo pisa. Usar el computed, no el
   CSS fuente. */
.uv-rc-buscador__titulo {
  color: var(--uv-azul);
  font-weight: var(--uv-peso-bold);
  font-size: var(--uv-titulo-xl);
  line-height: var(--uv-titulo-xl-line-height);
  padding: 0 30px;
  margin: 0 auto;
}

/* max-width 960px = mismo que .uv-rc-panel (el párrafo de abajo): las tabs
   quedan alineadas en columna con el texto, no más angostas ni más anchas
   (#158 Parte 10). justify-content:center + gap generoso separa los 2 tabs
   sin volver a estirarlos (flex:1 los hacía tocarse por dentro, Parte 8). */
.uv-rc-buscador__tabs {
  display: flex;
  justify-content: center;
  max-width: 960px;
  margin: 16px auto;
  gap: 64px;
}

/* flex:1 (mitad del contenedor c/u, #158 Parte 10c — medido: (960px
   contenedor - 64px gap) / 2 = 448px, prácticamente los 447.8px medidos
   contra producción) + text-align:center para que el texto quede centrado
   dentro de esa columna más ancha.
   El border-bottom va en el propio <button> (Parte 10d): remedido desde
   cero contra producción real — border-bottom es una propiedad CSS sobre
   el <a> completo (464px, todo el ancho de la columna), nunca sobre un
   span de texto; un border, por especificación, siempre ocupa el ancho
   completo del elemento. La Parte 8 había medido mal esto (asumió que
   coincidía con el texto); acá se corrige con el dato real. */
.uv-rc-buscador__tab {
  flex: 1;
  border: 0;
  border-bottom: 6px solid transparent;
  background: none;
  padding: 12px 0;
  font-size: var(--uv-subtitulo-xs);
  font-weight: var(--uv-peso-bold);
  line-height: 38px;
  text-align: center;
  color: color-mix(in srgb, var(--uv-azul) 50%, transparent);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.uv-rc-buscador__tab:hover,
.uv-rc-buscador__tab.is-active {
  color: var(--uv-azul);
  border-bottom-color: var(--uv-naranja);
}

/* 640px quedaba angosto comparado con producción — medido: la fila del
   input ocupa ~80% del contenedor (1118px de 1400px, #158 Parte 9),
   aplicado a nuestro .uv-red-centros (1200px) ≈ 960px. */
.uv-rc-panel {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* [hidden] empata en especificidad con la clase y pierde por orden de
   cascada sin este override — el panel quedaba visible con hidden=true. */
.uv-rc-panel[hidden] {
  display: none;
}

.uv-rc-panel__intro {
  flex-basis: 100%;
  font-size: var(--uv-parrafo-s);
  line-height: var(--uv-parrafo-s-line-height);
  color: var(--uv-texto);
  margin: 0 0 8px;
}

.uv-rc-panel__intro--bold {
  font-weight: var(--uv-peso-bold);
}

/* Mismo estilo underline que .uv-rc-texto — antes caja con borde completo. */
.uv-rc-select {
  flex: 1 1 200px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid #d1d5db;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
}

.uv-rc-select:focus-visible {
  border-bottom-color: var(--uv-azul);
}

/* Estilo underline (sin caja/borde completo) — medido contra producción
   (#158 Parte 7): border:0, sin padding vertical, 15px. */
.uv-rc-texto {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 36px 8px 4px;
  border: 0;
  border-bottom: 1px solid #d1d5db;
  border-radius: 0;
  font-size: 15px;
  background: transparent;
}

.uv-rc-texto:focus-visible {
  border-bottom-color: var(--uv-azul);
}

.uv-rc-input-wrap {
  position: relative;
  flex: 1 1 260px;
}

.uv-rc-gps {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  color: #6b7280;
}

.uv-rc-gps .material-icons {
  font-size: 20px;
  vertical-align: middle;
}

.uv-rc-gps:hover {
  color: var(--uv-azul);
}

.uv-rc-sugerencias {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1000;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--uv-blanco);
  border: 1px solid #d1d5db;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-align: left;
}

.uv-rc-sugerencias__item {
  padding: 8px 12px;
  font-size: 0.9em;
  cursor: pointer;
}

.uv-rc-sugerencias__item:hover {
  background: #f3f4f6;
}

.uv-rc-mas-opciones {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: none;
  color: var(--uv-azul);
  font-weight: var(--uv-peso-bold);
  cursor: pointer;
}

/* Réplica de .rdc-maps-component-mas-opciones-icono de producción. */
.uv-rc-mas-opciones .material-icons {
  vertical-align: super;
}

.uv-rc-servicios-filtro {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.uv-rc-servicios-filtro.is-open {
  max-height: 260px;
}

.uv-rc-servicios-filtro__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.uv-rc-servicios-filtro__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95em;
}

.uv-rc-tipo-pin {
  font-size: 18px;
}

.uv-rc-sin-resultados {
  text-align: center;
  padding: 48px 16px;
  color: #6b7280;
}

.uv-rc-mapa-wrap {
  position: relative;
}

.uv-rc-mapa {
  height: 380px;
  width: 100%;
}

@media (min-width: 768px) {
  .uv-rc-mapa {
    height: 440px;
  }
}

.uv-rc-mapa-tabs {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  display: flex;
  gap: 2px;
  background: var(--uv-blanco);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.uv-rc-mapa-tab {
  border: 0;
  background: var(--uv-blanco);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.uv-rc-mapa-tab.is-active {
  background: var(--uv-azul);
  color: var(--uv-blanco);
}

.uv-rc-marker {
  background: var(--uv-naranja-hero); /* = #e84e0f, mismo valor que .uv-rc-marker--propio */
  border: 2px solid var(--uv-blanco);
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Color por tipo (#161) — mismo criterio que tipoColors del Map.vue original
   y UV_RC_TIPO_COLORES de render.php (paleta duplicada a propósito: CSS no
   puede leer constantes PHP; mantener en sync si cambia). */
.uv-rc-marker--propio {
  background: #e84e0f;
}

.uv-rc-marker--suma {
  background: #f97316;
}

.uv-rc-marker--ajeno {
  background: #3b82f6;
}

.uv-rc-marker--publico {
  background: #16a34a;
}

.uv-rc-resultados {
  margin-top: 24px;
}

/* Título de cada sección agrupada ("Centros Propios"/"Centros Ajenos",
   #161) — tipografía exacta confirmada contra producción, misma clase
   literal que usa el sitio real (.urdc_center-list-title). */
.urdc_center-list-title {
  text-align: center;
  font-size: 1.4em;
  width: 100%;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px;
}

.uv-rc-lista {
  display: flex;
  flex-direction: column;
}

.uv-rc-card {
  display: flex;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid #e5e7eb;
  transition: box-shadow 0.3s;
}

/* [hidden] empata en especificidad con la clase y pierde por orden de
   cascada sin este override — mismo bug ya resuelto arriba para
   .uv-rc-panel, nunca aplicado acá. Encontrado real en #161: con 442
   centros multi-tipo, aplicarFiltro() seteaba hidden=true correctamente
   pero las cards seguían renderizando (display:flex les ganaba). */
.uv-rc-card[hidden] {
  display: none;
}

.uv-rc-card.is-resaltada {
  box-shadow: 0 0 0 2px var(--uv-azul);
}

.uv-rc-card__logo {
  flex-shrink: 0;
  width: 140px;
  height: 90px;
  object-fit: contain;
  border-radius: 6px;
}

.uv-rc-card__cuerpo {
  flex: 1;
  min-width: 0;
}

@media (max-width: 600px) {
  .uv-rc-card {
    flex-direction: column;
  }

  .uv-rc-card__logo {
    width: 110px;
    height: 70px;
  }
}

.uv-rc-card__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Mismos tokens que article.centro-card h4/p de centros-propios (#156,
   medido contra producción): subtitulo-s bold / parrafo-s regular. */
.uv-rc-card__nombre {
  color: var(--uv-azul);
  font-size: var(--uv-subtitulo-s);
  font-weight: var(--uv-peso-bold);
  line-height: var(--uv-subtitulo-s-line-height);
  margin: 0 0 4px;
}

.uv-rc-card__nombre-link {
  color: inherit;
  text-decoration: none;
}

.uv-rc-card__nombre-link:hover {
  text-decoration: underline;
}

/* Réplica de CentroCard.vue: font-size 1.9em/peso 300 — sin token
   equivalente (los pesos van de 400 a 700, no hay "light"), literal
   justificado. Color gris de texto, no azul — confirmado contra
   producción (#158 Parte 8). */
.uv-rc-card__distancia {
  flex-shrink: 0;
  font-size: 1.9em;
  font-weight: 300;
  color: var(--uv-texto);
}

.uv-rc-card__distancia-unidad {
  font-size: 14px;
  margin-left: 4px;
}

.uv-rc-card__direccion {
  font-size: var(--uv-parrafo-s);
  line-height: var(--uv-parrafo-s-line-height);
  margin: 0 0 4px;
}

.uv-rc-card__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.uv-rc-card__contacto a {
  color: var(--uv-azul);
}

/* Fila compartida badges+acciones (#158 Parte 11c) — réplica de producción
   (.urdc_umivale-centers-type + .urdc_umivale-center-links-container):
   medido con headless:false a 1366px y 1920px contra producción — ahí
   quedan SIEMPRE en el mismo renglón desde 768px de viewport en adelante
   (la card tiene ancho fijo, ~831px, vía Bootstrap .container), sin
   breakpoint intermedio propio — no existe un corte "solo desktop grande"
   en producción; decisión confirmada con la usuaria: replicar ese mismo
   punto (768px, ya usado en este archivo para .uv-rc-mapa) en vez de uno
   inventado. flex-wrap por defecto para que en mobile (donde la card se
   apila, media query de 600px) cada fila siga ocupando su propio renglón. */
.uv-rc-card__fila-servicios-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .uv-rc-card__fila-servicios-acciones {
    flex-wrap: nowrap;
  }
}

.uv-rc-card__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.9em;
  color: #374151;
}

.uv-rc-card__servicio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Cuadrado de color + letra — réplica de los badges C/A/R/H de
   CentroCard.vue (Nuxt), confirmado visualmente contra producción
   (#158 Parte 7). Compartido entre la card y los checkboxes de "Más
   opciones" (Parte 8). */
.uv-rc-servicio-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--uv-azul);
  color: var(--uv-blanco);
  font-size: 11px;
  font-weight: var(--uv-peso-bold);
  border-radius: 3px;
}

.uv-rc-card__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-left: auto;
}

.uv-rc-card__acciones a {
  color: var(--uv-azul);
}

.uv-rc-card__horario-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  border: 0;
  background: var(--uv-azul);
  color: var(--uv-blanco);
  padding: 10px 14px;
  font-weight: var(--uv-peso-bold);
  cursor: pointer;
}

.uv-rc-card__horario-toggle .material-icons {
  font-size: 20px;
}

/* Panel del acordeón en 2 columnas (#161): horario semanal + "Próximos
   festivos" — el border/fondo que antes llevaba la tabla sola ahora lo
   lleva el wrapper, para que ambas columnas queden dentro de la misma caja.
   Festivos se completa en view.js (depende de "hoy" + comunidad del
   centro, no puede pre-renderizarse server-side). Guard defensivo: si no
   hay festivos cargados para la fecha (ver FESTIVOS_POR_COMUNIDAD, tabla
   incompleta a propósito fuera de sep-2026/ene-2027), view.js agrega este
   modifier y el horario ocupa el 100% — nunca queda una columna vacía. */
.uv-rc-card__horario-panel {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #e0e0e0;
  border-top: 0;
  background: #f9f9f9;
}

/* [hidden] pierde contra display:flex en la cascada — MISMO bug ya resuelto
   arriba para .uv-rc-card y .uv-rc-panel, reintroducido acá al agregar el
   layout de 2 columnas (#161): los 442 acordeones quedaban abiertos por
   defecto pese a tener hidden="" en el DOM. Bug real reportado por la
   usuaria, confirmado en vivo (442/442 con display:flex computado pese a
   hidden). */
.uv-rc-card__horario-panel[hidden] {
  display: none;
}

.uv-rc-card__horario-panel .uv-rc-card__horario-tabla {
  flex: 1 1 260px;
  min-width: 220px;
}

.uv-rc-card__horario-panel--sin-festivos .uv-rc-card__horario-tabla {
  flex-basis: 100%;
}

.uv-rc-card__horario-tabla {
  width: 100%;
}

.uv-rc-card__festivos {
  flex: 1 1 260px;
  min-width: 220px;
  border-left: 1px solid #e0e0e0;
}

.uv-rc-card__festivos:empty {
  border-left: 0;
}

.uv-rc-card__festivos-titulo {
  font-weight: var(--uv-peso-bold);
  color: var(--uv-texto);
  padding: 6px 14px 0;
  font-size: 15.2px;
}

.uv-rc-card__festivos-tabla {
  width: 100%;
}

.uv-rc-card__festivos-tabla td {
  padding: 6px 14px;
  font-size: 15.2px;
  color: var(--uv-texto);
}

.uv-rc-card__festivos-tabla td:first-child {
  font-weight: var(--uv-peso-semibold);
  width: 70px;
}

.uv-rc-card__festivos-tabla td:last-child {
  font-weight: 300;
}

@media (max-width: 600px) {
  .uv-rc-card__festivos {
    border-left: 0;
    border-top: 1px solid #e0e0e0;
  }
}

.uv-rc-card__horario-tabla td {
  padding: 6px 14px;
  font-size: 15.2px;
  color: var(--uv-texto);
}

/* Día en semibold, horario en fino — medido contra producción (fila real
   del portal, #158 Parte 9: 600/300, no 700/400 como se había asumido).
   300 sin token equivalente (van de 400 a 700), literal justificado, mismo
   criterio que .uv-rc-card__distancia. */
.uv-rc-card__horario-tabla td:first-child {
  font-weight: var(--uv-peso-semibold);
  /* Columna angosta (100px + 20px de gap) en vez de auto-ancho por "Miércoles"
     — réplica de .urdc_day-label/.urdc_time-cell de producción (#158 Parte 11,
     centros-poblacion.js: urdc_pob_generarHtmlDesktop), así "Día:" y el rango
     quedan en línea corrida y no como columnas separadas por tabulación. */
  width: 100px;
  padding-right: 20px;
}

.uv-rc-card__horario-tabla td:last-child {
  font-weight: 300;
}