/* Contenedor que centra todo */
#body_container {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Contenedor principal */
#login_container {
   display: flex;
   border-radius: var(--space-medium);
   background-color: var(--neutral);
   color: var(--color-white);
   overflow: hidden;
   box-shadow: var(--shadow-softblack);
}

#container_leftside,
#container_rightside {
   padding: var(--space-large);
}

#container_leftside {
   background-image: url('/img/complementary_bkg.jpg');
   background-size: auto 480px;
   background-position: center center;
}


/* =========================================
   HORIZONTAL
   ========================================= */

@media (orientation: landscape) {

   #login_container {
      width: 80%;
      height: 460px;
      flex-direction: row;
   }

   #container_leftside {
      /* Ocupa todo el espacio que queda después de los 460px del rightside. */
      flex: 1 1 auto;
      min-width: 160px;
   }

   #container_rightside {
      /* * NO cambia de tamaño.  */
      flex: 0 0 460px;
      width: 460px;
      height: 460px;
      background-color: var(--color-white);
   }
}


/* =========================================
   VERTICAL
   ========================================= */

@media (orientation: portrait) {

   #login_container {
      width: 460px;
      /*  El alto será: altura del LEFT + 460px del RIGHT */
      height: auto;
      flex-direction: column;
   }

   #container_leftside {
      /* El ancho permanece fijo en 460px.  Su altura puede crecer según su contenido. */
      width: 460px;
      flex: 0 1 auto;
   }

   #container_rightside {
      /*  NO cambia de tamaño. */
      flex: 0 0 460px;
      width: 460px;
      height: 460px;
      background-color: var(--color-white);
   }

   /* Elementos del LEFT en una sola línea  */
   #container_leftside {
      display: flex;
      align-items: center;
   }

   #container_leftside ul {
      display: flex;
      margin: 0;
      padding: 0;
   }
}


/* =========================================
   ELEMENTOS
   ========================================= */

#upper_logo {
   height: var(--size-wide);
}

#container_leftside li {
   list-style: none;
}

#lang_chg {
   padding: var(--space-tiny);
   font-size: var(--font-medium);
   border-color: var(--color-lightgray);
   color: var(--color-darkgray);
   width: var(--space-broad);
}

button {
   border-color: var(--color-lightgray);

}

button:hover {
   box-shadow: var(--shadow-softblack);
}

button>img {
   vertical-align: middle;
}