body {
    margin: 0;
    padding: 0;
    background-color:  rgb(24, 28, 44);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    overflow-x: hidden;
    z-index: -1;
  }
.nav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: rgb(255, 255, 255);
  }
  
  nav {
    display: flex;
  }
 
  nav ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0px;
    margin-top: 10px;
  }
  
  nav a {
    color: white;
    text-decoration: none;
  }

  nav a:hover {
    text-decoration: none;
  }

  nav a.top-button {
      display: inline-block;
      padding: 8px 13px;
      background-color: rgba(8, 7, 7, 0);
      border: 1px solid rgba(186, 183, 183, 0.989);
      color: rgb(255, 255, 255);
      text-decoration: none;
      font-size: 17px;
      border-radius: 15px;
      transition: all 0.1s ease;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(1.5px);
      margin-left: 30px;
      margin-right: 10px ;
      margin-top: 10px;
      margin-bottom: 10px;
  }

  nav a.top-button:hover {
    background-color: rgba(167, 167, 167, 0.413);
    transform: scale(1.015);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  }

  .logo {
    position: absolute;
    top: 40px; 
    left: 15px;
    width: 400px;
    height: auto;
    z-index: 1;
  }
  
#main-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#left-section {
  position: absolute;
  top: 10%;
  left: 25px;
  width: 270px; 
  height: 80%; 
  padding: 10px;
  border-radius: 10px;
}

#user-info {
  background: linear-gradient(to bottom, rgb(66, 76, 110), rgba(35, 46, 78, 1));
  border-radius: 12px;
  height: 60%;
  color: white;
}


.top-bar {
  margin: 0;
  background-color: rgba(60,61,100,1);
  border-radius: 12px 12px 0 0;
  padding: 0 10px;
  color: white;
  font-size: 15px;
  display: flex;
  align-items: center; 
  justify-content: space-between;
}

.org-name, .user-role, .role-box{
  margin: 10px 0;
}

.role-box {
  width: 50px;
  height: 15px;
  border-radius: 10px;
}

.user-role {
  padding: 5px;
  background-color: var(--role-color);
  border-radius: 5px;
}

.user-photo {
  margin: 10px auto;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 75px;
  height: 75px; 
  background: linear-gradient(to bottom, #ffc46b, #ff5389);
  border-radius: 50% ;
  text-align: center;
  object-fit: cover;
  border: 25px solid rgb(44, 52, 78);
}

.user-photo img {
  border-radius: 50%;
  width: 75px;
  height:75px;
  object-fit: cover;
  border: 25px solid rgb(45, 54, 84);
}

.separator-line {
  border: 1px solid #ccc;
  width: 90%;
  margin: 0 auto;
}

.user-info-boxes {
  display: flex;
  justify-content: space-around;
  margin: 10px 10px;
}

.info-box {
  text-align: center;
}

.project-bar {
  background-color: rgba(28,39,71,255);
  padding: 10px;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 15px;
}

.status-section {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

#selected-project {
  color: gray;
  font-size: 15px;
}

#selected-project div {
  display: flex;
  justify-content: space-between;
  padding:5px;
}

#selected-project div > div:first-child {
  width: 100px;
  text-align: right;
}

#status-color-box {
  border-radius: 15px;
  width: 45px !important;  
  height: 20px !important;
}

.status-box {
  padding: 10px;
  background-color: var(--status-color);
  border-radius: 5px;
}

.user-info-boxes {
  display: flex;
  justify-content: space-around;
  font-size: 15px ;
}

.info-box {
  text-align: center;
}

.info-label {
  margin-bottom: 5px;
}

.info-value {
  padding: 10px;
  margin-left:5ipx;
  border-radius: 30px;
  color: #fff;
  width: 45px;
  height: 10px;
}

.gb-value {
  background: rgba(1,246,203,255);
}

.projects-value {
  background: rgba(1,246,203,255);
}

.area-value {
  background: rgba(255,96,142,255);
}


#projects{
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, rgba(46, 58, 89, 1) 0%, rgba(36, 40, 56, 1) 100%);
    padding:10px;
    border-radius: 3px;
    margin-top: 25px;
    height: 40%;
    color: white;
    font-size: 12px;
}

.header-row {
  font-weight: bold;
  background-color: #445974;
}

#project-nav {
  display: flex;
  flex-direction: column;
}
.project-row {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}
.project-col {
  flex: 1;
  box-sizing: border-box;  /* El padding y el borde ya están incluidos en el ancho y alto del elemento */
  padding: 5px;
  border-bottom: 1px solid #ccc;
  text-align: left;  /* Alinea el texto a la izquierda */
  min-width: 50px;  /* Ancho mínimo para cada columna */
}

.status-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

#right-section {
  position: absolute;
  top: 45%;
  left: 30%;
  width: 65%;
  height: 40%;
  padding: 10px;
  border-radius: 10px;

}

.project-info {
  color: antiquewhite;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  height: 35%;
}

.info-boxes {
  background-color: color-mix(in srgb, color percentage, color percentage);
  display: flex;
  gap: 15px;
  justify-content: space-between;
}

.info-box {
  flex: 1;
  color: aliceblue;
  padding: 10px;
  text-align: center;
  backdrop-filter: blur(1.5px);
}

.value {
  font-size: 2em;
}

.label {
  font-size: 0.8em;
  color: gray;
}

.weather-panel {
    background-size: cover;
    background-repeat: no-repeat;
    color: rgb(255, 255, 255);
 }

.weather-panel .info-boxes {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.weather-panel .info-box {
  flex: 1;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.weather-panel .value {
  font-size: 1.2em;
}

.weather-panel .label {
  font-size: 0.8em;
  color: gray;
}

.project-info h2, .log-panel h2 {
  margin-top: 0;
}

.project-info ul, .log-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-info li, .log-panel li {
  margin-bottom: 10px;
}

.project-info li span, .log-panel li span {
  font-weight: bold;
}

.log-panel {
  margin-bottom: 0;
}

#project-nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  overflow-x: scroll;
  max-height: 250px;
}

#project-nav .project {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
  flex: 0 0 auto;
}

#project-nav .project .project-details {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

#map-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(0deg, rgb(24, 28, 44), rgba(24, 28, 44, 0));
}

#map-section {
    width: 100%;
    height: 60%;
    transition: all 0.3s ease;
    z-index: -1;
}

#bottom-section {
    width: 100%;
    height: 40%;
    background-color: rgb(24, 28, 44);
    transition: all 0.3s ease;
    z-index: -1;
}