.pagination {
  display: flex;
  justify-content: left;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #007bff;
  color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}
.areacustom{
  border: 1px solid #007bff !important;
  color: #007bff !important;
  margin-top: 25px !important;
  width: 350px !important;
  height: 150px !important;
}
.pagination a.selected {
  background-color: #007bff;
  color: white;
}

.pagination a:hover {
  background-color: #e9ecef;
}
.selected {
  background-color: #007bff; /* Color de fondo para la opción seleccionada */
  color: white; /* Color del texto */
}

.indicador {
  font-size: 1.5em;
  font-weight: bold;
  padding: 10px;
}

.verde {
  color: green;
}

.amarillo {
  color: orange;
}

.rojo {
  color: red;
}

h3 {
  font-size: 20px !important;
  font-weight: bold !important; /* Opcional: para que el texto esté en negrita */
  color: #333 !important; /* Opcional: cambia el color según lo que necesites */
}

.indicador-referencia {
  width: 60px; /* Ancho del cuadrado */
  height: 60px; /* Alto del cuadrado */
  font-size: 1.2rem; /* Tamaño de fuente ajustado */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  border-radius: 4px; /* Bordes rectos para cuadrados */
  margin-bottom: 5px; /* Espacio entre el número y la descripción */
}

.bg-rojo {
  background-color: #e74c3c; /* Rojo */
}

.bg-naranja {
  background-color: #e67e22; /* Naranja */
}

.bg-amarillo {
  background-color: #f1c40f; /* Amarillo */
}

.bg-verde {
  background-color: #2ecc71; /* Verde */
}

.text-center {
  font-size: 0.9rem; /* Fuente más pequeña para las etiquetas */
}