/*ana*/

:root {
  --bs-body-font-family: "Karla", sans-serif;
  --bs-body-color:#343A40;
}

.navbar {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.blockquote {
  font-size: 1.5rem;
}

#buscadorsuperior {
  padding: 1em;
  max-width: 800px;
}


.alert-soft-success {
  color: #0D503C;
  background:#D2F4EA;
  border: 1px solid #0D503C;
  font-size: 0.9em; 
}

.alert-soft-success i, .alert-soft-info i  {
  font-size: 1.2em; 
}

.alert-soft-info {
  border: 1px solid #09a5be;
  font-size: 0.9em; 
}

.item-resultado-alerta {
  color: #0D503C;
  font-weight: 700;
  text-align: left;
  display: inline-block; 
  height: 36px; 
  line-height: 36px;
  margin-right: 1em;
 }

 .card-subtitle {
  text-transform: none !important; 
}

.list-separator .list-inline-item:not(:last-child) {
  padding-right: 0.5rem;
}

.card-sm > .card-footer {
  padding-top: 0.5em !important;
  padding-bottom: 1em !important; 

}

.card-sm > .card-body {
  padding: 1rem 1rem;
}

.mapa-small {
  background-color: cornsilk;
border-radius: 1rem;
height: 200px;
}


.btn-outline-primary {
border-color: #377dff !important;
  }

.caracteristica {
    color: #343A40;
    border-radius: 8px;
    border: 1px solid #ABB5BE;
    padding: 0.35em;
    background-color: white;
    font-size: 1em !important;
}

.material-symbols-outlined {
  font-size: 1.3em !important;
  vertical-align: middle; /* Ajusta la alineación a la mitad del texto */
}


#map {
    height: 200px; /* Altura del mapa */
    width: 100%; /* Ancho del mapa */
}

.quantity-counter {
  min-width: 7rem;
}

.circle-dashboard {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  margin: 0 auto; /* Centra el círculo en su contenedor */
}


.gris {
  border: 3px solid #333;; /* Color y grosor de la línea */
  color: #333; /* Color del número */
}

.verde {
  border: 3px solid var(--bs-success); 
  color:  var(--bs-success); 
}




/* CSS para cambiar a tres líneas en pantallas pequeñas */
@media (max-width: 576px) {
  .textarea-sm-3 {
      rows: 3; /* Cambia el número de filas a 3 */
  }
}