@font-face { font-family: "Pagella"; src: url("fuentes/pagella-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pagella"; src: url("fuentes/pagella-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --noche: #0c2340;
  --noche-2: #16345a;
  --linea: rgb(255 255 255 / 0.13);
  --celeste: #8ec5ff;
  --azul: #003d7a;
  --azul-claro: #1a5f9e;
  --azul-medio: #2f7fc4;
  --azul-texto: #1f5f9e;
  --tinta: #333333;
  --gris: #5f6972;
  --borde: #d0d7de;
  --mesa: #e6eaee;
  --papel: #ffffff;
  --serif: "Pagella", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { color: var(--tinta); background: var(--papel); font: 17px/1.5 var(--serif); }
a { color: var(--azul-claro); text-underline-offset: 0.16em; }
::selection { background: rgb(0 61 122 / 0.2); }
html { scrollbar-color: #9fb0c0 transparent; }
:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; }

/* Portada: el bloque de texto lleva su propio cielo, de modo que el título nunca cae sobre la foto. */
.tapa {
  --cielo: var(--noche);
  position: relative;
  display: flex;
  flex-direction: column;
  height: max(100svh, 640px);
  color: #fff;
  background: var(--cielo);
  overflow: hidden;
}
.tapa-foto { order: 1; flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; object-position: 54% 72%; }
.cielo { position: relative; z-index: 1; background: var(--cielo); }
.cielo::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: clamp(40px, 8vh, 90px); background: linear-gradient(var(--cielo), rgb(12 35 64 / 0)); pointer-events: none; }
.tapa-nav { color: var(--azul); display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 12px clamp(24px, 5vw, 72px); background: #fff; font-family: var(--sans); font-size: 15px; }
.logos { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.logos img { display: block; width: auto; max-width: 100%; }
.logos-pie { flex-wrap: wrap; }
.tapa-enlaces { display: flex; gap: 24px; }
.tapa-nav a { color: inherit; text-decoration: none; }
.tapa-nav a:hover { text-decoration: underline; }
.tapa-texto { display: flex; justify-content: space-between; align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(18px, 3.6vh, 40px) clamp(24px, 5vw, 72px) 10px; }
.tapa h1 { max-width: 18em; margin: 0 0 12px; font-size: clamp(36px, min(4.8vw, 8.4svh), 80px); line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance; }
.firma { margin: 0 0 14px; color: #fff; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; }
.bajada { color: #d5e0ec; margin: 0 0 20px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.boton-principal, .boton-segundo { display: inline-block; padding: 12px 28px; border: 2px solid var(--celeste); border-radius: 6px; font-family: var(--sans); font-size: 17px; font-weight: 600; text-decoration: none; transition: background 160ms ease-out, color 160ms ease-out; }
.boton-principal { color: var(--noche); background: #fff; border-color: #fff; }
.boton-principal:hover { background: #b9dcff; border-color: #b9dcff; }
.boton-principal.quieto { color: #fff; background: none; border-color: rgb(255 255 255 / 0.45); }
.boton-principal.quieto:hover { background: var(--linea); border-color: #fff; }

/* Pantallas bajas: apilada, la foto quedaría en una franja; va al costado para que se vea el auto entero. */
@media (min-width: 900px) and (max-height: 860px) {
  .tapa { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); grid-template-rows: auto minmax(0, 1fr); }
  .cielo { display: contents; }
  .tapa-nav { grid-column: 1 / -1; grid-row: 1; }
  .tapa-texto { grid-column: 1; grid-row: 2; padding-right: 0; }
  .tapa-foto { grid-column: 2; grid-row: 2; height: 100%; object-position: 58% 66%; -webkit-mask-image: linear-gradient(to right, transparent, #000 26%); mask-image: linear-gradient(to right, transparent, #000 26%); }
  .tapa h1 { font-size: clamp(34px, min(3.8vw, 8svh), 60px); }
  .firma, .bajada { font-size: clamp(17px, 1.35vw, 20px); }
}

/* Pantallas anchas de altura media: el texto se compacta para que la foto muestre el auto entero. */
@media (min-width: 1200px) and (min-height: 861px) and (max-height: 1150px) {
  .tapa-texto { padding-top: 16px; padding-bottom: 6px; }
  .tapa h1 { margin-bottom: 8px; font-size: clamp(36px, min(4vw, 6.4svh), 72px); }
  .firma { margin-bottom: 6px; font-size: 18px; }
  .bajada { margin-bottom: 12px; font-size: 18px; }
  .tapa-foto { object-position: 54% 78%; }
}

h2 { margin: 0 0 6px; color: var(--azul); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.2; }

.resumen { display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); padding: clamp(48px, 8vw, 104px) clamp(24px, 5vw, 72px); color: #e4edf5; background: var(--noche); }
.resumen a { color: #fff; font-family: var(--sans); font-weight: 600; }
.ficha p { margin: 0 0 18px; font-size: 16px; }
.ficha .autores { color: #fff; font-size: 21px; line-height: 1.35; }
.resumen h2 { color: #fff; }
.resumen h2 { font-size: 26px; }
.resumen-texto p { max-width: 62ch; margin: 12px 0 22px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; }

.como { padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 72px) 0; }
.como .nota { margin: 0 0 28px; color: var(--gris); font-size: 19px; }
.ayudas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.ayudas img { border-radius: 6px; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: left top; box-shadow: 0 0 0 1px var(--borde), 0 8px 24px rgb(0 30 70 / 0.12); }
.ayudas strong { display: block; margin-top: 14px; color: var(--azul); font-size: 22px; line-height: 1.3; }
.ayudas span { display: block; margin-top: 2px; color: var(--gris); font-size: 16px; }

.capitulos { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); padding: clamp(56px, 8vw, 112px) clamp(24px, 5vw, 72px); }
.capitulos h2 { margin-bottom: 18px; }
.lamina { border-radius: 8px; position: sticky; top: 32px; align-self: start; aspect-ratio: 3 / 2; background: #fff; overflow: hidden; }
.lamina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.lamina img.activa { opacity: 1; }
.indice { list-style: none; margin: 0; padding: 0; }
.indice li { padding: 13px 0; border-top: 1px solid var(--borde); }
.capitulo { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; color: var(--tinta); font-size: 20px; line-height: 1.3; text-decoration: none; }
.capitulo:hover { color: var(--azul); background: var(--mesa); box-shadow: -8px 0 0 var(--mesa), 8px 0 0 var(--mesa); }
.mini { display: none; }
.num { color: var(--azul); font-weight: 700; font-variant-numeric: tabular-nums; }
.pag { color: var(--gris); font-size: 16px; font-variant-numeric: tabular-nums; }
.anexos { margin: 6px 0 2px 40px; }
.anexo { display: block; padding: 2px 0; color: var(--azul-claro); font-size: 16px; line-height: 1.35; text-decoration: none; }
.anexo:hover { text-decoration: underline; }
.retomar { position: relative; display: block; min-width: min(380px, 100%); padding: 13px 26px 17px; overflow: hidden; color: var(--noche); background: #fff; border-radius: 6px; font-family: var(--sans); text-decoration: none; transition: background 160ms ease-out; }
.retomar[hidden] { display: none; }
.retomar:hover { background: #e6f2ff; }
.retomar b { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.retomar small { display: block; margin-top: 2px; color: #44586e; font-size: 15px; line-height: 1.3; }
.retomar .medida { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #d5e3f2; }
.retomar .medida i { display: block; height: 100%; background: var(--azul-medio); }
.letra { color: var(--azul-texto); font-weight: 700; white-space: nowrap; }

.descargas { padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 72px); background: var(--mesa); }
.descargas h2 { font-size: clamp(26px, 2.6vw, 34px); }
.leer-aca { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 1040px; margin: 14px 0 18px; padding: 16px 18px; color: #d5e0ec; background: var(--noche); border-radius: 8px; font-family: var(--sans); font-size: 15px; line-height: 1.35; text-decoration: none; }
.leer-aca strong { display: block; color: #fff; font-size: 19px; font-weight: 600; }
.leer-aca b { flex: none; padding: 10px 20px; color: var(--noche); background: #fff; border-radius: 6px; font-size: 16px; font-weight: 600; transition: background 160ms ease-out; }
.leer-aca:hover b { background: #b9dcff; }
.descargas .nota { margin: 0 0 18px; color: var(--gris); font-size: 18px; }
.archivos { max-width: 1040px; margin: 0; padding: 0; list-style: none; background: var(--papel); border: 1px solid var(--borde); border-radius: 8px; font-family: var(--sans); }
.archivos li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 124px; align-items: center; gap: 8px 16px; padding: 14px 18px; }
.archivos li + li { border-top: 1px solid var(--borde); }
.archivos svg { width: 28px; height: 28px; fill: none; stroke: var(--azul-medio); stroke-width: 1.4; stroke-linejoin: round; }
.archivos strong { display: block; color: var(--azul); font-size: 17px; font-weight: 600; line-height: 1.3; }
.archivos div span { display: block; color: var(--gris); font-size: 15px; line-height: 1.35; }
.peso { color: var(--gris); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.boton-archivo { padding: 9px 14px; color: #fff; background: var(--azul); border-radius: 6px; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; transition: background 160ms ease-out; }
.boton-archivo:hover { background: var(--azul-claro); }
.llega .archivos, .llega .partes summary { animation: llegada 1.8s ease-out; }
@keyframes llegada { from, 30% { box-shadow: 0 0 0 4px var(--azul-medio); } to { box-shadow: 0 0 0 4px rgb(47 127 196 / 0); } }
.partes { max-width: 1040px; margin-top: 12px; font-family: var(--sans); }
.partes summary { padding: 14px 18px; color: var(--azul); background: var(--papel); border: 1px solid var(--borde); border-radius: 8px; font-size: 17px; font-weight: 600; cursor: pointer; }
.partes summary:hover { background: #f4f7fa; }
.partes[open] summary { border-radius: 8px 8px 0 0; }
.partes-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding: 14px 18px 12px; background: var(--papel); border: 1px solid var(--borde); border-top: 0; border-radius: 0 0 8px 8px; }
.partes h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 4px 0 6px; padding-inline: 6px; color: var(--azul); font-size: 16px; }
.partes h3 a { padding-block: 7px; color: var(--azul-claro); font-size: 14px; font-weight: 600; }
.partes ul { margin: 0; padding: 0; list-style: none; }
.partes li + li { border-top: 1px solid var(--borde); }
.parte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 9px 6px; color: var(--azul-claro); font-size: 15px; line-height: 1.3; text-decoration: none; }
.parte:hover { color: var(--azul); background: var(--mesa); }
.parte span { color: var(--gris); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pie { display: flex; justify-content: center; padding: 36px clamp(24px, 5vw, 72px); background: var(--papel); }

/* Lector: la página blanca sobre la noche, como único foco; todo lo demás acompaña. */
body.lector { --alto-barra: 56px; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; color: #e8eef5; background: var(--noche); font-family: var(--sans); font-size: 14px; }
.barra { position: relative; z-index: 6; display: flex; align-items: center; gap: 2px; height: var(--alto-barra); padding: 0 14px; color: #fff; background: var(--noche); border-bottom: 1px solid var(--linea); flex: none; }
.barra a, .barra button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: #dbe6f1; background: none; border: 0; border-radius: 6px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 140ms ease-out, color 140ms ease-out; }
.barra a:hover, .barra button:hover, .barra button[aria-expanded="true"] { color: #fff; background: var(--linea); }
.barra :focus-visible { outline-color: var(--celeste); }
.barra svg, .panel-cabeza svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.barra .icono, .panel-cabeza .icono { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; }
.lugar { flex: 1; min-width: 0; padding: 0 20px; overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.lugar b { color: #fff; font-family: var(--serif); font-size: 18px; font-weight: 700; }
.lugar span { margin-left: 12px; color: #a9bdd1; font-variant-numeric: tabular-nums; }
.avance { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.avance i { display: block; width: 0; height: 100%; background: var(--celeste); }
.zoom { display: flex; align-items: center; margin: 0 6px; }
.nivel { width: 62px; padding: 6px 2px; color: #dbe6f1; background: none; border: 1px solid transparent; border-radius: 6px; font: inherit; font-variant-numeric: tabular-nums; text-align: center; }
.nivel:hover { background: var(--linea); }
.nivel:focus { color: #fff; background: var(--linea); border-color: var(--celeste); outline: none; }
.barra button[aria-pressed="true"] { color: var(--celeste); }
.ir .icono { width: 32px; }
.barra button:disabled { opacity: 0.35; cursor: default; }
.barra button.pulsado { color: var(--noche); background: var(--celeste); }
.ir { display: flex; align-items: center; gap: 3px; margin: 0 6px; color: #a9bdd1; }
.ir label { margin-right: 4px; }
.ir input { width: 48px; padding: 6px 4px; color: #fff; background: var(--linea); border: 0; border-radius: 6px; font: inherit; font-variant-numeric: tabular-nums; text-align: center; }

.paneles { --izq: 50%; flex: 1; min-height: 0; display: flex; }
.panel { position: relative; min-width: 0; flex: 1; display: flex; flex-direction: column; }
.paneles.doble #izq { flex: 0 0 var(--izq); }
.hoja { --ancho: 700px; flex: 1; min-height: 0; overflow: auto; padding: 22px 12px; outline: none; scrollbar-color: rgb(255 255 255 / 0.28) transparent; }
#izq { flex-direction: row; container-type: inline-size; }
#izq .hoja { padding-inline: 24px; }
.paneles.doble #izq .hoja { padding-inline: 16px; }
.hoja:not(.ampliada) { scrollbar-width: none; }
.pagina { position: relative; width: var(--ancho); margin: 0 auto 22px; background: var(--papel); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 48px rgb(0 0 0 / 0.34); }
.previa, .nitida { position: absolute; inset: 0; width: 100%; height: 100%; }
.pagina:not(.lista, .con-previa)::before { content: ""; position: absolute; inset: 9% 13%; background: repeating-linear-gradient(var(--mesa) 0 11px, transparent 11px 30px); animation: latido 1.4s ease-in-out infinite alternate; }
@keyframes latido { from { opacity: 0.45; } to { opacity: 1; } }
.pagina canvas { display: block; width: 100%; height: 100%; }
.enlaces { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.enlaces a { position: absolute; pointer-events: auto; }
.enlaces a:hover { background: rgb(47 127 196 / 0.16); }
.enlaces a.ejemplo { background: rgb(47 127 196 / 0.22); outline: 2px solid var(--azul-medio); outline-offset: 1px; }
.marca { position: absolute; z-index: 3; left: 0; right: 0; height: 26px; margin-top: -4px; background: rgb(47 127 196 / 0.24); pointer-events: none; animation: desvanecer 1.6s ease-out forwards; }
@keyframes desvanecer { to { opacity: 0; } }

/* Avance: tiene su propia columna, así la hoja nunca pasa por debajo, con el zoom que sea. */
.riel { flex: none; width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 7px; color: #c5d3e1; border-left: 1px solid var(--linea); font-size: 13px; line-height: 1.25; text-align: center; }
.riel strong { color: #fff; font-family: var(--serif); font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.riel-bloques { width: 34px; height: min(calc(var(--n, 6) * 22px), calc(100dvh - 420px)); margin: 8px 0; display: flex; flex-direction: column; gap: 3px; }
.riel-bloques button { flex: 1 1 0; min-height: 2px; padding: 0; background: rgb(255 255 255 / 0.13); border: 0; border-radius: 2px; cursor: pointer; transition: background 240ms ease-out; }
.riel-bloques button:hover { background: rgb(255 255 255 / 0.4); }
.riel-bloques .hecho { background: var(--celeste); }
.riel-bloques .aca { background: #fff; }
#riel-falta { white-space: pre-line; }
.riel-marcar { width: 100%; padding: 6px 2px; color: #fff; background: none; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.riel-marcar:hover { background: var(--linea); }
.riel-marcar[aria-pressed="true"] { color: var(--noche); background: var(--celeste); border-color: var(--celeste); }
.riel-parte { min-height: 1.25em; margin-top: 8px; font-size: 12px; white-space: nowrap; }
.riel-capitulos { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; }
.riel-capitulos button { height: 26px; padding: 0; color: #dbe6f1; background: linear-gradient(var(--celeste), var(--celeste)) 0 100% / var(--lleno, 0%) 3px no-repeat, rgb(255 255 255 / 0.1); border: 0; border-radius: 4px; font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.riel-capitulos button:hover { background-color: rgb(255 255 255 / 0.28); }
.riel-capitulos .hecho { color: var(--noche); background: var(--celeste); }
.riel-capitulos .aca { color: var(--noche); background: #fff; }
@container (max-width: 620px) {
  .riel { width: 38px; padding-inline: 4px; }
  .riel strong, #riel-falta, .riel-marcar, .riel-parte, .riel-capitulos { display: none; }
  .riel-bloques { width: 16px; height: min(calc(var(--n, 6) * 22px), calc(100dvh - 120px)); }
}
@media (max-height: 560px) { .riel-bloques { display: none; } }

.barra .volver { flex: none; padding: 7px 12px; color: #fff; background: var(--noche-2); border: 1px solid var(--linea); border-radius: 6px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.barra .volver:hover { background: #204674; }
.panel-cabeza { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; color: #fff; background: var(--noche); border-bottom: 1px solid var(--linea); flex: none; }
.panel-cabeza button { padding: 5px 12px; color: #dbe6f1; background: none; border: 1px solid var(--linea); border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
.panel-cabeza button:hover { color: #fff; background: var(--linea); }
.panel-cabeza .icono { border: 0; }
.titulo-panel { flex: 1; min-width: 0; overflow: hidden; color: #fff; font-family: var(--serif); font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.divisor { flex: 0 0 6px; background: var(--noche-2); cursor: col-resize; touch-action: none; }
.divisor:hover { background: var(--celeste); }

.velo { position: fixed; z-index: 9; inset: var(--alto-barra) 0 0; background: rgb(4 12 26 / 0.55); }
.cajon { position: fixed; z-index: 10; top: var(--alto-barra); bottom: 0; left: 0; display: flex; flex-direction: column; width: min(340px, 100vw); padding: 12px 10px 0; color: #dbe6f1; background: #0a1e38; border-right: 1px solid var(--linea); box-shadow: 10px 0 40px rgb(0 0 0 / 0.35); }
.indice-fijo .cajon { width: 300px; box-shadow: none; }
.indice-fijo .paneles { margin-left: 300px; }
.cajon-cabeza { flex: none; display: flex; align-items: center; gap: 6px; padding-bottom: 10px; }
.cajon input { flex: 1; min-width: 0; padding: 8px 12px; color: #fff; background: var(--linea); border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 15px; }
.cajon input::placeholder { color: #a9bdd1; }
.cajon input:focus { border-color: var(--celeste); outline: none; }
#navegar, .resultados { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 20px; scrollbar-color: rgb(255 255 255 / 0.24) transparent; scrollbar-width: thin; }
.cajon ul { list-style: none; margin: 0; padding: 0; }
.cajon button { display: block; flex: 1; min-width: 0; width: 100%; padding: 5px 8px; color: inherit; background: none; border: 0; border-radius: 6px; font: inherit; text-align: left; cursor: pointer; }
.cajon button:hover { color: #fff; background: var(--linea); }
.cajon :focus-visible { outline-color: var(--celeste); }
#b-plegar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #a9bdd1; }
#b-plegar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#arbol > ul > li, #arbol-anexos > ul > li { margin-bottom: 1px; }
#arbol > ul > li > .fila, #arbol-anexos > ul > li > .fila { background: linear-gradient(var(--celeste), var(--celeste)) 8px 100% / calc((100% - 16px) * var(--lleno, 0) / 100%) 2px no-repeat; }
#arbol > ul > li > .fila > button:first-child, #arbol-anexos > ul > li > .fila > button:first-child { padding-block: 7px; color: #eef4fa; font-family: var(--serif); font-size: 16px; line-height: 1.25; }
#arbol > ul > li.actual > .fila > button:first-child { color: #fff; background: var(--noche-2); font-weight: 700; }
.numero { display: inline-block; width: 24px; color: var(--celeste); font-weight: 700; font-variant-numeric: tabular-nums; }
.cajon small { display: none; }
#arbol ul ul { display: none; padding: 3px 0 7px 32px; font-size: 14px; line-height: 1.3; }
#arbol li.actual > ul { display: block; }
#arbol ul ul ul, #arbol-anexos ul ul { display: none !important; }
.cajon ul ul button { padding: 4px 8px; color: #b8c9da; }
.cajon .grupo { margin: 16px 8px 6px; padding-top: 12px; color: #a9bdd1; border-top: 1px solid var(--linea); font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1.3; }
.sugerencia { position: absolute; z-index: 5; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 132px); padding: 8px 8px 8px 16px; color: #fff; background: var(--noche-2); border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.4); font-size: 15px; animation: asomar 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.sugerencia[hidden] { display: none; }
.sugerencia button { flex: none; padding: 7px 12px; color: var(--noche); background: var(--celeste); border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
.sugerencia .cruz { padding: 4px 9px; color: #c5d3e1; background: none; font-size: 19px; line-height: 1; }
.ajustes { position: fixed; z-index: 11; top: calc(var(--alto-barra) + 8px); right: 12px; display: grid; gap: 10px; width: min(320px, calc(100vw - 24px)); padding: 16px 18px; color: var(--tinta); background: var(--papel, #fff); border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.4); font-size: 15px; }
.ajustes[hidden] { display: none; }
.ajustes fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.ajustes legend { margin-bottom: 6px; font-weight: 700; }
.ajustes label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.ajustes input { width: 18px; height: 18px; accent-color: var(--azul); }
.nota-ajuste { margin: -6px 0 0 27px; color: var(--gris); font-size: 13px; }
.ajustes button { justify-self: start; padding: 7px 12px; color: var(--azul); background: none; border: 1px solid var(--borde); border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
@media (hover: none) { .con-mouse { display: none !important; } }
@media (max-width: 999px) { .solo-ancho { display: none !important; } }
.sin-riel .riel { display: none; }
.barra .icono { flex: none; }
.lugar { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 1300px) { .lugar span { display: none; } }
@media (max-width: 600px) { .ir label { display: none; } .barra .volver { padding-inline: 9px; font-size: 13px; white-space: nowrap; } }
.siguiente:not([hidden]) ~ .ayuda { bottom: calc(96px + env(safe-area-inset-bottom)); }
.ajustes { max-height: calc(100vh - var(--alto-barra) - 16px); max-height: calc(100dvh - var(--alto-barra) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.ajustes label { min-height: 40px; }
.mas-opciones summary { padding-block: 9px; }
.boton-principal[hidden] { display: none; }
.mas-opciones { display: grid; gap: 8px; color: var(--gris); }
.mas-opciones summary { cursor: pointer; }
.mas-opciones[open] summary { margin-bottom: 8px; }
.mas-opciones button { display: block; margin-top: 8px; }
.sugerencia { flex-wrap: wrap; padding-block: 8px; }
.sugerencia .no-mas { padding: 7px 8px; color: #c5d3e1; background: none; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sugerencia .cruz { min-width: 40px; min-height: 40px; padding: 0; }
.siguiente { position: fixed; z-index: 7; left: 50%; bottom: 22px; display: flex; align-items: stretch; width: max-content; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; color: var(--noche); background: var(--celeste); border: 0; border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.4); transform: translateX(-50%); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.siguiente[hidden] { display: none; }
.siguiente:hover { background: var(--celeste); }
.siguiente button { padding: 13px 20px; color: inherit; background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.siguiente button:hover { background: #b9dcff; }
.siguiente .cruz { min-width: 46px; padding: 0; border-left: 1px solid rgb(12 35 64 / 0.25); font-size: 20px; }
#siguiente-marcar { white-space: nowrap; border-right: 1px solid rgb(12 35 64 / 0.25); }
.indice-fijo .siguiente, .indice-fijo .ayuda { left: calc(50% + 100px); max-width: calc(100vw - 424px); }
@media (max-width: 999px) {
  .sugerencia { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: none; }
  .sugerencia span { flex: 1 0 calc(100% - 52px); }
  .sugerencia .cruz { order: -1; margin-left: auto; }
  .sugerencia span { order: -2; }
  .siguiente { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; transform: none; }
  .siguiente { flex-wrap: wrap; }
  .siguiente #siguiente { flex: 1; }
  #siguiente-marcar { flex: 1 1 calc(100% - 46px); order: 1; border-right: 0; }
  .siguiente .cruz { order: 2; }
  #siguiente { order: 3; flex-basis: 100%; border-top: 1px solid rgb(12 35 64 / 0.25); }
  .acciones > a { width: 100%; text-align: center; }
  .retomar { text-align: left; }
}
.fila { display: flex; align-items: stretch; }
.cajon .al-lado { flex: none; width: 32px; padding: 0; color: var(--gris); opacity: 0; }
.fila:hover .al-lado, .al-lado:focus-visible { opacity: 1; }
.cajon .fila .al-lado { color: #a9bdd1; }
.cajon .tilde { flex: none; display: grid; place-items: center; width: 34px; padding: 0; }
.tilde svg { width: 20px; height: 20px; padding: 2px; fill: none; stroke: transparent; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; border: 1.5px solid rgb(255 255 255 / 0.32); border-radius: 50%; }
.tilde:hover svg { stroke: #dbe6f1; border-color: #fff; }
.tilde[aria-pressed="true"] svg { stroke: var(--noche); background: var(--celeste); border-color: var(--celeste); }
.al-lado svg { display: block; width: 16px; height: 16px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.4; }
.resultados p { margin: 2px 8px 8px; color: #a9bdd1; }
.cajon .resultados button { padding: 9px 8px; border-top: 1px solid var(--linea); border-radius: 0; line-height: 1.4; }
.resultados b { display: block; color: #fff; font-weight: 600; }
.resultados span { color: #b8c9da; }
.resultados .corregida { color: var(--celeste); font-weight: 600; }
mark { color: #fff; background: rgb(142 197 255 / 0.35); }
.textLayer .hallado { color: transparent; background: rgb(47 127 196 / 0.35); }

.estado, .aviso, .ayuda { position: fixed; color: #fff; background: var(--noche-2); border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.4); font-size: 14px; }
.estado { z-index: 30; left: 16px; bottom: 16px; padding: 9px 14px; }
.aviso { z-index: 8; left: 50%; top: calc(var(--alto-barra) + 16px); max-width: calc(100vw - 24px); padding: 10px 18px; transform: translateX(-50%); animation: asomar 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.ayuda { z-index: 8; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 24px); padding: 10px 12px 10px 18px; transform: translateX(-50%); font-size: 15px; }
.ayuda { overflow: hidden; }
.ayuda.yendose::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--celeste); transform-origin: left; animation: yendose 12s linear forwards; }
@keyframes yendose { to { transform: scaleX(0); } }
.ayuda button { flex: none; padding: 7px 14px; color: var(--noche); background: var(--celeste); border: 0; border-radius: 6px; font: inherit; font-weight: 700; cursor: pointer; }

.vista { position: fixed; z-index: 20; display: flex; flex-direction: column; width: 760px; max-width: calc(100vw - 16px); max-height: min(76vh, 700px); background: var(--papel); border-radius: 8px; overflow: hidden; box-shadow: 0 18px 50px rgb(0 0 0 / 0.5); animation: asomar 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.vista.angosta { width: 600px; }
.vista-cabeza { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 7px 6px 14px; color: #fff; background: var(--noche); font-family: var(--sans); font-size: 13px; }
.vista-cabeza span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-cabeza button { flex: none; padding: 5px 10px; color: var(--noche); background: var(--celeste); border: 0; border-radius: 5px; font: inherit; font-weight: 700; cursor: pointer; }
.vista-cabeza button:first-of-type { color: #fff; background: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
.vista-cuerpo { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.vista-tira { display: flex; flex-direction: column; gap: 6px; background: var(--mesa); }
.vista-tira img { display: block; width: 100%; aspect-ratio: var(--proporcion); background: var(--papel); }
.cita { margin: 0; padding: 16px 20px 18px; color: var(--tinta); font-family: var(--serif); font-size: 19px; line-height: 1.5; }
@keyframes asomar { from { opacity: 0; transform: translate(var(--tx, 0), 4px); } }
.aviso { --tx: -50%; }
.amplia { position: fixed; z-index: 15; inset: 0; display: flex; padding: 3vh 3vw; background: rgb(4 12 26 / 0.7); }
.amplia .panel { background: var(--noche); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgb(0 0 0 / 0.5); }

.recorrido-mouse { position: fixed; z-index: 43; width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.5)); pointer-events: none; transition: left 1100ms ease-in-out, top 1100ms ease-in-out, scale 150ms ease-out; }
.recorrido-mouse.clic { scale: 0.8; }
.recorrido-mouse.clic::after { content: ""; position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border: 2px solid var(--azul-medio); border-radius: 50%; }
.recorrido-mouse svg { display: block; width: 100%; height: 100%; fill: #fff; stroke: #0c2340; stroke-width: 1.4; stroke-linejoin: round; }
.recorrido-velo { position: fixed; z-index: 40; inset: 0; }
.recorrido-foco { position: fixed; z-index: 41; border-radius: 8px; box-shadow: 0 0 0 2px var(--celeste), 0 0 0 100vmax rgb(4 12 26 / 0.66); pointer-events: none; transition: left 260ms cubic-bezier(0.16, 1, 0.3, 1), top 260ms cubic-bezier(0.16, 1, 0.3, 1), width 260ms cubic-bezier(0.16, 1, 0.3, 1), height 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.recorrido { position: fixed; z-index: 42; width: 340px; padding: 16px 18px 14px; color: var(--tinta); background: var(--papel); border-radius: 8px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); font-size: 15px; line-height: 1.4; }
.recorrido { transition: left 450ms cubic-bezier(0.22, 1, 0.36, 1), top 450ms cubic-bezier(0.22, 1, 0.36, 1); }
.recorrido small { display: block; color: var(--gris); font-size: 13px; }
.recorrido strong { display: block; margin-top: 2px; color: var(--azul); font-family: var(--serif); font-size: 20px; line-height: 1.25; }
.recorrido p { margin: 6px 0 14px; }
.recorrido div { display: flex; align-items: center; gap: 6px; }
.recorrido button { padding: 8px 12px; color: var(--azul); background: none; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
.recorrido button:hover { background: var(--mesa); }
.recorrido .saltar { margin-right: auto; padding-left: 0; color: var(--gris); font-weight: 500; }
.recorrido .dale { margin-left: auto; padding-inline: 18px; color: #fff; background: var(--azul); }
.recorrido .dale:hover { background: var(--azul-claro); }
.recorrido .saltar + .atras { margin-left: 0; }
.barrita { display: block; width: 140px; height: 3px; margin: 14px auto 0; background: linear-gradient(90deg, var(--linea) 35%, var(--celeste) 35% 65%, var(--linea) 65%) 0 0 / 300% 100%; animation: cargando 1.2s linear infinite; }
@keyframes cargando { to { background-position: 150% 0; } }
.carga { position: fixed; inset: var(--alto-barra) 0 0; display: grid; place-items: center; padding: 24px; color: #fff; background: var(--noche); font-size: 17px; text-align: center; }
.carga a { color: var(--celeste); }
.carga p { max-width: 46ch; margin: 0; }
.carga-pie { margin-top: 14px; font-size: 14px; }

/* Capa de texto de PDF.js, para poder seleccionar y copiar. */
.textLayer { position: absolute; inset: 0; z-index: 1; overflow: clip; opacity: 1; line-height: 1; text-align: initial; letter-spacing: normal; word-spacing: normal; transform-origin: 0 0; --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer ::selection { background: rgb(0 61 122 / 0.25); }

.barra .avance { display: none; }
@media (max-width: 900px) {
  #izq .hoja, .paneles.doble #izq .hoja { padding-inline: 8px; }
  .hoja { padding-block: 10px; }
  .barra button span { display: none; }
  .tapa-texto { flex-direction: column; align-items: stretch; }
  .barra .avance { display: block; }
  .riel { display: none; }
  .tapa-nav .logos img { height: 34px; }
  .tapa-enlaces { display: none; }
  .resumen, .ayudas, .capitulos { grid-template-columns: 1fr; }
  .lamina { display: none; }
  .capitulo { grid-template-columns: 72px 26px 1fr auto; align-items: center; }
  .mini { display: block; width: 72px; height: 48px; object-fit: cover; }
  .anexos { margin-left: 0; }
  .leer-aca { flex-direction: column; align-items: stretch; text-align: left; }
  .leer-aca b { text-align: center; }
  .partes-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-inline: 14px; }
  .archivos li { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 14px; }
  .archivos .peso { grid-column: 2; grid-row: 2; }
  .boton-archivo { grid-column: 3; grid-row: 1 / span 2; }
  .zoom, .lugar, #b-copiar, #b-pdf, .cajon .al-lado { display: none; }
  .ir { margin-left: auto; }
  /* En celular, el anexo se abre encima del texto. */
  .paneles.doble #izq { flex: 1; }
  #der:not([hidden]) { position: fixed; z-index: 5; inset: var(--alto-barra) 0 0; background: var(--noche); }
  .divisor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marca { animation-duration: 0.01s; }
  .vista, .llega .archivos, .llega .partes summary { animation: none; }
  .recorrido-foco, .recorrido { transition: none; }
  .barrita, .pagina::before { animation: none; }
  .riel-bloques button { transition: none; }
  .lamina img { transition: none; }
}
.tapa-foto, .lamina, .ayudas img, .mini { background: var(--mesa); }