/* Tokens tomados de styles.css / reset.css del simulador */
:root {
  --fondo: #333;
  --fondo-hondo: #262626;
  --borde: #6c7d8f;
  --texto: rgb(221, 214, 214);
  --blanco: #fff;
  --azul: #2c7ae0;
  --azul-claro: #86b8f7;
  --opcion: rgb(39, 172, 132);
  --rojo: red;
  --verde: rgb(114, 216, 19);
  --t-verde: #00c853;
  --t-amarillo: #ffd600;
  --t-rojo: #d50000;
}

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: 
  border-box; }

html { 
  scroll-padding-top: 1rem; 
  -webkit-print-color-adjust: exact; 
  print-color-adjust: exact; }

body {
  background: var(--fondo); 
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}

.pagina { 
  max-width: 1024px; 
  margin: 0 auto; 
}

header {
  background: #f0e2e20a; 
  border-bottom: 1px solid var(--borde);
  display: flex; 
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  gap: .6rem; 
  padding: 1.2rem 1rem;
}

header a { 
 text-align: center;
}

header img { 
  width: min(420px, 80%); 
  height: auto;
  margin: 0 auto;
  align-items: center;
}

header p { 
  font-size: 1.05rem; 
  text-align: center; 
}


nav { 
  border-bottom: 1px solid var(--borde); 
  padding: .8rem 1rem; 
}

nav ul { 
  list-style: none; 
  display: flex; 
  flex-wrap: wrap; 
  gap: .4rem .6rem; 
  justify-content: center; 
}

nav a {
  display: block; padding: .3rem .8rem; 
  border: 1px solid var(--borde); 
  border-radius: 5px;
  color: var(--texto); 
  text-decoration: none; 
  font-size: .95rem;
}

nav a:hover, 
nav a:focus-visible { 
  background: var(--azul); 
  color: var(--blanco); 
  outline: none; 
}

main { 
  padding: 1.5rem 1.2rem 2.5rem; 
}

section { 
  padding: 1.6rem 0; 
  border-bottom: 1px solid #4a4a4a; 
}

section:last-of-type { 
  border-bottom: 0; 
}

h2 { 
  color: var(--blanco); 
  font-size: 1.6rem; 
  margin-bottom: .8rem; 
}


h3 { 
  color: var(--blanco); 
  font-size: 1.15rem; 
  margin: 1.3rem 0 .5rem; 
}

p { 
  margin-bottom: .8rem; 
  max-width: 72ch; 
}

ul.lista, 
ol.lista { 
  margin: 0 0 .9rem 1.3rem; 
  max-width: 72ch; 
}

ul.lista { 
  list-style: disc; 
} 

ol.lista { 
  list-style: decimal; 
}

.lista li { 
  margin-bottom: .3rem; 
}

strong { 
  color: var(--blanco); 
}

a { 
  color: var(--azul-claro); 
}

a:focus-visible, 
nav a:focus-visible { 
  outline: 2px solid var(--azul-claro); 
  outline-offset: 2px; 
}

code { 
  background: var(--fondo-hondo); 
  padding: .1rem .4rem; 
  border-radius: 4px; 
  font-size: .92em; 
  color: var(--blanco); 
}

pre {
  background: var(--fondo-hondo); 
  border: 1px solid var(--borde); 
  border-radius: 5px;
  padding: 1rem; 
  overflow-x: auto; 
  margin-bottom: 1rem; 
  font-size: .9rem; 
  line-height: 1.5; 
  color: var(--texto);
}

pre code { 
  background: none; 
  padding: 0; 
}

.tabla { 
  overflow-x: auto; 
  margin-bottom: 1rem;
}

table { 
  border-collapse: collapse; 
  width: 100%; 
  font-size: .95rem;
  table-layout: fixed;
}

th, 
td { 
  border: 1px solid var(--borde); 
  padding: .5rem .7rem; 
  text-align: left; 
  vertical-align: center; 
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}

th { 
  background: #f0e2e214; 
  color: var(--blanco); 
}



/* Botones: réplica de los del simulador */

.btn {
  display: inline-block; 
  padding: .35rem .9rem; 
  border: 1px solid var(--borde); 
  border-radius: 5px;
  font-size: 1rem; 
  line-height: 1.3; 
  margin: .15rem .25rem .15rem 0; 
  color: var(--texto); 
  background: var(--azul);
}

.btn.opciones { 
  background: var(--opcion); 
}

.btn.rojo { 
  background: var(--rojo); 
}

.btn.verde { 
  background: var(--verde); 
  color: rgb(39, 38, 38); 
}

/* Flujo de pantallas */

.flujo { 
  display: grid; 
  gap: .7rem; 
  margin: 1rem 0 1.4rem; 
}

.pantalla { 
  border: 1px solid var(--borde); 
  border-radius: 5px;
  background: #f0e2e20a; 
  padding: .8rem 1rem; }

.pantalla .id { 
  font-size: .85rem; 
  color: var(--azul-claro); 
}

.pantalla .id code { 
  color: var(--azul-claro); 
  background: none; 
  padding: 0; }

.pantalla .texto { 
  color: var(--blanco);
  margin: .15rem 0 .1rem; 
}

.pantalla .audio { 
  font-size: .9rem; 
  margin-bottom: .4rem; 
}

.pantalla .destinos { 
  font-size: .9rem; 
  margin-top: .3rem; 
}

/* Muestras de color */

.paleta { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
  gap: .7rem; 
  margin: .8rem 0 1.2rem; 
}

.muestra { 
  border: 1px solid var(--borde); 
  border-radius: 5px; 
  overflow: hidden; 
}

.muestra .color { 
  height: 46px; 
}

.muestra .datos {
  padding: .5rem .7rem; 
  font-size: .88rem; 
}

.muestra .datos b { 
  display: block; 
  color: var(--blanco); 
  font-weight: 600; 
}


.barra { 
  height: 22px; 
  border-radius: 30px; 
  overflow: hidden; 
  background: #333; 
  border: 1px solid var(--borde); 
  max-width: 400px; 
  margin: .5rem 0 1rem; 
}

.barra div { 
  height: 100%; 
}

footer {
  background: var(--fondo); 
  border-top: 1px solid var(--borde); 
  color: var(--blanco);
  padding: 1.3rem 1rem; 
  text-align: center;
}

footer .fila { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 1rem; 
  margin-bottom: .7rem; }

footer .fila img { 
  height: 52px; 
  width: auto; 
}

footer .fila .bandera { 
  width: 70px; 
  height: auto; 
}

footer p { 
  margin: 0 auto .3rem; 
  font-size: .95rem; 
}

.nota { 
  border-left: 4px solid var(--azul); 
  background: #f0e2e20a; 
  padding: .7rem 1rem; 
  margin: 0 0 1rem; 
  max-width: 72ch; 
}

.nota.aviso { 
  border-left-color: var(--t-amarillo); 
}

td code, th code { 
  white-space: normal; 
  word-break: break-word; 
}

@media (max-width: 600px) { 
  h2 { 
    font-size: 1.35rem; 
  } 
  main { 
    padding: 1rem .9rem 2rem; 
  } 
}

@media print {
  nav { 
    display: none;
   }
  section {
    break-inside: avoid-page; 
  }
  .pantalla, pre, .tabla {
    break-inside: avoid; 
  }
}