/**
 * Subtema cms_tur_olivero — estilos del proyecto de itinerarios.
 * Este archivo vive en el SUBTEMA, no en Olivero — sobrevive a
 * cualquier actualización del núcleo de Drupal.
 */

/**
 * Página del itinerario — rediseño visual (Fase "mejora de CSS",
 * 12/08/2026). Antes: lista simple de etiqueta/valor sin estilo.
 * Ahora: tarjetas de estadísticas con iconos, y lista de paradas con
 * numeración circular a juego con el panel del constructor de
 * itinerarios (mismo verde #2e7d32).
 */

.node--type-itinerario .node__content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* El botón, la imagen y las paradas ocupan las 3 columnas enteras —
   esto también hace que las 3 tarjetas de estadísticas, al no tener
   ningún elemento intermedio marcado igual, se coloquen SIEMPRE en
   una sola fila de 3, sin huecos, sea cual sea su contenido. */
.node--type-itinerario .node__content > .itinerario-descargar-pdf-btn,
.node--type-itinerario .field--name-field-mapa-pdf-itinerario,
.node--type-itinerario .field--name-field-paradas-itinerario {
  grid-column: 1 / -1;
}

/* --- Tarjetas de estadísticas (distancia / tiempo a pie / tiempo en coche) --- */
.node--type-itinerario .field--name-field-distancia-itinerario,
.node--type-itinerario .field--name-field-tiempo-itinerario,
.node--type-itinerario .field--name-field-tiempo-coche-itinerario {
  padding: 20px 16px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border-top: 4px solid #2e7d32;
  text-align: center;
}
.node--type-itinerario .field--name-field-tiempo-itinerario {
  border-top-color: #1976d2;
}
.node--type-itinerario .field--name-field-tiempo-coche-itinerario {
  border-top-color: #f57c00;
}

.node--type-itinerario .field--name-field-distancia-itinerario .field__label,
.node--type-itinerario .field--name-field-tiempo-itinerario .field__label,
.node--type-itinerario .field--name-field-tiempo-coche-itinerario .field__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #757575;
  font-weight: 600;
  margin-bottom: 6px;
}

.node--type-itinerario .field--name-field-distancia-itinerario .field__item,
.node--type-itinerario .field--name-field-tiempo-itinerario .field__item,
.node--type-itinerario .field--name-field-tiempo-coche-itinerario .field__item {
  font-size: 28px;
  font-weight: 700;
  color: #212121;
}

/* Iconos delante de cada valor, vía ::before — sin tocar el HTML. */
.node--type-itinerario .field--name-field-distancia-itinerario .field__item::before {
  content: '📏 ';
}
.node--type-itinerario .field--name-field-tiempo-itinerario .field__item::before {
  content: '🚶 ';
}
.node--type-itinerario .field--name-field-tiempo-coche-itinerario .field__item::before {
  content: '🚗 ';
}
.node--type-itinerario .field--name-field-tiempo-itinerario .field__item::after,
.node--type-itinerario .field--name-field-tiempo-coche-itinerario .field__item::after {
  content: ' min';
  font-size: 16px;
  font-weight: 500;
  color: #757575;
}
.node--type-itinerario .field--name-field-distancia-itinerario .field__item::after {
  content: ' km';
  font-size: 16px;
  font-weight: 500;
  color: #757575;
}

@media (max-width: 640px) {
  .node--type-itinerario .node__content {
    grid-template-columns: 1fr;
  }
}

/* --- Lista de paradas, con numeración circular a juego con el
   constructor de itinerarios (mismo verde) --- */
.node--type-itinerario .field--name-field-paradas-itinerario {
  clear: both;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
  margin-top: 8px;
}
.node--type-itinerario .field--name-field-paradas-itinerario .field__label {
  font-size: 18px;
  font-weight: 700;
  color: #212121;
  margin-bottom: 14px;
}
.node--type-itinerario .field--name-field-paradas-itinerario .field__items {
  counter-reset: parada;
}
.node--type-itinerario .field--name-field-paradas-itinerario .field__item {
  counter-increment: parada;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eeeeee;
  font-size: 15px;
}
.node--type-itinerario .field--name-field-paradas-itinerario .field__item:last-child {
  border-bottom: none;
}
.node--type-itinerario .field--name-field-paradas-itinerario .field__item::before {
  content: counter(parada);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #2e7d32;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

/* Petición del jefe (13/08/2026, con boceto adjunto): el panel de
   /mapa-planificar en escritorio debía verse como una columna lateral
   SÓLIDA e integrada (como en Recursos/Servicios/Rutas + itinerario +
   botones apilados), no como una tarjeta flotante translúcida encima
   del mapa. El fondo semitransparente con desenfoque (backdrop-filter)
   dejaba traspasar el título de la página por detrás — se veía el
   texto "Planificar" superpuesto sobre el panel, muy poco pulido.
   Aquí se sobreescribe SOLO el aspecto visual (fondo sólido, sin
   desenfoque, sombra más discreta como simple separador) — la
   estructura fixed/left:0 en sí, que ya coloca el panel como columna
   real junto al mapa, se queda como está en el módulo. */
@media (min-width: 769px) {
  body.path-mapa-planificar .leaflet-advanced-panel {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
    border-right: 1px solid #e0e0e0;
  }
}

/* Petición del jefe (13/08/2026): en escritorio, el panel ya no es
   flotante — es una columna real insertada en
   #mapa-planificar-sidebar-slot (ver page--mapa-planificar.html.twig
   y dom.js::createFilterPanel()). Aquí se anula el position:fixed del
   módulo (pensado para el modo flotante/móvil) y se oculta el botón
   de cerrar, que no tiene sentido cuando no es un desplegable. */
body.path-mapa-planificar .leaflet-advanced-panel--inline {
  position: static !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100%;
  height: auto;
  box-shadow: none;
  border-right: none;
}
body.path-mapa-planificar .leaflet-advanced-panel--inline .close-panel {
  display: none;
}

/* Maquetación real de la página en escritorio: columna del panel +
   mapa a la derecha, y el itinerario debajo de ambos — contenedores
   reales de page--mapa-planificar.html.twig, no trucos de position. */
@media (min-width: 769px) {
  /* Petición del jefe (13/08/2026): el contenedor del panel de la
     izquierda debe tener como ALTO MÁXIMO la suma de mapa + listado
     de paradas (la columna derecha completa) — ni más corto (hueco
     raro debajo) ni más alto (empujaría el footer). align-items:
     stretch (el valor por defecto de flex, aquí puesto explícito)
     hace que ambas columnas midan siempre lo mismo que la más alta —
     como la derecha (mapa+itinerario) manda en altura, la izquierda
     se estira a esa misma altura. Si el panel desplegado no cabe en
     ese alto, hace scroll interno (overflow-y: auto más abajo), sin
     alargar la página entera. */
  body.path-mapa-planificar .mapa-planificar-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    /* Pequeño margen de aire a la izquierda del panel — pedido tras
       ver que quedaba pegado al borde del navegador (13/08/2026). */
    padding-left: 24px;
  }
  body.path-mapa-planificar .mapa-planificar-sidebar-slot {
    flex: 0 0 360px;
    max-width: 360px;
    overflow-y: auto;
  }
  body.path-mapa-planificar .mapa-planificar-right-column {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  body.path-mapa-planificar .mapa-planificar-itinerary-slot {
    margin-top: 24px;
    /* Petición del jefe: mismo ancho que el mapa, no ancho completo —
       ya lo hereda automáticamente al vivir dentro de la columna
       derecha (right-column), en vez de fuera de la rejilla como
       antes. */
  }
}

/* Peticion del jefe (14/08/2026): quitar el limite de ancho de
   Olivero (page-wrapper, max-width: 1570px) en TODO el sitio publico,
   no solo en mapa-planificar como hasta ahora -- se amplia el
   selector original (que se deja comentado como referencia de por
   que existia) para que aplique siempre, sin condicion de ruta. Solo
   afecta al theme publico cms_tur_olivero -- el admin usa el theme
   Claro, totalmente aparte, y no se toca (confirmado expresamente:
   cambio solo para el sitio publico). */
.page-wrapper {
  max-width: none;
}

/* Peticion del jefe (14/08/2026): el .page-wrapper de arriba ya quita
   el limite exterior, pero el contenido REAL de los nodos (texto,
   articulos) seguia estrecho por un mecanismo aparte del NUCLEO de
   Olivero (no tocar web/core/, se pierde en cada actualizacion de
   Drupal) -- la clase .layout--pass--content-medium reserva solo las
   columnas centrales del grid (3/13 de 14 en escritorio, ver
   web/core/themes/olivero/css/layout/layout-content-medium.css) para
   mantener el texto en un ancho de lectura comodo. Peticion expresa
   del jefe de quitar tambien esto para que el contenido use el ancho
   completo. Se replican las mismas media queries que el nucleo
   (43.75rem y 62.5rem) para que el cambio entre exactamente en los
   mismos puntos de ruptura. */
.layout--pass--content-medium > *,
.layout--content-medium {
  grid-column: 1 / -1 !important;
}
@media (min-width: 43.75rem) {
  .layout--pass--content-medium > *,
  .layout--content-medium {
    grid-column: 1 / -1 !important;
  }
}
@media (min-width: 62.5rem) {
  .layout--pass--content-medium > *,
  .layout--content-medium {
    grid-column: 1 / -1 !important;
  }
}

/* Peticion del jefe (14/08/2026): tercera y ultima capa de limite de
   ancho encontrada -- .container (web/core/themes/olivero/css/layout/
   layout.css), usada por .main-content__container entre otros, con
   max-width: var(--max-width). Mismo patron que el override de
   .page-wrapper de mas arriba: no tocar el core, override en el
   subtema, sin !important porque el orden de carga del subtema ya
   gana (misma especificidad que la regla original de Olivero). */
.container {
  max-width: none;
}

/* Petición del jefe (13/08/2026): selector a pie/coche del track del
   itinerario, dentro del panel del mapa (no confundir con las
   tarjetas de estadísticas de la página del itinerario ya guardado,
   más arriba en este mismo archivo — este selector es del panel
   interactivo, antes de guardar). */
.itinerary-osrm-profile-selector {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
.itinerary-osrm-profile-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.itinerary-osrm-profile-btn:hover {
  background: #f1f8f2;
}
.itinerary-osrm-profile-btn.is-active {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #ffffff;
  font-weight: 600;
}

/* Peticion del jefe (18/08/2026): buscador de recursos por texto en
   /mapa-recursos, Fase A del mini-proyecto. Caja de busqueda arriba
   del panel de filtros, acordeon de resultados debajo, empujando el
   arbol de categorias hacia abajo (flujo normal del documento, sin
   JS extra para "empujar" -- es simplemente el elemento siguiente en
   el HTML). */
.filter-search-section {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}
.filter-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.filter-search-input:focus {
  outline: none;
  border-color: #3388fe;
  box-shadow: 0 0 0 2px rgba(51, 136, 254, 0.15);
}
.filter-search-results {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}
.filter-search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.filter-search-result-item:last-child {
  border-bottom: none;
}
.filter-search-result-item:hover {
  background: #f2f7ff;
}
.filter-search-result-title {
  font-size: 14px;
}
.filter-search-result-tipo {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: 8px;
}
.filter-search-no-results {
  padding: 12px;
  color: #888;
  font-size: 14px;
  text-align: center;
}

/* Peticion del jefe (18/08/2026): buscador de recursos por texto en
   /mapa-recursos, Fase A del mini-proyecto. Caja de busqueda arriba
   del panel de filtros, acordeon de resultados debajo, empujando el
   arbol de categorias hacia abajo (flujo normal del documento, sin
   JS extra para "empujar" -- es simplemente el elemento siguiente en
   el HTML). */
.filter-search-section {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}
.filter-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.filter-search-input:focus {
  outline: none;
  border-color: #3388fe;
  box-shadow: 0 0 0 2px rgba(51, 136, 254, 0.15);
}
.filter-search-results {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}
.filter-search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.filter-search-result-item:last-child {
  border-bottom: none;
}
.filter-search-result-item:hover {
  background: #f2f7ff;
}
.filter-search-result-title {
  font-size: 14px;
}
.filter-search-result-tipo {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: 8px;
}
.filter-search-no-results {
  padding: 12px;
  color: #888;
  font-size: 14px;
  text-align: center;
}