/* Modal más alto para 3 alertas visibles sin scroll */
#modalInicio .modal-dialog {
  max-width: 950px;
  width: 90%;
  max-height: none; /* Quitamos límite */
  height: auto;     /* Ajuste automático */
}


#modalInicio .modal-content {
  /* Aquí cambia el fondo blanco */
  background: linear-gradient(180deg, rgb(255, 255, 255), rgb(255, 255, 255));

  /* Opcional: agrega blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Mantén otras propiedades */
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  
}
#modalInicio .modal-header {
  border-bottom: none; 
  padding-bottom: 0.75rem; 
}


#modalInicio .modal-body {
  padding-top: 1rem; 
}

#modalInicioLabel {
  color: white;
  text-align: center;
  width: 100%;
}


/* Ajustamos altura de las imágenes para que no ocupen demasiado */
.alerta-item img {
  max-height: 200px; /* Altura fija más baja para que quepan */
  width: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s ease;
  
}

.alerta-item img:hover {
  transform: scale(1.03);
}

/* Ajustamos el texto para que no ocupe mucho */
.alerta-item h3 {
  font-size: 1.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
  color: #222;
}

.alerta-item p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 0;
}

/* El contenedor de alertas con display flex para que estén alineadas */
#alertas-contenedor {
  display: flex;
  
  flex-wrap: nowrap; 
}

/* Cada alerta ocupa 1/3 del contenedor */
.alerta-item {
  flex: 0 0 32%; /* Ancho fijo para 3 tarjetas */
  margin-bottom: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Botones y paginación más grandes para mejor visibilidad */
#btnAnterior, #btnSiguiente, [data-dismiss="modal"] {
  margin-top: 10px;
  border-color: rgba(0, 123, 255, 0.5);
  color: rgba(0, 123, 255, 0.9);
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}

#paginacion-indicadores span {
  width: 16px;
  height: 16px;
  margin: 0 6px;
  background-color: #d0d7e4;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#paginacion-indicadores .activo {
  background-color: #2563eb;
}

.alerta-item h3 {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
  text-align: center;

  word-break: break-word; /* Rompe palabras largas */
  white-space: normal;    /* Permite múltiples líneas */
  overflow-wrap: break-word;
  max-width: 100%;        /* Asegura que no se salga */
}