/* Estilos generales */

#biblioteca {
        background-image: url('../miner/nueva_galeria/pagina_web/web-miner.jpeg');
        background-size: cover;
        background-position: center;
        height: 100vh; /* Ajusta la altura según lo necesario */
        position: relative;
    }

.hero {
   text-align: left;
   margin: 0;
   padding: 40px 0;
   background-color: transparent;   
   margin-top: 60px; /* Añade un margen superior para desplazar hacia abajo */
}
.hero h4 {
  font-size: 1.5em; /* Tamaño de la fuente ajustable */
  font-weight: bold;
  white-space: nowrap; /* Mantiene el texto en una sola línea */
  width: auto; /* Ajusta el ancho del contenedor al contenido */
  overflow: visible; /* Permite que el texto se expanda sin cortarse */
  text-align: left; /* Alinea el texto a la izquierda dentro del contenedor */
  display: block;
  color: #f29f05;
  text-transform: uppercase;
  margin-left: 710px; /* Ajusta el espacio a la izquierda del texto */
}

.hidden-policy {
    display: none;
}

.search-filter {
  display: flex; /* Asegúrate de que sea flexbox para el alineamiento */
  justify-content:flex-end; /* Alinea los elementos al inicio del contenedor */
  padding: 1px; /* Ajusta el espaciado interno según sea necesario */
  background-color: transparent;
  width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

.search-filter input {
  margin-right: 20px; /* Espacio entre el campo de búsqueda y el filtro */
}

.search-filter input,
.search-filter select {
  width:18%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Ajusta el tamaño mínimo de las tarjetas */
  gap: 20px;
  padding: 20px;
  justify-content: right; /* Alinea las tarjetas a la derecha */
}

.policy-card {
  background-color: rgba(0, 14, 25, 0.6); /* Blanco con transparencia */
  border: 1px solid #ddd;
  border-radius: 1px;
  padding: 3px; /* Reduce el padding */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.policy-card h2 {
  font-size: 1em; /* Reduce el tamaño del texto */
  margin: 5px 0; /* Ajusta el margen superior e inferior */
  color: #ddd;
}

.policy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.policy-card h2 {
  font-size: 1.1em; /* Ajusta el tamaño del título */
  margin: 0; /* Reduce los márgenes del título */
}

.policy-card p {
  color: #ddd;
}

.policy-card a {
  display: inline-block;
  margin-top: 1px;
  padding: 10px 15px;
  background-color: #004080;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

/* Listas politicas Estilos para la búsqueda y filtros */
.search-filter {
    margin-bottom: 20px;
}

.search-filter input[type="text"], .search-filter select {
    padding: 10px;
    margin-right: 10px;
    font-size: 16px;
}

/* Estilos para el grid de políticas */
.policies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.policy {
    display: flex;
    align-items: center; /* Alinea verticalmente el ícono y el texto */  
    border-bottom: 1px solid #ccc; /* Líneas divisorias entre políticas */
    background-color: rgba(0, 14, 25, 0.6); /* Blanco con transparencia */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px; /* Reduce el padding */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Títulos de las políticas */
.policy-title {
    font-size: 18px;
    font-weight: bold;
    color: white; /* Color del texto */
    text-decoration: none;
    display: flex;
    align-items: center; /* Alinea el ícono y el texto horizontalmente */
}
/* Icono de descarga */
.download-icon {
    color: white; /* Rojo para el ícono de PDF */
    font-size: 24px;
    margin-right: 8px; /* Espacio entre el ícono y el texto */
}

/* Cambia el color del título y el icono al pasar el mouse */
.policy-title:hover, .download-icon:hover {
    color: #f29f05;
}

/* ----- Ajustes para dispositivos móviles ----- */
@media (max-width: 768px) {
  .hero h4 {
    font-size: 1.2em; /* Reduce el tamaño de la fuente */
    margin-left: 20px; /* Ajusta el margen para móviles */
  }

  .search-filter {
    flex-direction: column; /* Coloca los elementos de búsqueda en columna */
    align-items: stretch;
    padding: 10px;
  }

  .search-filter input,
  .search-filter select {
    width: 100%; /* Ocupa todo el ancho disponible en móviles */
    margin-bottom: 10px; /* Espaciado entre los inputs */
  }

  .policy-grid {
    grid-template-columns: repeat(1, 1fr); /* Una columna para móviles */
    gap: 15px;
  }

  .policy-card {
    padding: 10px; /* Ajusta el padding para móviles */
  }

  .policy-card h2 {
    font-size: 0.9em; /* Reduce el tamaño del texto */
  }

  .policy-card a {
    padding: 8px 10px; /* Ajusta el padding de los enlaces */
    font-size: 0.9em;
  }

  .policies-grid {
    grid-template-columns: 1fr; /* Una columna en móviles */
  }
}

@media (max-width: 480px) {
  .hero h4 {
    font-size: 1em; /* Reduce aún más el tamaño de la fuente */
    margin-left: 10px;
  }

  .policy-card h2 {
    font-size: 0.8em;
  }

  .policy-card a {
    padding: 6px 8px;
    font-size: 0.8em;
  }

  .policy-grid {
    gap: 10px; /* Reduce el espacio entre tarjetas en móviles pequeños */
  }

  .policy-card {
    padding: 8px;
  }
}