/* ==========================================================================
   Componentes — gramática de panel
   ========================================================================== */

/* --- Regla del margen --------------------------------------------------- */
/* La página leída como un instrumento: escala graduada fija, tick mayor por
   sección y aguja roja siguiendo el scroll. Es orientación real, no adorno:
   dice dónde estás y cuánto queda. Solo en pantallas con margen suficiente. */

.rail { display: none; }

@media (min-width: 1400px) {
  .rail {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 46px;
    z-index: 40;
    pointer-events: none;
  }

  /* Graduación menor continua */
  .rail__scale {
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 7px;
    background-image: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 9px);
    opacity: 0;
    animation: rail-on 900ms var(--ease-needle) 260ms forwards;
  }

  /* Tick mayor: una sección */
  .rail__tick {
    position: absolute;
    left: 18px;
    width: 15px;
    height: 1px;
    background: var(--rule-strong);
  }
  .rail__tick.is-past { background: var(--ink); }

  /* Aguja */
  .rail__needle {
    position: absolute;
    left: 12px;
    width: 27px;
    height: 2px;
    background: var(--red);
    transition: transform 90ms linear;
    will-change: transform;
  }
  .rail__needle::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -3px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--red);
  }

  /* Lectura de la aguja */
  .rail__readout {
    position: absolute;
    left: 14px;
    font-family: var(--font-panel);
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--red-ink);
    transform: translateY(-50%);
    transition: transform 90ms linear;
    margin-top: 14px;
  }

  /* Sobre chasis, la escala se invierte */
  body.rail-on-dark .rail__scale { background-image: repeating-linear-gradient(to bottom, var(--rule-dark) 0 1px, transparent 1px 9px); }
  body.rail-on-dark .rail__tick { background: #55575F; }
  body.rail-on-dark .rail__tick.is-past { background: var(--face); }
}

@keyframes rail-on { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rail__scale { opacity: 1; animation: none; }
  .rail__needle, .rail__readout { transition: none; }
}

/* --- Cabecera ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--face);
  border-bottom: 1px solid var(--rule);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 84px;
}

.site-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-brand img { height: 50px; width: auto; }
@media (max-width: 480px) { .site-brand img { height: 38px; } }
.site-brand__text {
  font-family: var(--font-panel);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Navegación como leyenda de panel: cada entrada con su tick. */
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  position: relative;
  padding: var(--s3) var(--s4);
  font-family: var(--font-panel);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  transition: color 140ms linear;
}
.site-nav a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 6px;
  background: var(--rule);
  transition: background 140ms linear, height 140ms var(--ease-needle);
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--ink); }
.site-nav a:hover::before,
.site-nav .current-menu-item > a::before,
.site-nav .current_page_item > a::before {
  background: var(--red);
  height: 11px;
}

.site-nav .sub-menu { display: none; }

.header-cta { flex-shrink: 0; }

/* Menú móvil */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s2);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: var(--s2) var(--s3);
  font-family: var(--font-panel);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 16px; height: 9px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform 200ms var(--ease-needle);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--face);
    border-bottom: 1px solid var(--rule);
    padding: var(--s3) var(--gutter) var(--s5);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a { padding: var(--s3) 0; font-size: 1rem; letter-spacing: 0.04em; border-bottom: 1px solid var(--rule); }
  .site-nav a::before { left: 0; top: auto; bottom: -1px; width: 0; height: 1px; transition: width 180ms var(--ease-needle); }
  .site-nav a:hover::before,
  .site-nav .current-menu-item > a::before { width: 28px; height: 1px; }
}

/* --- Botones -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-panel);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms linear, color 140ms linear, border-color 140ms linear;
}

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--face); }

.btn--on-dark { background: transparent; color: var(--ink-on-dark); border-color: var(--ink-on-dark-muted); }
.btn--on-dark:hover { background: var(--face); color: var(--ink); border-color: var(--face); }

.btn__tick { width: 14px; height: 1px; background: currentColor; flex-shrink: 0; }

/* Enlace con aguja */
.link-needle {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-panel);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.link-needle::after {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--red);
  transition: width 180ms var(--ease-needle);
}
.link-needle:hover::after { width: 34px; }

/* --- Regla graduada ------------------------------------------------------- */
/* Las cuatro disciplinas como una escala continua, no como cuatro tarjetas. */

.scale {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: var(--s6);
}

/* La cara del instrumento no acaba donde acaba la columna: la graduación
   sangra de borde a borde de la pantalla. */
.scale::before,
.scale::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
}
.scale::before { height: 1px; background: var(--ink); }
.scale::after {
  height: 7px;
  background-image: repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 11px);
  clip-path: inset(0 100% 0 0);
  animation: scale-sweep 1200ms var(--ease-needle) 200ms forwards;
}

/* Encendido: la graduación se revela de izquierda a derecha una sola vez. */
@keyframes scale-sweep { to { clip-path: inset(0 0 0 0); } }

.scale__seg {
  position: relative;
  padding-right: var(--s6);
}

/* Tick mayor: marca dónde empieza cada disciplina. */
.scale__seg::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--s6) * -1);
  width: 2px;
  height: 22px;
  background: var(--ink);
}
.scale__seg--live::before { background: var(--red); height: 30px; }

.scale__name {
  font-family: var(--font-panel);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 var(--s3);
}
.scale__note {
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
  max-width: 26ch;
}

@media (max-width: 760px) {
  .scale { grid-template-columns: 1fr; padding-top: var(--s5); gap: var(--s5); }
  .scale::after { height: 5px; }
  .scale__seg { padding-right: 0; padding-left: var(--s4); }
  .scale__seg::before { top: 0; height: 100%; width: 1px; }
  .scale__seg--live::before { height: 100%; width: 2px; }
  .scale__note { max-width: var(--measure); }
}

@media (prefers-reduced-motion: reduce) {
  .scale::after { clip-path: none; animation: none; }
}

/* --- Libro de lecturas ---------------------------------------------------- */
/* Cifras reales con unidad, periodo y base. Nunca un porcentaje suelto. */

.ledger { border-top: 1px solid var(--ink); }

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
a.ledger__row:hover { background: var(--face-2); }

.ledger__value {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  line-height: 1;
  color: var(--ink);
}
.ledger__value--over { color: var(--red-ink); }

.ledger__unit {
  display: block;
  font-family: var(--font-panel);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--s2);
  text-wrap: balance;
}

.ledger__what { min-width: 0; }
.ledger__what strong { display: block; font-family: var(--font-panel); font-weight: 700; letter-spacing: -0.01em; font-size: 1.0625rem; }
.ledger__what span { display: block; font-size: var(--step-small); color: var(--ink-muted); line-height: 1.45; margin-top: var(--s1); }

.ledger__go { font-size: var(--step-label); color: var(--ink-muted); font-family: var(--font-panel); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; }
a.ledger__row:hover .ledger__go { color: var(--red-ink); }

@media (max-width: 640px) {
  .ledger__row { grid-template-columns: 1fr; gap: var(--s3); }
  .ledger__go { display: none; }
}

/* --- Fases del método ------------------------------------------------------ */
/* La numeración se permite: aquí el orden ES la información. */

.phases { border-top: 1px solid var(--ink); }

.phase {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--s6);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--rule);
}
.phase h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); }

/* El número es la graduación de la secuencia: va a escala de lectura,
   no de nota al pie. */
.phase__n {
  font-family: var(--font-panel);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--red-ink);
  padding-top: var(--s4);
  position: relative;
}
.phase__n::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 3px;
  background: var(--red);
}
.chassis .phase__n { color: var(--red); }

.phase__body h3 { margin-bottom: var(--s3); }
.phase__out {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--step-small);
  color: var(--ink-muted);
  max-width: var(--measure);
}
.phase__out b { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .phase { grid-template-columns: 1fr; gap: var(--s3); padding-block: var(--s5); }
  .phase__n { padding-top: var(--s3); }
}

/* --- Entradas (diagnósticos, casos, notas) ---------------------------------- */
/* Filas de un índice, no tarjetas. */

.entries { border-top: 1px solid var(--ink); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5) var(--s7);
  align-items: start;
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
/* La segunda columna solo existe si hay algo que poner en ella, y solo por
   encima del punto de ruptura: `:has()` gana en especificidad a cualquier
   media query posterior, así que la regla tiene que vivir dentro de una. */
@media (min-width: 861px) {
  .entry:has(.entry__aside) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
}
.entry:hover { background: var(--face-2); }

.entry__title {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-bottom: var(--s3);
}
.entry__title a { text-decoration: none; }
.entry__title a::after { content: ''; position: absolute; inset: 0; }

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s3);
}

.entry__excerpt { color: var(--ink-muted); margin: 0; }

.entry__aside { border-left: 1px solid var(--rule); padding-left: var(--s5); }
.entry__aside .readout { font-size: 1.75rem; line-height: 1; display: block; }

@media (max-width: 860px) {
  .entry { grid-template-columns: 1fr; }
  .entry__aside { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: var(--s3); }
}

/* --- Panel oscuro ------------------------------------------------------------ */

.chassis {
  background: var(--chassis);
  /* Superficie mecanizada: el chasis es material, no un relleno de color.
     Al 2,5 % de opacidad no se ve como trama, se nota como acabado. */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.025) 0 1px,
    transparent 1px 4px
  );
  color: var(--ink-on-dark);
}
.chassis h1, .chassis h2, .chassis h3 { color: var(--ink-on-dark); }
.chassis .muted, .chassis .entry__excerpt { color: var(--ink-on-dark-muted); }
.chassis .ledger, .chassis .phases, .chassis .entries { border-top-color: var(--face); }
.chassis .ledger__row, .chassis .phase, .chassis .entry { border-bottom-color: var(--rule-dark); }
.chassis .ledger__value { color: var(--ink-on-dark); }
.chassis .ledger__unit, .chassis .ledger__go { color: var(--ink-on-dark-muted); }
.chassis a.ledger__row:hover, .chassis .entry:hover { background: var(--chassis-2); }

/* --- Pie -------------------------------------------------------------------- */

.site-footer { background: var(--chassis); color: var(--ink-on-dark); }

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7);
  padding-block: var(--s8);
  border-bottom: 1px solid var(--rule-dark);
}

.footer-contact a { display: block; margin-bottom: var(--s2); text-decoration: none; }
.footer-contact a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red); }
.footer-contact .readout { font-size: 1.25rem; }

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: var(--s2); }
.footer-list a { font-size: var(--step-small); text-decoration: none; color: var(--ink-on-dark-muted); }
.footer-list a:hover { color: var(--ink-on-dark); text-decoration: underline; text-decoration-color: var(--red); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
  font-size: var(--step-small);
  color: var(--ink-on-dark-muted);
}

@media (max-width: 860px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .footer-brandblock { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-main { grid-template-columns: 1fr; }
}

/* --- Kit Digital (obligatorio) ------------------------------------------------ */

.kit-digital { background: #fff; border-top: 1px solid var(--rule); }
.kit-digital__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: var(--s5);
}
.kit-digital__logo { height: 46px; width: auto; }
/* La guía de justificación recomienda el emblema de la UE un 30 % más grande
   que el resto de logotipos. Aquí va un 35 %. */
.kit-digital__logo--ue { height: 62px; }

@media (max-width: 620px) {
  .kit-digital__logo { height: 34px; }
  .kit-digital__logo--ue { height: 46px; }
  .kit-digital__inner { gap: var(--s5); }
}

/* --- Formulario ---------------------------------------------------------------- */

.form-field { margin-bottom: var(--s5); }
.form-field label {
  display: block;
  font-family: var(--font-panel);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s2);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: var(--s3) var(--s4);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--font-read);
  font-size: var(--step-body);
  color: var(--ink);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--ink); outline: 2px solid var(--red); outline-offset: 1px; }
.form-field textarea { min-height: 8rem; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-muted); }
.form-field--error input, .form-field--error textarea { border-color: var(--red); }
.form-error { color: var(--red-ink); font-size: var(--step-small); margin-top: var(--s2); }
.form-note { font-size: var(--step-small); color: var(--ink-muted); }

/* --- Paginación ------------------------------------------------------------------ */

.pagination { display: flex; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s6); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding-inline: var(--s2);
  border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--font-panel); font-weight: 600; font-size: var(--step-small);
  font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink-muted);
}
.pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--face); }