@charset "UTF-8";

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

/* --------------------------------------- header contenedor nivel index */

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

#main_header.scrolled {
   background-color: var(--secondary);
}


/* --------------------------------------- contenedor principal */

#mainbar-nav {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
}

#mainbar-nav .button {
   margin-top: var(--space-small);
   padding: var(--space-tiny) var(--space-base);
   border-radius: var(--space-base);
   align-items: center;
   display: inline-flex;
   background-color: rgba(0, 0, 0, 0.5);
   color: var(--color-white);
   height: var(--space-large);
}

#mainbar-nav .button span.arrow {
   margin: var(--space-small);
}

#mainbar-nav .micro_icon {
   height: var(--space-base);
   margin: 0 var(--space-nano);
}

#mainbar-nav .mgn-left {
   margin-left: var(--space-small);
}

#mainbar-nav .mgn-right {
   margin-right: var(--space-small);
}


/* --------------------------------------- contenedor paginas nav_internal */

#nav-internal {
   flex-grow: 1;
}

#nav-internal.mobile {
   display: flex;
   flex-direction: column;
}

#nav-internal.desktop {
   display: flex;
   flex-direction: row;
   gap: var(--space-small);
}

/* logo */

#container-logo {
   font-weight: var(--weight-medium);
}

#mainbar-nav #btn-logo {
   margin-top: var(--space-nano);
   padding: var(--space-nano) var(--space-base);
   background-color: var(--color-white) !important;
   height: var(--space-large)+var(--space-tiny) !important;
}

#header-logo {
   height: var(--space-large);
   width: var(--space-wide)*2;
}

/* contenedor */

.mobile #container-pages {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}

.desktop #container-pages {
   display: flex;
   flex-direction: row;
   gap: var(--space-small);
}

.dropdown-menu {
   padding: var(--space-small);
   display: flex;
   align-items: left;
   flex-direction: column;
   border: var(--space-nano) var(--secondary) solid;
   background-color: var(--color-darkwhite);
   border-radius: var(--space-small);
}

.dropdown-menu .dropdown-menu {
   border: none;
}

/* --------------------------------------- contenedor paginas de actividad nav_activity */


#nav-activity {
   display: flex;
   flex-direction: row;
   gap: var(--space-small);
}