/* THEME CSS */
:root {
  --bs-primary: #0a686d;
  --bs-primary-rgb: 10, 104, 109;
  --bs-secondary: #082031;
  --bs-secondary-rgb: 8, 32, 49;

  /* Colores de enlace */
  --bs-link-color: #0a686d;
  --bs-link-hover-color: #000;
}

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.container {
  max-width: 100%;
}
@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
    margin: 0 auto;
  }
} /* end media*/

@media (min-width: 1200px) and (max-width: 1919px) {
  .container-fluid {
    max-width: 100%;
  }
} /* end media*/

@media (min-width: 1920px) {
  .container-fluid {
    max-width: 1920px;
    margin: 0 auto;
  }
} /* end media*/

body {
  font-size: clamp(1rem, 1.4vw + 1rem, 1.7rem);
  line-height: clamp(120%, 2vw + 100%, 130%);
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  background-color: #082031;
}
/* .site-main {
  padding-left: clamp(0.25rem, 1vw + 0.75rem, 1.2rem);
  padding-right: clamp(0.25rem, 1vw + 0.75rem, 1.2rem);
  
}  */
.lead {
  font-size: clamp(1.2rem, 1.75vw + 1rem, 2.2rem);
  line-height: 120%;
  font-weight: 300;
}
img {
  max-width: 100%;
  height: auto;
}

.text-decoration-none a {
  text-decoration: none;
}
.text-dark a {
  color: #000;
}
.fw-bolder {
  font-weight: 800;
}
/* line-height solo titulares */
:is(h1, h2, h3, h4, h5, h6, [class^="display-"]) {
  line-height: 120%;
  font-weight: 500;
}

/* Selecciona cualquier strong dentro de encabezados o clases de display */
:is(h1, h2, h3, h4, h5, h6, [class^="display-"]) strong,
p strong {
  font-weight: 800;
}

/* Titulares y Clases de Titular */
h1,
.h1 {
  font-size: clamp(1.4rem, 2vw + 1rem, 3rem);
}
h2,
.h2 {
  font-size: clamp(1.2rem, 1.8vw + 1rem, 2.4rem);
}

h3,
.h3 {
  font-size: clamp(1rem, 1.5vw + 1rem, 2.2rem);
}

h4,
.h4 {
  font-size: clamp(0.9rem, 1.2vw + 1rem, 2rem);
}

/* Displays (Titulares gigantes de Bootstrap) */
.display-1 {
  font-size: clamp(2.5rem, 4.5vw + 1rem, 7.5rem);
}

.display-2 {
  font-size: clamp(2rem, 3.5vw + 1rem, 6rem);
}

.display-3 {
  font-size: clamp(1.8rem, 3.5vw + 1rem, 5rem);
}

.display-4 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 3.2rem);
}

.display-5 {
  font-size: clamp(1.3rem, 2.5vw + 1rem, 2.5rem);
}

.display-6 {
  font-size: clamp(1rem, 2vw + 1rem, 2rem);
}

@media (min-width: 768px) {
  .bg-100 .wp-block-cover,
  .bg-100 .wp-block-cover-image {
    min-height: 100%;
  }
} /* end media*/

/* Color Primario  */
.has-primary-color {
  color: #0a686d;
}

.has-primary-background-color {
  background-color: #0a686d;
}

/* Color secundario  */
.has-secondary-color {
  color: #082031;
}

.has-secondary-background-color {
  background-color: #082031;
}

.text-primary a {
  color: #0a686d;
}
.text-primary a:hover {
  color: #000;
}

.bg-e6e6e6 {
  background-color: #e6e6e6;
}
/* Estilo global para todos los botones de bloques de WordPress */
.wp-block-button__link {
  background-color: #0a686d !important;
  color: #ffffff !important;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 0;
  transition: background-color 0.2s ease-in-out;
  font-size: 1.1rem;
  line-height: 120%;
}

.wp-block-button__link:hover {
  background-color: #000 !important;
  color: #ffffff !important;
  text-decoration: none;
}

@media (min-width: 768px) {
  .wp-block-button__link {
    font-size: 1.4rem;
  }
} /* end media*/

.logo-aldaia img {
  width: clamp(100px, 10vw + 50px, 160px);
  height: auto; /* Mantener proporción */
}
.logo-aldaia-transportes img {
  width: clamp(100px, 10vw + 50px, 190px);
  height: auto; /* Mantener proporción */
}

@media (min-width: 768px) {
  .wp-block-button__link {
    font-size: 1.4rem;
  }

  .wp-block-button__link {
    font-size: 1.4rem;
  }
} /* end media*/

.site-footer {
  background-color: #082031;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: #bfdfe1;
  text-decoration: underline;
}

.widget-1 ul {
  padding-left: 0;
}
.widget-1 li {
  list-style: none;
  padding: 5px;
  margin: 0;
}

/* ========================================================================== */
/* NAVBAR Y MENÚS BOOTSTRAP */
/* ========================================================================== */

/* boton nav-bar menu movil */
.navbar-toggler-icon {
  background-image: url('data:image/svg+xml,<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 31.64 27.44"><defs><style> .st0 { fill: %230a686d; } </style></defs><rect class="st0" width="31.64" height="3.93"/><rect class="st0" y="11.75" width="31.64" height="3.93"/><rect class="st0" y="23.51" width="31.64" height="3.93"/></svg>');
}

.btn-close,  .aviso-mapa .bloque-info-extra button.btn-close.btn-close-aviso {
  background-image: url('data:image/svg+xml,<svg version="1.0" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17.5 16.9" style="enable-background:new 0 0 17.5 16.9;" xml:space="preserve"><polygon style="fill:%23FFFFFF;" points="15.5,2.8 14.4,1.7 8.6,7.5 2.7,1.7 1.6,2.8 7.5,8.6 1.6,14.5 2.7,15.6 8.6,9.7 14.4,15.6 15.5,14.5 9.7,8.6 "/></svg>');
  background-repeat: no-repeat;
  width: 31.64px;
  height: 27.44px;
  opacity: 1;
}

.aviso-mapa .bloque-info-extra button.btn-close.btn-close-aviso  {
  font-size: 22px;
  width: 22px;
  filter: invert(1) brightness(1.2);

}
.btn-close:hover,
.btn-close:focus,
.btn-close.btn-close-aviso:hover, 
.btn-close.btn-close-aviso:focus {
  filter: invert(1) brightness(1.2);
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler-icon:focus,
.btn-close:focus {
  outline: none !important;
  border: none !important;
  border-width: 0;
  box-shadow: none !important;
}

/* Main menu */
.navbar-nav li {
  text-align: left;
  line-height: 1.2;
}

.navbar-nav li a.nav-link {
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  text-wrap: nowrap;
  padding-block: 12px;
}

/* Dropdown menus */
.dropdown-menu {
  border: none;
  padding-left: 1.5rem;
}

.navbar-nav .dropdown-menu {
  padding-left: 0;
}

.navbar-nav .dropdown-menu li a.nav-link {
  font-size: 0.9rem;
}

.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
  background-color: #fff;
}

/* Language selector */
.idiomas-movil {
  position: absolute;
  bottom: 4px;
  right: 10px;
}

.idiomas-movil .item-idioma,
.navbar-nav .lang-item a.nav-link {
  font-size: 0.95rem;
  line-height: 1.2;
  padding-block: 10px;
}
.idiomas-movil .item-idioma {
  color: #000;
}

.navbar-nav .lang-item a.nav-link:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #fff;
}

/* Desktop menu styles */
@media (min-width: 990px) {
  .navbar-nav li a.nav-link {
    color: #0a686d;
    font-size: 1.75vw;
    padding-block: 6px;
  }
  .idiomas-movil .item-idioma {
    color: #000;
  }
  .navbar-nav li a.nav-link:hover,
  .navbar-nav li.active a.nav-link {
    background-color: #0a686d;
    color: #fff;
  }
  .navbar-nav .dropdown-menu li {
    padding: 5px !important;
  }
  .navbar-nav .dropdown-menu li a.nav-link,
  .navbar-nav .dropdown-menu li.link-boton a.nav-link {
    font-size: 1rem;
    text-align: left;
    background-color: #fff;
    color: #0a686d;
  }

  .navbar-nav .dropdown-menu li a.nav-link:hover,
  .navbar-nav .dropdown-menu li.link-boton a.nav-link:hover {
    background-color: #0a686d;
    color: #ffff;
  }

  .dropdown-menu[data-bs-popper] {
    margin-top: 0;
  }

  .dropdown-menu {
    background-color: #0a686d;
    padding: 10px 15px;
  }

  .navbar-nav .lang-item a.nav-link:hover {
    color: #0a686d;
  }
} /* end media*/

@media only screen and (min-width: 1200px) {
  .navbar-nav li {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .navbar-nav li a.nav-link {
    font-size: 1.4rem;
  }

} /* end css */

/* ========================================================================== */
/* ESTILOS VARIOS */
.text-white a {
  color: #fff;
}
.text-white a:hover {
  text-decoration: underline;
  color: #fff;
}

.understrap-read-more-link {
  background-color: #0a686d;
  border-radius: 0px;
  color: #fff;
  text-decoration: none;
  border: 2px solid #000;
  padding: 15px 25px;
  font-size: 20px;
  min-width: 100px;
  display: inline-block;
  text-align: center;
}
.understrap-read-more-link:hover {
  background-color: #000;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .understrap-read-more-link {
    font-size: 29px;
    min-width: 150px;
  }
} /* end css */
@media only screen and (min-width: 1200px) {
  .understrap-read-more-link {
    font-size: 36px;
  }
} /* end css */

.solo-es,
.solo-val {
  display: none;
}

:lang(ca) .solo-val {
  display: block;
}
:lang(es) .solo-es {
  display: block;
}

/* cookies */
.cky-btn-revisit-wrapper {
  background-color: #000 !important;
}
.cky-btn-customize,
.cky-btn-reject,
.cky-btn-accept,
.cky-btn-preferences {
  border-color: #000 !important;
  color: #000 !important;
  background-color: #fff !important;
}

/* ========================================================================== */
/* PAGINATION STYLES - .nav-links */
/* ========================================================================== */
.navigation {
  padding: 1rem 0.5rem;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 40px 0;
}

.nav-links a,
.nav-links span {
  display: inline-block;
  padding: 10px 16px;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #000;
  transition: all 0.3s ease;
}

.nav-links a:hover {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

.nav-links .page-numbers.current,
.nav-links span.page-numbers.current {
  background-color: #000;
  color: #fff;
  border-color: #000;
  cursor: default;
}

@media (min-width: 768px) {
  .nav-links a,
  .nav-links span {
    padding: 6px 20px;
    font-size: 1.1rem;
  }
} /* end media */

/* ========================================================================== */
/* PAGINATION ARROWS - Previous/Next */
/* ========================================================================== */

/* Ocultar el texto y mostrar flechas */
.nav-links a.prev,
.nav-links a.next {
  font-size: 0;
  width: 50px;
  height: 50px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Flecha izquierda (Previous) */
.nav-links a.prev::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H11.5a.5.5 0 0 1 .5.5z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Flecha derecha (Next) */
.nav-links a.next::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 0 .5.5h7.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L12.293 7.5H4.5A.5.5 0 0 0 4 8z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* estilos para el mapa */
/* Definimos el tamano del contenedor del mapa */
#mi-mapa-personalizado {
  height: 50vh;
  min-height: 300px;
  width: 100%;
  z-index: 1;
}

/* estilos mejora visual del mapa*/
.leaflet-tile-container img {
  outline: 1px solid transparent !important;
  border: none !important;
  mix-blend-mode: plus-lighter !important; /* Ayuda a fusionar los bordes */
}

.leaflet-container {
  filter: contrast(105%) brightness(105%) !important;
}

/*pop up mensaje de cada parada*/
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: #0a686d !important;
}
.leaflet-popup-content-wrapper {
  border-radius: 0 !important;
}

.leaflet-container a.leaflet-popup-close-button span {
  color: #000 !important;
  font-size: 28px !important;
  padding-right: 7px;
  padding-top: 7px;
  font-weight: 400;
}

.info-parada {
  font-family: "Montserrat", sans-serif !important;
  font-size: 22px;
  color: #fff !important;
}
.info-parada h3 {
  padding-left: 60px;
  min-height: 45px;
  display: block;
  margin-bottom: 15px;
  font-size: clamp(1.3rem, 1.3vw + 1rem, 1.6rem);
  line-height: 120%;
  font-weight: 500;
  background-image: url('data:image/svg+xml,<svg version="1.0" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"><g><g><path style="fill:%23FFFFFF;" d="M24.9,29.8h-0.7c-8.2,0-14.9-6.7-14.9-14.9c0-2.9,2.3-5.2,5.2-5.2h20.1c2.9,0,5.2,2.3,5.2,5.2C39.7,23.1,33.1,29.8,24.9,29.8z M14.5,11.6c-1.8,0-3.2,1.4-3.2,3.2c0,7.1,5.8,12.9,12.9,12.9h0.7c7.1,0,12.9-5.8,12.9-12.9c0-1.8-1.4-3.2-3.2-3.2H14.5z"/></g><g><path style="fill:%23FFFFFF;" d="M12.5,40c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8s3.8,1.7,3.8,3.8C16.3,38.3,14.6,40,12.5,40z M12.5,34.3c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8S13.6,34.3,12.5,34.3z"/></g><g><path style="fill:%23FFFFFF;" d="M36,40c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8c2.1,0,3.8,1.7,3.8,3.8C39.8,38.3,38.1,40,36,40z M36,34.3c-1,0-1.8,0.8-1.8,1.8S35,38,36,38s1.8-0.8,1.8-1.8S37.1,34.3,36,34.3z"/></g><path style="fill:%23FFFFFF;" d="M48.3,19.4c0-2.2-1.6-4-3.6-4.3v-2.7c0-3.9-0.7-6-2.5-7.3c-2.4-1.8-5.4-3-8.5-3.4c-6.6-0.9-11.8-0.9-18.4,0c-3.2,0.4-6.1,1.6-8.5,3.4C5.2,6.2,4.3,9,4.3,12.4v2.7c-2.1,0.4-3.6,2.2-3.6,4.3s1.6,4,3.6,4.3v15.8c0,2.1,1.7,3.7,3.7,3.7h0.7v2.9c0,1.3,1.2,2.4,2.7,2.4h2.1c1.5,0,2.7-1.1,2.7-2.4v-2.9h15.9v2.9c0,1.3,1.2,2.4,2.7,2.4h2.1c1.5,0,2.7-1.1,2.7-2.4v-2.9H41c2.1,0,3.7-1.7,3.7-3.7V23.8C46.8,23.4,48.3,21.6,48.3,19.4z M2.6,19.4c0-1.1,0.7-2,1.7-2.3v4.7C3.3,21.4,2.6,20.5,2.6,19.4z M14.4,46.2c0,0.1-0.3,0.4-0.8,0.4h-2.1c-0.5,0-0.8-0.3-0.8-0.4v-2.9h3.7V46.2z M37.9,46.2c0,0.1-0.3,0.4-0.8,0.4H35c-0.5,0-0.8-0.3-0.8-0.4v-2.9h3.7V46.2z M42.8,39.6c0,1-0.8,1.8-1.8,1.8H8c-1,0-1.8-0.8-1.8-1.8V23.8V15v-2.6c0-3.1,0.9-5.1,1.7-5.7C10.1,5,12.7,4,15.6,3.6C18.8,3.2,21.6,3,24.5,3c2.9,0,5.7,0.2,8.9,0.6C36.3,4,38.9,5,41.1,6.7c0.8,0.6,1.7,1.8,1.7,5.7V15v8.9V39.6z M44.7,21.7v-4.7c1,0.3,1.7,1.3,1.7,2.3S45.7,21.4,44.7,21.7z"/><g><path style="fill:%23FFFFFF;" d="M30.9,6.9H18.1c-0.5,0-1-0.4-1-1s0.4-1,1-1h12.8c0.5,0,1,0.4,1,1S31.5,6.9,30.9,6.9z"/></g></g></svg>');
  background-position: top left;
  background-size: 40px;
  background-repeat: no-repeat;
}

.info-parada h4 {
  text-transform: uppercase;
  font-size: 22px;
}
.info-parada a {
  font-weight: 800;
  text-decoration: none;
  padding: 3px 5px;
  color: #fff !important;
  font-size: 22px;
}
.info-parada a:hover {
  background-color: #000;
}

@media only screen and (min-width: 1024px) {
  #mi-mapa-personalizado {
    height: 70vh;
    min-height: 720px;
  }

  .leaflet-container a.leaflet-popup-close-button {
    font-size: 36px !important;
  }
  .info-parada h3 {
    padding-left: 65px;
    background-size: 60px;
    min-height: 65px;
  }
} /*end media */
@media only screen and (max-width: 360px) {
  .leaflet-popup {
    max-width: 300px !important;
  }
  .leaflet-popup-content {
    margin: 10px !important;
  }
} /*end media */

/* end estilos mapa */

.buscador .search-submit {
  background-color: #fff !important;
  border: none !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.search-form .search-submit {
  background-color: #0a686d;
  border: 2px solid #0a686d;
  color: #fff;
  font-weight: 500;
  border-radius: 0;
  padding-inline: 1rem;
  font-size: 1.2rem;
  line-height: 1.4;
}
.search-form .search-submit:hover {
  background-color: #fff;
  color: #0a686d;
}
.search-form .search-field {
  font-size: 1.2rem;
  line-height: 1.4;
}

.mapa-enlaces a {
  text-decoration: none;
}

.aviso-mapa .bloque-info-extra {
  background-color: #ffbf04;
}
.aviso-mapa .bloque-info-extra button {
  border: none;
  background: transparent;
}

.aviso-mapa .modal-content {
  background-color: #ffbf04;
}
.modal-content {
  border-radius: 0;
  border: none;
}
/* ========================================================================== */
/* estilos tablas horarios */
/* ========================================================================== */

figure.wp-block-table {
  margin-bottom: 0 !important;
}
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto; /* CAMBIA 'hidden' por 'auto' */
  -webkit-overflow-scrolling: touch; /* Crucial para suavidad en iPhone/iOS */
  border: 3px solid #000;
}
.table-responsive table {
  /* max-height: 70vh; Para que la modal no sea infinita */
  text-align: center;
  width: 100%;
  min-width: 766px;
  background-color: #fff;
}
.table-responsive table td {
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 4px;
  outline: 1px solid #000;
  border-collapse: collapse; /* Crucial: une los bordes en uno solo */
  vertical-align: top;
  text-align: center;
}

.table-responsive table td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  outline: 3px solid #000;
  width: 50px;
  text-wrap: nowrap;
  font-weight: 600;
}
.table-responsive table th:first-child,
.table-responsive table tr:first-child,
.table-responsive table td:first-child {
  background-color: #c3d2d2;
}

@media only screen and (min-width: 1024px) {
  .table-responsive table td:first-child {
    width: 70px;
  }
  .table-responsive table td {
    font-size: 1.2rem;
    padding: 4px 6px;
    letter-spacing: 0.15rem;
  }
} /*end media */

/* Aplicar solo en dispositivos móviles  BARRA en tablas horarios SCROLLBAR  */


@media (max-width: 768px) {
  /* .table-responsive {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");

  } */

  :lang(ca).table-responsive {
    background-image: url("https://aldaia.es/transportes/wp-content/themes/transport-aldaia-theme/img/desplazar-tabla-val.svg");
  }
  :lang(es).table-responsive {
    background-image: url("https://aldaia.es/transportes/wp-content/themes/transport-aldaia-theme/img/desplazar-tabla-es.svg");
  }
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px; /* Aumentamos un poco para que quepa la flecha */
    background-repeat: no-repeat;
    background-position: right 0px bottom 0px;
    background-size: 200px;
  }
  /* Tu barra roja anterior */
  .table-responsive::-webkit-scrollbar {
    height: 12px;
    display: block;
  }

  .table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background-color: #c3d2d2;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
  }

  /* Compatibilidad Firefox */
  .table-responsive {
    scrollbar-width: auto;
    scrollbar-color: #c3d2d2 #f1f1f1;
  }
} /*end media */

@media (min-width: 576px) and (max-width: 1024px) {
  .modal-dialog.modal-xl,
  .modal-lg,
  .modal-xl {
    max-width: 98%;
  }
} /*end media */
@media (max-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 98%;
  }
}
/* enlaces a los horarios de cada bus que abren la ventana modal*/
.open-bus-modal {
  font-weight: 800;
  font-size: clamp(1.3rem, 3.5vw + 1rem, 3.5rem);
  line-height: 1.2;
  /* padding: 5px 15px; */

  /* PADDING VERTICAL: Más pequeño (ej. entre 12px y 20px) */
  padding-block: clamp(0.75rem, 1vw + 0.5rem, 1.25rem);

  /* PADDING HORIZONTAL: Más generoso (ej. entre 24px y 48px) */
  padding-inline: clamp(1.2rem, 2vw + 1rem, 2rem);

  margin-right: 4px;
  background-color: #e6e6e6;
  color: #000;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;
}
.open-bus-modal:hover,
.open-bus-modal.nocturno:hover {
  background-color: #0a686d;
  color: #fff;
}
.open-bus-modal.nocturno {
  background-color: #000;
  color: #fff;
}

.modal-horarios-bus .modal-header {
  z-index: 12;
}
.modal-horarios-bus p,
.modal-horarios-bus h2,
.modal-horarios-bus h3,
.modal-horarios-bus h4 {
  color: #fff;
}
.modal-horarios-bus h2 img {
  filter: invert(1) brightness(1.2);
}
.bus-direccion {
  font-weight: 600;
}
.horario p,
.modal-horarios-bus p {
  font-size: 0.9rem;
}
/* Estilo barra tablas horarios */

/* ========================================================================== */
/* estilos css linea de puntos trayecto en pag lineas */
/* ========================================================================== */

:root {
  --color-principal: #0a686d; /* El verde oscuro de tu imagen */
  --grosor-linea: 2px;
  --tamano-punto: 16px;
  --tamano-punto-extremo: 22px;
}

.contenedor-seccion {
  display: flex;
  align-items: center;
  gap: 25px;
  font-family: sans-serif;
}

.contenedor-seccion h1 {
  margin: 0;
}

/* Contenedor de la línea y los puntos */
.linea-puntos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-grow: 1; /* Esto hace que la línea se estire */
  max-width: 85%; /* Ajusta esto según lo larga que quieras la línea */
  height: var(--tamano-punto);
  margin-left: 5%;
}

/* La línea horizontal de fondo */
.linea-puntos::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--grosor-linea);
  background-color: var(--color-principal);
  transform: translateY(-50%);
  z-index: 1;
}

/* Estilo general de los puntos */
.punto {
  width: var(--tamano-punto);
  height: var(--tamano-punto);
  background-color: var(--color-principal);
  border-radius: 50%;
  z-index: 2;
  box-sizing: border-box;
}

/* Puntos especiales de los extremos (huecos) */
.punto.extremo {
  background-color: white;
  border: var(--grosor-linea) solid var(--color-principal);
  width: var(--tamano-punto-extremo);
  height: var(--tamano-punto-extremo);
}

/* Responsive: si la pantalla es pequeña, el título va arriba*/
@media (min-width: 600px) {
  :root {
    --grosor-linea: 3px;
    --tamano-punto: 19px;
    --tamano-punto-extremo: 26px;
  }
} /*end media */

/* ========================================================================== */
/* estilos css enlaces pagina lineas */
/* ========================================================================== */

.lineas {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  gap: 10px;
  padding: 0;
  margin: 0;
}
.lineas li {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: #e6e6e6;
  line-height: 1.5;
  width: 48%;
  padding-block: clamp(0.75rem, 1vw + 0.5rem, 1.25rem);
  padding-inline: clamp(0.5rem, 1vw + 0.5rem, 1rem);
}
.lineas li:hover,
.lineas li.nocturno:hover {
  background-color: #0a686d;
}
.lineas li.nocturno {
  background-color: #000;
}
.lineas li.nocturno a {
  color: #fff;
}
.lineas a {
  color: #000;
  text-decoration: none;
  display: block;
  font-size: 1rem;
  line-height: 1;
}
.lineas a strong {
  display: block;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  padding-bottom: 12px;
}
.lineas li:hover a,
.lineas li.nocturno:hover a {
  color: #fff;
}

@media (min-width: 768px) {
  .lineas li {
    width: 32%;
  }
  .lineas a {
    font-size: 1.4rem;
  }
  .lineas a strong {
    font-size: 6vw;
  }
} /*end media */

@media (min-width: 1200px) {
  .lineas li {
    width: 24%;
  }
} /*end media */

.bloque-itinerario {
  width: 100%;
  background-color: #e6e6e6;
  margin: 0 auto;
  padding: 15px;
}
.bloque-itinerario h2 strong {
  color: #000;
  text-decoration: none;
  font-size: 2rem;
  line-height: 1.3;
  vertical-align: middle;
}
.bloque-itinerario h2 a {
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  padding-block: 7px;
  padding-left: 33px;
  padding-right: 8px;
  display: inline-block;
  background-image: url('data:image/svg+xml,<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 45 40"><defs></defs><path style=" fill: %23fff;" d="M1.49,21.99c.68,0,1.22-.55,1.22-1.22v-11.96h36.57l-4.78,3.03c-.57.36-.74,1.12-.38,1.69.23.37.63.57,1.04.57.22,0,.45-.06.65-.19l8.35-5.29c.06-.04.12-.09.17-.14.01-.01.03-.02.04-.04.1-.1.17-.21.23-.34.01-.03.02-.06.04-.09.05-.13.09-.28.09-.42s-.04-.29-.09-.42c-.01-.03-.02-.06-.04-.09-.06-.12-.13-.24-.23-.34-.01-.01-.03-.02-.04-.04-.06-.05-.11-.1-.17-.14l-8.35-5.29c-.57-.36-1.33-.19-1.69.38-.36.57-.19,1.33.38,1.69l4.78,3.03H.27v14.41c0,.68.55,1.22,1.22,1.22Z"/><path style=" fill: %23fff;" d="M43.51,18.01c-.68,0-1.22.55-1.22,1.22v11.97H5.71l4.79-3.03c.57-.36.74-1.12.38-1.69-.36-.57-1.12-.74-1.69-.38L.84,31.38c-.07.04-.12.09-.18.15-.01.01-.03.02-.04.04-.1.1-.17.21-.23.34-.01.03-.02.06-.04.09-.05.13-.09.28-.09.42s.04.29.09.42c.01.03.02.06.04.09.06.12.13.24.23.34.01.01.03.02.04.04.06.05.11.1.18.15l8.35,5.29c.2.13.43.19.65.19.41,0,.8-.2,1.04-.57.36-.57.19-1.33-.38-1.69l-4.78-3.03h39.01v-14.41c0-.68-.55-1.22-1.22-1.22Z"/></svg>');
  background-position: 7px 7px;
  background-repeat: no-repeat;
  background-size: 20px;
  background-color: #0a686d;
  border:2px solid #0a686d;
  color: #fff;
  vertical-align: middle;
}
.bloque-itinerario h2 a:hover {
  background-image: url('data:image/svg+xml,<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 45 40"><defs></defs><path style=" fill: %230a686d;" d="M1.49,21.99c.68,0,1.22-.55,1.22-1.22v-11.96h36.57l-4.78,3.03c-.57.36-.74,1.12-.38,1.69.23.37.63.57,1.04.57.22,0,.45-.06.65-.19l8.35-5.29c.06-.04.12-.09.17-.14.01-.01.03-.02.04-.04.1-.1.17-.21.23-.34.01-.03.02-.06.04-.09.05-.13.09-.28.09-.42s-.04-.29-.09-.42c-.01-.03-.02-.06-.04-.09-.06-.12-.13-.24-.23-.34-.01-.01-.03-.02-.04-.04-.06-.05-.11-.1-.17-.14l-8.35-5.29c-.57-.36-1.33-.19-1.69.38-.36.57-.19,1.33.38,1.69l4.78,3.03H.27v14.41c0,.68.55,1.22,1.22,1.22Z"/><path style=" fill: %230a686d;" d="M43.51,18.01c-.68,0-1.22.55-1.22,1.22v11.97H5.71l4.79-3.03c.57-.36.74-1.12.38-1.69-.36-.57-1.12-.74-1.69-.38L.84,31.38c-.07.04-.12.09-.18.15-.01.01-.03.02-.04.04-.1.1-.17.21-.23.34-.01.03-.02.06-.04.09-.05.13-.09.28-.09.42s.04.29.09.42c.01.03.02.06.04.09.06.12.13.24.23.34.01.01.03.02.04.04.06.05.11.1.18.15l8.35,5.29c.2.13.43.19.65.19.41,0,.8-.2,1.04-.57.36-.57.19-1.33-.38-1.69l-4.78-3.03h39.01v-14.41c0-.68-.55-1.22-1.22-1.22Z"/></svg>');
  background-color: #fff;
  border:2px solid #0a686d;
  color: #0a686d;
}

@media (min-width: 600px) {
  .bloque-itinerario h2 strong {
    font-size: 3.5rem;
  }
} /*end media */
@media (min-width: 1024px) {
  .bloque-itinerario {
    padding: 15px 25px;
  }
  .bloque-itinerario h2 strong {
    font-size: 4rem;
  }
  .bloque-itinerario h2 a {
    font-size: 20px;
    padding-block: 10px;
    padding-left: 55px;
    padding-right: 8px;
    background-position: 7px 7px;
    background-repeat: no-repeat;
    background-size: 40px;
    background-color: #0a686d;
    color: #fff;
    vertical-align: middle;
  }
} /*end media */

@media (min-width: 1200px) {

  .bloque-itinerario h2 strong {
    font-size: 5rem;
  }
  .bloque-itinerario h2 a {
    font-size: 30px;
    text-decoration: none;
    padding-block: 14px;
    padding-left: 85px;
    padding-right: 18px;
    background-position: 10px 7px;
    background-repeat: no-repeat;
    background-size: 60px;

  }
} /*end media */
:root {
  --color-bloque-itinerario: #000; /* El verde oscuro de tu imagen */
}

/* 1. Estilos base para la lista */
.bloque-itinerario ul {
  list-style: none; /* Quitamos los puntos de lista por defecto */
  margin: 0;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1.2;
  position: relative; /* Necesario para el posicionamiento absoluto de los hijos */
}
.bloque-itinerario ul li strong {
  font-weight: 600;
}

/* 2. Estilos para cada elemento de la lista (li) */
.bloque-itinerario ul li {
  position: relative; /* Clave: base para ::before y ::after */
  padding-left: 40px; /* Espacio para el punto y la línea */
  margin-bottom: 25px; /* Espacio vertical entre paradas */
  line-height: 1.75;
  color: var(--color-bloque-itinerario);
  font-size: 16px;
}

/* 3. El Punto de la Parada (usando ::before) */
.bloque-itinerario ul li::before {
  content: ""; /* Obligatorio */
  position: absolute;
  left: 0;
  top: 4px; /* Centrado verticalmente respecto al texto */
  width: 22px; /* Tamaño del círculo */
  height: 22px;
  background-color: white; /* Interior blanco */
  border: 4px solid var(--color-bloque-itinerario); /* Borde negro grueso */
  border-radius: 50%; /* Lo hace redondo */
  z-index: 2; /* Asegura que el punto esté SOBRE la línea */
}

/* 4. La Línea Conectora (usando ::after) */
.bloque-itinerario ul li::after {
  content: ""; /* Obligatorio */
  position: absolute;
  left: 8px; /* Centrado horizontalmente con el punto (ancho_punto / 2) */
  top: 18px; /* Comienza justo debajo del punto */
  width: 6px; /* Grosor de la línea */
  height: calc(
    100% + 13px
  ); /* Baja hasta el inicio del siguiente li. Ajusta el '13px' si cambias márgenes. */
  background-color: var(--color-bloque-itinerario);
  z-index: 1; /* Asegura que la línea esté DEBAJO del punto */
}

/* 5. Estilo especial para la última parada (sin línea hacia abajo) */
.bloque-itinerario ul li:last-child::after {
  display: none; /* Ocultamos la línea para el último elemento */
}

@media (min-width: 768px) {
  .bloque-itinerario ul li {
    font-size: 22px;
  }

} /*end media */

.titulo-itinerario {
  background-color: #0a686d;
  padding: 3px 10px;
  display: inline-block;
  color: #fff;
}
/* s estilos de los metros */
.s1,
.s2,
.s3,
.s4,
.s5,
.s6,
.s7,
.s8,
.s9,
.s10,
.n1 {
  font-size: 0.8rem;
  line-height: 1.5;
  display: inline-block;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
}
.s1 {
  background-color: #edbc40;
  color: #000;
}
.s2 {
  background-color: #da3b87;
}
.s3 {
  background-color: #c42125;
}
.s4 {
  background-color: #224185;
}
.s5 {
  background-color: #0b915e;
}
.s6 {
  background-color: #7977af;
}
.s7 {
  background-color: #e28725;
}
.s8 {
  background-color: #8dc6dd;
}
.s9 {
  background-color: #9e734d;
}
.s10 {
  background-color: #88d66b;
}

.n1 {
  background-color: #eb0029;
  border-radius: 20px;
  font-weight: 400;
}
.bloque-itinerario hr {
  /* Eliminamos el borde por defecto */
  border: none;

  /* Creamos los puntos con un degradado */
  /* El primer color (#4c4c4c) es el punto, el segundo (transparent) es el hueco */
  background-image: linear-gradient(
    to right,
    #4c4c4c 25%,
    rgba(255, 255, 255, 0) 0%
  );

  /* AJUSTES CLAVE: */
  /* 4px = La distancia entre el inicio de un punto y el siguiente */
  background-size: 8px 4px;
  background-repeat: repeat-x;

  /* Altura de la línea (grosor de los puntos) */
  height: 2px;
  width: 100%;
  margin: 20px 0;
}
.bloque-itinerario .localidad {
  color: #666;
  text-align: right;
  display: block;
  margin-top: -10px;
  line-height: 0.5rem;
}

@media (min-width: 600px) {
  .bloque-itinerario {
    padding: 20px; /* Un poco de aire */
  }
  .bloque-itinerario ul {
    font-size: 1.5rem;
  }
  .s1,
  .s2,
  .s3,
  .s4,
  .s5,
  .s6,
  .s7,
  .s8,
  .s9,
  .s10,
  .n1 {
    font-size: 1rem;
    padding: 3px 9px;
  }
} /*end media */

.search-page h2 a {
  color: #000;
}
.search-page h2 a:hover {
  color: #0a686d;
}

.listado-contacto .wp-block-column {
  padding-left: 30px;
  background-image: url('data:image/svg+xml,<svg version="1.0" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 9 9" style="enable-background:new 0 0 9 9;" xml:space="preserve"><rect style="fill:%230A686D;" width="9" height="9"/></svg>');
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 0px 7px;
}
.listado-contacto .wp-block-column a {
  color: #000;
  text-decoration: none;
}
.listado-contacto .wp-block-column a:hover {
  color: #0a686d;
}

@media (min-width: 768px) {
  .listado-contacto .wp-block-column {
    padding-left: 40px;
    background-size: 20px;
    background-position: 0px 14px;
  }
} /*end media */

@media (max-width: 600px) {
  .icon-pag-paradas-horaris img  {
    max-width: 50px;
    height: auto;
  }
  .bloque-itinerario ul li img {
    max-height: 24px;
    width: auto;
  }
} /*end media */
@media (max-width: 300px) {
  .linea-puntos  {
    display: none;
  }
} /*end media */