@font-face {
  font-family: Raleway;
  src: url("fuentes/raleway-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root { --granate:#85353b; --pizarra:#262f36; --gris:#5e6f76; --salvia:#b6c9c5; --turquesa:#82c0c7; --claro:#e8e8e8; }
* { box-sizing: border-box; }
body { margin:0; font-family: Raleway, "Segoe UI", Arial, sans-serif; background:var(--claro); color:var(--pizarra); line-height:1.5; }
.cabecera { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:.6rem 1.5rem; background:#fff; border-bottom:4px solid var(--granate); }
.marca img { height:3rem; width:auto; display:block; }
.cabecera nav { display:flex; flex-wrap:wrap; gap:.3rem 1rem; }
.cabecera nav a { color:var(--gris); text-decoration:none; padding:.4rem .2rem; border-bottom:3px solid transparent; font-weight:600; }
.cabecera nav a:hover { color:var(--granate); border-bottom-color:var(--turquesa); }
.cabecera nav a[aria-current] { color:var(--granate); border-bottom-color:var(--granate); }
main { max-width: 60rem; margin: 1.5rem auto; padding: 1.5rem; background:#fff; border-top: 6px solid var(--granate); border-radius: 6px; }
main.estrecha { max-width: 26rem; margin-top: 6vh; }
h1 { font-size: 1.4rem; margin-top: 0; color: var(--granate); }
a { color: var(--granate); }
label { display:block; margin: 1rem 0 .3rem; color: var(--gris); }
input, select { width:100%; padding:.7rem; font-size:1rem; font-family:inherit; border:1px solid var(--gris); border-radius:4px; }
input[type=checkbox] { width:auto; }
button { margin-top:1.2rem; width:100%; padding:.8rem; font-size:1rem; font-family:inherit; color:#fff; background:var(--granate); border:0; border-radius:4px; cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--turquesa); outline-offset:2px; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--claro); }
th { color:var(--gris); }
.error { background:#f6e4e5; border-left:4px solid var(--granate); padding:.7rem; margin-bottom:1rem; }
.qr svg { width:100%; height:auto; max-width:16rem; display:block; margin:1rem auto; }
code { word-break: break-all; }
@media (max-width: 700px) {
  .cabecera { padding:.5rem 1rem; gap:.5rem; }
  .cabecera nav { flex-direction:column; width:100%; gap:0; }
  main { margin:0; border-radius:0; padding:1rem; }
  main.estrecha { margin-top:0; }
}
.desplazable { overflow-x:auto; }