#botonMenu {
   position: fixed;
   top: .5em;
   right: .5em;
   cursor: pointer;
   z-index: 200;
   background-color: var(--color-primario-oscuro-6);
   padding: .2em;
   border-radius: .6em;

   img {
      width: 30px;
      height: 30px;
      filter: invert(1);
   }
}

header {
   display: none;
   flex-direction: column;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   z-index: 100;
   justify-content: center;
   align-items: center;
   padding: 0.5em;
   background-color: var(--color-blanco);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease-in-out;

   &.on {
      display: flex;
   }

   #imagenLogo {
      width: 100%;
      height: 50px;
      object-fit: contain;
   }

   #navMenu {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 1em;

      .div-separacion-enlaces {
         display: flex;
         width: 100%;
         flex-direction: column;
         align-items: center;
         gap: 1em;

         a, button {
            display: flex;
            justify-content: center;
            width: 100%;
            color: var(--color-primario-oscuro-3);
            border: none;
            border-bottom: 1px solid var(--color-primario-oscuro-3);
            padding: 0.15em 0.3em;
            background-color: transparent;
            font-size: 1rem;
            font-weight: 600;
            text-align: center;
            outline: none;
            border-radius: 0.5em;
            height: auto;
            cursor: pointer;
            background-color: var(--color-blanco);
            transition: color .3s, background-color .3s, scale .3s;
         }

         a:hover,
         button:hover {
            color: var(--color-primario-oscuro-4);
            background-color: var(--color-primario-claro-9);
            scale: 1.03;
         }
      }
   }

   nav {
      display: none;
   }
}

footer {
   background-color: var(--color-primario-oscuro-8);
   padding: 0.5em;

   p {
      color: var(--color-blanco);
      text-align: center;
   }
}

/* Mensaje de herramientas */
#mensajeHerramientas {
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   z-index: 99999;
   background-color: rgba(0, 0, 0, 0.5);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

#mensajeHerramientas.on {
   pointer-events: all;
   opacity: 1;
}

#mensajeHerramientasContenido {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: white;
   padding: 30px;
   border-radius: 15px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-width: 90%;
   width: 400px;
}

#mensajeHerramientasTexto {
   color: #333;
   font-size: 18px;
   font-weight: 500;
   text-align: center;
   margin-bottom: 20px;
   line-height: 1.4;
}

#cerrarMensajeHerramientas {
   padding: 12px 30px;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 600;
   border: none;
}

#mensajeHerramientas.exito #mensajeHerramientasContenido {
   border-top: 6px solid #22c55e;
}

#mensajeHerramientas.exito #cerrarMensajeHerramientas {
   background-color: #22c55e;
   color: white;
}

#mensajeHerramientas.exito #cerrarMensajeHerramientas:hover {
   background-color: #16a34a;
}

#mensajeHerramientas.aviso #mensajeHerramientasContenido {
   border-top: 6px solid #eab308;
}

#mensajeHerramientas.aviso #cerrarMensajeHerramientas {
   background-color: #eab308;
   color: white;
}

#mensajeHerramientas.aviso #cerrarMensajeHerramientas:hover {
   background-color: #ca8a04;
}

#mensajeHerramientas.error #mensajeHerramientasContenido {
   border-top: 6px solid #ef4444;
}

#mensajeHerramientas.error #cerrarMensajeHerramientas {
   background-color: #ef4444;
   color: white;
}

#mensajeHerramientas.error #cerrarMensajeHerramientas:hover {
   background-color: #dc2626;
}

/* Popup de herramientas */
.popup-herramientas {
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   overflow-y: auto;
   padding: 1em;
   z-index: 99998;
   background-color: rgba(0, 0, 0, 0.5);  
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease;

   &.on {
      pointer-events: all;
      opacity: 1;
   }
}

@media (min-width: 1280px) {
   #botonMenu {
      display: none;
   }

   header {
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: row;
      height: auto;
      gap: 1em;

      #imagenLogo {
         width: 100px;
         object-fit: contain;
      }

      #navMenu {
         display: flex;
         flex-direction: row;
         align-items: center;
         width: 100%;
         justify-content: space-between;

         .div-separacion-enlaces {
            display: flex;
            width: max-content;
            flex-direction: row;
            align-items: center;
            gap: .5em;

            a, button {
               width: max-content;
            }
         }
      }
   }
}

/* Confirmación de herramientas */
#confirmacionHerramientas {
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   z-index: 99999;
   background-color: rgba(0, 0, 0, 0.5);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

#confirmacionHerramientas.on {
   pointer-events: all;
   opacity: 1;
}

#confirmacionHerramientasContenido {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: white;
   padding: 30px;
   border-radius: 15px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-width: 90%;
   width: 400px;
   border-top: 6px solid #eab308;
}

#confirmacionHerramientasTexto {
   color: #333;
   font-size: 18px;
   font-weight: 500;
   text-align: center;
   margin-bottom: 20px;
   line-height: 1.4;
}

#confirmacionHerramientasBotones {
   display: flex;
   gap: 15px;
}

#confirmarHerramientas, #cancelarHerramientas {
   padding: 12px 30px;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 600;
   border: none;
   min-width: 100px;
}

#confirmarHerramientas {
   background-color: #22c55e;
   color: white;
}

#confirmarHerramientas:hover {
   background-color: #16a34a;
}

#cancelarHerramientas {
   background-color: #ef4444;
   color: white;
}

#cancelarHerramientas:hover {
   background-color: #dc2626;
}