:root {
  --tinta: #1b1a17;
  --papel: #faf8f4;
  --apagado: #6b6558;
  --linea: #ddd7cc;
  --enlace: #7a3b2e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 1.05rem/1.65 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

main { max-width: 42rem; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
main.ancho { max-width: 64rem; }

h1, h2, h3 { font-family: system-ui, sans-serif; line-height: 1.25; margin: 2rem 0 .6rem; }
h1 { font-size: 1.9rem; margin-top: 0; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--enlace); }
a:hover { text-decoration: none; }

.cabecera {
  border-bottom: 1px solid var(--linea);
  background: #fff;
  position: sticky; top: 0; z-index: 2;
}
.cabecera > div {
  max-width: 64rem; margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; gap: 1rem; align-items: center;
  font-family: system-ui, sans-serif; font-size: .9rem;
}
.cabecera .marca { font-weight: 600; text-decoration: none; color: var(--tinta); }
.cabecera nav { display: flex; gap: .75rem; flex-wrap: wrap; }
.cabecera form { margin-left: auto; display: flex; gap: .4rem; }
.cabecera input { padding: .3rem .5rem; border: 1px solid var(--linea); border-radius: 3px; }
.cabecera .quien { color: var(--apagado); }

table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: .92rem; }
th, td { border-bottom: 1px solid var(--linea); padding: .4rem .6rem; text-align: left; }
th { font-family: system-ui, sans-serif; font-size: .82rem; text-transform: uppercase;
     letter-spacing: .04em; color: var(--apagado); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
.envoltorio-tabla { overflow-x: auto; }
.titulo-tabla { font-family: system-ui, sans-serif; font-size: .95rem; color: var(--apagado);
                margin: 1.5rem 0 -1rem; }

blockquote { border-left: 3px solid var(--linea); margin: 1.2rem 0; padding: .1rem 1rem;
             color: var(--apagado); }
code { background: #f0ece4; padding: .1em .3em; border-radius: 3px; font-size: .9em; }

.entrada main { max-width: 22rem; padding-top: 5rem; }
.entrada form { display: flex; flex-direction: column; gap: .8rem; }
.entrada label { display: flex; flex-direction: column; gap: .25rem;
                 font-family: system-ui, sans-serif; font-size: .85rem; color: var(--apagado); }
.entrada input { padding: .45rem .55rem; border: 1px solid var(--linea); border-radius: 3px;
                 font-size: 1rem; }
.entrada button { padding: .5rem; border: 0; border-radius: 3px; background: var(--tinta);
                  color: var(--papel); font-size: 1rem; cursor: pointer; }
.error { color: #8b2d20; }
.aviso { color: var(--apagado); }

.listado { list-style: none; padding: 0; }
.listado li { border-bottom: 1px solid var(--linea); padding: .5rem 0; }

.ficha { display: grid; grid-template-columns: auto 1fr; align-items: baseline;
         gap: .35rem 1.2rem; margin: 1.5rem 0; padding: .9rem 1.1rem;
         border: 1px solid var(--linea); background: #fff; }
.ficha dt { font-family: system-ui, sans-serif; font-size: .78rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--apagado); }
.ficha dd { margin: 0; font-size: .95rem; }

.orden-de-lectura ol { padding-left: 1.6rem; }
.orden-de-lectura li { margin: .25rem 0; }
.orden-de-lectura p { margin-bottom: .5rem; }