/* ==========================================================================
   TORRE — papel continuo de barras verdes.

   Reglas invariantes de este sistema (ver DESIGN.md):
   · border-radius: 0 en todo. El papel se corta con guillotina.
   · box-shadow: prohibido. La profundidad se hace con banda, regla y tinta
     invertida, no elevando cosas.
   · El rojo de cinta solo aparece en boletines de prioridad, y siempre
     acompañado de la palabra "Prioridad".
   · Monoespaciada solo para lo que la máquina midió: horas, códigos, conteos
     y etiquetas de control. Titular y cuerpo son siempre Bitter.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:        #F2F0E6;
  --paper-bar:    #E3EAD9;
  --paper-hole:   #D5D1BF;
  --ink:          #1C1B17;
  --ink-faded:    #56544A;
  --ink-ghost:    #A8A492;
  --priority:     #A81E12;
  --rule:         #C5C1B0;

  --font-machine: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  --font-paper:   'Bitter', Georgia, 'Times New Roman', serif;

  --hair: 2px;
  --xs:   6px;
  --sm:   10px;
  --md:   18px;
  --lg:   30px;
  --xl:   52px;
  --xxl:  88px;

  --sprocket: 62px;
  --holes: 22px;
  --measure: 68ch;
  --shell: 980px;

  /* Curvas fuertes: las de serie de CSS no tienen suficiente carácter. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-feed: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Turno nocturno: la misma hoja bajo una lámpara de trabajo ámbar, no un tema
   oscuro genérico. Sigue siendo papel con bandas; solo está en penumbra. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper:      #1A1815;
    --paper-bar:  #221F1A;
    --paper-hole: #0E0D0B;
    --ink:        #E8E4D6;
    --ink-faded:  #A5A091;
    --ink-ghost:  #6A6659;
    --priority:   #F0705C;
    --rule:       #3A362D;
  }
}

/* El atributo manda sobre la preferencia del sistema, en ambos sentidos. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper:      #1A1815;
  --paper-bar:  #221F1A;
  --paper-hole: #0E0D0B;
  --ink:        #E8E4D6;
  --ink-faded:  #A5A091;
  --ink-ghost:  #6A6659;
  --priority:   #F0705C;
  --rule:       #3A362D;
}

:root[data-theme='light'] {
  color-scheme: light;
  --paper:      #F2F0E6;
  --paper-bar:  #E3EAD9;
  --paper-hole: #D5D1BF;
  --ink:        #1C1B17;
  --ink-faded:  #56544A;
  --ink-ghost:  #A8A492;
  --priority:   #A81E12;
  --rule:       #C5C1B0;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-paper);
  font-size: 0.9375rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Invariantes del sistema, declarados una vez y de forma amplia a propósito. */
* { border-radius: 0 !important; box-shadow: none !important; }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

code {
  font-family: var(--font-machine);
  font-size: 0.85em;
  background: var(--paper-bar);
  padding: 0 0.3em;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: var(--sm) var(--md);
  z-index: 20;
}
.skip:focus { left: 0; }

/* ==========================================================================
   CABECERA — el inicio del rollo
   ========================================================================== */

/* Nombre a la izquierda, estado de la máquina a la derecha. Apilarlos costaba
   más de cien píxeles de la primera pantalla, que es donde va la noticia. */
.masthead {
  border-bottom: 1px solid var(--ink);
  padding: var(--md) 0 var(--sm);
}

.masthead__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sm) var(--xl);
  align-items: end;
}

.masthead__side { min-width: 0; padding-bottom: 4px; }

.masthead__inner,
.console__inner,
.roll,
.colophon__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--md);
  padding-right: var(--md);
}

.masthead__name h1 {
  font-family: var(--font-machine);
  font-weight: 800;
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.055em;
  margin-left: -0.06em; /* alinea el trazo, no la caja */
}

.masthead__sub {
  font-family: var(--font-paper);
  font-size: 0.9375rem;
  color: var(--ink-faded);
  margin-top: var(--xs);
}
.masthead__sub b { color: var(--ink); font-weight: 600; }

.masthead__machine {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faded);
  padding-bottom: var(--xs);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xs);
}

.masthead__notice {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faded);
  max-width: 58ch;
  margin-top: var(--xs);
}

/* ── El cabezal de la máquina ──────────────────────────────────────────────
   Teclea el titular más reciente al abrir. El texto está completo en el HTML;
   lo que se anima es el recorte, con steps() para que salte carácter a carácter
   como una barra de tipos y no se deslice como una cortina. */

.teleprinter {
  border-top: 1px solid var(--rule);
  margin-top: var(--sm);
  overflow: hidden;
}

.teleprinter__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--xs) var(--md);
  display: flex;
  align-items: baseline;
  gap: var(--sm);
  min-width: 0;
}

.teleprinter__key {
  font-family: var(--font-machine);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faded);
  flex: none;
}

.teleprinter__line {
  font-family: var(--font-machine);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms var(--ease-out);
}
.teleprinter__line:hover { border-bottom-color: var(--ink); }

.teleprinter__caret {
  width: 7px;
  height: 13px;
  background: var(--ink);
  flex: none;
  align-self: center;
}

@media (prefers-reduced-motion: no-preference) {
  .js .teleprinter__line {
    clip-path: inset(0 100% 0 0);
    animation: typewrite 1150ms steps(var(--chars, 60), end) 180ms forwards;
  }
  .js .teleprinter__caret { animation: blink 1.05s steps(1, end) infinite; }
}

@keyframes typewrite { to { clip-path: inset(0 0 0 0); } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ==========================================================================
   CONSOLA — barra de control fija
   ========================================================================== */

.console {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

.console__inner { padding-top: var(--sm); padding-bottom: var(--sm); }

.console__top {
  display: flex;
  gap: var(--md);
  align-items: stretch;
  flex-wrap: wrap;
}

.search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: var(--sm);
  border-bottom: 1px solid var(--rule);
  transition: border-color 160ms var(--ease-out);
}
.search:focus-within { border-bottom-color: var(--ink); border-bottom-width: 2px; }

.search__key,
.field__key,
.chip,
.alerta,
.button,
.reset,
.bulletin__link,
.bulletin__extra summary,
.advance__hint,
.empty__code {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.search__key { color: var(--ink-faded); flex: none; }

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-machine);
  font-size: 0.8125rem;
  padding: var(--sm) 0;
}
.search input::placeholder { color: var(--ink-faded); }
.search input:focus { outline: none; }
.search input::-webkit-search-cancel-button { display: none; }

.search__clear {
  border: 0;
  background: transparent;
  color: var(--ink-faded);
  cursor: pointer;
  padding: var(--xs);
  border-bottom: 1px solid transparent;
}
.search__clear:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* El acceso directo de CX: quejas e incidentes de las últimas 24 h en un clic */
.alerta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: var(--sm) var(--md);
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.alerta__n {
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0;
  padding-left: var(--sm);
  border-left: 1px solid currentColor;
}
.alerta__unit { font-weight: 500; opacity: 0.65; letter-spacing: 0.06em; }
.alerta[aria-pressed='true'] { background: var(--priority); border-color: var(--priority); color: var(--paper); }
.alerta:active { transform: scale(0.97); }

/* Sin quejas nuevas en 24 h el control se apaga, pero sigue funcionando: esa
   cifra en cero es justamente lo que el agente de CX quiere ver. */
.alerta[data-empty='true']:not([aria-pressed='true']) { color: var(--ink-faded); border-color: var(--rule); }

/* Acceso al informe de posicionamiento. Se lee como un sello estampado, igual
   que el control de quejas, porque ambos son puertas y no filtros. */
.reportlink {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  border: 1px solid var(--rule);
  color: var(--ink-faded);
  padding: var(--sm) var(--md);
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out),
              border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.reportlink__go { transition: transform 200ms var(--ease-out); }
.reportlink:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .reportlink:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .reportlink:hover .reportlink__go { transform: translateX(3px); }
}

/* ── Chips de tema ── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hair);
  margin-top: var(--xs);
}
.chip { flex: none; white-space: nowrap; }

.chip {
  border: 0;
  background: transparent;
  color: var(--ink-faded);
  padding: 7px 12px;
  cursor: pointer;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out), transform 120ms var(--ease-out);
}
.chip i { font-style: normal; opacity: 0.6; margin-left: 0.35em; }
.chip.is-active { background: var(--ink); color: var(--paper); }
.chip.is-active i { opacity: 0.75; }
.chip:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .chip:hover:not(.is-active) { background: var(--paper-bar); color: var(--ink); }
  .alerta:hover:not([aria-pressed='true']):not([data-empty='true']) { background: var(--ink); color: var(--paper); }
}

/* ── Selectores ── */

.console__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm) var(--md);
  align-items: flex-end;
  margin-top: var(--xs);
  padding-top: var(--xs);
  border-top: 1px solid var(--rule);
}

/* En escritorio no hay nada que plegar: el resumen se oculta y el panel se
   muestra aunque el <details> esté cerrado. Así el mismo marcado sirve para
   las dos anchuras y sigue funcionando sin JavaScript. */
.console__more > summary { display: none; }
.console__more > .console__bottom { display: flex; }

.console__more > summary {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faded);
  cursor: pointer;
  list-style: none;
  padding: var(--xs) 0;
  margin-top: var(--xs);
  border-top: 1px solid var(--rule);
}
.console__more > summary::-webkit-details-marker { display: none; }
.console__more > summary::after { content: ' +'; font-weight: 800; }
.console__more[open] > summary::after { content: ' −'; }

.field { display: flex; flex-direction: column; gap: 3px; }
.field__key { color: var(--ink-faded); }

.field__select {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-machine);
  font-size: 0.75rem;
  padding: 5px 22px 5px 0;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 160ms var(--ease-out);
}
.field__select:focus { border-bottom-color: var(--ink); border-bottom-width: 2px; outline: none; }
.field__select option { background: var(--paper); color: var(--ink); }

/* Interruptor de competencia: una casilla ponchada, no un botón deslizante. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  cursor: pointer;
  padding-bottom: 5px;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__box {
  width: 13px;
  height: 13px;
  border: 1px solid var(--ink-faded);
  flex: none;
  position: relative;
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.switch input:checked + .switch__box { background: var(--ink); border-color: var(--ink); }
.switch input:checked + .switch__box::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--paper);
}
.switch input:focus-visible + .switch__box { outline: 2px solid var(--ink); outline-offset: 2px; }

.switch__label {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.switch__label i { font-style: normal; opacity: 0.6; }
.switch:hover .switch__label { color: var(--ink); }

.reset {
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-faded);
  padding: 5px 0;
  cursor: pointer;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.reset:hover { color: var(--priority); border-bottom-color: var(--priority); }

/* Va en la fila superior, alineado a la derecha: es el resultado de los
   controles que tiene al lado, no un renglón aparte. */
.console__tally {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-left: auto;
  align-self: center;
  text-align: right;
  flex: none;
}
.console__tally b { color: var(--ink); font-weight: 800; }
.console__tally[data-zero='true'] b { color: var(--priority); }

/* ==========================================================================
   EL ROLLO
   ========================================================================== */

.roll { padding: 0 0 var(--xl); }

/* La perforación de arrastre: una sola banda continua para todo el rollo, así
   los agujeros nunca se desalinean entre boletines de distinta altura. */
.roll__body {
  background-image: radial-gradient(circle at center, var(--paper-hole) 0 4.5px, transparent 5px);
  background-size: var(--holes) 26px;
  background-position: 0 13px;
  background-repeat: repeat-y;
  border-bottom: 1px dashed var(--rule);
}

.bulletin {
  display: grid;
  grid-template-columns: var(--sprocket) minmax(0, 1fr);
  border-top: 1px dashed var(--rule);
}
.bulletin:first-child { border-top: 0; }

.bulletin__sprocket {
  display: flex;
  justify-content: flex-end;
  padding: var(--md) var(--sm) 0 0;
}

.bulletin__seq {
  font-family: var(--font-machine);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-faded);
}
.bulletin--priority .bulletin__seq { color: var(--priority); }

/* La banda verde alterna solo cubre el área impresa, no el margen de arrastre.
   Es aritmética pura —pares sí, impares no— y no codifica nada. */
.bulletin__sheet {
  padding: var(--md) 0 var(--md) var(--md);
  min-width: 0;
}
.bulletin:nth-child(even) .bulletin__sheet { background: var(--paper-bar); }

/* ── Línea de cabecera codificada ── */

.bulletin__code {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faded);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--xs);
  margin-bottom: var(--sm);
}
.bulletin__sep { color: var(--ink-ghost); }

/* La cinta bicolor: en un boletín de prioridad, la línea entera va en rojo. */
.bulletin--priority .bulletin__code { color: var(--priority); }
.bulletin--priority .bulletin__sep { color: var(--priority); opacity: 0.5; }

.bulletin__flag {
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--priority);
}

.bulletin__headline {
  font-family: var(--font-paper);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
  max-width: var(--measure);
  text-wrap: balance;
}

.bulletin__headline a {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bulletin__headline a:hover { background-size: 100% 1px; }
}

.bulletin__body {
  color: var(--ink-faded);
  max-width: var(--measure);
  margin-top: var(--xs);
}

/* ── Pie del boletín ── */

.bulletin__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--xs) var(--sm);
  margin-top: var(--sm);
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

.bulletin__source { font-weight: 600; color: var(--ink); }
.bulletin__ago { color: var(--ink-faded); }

.bulletin__replicas,
.bulletin__competitor {
  border: 1px solid var(--rule);
  padding: 1px 5px;
  color: var(--ink-faded);
}

.bulletin__link {
  margin-left: auto;
  color: var(--ink-faded);
  border-bottom: 1px solid transparent;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.bulletin__link:hover { color: var(--priority); border-bottom-color: var(--priority); }

/* ── Ficha desplegable: se abre sobre el papel, sin modal ── */

.bulletin__extra { margin-top: var(--sm); max-width: var(--measure); }

.bulletin__extra summary {
  color: var(--ink-faded);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: 3px 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.bulletin__extra summary::-webkit-details-marker { display: none; }
.bulletin__extra summary::before {
  content: '+';
  font-weight: 800;
  font-size: 0.8125rem;
  line-height: 1;
}
.bulletin__extra[open] summary::before { content: '−'; }
.bulletin__extra summary:hover { color: var(--ink); border-bottom-color: var(--ink); }

.extra__panel {
  border-top: 1px solid var(--rule);
  margin-top: var(--sm);
  padding-top: var(--sm);
  display: grid;
  gap: var(--sm);
}

.extra__row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--sm);
  align-items: baseline;
}

.extra__key {
  font-family: var(--font-machine);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

.extra__val { font-size: 0.875rem; line-height: 1.6; color: var(--ink-faded); }
.extra__val p + p { margin-top: var(--xs); }
.extra__title { color: var(--ink); font-weight: 600; }

/* ── Estados del rollo ── */

.warming,
.roll__empty {
  padding: var(--xl) 0;
  border-bottom: 1px dashed var(--rule);
  text-align: left;
}

.warming__code,
.empty__code {
  font-family: var(--font-machine);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-size: 0.75rem;
}

/* Solo un fallo real de la máquina gasta el rojo de la cinta. */
.warming[data-state='error'] .warming__code { color: var(--priority); }

.warming__text,
.empty__text {
  margin-top: var(--sm);
  color: var(--ink-faded);
  max-width: 56ch;
}

.button {
  display: inline-block;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  cursor: pointer;
  transition: background 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.button:hover { background: var(--priority); }
.button:active { transform: scale(0.97); }

.roll__empty .button { margin-top: var(--md); }

.roll__advance {
  display: flex;
  align-items: center;
  gap: var(--md);
  padding: var(--lg) 0 0;
}
.advance__hint { color: var(--ink-faded); }

/* ==========================================================================
   COLOFÓN
   ========================================================================== */

.colophon {
  border-top: 1px solid var(--ink);
  padding: var(--xl) 0 var(--xxl);
}

.colophon__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--lg) var(--xl);
}

.colophon__block--wide { grid-column: 1 / -1; }

.colophon h2 {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: var(--xs);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sm);
}

.colophon p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-faded);
  max-width: var(--measure);
}
.colophon p + p { margin-top: var(--sm); }

.colophon__figures {
  font-family: var(--font-machine);
  font-size: 0.6875rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faded) !important;
}

.sources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 var(--lg);
}
.sources li {
  display: flex;
  justify-content: space-between;
  gap: var(--sm);
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faded);
  padding: 5px 0;
  border-bottom: 1px dashed var(--rule);
}
.sources li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources li i { font-style: normal; font-weight: 800; color: var(--ink); flex: none; }

.colophon__legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ink);
  padding-top: var(--md);
  font-size: 0.75rem !important;
  line-height: 1.6;
  color: var(--ink-faded) !important;
  max-width: 78ch !important;
}

/* ==========================================================================
   MOVIMIENTO

   Un solo momento autoral: el papel avanza. Los filtros y la búsqueda no
   animan nada — se usan decenas de veces por sesión y cualquier transición
   los volvería lentos.
   ========================================================================== */

@keyframes feed {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* El papel avanza: solo los boletines recién impresos se mueven. El resto del
   rollo se queda quieto, porque una lista que se reordena entera cada vez que
   llega algo es una lista que no se puede leer. */
.bulletin[data-fed] {
  animation: feed 280ms var(--ease-feed) backwards;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   ADAPTACIÓN
   ========================================================================== */

@media (max-width: 720px) {
  :root { --sprocket: 20px; --holes: 20px; --md: 14px; }

  /* El margen de arrastre conserva la perforación pero suelta el número de
     secuencia: en 375px ese espacio vale más para el titular. */
  .bulletin__seq { display: none; }
  .bulletin__sheet { padding-left: var(--sm); padding-right: var(--sm); }

  /* El nombre y el estado se apilan; la retícula de dos columnas solo tiene
     sentido cuando hay ancho que repartir. */
  .masthead__inner { grid-template-columns: 1fr; gap: var(--sm); }
  .masthead__side { padding-bottom: 0; }
  .masthead__notice { font-size: 0.75rem; }

  /* El estado de las líneas es diagnóstico y envuelve a tres renglones en un
     teléfono. Se queda en el colofón, que es donde se consulta con calma. */
  .machine__wide { display: none; }

  /* En pantalla estrecha nueve chips envueltos son cuatro filas y se comen la
     primera pantalla. Aquí sí compensa un carril que se desliza, y el chip
     cortado a la derecha ya avisa de que hay más. */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chips::-webkit-scrollbar { display: none; }

  .console__top { gap: var(--xs) var(--sm); }
  .alerta { flex: 1 1 auto; justify-content: space-between; }
  .console__tally { width: 100%; text-align: left; margin-left: 0; }

  /* Aquí sí se pliega: los cuatro selectores ocupaban media pantalla antes de
     que apareciera el primer boletín. */
  .console__more > summary { display: block; }
  .console__more:not([open]) > .console__bottom { display: none; }
  .console__more > .console__bottom { border-top: 0; padding-top: 0; }

  .bulletin__link { margin-left: 0; }

  .extra__row { grid-template-columns: 1fr; gap: 2px; }
}

@media print {
  .console, .skip, .roll__advance { display: none; }
  body { background: #fff; color: #000; }
}