.hidden-sub {
  display: 'none';
}

.expand-btn {
    font-family: inherit;
    border: none;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 18rem;
    margin-left: 30px !important;
  }

svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
}

.svg-inline--fa {
    display: var(inline-block);
    height: 1em;
  } 

button { /* all buttons*/
    text-transform: none;
    box-sizing: border-box;
    font-size: inherit;
    line-height: inherit;
}

button#Orth-expand, button#subOrth {
  cursor: pointer;
}

#identificar li::marker, #sugerencia li::marker, 
button#seleccion-pautas-ident-title,  button#introduccion-texto-ident-title, button#intro-empieza-title, button#resultados-ident-title, button#empezar-nuevo-ident-title, 
button#seleccion-pautas-sug-title, button#introduccion-texto-sug-title, button#obtener-sug-title, button#resultados-sug-title, button#empezar-nuevo-sug-title,
#guideline-list li::marker, #guideline-list span{
  font-weight: bold;
  color: #00013F;
}

#identificar button.expand-btn, #sugerencia button.expand-btn, .hidden button.expand-btn {
  width: 18rem;
}

.pautas button.expand-btn {
  width: 22rem;;
}

.pautas-sublist button.expand-btn {
  width: 25rem;
}

button {
  width: 20px;
  height: 20px;
  margin-top: 20px;
  margin-left: 2%;
}

button.subOrtho, button.subVocab, button.subOrac, .pautas button{
  width: 50px;
  height: 30px;
  font-size: 20px;
}

ul#guideline-list button{
  margin-left: 30%;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}

.topnav {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
  }


  .topnav a {
    text-decoration: none;
    font-size: large;
    color: #00013F67;
  }

  .topnav a.active {
    text-decoration: underline;
    color: #00013F;
  }

  .topnav-logo {
    max-width: 300px;
    margin-left: 20px;
  }

  .topnav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: hidden;
  }

  .topnav-right {
    width: 60%;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: 25px;
  }

  .main {
    background-color: #00013F10;
    border-top: 2px solid #00013F15;
    padding-bottom: 30px;
    flex-grow: 1;
  }

  .main h1 {
    text-align: center;
    align-items: center;
    color: #00013F;
  }

  .main p {
    width: 46%;
    margin-left: 27%;
  }

  .main h2, .main h3 {
    width: 46%;
    margin-left: 27%;
    color: #00013F;
}

.main li {
    width: 46%;
    margin-left: 27%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.main ol li a {
  text-decoration: none;
  font-size: medium;
  color: #00013F;
}

.main ol li a:hover {
  color: blue;
}

.uso-logo {
  justify-content: space-between;
  margin-left: 35%;
  margin-right: 35%;
  display: flex;

}
.uso-logo img {
  float: left; /* Aligne les photos à gauche */
  width: 100%; /* Largeur des images */
  transition: transform 0.3s ease;
  max-width: 100%;
}

.uso-logo img:hover {
  transform: scale(1.1);
}

#identificar ol, #sugerencia ol{
  list-style-position: outside; /* Les numéros de la liste restent à l'intérieur du conteneur */
  padding-left: 0; /* Supprime l'indentation par défaut de la liste */
  margin: 0 auto;
}

#identificar li, #sugerencia li {
  margin-bottom: 20px; /* Ajoute un espace entre les éléments de liste */
  width: 80%;

}

#identificar h4 {
  display: inline;
  margin: 0; /* Enlève la marge en haut et ajoute une marge en bas */
  padding-left: 5px;
}

#identificar p {
  margin-left: 25px; /* Indente le paragraphe sous le titre */
  text-align: left; /* Assure que le texte est aligné à gauche */
  margin-left: 0;
  width: 70%;

}

#identificar .identificar-logo-pautas, .identificar-logo-pautas-todas, .identificar-logo-pautas-esp {
  margin-left: 100px
}

#identificar .identificar-logo-pautas img, .identificar-logo-pautas-todas img, .identificar-logo-pautas-esp img{
  width: 25%;
}

.intro-texto, .intro-fichero {
  justify-content: space-between;
  margin-left: 0;
  margin-right: 55%;
  display: flex;
}

.intro-texto, .intro-fichero p {
  width:50%;
}
.intro-texto img  {
  float: left; /* Aligne les photos à gauche */
  width: 20%; /* Largeur des images */
  /* transition: transform 0.3s ease; */
  max-width: 100%;
  padding-right: 8%;
}

.intro-fichero img {
  float: left; /* Aligne les photos à gauche */
  width: 20%; /* Largeur des images */
  height: 20%;
  /* transition: transform 0.3s ease; */
  max-width: 100%;
  padding-top: 5%;
}

.intro-empieza-img {
  margin-left: 10%;
}

.intro-empieza-img img {
  width: auto;
}

#identificar, #sugerencia, .mejoras, .pautas, .pautas-container{
  padding-top: 2%;
  padding-left: 3%;
}

#sugerencia ol li p {
  margin-left: 0px;
  height: 50%;
  width: 70%;
}

#sugerencia ol li p a {
  text-decoration: none;
  font-size: medium;
  color: #3f0025;

}

#sugerencia ol li p a:hover {
  
  color: #00013F;
}

.pautas-container li{
  margin-left: 4%;
  width: 90%
}

.pautas h3 {
  margin-left: 2%;
  width: 10%;
  margin-right: 0;
  padding-right: 0;
}

.pautas p {
  margin-left: 0;
  width: 80%;
}

.uso a {
  color: #00013F;
  text-decoration: none;
}

/* .pautas button {
  font-size: 20px;
  height: 30px;
  margin-top: 30px;
  width: 50px;
} */

.img-13O img, .img-Vocab img, .img-Or img{
  width:100%;
  height: auto;
  border-radius: 10px;
}

.adapt img {
  width:50%;
  padding-left: 15%;
}

.pautas h5 {
  padding-left: 37%;
  color: #00013F;
  text-decoration: underline;
}

div.centro {
  padding-left: 27%;
}

  body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    --color-success: #436426;
    --color-info: #006ab2;
    --color-warning: #E2CC44;
    --color-warning-light: #fff0ab;
    --color-error: #8B2B20;
    --color-error-light: #E9CDCF;
    --color-multi: #762dc9;
    --color-multi-light: #dac3ff;
    --color-auto: #1e970e;
    --color-auto-light: #afffa4;
    --color-auto-not: #ad6109;
    --color-auto-not-light: #ffa0a0;
    --color-level-2: #139c6f;
    --color-level-2-light: #aaffe3;
    --color-level-3: #198391;
    --color-level-3-light: #7adae7;
    --brand-deep-blue: #00013F;
  }

footer {
    display: flex;
}

.footer-logos {
    width: 30%;
    padding-right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
  }

.footer-logos img {
    height: 100%;
    object-fit: contain;
    overflow: hidden;
    margin-left: 6.75%;
}

footer h3 {
    color: #00013F70;
    font-size: medium;
}

.footer-links {
    width: 40%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    border-left: 2px solid #00013F;
    border-right: 2px solid #00013F;
}

.footer-links ul {
    padding: 0;
    list-style-type: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    font-size: medium;
    color: #00013F;
}

.footer-links-col1 {
    margin-left: 40px;
    margin-right: 80px;
}

.footer-links-col2 {
    padding-right: 40px;
}

.footer-contact {
    margin-left: 40px;
    margin-top: 10px;
    margin-right: 25px;
}

.footer-contact a {
    text-decoration: none;
    font-size: medium;
    color: #00013F;
}

  a:hover {
    color: blue;
  }

.version-tag {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.5rem !important;
    color: #1c1e85 !important;
    font-weight: 600 !important;
    margin-left: 8px !important;
}

#guideline-list {
  list-style-type: disc; /* bullets estándar */
  list-style-position: outside; /* que el bullet quede fuera y bien alineado */
  padding-left: 40px; /* ajusta este valor según lo que uses en los pasos numerados */
  margin-left: 22%;
}

#guideline-list li,
.pautas-sublist li {
  padding-left: 0;
  margin-left: 0;
}