: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 {
      width: 45px;
    }
    .label_menu {
      margin-top: 0.5rem;
      .list_icon {
        color: #fd4b57;
        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));
    }
    .ul_links {
      width: 100%;
      background-color: #fd4b57;
      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 {
        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;
      }
      .ul_links {
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        gap: 1rem;
        background-color: transparent;

        .li_links {
          .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: #fd4b57;
            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;
}

#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: 480px) {
  .pop-notification {
    width: 100%;
    position: fixed !important;
  }
  .card {
    margin: 0 -1% 5%;
  }
  .contenedor {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(9, auto) !important;
    grid-template-areas:
      "cubito radio"
      "mc-1 mc-2"
      "mc-3 mc-4"
      "mc-5 mc-5"
      "fp-1 fp-2"
      "fp-3 fp-4"
      "fp-5 fp-5"
      "fm-2 fm-3"
      "fm-4 fm-5"
      "fd-1 fd-2"
      "fd-3 fd-4"
      "fd-5 fd-5" !important;
  }
}

@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: #fd4b57;
      p {
        color: white;
      }
    }
  }
}

.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 */
}

.contenedor {
  display: grid;
  padding-top: 5px;
  padding-bottom: 5px;
  background: linear-gradient(359deg, #d3d4de, #eef0fd) !important  ;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-template-areas:
    "cubito cubito cubito radio radio"
    "mc-1 mc-2 mc-3 mc-4 mc-5"
    "fp-1 fp-2 fp-3 fp-4 fp-5"
    "fm-2 fm-2 fm-3 fm-4 fm-5"
    "fd-1 fd-2 fd-3 fd-4 fd-5";

  .cubito {
    grid-area: cubito;
  }
  .radio {
    grid-area: radio;
  }
  .mc-1 {
    grid-area: mc-1;
  }
  .mc-2 {
    grid-area: mc-2;
  }
  .mc-3 {
    grid-area: mc-3;
  }
  .mc-4 {
    grid-area: mc-4;
  }
  .mc-5 {
    grid-area: mc-5;
  }

  .fp-1 {
    grid-area: fp-1;
  }
  .fp-2 {
    grid-area: fp-2;
  }
  .fp-3 {
    grid-area: fp-3;
  }
  .fp-4 {
    grid-area: fp-4;
  }
  .fp-5 {
    grid-area: fp-5;
  }

  .fm-2 {
    grid-area: fm-2;
  }
  .fm-3 {
    grid-area: fm-3;
  }
  .fm-4 {
    grid-area: fm-4;
  }
  .fm-5 {
    grid-area: fm-5;
  }

  .fd-1 {
    grid-area: fd-1;
  }
  .fd-2 {
    grid-area: fd-2;
  }
  .fd-3 {
    grid-area: fd-3;
  }
  .fd-4 {
    grid-area: fd-4;
  }
  .fd-5 {
    grid-area: fd-5;
  }

  .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;
}