/* ============================================================
   Revisión Transporte — hoja de estilo única.

   Sin dependencias externas: ninguna fuente, icono ni recurso se
   pide fuera de este dominio, y no hay una sola línea de
   JavaScript. Es deliberado (docs/12-web.md §3 y §5).

   Dirección: panel de instrumento. La página habla en oscuro
   cuando mide y en claro cuando explica.
   ============================================================ */

/* ---------- 1. Fichas ---------- */

:root {
  /* Oscuro: petróleo profundo, ni negro ni azul corporativo */
  --noche:    #0b1f2a;
  --noche-2:  #11303f;
  --noche-3:  #163b4d;
  --linea-o:  #23404f;
  --claro-1:  #e9eeec;
  --claro-2:  #93a8b2;

  /* Claro: acero galvanizado, no crema */
  --acero:    #e7eae7;
  --papel:    #f6f8f5;
  --tinta:    #101a1f;
  --tinta-2:  #4e5c63;
  /* No bajar de aquí: con #7c8b92 los rótulos daban 2,9:1 sobre --acero
     y no llegaban al 4,5:1 de WCAG AA. Este da 4,75:1 y 5,4:1. */
  --tinta-3:  #5a686f;
  --linea-c:  #cbd2cd;

  /* Un solo acento, reservado al dato */
  --ambar:    #f2a93b;

  /* DIN: la letra de la señalización viaria y del dibujo técnico.
     Bahnschrift viene con Windows; DIN Alternate, con macOS. */
  --din: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --texto: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --dato: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  --ancho: 70rem;
  --medida: 40rem;
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--acero);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

p, ul, ol, figure, blockquote, table { margin: 0 0 1.15em; }
li { margin-bottom: 0.45em; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 650; }

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--ambar);
  color: var(--noche);
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  z-index: 20;
}
.saltar:focus { left: 0.75rem; top: 0.75rem; }

.limite {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- 3. Tipografía de mando ---------- */

.rotulo {
  font-family: var(--din);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0 0 1.2rem;
}

h1 {
  font-family: var(--din);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.1rem + 4.4vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  max-width: 17ch;
  text-wrap: balance;
}

h2 {
  font-family: var(--din);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 1.2rem;
  max-width: 18ch;
  text-wrap: balance;
}

h3 {
  font-family: var(--din);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 0.35rem;
}

.entradilla {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  max-width: 44ch;
  text-wrap: pretty;
}

p { text-wrap: pretty; }

.dato { font-family: var(--dato); font-variant-numeric: tabular-nums; }

/* ---------- 4. Bandas ---------- */

.oscuro {
  background: var(--noche);
  color: var(--claro-1);
}

.oscuro .rotulo { color: var(--ambar); }
.oscuro a { color: var(--claro-1); }

.claro { background: var(--acero); color: var(--tinta); }
.claro .rotulo { color: var(--tinta-3); }

/* ---------- 5. Cabecera ---------- */

.tope { border-bottom: 1px solid var(--linea-o); }

.tope .limite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--din);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.marca svg { width: 1.55rem; height: 1.55rem; display: block; flex: none; }

.tope nav {
  font-family: var(--din);
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tope nav a { margin-left: 1.6rem; text-decoration: none; color: var(--claro-2); }
.tope nav a:hover { color: var(--claro-1); }

@media (max-width: 44rem) {
  .tope nav a:not(.solo-movil) { display: none; }
  .tope nav a { margin-left: 0; }
}

/* ---------- 6. Portada ---------- */

.portada { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }

.portada .entradilla { color: var(--claro-2); margin-bottom: 2.25rem; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
}

.boton {
  display: inline-block;
  font-family: var(--din);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: 2px;
  background: var(--ambar);
  color: var(--noche);
  border: 1px solid var(--ambar);
}

.boton:hover { background: transparent; color: var(--ambar); }

.oscuro .boton { color: var(--noche); }
.oscuro .boton:hover { color: var(--ambar); }

.apunte { margin: 0; font-size: 0.95rem; color: var(--claro-2); }

/* ---------- 7. Las figuras ---------- */

.figura { margin: 0; }

.figura svg { width: 100%; height: auto; display: block; overflow: visible; }

/* El gráfico de detalle no necesita todo el ancho de la columna */
.figura-mini svg { max-width: 32rem; }

.pieforma {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea-o);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--claro-2);
  max-width: 68ch;
}

.pieforma strong { color: var(--claro-1); font-weight: 600; }

/* Piezas del gráfico */

.rejilla { stroke: var(--linea-o); stroke-width: 1; }
.eje { stroke: var(--linea-o); stroke-width: 1.5; }
.corte { stroke: var(--linea-o); stroke-width: 1; stroke-dasharray: 2 5; }
.banda-par { fill: #ffffff; opacity: 0.035; }
.franja { fill: var(--noche-2); }

.serie {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: trazar 2.1s cubic-bezier(0.22, 0.7, 0.28, 1) 0.25s forwards;
}

@keyframes trazar { to { stroke-dashoffset: 0; } }

/* El gráfico de detalle tiene un trazo mucho más corto: su propia longitud */
.serie-mini {
  stroke-width: 2.5;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: trazar 1.1s cubic-bezier(0.22, 0.7, 0.28, 1) 0.15s forwards;
}

.hito { fill: var(--ambar); }

.marca-punto { fill: var(--ambar); r: 0; transition: r 0.12s ease-out; }
.punto:hover .marca-punto,
.punto:focus-visible .marca-punto { r: 5; }
.cazador { fill: transparent; }

.et-eje {
  font-family: var(--dato);
  font-size: 12px;
  fill: var(--claro-2);
  font-variant-numeric: tabular-nums;
}

.et-franja {
  font-family: var(--din);
  font-size: 12px;
  letter-spacing: 0.09em;
  fill: var(--claro-2);
  text-transform: uppercase;
}

.anotacion {
  font-family: var(--dato);
  font-size: 12.5px;
  fill: var(--claro-1);
  font-variant-numeric: tabular-nums;
}

.anotacion.tenue { fill: var(--claro-2); }

/* Al estrecharse, el viewBox se escala y el texto interno encoge con él.
   Se compensa subiendo el tamaño en unidades de usuario, no en px de pantalla. */
@media (max-width: 52rem) {
  /* Solo se retiran las del gráfico grande: en el pequeño son el contenido */
  .figura:not(.figura-mini) .anotacion { display: none; }
  .et-eje { font-size: 17px; }
  .et-franja { font-size: 16px; }
}

@media (max-width: 34rem) {
  .et-eje { font-size: 27px; }
  .et-franja { font-size: 24px; }
  .figura-mini .et-eje, .figura-mini .et-franja, .figura-mini .anotacion { font-size: 15px; }
}

/* Tabla desplegable de datos */

.datos-crudos {
  margin-top: 1.25rem;
  border-top: 1px solid var(--linea-o);
  padding-top: 1rem;
}

.datos-crudos summary {
  font-family: var(--din);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--claro-2);
  cursor: pointer;
}

.datos-crudos summary:hover { color: var(--ambar); }

.datos-crudos[open] summary { margin-bottom: 1rem; }

.rejilla-datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.35rem 1.5rem;
  font-family: var(--dato);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--claro-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.rejilla-datos li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--linea-o);
  padding-bottom: 0.25rem;
  margin: 0;
}

.rejilla-datos b { color: var(--claro-1); font-weight: 500; }

/* ---------- 8. Secciones de lectura ---------- */

.tramo { padding: clamp(3.5rem, 7.5vw, 6.5rem) 0 clamp(3.5rem, 7.5vw, 6rem); }

/* Cada apartado se abre con una regla ámbar a todo el ancho del contenido.
   Es la señal de "empieza otra cosa", y va acompañada del fondo alterno. */
.tramo > .limite {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 4rem;
  padding-top: 2.4rem;
}

.tramo > .limite::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.25rem, 4vw, 3rem);
  right: clamp(1.25rem, 4vw, 3rem);
  height: 3px;
  background: var(--ambar);
}

/* Dentro de un apartado el rótulo ya no lleva su propia regla: la lleva la sección */
.tramo .rotulo { border-top: 0; padding-top: 0; display: block; }

/* Fondo alterno entre apartados claros consecutivos */
.alt { background: var(--papel); }
.alt .encargo { background: var(--acero); }

@media (min-width: 60rem) {
  .tramo > .limite { grid-template-columns: 13rem minmax(0, var(--medida)); }
  .tramo .rotulo { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .tramo .cuerpo { grid-column: 2; }
}

.cuerpo > :last-child { margin-bottom: 0; }

.claro .rotulo { border-top: 2px solid var(--ambar); padding-top: 0.7rem; display: inline-block; }
.oscuro .rotulo { border-top: 2px solid var(--ambar); padding-top: 0.7rem; display: inline-block; }

/* Puntos de la norma */

.puntos { list-style: none; padding: 0; margin: 2rem 0; }

.puntos li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--linea-c);
  margin: 0;
}

.puntos li:last-child { border-bottom: 1px solid var(--linea-c); }

.puntos p { margin: 0; color: var(--tinta-2); }

.oscuro .puntos li { border-color: var(--linea-o); }
.oscuro .puntos p { color: var(--claro-2); }

/* Cita legal */

.cita {
  margin: 2rem 0;
  padding: 1.5rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--ambar);
  font-size: 1.08rem;
  line-height: 1.5;
}

.cita p { margin-bottom: 0.75rem; }

.cita cite {
  font-family: var(--din);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.oscuro .cita cite { color: var(--claro-2); }

/* El encargo */

.encargo {
  background: var(--papel);
  border: 1px solid var(--linea-c);
  border-left: 3px solid var(--ambar);
  border-radius: 2px;
  padding: 1.6rem 1.75rem;
  margin: 0 0 1.75rem;
}

.encargo > :last-child { margin-bottom: 0; }

.encargo .grande {
  font-family: var(--din);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.lista { list-style: none; padding: 0; margin: 0 0 1.15em; }

.lista li { position: relative; padding-left: 1.5rem; }

.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.7rem;
  height: 2px;
  background: var(--ambar);
}

.nota {
  border-top: 1px solid var(--linea-c);
  padding-top: 1.1rem;
  margin-top: 1.75rem;
  font-size: 0.93rem;
  color: var(--tinta-2);
}

.nota > :last-child { margin-bottom: 0; }

.oscuro .nota { border-color: var(--linea-o); color: var(--claro-2); }

/* Fuentes oficiales */

.fuentes { list-style: none; padding: 0; margin: 1.75rem 0 0; }

.fuentes li { margin: 0; border-top: 1px solid var(--linea-c); }

.fuentes li:last-child { border-bottom: 1px solid var(--linea-c); }

.fuentes a {
  display: block;
  padding: 1.05rem 0;
  text-decoration: none;
}

.fuentes a:hover .nombre { text-decoration: underline; text-decoration-thickness: 2px; }

.fuentes .nombre {
  font-family: var(--din);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.fuentes .nombre::after { content: " ↗"; color: var(--ambar); font-size: 0.85em; }

.fuentes .detalle {
  display: block;
  font-size: 0.9rem;
  color: var(--tinta-2);
  margin-top: 0.15rem;
  max-width: 52ch;
}

/* Personas */

.personas { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.75rem; }

@media (min-width: 40rem) { .personas { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }

.personas li { margin: 0; border-top: 2px solid var(--tinta); padding-top: 0.9rem; }

.personas .nombre {
  font-family: var(--din);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.3rem;
}

.personas .papel {
  font-family: var(--din);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 0.6rem;
}

.personas p:last-child { margin: 0; font-size: 0.97rem; color: var(--tinta-2); }

/* ---------- 9. Cierre ---------- */

.cierre { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 3.5rem); }

.cierre h2 { max-width: 15ch; }

.contacto {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) { .contacto { grid-template-columns: 1fr 1fr; max-width: 42rem; } }

.contacto li { margin: 0; border-top: 1px solid var(--linea-o); padding-top: 0.85rem; }

.contacto .etiqueta {
  display: block;
  font-family: var(--din);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--claro-2);
  margin-bottom: 0.3rem;
}

.contacto .valor { font-size: 1.15rem; font-family: var(--dato); }

.descargo {
  margin-top: clamp(2.75rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea-o);
  max-width: 62ch;
}

.descargo .titulo {
  font-family: var(--din);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 0.6rem;
}

.descargo p { font-size: 0.93rem; color: var(--claro-2); margin: 0; }

/* ---------- 10. Pie ---------- */

.pie {
  border-top: 1px solid var(--linea-o);
  padding: 2rem 0 3rem;
  font-size: 0.88rem;
  color: var(--claro-2);
}

.pie p { margin-bottom: 0.55em; max-width: 78ch; }

.pie .enlaces { margin-top: 1.25rem; font-family: var(--din); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; }

.pie .enlaces a { margin-right: 1.5rem; display: inline-block; }

/* ---------- 11. Marcas de dato pendiente ---------- */

.pend {
  background: var(--ambar);
  color: var(--noche);
  font-family: var(--dato);
  font-size: 0.82em;
  font-weight: 600;
  padding: 0.05em 0.35em;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---------- 12. Páginas legales ---------- */

.legal { padding: clamp(2.75rem, 6vw, 4.5rem) 0 1rem; }

.legal .limite > * { max-width: var(--medida); }

.legal h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); max-width: 20ch; margin-bottom: 0.5rem; }

.legal .fecha {
  font-family: var(--dato);
  font-size: 0.82rem;
  color: var(--tinta-3);
  margin-bottom: 2.5rem;
}

.legal h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  max-width: 26ch;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--ambar);
}

.legal h3 {
  margin-top: 1.9rem;
  color: var(--tinta-2);
}

.legal p, .legal ul { max-width: var(--medida); }

.ficha { margin: 1.4rem 0 1.75rem; border-top: 1px solid var(--linea-c); max-width: var(--medida); }

.ficha > div {
  display: grid;
  gap: 0 1.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--linea-c);
}

@media (min-width: 34rem) { .ficha > div { grid-template-columns: 11rem minmax(0, 1fr); } }

.ficha dt {
  font-family: var(--din);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding-top: 0.35em;
}

.ficha dd { margin: 0; }

.tabla-envoltorio { overflow-x: auto; margin: 1.5rem 0; max-width: var(--medida); }

table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }

thead th {
  font-family: var(--din);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid var(--tinta);
  padding: 0 1.25rem 0.5rem 0;
}

tbody td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1.25rem 0.7rem 0;
  border-bottom: 1px solid var(--linea-c);
}

tbody td:last-child, thead th:last-child { padding-right: 0; }

/* ---------- 13. Movimiento y accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .serie, .serie-mini { animation: none; stroke-dashoffset: 0; }
  .marca-punto { transition: none; }
}

/* ---------- 14. Impresión ---------- */

@media print {
  :root {
    --noche: #ffffff; --noche-2: #f0f0f0; --acero: #ffffff; --papel: #ffffff;
    --claro-1: #000000; --claro-2: #444444; --tinta: #000000; --tinta-2: #333333;
    --linea-o: #bbbbbb; --linea-c: #bbbbbb; --ambar: #9a6a10;
  }
  body { font-size: 10.5pt; }
  .tope nav, .boton, .saltar { display: none; }
  .tramo, .portada, .cierre { padding: 1.25rem 0; break-inside: avoid; }
  .serie { animation: none; stroke-dashoffset: 0; stroke: #000; }
  .datos-crudos[open] .rejilla-datos { color: #000; }
  a { text-decoration: none; }
  .fuentes a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}