@charset "UTF-8";

/*  ======================================= header ======================================= */

/* Estas propiedades están al revés!! Primero diseño móvil, luego diseño para escritorio. HAY QUE CORREGIR */

/* --- CONFIGURACIÓN BASE (Común) --- */

#main_header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: var(--space-wide);
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000;
   box-shadow: var(--hardshadow);
   border-bottom: var(--font-nano) solid var(--secondary);
}

#main_header.scrolled {
   background-color: rgba(255, 255, 255, 1.0);
}

#logo_container,
div.nav-option>a,
#btn-servicios,
#btn-identity {
   color: var(--color-white);
}

#main_header.scrolled #logo_container,
#main_header.scrolled div.nav-option>a,
#main_header.scrolled #btn-servicios,
#main_header.scrolled #btn-identity {
   color: var(--color-black);
}

.topnav {
   display: flex;
   flex-direction: row;
   align-items: center;
   height: 100%;
   padding: 0 var(--space-base);
}

#logo_container {
   display: contents;
   font-weight: var(--weight-medium);
   font-size: calc(var(--font-base) + var(--font-small));
}

#header_logo {
   height: var(--space-large);
   display: block;
}

/* Estilo de botones y enlaces */
#main_header button,
#main_header a {
   background: none;
   border: none;
   padding: var(--space-tiny) var(--space-base);
   font-size: var(--font-base);
   cursor: pointer;
   display: block;
}


#logo_container a {
   padding: auto var(--space-small);
}

#main_header button,
#main_header a.nav-option {
   min-width: var(--space-giant);
   padding: var(--space-tiny) var(--space-base);
   border-radius: var(--space-medium);
}

#main_header button:hover,
#main_header a:hover {
   color: var(--highlight);
}

#btn-identity button {
   border: 1px solid var(--color-darkwhite);
   color: var(--color-white);
}

#btn-identity.unsigned {
   background-color: var(--primary);
}

#btn-identity.signed {
   background-color: var(--contrast);
}

#btn-identity:hover {
   background-color: var(--highlight);
   box-shadow: var(--softshadow);
}

#togglenav {
   color: var(--color-darkgray);
}

/* Lógica de Dropdowns (Común) */
.dropdown {
   position: relative;
}

.dropdown-content {
   display: none;
   /* Ocultos por defecto en ambas versiones */
   background-color: var(--color-white);
}

/* Hover solo para escritorio (opcional, si prefieres clic debes usar JS) */
@media screen and (min-width: 1025px) {
   .dropdown:hover .dropdown-content {
      display: block;
   }
}

/* --- VERSIÓN ESCRITORIO (> 1024px) --- */

@media screen and (min-width: 1025px) {
   #togglenav {
      display: none;
   }

   /* Oculto en escritorio */

   #main_nav {
      display: flex !important;
      flex-grow: 1;
      justify-content: space-around;
      flex-direction: row;
   }

   .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: var(--space-giant);
      box-shadow: var(--hardshadow);
      border: 1px solid var(--contrast);
      border-radius: var(--space-medium);
      z-index: 100;
   }
}

/* --- VERSIÓN MÓVIL (< 1024px) --- */

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

   .topnav {
      justify-content: space-between;
   }

   #togglenav {
      display: block;
      /* Visible en móvil */
      color: var(--color-darkgray);
      font-size: var(--font-wide);
      cursor: pointer;
      order: 2;
   }

   #main_nav {
      display: none;
      /* El JS con slideToggle lo muestra/oculta */
      position: absolute;
      top: var(--space-wide);
      left: 0;
      width: 100%;
      background: var(--color-white);
      flex-direction: column;
      border-top: 1px solid var(--contrast);
      box-shadow: var(--hardshadow);
   }

   /* El ID Container siempre visible junto al logo o togglenav */

   #id_container {
      width: 100%;
      order: 1;
      margin-left: auto;
      margin-right: var(--space-base);
   }

   #id_container .dropdown {
      width: 100%;
      position: unset;
   }

   /* Submenús en móvil: modo acordeón vertical */
   .dropdown-content {
      position: static;
      min-width: unset;
      background: #f9f9f9;
   }

   #menu-identity {
      position: absolute;
      min-width: 100% !important;
      box-shadow: none;
      left: 0;
      /**/
   }

   #btn-identity {
      width: 100%;
      text-align: right;
   }

   .nav-option,
   .dropdown {
      width: 100%;
   }

   .nav-suboption a {
      padding-left: var(--space-large) !important;
   }
}