:root {
  --primary_color: #37b7c369;
  --primary_color_soft: #899b9f;
  --white_color: #fff;
  --height_header: 60px;
  --padding_left_right: 2rem;
  --max_widht: 1100px;
}

/*
padding: 0;
box-sizing: border-box;
*/
.header {
  height: var(--height_header);
  background-color: white;
  .navbar {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 4;
    padding: 0 var(--padding_left_right);
    width: min(3000px - 100%);
    margin: 0 auto;

    .logo-mobile {
      height: 0;
      transition: all 0.3s;
    }
    .label_menu {
      margin-top: 0.5rem;
      .list_icon {
        color: #37b7c3;
        font-size: 18px;
        cursor: pointer;
      }
    }
    ol,
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .menu {
      display: none;
    }
    .menu:checked ~ .ul_links {
      height: calc(100vh - var(--height_header));
    }
    .menu:checked ~ .logo-mobile {
      position: absolute;
      height: auto;
      width: 100%;
      opacity: 9%;
      top: 233px;
      left: 0;
      display: block !important ;
    }
    .ul_links {
      width: 100%;
      background-color: #37b7c3;
      position: absolute;
      top: var(--height_header);
      left: 0;
      /* height: calc(100vh - var(--height_header));*/
      height: 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 3rem;
      transition: all 0.3s;
      .li_links {
        z-index: 2;
        a {
          text-decoration: none;
        }
        .link {
          font-size: 1.6rem;
          color: var(--white_color);
          font-weight: 700;
        }
        .link:hover {
          font-size: 1.9rem;
          text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
            1px 1px 0 #000;
        }
      }
    }
  }
}

@media (min-width: 936px) {
  .header {
    height: 60px;
    .navbar {
      justify-content: center;
      .label_menu {
        display: none;
      }
      .logo {
        height: auto;
        width: 100px;
        position: absolute;
        left: 35px;
        overflow: hidden;
      }
      .logo-mobile {
        display: none;
      }
      .ul_links {
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        gap: 1rem;
        background-color: transparent;

        .li_links {
          z-index: 2;
          .link {
            font-weight: 500;
            font-size: 1rem;
            padding: 0.2rem 0.7rem;
            color: #000000;
            transition: all 0.3s;
            padding: 0.2rem 0.7rem;
          }
          .link:hover {
            color: #37b7c3;
            font-size: 1.05rem;
            text-shadow: none;
          }
        }
      }
    }
  }
}

.perfil_foto {
  position: absolute;
  height: 45px;
  right: 0.5rem;
  z-index: 4;
  .usuario_foto {
    margin-top: 2px;
    height: 55px;
    width: 55px;
  }
  .notificacion {
    font-size: large;
  }
}

/* Estilos generales */

.row,
figure,
h2 {
  margin: 0 !important;
  padding: 0 !important;
}

h2 {
  color: #fff;
  margin: 7px !important;
  font-size: 25px;
  font-weight: bold;
}

[class*="col-"],
[class^="col-"] {
  padding: 5px;
}

.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-container img {
  min-width: 100%;
  object-fit: cover;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

.button-container {
  width: 100%;
  text-align: center;
}

.button-container button {
  padding: 7px 18px;
  border: none;
  border-radius: 3px;
  background: #1976d2;
  color: #fff;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

.button-container button:hover {
  background: #2780da;
}

/* ->Estilos generales */

/* Body */

main {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.container {
  display: inline-block;
  width: 80%;
  padding: 20px;
}

/* ->Body */

/* Imágenes */

.images-cards figure {
  position: relative;
}

.images-cards img {
  height: 240px;
}

.images-cards figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 44px;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

.images-cards figure figcaption:hover {
  opacity: 1;
}

/* ->Imágenes */

/* Selector de imágenes */

#Images .add-new-photo {
  display: flex;
  border: 4px dashed #088395;
  height: 100%;
  min-height: 240px;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

#Images .add-new-photo.first:hover {
  background: #08829558;
}

#add-photo-container input {
  display: none;
}

/* ->Selector de imágenes */

#botones-reporte {
  display: grid;
}

#listadoregistros {
  padding: 0;
}

.dash {
  padding-top: 2% !important;
  .m-l-15 {
    h2 {
      color: #2a2a2a;
      font-size: 24px;
      line-height: 1.5;
      font-weight: 500;
    }
  }
}

@media (max-width: 500px) {
  .pop-notification {
    width: 100%;
    position: fixed !important;
  }
  #compDept {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(8, auto) !important;
    grid-template-areas:
      "titulo1 titulo1"
      "torta1 grafica1"
      "lista1 lista1"
      "titulo2 titulo2"
      "torta2 grafica2"
      "lista2 lista2" !important;
    padding: 0;
    align-self: center;
    width: 100%;
    .lista1,
    .lista2 {
      justify-self: center;
      font-size: 10px;
    }
    .torta1,
    .torta2 {
      height: 200px;
    }
  }
}

@media (max-width: 915px) {
  .containerDashboard {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: repeat(8, auto) !important;
    grid-template-areas:
      "titulo titulo titulo"
      "titulo titulo titulo"
      "stats1    stats1  stats1"
      "pelota    pelota  stats2"
      "pelota    pelota  stats2"
      "lista     lista   stats2"
      "lista     lista    stats2"
      "mapa     mapa    mapa" !important;
    .titulo {
    }
  }
}
@media (max-width: 666px) {
  .containerDashboard {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(7, auto) !important;
    grid-template-areas:
      "titulo"
      "titulo"
      "stats1"
      "mapa"
      "stats2"
      "lista"
      "pelota    " !important;
    .titulo {
      width: 95%;
      h1 {
        font-size: 24px !important;
        right: 0 !important;
        left: 9%;
      }
      p {
        right: 0;
        left: 10%;
      }
    }
    .stats1 {
      width: 95%;
      gap: 5px !important;
      .dato1 {
        height: 100% !important;
        .titulo-dato1 {
          font-size: 13px;
          p {
            color: #d0f8fe !important;
          }
        }
        .desc-dato1 {
          p {
            font-size: 24px !important;
          }
        }
      }
    }
    .mapa {
      width: 95%;
      .mapaDiv {
        width: 100% !important;
      }
    }
    .lista {
      margin: 0 0 0 2%;

      thead {
        font-size: 10px;
      }
      tbody {
        font-size: 10px;
      }
    }
    .stats2 {
      width: 95%;
      margin: 0 2% 0 2% !important;
    }
  }
}

#contenedorImagenes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  img {
    height: 150px;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

.download-link {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s; /* Transición suave para el fondo */
}

.download-link:hover {
  background-color: rgba(255, 255, 255, 1); /* Fondo blanco al pasar el mouse */
}
#modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */
  z-index: 1000; /* Asegurarse de que el modal esté en la parte superior */
}

#modal img {
  max-width: 90%; /* Limitar el ancho máximo de la imagen */
  max-height: 90%; /* Limitar la altura máxima de la imagen */
}

#modalCharge {
  position-area: center;
  .modal-content {
    .modal-body {
      background: #37b7c33d;
    }
  }
}

.containerDashboard {
  background: #000000;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(7, auto);
  grid-template-areas:
    "titulo titulo titulo titulo"
    "titulo titulo titulo titulo"
    "stats1    stats1  stats1  stats2"
    "lista     lista   pelota   stats2"
    "lista     lista   pelota   stats2"
    "mapa      mapa    mapa    stats2";
  .titulo {
    grid-area: titulo;
    position: relative;
    background: linear-gradient(359deg, #1b1f22, #2e3239);
    /*#46e1f0*/
    color: #042225;
    height: 100px;
    margin: 2% 2% 0 2%;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    h1 {
      font-size: 35px;
      font-weight: 900;
      color: #d0f8fe;
      text-shadow: -1px -1px 0 #0e4348, 1px -1px 0 #0e4348, -1px 1px 0 #0e4348,
        1px 1px 0 #0e4348;
      position: absolute;
      right: 5%;
    }
    p {
      color: #d0f8fe;
      position: absolute;
      right: 5%;
      top: 46%;
    }
  }
  .stats1 {
    grid-area: stats1;
    height: 100%;
    margin: 0 0 0 2%;
    background: linear-gradient(359deg, #1b1f22, #2e3239);
    color: #042225;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    .dato1 {
      display: grid;
      grid-template-rows: 1fr 1fr;
      align-items: center;
      height: 5%;
      .titulo-dato1 {
        justify-items: center;
      }
      .desc-dato1 {
        justify-items: center;
        p {
          font-weight: 600;
          color: #d0f8fe;
          text-shadow: -1px -1px 0 #0e4348, 1px -1px 0 #0e4348,
            -1px 1px 0 #0e4348, 1px 1px 0 #0e4348;
          font-size: 30px;
          margin: 0;
        }
      }
    }
  }
  .stats2 {
    position: relative;
    grid-area: stats2;
    height: 100%;
    margin: 0 2% 0 0;
    background: linear-gradient(359deg, #1b1f22, #2e3239);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    #myChart {
      height: 100% !important;
    }
  }
  .lista {
    grid-area: lista;
    height: 100%;
    margin: 0 0 0 2%;
    background: linear-gradient(359deg, #1b1f22, #2e3239);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    thead {
      --bs-table-bg: linear-gradient(359deg, #1b1f22, #2e3239);
      th {
        color: white;
      }
    }
    tbody {
      --bs-table-bg: linear-gradient(359deg, #1b1f22, #2e3239);
      td {
        color: white;
      }
    }
  }
  .mapa {
    grid-area: mapa;
    height: 100%;
    margin: 0 2% 0 2%;
    background: linear-gradient(359deg, #1b1f22, #2e3239);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    .mapaDiv {
      width: 50%;
      margin: auto;
      path {
        fill: #d0f8fe;
        stroke: #2a2a2a;
        stroke-width: 2px;
      }
      path:hover {
        fill: #46e1f0;
      }
    }
  }
  .pelota {
    grid-area: pelota;
    height: 100%;
    margin: 0 0 0 0;
    background: linear-gradient(359deg, #1b1f22, #2e3239);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

.departamento-modificado:hover {
  fill: #46e1f0 !important; /* Color al hacer hover */
}

#compDept {
  display: grid;
  background: linear-gradient(359deg, #1b1f22, #2e3239) !important;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "titulo1 titulo1 titulo1"
    "torta1 lista1 grafica1"
    "titulo2 titulo2 titulo2"
    "torta2 lista2 grafica2";
  #departamento_1_h,
  #departamento_2_h {
    color: white;
    justify-self: center;
  }
  h1 {
    color: white;
  }
  .titulo1 {
    grid-area: titulo1;
  }
  .torta1 {
    grid-area: torta1;
  }
  .lista1 {
    grid-area: lista1;
  }
  .grafica1 {
    grid-area: grafica1;
  }
  .titulo2 {
    grid-area: titulo2;
  }
  .torta2 {
    grid-area: torta2;
  }
  .lista2 {
    grid-area: lista2;
  }
  .grafica2 {
    grid-area: grafica2;
  }
  .lista1,
  .lista2 {
    height: 100%;
    margin: 0 0 0 0;
    background: linear-gradient(359deg, #1b1f22, #2e3239);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    thead {
      --bs-table-bg: linear-gradient(359deg, #1b1f22, #2e3239);
      th {
        color: white;
      }
    }
    tbody {
      --bs-table-bg: linear-gradient(359deg, #1b1f22, #2e3239);
      td {
        color: white;
      }
    }
  }
}
.modal-header,
.modal-content {
  background: linear-gradient(359deg, #1b1f22, #2e3239) !important ;
}
.modal-dialog {
  max-width: 100%;
  margin: 1.75rem auto;
}