/*
Theme Name: La Palma child
Version: 1.0
Description: A child theme of Astra
Template: astra
Author: Administrator
*/
/* Your awesome customization starts here */

.youtube-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
}

.wp-image-6381 {
    max-width: 100%;
    height: auto;
}
.wp-image-6383 {
    max-width: 100%;
    height: auto;
}
.wp-image-6384 {
    max-width: 100%;
    height: auto;
}
.wp-image-6385 {
    max-width: 100%;
    height: auto;
} 
.wp-image-6387 {
    max-width: 100%;
    height: auto;
}  
.wp-image-6389 {
    max-width: 100%;
    height: auto;
}
.wp-image-6390 {
    max-width: 100%;
    height: auto;
}
.wp-image-6391 {
    max-width: 100%;
    height: auto;
}

.wp-image-13197 {
  max-width: 100%;
  height: auto;
  display: block;
  width: 530px;  /* tamaño base para móvil */
}

@media screen and (min-width: 768px) {
  .wp-image-13197 {
    width: 1024px;  /* tamaño para desktop */
  }
}
.wp-image-13159 {
    max-width: 100%;
    height: auto;
}

.info-window .btn-primary {
    width: 90%;
    background-color: blue;
    border: 2px solid gray;
    color: white;
    font-weight: 700;
    padding: 10px 10px;
    text-decoration: none;
    border-radius: 5px; /* Bordes redondeados */
    display: block;
    margin: 5px auto;
    cursor: pointer;
    text-align: center;
}

.btn-post-link:hover {
  background-color: #0056b3;
}

.info-window {
    background-color: #F9FAFB;
}

.info-window .btn-info {
    width: 90%;
    background-color: #00D084;
    border: 2px solid gray;
    color: white;
    font-weight: 600;
    padding: 10px 15px; /* Espaciado interno */
    text-decoration: none;
    border-radius: 5px; /* Bordes redondeados */
    display: block;
    margin: 5px auto;
    cursor: pointer;
    text-align: center;
}

/* filtro mapa */
#filtroCategoria {
    width: 100%;
    color: #fff;
    font-weight: 600;
    background-color: #1E293B;
}

/* botón geolocalización */
#locationButton {
    background-color: #00D084;
    width: 100%;
    margin-bottom: 0px;
    z-index: 10; /* Asegura que el botón esté sobre el resto del contenido */
}

.info-window .h2ventanamapa {
  background-color: #334155; /* Cambia el color de fondo */
  color:#ffff;
  padding: 10px;/* Añade espaciado interno */
  border-radius: 5px;
  text-align: center;
}

.info-window .parrafomapa {
    font-size: 18px;
    padding: 5px 10px;
}

.info-window .info-window-horario{
    padding: 10px;
    background-color: #FCB900;
    font-weight: 600;
}

.info-window .btn-excursion {
    width: 90%;
    background-color: #FF6900;
    border: 2px solid gray;
    color: white;
    font-weight: 700;
    padding: 10px 10px;
    text-decoration: none;
    border-radius: 5px; /* Bordes redondeados */
    display: block;
    margin: 5px auto;
    cursor: pointer;
    text-align: center;
}

/* Estilo para el botón desplegable */
.info-window .dropbtn {
    width: 100%;
    background-color: #FF6900; /* Ajusta el color según tus preferencias */
    border: 2px solid gray;
    color: white;
    font-weight: 700;
    padding: 10px 10px;
    text-decoration: none;
    border-radius: 5px; /* Bordes redondeados */
    display: block;
    margin: 5px auto;
    cursor: pointer;
    text-align: center;
    position: relative; /* Necesario para posicionar correctamente la flecha */
    box-sizing: border-box; /* Asegura que el padding y border estén incluidos en el ancho */
}

/* Contenedor del menú desplegable */
.info-window .dropdown {
    position: relative;
    display: block;
    width: 90%; /* Ocupar el mismo ancho que otros botones */
    margin: 5px auto; /* Centrado */
}

/* Contenido del menú desplegable, oculto inicialmente */
.dropdown-content {
    width: 90%;
    display: none;
    position: absolute;
    background-color: #f9f9f9; /* Color de fondo */
    min-width: 160px; /* Ancho mínimo */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Sombra */
    z-index: 1; /* Asegurar que se muestra encima de otros elementos */
}

/* Estilo de los enlaces dentro del menú */
.dropdown-content a {
    color: black; /* Color del texto */
    padding: 12px 16px; /* Espaciado */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Mostrar como bloque */
}

/* Cambio de color al pasar el mouse sobre los enlaces */
.dropdown-content a:hover {background-color: #f1f1f1}


/* Cambiar el color de fondo del botón al pasar el mouse */
.dropdown:hover .dropbtn {
    background-color: #fff;
    color: #FF6900;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropbtn::after {
    content: '\25BC'; /* Flecha hacia abajo */
    position: absolute;
    right: 16px; /* Ajusta según el padding del botón */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Evita que la flecha interfiera con el clic */
    color: white; /* Asegúrate de que la flecha sea visible */
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #0044cc; /* Un tono más oscuro para el efecto hover */
}
 #label-ayuntamiento {
    color: black;
    background-color: white;
}
#nombreExcursion {
    background-color: #334155;
    color:white;
    font-size: 25px;
    padding: 10px;
}
/* Estilos base para .taxista */
/* Estilos Base para Móviles */
.taxista {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px 0;
    border-radius: 8px;
    background-color: #FCB900;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid white;
    margin-bottom: 10px;
}

.details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 10px;
    margin: 10px 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%;
}
.details .nombre {
    font-size: 26px; /* Más grande para el nombre */
    color: #334155; /* Color azul para destacar el nombre */
    font-weight: 700;
    margin-bottom: 10px; /* Más espacio debajo del nombre */
}

.details .plazas {
    background-color: #f0f0f0;
    padding: 5px 10px; 
    border-radius: 5px; 
    display: inline-block; 
}
.details .modelo {
    font-style: italic; /* Estilo itálica para el modelo del coche */
    background-color: #FCB90099;
    padding: 5px;
    font-size: 18px;
    margin: 7px;
}
.detail.coste{
    font-style: italic;
    font-weight: 600;
    background: lightblue;
    padding: 5px;
}

.verificar-btn:hover {
    background-color: white;
    color: #046BD2;
    border: 2px solid #046BD2;
}

/* Ajustes para Pantallas Más Grandes */
@media (min-width: 600px) {
    .taxista {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Alinea los elementos al inicio del contenedor */
    }
}
    .nota-vinculante {
    color: #333;
    background-color: #BFBFBF;
    font-size: 10px;
    border-left: 4px solid #007bff;
    margin: 10px 0;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: sans-serif;
    font-style: italic;
    padding: 12px 20px;
}
    /* Estilos específicos para dispositivos de escritorio */
@media (min-width: 601px) {
    .nota-vinculante {
        font-size: 12px; /* Tamaño de fuente adecuado para escritorio */
    }
}
.button-container {
    display: flex;
    flex-direction: column; /* Para que el botón y el párrafo se apilen verticalmente */
    width: 100%; /* Ocupa todo el ancho disponible en su contenedor */
    align-items: center; /* Centra los elementos horizontalmente */
}

@media (min-width: 600px) {
    .button-container {
        flex-direction: column; /* Asegúrate de que sigue siendo en columna */
        align-items: center; /* Centra el contenido vertical y horizontalmente */
        width: 100%; /* Ocupa todo el ancho disponible en su contenedor */
    }
}

    .avatar {
        margin-right: 20px; /* Más espacio entre el avatar y los detalles */
        margin-bottom: 0; /* Elimina el margen inferior para alineación correcta */
    }

    .details {
        flex-grow: 1;
        
    }

    .verificar-btn {
        width: auto; /* Permite que el botón ajuste su ancho según el contenido */
        padding: 12px 35px; /* Un padding más grande para un botón más proporcionado */
        align-self: center; /* Alinea el botón al final del contenedor .taxista si prefieres que esté abajo */
        background-color: #046BD2;
    margin-top: 10px;
    border-radius: 8px;
    }
/* Estilos base que se aplican en todos los dispositivos */
#fecha {
    border-radius: 5px; /* Bordes redondeados para un aspecto moderno */
    border: 1px solid #ccc; /* Define un borde claro */
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 600px) {
    #fecha {
        width: 100%;
        font-size: 18px; /* Más grande para facilitar la interacción en pantallas táctiles */
        padding: 12px 20px; /* Mayor padding para una selección más fácil */
    }
}

/* Estilos específicos para dispositivos de escritorio */
@media (min-width: 601px) {
    #fecha {
        width: 30%;
        font-size: 16px; /* Tamaño de fuente adecuado para escritorio */
        padding: 10px 15px; /* Padding estándar para escritorio */
    }
}


/* Estilos base que se aplican en todos los dispositivos */
#ayuntamiento {
    border-radius: 5px; /* Bordes redondeados para un aspecto moderno */
    border: 1px solid #ccc; /* Define un borde claro */
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 600px) {
    #ayuntamiento {
        width: 100%;
        font-size: 18px; /* Más grande para facilitar la interacción en pantallas táctiles */
        padding: 12px 20px; /* Mayor padding para una selección más fácil */
    }
}

/* Estilos específicos para dispositivos de escritorio */
@media (min-width: 601px) {
    #ayuntamiento {
        width: 30%;
        font-size: 16px; /* Tamaño de fuente adecuado para escritorio */
        padding: 10px 15px; /* Padding estándar para escritorio */
    }
}
#botonUbicacion {
    margin-top: 10px;
}
#info-datos-geo {
    font-size: 10px;
}
/* Estilos base que se aplican en todos los dispositivos */
#pasajeros {
    border-radius: 5px; /* Bordes redondeados para un aspecto moderno */
    border: 1px solid #ccc; /* Define un borde claro */
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 600px) {
    #pasajeros {
        width: 100%;
        font-size: 18px; /* Más grande para facilitar la interacción en pantallas táctiles */
        padding: 12px 20px; /* Mayor padding para una selección más fácil */
    }
}

/* Estilos específicos para dispositivos de escritorio */
@media (min-width: 601px) {
    #pasajeros {
        width: 30%;
        font-size: 16px; /* Tamaño de fuente adecuado para escritorio */
        padding: 10px 15px; /* Padding estándar para escritorio */
    }
}
/* Estilos para días disponibles */
    .flatpickr-day.day-available {
    background-color: #00d084;
    border-radius: 50%;
    color: white;
}
.flatpickr-day.today{
    background-color: #fcb900;
    color: black;
    border-color: black;
}
.flatpickr-day.nextMonthDay.flatpickr-disabled.day-unavailable{
    background-color:transparent;
}
.flatpickr-day:hover{
    background: none;
}
@media (min-width: 600px) {
    #campos-excursion{
        display: flex;
        width: 100%;
}
}
#boton-buscar{
    display:flex;
    align-items: center;
    justify-content: center;
}
#buscarTaxi{
    width:100%;
    margin-top:15px;
}

/* fin estilos taxi */

.mc-image-principal { 
    display:flex;
    padding-top:15px;
    padding-bottom: 15px;
    justify-content: center;
}
.event-data {
    padding-bottom:10px;
}
.mc-datarange {
    background: #E9EBED;
    padding: 10px;
    border-bottom: 1px solid;
    font-weight: 600;
}
.sub-details {
    padding-top: 1px;
}
  @media (min-width: 350px) {
    .anuncio_inarticle {
      height: 180px;
      margin:10px;
    }
  }
 @media (min-width: 500px) {
    .anuncio_inarticle {
      height: 130px;
      margin:10px;
    }
  }
 @media (min-width: 800px) {
    .anuncio_inarticle {
      height: 200px;
      margin:10px;
    }
  }
    .titulo-anuncio{
      display:flex;
      justify-content:center;
      align-items:center;
  }
    .top3{
      background-color:#FCB900;
}
.alojamiento-menu{
    background-color: #fcb900;
}
.alojamiento-menu-de{
    background: lightgrey;
}

/* seccion de alojamientos*/
.seccion-alojamientos {
    font-family: sans-serif;
    padding: 20px;
    margin: 0; /* Elimina márgenes por defecto */
    box-sizing: border-box; /* Incluye padding y border en el ancho/altura */
}
.container-alojamientos {
    width: 100%;
    margin: auto;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    box-sizing: border-box;
}
.container-alojamientos-gris {
    width: 100%;
    margin: auto;
    background-color: #E9EBED;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    box-sizing: border-box;
}
.item-alojamientos {
    display: flex;
    justify-content: space-between; /* Mantiene los elementos espaciados entre sí */
    align-items: center; /* Centra los elementos verticalmente */
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
}
.item-alojamientos-gris {
    display: flex;
    justify-content: space-between; /* Mantiene los elementos espaciados entre sí */
    align-items: center; /* Centra los elementos verticalmente */
    padding: 10px;
    border-bottom: 1px solid #CBD5E1;
}
.item-alojamientos:last-child {
    border-bottom: none;
}
.title-alojamientos {
    flex: 1; /* Permite que el título ocupe el espacio disponible */
    font-weight: bold;
    color: #333;
    white-space: nowrap; /* Evita que el título se divida en líneas */
    overflow: hidden; /* Oculta cualquier desbordamiento de texto */
    text-overflow: ellipsis; /* Añade "..." si el texto es demasiado largo */
}
.rating-alojamientos {
    flex-shrink: 0; /* Evita que la calificación se reduzca */
    font-size: 20px;
    color: #4CAF50; /* Color verde para las calificaciones */
    display: flex; /* Asegura que los puntos estén en línea */
}
@media (min-width: 768px) { /* Estilos para pantallas más grandes */
    .container-alojamientos {
        width: 100%; /* Ancho más estrecho para pantallas grandes */
    }
    .item-alojamientos {
        padding: 15px; /* Más espacio */
    }
}
/* fin seccion alojamientos*/

/* seccion tabla comparativa */
.comparative-table {
    font-family: sans-serif;
    max-width: 600px;

    text-align: left;
}

.titulo-tabla-comparativa {
    text-align: center;
    color: #333;
    font-size: 20px;
}

.zone-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.zone-card ul {
    list-style: none;
    padding: 0;
}

.zone-card ul li {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.zone-card ul li:last-child {
    border-bottom: none;
}

.zone-card .titulo-zonas-tarjetas {
   text-align: center;
    background-color: #00d084;
    color: white;
    font-size: 25px;
    padding: 5px;
    margin: 3px;
}
.desc-zonas-tarjetas{
    text-align: center;
    font-size: 14px;
    font-style:oblique;
    margin:0;
}
.zone-card .puntos-tabla-compa
{
    color: #00d084;
    font-size: 18px;
    flex-shrink: 0;
}
/* FIN seccion tabla comparativa */

    /* Asegurarse que las columnas están en su orden normal en dispositivos grandes */
.column-invertida {
  display: flex;
  flex-direction: row;
}

/* Invertir las columnas solo en dispositivos móviles */
@media only screen and (max-width: 768px) {
  .column-invertida {
    flex-direction: column-reverse;
  }
}
.taxi-tour{
    background: #7bdcb5;
}


/* Contenedor principal de la webcam */
#contenedor-webcam {
  /* Que ocupe todo el ancho disponible pero sin exceder 600px */
  width: 100%;
  max-width: 600px;

  /* Mantiene la proporción 16:9 (puedes cambiar 16/9 a la proporción que prefieras) */
  aspect-ratio: 16 / 9;

  /* Para centrarlo en la pantalla en vistas desktop */
  margin: 0 auto;

  /* Evita scroll interno y recorta lo que se salga */
  overflow: hidden;
  position: relative;

  /* Para centrar la imagen dentro del contenedor */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagen (tanto la portada como la que insertas tras el clic) */
#contenedor-webcam img {
  /* Ajusta la imagen a las dimensiones del contenedor sin deformarla */
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Cursor de mano para indicar que se puede hacer clic (en la portada) */
  cursor: pointer;
}