/* These styles are generated from project.scss. */
:root {
  --azul1: #232e31;
  --azul1-dark: #2e3e42;
  --azul2: #d8e9ef;
  --azul3: #69c2e5;
  --azul3-dark: #08adef;
  --azul3-light: #95e0fe;
  --azul4: #3c5863;
  --azul4-dark: #2b3f47;
  --azul4-light: #5b8393;
  --azul5: #071b24;
  --gris1: #8d9ea4;
}

/* --- Dark Mode Overrides --- */
html[data-theme="dark"] {
    --resultados-container-bg: rgba(33, 37, 41, 0.7); /* Darker transparent */
    --resultados-container-text: #f8f9fa;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.color-primary {
  color: var(--primarycolor);
}

#map {
  height: 400px;
}

.dropdown-menu {
  max-height: 200px;
  overflow-y: auto;
  z-index: 1001;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.fs-7 {
  font-size: .85rem
}

.cuadrado {
  height: 80px;
  width: 80px;
}

.cuadrado i {
  font-size: 3rem;
  color: white;
}

.bg-1 {
  background-color: #4db0ce !important;
}

.bg-2 {
  background-color: #ffda55 !important;
}

.bg-3 {
  background-color: #6dd6aa !important;
}

#navbar {
  z-index: 1003;
  border-radius: 19px;
  box-shadow: 0 0 4px 0px;
  height: 4.3rem;
}

/* Target links within your specific navbar */
#navbar .navbar-nav .nav-link {
  color: white; /* Default text color for nav links */
  text-decoration: none; /* Ensure no underline by default */
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out; /* Smooth transition for hover effect */
}

#navbar .navbar-nav .nav-link:hover {
  color: var(--azul3-light); /* Light grey color on hover - CHOOSE YOUR PREFERRED HOVER COLOR! */
  text-decoration: underline; /* Add underline on hover */
}

/* Ensure the icons within the links also adopt the color, if they are font icons */
#navbar .navbar-nav .nav-link .bi { /* Targeting Bootstrap Icons specifically */
  color: inherit; /* Make icon color the same as the link text color */
}

#btnAbout {
  color: #16b3eb !important;
}

/* ======= OTROS ======= */
.cursor-pointer {
  cursor: pointer !important;
}

#map-holder {
  flex-grow: 100;
  padding-left: 400px;
}

#map {
  height: 91vh;
}

.mt-nav {
  margin-top: 3.7rem !important;
  z-index: 0;
}

.pt-nav {
  padding-top: 4.1rem !important;
}

/* ======= COLORES ======= */

.bg-azul1 {
  background-color: var(--azul1) !important;
}

.bg-azul2 {
  background-color: var(--azul2) !important;
}

.bg-azul3 {
  background-color: var(--azul3) !important;
}

.bg-azul3:hover,
.bg-azul3:focus,
.bg-azul3:active {
  background-color: var(--azul3-dark) !important;
}

.bg-azul4 {
  background-color: var(--azul4) !important;
}

.bg-azul5 {
  background-color: var(--azul5) !important;
}

/* ======= Text Color Utilities ======= */

.text-azul1 {
  color: var(--azul1) !important;
}

.text-azul1:hover,
.text-azul1:focus,
.text-azul1:active {
  color: var(--azul1-dark) !important;
}

.text-azul2 {
  color: var(--azul2) !important;
}

.text-azul2:hover,
.text-azul2:focus,
.text-azul2:active {
  color: var(--azul2-dark) !important;
}

.text-azul3 {
  color: var(--azul3) !important;
}

.text-azul3:hover,
.text-azul3:focus,
.text-azul3:active {
  color: var(--azul3-dark) !important;
}

.text-azul4 {
  color: var(--azul4) !important;
}

.text-azul4:hover,
.text-azul4:focus,
.text-azul4:active {
  color: var(--azul4-dark) !important;
}

.text-azul5 {
  color: var(--azul5) !important;
}

.text-gris1 {
  color: var(--gris1) !important;
}

.text-azul5:hover,
.text-azul5:focus,
.text-azul5:active {
  color: var(--azul5-dark) !important;
}

.text-azul6 {
  color: #232d32 !important;
}

/* ======= Border Color Utilities ======= */

.border-azul1 {
  border-color: var(--azul1) !important;
}

.border-azul1:hover,
.border-azul1:focus,
.border-azul1:active {
  border-color: var(--azul1-dark) !important;
}

.border-azul2 {
  border-color: var(--azul2) !important;
}

.border-azul2:hover,
.border-azul2:focus,
.border-azul2:active {
  border-color: var(--azul2-dark) !important;
}

.border-azul3 {
  border-color: var(--azul3) !important;
}

.border-azul3:hover,
.border-azul3:focus,
.border-azul3:active {
  border-color: var(--azul3-dark) !important;
}

.border-azul4 {
  border-color: var(--azul4) !important;
}

.border-azul4:hover,
.border-azul4:focus,
.border-azul4:active {
  border-color: var(--azul4-dark) !important;
}

.border-azul5 {
  border-color: var(--azul5) !important;
}

.border-azul5:hover,
.border-azul5:focus,
.border-azul5:active {
  border-color: var(--azul5-dark) !important;
}

/* ======= Button Utilities ======= */

.btn-azul1 {
  background-color: var(--azul1) !important;
  color: #fff;
  border-color: var(--azul1) !important;
}

.btn-azul1:hover,
.btn-azul1:focus,
.btn-azul1:active {
  background-color: var(--azul1-dark) !important;
  border-color: var(--azul1-dark) !important;
}

.btn-azul1:disabled {
  background-color: var(--azul1-dark) !important;
  color: #fff;
  border-color: var(--azul1-dark) !important;
}

.btn-azul1:hover,
.btn-azul1:focus,
.btn-azul1:active {
  background-color: var(--azul1-dark) !important;
  border-color: var(--azul1-dark) !important;
}



.btn-azul2 {
  background-color: var(--azul2) !important;
  color: #fff;
  border-color: var(--azul2) !important;
}

.btn-azul2:hover,
.btn-azul2:focus,
.btn-azul2:active {
  background-color: white !important;
  border-color: white !important;
  color: var(--azul2);
}

.btn-azul2inverso {
  background-color: white !important;
  border-color: white !important;
  color: var(--azul2);
}

.btn-azul2inverso:hover,
.btn-azul2inverso:focus,
.btn-azul2inverso:active {
  background-color: var(--azul2) !important;
  color: #fff;
  border-color: var(--azul2) !important;
}


.btn-azul3 {
  background-color: var(--azul3) !important;
  color: var(--azul1);
  border-color: var(--azul3) !important;
}

.btn-azul3:hover,
.btn-azul3:focus,
.btn-azul3:active {
  background-color: var(--azul3-dark) !important;
  border-color: var(--azul3-dark) !important;
}

.btn-azul3:disabled {
  background-color: var(--azul3-light) !important;
  color: #fff;
  border-color: var(--azul3-light) !important;
}

.btn-azul4 {
  background-color: var(--azul4) !important;
  color: #fff;
  border-color: var(--azul4) !important;
}

.btn-azul4:hover,
.btn-azul4:focus,
.btn-azul4:active {
  background-color: var(--azul4-dark) !important;
  border-color: var(--azul4-dark) !important;
  color: #fff;
}

.btn-azul4:disabled {
  background-color: var(--azul4-light) !important;
  border-color: var(--azul4-light) !important;
  color: #fff;
}

.btn-azul5 {
  background-color: var(--azul5) !important;
  color: #000;
  border-color: var(--azul5) !important;
}

.btn-azul5:hover,
.btn-azul5:focus,
.btn-azul5:active {
  background-color: var(--azul5-dark) !important;
  border-color: var(--azul5-dark) !important;
}

/* ======= Link Color Utilities ======= */

.link-azul1 {
  color: var(--azul1) !important;
}

.link-azul1:hover,
.link-azul1:focus,
.link-azul1:active {
  color: var(--azul2) !important;
}

.link-azul2 {
  color: var(--azul2) !important;
}

.link-azul2:hover,
.link-azul2:focus,
.link-azul2:active {
  color: var(--azul2-dark) !important;
}

.link-azul3 {
  color: var(--azul3) !important;
}

.link-azul3:hover,
.link-azul3:focus,
.link-azul3:active {
  color: var(--azul3-dark) !important;
}

.link-azul4 {
  color: var(--azul4) !important;
}

.link-azul4:hover,
.link-azul4:focus,
.link-azul4:active {
  color: var(--azul4-dark) !important;
}

.link-azul5 {
  color: var(--azul5) !important;
}

.link-azul5:hover,
.link-azul5:focus,
.link-azul5:active {
  color: var(--azul5-dark) !important;
}

.charts-container {
  z-index: 1001;
  pointer-events: none;
}

.charts {
  pointer-events: all;
}

.bg-light-transparent {
  background-color: #f8f9faca;
}

.text-dark-on-light {
  color: #212529 !important; /* Texto oscuro */
}

.bg-dark-transparent {
  background-color: rgba(33, 37, 41, 0.75) !important; /* Ejemplo de color oscuro con transparencia */
  /* color: #f8f9fa !important;  Si necesitas que el texto cambie a claro */
}

/* Clase adicional si quieres que el texto cambie de color con el tema */
.text-light-on-dark {
  color: #f8f9fa !important; /* Texto claro */
}

.br-personalized {
  border-radius: 15px;
}

.br-personalized1 {
  border-radius: 10px;
}

.apexcharts-svg {
  border-radius: 15px;
  box-shadow: 0px 0px 15px -10px black;
}

.shadow-personalized {
  box-shadow: 0px 0px 12px -6px black;
}

.fs-65 {
  font-size: .92rem;
  font-weight: 500;
}

.z-1 {
  z-index: 1;
}

.t-0 {
  top: 0;
}

.linea {
  width: 10px;
}

#resultados-tag {
  writing-mode: sideways-lr;
  top: 40%;
  z-index: 1001;
  pointer-events: all;
  border-radius: 10px 0 0 10px;
}