/* ═══════════════════════════════════════════════════════════════════════════
   El Conferences Handbook, consultable.

   Se apoya en las fichas de color de Connect (`--paper`, `--surface`, `--ink`,
   `--accent`…), así que hereda el modo noche sin definir ninguna paleta nueva.
   Lo único propio son los catorce colores de los actores, que no son decisión
   nuestra: los trae el handbook y llegan por `--c` desde la plantilla.

   Dos cosas gobiernan todo lo de abajo:

   · El color de actor NUNCA va solo. Cada marca lleva su nombre escrito al
     lado, porque catorce colores no se distinguen entre sí ni con buena vista,
     y tres de ellos son verdes.
   · El texto del documento manda. Las dos columnas, el tablero y la rueda se
     apartan en cuanto la pantalla es estrecha; lo que no se aparta nunca es el
     handbook.
   ═══════════════════════════════════════════════════════════════════════════ */

.hb {
  --hb-anillo: #F5D14E;          /* el trazo amarillo de la lámina original */
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
/* Connect no sigue el modo noche del sistema: se elige con su interruptor y
   queda en `data-theme`. Así que aquí tampoco se mira `prefers-color-scheme` —
   si lo mirara, en un ordenador en modo noche pero con Connect en claro el
   anillo saldría apagado sobre papel blanco. */
:root[data-theme="dark"] .hb { --hb-anillo: #8E7526; }

/* ── El carril: buscar e índice ─────────────────────────────────────────── */
.hb__nav {
  position: sticky; top: 64px;
  max-height: calc(100vh - 84px);
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.hb__buscar {
  display: flex; align-items: center; gap: 7px; flex: none;
  border: 1px solid var(--line); background: var(--surface);
  padding: 7px 10px;
}
.hb__buscar svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.hb__buscar input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 13.5px; padding: 1px 0;
}
.hb__buscar input:focus { outline: none; }
.hb__buscar:focus-within { border-color: var(--accent); }
.hb__cuenta { margin: 0; font-size: 11.5px; color: var(--ink-3); flex: none; }

.hb__indice { overflow: auto; display: grid; gap: 1px; padding-bottom: 8px; }
.hb__i {
  display: block; padding: 4px 9px; font-size: 12.5px; line-height: 1.35;
  color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent;
}
.hb__i:hover { background: var(--surface); color: var(--ink); }
.hb__i--top { font-weight: 600; color: var(--ink); }
.hb__i--sub { padding-left: 20px; font-size: 12px; color: var(--ink-3); }
/* La sección que se está leyendo. Se marca con el acento a la izquierda y no
   con un fondo: con cien entradas, cien fondos serían una bandera. */
.hb__i.is-on {
  border-left-color: var(--accent); color: var(--ink); font-weight: 600;
  background: var(--surface);
}
.hb__i[hidden] { display: none; }

/* ── La rueda de componentes ────────────────────────────────────────────── */
.hb-rueda { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.hb-rueda__svg { width: 100%; height: auto; display: block; }
.hb-rueda__t1 {
  font-family: var(--font-display, inherit); font-size: 34px; font-weight: 600;
  fill: var(--accent); letter-spacing: -.01em;
}
.hb-rueda__t2 { font-size: 16px; font-weight: 600; fill: var(--ink-2); }

.hb-nodo { cursor: pointer; }
.hb-nodo__c {
  fill: var(--surface); stroke: var(--line); stroke-width: 1.5;
  transition: fill .12s, stroke .12s;
}
.hb-nodo__n { font-size: 14px; font-weight: 700; fill: var(--ink-3); }
.hb-nodo__txt { font-size: 16px; font-weight: 600; fill: var(--ink); }
.hb-nodo:hover .hb-nodo__c,
.hb-nodo.is-on .hb-nodo__c { fill: var(--accent-wash); stroke: var(--accent); }
.hb-nodo:hover .hb-nodo__txt,
.hb-nodo.is-on .hb-nodo__txt { fill: var(--accent); }
.hb-nodo:focus-visible { outline: none; }
.hb-nodo:focus-visible .hb-nodo__c { stroke: var(--accent); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .hb-nodo__c { transition: none; } }

.hb-comps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hb-comp { padding: 7px 9px; border-left: 2px solid transparent; }
.hb-comp.is-on { background: var(--surface-2); border-left-color: var(--accent); }
.hb-comp__t {
  font-weight: 600; font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.hb-comp__t:hover { color: var(--accent); text-decoration: underline; }
.hb-comp__q { margin: 1px 0 4px; font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* ── La marca de un actor ───────────────────────────────────────────────── */
.hb-marcas { display: flex; flex-wrap: wrap; gap: 4px; }
.hb-marca {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 2px 7px 2px 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 17%, var(--surface));
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--surface));
  white-space: nowrap; max-width: 100%;
}
/* El icono va del color que se lea DENTRO de su círculo: blanco sobre los
   oscuros, tinta sobre el dorado y el melocotón. Lo decide el servidor mirando
   la luminancia, porque con un `#fff` fijo cuatro de los catorce iconos eran
   una mancha clara sobre otra. */
.hb-marca__i {
  display: inline-flex; width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: var(--c); color: var(--ci, #fff);
  align-items: center; justify-content: center;
}
.hb-marca__i svg { width: 11px; height: 11px; }
.hb-marca--sm { font-size: 10.5px; padding: 1px 6px 1px 2px; }
.hb-marca--sm .hb-marca__i { width: 13px; height: 13px; }
.hb-marca--sm .hb-marca__i svg { width: 9.5px; height: 9.5px; }
.hb-marca--nadie {
  --c: var(--ink-3); padding: 1px 7px; font-weight: 500; font-style: italic;
  color: var(--ink-3);
}

/* ── Los catorce actores ────────────────────────────────────────────────── */
.hb-actores {
  display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.hb-actor {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 8px 11px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer;
  min-width: 0;
}
.hb-actor:hover { border-color: var(--c); }
/* Seleccionado: la franja del color del actor a la izquierda y el fondo muy
   lavado. Sin relleno fuerte — con catorce colores, uno de ellos a todo trapo
   se lleva la pantalla por delante. */
.hb-actor[aria-pressed="true"] {
  border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface));
  box-shadow: inset 3px 0 0 var(--c);
}
.hb-actor__i {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; background: var(--c);
  color: var(--ci, #fff);
}
.hb-actor__i svg { width: 17px; height: 17px; }
.hb-actor__n { flex: 1; min-width: 0; line-height: 1.3; }
.hb-actor__k {
  flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hb-actor[aria-pressed="true"] .hb-actor__k { color: var(--ink); }

.hb-nota {
  margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55;
  max-width: 78ch;
}
.hb-vacio {
  margin: 10px 0 0; padding: 14px; border: 1px dashed var(--line);
  color: var(--ink-3); font-size: 13px; text-align: center;
}

/* ── El tablero ─────────────────────────────────────────────────────────── */
.hb-board {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  align-items: start;
}
.hb-col { border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.hb-col[hidden] { display: none; }
.hb-col__t {
  margin: 0; padding: 8px 11px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center;
}
.hb-col__t span {
  margin-left: auto; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.hb-card {
  display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
  padding: 8px 11px; background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
.hb-card:last-child { border-bottom: 0; }
.hb-card[hidden] { display: none; }
.hb-card__x { margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.hb-card__b { display: grid; gap: 5px; min-width: 0; }
.hb-card__t { font-size: 12.5px; line-height: 1.4; }
/* Marcada: se va apagando, pero no desaparece. Una tarea hecha sigue siendo
   parte del tablero, y borrarla de la vista quita la sensación de avance. */
.hb-card__x:checked ~ .hb-card__b .hb-card__t {
  text-decoration: line-through; color: var(--ink-3);
}
.hb-card__x:checked ~ .hb-card__b .hb-marcas { opacity: .5; }

/* ── El documento ───────────────────────────────────────────────────────── */
.hb-doc { display: grid; gap: 14px; }
.hb-sec[hidden] { display: none; }
.hb-sec .card__body { max-width: none; }
.hb-sec .prosa { max-width: 74ch; }
.hb-sub { margin: 24px 0 0; scroll-margin-top: 72px; }
.hb-sec { scroll-margin-top: 72px; }
.hb-sub__t {
  font-size: 15px; margin: 0 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.hb-sub .prosa h4, .hb-sec .prosa h4 {
  font-size: 13px; margin: 16px 0 5px; color: var(--ink-2);
  font-weight: 700; letter-spacing: .01em;
}
.hb-tpl {
  margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3);
  border-left: 2px solid var(--accent); padding-left: 10px; max-width: 70ch;
}
.hb-copiar {
  margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.hb-copiar:hover { border-color: var(--accent); color: var(--accent); }

/* Lo que el buscador ha encontrado, resaltado dentro del texto. */
.hb-sec mark {
  background: color-mix(in srgb, var(--hb-anillo) 55%, transparent);
  color: inherit; padding: 0 1px;
}

/* Las tablas del documento se desplazan ellas; la página, nunca. */
.hb-tabla { overflow-x: auto; margin: 0 0 14px; }
.hb-tabla table { min-width: 460px; }
.hb-tabla th, .hb-tabla td {
  padding: 6px 10px; border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; text-align: left; vertical-align: top;
}
.hb-tabla th { font-weight: 700; color: var(--ink-2); border-bottom-color: var(--line); }

/* Las láminas del handbook. Fondo claro dentro de un marco, porque son PNG con
   fondo blanco: en modo noche, sin el marco, flotan. */
.hb-img { margin: 4px 0 16px; padding: 10px; background: #fff; border: 1px solid var(--line); }
.hb-img img { display: block; width: 100%; height: auto; }

.hb-pie {
  margin: 18px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.6;
  max-width: 78ch;
}

/* ── Estrecho ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hb { grid-template-columns: minmax(0, 1fr); }
  /* El índice se convierte en una tira desplegable arriba: en una pantalla
     estrecha, cien entradas en columna empujan el documento fuera de la vista. */
  .hb__nav { position: static; max-height: none; }
  .hb__indice {
    max-height: 210px; border: 1px solid var(--line); background: var(--surface);
  }
  .hb-rueda { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hb-actores { grid-template-columns: minmax(0, 1fr); }
  .hb-board { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .hb__nav, .hb-copiar, .hb-actores, .hb-rueda__svg { display: none; }
  .hb { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOS ESQUEMAS

   Tres procesos que el handbook cuenta en prosa: el camino hasta ser sede, el
   reparto de mando y el ciclo de una convocatoria. Van en HTML y no en SVG a
   propósito — así se leen con el lector de pantalla, se buscan con Ctrl+F, se
   reordenan solos en el teléfono, y el modo noche les vale sin repintar nada.
   Los conectores son pseudo-elementos: son adorno, y el adorno no debe estar
   en el documento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La franja de cifras ────────────────────────────────────────────────── */
.hb-cifras {
  display: grid; gap: 1px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  background: var(--line); border: 1px solid var(--line);
}
.hb-cifra {
  background: var(--surface); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 1px;
}
.hb-cifra b {
  font-family: var(--font-display, inherit); font-size: 26px; font-weight: 600;
  line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums;
}
.hb-cifra span {
  font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
}

/* ── El camino: una cinta de siete hitos ────────────────────────────────── */
.hb-ruta {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.hb-paso {
  position: relative; padding: 12px 13px 11px;
  border: 1px solid var(--line); background: var(--surface);
  border-top: 3px solid var(--hb-anillo);
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
/* El hilo que une un hito con el siguiente. Sólo entre tarjetas de la misma
   fila: cuando la rejilla salta de línea, la flecha sobraría. */
.hb-paso::after {
  content: ""; position: absolute; top: -2px; right: -11px; width: 10px;
  height: 3px; background: var(--hb-anillo);
}
.hb-paso:last-child::after { display: none; }
.hb-paso__n {
  position: absolute; top: 9px; right: 11px;
  font-family: var(--font-display, inherit); font-size: 21px; font-weight: 600;
  color: var(--line); line-height: 1;
}
.hb-paso__p {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.hb-paso__t { margin: 0; font-size: 14.5px; padding-right: 22px; }
.hb-paso__q { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; flex: 1; }
.hb-paso__f {
  margin: 2px 0 0; font-size: 10.5px; color: var(--ink-3); font-style: italic;
}

.hb-informes {
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--surface-2);
}
.hb-informes__t {
  margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.hb-informes ol {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hb-informes li {
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  counter-increment: inf;
}
.hb-informes li::before {
  content: counter(inf) " "; color: var(--accent); font-weight: 700;
}
.hb-informes ol { counter-reset: inf; }

/* ── Quién decide qué: cuatro alturas con su hilo ───────────────────────── */
.hb-gob { display: grid; gap: 0; max-width: 700px; }
.hb-nivel { position: relative; padding: 0 0 22px 0; }
.hb-nivel:last-child { padding-bottom: 0; }
/* El hilo vertical que baja al nivel siguiente, con su punta. */
.hb-nivel:not(:last-child)::after {
  content: ""; position: absolute; left: 28px; bottom: 4px; width: 2px;
  height: 18px; background: var(--line);
}
.hb-nivel:not(:last-child)::before {
  content: ""; position: absolute; left: 25px; bottom: 0; width: 8px; height: 8px;
  border-right: 2px solid var(--line); border-bottom: 2px solid var(--line);
  transform: rotate(45deg);
}
.hb-nivel__caja {
  border: 1px solid var(--line); background: var(--surface); padding: 12px 15px;
  border-left: 3px solid var(--accent);
}
/* Cada altura se hunde un poco respecto a la de arriba: el mando se lee de un
   vistazo por la sangría, sin tener que leer los títulos. */
.hb-nivel:nth-child(2) .hb-nivel__caja { margin-left: 22px; }
.hb-nivel:nth-child(3) .hb-nivel__caja { margin-left: 44px; }
.hb-nivel:nth-child(4) .hb-nivel__caja { margin-left: 66px; }
.hb-nivel:nth-child(2)::after, .hb-nivel:nth-child(2)::before { left: 50px; }
.hb-nivel:nth-child(3)::after, .hb-nivel:nth-child(3)::before { left: 72px; }
.hb-nivel:nth-child(2)::before { left: 47px; }
.hb-nivel:nth-child(3)::before { left: 69px; }
.hb-nivel__t { margin: 6px 0 3px; font-size: 15px; }
.hb-nivel__q { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.hb-nivel__m {
  margin: 9px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.hb-nivel__m li {
  font-size: 11.5px; padding: 2px 8px; background: var(--surface-2);
  border: 1px solid var(--line-soft); color: var(--ink-2);
}

/* ── El ciclo: seis pasos con flecha ────────────────────────────────────── */
.hb-ciclo {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.hb-fase {
  position: relative; padding: 11px 13px; min-width: 0;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; gap: 5px;
}
.hb-fase::after {
  content: ""; position: absolute; top: 50%; right: -9px; z-index: 1;
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid var(--accent); border-top: 2px solid var(--accent);
  transform: rotate(45deg); background: var(--paper);
}
.hb-fase:last-child::after { display: none; }
.hb-fase__n {
  font-family: var(--font-display, inherit); font-size: 12px; font-weight: 700;
  color: var(--accent); letter-spacing: .06em;
}
.hb-fase__t { margin: 0; font-size: 14px; }
.hb-fase__q { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; flex: 1; }
.hb-ir { font-weight: 600; }

@media (max-width: 860px) {
  /* En columna, la flecha de la derecha no dice nada: pasa abajo. */
  .hb-fase::after, .hb-paso::after {
    top: auto; bottom: -8px; right: 50%; margin: 0 -4px 0 0;
    transform: rotate(135deg);
  }
  .hb-paso::after { width: 3px; height: 10px; transform: none; bottom: -11px; right: 50%; }
  .hb-nivel:nth-child(2) .hb-nivel__caja,
  .hb-nivel:nth-child(3) .hb-nivel__caja,
  .hb-nivel:nth-child(4) .hb-nivel__caja { margin-left: 14px; }
}