/* ==========================================================================
   TORRE — informe de posicionamiento.

   Misma máquina, otro papel. Las barras se imprimen con caracteres de bloque,
   que es como una impresora de línea dibujaba una gráfica: la animación es el
   movimiento propio de la forma, no un efecto puesto encima.

   Se carga solo en /posicionamiento; la portada no paga por esto.
   ========================================================================== */

.masthead--report .masthead__name h1 { color: var(--priority); }
.console--report .console__inner { padding-top: var(--xs); padding-bottom: var(--xs); }

.backlink {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faded);
  border-bottom: 1px solid transparent;
  padding: var(--xs) 0;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.backlink:hover { color: var(--ink); border-bottom-color: var(--ink); }

.window-picker { display: flex; gap: var(--hair); }

.report {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--md) var(--xxl);
}

.panel {
  padding: var(--xl) 0 var(--lg);
  border-bottom: 1px dashed var(--rule);
}
.panel:last-of-type { border-bottom: 0; }

.panel__title {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: var(--xs);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--md);
}

.panel__note,
.panel__caveat,
.panel__empty {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-faded);
  max-width: var(--measure);
  margin-bottom: var(--md);
}
.panel__caveat {
  font-size: 0.8125rem;
  border-top: 1px solid var(--rule);
  padding-top: var(--sm);
  margin-top: var(--md);
  margin-bottom: 0;
}
.panel__note b { color: var(--ink); }

/* ── Cifras grandes con contador mecánico ─────────────────────────────────── */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.metric {
  background: var(--paper);
  padding: var(--md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.metric__value {
  font-family: var(--font-machine);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.metric--adverse .metric__value { color: var(--priority); }

.metric__hint {
  font-size: 0.8125rem;
  color: var(--ink-faded);
  line-height: 1.4;
}

/* ── Aviso de quejas: el atajo que busca atención al cliente ──────────────── */

.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sm) var(--md);
  margin-top: var(--md);
  padding: var(--md);
  border: 1px solid var(--ink);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.callout:hover { background: var(--ink); color: var(--paper); }
.callout:hover .callout__flag,
.callout:hover .callout__fresh { color: var(--paper); }

.callout__flag,
.callout__go {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.callout__flag { color: var(--priority); }
.callout__go { margin-left: auto; }
.callout__body { font-size: 0.9375rem; }
.callout__body b {
  font-family: var(--font-machine);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.callout__fresh { color: var(--priority); }

/* Solo late si hay quejas frescas de verdad. Un indicador que parpadea siempre
   deja de significar nada a la media hora. */
.callout--live .callout__flag { animation: ratchet 2.6s var(--ease-out) infinite; }

@keyframes ratchet {
  0%, 88%, 100% { opacity: 1; }
  92% { opacity: 0.35; }
  96% { opacity: 1; }
}

/* ── Barras impresas ──────────────────────────────────────────────────────── */

.bars { display: grid; gap: 3px; }

.bar {
  display: grid;
  grid-template-columns: minmax(96px, 168px) minmax(0, 1fr) minmax(52px, auto) auto;
  align-items: baseline;
  gap: var(--sm);
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 0;
}

.bar__label {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar__track { overflow: hidden; min-width: 0; }

.bar__ink {
  display: inline-block;
  color: var(--ink);
  letter-spacing: -0.08em;
  white-space: nowrap;
}
.bar--adverse .bar__ink { color: var(--priority); }

/* La barra está dibujada por defecto. Solo se recorta para imprimirla cuando
   hay JavaScript que la va a desplegar y el lector no pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .js .bar__ink { clip-path: inset(0 100% 0 0); }
  .js .bar[data-printed] .bar__ink {
    animation: print 520ms var(--ease-feed) var(--delay, 0ms) forwards;
  }
}

@keyframes print {
  to { clip-path: inset(0 0 0 0); }
}

.bar__value {
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bar__tone { color: var(--ink-faded); }
.bar--adverse .bar__tone { color: var(--priority); }

/* ── Serie temporal ───────────────────────────────────────────────────────── */

.chart { margin: 0; }
.chart svg {
  width: 100%;
  height: clamp(180px, 26vw, 280px);
  display: block;
  overflow: visible;
}

.chart__grid { stroke: var(--rule); stroke-width: 1; }
.chart__ytick,
.chart__xtick {
  fill: var(--ink-faded);
  font-family: var(--font-machine);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.chart__area { fill: var(--paper-bar); }
.chart__line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.chart__line--neg { stroke: var(--priority); stroke-width: 1.5; }

.chart[data-drawn] .chart__line { animation: draw 900ms var(--ease-out) forwards; }
.chart[data-drawn] .chart__line--neg { animation-delay: 160ms; }
.chart[data-drawn] .chart__area { animation: wash 700ms var(--ease-out) both; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wash {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  margin-top: var(--sm);
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.legend::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  margin-right: var(--xs);
  vertical-align: middle;
  background: var(--ink);
}
.legend--neg::before { background: var(--priority); }

/* ── Dos columnas ─────────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--lg) var(--xl);
}
.split__half { min-width: 0; }

.split__key {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.split__key i { font-style: normal; color: var(--ink-faded); }

.split__tone {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: var(--sm);
}

/* ── Listas de historias ──────────────────────────────────────────────────── */

.stories {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.story {
  background: var(--paper);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--md);
  align-items: baseline;
  padding: var(--sm) 0;
}

.story__n,
.story__when {
  font-family: var(--font-machine);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-faded);
  min-width: 62px;
}
.story__n { color: var(--ink); }
.stories--alert .story__when { color: var(--priority); }

.story__body a {
  font-family: var(--font-paper);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  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) {
  .story__body a:hover { background-size: 100% 1px; }
}

.story__meta {
  display: block;
  font-family: var(--font-machine);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-top: 3px;
}

.report__foot {
  padding-top: var(--lg);
  border-top: 1px solid var(--ink);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-faded);
  max-width: 78ch;
}

/* ── Entrada de cada bloque ───────────────────────────────────────────────── */

/* El contenido es visible por defecto. Solo se esconde para animarlo cuando
   `.js` confirma que hay JavaScript vivo para volver a mostrarlo, y report.js
   lleva además un temporizador de rescate. Un informe que depende de un script
   para verse es un informe que un día no se ve. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); }
  .js .reveal[data-visible] {
    opacity: 1;
    transform: none;
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-feed);
  }
}

@media (max-width: 720px) {
  .bar { grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr) auto; }
  .bar__tone { display: none; }
  .story { grid-template-columns: 1fr; gap: 2px; }
  .story__n, .story__when { min-width: 0; }
  .callout__go { margin-left: 0; }
  .panel { padding-top: var(--lg); }
}