/* Reports v3 — el reporte v1 completo, vestido con el lenguaje de la v2.0
   (commit 848890f). Cargado DESPUÉS de reports.css, solo en /reports-v3/
   (body.r3-host). Cuatro trabajos:

   1 · TOKENS v2.0 sobre el chrome — neutrales oklch, UN acento naranja
       (#EA580C claro / oklch(0.7 0.17 50) oscuro), bordes neutros, tarjetas
       limpias. Los gráficos consumen estas mismas variables, así que el
       naranja del chrome se atenúa por variables — jamás se toca un SVG
       interno ni un valor. Verde/rojo semánticos (deltas) se conservan.
   2 · ELIMINACIÓN (no plegado): narrativas/highlights de Resty, chips de
       anomalías del arranque de sección, títulos-oración gigantes,
       descripciones largas (etiquetadas .r3-kill por v3.js).
       EXCEPCIÓN (Agustín, ronda 5): el AI Review Summary de Reputation se
       queda visible — solo se recalibra a tipografía calma.
   3 · HEADERS v2.0: número de sección chico en acento + el nombre corto
       (eyebrow) como título tipográfico neutro.
   4 · Densidad calma + portada compacta + secciones colapsables (afford-
       ance, default abierto — nada arranca escondido).

   Print = SIEMPRE el reporte v1 completo (misma doctrina que v2). */

/* ══ 1 · Tokens — lenguaje v2.0 ══════════════════════════════════════ */

/* Light (default). Neutrales fríos suaves; un solo acento. */
.r3-host .rai-reports {
  --surface-page:   oklch(0.985 0.003 250);
  --surface-rail:   oklch(0.995 0.002 250);
  --surface-1:      oklch(0.995 0.002 250);
  --surface-2:      oklch(0.965 0.004 250);
  --surface-3:      oklch(0.945 0.004 250);
  --surface-hover:  oklch(0.955 0.004 250);

  --fg-1:      oklch(0.145 0 0);
  --fg-2:      oklch(0.38 0 0);
  --fg-3:      oklch(0.556 0 0);
  --fg-muted:  oklch(0.62 0 0);

  --border-subtle:  oklch(0 0 0 / 0.065);
  --border-default: oklch(0 0 0 / 0.09);
  --border-strong:  oklch(0 0 0 / 0.14);
  --divider:        oklch(0 0 0 / 0.065);

  --brand:         #EA580C;
  --brand-hover:   #C2410C;
  --brand-press:   #9A3412;
  --brand-soft:    rgba(234, 88, 12, 0.09);
  --brand-soft-hi: rgba(234, 88, 12, 0.16);

  --chart-grid: oklch(0.92 0.003 250);
  --chart-axis: oklch(0.556 0 0);

  --page-gradient: none;
}

/* Dark — v2.0 real dark: casi negro neutro, cards un paso más claras. */
[data-theme="dark"] .r3-host .rai-reports {
  --surface-page:   oklch(0.145 0 0);
  --surface-rail:   oklch(0.185 0 0);
  --surface-1:      oklch(0.205 0 0);
  --surface-2:      oklch(0.245 0 0);
  --surface-3:      oklch(0.269 0 0);
  --surface-hover:  oklch(0.30 0 0);

  --fg-1:      oklch(0.985 0 0);
  --fg-2:      oklch(0.83 0 0);
  --fg-3:      oklch(0.708 0 0);
  --fg-muted:  oklch(0.60 0 0);

  --border-subtle:  oklch(1 0 0 / 0.07);
  --border-default: oklch(1 0 0 / 0.10);
  --border-strong:  oklch(1 0 0 / 0.16);
  --divider:        oklch(1 0 0 / 0.07);

  /* Acento atenuado para fondo oscuro (v2.0): menos chroma que #EA580C. */
  --brand:         oklch(0.70 0.17 50);
  --brand-hover:   oklch(0.75 0.17 50);
  --brand-press:   oklch(0.64 0.17 50);
  --brand-soft:    oklch(0.70 0.17 50 / 0.12);
  --brand-soft-hi: oklch(0.70 0.17 50 / 0.20);

  --chart-grid: oklch(1 0 0 / 0.07);
  --chart-axis: oklch(0.708 0 0);

  --page-gradient: none;
}

/* ══ 2 · Eliminaciones (pantalla; print restaura todo) ═══════════════ */
@media screen {
  /* ══ 17 · El período no se repite en cada título (2026-08-06) ════════
     v3.js#processSectionPeriod envuelve el " · July 2026" del eyebrow en este
     span en vez de borrarlo: en pantalla sobra —el chrome pegajoso muestra el
     rango mientras se scrollea— pero en el PDF no hay header fijo, así que
     ahí tiene que seguir apareciendo. Por eso se oculta SÓLO en @media screen
     y nunca se toca en print. */
  .r3-host .rai-reports .r3-period-tail,
  /* Narrativa + highlights del Executive Summary (Resty). */
  .r3-host .rai-reports .exec-narrative,
  .r3-host .rai-reports .exec-actions,
  /* Tagline de sección (caja naranja con la marca de Resty). */
  .r3-host .rai-reports .rsh-tag,
  /* Chips de anomalías del arranque de cada sección. */
  .r3-host .rai-reports .rsh-anom,
  /* Título-oración gigante: el header v3 usa el eyebrow como título. */
  .r3-host .rai-reports .rsh-title,
  /* Descripciones largas / prosa metodológica, etiquetadas por v3.js. */
  .r3-host .r3-kill { display: none !important; }
}

/* ══ 3 · Header de sección — lenguaje v2.0 ═══════════════════════════ */
/* v1: número 60px naranja + eyebrow uppercase + título-oración 36px.
   v3: fila tipográfica calma — número chico en acento, nombre corto neutro. */
/* margin-bottom: el título y la primera fila de tarjetas estaban a 4px — se
   leían como un solo bloque pegado (Agustín, 2026-08-06). 18px es el mismo
   aire que ya separa las tarjetas entre sí, así que el header queda como un
   nivel aparte sin agrandar la sección. */
.r3-host .rai-reports .rsh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.r3-host .rai-reports .rsh-left { flex: none; }
.r3-host .rai-reports .rsh-left .rsh-num {
  font: 700 13px var(--font-mono);
  color: var(--brand);
  letter-spacing: 0.04em;
  line-height: 1;
}
.r3-host .rai-reports .rsh-right { padding-top: 0; flex: 1 1 auto; min-width: 0; }
.r3-host .rai-reports .rsh-eyebrow {
  font: 700 19px var(--font-ui);
  text-transform: none;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin-bottom: 0;
  line-height: 1.25;
}
.r3-host .rai-reports .rsh-eyebrow em { color: var(--brand); font-style: normal; }

/* ══ 4 · Densidad calma (chrome, nunca el interior de un gráfico) ════ */
@media screen {
  .r3-host .rai-reports .rsec { padding: 24px 22px 20px; border-bottom: 1px solid var(--divider); }
  .r3-host .rai-reports .rsec .g-12 { gap: 10px; }
  .r3-host .rai-reports .rsec > .card { margin-top: 10px; }
  .r3-host .rai-reports .rsec > .metric-row { margin-top: 10px; }
  .r3-host .rai-reports .rsec > .g-12 { margin-top: 10px; }
  .r3-host .rai-reports .rsec .card .card-head { padding: 10px 14px; }
  .r3-host .rai-reports .rsec .card .card-body { padding: 14px; }
  .r3-host .rai-reports .rsec table.table tbody td { padding-top: 7px; padding-bottom: 7px; }
  .r3-host .rai-reports .rsec table.table thead th { padding-top: 7px; padding-bottom: 7px; }
  .r3-host .rai-reports .top-post { padding-top: 8px; padding-bottom: 8px; }
  .r3-host .rai-reports .seo-sub-divider { margin: 14px 0 8px; padding-top: 10px; }
  .r3-host .rai-reports .rfooter { padding: 18px 0 14px; margin-top: 10px; }
  .r3-host .rai-reports .live-strip-inner { padding: 5px 28px; }

  /* Números héroe: grandes pero no monumentales (92px → 56px). */
  .r3-host .rai-reports .hero-metric.xl .hm-value { font-size: 56px; }
  .r3-host .rai-reports .hero-metric.lg .hm-value { font-size: 44px; }
  .r3-host .rai-reports .hero-metric.md .hm-value { font-size: 36px; }

  /* Secciones vacías (strips "no data"): banda compacta. */
  .r3-host .rsec-wrap.r3-slim .rsec { padding: 14px 22px; }
}

/* Jerarquía v2.0: el número grande es neutro; el color señala, no decora.
   Solo se neutralizan los valores pintados con --brand INLINE (decorativos) —
   un valor con color semántico (verde/rojo/ámbar) se conserva tal cual. */
.r3-host .rai-reports .hm-value[style*="--brand"],
.r3-host .rai-reports .mr-val[style*="--brand"] { color: var(--fg-1) !important; }

/* ══ 5 · Notas de honestidad — visibles pero calmas ══════════════════ */
/* Los data-notices / callouts (§3: "as of", fuentes, ventanas parciales) NO
   se eliminan — son honestidad, no ruido. Se recalibran a chico y neutro. */
.r3-host .rai-reports .data-notice,
.r3-host .rai-reports .callout.callout-info {
  background: transparent;
  border: none;
  border-left: 2px solid var(--border-strong);
  border-radius: 0;
  padding: 2px 0 2px 10px;
  font-size: 11.5px;
  color: var(--fg-3);
}
.r3-host .rai-reports .rfooter-fineprint { font-size: 10.5px; color: var(--fg-muted); }

/* Calificadores de dato conservados por v3.js (fechas de medición, ventanas
   L3M, "modeled", team-reported): visibles pero en letra de nota. */
.r3-host .r3-fine {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--fg-muted) !important;
}

/* Nota de oportunidad (nudge): prosa de sugerencia — fuera en pantalla. */
@media screen {
  .r3-host .rai-reports .opp-note { display: none !important; }
}

/* ══ 6 · AI Review Summary (Reputation) — SE QUEDA, en tipografía calma ══ */
.r3-host .rai-reports .ai-summary-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
}
.r3-host .rai-reports .ai-summary-eyebrow {
  color: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.r3-host .rai-reports .ai-summary-title { color: var(--fg-1); }
.r3-host .rai-reports .ai-sum-h { color: var(--fg-2); }
.r3-host .rai-reports .ai-sum-lead { color: var(--fg-2); }

/* ══ 7 · Portada compacta (misma mecánica que v2; "Details" restaura) ══ */
@media screen {
  /* Aire respecto del chrome pegajoso (nav de secciones): 16px se leía
     pegado al header. */
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) {
    padding: 30px 0 22px;
  }
  /* ANTI-DUPLICADO (2026-08-06). El header pegajoso ya muestra el logo, el
     nombre del cliente y su categoría, y el strip de abajo da el rango exacto
     del período. La portada compacta los repetía TODOS: logo otra vez,
     "Monthly Performance Report · Eclipse di Luna" otra vez, "Jul 2026" otra
     vez, y "Period · July 2026" en la meta — el período llegaba a cuatro
     apariciones en la misma pantalla.
     Queda SOLO lo que el header no dice: para quién, por quién y alcance.
     Nada se pierde: "Details" restaura la portada v1 completa y el PDF la
     imprime entera siempre (bloque @media print). */
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-brand,
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-eyebrow,
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-title,
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-tagline,
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-stack,
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-footer,
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rc-s,
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-meta-col.r3-dup {
    display: none;
  }
  /* Alineación con las tarjetas de abajo: .rep-doc ya da el ancho (1400px) y
     el padding lateral (28px). El max-width:1100px centrado que trae v1 dejaba
     la portada metida hacia adentro respecto de las secciones. */
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-grid {
    display: block;
    max-width: none;
    padding: 0;
  }
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 30px;
    line-height: 1.5;
    margin-top: 0;
    padding: 0;
    border-bottom: 0;
  }
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-meta-col {
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
  }
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rc-k { font-size: 9px; }
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rc-v {
    font-size: 12.5px;
    margin-top: 0;
  }
}
/* El botón "Details" y su estado .r3-cover-open se retiraron el 2026-08-06
   (Agustín: "no hace falta"). La portada compacta es la única en pantalla. */

/* ══ 8 · Secciones colapsables (affordance; default abierto) ═════════ */
.r3-host .r3-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  align-self: center;
  flex: none;
  transition: color 0.15s;
}
.r3-host .r3-caret:hover { color: var(--fg-1); }
.r3-host .r3-caret svg { transition: transform 0.18s ease; }
.r3-host .rsec-wrap.r3-collapsed .r3-caret svg { transform: rotate(-90deg); }
.r3-host .rai-reports .rsh.r3-rsh { cursor: pointer; }

@media screen {
  .r3-host .rsec-wrap.r3-collapsed .rsec > *:not(.rsh) { display: none !important; }
  .r3-host .rsec-wrap.r3-collapsed .rsec { padding-bottom: 18px; }
  .r3-host .rsec-wrap.r3-collapsed .rsh { margin-bottom: 0; opacity: 0.75; }
}

/* Collapse all / Expand all (live-strip, derecha). */
.r3-host .r3-tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.r3-host .r3-tool {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg-3);
  font: 600 11px var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
}
.r3-host .r3-tool:hover { color: var(--fg-1); }
.r3-host .r3-tool-sep { color: var(--fg-3); opacity: 0.5; }

/* ══ 8b · El chrome comparte la CAJA del documento (2026-08-06) ══════════
   .rep-doc se centra con max-width:1400px + 28px de padding, pero las tres
   barras pegajosas (toolbar del cliente, strip del período, navbar de
   secciones) van a ancho completo con 28px fijos. Debajo de 1400px de
   ventana coinciden — arriba, el header queda pegado a los bordes mientras
   el contenido se centra, y todo se lee desalineado (lo que Agustín marcó).

   El fondo sigue a sangre (es una barra pegajosa); lo que se alinea es el
   CONTENIDO: mismo gutter calculado que .rep-doc. El toolbar reserva 68px
   a la derecha para el toggle de tema (fixed), así que su gutter derecho
   arranca de 68 en vez de 28, y el toggle se mueve al mismo borde. */
.r3-host .rai-reports .rep-toolbar,
.r3-host .rai-reports .rep-secnav-scroll,
.r3-host .rai-reports .live-strip-inner {
  padding-left: max(28px, calc((100% - 1400px) / 2 + 28px));
  padding-right: max(28px, calc((100% - 1400px) / 2 + 28px));
}
/* 4 clases a propósito: el <style> del propio host define
   `.rs-main .rai-reports .rep-toolbar { padding-right: 68px }` y va DESPUÉS
   de este archivo en el <head>, así que con 3 clases empatábamos y ganaba él. */
.r3-host .rs-main .rai-reports .rep-toolbar {
  padding-right: max(68px, calc((100% - 1400px) / 2 + 68px));
}
.r3-host .rs-theme-toggle {
  right: max(24px, calc((100vw - 1400px) / 2 + 28px));
}

/* ══ 8c · UNA sola línea entre el header y el reporte (2026-08-06) ═══════
   Había CINCO hairlines apiladas en los primeros 190px: borde del toolbar
   (y57), del strip de período (y82), del navbar (y125), borde superior de
   la meta (y151) y borde inferior de la portada (y189). Agustín: "demasiadas
   líneas".

   Las tres barras pegajosas son UNA unidad visual, no tres: sus bordes
   internos las subdividen sin motivo. Queda sólo el del navbar — el último
   del bloque fijo, que es el que de verdad separa el chrome del documento
   cuando la página scrollea. Y la fila "Prepared for" no necesita ir
   encajonada entre dos líneas: la separa el aire. */
.r3-host .rai-reports .rep-toolbar,
.r3-host .rai-reports .rep-live-strip {
  border-bottom-color: transparent;
}
.r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open),
.r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-meta {
  border-top: 0;
  border-bottom: 0;
}

/* ══ 9 · Chrome pegajoso — backdrop neutro (v1 lo trae warm hardcodeado) ══ */
/* reports.css pinta .topbar y .rep-toolbar con rgba(20,17,13,·) (ink cálido)
   en dark y rgba(255,252,247,·) (crema) en light. En v3 el chrome comparte la
   superficie de la página — neutro, translúcido, mismo mecanismo que v2.0. */
.r3-host .rai-reports .topbar,
.r3-host .rai-reports .rep-toolbar {
  background: color-mix(in oklch, var(--surface-page) 90%, transparent);
}

/* ══ 10 · Navbar de pills — lenguaje v2.0 ════════════════════════════ */
.r3-host .rai-reports .rep-secnav-pill {
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-3);
  border-radius: 999px;
  font-weight: 600;
}
.r3-host .rai-reports .rep-secnav-pill:hover { color: var(--fg-1); background: var(--surface-2); }
.r3-host .rai-reports .rep-secnav-pill.on {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: transparent;
}
.r3-host .rai-reports .rep-secnav-pill.on .rep-secnav-num { color: var(--brand); opacity: 0.75; }

/* ══ 11 · Franja de servicios (2026-08-06) ═══════════════════════════ */
/* Debajo de la portada: el programa completo del cliente, prendido/apagado.
   Prendido = contraste normal + dot verde semántico; apagado = atenuado sin
   dot — "desactivado", nunca error. El acento naranja no participa. */
/* Alineación: la franja es hija de .rep-doc, que YA aporta el ancho máximo
   (1400px) y el padding lateral (28px) de las secciones. Cualquier max-width
   o padding propio la desalinea de las tarjetas de abajo — por eso ambos van
   en cero (bug visual 2026-08-06: la franja arrancaba 28px más adentro). */
.r3-host .r3-services {
  max-width: none;
  margin: 0 0 22px;
  padding: 0;
}
.r3-host .r3-svc-eyebrow {
  display: block;
  font: 600 10.5px/1.5 var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 11px;
}
/* Una sola línea en desktop: 12 chips entran en los ~1344px de contenido con
   esta densidad. En pantallas más angostas envuelve (flex-wrap), que es el
   comportamiento correcto — nunca scroll horizontal de página. */
.r3-host .r3-svc-row { display: flex; flex-wrap: wrap; gap: 4px; }
.r3-host .r3-svc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--fg-2);
  font: 500 10.5px var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.r3-host button.r3-svc { cursor: pointer; transition: background 0.15s, color 0.15s; }
.r3-host button.r3-svc:hover { background: var(--surface-2); color: var(--fg-1); }
.r3-host .r3-svc-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: oklch(0.63 0.17 150);
  flex: 0 0 auto;
}
.r3-host .r3-svc-off {
  opacity: 0.42;
  border-style: dashed;
}
.r3-host .r3-svc-off .r3-svc-dot {
  background: transparent;
  border: 1px solid var(--fg-muted);
  width: 4px; height: 4px;
}
/* IDLE — contratado + fuente conectada + ventana sin actividad (2026-08-10).
   Deliberadamente NO se parece al chip apagado: conserva opacidad 1, borde
   sólido y el verde del punto, porque el servicio está contratado igual que
   cualquier otro prendido. La única diferencia es el ANILLO (punto hueco en
   vez de lleno = "sin actividad esta ventana") y la nota al lado. Si algún
   día alguien lo atenúa como al OFF, vuelve el bug que este estado arregla. */
.r3-host .r3-svc-idle .r3-svc-dot {
  background: transparent;
  border: 1.5px solid oklch(0.63 0.17 150);
  width: 6px; height: 6px;
}
.r3-host .r3-svc-note {
  color: var(--fg-muted);
  font-weight: 500;
}
.r3-host .r3-svc-note::before { content: '· '; }

/* ══ 12 · SEO — cards fuera del template (Website Speed, Who else ranks) ══ */
/* display:none SIN excepción de print: se eliminan del template, no se
   pliegan (a diferencia de .r3-kill, que el PDF restaura). */
.r3-host .r3-gone { display: none !important; }

/* ══ 13 · Top keywords — columnas + densidad (2026-08-06) ════════════ */
/* Los dos bloques (winning / working on) lado a lado; tablas compactas.
   Mismos nodos y números de v1 — solo cambia el envase. */
.r3-host .r3-kw-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 26px;
  align-items: start;
}
.r3-host .r3-kw-col { min-width: 0; }
.r3-host .r3-kw table.kw-table { font-size: 12.5px; table-layout: fixed; width: 100%; }
.r3-host .r3-kw table.kw-table th,
.r3-host .r3-kw table.kw-table td { padding: 6px 10px; line-height: 1.35; }
/* La keyword es la protagonista: se lleva el ancho; las métricas son cortas. */
.r3-host .r3-kw table.kw-table th:first-child { width: 42%; }
.r3-host .r3-kw table.kw-table td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r3-host .r3-kw .kw-scoreline { margin-bottom: 10px; }

/* Filas capadas tras "View all N". */
.r3-host tr.r3-kw-hidden { display: none; }
.r3-host .r3-kw-more { display: block; margin: 8px 0 2px; }

/* "Where you already rank" — resumen de una línea, cuerpo tras View all. */
.r3-host .r3-kw-already .card-head { display: flex; align-items: baseline; gap: 14px; }
.r3-host .r3-kw-already .r3-kw-alltool { margin-left: auto; flex: 0 0 auto; }
.r3-host .r3-kw-already:not(.r3-open) > .card-body,
.r3-host .r3-kw-already:not(.r3-open) > :not(.card-head) { display: none; }

/* ══ 14 · Reputation — la tira de bad-reviews con contexto (2026-08-06) ══ */
/* La métrica de "bad reviews per $100K" estaba sola. Ahora comparte fila con
   rating promedio, total de reseñas y response rate — los tres LEÍDOS del
   Executive Summary (§3: ningún número nuevo se calcula acá). */
.r3-host .r3-rep-kpis {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 18px;
}
.r3-host .r3-rep-kpi {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.r3-host .r3-rk-val {
  font: 700 26px/1.1 var(--font-ui, 'Inter', sans-serif);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.r3-host .r3-rk-lbl {
  margin-top: 5px;
  font: 600 11px/1.35 var(--font-ui, 'Inter', sans-serif);
  color: var(--fg-2);
}
.r3-host .r3-rk-sub {
  margin-top: 2px;
  font: 400 10.5px/1.35 var(--font-ui, 'Inter', sans-serif);
  color: var(--fg-muted);
}
/* Delta vs período anterior (2026-08-06). El contenido lo emite
   reportSectionsE.js vía D.deltaCell, así que hereda .mr-delta / .mr-sub y sus
   colores; acá sólo se le da el aire dentro de la tarjeta. */
.r3-host .r3-rk-d { margin-top: 6px; }
.r3-host .r3-rk-d:empty { display: none; }
/* La tira original conserva su diseño; solo deja de ocupar el ancho entero. */
.r3-host .r3-rep-kpis .rep-bad100k-strip { margin: 0; height: 100%; }

/* ══ 16 · El chip "Responded" — una línea y con peso (2026-08-06) ════ */
/* `.bad-review-row` es un grid 120/768/180 y el chip "Responded · guest ·
   2026-07-31" no entraba en 180px: partía en dos renglones y desalineaba la
   fila. La columna pasa a auto (se toma lo que el chip más largo necesite) y
   el texto va nowrap; el cuerpo de la reseña toma 1fr para ceder ese ancho
   sin desbordar la tarjeta.
   El chip ya no lleva el "guest" (ver reportSectionsE.js) — al quedar en una
   sola línea corta perdía presencia contra el resto de la fila, así que sube
   de los 11px/3-9 del .badge base a 12.5px/5-12. Es el ÚNICO badge que se
   agranda: el override está scopeado a .brr-side. */
.r3-host .rai-reports .bad-review-row {
  grid-template-columns: 120px minmax(0, 1fr) auto;
}
.r3-host .rai-reports .brr-side .badge {
  white-space: nowrap;
  font-size: 12.5px;
  padding: 5px 12px;
}

/* ══ 15 · Footer — sin la columna fantasma (2026-08-06) ══════════════ */
/* .rfooter-grid declara CUATRO columnas fijas (384/256/256/256) y el reporte
   sólo llena tres, así que el bloque quedaba escorado con un hueco muerto a
   la derecha. auto-fit reparte el ancho real entre las columnas que existan
   —tres hoy, otra cantidad mañana— y el footer cierra alineado con el resto
   del documento. */
.r3-host .rai-reports .rfooter-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ══ Mobile ══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .r3-host .r3-rep-kpis { grid-template-columns: 1fr 1fr; }
  .r3-host .rai-reports .rsh-eyebrow { font-size: 17px; }
  .r3-host .rai-reports .rcover.r3-cover:not(.r3-cover-open) .rcover-meta { gap: 4px 18px; }
  .r3-host .rai-reports .hero-metric.xl .hm-value { font-size: 44px; }
  .r3-host .r3-kw-cols { grid-template-columns: 1fr; }
  .r3-host .r3-services { margin-top: 8px; }
}

/* ══ Print: el PDF es SIEMPRE el reporte v1 completo ═════════════════ */
@media print {
  .r3-host .rai-reports .exec-narrative,
  .r3-host .rai-reports .exec-actions,
  .r3-host .rai-reports .rsh-tag,
  .r3-host .rai-reports .rsh-anom,
  /* opp-note SÍ vuelve en papel: es la nota de oportunidad del cliente, no
     prosa metodológica. rsh-title y r3-kill quedan ocultos (ver arriba). */
  .r3-host .rai-reports .opp-note { display: revert !important; }
  .r3-host .r3-caret,
  .r3-host .r3-tools,
  .r3-host .r3-kw-more,
  .r3-host .r3-kw-alltool { display: none !important; }
  /* La columna Period vuelve en papel: el PDF no tiene header pegajoso que
     la cubra, y una portada sin período no se sostiene sola. */
  .r3-host .rai-reports .rcover-meta-col.r3-dup { display: revert !important; }
  /* Keywords: en papel vuelve el layout apilado y TODO visible. */
  .r3-host .r3-kw-cols { display: block !important; }
  .r3-host tr.r3-kw-hidden { display: table-row !important; }
  .r3-host .r3-kw-already:not(.r3-open) > .card-body,
  .r3-host .r3-kw-already:not(.r3-open) > :not(.card-head) { display: revert !important; }
  /* La franja de servicios SÍ va al PDF (información del cliente).
     .r3-gone NO vuelve: Website Speed y Who else ranks salen del template. */
}

/* ══ 18 · PRINT DENSO (2026-08-07, pedido de Agustín) ════════════════════
   El PDF de julio de Eclipse salió en 22 páginas cuando el contenido real
   son ~12. La causa medida: TODA la densidad de la v3 vive en @media screen
   (bloque 4), así que en papel el reporte volvía al espaciado airoso de la
   v1 — números héroe de 92px, padding de sección grande, filas de tabla
   anchas, tarjetas con aire de pantalla.

   Este bloque le da al papel la MISMA densidad que la pantalla, y aprieta un
   paso más lo que en papel no necesita respirar (no hay hover ni scroll).
   Lo que NO se toca: qué contenido aparece. La prosa, las notas de
   honestidad, la portada v1 completa y el período por sección siguen en el
   PDF — se compacta el CONTINENTE, nunca se esconde información (§3). */
@media print {
  /* El papel oculta la MISMA prosa que la pantalla (Agustín, 2026-08-07 —
     pidió las 2 páginas extra sabiendo el costo). Medido: 19 → 17 páginas.
     Lo que se va es exactamente lo que la v3 ya clasificó como ruido en
     pantalla, así que el PDF deja de decir cosas que el reporte en vivo no
     dice — pasa a ser el MISMO documento en papel.
     Lo que NO se va, y hay que mantener así: las notas de honestidad
     (.data-notice, .r3-fine, procedencias, "as of"), el AI Review Summary,
     la portada v1 completa con su período, y el período por sección
     (.r3-period-tail, que en papel es la única forma de saber qué ventana se
     está mirando porque no hay header pegajoso). */
  .r3-host .rai-reports .exec-narrative,
  .r3-host .rai-reports .exec-actions,
  .r3-host .rai-reports .rsh-tag,
  .r3-host .rai-reports .rsh-anom,
  .r3-host .rai-reports .rsh-title,
  .r3-host .r3-kill { display: none !important; }

  /* Densidad de sección + tarjetas (espejo del bloque 4, un paso más corto). */
  .r3-host .rai-reports .rsec { padding: 16px 20px 14px; }
  .r3-host .rai-reports .rsec .g-12 { gap: 8px; }
  .r3-host .rai-reports .rsec > .card,
  .r3-host .rai-reports .rsec > .metric-row,
  .r3-host .rai-reports .rsec > .g-12 { margin-top: 8px; }
  .r3-host .rai-reports .rsec .card .card-head { padding: 8px 12px; }
  .r3-host .rai-reports .rsec .card .card-body { padding: 10px 12px; }
  .r3-host .rai-reports .rsec table.table tbody td,
  .r3-host .rai-reports .rsec table.table thead th { padding-top: 5px; padding-bottom: 5px; }
  .r3-host .rai-reports .top-post { padding-top: 6px; padding-bottom: 6px; }
  .r3-host .rai-reports .seo-sub-divider { margin: 10px 0 6px; padding-top: 8px; }
  .r3-host .rai-reports .rfooter { padding: 12px 0 10px; margin-top: 8px; }

  /* Números héroe: en papel 92px es un desperdicio de media página. */
  .r3-host .rai-reports .hero-metric.xl .hm-value { font-size: 40px; }
  .r3-host .rai-reports .hero-metric.lg .hm-value { font-size: 32px; }
  .r3-host .rai-reports .hero-metric.md .hm-value { font-size: 27px; }
  .r3-host .rai-reports .rsh-left .rsh-num { font-size: 30px; }
  .r3-host .rai-reports .rsh-title { font-size: 22px; margin-bottom: 4px; }
  .r3-host .rai-reports .rcover-title { font-size: 64px; }
  .r3-host .rai-reports .rcover { padding: 28px 0 22px; }

  /* Gráficos: el alto de pantalla está pensado para un viewport, no para una
     hoja. Se recortan ~30% sin tocar el SVG interno (el viewBox reescala). */
  .r3-host .rai-reports .chart-wrap,
  .r3-host .rai-reports .chart-box,
  .r3-host .rai-reports svg.chart { max-height: 190px; }
  .r3-host .rai-reports .s5v-barwrap { height: 118px; }
  .r3-host .rai-reports .lf-grid-map { max-height: 330px; }

  /* Los KPI van de 2×2 a 4 en línea: la fila entra en el ancho de la hoja y
     se ahorra media página por sección. */
  .r3-host .rai-reports .metric-row,
  .r3-host .rai-reports .r3-rep-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .r3-host .rai-reports .metric-row-kpi4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* Prosa: se CONSERVA entera (es informacion) pero en papel no necesita el
     interlineado de lectura en pantalla. La narrativa del Exec y los titulos
     de seccion siguen ahi, mas apretados. */
  .r3-host .rai-reports .exec-narrative { font-size: 12px; line-height: 1.45; margin: 6px 0; }
  .r3-host .rai-reports .exec-actions { margin: 6px 0; gap: 6px; }
  .r3-host .rai-reports .rsh-tag { padding: 6px 10px; margin: 4px 0; font-size: 11px; }
  .r3-host .rai-reports .r3-kill { font-size: 10.5px; line-height: 1.4; }
  .r3-host .rai-reports .data-notice { padding: 7px 10px; font-size: 10px; line-height: 1.4; }
  .r3-host .rai-reports .rsh { margin-bottom: 8px; }
  .r3-host .rai-reports .rsh-anom { margin-top: 4px; gap: 4px; }

  /* Portada: era la pagina con mas aire (31% vacio). El hero baja y la meta
     se reparte en cuatro columnas en vez de dos filas. */
  .r3-host .rai-reports .rcover-meta { gap: 12px 20px; margin-top: 14px; }
  .r3-host .rai-reports .rcover-brand { width: 56px !important; height: 56px !important; margin-bottom: 10px !important; }
  .r3-host .rai-reports .rcover-tagline { font-size: 13px; margin: 6px 0; }

  /* Tablas y listas: el alto de fila de pantalla incluye area de click. */
  .r3-host .rai-reports .rep-star-row { padding: 3px 0 !important; }
  .r3-host .rai-reports .s5-row { gap: 10px; }
  .r3-host .rai-reports .brr-extended { padding-top: 9px; padding-bottom: 9px; }
  .r3-host .rai-reports .tips-bar-row { margin: 4px 0; }
}