/* generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
  font-family: sans-serif;
  /* background-image: url(https://images.unsplash.com/photo-1693032521214-fb25014ac9f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); */
}

#map{
  background-image: url(https://images.unsplash.com/photo-1692812298405-db9c1ca093ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80);
   background-size: contain;
    /* background-repeat: no-repeat; */
    background-position: center;
}

/* header */
.header-g {
  background-color: rgba(34, 57, 140, 0.874);
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
  /* padding: 5px 5%; */
  height: 45px;
  width: 650px;
  border-radius: 10px;
  top:  15px;
  left: 10px;
  position: absolute;
  z-index: 1001;
  box-shadow: 5px 5px 5px rgba(0, 0, 139, 0.358);
}

.header-g .nav-item {
width: 80%;
display: flex;
background-color: #bf2c2c;
margin: 0px auto;
height: 100%;

}


.titulo {
  color: white;
  font-size: 24px;
  line-height: 45px;
  padding: 0px 0px;
} 

.boton-header {
  background-color: transparent;
  color: white;
  font-size: 25px;
  /* padding: 10px 5px; */
  /* width: 45px; */
  /* height: 45px; */
  position: fixed;
  top: 17px;
  left: 83px;
}

.boton-header:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

@media only screen and (max-width: 700px) {
  .header-g {
    top: 10px;
    left: 10px;
    display: block;
    /* justify-content: flex-end; */
    padding: 0px 5%;
    /* justify-content: space-evenly; */
    width: 250px;
    height: 35px;
  }
 .nav-g {
  top: 0px;
  left: 0px;
  /* visibility: hidden; */

  }
  .titulo {
    font-size: 20px;
    padding: 5px ;
    
  }
  .nav-item li a {
  visibility: hidden;
}

  .footer-g {
  /* visibility: hidden; */
  background-color: #2ff31a;
  color: #555;
}


}


.nav-item li {
  display: inline-block;
  padding: 0 5px;
}

.nav-item li a {
  color: white;
  text-decoration: none;
  font-size: 15px;
  /* background-color: #777; */
}

.nav-item li a:hover {
  color: rgb(189, 175, 175);
}

.nav-g {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  /* padding:  0 50%; */
  align-items: center;
  align-content: center;
  top: 70px;
  left: 20px;
  /* background-color: transparent; */
  background-color: rgba(255, 255, 255, 0.9);
  height: 150px;
  width: 30px;
  z-index: 1000;
  /* visibility: visible; */
  /* border: 1px solid rgb(145, 145, 147); */
  box-shadow: 0 0 5px darkblue;
  border-radius: 8px;

}


.footer-g {
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content:space-around;
  /* padding:  0 50%; */
  align-items: center;
  align-content: center;
  bottom: 5px;
  /* background-color: transparent; */
  height: 30px;
  width: 390px;
  z-index: 500;
  position: absolute;
  /* visibility: visible; */
  /* border: 1px solid rgb(145, 145, 147); */
  box-shadow: 0 0 5px darkblue;
  /* margin-left: 420px; */
  border-radius: 8px;
  transform: translate(-50%);
  left: 50%;
}



.info_atr {
  position: fixed;
  display: inline-block;
  justify-content:space-around;
  /* padding:  0 50%; */
  align-items: center;
  align-content: center;
 top: 70px;
 right: 10px;
  /* background-color: transparent; */
  background-color: rgba(255, 255, 255, 1);
  /* height: 30px;
  width: 30px; */
  z-index: 2000;
  visibility: hidden;
  /* border: 1px solid rgb(145, 145, 147); */
  box-shadow: 0 0 3px rgb(255, 113, 113);
  border-radius: 8px;
   padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  }




.boton {
  /* padding: 0 5px; */
  color: darkblue;
  text-decoration: none;
  background-color: transparent;
  line-height: 30px;
  cursor: pointer;
  font-size:17px;
   text-decoration: none;
  bottom: unset;
  padding: 0 10px;
  border: none;
  /* z-index: 100000; */
}

.boton_info {
  color: darkblue;
  font-size:20px;
  text-decoration: none;
  background-color: transparent;
  padding: 20px 5px;
  line-height: 20px;
}
.coordenadas {
  padding: 0 15px;
  color: rgb(255, 255, 255);
  background-color: #00000079;
  /* background: #000; */
  text-decoration: none;
  /* background-color: transparent; */
  line-height: 30px;
  font-size: 12px;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 35px;
  z-index: 500;
  box-shadow: 0 0 5px #fff;
}

.datos_menu_1 {
  padding: 0 5px;
  color: darkblue;
  font-size: 12px;
  width: 60px;
}

.Item_menu_2 {
  color: black;
  display: inline-block;
  width: 70px;
  margin-left: 20px;
}

label,
input {
  font-size: 14px;
  vertical-align: middle;
  /* font-family: sans-serif; */
  white-space: nowrap;
}

.Item_number {
  width: 60px;
  /* height: 15px; */
}

.Item_combo {
  width: 110px;
  height: 20px;
}

.Item_salida {
  color: darkblue;
  font-size:20px;
  position: fixed;
  left: 353px;
  bottom: 271px;
}

.coordenadas:hover {
  box-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 20px #3bf926, 0 0 20px #2ff31a,
    0 0 20px #abff0f, 0 0 50px #afff1b;
  -webkit-animation: blink 0.7s infinite alternate;
  animation: blink 0.7s infinite alternate;
  transition: 0.2s;
}

.boton:hover {
  transform: scale(1.3);
  transition: 0.2s;
  color: #606060;
}

.main {
  background-color: rgb(232, 232, 232);
  position: absolute;
  top: 0px;
  bottom: 0px;
  /* height: calc(100%-30px); */
  height: 100;
  /* height: 100%; */
  width: 100%;
  z-index: 0;
}

/*   estilos menu atributos        */
.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.info h4 {
  margin: 0 0 5px;
  color: #777;
}

#escala {
  background: black;
}

/*   estilos menu deslizable        */
.content {
  margin: 0.25rem;
  border-top: 1px solid #000;
  padding-top: 0.5rem;
}

.header {
  font-size: 1.8rem;
  color: #7f7f7f;
}

.title {
  font-size: 1.1rem;
  color: #7f7f7f;
  font-weight: bold;
}

.bottom {
  margin-top: 64px;
  font-size: 0.8rem;
  color: #7f7f7f;
}

.boton_inicio {
  color: white;
  background-color: rgb(51, 222, 51);
  width: 50px;
  height: 50px;
  font-size: 14px;
  position: absolute;
  line-height: 50px;
  transform: translate(-50%, -50%);
  left: 50%;
  bottom: 0px;
  /* align-content: center; */
  /* align-items: center; */
  /* position: topright; */
  border-radius: 40px;
  box-shadow: 2px 2px 1px hsla(110, 92%, 5%, 0.51);
  /* left: 50px; */
  /* justify-content: space-between; */
  z-index: 5000;
  cursor: pointer;
  visibility: hidden;
}

.boton-fin {
  color: white;
  background-color: rgb(243, 13, 13);
  width: 50px;
  height: 50px;
  font-size: 14px;
  position: absolute;
  line-height: 50px;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, -50%);
  /* align-content: center; */
  /* align-items: center; */
  /* position: topright; */
  border-radius: 40px;
  box-shadow: 2px 2px 1px hsla(110, 92%, 5%, 0.51);
  /* left: 50px; */
  /* justify-content: space-between; */
  z-index: 5000;
  cursor: pointer;
  visibility: hidden;
}

.reticula {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: bisque;
  z-index: 50000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: 2px solid rgb(4, 2, 106);
  box-shadow: 0 0 2px 2px #ffffff;
  visibility: hidden;
}

.reticula2 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: bisque;
  z-index: 50000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(4, 2, 106);
  border: 1px solid rgb(4, 2, 106);
  box-shadow: 0 0 2px 1px #ffffff;
  visibility: hidden;
}

li {
  line-height: 1.4;
}

ul {
  line-height: 1.6;
  margin-left: 30px;
  list-style: none;
}

h5 {
  margin-left: 10px;
  margin-bottom: 5px;
}


/* menu 4 */
.menu_4 {
  background-color: #ffffff;
  width: 380px;
  height: 240px;
  z-index: 100000;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: grid;
  gap: 1px;
  /* text-align: center; */
  grid-template:
    /* "header header" 30px */
    "navbar navbar" 5px
    "main1 main2" auto
    "footer footer" 50px;
  /* visibility: hidden; */
  /* border: 1px solid rgb(145, 145, 147); */
  /* box-shadow: 0 0 3px darkblue; */
  /* opacity: 0; */
  transform: translate(-100%, 100%);
  /* transform: translateX(100%); */
  /* transition: transform 0.2s ease-in-out; */
}


/* 
.header_menu_4 {
  grid-area: header;
  text-align: center;
  background-color: rgba(229, 229, 229, 0.513);
  line-height: 30px;
} */
.nav_menu_4 {
  grid-area: navbar;
  /* background-color: rgb(255, 255, 255); */
  line-height: 30px;
  text-align: center;
  justify-content: space-around;
}
.main1_menu_4 {
  grid-area: main1;
  
  /* background-color: rgb(155, 26, 26); */
}
.main2_menu_4 {
  grid-area: main2;
  /* background-color: rgb(70, 10, 10); */
}
.footer_menu_4 {
  grid-area: footer;
  text-align: center;
  /* background-color: #7f7f7f; */
}

.botones {
  box-decoration-break: none;
  width: 130px;
  height: 30px;
  /* padding: 5px; */
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 20px;
  background-color: white;
  /* border-color:  darkblue; */
  box-shadow: 0px 0px 3px #5b3ed0;
  cursor: pointer;
}

.botones_encuesta {
  box-decoration-break: none;
  width: 130px;
  height: 30px;
  /* padding: 5px; */
  margin-left: 130px;
  border-radius: 20px;
  background-color: white;
  /* border-color:  darkblue; */
  box-shadow: 0px 0px 3px #5b3ed0;
  cursor: pointer;

}





/* menu 5 */
.menu_5 {
  background-color: #ffffff;
  width: 380px;
  height: 240px;
  z-index: 100000;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: grid;
  gap: 1px;
  /* text-align: center; */
  grid-template:
    /* "header header" 30px */
    "navbar navbar" 30px
    "main1 main2" auto
    "footer footer" 50px;
  /* visibility: hidden; */
  /* border: 1px solid rgb(145, 145, 147); */
  /* box-shadow: 0 0 3px darkblue; */
  /* opacity: 0; */
  transform: translate(-100%, 100%);
  /* transform: translateX(100%); */
  transition: transform 0s ease-in-out;

   /* border-right: : 1px solid rgb(145, 145, 147); */
     /* box-shadow: 0 0 3px darkblue; */
    
}

.header_menu_5 {
  grid-area: header;
  text-align: center;
  background-color: rgb(152, 37, 37);
  line-height: 30px;
   border:none ;
}
.nav_menu_5 {
  grid-area: navbar;
  /* background-color: rgb(148, 61, 61); */
  line-height: 30px;
  /* border: #3bf926; */
  /* text-align: center; */
  justify-content: space-around;
}
.main1_menu_5 {
  grid-area: main1;
  /* background-color: rgb(255, 255, 255); */
}
.main2_menu_5 {
  grid-area: main2;
  border:none ;
  /* background-color: rgb(172, 100, 100); */
}
.footer_menu_5 {
  width: 380px;
  grid-area: footer;
  /* background-color: rgb(171, 88, 88); */
  /* line-height: 50px; */
  text-align: center;
  /* //overflow: auto; */
    /* width: 300px; Ancho de tu contenedor */

}


.nav_footer_5 {
  width: 82%;
  margin: 0px auto;
    white-space: nowrap; /* Evita el salto de línea */
  overflow-x: scroll; /* Permite el desplazamiento horizontal */
  overflow-y: hidden; /* Oculta el desplazamiento vertical */
}




/* menu 3 sin nav capas */ 
.menu_3 {
  background-color: #ffffff;
  width: 380px;
  height: 300px;
  z-index: 1000;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: grid;
  gap: 1px;
  /* text-align: center; */
  grid-template:
    "header " 30px
    "navbar"  30px
    "main1  " auto;
  /* visibility: hidden; */
  border: 1px solid rgb(145, 145, 147);
  box-shadow: 0 0 3px darkblue;
  /* opacity: 0; */
  transform: translate(-100%, 100%);
  /* transform: translateX(100%); */
  transition: transform 0.3s ease-in-out;
  border-radius: 8px;
    }

@media only screen and (max-width: 500px) {

  .menu_3 {
    width: 100%;
  }
  .menu_6 {
    width: 100%;
  }
  .menu_4 {
    width: 100%;
  }
 .menu_5 {
    width: 100%;
  }

 .tabla2 {
    width: 100%;
  }

#tools_g{
   width: 100%;
 }
.boton {
  font-size:18px;
 
}
 
}

.header_menu_3 {
  grid-area: header;
  text-align: center;
  background-color: rgba(229, 229, 229, 0.513);
  line-height: 30px;
}

.nav_menu_3 {
  grid-area: navbar;
  /* background-color: rgb(255, 255, 255); */
  line-height: 30px;
  text-align: center;
  justify-content: space-around;
}


.main1_menu_3 {
  grid-area: main1;
  margin-left: 0px;
  overflow: auto;
  /* background-color: rgb(160, 62, 62); */
}

.Item_menu_3 {
  color: black;
  display: inline-block;
  width: 250px;
  margin-left: 0px;
}

/* .sidebar .nav-links { */
/* height: 100%; */
/* padding: 0px 0 150px 0; */
/* overflow: auto; */
/* } */


/* menu capas  */

.sidebar .nav-links::-webkit-scrollbar {
  display: none;
}
.sidebar .nav-links li {
  position: relative;
  left: -20px;
  list-style: none;
  /* transition: all 0.4s ease; */
}
.sidebar .nav-links li:hover {
  background: #f1f1f1;
}
.sidebar .nav-links li .iocn-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar .nav-links li i {
  height: 30px;
  min-width: 70px;
  text-align: center;
  line-height: 25px;
  color: #000000;
  font-size: 15px;
  cursor: pointer;
  /* transition: all 0.3s ease; */
}
.sidebar .nav-links li.showMenu i.arrow {
  transform: rotate(-180deg);
}

.sidebar .nav-links li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sidebar .nav-links li a .link_name {
  font-size: 14px;
  /* font-weight: 400; */
  font-weight: bold;
  color: #000000;
  /* transition: all 0.4s ease; */
}

.sidebar .nav-links li .sub-menu {
  /* padding: 6px 6px 14px 80px; */
  padding: 0px 0px 0px 50px;
  /* margin-top: -10px; */
  /* margin-left: 20px; */
  /* background: #f1f1f1; */
  display: none;
}
.sidebar .nav-links li.showMenu .sub-menu {
  display: block;
}
.sidebar .nav-links li .sub-menu a {
  color: #000000;
  font-size: 13px;
  padding: 3px 0px;
  white-space: nowrap;
  /* opacity: 0.6; */
  /* transition: all 0.3s ease; */
  display: inline-block;
}
.sidebar .nav-links li .sub-menu a:hover {
  opacity: 1;
}

.sidebar .nav-links li .sub-menu .link_name {
  display: none;
}

.sidebar .nav-links li .sub-menu.blank {
  opacity: 1;
  pointer-events: auto;
  /* padding: 3px 20px 6px 16px; */
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
  top: 50%;
  transform: translateY(-50%);
}


/* legenda  */
.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}



/* menu 6 marcas */
.menu_6 {
  background-color: rgb(255, 255, 255);
  width: 380px;
  height: 240px;
  z-index: 100000;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: grid;
  gap: 1px;
  /* text-align: center; */
  grid-template:
    "header " 30px 
    "main1 " auto
    "footer " 30px;
  /* visibility: hidden; */
  /* border: 1px solid rgb(145, 145, 147); */
  /* box-shadow: 0 0 3px darkblue; */
  /* opacity: 0; */
  transform: translate(-100%, 100%);
  /* transform: translateX(100%); */
  transition: transform 0s ease-in-out;
}

.header_menu_6 {
  grid-area: header;
  /* background-color: rgb(148, 61, 61); */
  line-height: 30px;
  /* border: #3bf926; */
  /* text-align: center; */
  justify-content: space-around;
}

.main1_menu_6 {
  grid-area: main1;
  /* background-color: rgb(12, 180, 17); */
}

.footer_menu_6 {
  grid-area: footer;
  text-align: center;
    /* background-color: rgb(104, 18, 130); */
  /* background-color: #7f7f7f; */
}

.Item_number_6 {
  width: 120px;
  /* height: 15px; */
}

.Item_number_7 {
  width: 250px;
  /* height: 60px; */
}

.Item_menu_8 {
  color: black;
  display: inline-block;
  width: 150px;
  margin-left: 0px;
}


.ch_menu_6 {
  color: black;
  display: inline-block;
  width: 30px;
  margin-left: 50px;
}

.file_menu_6 {
  margin-left: 30px;
  display: none;
}

.boton_menu_6 {
  /* padding: 0 5px; */
  color: darkblue;
  text-decoration: none;
  background-color: transparent;
  
  line-height: 20px;
  margin-left: 50px;
  cursor: pointer;
  font-size:40px;
  text-decoration: none;
  bottom: unset;
  /* padding: 0 10px; */
  border: none;
  /* z-index: 100000; */
}

.boton_menu_6:hover {
  transition: 0.1s;
  color: #36c579;
}
.Item_menu_6 {
  color: black;
  display: inline-block;
  padding-bottom: 6px;
  width: 150px;
  margin-left: 0px;
}




/* menu 6 marcas */
.menu_2 {
  background-color: rgb(255, 255, 255);
  width: 380px;
  height: 240px;
  z-index: 100000;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: grid;
  gap: 1px;
  /* text-align: center; */
  grid-template:
    "navbar " 5px
    "main1 " auto
    "footer " 50px;
  /* visibility: hidden; */
  /* border: 1px solid rgb(145, 145, 147); */
  /* box-shadow: 0 0 3px darkblue; */
  /* opacity: 0; */
  transform: translate(-100%, 100%);
  /* transform: translateX(100%); */
  transition: transform 0s ease-in-out;
}

.nav_menu_2 {
  grid-area: navbar;
  /* background-color: rgb(255, 255, 255); */
  line-height: 30px;
  text-align: center;
  justify-content: space-around;
}
.main1_menu_2 {
  grid-area: main1;
  overflow: auto;
}

.footer_menu_2 {
  line-height: 50px;
  grid-area: footer;
  text-align: center;
  /* background-color: #7f7f7f; */
}






.main1_menu_6 {
  grid-area: main1;
  /* background-color: rgb(12, 180, 17); */
}

.footer_menu_6 {
  grid-area: footer;
  text-align: center;
    /* background-color: rgb(104, 18, 130); */
  /* background-color: #7f7f7f; */
}




/* Estilos para la tabla */
   
.tabla2 {
      background-color: #ffffff;
      z-index: 255555;
      font-size: 10px;
      position: absolute;
      left: 50px;
      overflow: auto;
     width: 380px;
    height: 240px;
    bottom: 0px;
    left: 00px;
     border-collapse: collapse;
      /* width: 100%; */
      table-layout: fixed; /* Fijar el ancho de las columnas */
    }

    

    

    th, td {
      border: 1px solid #ddd;
      padding: 3px;
      text-align: left;
      white-space: nowrap; /* Evitar que los contenidos se dividan en varias líneas*/
      max-width: 200px;
      overflow: hidden; /* Evitar que el contenido desbordado se muestre */
      text-overflow: ellipsis; /* Agregar puntos suspensivos para contenido desbordado */
    }

    th {
      background-color: #f2f2f2;
      position: sticky; /* Hacer que los encabezados sean pegajosos */
      top: 0; /* Pegar los encabezados en la parte superior */
      z-index: 1; /* Asegurar que los encabezados estén por encima del contenido */
      /* max-width: 150px; */
     font-size: 11px;
     max-width: 200px; /* Ancho máximo de 50px para las columnas del encabezado */
    }

        /* Ancho para los campos de entrada en el encabezado */
    th input {
      max-width: 200px; /* O ajusta el valor en píxeles o porcentaje según tus necesidades */
      min-width: 60px;
      font-size: 11px;
    }
   
    /* Altura definida para las celdas */
    td {
      height: 5px;
    }

    tr:hover {
      background-color: #f5f5f5;
      cursor: pointer; /* Cambiar el cursor al pasar sobre las filas */
      
    }

    /* Estilo para la fila seleccionada */
    tr.selected {
      background-color: #a5d8ff !important;
    }


      .color-box {
      width: 22px;
      height: 22px;
      opacity: 1;
      z-index: 50000;
      margin: 2px;
      display: inline-block;
      cursor: pointer; /* Cambiar el cursor al pasar sobre las filas */
         transition: transform 0.3s; /* Agrega una transición suave */
            }


  .color-box:hover {
    transform: scale(1.2); /* Escala el elemento al 120% del tamaño original */
  }


    #azul{
      border: 3px solid rgba(0, 0, 255, 1);
     background-color: rgba(194, 191, 237, 1);
    }

  #verde{
      border: 3px solid rgba(0, 128, 0, 1);
     background-color: rgba(193, 216, 185, 1);
    }

    #rojo{
      border: 3px solid rgba(255, 0, 0, 1);
     background-color: rgba(240, 187, 182, 1);
    }

     #amarillo{
      border: 3px solid rgba(255, 255, 0, 1);
     background-color: rgba(245, 242, 186, 1);
    }


     #violeta{
      border: 3px solid rgba(238, 130, 238, 1);
     background-color: rgba(242, 217, 234, 1);
    }

 #naranja{
      border: 3px solid rgba(255, 165, 0, 1);
     background-color: rgba(245, 224, 186, 1);
    }

 #negro{
      border: 3px solid rgba(0, 0, 0, 1);
     background-color: rgba(194, 191, 186, 1);
    }
 #cafe{
      border: 3px solid rgba(128, 0, 0, 1);
     background-color: rgba(220, 191, 186, 1);
    }

     #azul_marino{
      border: 3px solid rgba(0, 0, 128, 1);
     background-color: rgba(194, 191, 212, 1);
    }
     #verde_azul{
      border: 3px solid rgba(0, 128, 128, 1);
     background-color: rgba(194, 217, 212, 1);
    }

         #purpura{
      border: 3px solid rgb(128, 0, 128);
     background-color: rgba(220, 191, 212, 1);
    }

         #aqua{
      border: 3px solid rgb(0, 255, 255);
     background-color: rgba(194, 242, 237, 1);
    }
         #oliva{
      border: 3px solid rgb(128, 128, 0);
     background-color: rgba(220, 217, 186, 1);
    }
         #gris{
      border: 3px solid rgb(128, 128, 128);
     background-color: rgba(220, 217, 212, 1);
    }

    





.custom-tooltip {
  font-size: 8px;
  padding: 0px;
  margin: 0px;
  border-radius: 50px;
  box-shadow: 2px 2px 4px rgba(241, 14, 14, 0.3);
  /* Agregar cualquier otro estilo que desees */
}


/* GALERIA  */

.image-container {
  /* position: relative; */
  /* display: inline-block; */
  /* background-color: #ffffff; */
  margin: 7px;
  overflow: hidden; 
}


.gallery {
  background-color: #ffffff;
  border-radius: 5px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  text-align: center;
  width: 570px;
  height: 360px;
  z-index: 500;
    border: 1px solid rgb(145, 145, 147); 
   box-shadow: 0 0 3px darkblue; 
 cursor: grab; 
 transform: translate(-100%, 100%);
 transition: transform 0.3s ease-in-out;
}

#draggableGallery {
  user-select: none; /* Evita que se seleccione el contenido al arrastrar */
}

#image {
  max-width: 100%;
  height: auto;
  /* transition: opacity 0.3s ease-in-out; Agrega una transición suave */
 /* transform-origin: center center; Punto de transformación en el centro de la imagen */
  /* transition: transform 0.3s ease-in-out; Transición suave para el zoom */

}

.boton_galeria {
  /* position: absolute; */
  /* transform: translateY(-50%); */
  /* z-index: 2; Asegura que los botones estén delante de la imagen */
  padding: 0 5px;
  color: darkblue;
  /* text-decoration: none; */
  background-color: transparent;
  /* line-height: 30px; */
  cursor: pointer;
  font-size:17px;
  /* height: 50px; */
  text-decoration: none;
  bottom: unset;
  border: none;
  transition: transform 0.3s; /* Agrega una transición suave */
 }


.boton_galeria_salida {
  position: absolute;
   /* transform: translateY(-50%); */
  /* z-index: 2; Asegura que los botones estén delante de la imagen */
  padding: 0 5px;
  color: darkblue;
  /* text-decoration: none; */
  background-color: transparent;
  /* line-height: 30px; */
  cursor: pointer;
  font-size:20px;
  /* height: 50px; */
  text-decoration: none;
  bottom: unset;
  border: none;
  transition: transform 0.3s; /* Agrega una transición suave */
  left: 530px ;
  bottom: 7px;
}






  .boton_galeria:hover {
    transform: scale(1.2); /* Escala el elemento al 120% del tamaño original */
  }


  .tools_g_class {
  background-color: #ffffff;
  width: 380px;
  height: 300px;
  z-index: 1000;
  position: fixed;
  bottom: 0px;
  left: 0px;
  border: 1px solid rgb(145, 145, 147);
  box-shadow: 0 0 3px darkblue;
  /* opacity: 0; */
  transform: translate(-100%, 100%);
  /* transform: translateX(100%); */
  transition:  0.3s ease-in-out;
  border-radius: 8px;
  }

.main_tools_g{
  padding: 15px 0px;

}