/*
Copyright 2021 Banco Interamericano de Desarrollo (https://www.iadb.org/).

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

@font-face {
  font-family: "OpenSans";
  font-weight: 200;
  src: url("./fuentes/OpenSans/OpenSans-Light.ttf") format("truetype");
}

@font-face {
  font-family: "OpenSans";
  font-weight: 200;
  font-style: italic;
  src: url("./fuentes/OpenSans/OpenSans-LightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "OpenSans";
  font-weight: normal;
  src: url("./fuentes/OpenSans/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "OpenSans";
  font-weight: 600;
  src: url("./fuentes/OpenSans/OpenSans-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "OpenSans";
  font-weight: bold;
  src: url("./fuentes/OpenSans/OpenSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "OpenSans";
  font-weight: 900;
  src: url("./fuentes/OpenSans/OpenSans-ExtraBold.ttf") format("truetype");
}

:root {
  background-color: #004e70;
  color: black;
  --bid-blue: #004e70;
  --bid-gray: #3c3b3b;
  --bid-cyan: #009ade;
  --bid-secondary-lightgray: #a6a6a8;
  --clr-white: #fff;
  --clr-secondary-text: white;
}

* {
  box-sizing: border-box;
  font-family: "OpenSans", Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 12px;
  }
}

h1,
h2,
h3,
h4 {
  margin-bottom: 1rem;
}

h1 {
  padding-top: 1em;
  margin-bottom: 1em;
  font-size: 2rem;
}

h1 > span {
  font-size: 1.8rem;
  font-weight: 500;
}

@media (max-width: 1024px) {
  h1 {
    font-size: 1.4rem;
  }

  h1 > span {
    font-size: 1.2rem;
    font-weight: 500;
  }
}

h2 {
  font-size: 1.6rem;
  font-weight: 600;
}

@media (max-width: 1024px) {
  h2 {
    font-size: 1.2rem;
  }
}

h3 {
  font-size: 1.4rem;
  font-weight: 500;
}

@media (max-width: 1024px) {
  h3 {
    font-size: 1rem;
  }
}

p {
  font-size: 1.2rem;
  font-weight: 400;
  text-align: justify;
  margin-bottom: 1em;
  white-space: initial;
}

@media (max-width: 1024px) {
  p {
    font-size: 1rem;
  }
}

p > a {
  color: white;
}

p > a:hover {
  color: var(--bid-cyan);
}

p > a.active {
  color: var(--bid-cyan);
}

/* UTILITIES */

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 95%;
  margin: 0 auto;
}

.sin-menu {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 95%;
  margin: 0 auto;
  padding: 4em;
}

.container > * {
  width: 90%;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-80 {
  width: 100vw;
  align-items: center;
  max-width: 95%;
  margin: 0 auto;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.hidden {
  display: none !important;
}

.selectMain {
  font-size: 1.4rem;
  padding: 1rem 0;
  text-align: center;
  border: 0.1rem solid #005173;
  margin-bottom: 1rem;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .selectMain {
    font-size: 1rem;
  }
}

#nivelOrganizacion {
  padding-inline: 0.5rem;
}

/* BUTTONS */
.btn,
.btnRegresar {
  font-size: 1.2rem;
  text-align: center;
  border: 0.1rem solid var(--bid-blue);
  margin-bottom: 1rem;
  text-decoration: none;
  border-radius: 1rem;
  background-color: white;
  color: var(--bid-blue);
}

@media (max-width: 1024px) {
  .btn,
  .btnRegresar {
    font-size: 1rem;
  }
}

.btn {
  margin-left: 1rem;
  padding: 1rem;
}

.btnLink {
  font-size: 1rem;
  padding: 0.8rem;
  text-align: center;
  margin-top: 0.2rem;
}

.margen {
  margin-top: 1rem;
}

.btn:hover,
.btnRegresar:hover {
  cursor: pointer;
  box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
  transform: translateY(-0.1rem);
  transition: transform 150ms;
}

.btn[disabled]:hover,
.btnRegresar[disabled]:hover {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/* FORMS */
.container-form {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 95%;
  margin: 0 auto;
}

.container-form > * {
  width: 80%;
}

label {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: justify;
  margin-bottom: 0.2em;
}

input {
  font-size: 1.4rem;
  padding: 1rem 0;
  border: 0.1rem solid #005173;
  margin-bottom: 1rem;
  text-decoration: none;
  box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
}

.selectCrear {
  font-size: 1.4rem;
  padding: 1rem 0;
  border: 0.1rem solid #005173;
  margin-bottom: 1rem;
  text-decoration: none;
  box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
  text-align: center;
}

@media (max-width: 1024px) {
  label {
    font-size: 1rem;
  }

  input {
    font-size: 1rem;
  }

  .selectCrear {
    font-size: 1rem;
  }
}

input::placeholder {
  color: #aaa;
}

/* HUD */

#hud {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#hud-rigth {
  display: flex;
  flex-flow: row-reverse;
}

.hud-prefix {
  text-align: left;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 1024px) {
  .hud-prefix {
    font-size: 1.2rem;
  }
}

.hud-main-text {
  text-align: center;
}

@media (max-height: 499px) {
  #hud {
    display: none !important;
  }
}

/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
  color: white;
}

@media (max-width: 799px) {
  .topnav {
    display: none !important;
    color: white;
  }
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  text-align: center;
  padding: 1em 0.5em;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  border-radius: 1rem;
}

@media (max-width: 1024px) {
  .topnav a {
    font-size: 1.2rem;
  }
}

.topnav a:is(.active, :hover):after {
  display: block;
  content: "";
  background-color: var(--clr-white);
  width: 100%;
  height: 5px;
  margin-top: 3px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/*Logo header*/
.logo-p {
  float: left;
  color: transparent;
  text-align: center;
  padding: 0.5em 0.5em;
  text-decoration: none;
  font-size: 1.5rem;

  background-image: url("images/logo_BID.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.logo-header-img {
  display: block;
  margin-inline: auto;
  width: auto;
  height: 15vh;
}

.logo-div {
  background-color: white;
  color: #005173;
}

.fondo-azul {
  background-color: #005173;
  color: white;
}

@media (max-width: 799px) {
  .flex-botones {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (min-width: 800px) {
  .flex-botones {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-direction: row-reverse;
  }
}

.selector-idioma {
  display: flex;
  gap: 0.5rem;
  color: #000;
}

.selector-idioma--claro {
  color: #fff;
}

.cambiar-pais {
  margin-left: 2rem;
}

.selector-idioma__opcion {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
}

.selector-idioma__opcion--seleccionado:after {
  content: " ";
  display: block;
  background-color: var(--bid-blue);
  height: 3px;
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 3px;
}

.selector-idioma--claro > .selector-idioma__opcion--seleccionado:after {
  background-color: var(--clr-white);
}

@media screen and (max-width: 1024px) {
  .selector-idioma__opcion--seleccionado:after {
    height: 2px;
  }

  .selector-idioma__opcion {
    font-size: 0.7rem;
  }
}