/* Personalizar el estilo de los radio buttons */
.dropdown-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    margin-right: 10px;
    vertical-align: middle;
    cursor: pointer;
}
.dropdown-item input[type="radio"]:checked {
    background-color: #014375;
    border-color: #014375;
}

/* Contenedor de imagen de cabecera */
.image-container_index {
    position: relative;
    width: 100%;
    height: 528px;
    overflow: visible; /* permite que la barra sobresalga */
    margin-top: 94px; /* respeta el navbar */
}

/* Imagen de cabecera */
.img-index {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* Título sobre la imagen */
.titulo-container {
    position: absolute;
    top: 40%;
    left: 0;
    padding: 0 80px; /* paddings laterales iguales al contenido */
    transform: translateY(-50%);
    color: white;
    z-index: 2;
}

.titulo-principal {
    font-size: 48px;
    margin: 0;
    font-weight: 700;
}

/* Contenedor de la barra de búsqueda */
.busqueda-container {
    position: relative;
    margin-top: -120px; /* mitad de la barra sobre la imagen */
    padding: 0 80px; /* paddings laterales iguales al título y contenido */
    z-index: 10;
    display: flex;
    justify-content: center;
}

/* Formulario de búsqueda */
.busqueda-form-index {
    width: 100%;
    max-width: 100%; /* se adapta al ancho del contenedor respetando paddings */
    height: 196px;
    border-radius: 10px;
    background-color: white;
    display: flex;
    flex-direction: column; /* ✅ organiza en columna */
    align-items: stretch;      /* ✅ los hijos ocupan todo el ancho */
    justify-content: center; /* ✅ centro vertical */
    padding: 20px; /* espacio interno */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    gap: 15px; /* espacio entre barra y filtros */
}

/* Contenido interno del formulario */
/* La barra sola se mantiene en fila */
.busqueda-inner {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%; /* ✅ barra al 100% */
  }

/* Input personalizado */
.input-group-custom {
    display: flex;
    flex: 1;
    align-items: center;
    background-color: white;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.input-group-custom input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 16px;
}

.input-icon {
    margin-right: 10px;
    color: #014375;
    display: flex;
    align-items: center;
}

/* Botón personalizado */
.buscar-btn-index {
    background-color: #014375;
    color: white;
    border: none;
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.buscar-btn-index:hover {
    background-color: #012a56;
}
/* Los filtros van debajo */
.filtros-wrapper {
    margin-top: 15px;
  }
/* Contenedor de los filtros debajo de la barra */
.filtros-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; /* para que los filtros salten de línea en pantallas chicas */
    justify-content: flex-start;  /* ✅ filtros a la izquierda */
  }


/* Dropdown general */
.dropdown-filtro {
    position: relative;
}

/* Botón que abre el dropdown */
.dropdown-btn {
    background: none;          /* ✅ sin fondo */
    color: #014375;            /* ✅ solo texto */
    border: none;              /* ✅ sin borde */
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}
.flecha-icon {
    width: 24px;
    height: 24px;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

/* Cuando el dropdown está activo → gira la flecha */
.dropdown-filtro.active .flecha-icon {
    transform: rotate(180deg);
}

/* Contenido desplegable */
.dropdown-content {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background-color: white;
    min-width: 200px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    padding: 10px;
    z-index: 20;
    flex-direction: column;
}

/* Mostrar dropdown al hover o al clic con JS */
.dropdown-filtro.active .dropdown-content {
    display: flex;
}

/* Estilo de los labels con radio */
.dropdown-content label {
    display: flex;
    align-items: center;
    padding: 5px 0;
    cursor: pointer;
}

.dropdown-content input[type="radio"] {
    margin-right: 10px;
}

/* Botones internos del dropdown */
.dropdown-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.btn-borrar {
    background-color: #ccc;
    color: #333;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.btn-borrar:hover {
    background-color: #bbb;
}

.btn-aplicar {
    background-color: #014375;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.btn-aplicar:hover {
    background-color: #012a56;
}


.contenedor-imagenes {
    padding: 0 80px; /* mismos paddings laterales que la barra de búsqueda */
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.galeria-chicos {
    display: grid;
    grid-template-columns: repeat(auto-fit, 198px);
    gap: 20px;
    width: 100%;
    justify-content: center;
    
}


/* Estilos de la card, mismos del carrusel */
.card_galeria {
    width: 100%;
    max-width: 198px;
    height: 295px;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.card-img-top_galeria {
    width: 100%;
    height: 198px;
    object-fit: cover;
}

.card-body_galeria {
    width: 100%;
    height: 95px;
    padding: 5px 10px;
    text-align: left;
    background-color: transparent;
    border: 1px solid #014375;
    border-radius: 0 0 15px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card-title_galeria {
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0;
    color: #014375;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 2; /* máximo 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px; /* reserva espacio */
}

.card-body_galeria .card-fecha,
.card-body_galeria .card-lugar {
    font-size: 0.75rem;
    font-weight: normal;
    margin: 0;
    color: #014375;
    line-height: 1.2;
}

.fecha-negrita {
    font-weight: bold;
}

.icon-outline {
    color: transparent;
    -webkit-text-stroke: 1px #014375;
    text-stroke: 1px #014375;
}

/*INDICADORES DE FILTROS */
.indicador-filtros-galeria {
  width: 100%;
  padding: 0 5%;
  margin: 30px 0 15px 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filtros-info {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
}
.fila-superior {
  display: flex;
  gap: 6px; 
  align-items: center;
}
.filtros-label {
  color: #555;
  font-weight: 500;
}

.texto-filtros-activos {
  color: #014375;
  font-weight: 600;
}

.btn-limpiar-global {
  background-color: #e7f1ff;       /* azul muy suave */
  border: 1px solid #014375;
  color: #014375;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-limpiar-global:hover {
  background-color: #014375;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25);
  transform: translateY(-1px);
}

.btn-limpiar-global:active {
  transform: translateY(0);
  box-shadow: none;
}
.mobile-filtros-wrapper{
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .indicador-filtros-galeria {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
  }
}
/* Hover */
.card_galeria:hover .card-body_galeria {
    background-color: #014375;
    border-color: #014375;
}

.card_galeria:hover .card-body_galeria * {
    color: white !important;
}
/* Por defecto lo ocultamos */
.btn-filtros-mobile {
    display: none;
}
.indicador-filtros-galeria {
  margin: 15px 0 10px 0;
}

.texto-filtros-activos {
  font-size: 15px;
  font-weight: 600;
  color: #1e73be;
}
/********  BOTON "CARGAR MAS" DE GALERIA 2 ************/
.btn.btn-outline-primary.btn-cargar-mas {
  color: #014375;
  border-color: #014375;
  background-color: transparent;
}

.btn.btn-outline-primary.btn-cargar-mas:hover {
  background-color: #014375;
  color: #fff;
  border-color: #014375;
}

/*============================= VISTA RESPOSIVE ==============================*/

/* Ajuste para móviles */
@media (max-width: 768px) {
    .cabecera {
        margin-top: 0 !important;
        padding-top: 1px; /* fuerza al navegador a no colapsar el margen del h1 */
        overflow: hidden; /* opcional, también evita el colapso */
      }
 /* ======== Banner ======== */
  .image-container_index {
    position: relative;
    width: 100%;
    height: 252px;
    overflow: hidden;
    margin-top: 51px;
  }

  .image-container_index .img-index {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .titulo-container {
    position: absolute;
   
    left: 0;
    width: 100%;
    padding: 0 16px; /* respeta el padding lateral */
    text-align: left;
  }
  .titulo-principal{
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
  }
  /* ======== Barra de búsqueda ======== */
  .busqueda-container {
    position: relative;
    margin-top: -67px; /* Mitad de la barra para que quede semi-superpuesta */
    padding: 0 16px; /* Paddings laterales coherentes con mobile */
    z-index: 2;
  }

  .busqueda-form-index {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    height: 134px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
  }

  .busqueda-inner {
    display: flex;
    flex-direction: column; /* uno arriba del otro */
    align-items: stretch;   /* ocupan todo el ancho */
    gap: 12px;              /* espacio entre el input y el botón */
  }

  .input-group-custom {
    flex: 1;
    position: relative;
  }

  .input-group-custom input[type="search"] {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    padding-left: 36px;
    font-size: 14px;
    -webkit-appearance: none; /* quita estilos por defecto de iOS */
    background-color: #fff; /* forzar fondo blanco */
    -moz-appearance: none;
    appearance: none;
  }

  .input-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
  }

  .buscar-btn-index {
    height: 40px;
    padding: 0 20px;
    border: none;
    background-color: #014375;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
  }

  /* ======== Ocultar filtros en mobile ======== */
  .filtros-wrapper {
    display: none;
  }

  #offcanvasFiltros {
    width: 100%;      /* ocupa todo el ancho en mobile */
    max-width: 100%;
  }
  .offcanvas-header{
    border-bottom: 0.5px solid #ccc;
  }

  /* Contenedor del botón, alineado a la derecha */
  .filtros-btn-container {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* Botón solo texto + icono */
  .btn-filtros-mobile {
    background: none;
    border: none;
    color: #014375;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  /* Cambiar color del icono si hace falta */
  .btn-filtros-mobile i {
    font-size: 18px;
  }

  .offcanvas-body {
    padding: 20px;
  }

  .filtro-block {
    margin-bottom: 20px;
  }

  .filtro-titulo {
    font-weight: bold;
    margin-bottom: 10px;
    color: #014375;
  }

  .filtro-block label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    cursor: pointer;
  }

  .filtro-block input[type="radio"] {
    margin-right: 8px;
  }

  .offcanvas-actions .btn-borrar {
    background-color: #ccc;
    color: #333;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
  }

  .offcanvas-actions .btn-aplicar {
    background-color: #014375;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
  }


  /*======== CARD CHICOS ==========*/
  .contenedor-imagenes {
    padding: 0 16px; /* mismo padding lateral que barra y filtros */
    margin-top: 20px;
  }

  .galeria-chicos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas flexibles */
    gap: 16px; /* espacio entre cards */
  }

  /*======== CARD CHICOS MOBILE ==========*/

.card_galeria {
  width: 100%;
  height: 260px; /* ajustá este valor */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.card-img-top_galeria {
  width: 100%;
  height: 160px; /* imagen un poco más chica que desktop */
  object-fit: cover;
}

.card-body_galeria {
  flex: 1; /* 🔥 ocupa el resto del espacio */
  padding: 8px;
  border: 1px solid #014375;
  border-radius: 0 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: #fff;
}

.card-title_galeria {
  font-size: 14px;
  font-weight: 700;
  color: #014375;
  margin: 0;
  line-height: 1.2;
  min-height: 32px;
}

.card-fecha,
.card-lugar {
  display: block; /* 🔥 volver a mostrar */
  font-size: 12px;
  margin: 0;
  color: #014375;
  line-height: 1.2;
}

/* ============================= */
/* BLOQUE PROVINCIA */
/* ============================= */

.filtro-block {
  margin-bottom: 18px;
}

/* Botón título colapsable */
.filtro-titulo {
  font-size: 15px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 12px 0;
  width: 100%;
  text-align: left;
  color: #222;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover suave */
.filtro-titulo:hover {
  color: #000;
}

/* Flecha */
.flecha-provincias {
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Rotación cuando está abierto */
.filtro-titulo[aria-expanded="true"] .flecha-provincias {
  transform: rotate(180deg);
}

/* Contenedor collapse */
#collapseProvincias {
  padding-top: 10px;
}

/* Select */
#collapseProvincias select {
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 10px 12px;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* Focus */
#collapseProvincias select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
  outline: none;
}

/* Cuando hay provincia seleccionada */
select[name="provincia"]:not([value=""]) {
  font-weight: 500;
}
.indicador-filtros-galeria{
  display: none !important;
}

.mobile-filtros-wrapper {
  display: flex;
  align-items: flex-start; 
  padding: 0 16px;
  margin: 10px 0;
  gap: 10px;
}

.indicador-filtros-galeria-mobile {
  display: flex;
  flex-direction: column; 
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.filtros-info {
  display: flex;
  flex-direction: column;
  width: 100%;      /* 🔥 importante */
  min-width: 0;
}
.fila-superior {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 🔥 CLAVE */
  gap: 6px; /* controla la separación real */
  width: 100%;
}
.texto-filtros-activos {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #014375;
  width: 100%;
}
/* BOTÓN LIMPIAR (igual prensa) */
.limpiar-mobile-container {
  display: none;
  flex-shrink: 0;
}

.limpiar-mobile-container.activo {
  display: block;
}

.btn-limpiar-global {
  font-size: 13px;
  color: #014375;
  background: none;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.filtros-btn-container {
  flex-shrink: 0;
  margin-left: auto;
}
.filtros-label {
  margin: 0;
}


  }