/* ═══════════════════════════════════════════════════════════════════════════
   Reporting — CSS de pantalla
   La otra pantalla del producto: lo que la sala ya sabe, contado para quien
   lleva el estudio. Mismas reglas de la casa que screen.css: nada de hex ni
   px sueltos, todo por token, y ninguna clase pública de Embassy pisada salvo
   con su @ds-gap declarado. Los gráficos se componen con tokens porque Embassy
   no tiene gráfico de barras (@ds-gap embassy#22, declarado abajo).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Navegación entre las dos pantallas (vive en el topbar) ────────────── */
.rp-nav { display: flex; align-items: center; gap: var(--space-1); }
.rp-nav-l {
  display: inline-flex; align-items: center; gap: var(--space-1-5); height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-full); text-decoration: none;
  font-size: var(--font-size-body-md); font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.rp-nav-l:hover { background: var(--color-surface-container-high); color: var(--text-primary); }
.rp-nav-l:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rp-nav-l.is-on { background: var(--color-secondary-container); color: var(--color-on-secondary-container); font-weight: var(--font-weight-bold); }

.rp-nav-l { white-space: nowrap; }
.rp-nav-l svg { flex: none; }
/* En el teléfono el topbar no tiene lugar para el rastro entero y las dos
   pantallas: queda la sede, y la navegación dice dónde se está. */
@media (max-width: 768px) {
  .ck-crumbs .breadcrumb-separator, .ck-crumbs .breadcrumb-page { display: none; }
  .ck-crumbs { min-width: 0; }
  .ck-crumbs .breadcrumb-link { white-space: nowrap; }
}

/* ── Estructura ────────────────────────────────────────────────────────── */
.rp-main { padding: var(--space-5) var(--space-6) var(--space-10); max-width: 1320px; margin-inline: auto; min-width: 0; }
.rp-head { align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.rp-head-text { min-width: 0; flex: 1 1 320px; }
.rp-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2-5); }
.rp-today { vertical-align: middle; }
.rp-sub { margin-top: var(--space-1-5); }
.rp-progress { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Un solo control del período, como en el riel: la vista y la fecha. */
.rp-controls { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.rp-range { flex: none; }
.rp-range .seg-btn { min-width: 64px; }
.rp-datebar { width: 240px; }
.rp-dlabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-dpanel { z-index: 20; margin-top: var(--space-1); right: 0; left: auto; }

/* ── El dato que abre ──────────────────────────────────────────────────── */
.rp-body { display: flex; flex-direction: column; gap: var(--space-5); }

.rp-lead {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.rp-hero { display: flex; flex-direction: column; min-width: 0; }
.rp-hero-l { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-muted); margin: 0; }
/* El número grande: mismo sans, figuras proporcionales. Es el único de la
   pantalla con este tamaño. */
.rp-hero-v {
  margin: var(--space-1) 0 0; font-size: clamp(48px, 5.4vw, 72px); line-height: 1;
  font-weight: var(--font-weight-extrabold); letter-spacing: -0.03em; color: var(--text-primary);
}
.rp-hero-sub { margin: var(--space-2-5) 0 0; font-size: var(--font-size-body-md); color: var(--text-secondary); }
.rp-hero-sub strong { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.rp-hero-cmp { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
.rp-hero-vs { font-size: var(--font-size-body-sm); color: var(--text-muted); }
.rp-hero-ahead { margin: auto 0 0; padding-top: var(--space-3); font-size: var(--font-size-body-sm); color: var(--text-muted); }
.rp-lead-chart { min-width: 0; }

/* ── Los seis números ──────────────────────────────────────────────────── */
.rp-stats { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rp-stat-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.rp-stat .stat-change { margin-top: 0; }
.rp-stat-note { font-size: var(--font-size-body-sm); color: var(--text-secondary); }
.rp-stat-label { display: flex; align-items: center; gap: var(--space-1-5); }

/* ── Color con significado ──────────────────────────────────────────────
   Íconos en línea antes del texto (COMPOSICION §5), teñidos con el rol que
   el dato ya tiene en la sala. Los mismos tokens que .ck-f-* en screen.css. */
.rp-ico { display: inline-flex; flex: none; color: var(--rp-tone, var(--text-secondary)); }
.rp-tone-success   { --rp-tone: var(--color-success-text); }
.rp-tone-warning   { --rp-tone: var(--color-warning-text); }
.rp-tone-info      { --rp-tone: var(--color-info-text); }
.rp-tone-tertiary  { --rp-tone: var(--color-tertiary); }
.rp-tone-secondary { --rp-tone: var(--color-secondary); }
.rp-tone-hito      { --rp-tone: var(--color-secondary-text); }
.rp-card-title { display: flex; align-items: center; gap: var(--space-2); }

/* ── La grilla de tarjetas ─────────────────────────────────────────────── */
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.rp-card { min-width: 0; display: flex; flex-direction: column; }
.rp-card--wide { grid-column: 1 / -1; }
/* En escritorio las tres tarjetas cortas —las que piden una decisión— van
   apiladas a la izquierda del gráfico alto de franjas, que las equilibra; las
   dos tablas van abajo a todo el ancho, donde entran todas sus columnas. Antes
   «At the door» quedaba sola con media fila vacía al lado y «By discipline»
   escondía dos columnas en media tarjeta. */
@media (min-width: 1024px) {
  .rp-grid {
    grid-template-areas: "full slots" "room slots" "flags slots" "disc disc" "inst inst";
  }
  .rp-a-full { grid-area: full; }
  .rp-a-room { grid-area: room; }
  .rp-a-flags { grid-area: flags; }
  .rp-a-slots { grid-area: slots; }
  .rp-a-disc { grid-area: disc; }
  .rp-a-inst { grid-area: inst; }
}
.rp-more { align-self: flex-start; margin-top: var(--space-2); }
.rp-card-body { flex: 1; min-width: 0; }
.rp-card .card-header { margin-bottom: var(--space-4); }
.rp-toggle { min-height: 28px; }
.rp-toggle, .rp-more { display: inline-flex; align-items: center; gap: var(--space-1-5); }

/* ── Gráficos: compuestos con tokens ────────────────────────────────────
   @ds-gap embassy#22 — Embassy trae paleta de series (--chart-1..5) y un
   contenedor de SVG, pero ningún gráfico de barras listo. Se compone con
   tokens: una sola tonalidad (la secundaria, que es --chart-1 del DS) para
   lo que entró, la misma al 14% para lo reservado, grilla en una línea de
   pelo del color del borde. Marcas de 24 como mucho, punta redondeada de 4
   y base cuadrada. */
.rp-fig { margin: 0; min-width: 0; }
.rp-cols-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); }
.rp-cols-y { position: relative; width: 28px; height: 180px; }
.rp-cols-tick {
  position: absolute; right: 0; transform: translateY(50%);
  font-size: var(--font-size-badge); color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1;
}
.rp-cols { position: relative; display: flex; align-items: flex-end; gap: var(--space-1-5); min-width: 0; }
.rp-cols-grid { position: absolute; inset: 0 0 auto 0; height: 180px; pointer-events: none; }
.rp-cols-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }
.rp-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
/* El área que se toca es la columna entera, no los píxeles pintados. */
.rp-hit { display: flex; width: 100%; min-width: 0; border-radius: var(--radius-sm); outline: none; }
.rp-hit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rp-col-bars { position: relative; display: block; width: 100%; height: 180px; }
.rp-col-booked, .rp-col-visits {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 24px); border-radius: 4px 4px 0 0;
  transition: height var(--duration-slow) var(--ease-enter), opacity var(--duration-fast) var(--ease-default);
}
.rp-col-booked { background: color-mix(in srgb, var(--color-secondary) 16%, var(--color-surface-container)); }
/* Lo que todavía no empezó se distingue de lo reservado en una clase que ya
   pasó: el mismo tono, en línea de puntos. */
.rp-col-booked--ahead { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--color-secondary) 45%, transparent); border-bottom: 0; }
.rp-col-visits { background: var(--color-secondary); }
.rp-hit:hover .rp-col-visits, .rp-hit:focus-visible .rp-col-visits { opacity: .82; }
.rp-col-val {
  position: absolute; left: 50%; transform: translate(-50%, -4px); margin-bottom: 2px;
  font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--text-primary);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
}
.rp-col-x {
  font-size: var(--font-size-badge); color: var(--text-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2;
}
.rp-col-x-short { display: none; }
.rp-col--now .rp-col-x { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.rp-col--minor .rp-col-x { visibility: hidden; }
/* Una sola entrada: las columnas crecen desde la base al aparecer. */
@starting-style {
  .rp-col-booked, .rp-col-visits { height: 0 !important; }
}

/* Tooltip: el de Embassy, con el valor adelante y la etiqueta atrás.
   Centrado sobre una columna del borde, el tooltip —invisible pero presente—
   asomaba del gráfico y le daba scroll lateral a la página entera en tablet y
   teléfono. En los extremos se ancla al borde de su columna.
   @ds-gap embassy#24 — tooltip-top no tiene variante alineada al inicio o al
   final (Radix: align="start" | "end"). */
.rp-col:nth-child(-n+5 of .rp-col) .rp-tip { left: 0; transform: translate(0, 4px); }
.rp-col:nth-child(-n+5 of .rp-col) .rp-hit:is(:hover, :focus-within) .rp-tip { transform: translate(0, 0); }
.rp-col:nth-last-child(-n+5 of .rp-col) .rp-tip { left: auto; right: 0; transform: translate(0, 4px); }
.rp-col:nth-last-child(-n+5 of .rp-col) .rp-hit:is(:hover, :focus-within) .rp-tip { transform: translate(0, 0); }
/* En el teléfono una columna mide diez píxeles y un tooltip, ciento setenta:
   ninguno entra centrado sobre la suya. Se ancla al gráfico entero, arriba y
   al centro, y dice de qué día habla. */
@media (max-width: 768px) {
  .rp-cols .rp-hit { position: static; }
  .rp-cols .rp-tip,
  .rp-col:nth-child(n of .rp-col) .rp-tip {
    left: 50%; right: auto; bottom: auto; top: calc(-1 * var(--space-6));
    transform: translate(-50%, 4px);
  }
  .rp-cols .rp-hit:is(:hover, :focus-within) .rp-tip,
  .rp-col:nth-child(n of .rp-col) .rp-hit:is(:hover, :focus-within) .rp-tip { transform: translate(-50%, 0); }
}
.rp-tip strong { font-weight: var(--font-weight-bold); }
.rp-tip-k { opacity: .8; }

.rp-legend { display: flex; gap: var(--space-4); margin: var(--space-3) 0 0 36px; font-size: var(--font-size-caption); color: var(--text-secondary); }
.rp-legend-i { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.rp-key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rp-key--visits { background: var(--color-secondary); }
.rp-key--booked { background: color-mix(in srgb, var(--color-secondary) 16%, var(--color-surface-container)); border: 1px solid color-mix(in srgb, var(--color-secondary) 30%, transparent); }

/* Barras horizontales */
.rp-bars { display: flex; flex-direction: column; gap: var(--space-2-5); }
.rp-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-3); }
.rp-bar-l { display: flex; flex-direction: column; min-width: 0; }
.rp-bar-label { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rp-bar-sub { font-size: var(--font-size-badge); color: var(--text-muted); }
.rp-bar-hit { align-items: center; height: 24px; }
.rp-bar-track { display: block; width: 100%; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface-container)); overflow: hidden; }
.rp-bar-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--color-secondary); transition: width var(--duration-slow) var(--ease-enter); }
.rp-hit:hover .rp-bar-fill, .rp-hit:focus-visible .rp-bar-fill { opacity: .82; }
.rp-bar-v { text-align: right; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
@starting-style {
  .rp-bar-fill { width: 0 !important; }
}
/* Tres tramos de ocupación: casi llena en verde, con lugar de sobra en
   ámbar, el resto en el azul de la serie. La pista toma el tono de su barra. */
.rp-band-high { --rp-band: var(--color-success); }
.rp-band-low  { --rp-band: var(--color-warning); }
.rp-bar .rp-bar-fill, .rp-meter .rp-meter-fill { background: var(--rp-band, var(--color-secondary)); }
.rp-bar .rp-bar-track { background: color-mix(in srgb, var(--rp-band, var(--color-secondary)) 12%, var(--color-surface-container)); }
.rp-legend--bands { margin: var(--space-4) 0 0; flex-wrap: wrap; }
.rp-key--high { background: var(--color-success); }
.rp-key--mid  { background: var(--color-secondary); }
.rp-key--low  { background: var(--color-warning); }

/* Medidor en celda */
.rp-meter { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 96px; }
.rp-meter-v { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.rp-meter-track { width: 56px; flex: none; }
.rp-meter-fill { display: block; height: 100%; }

/* Banderas */
.rp-flags { display: flex; flex-direction: column; gap: var(--space-3); }
.rp-flag { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(60px, 120px) 32px; align-items: center; gap: var(--space-3); }
.rp-flag-ico { width: 24px; height: 24px; }
.rp-flag-ico svg { width: 13px; height: 13px; }
.rp-flag-l { display: flex; flex-direction: column; min-width: 0; }
.rp-flag-label { font-size: var(--font-size-body-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.rp-flag-sub { font-size: var(--font-size-caption); color: var(--text-muted); }
.rp-flag-miss { color: var(--color-warning-text); font-weight: var(--font-weight-semibold); }
.rp-flag-track { display: block; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface-container)); overflow: hidden; }
.rp-flag .rp-flag-fill { background: var(--flag); }
.rp-flag .rp-flag-track { background: color-mix(in srgb, var(--flag) 14%, var(--color-surface-container)); }
.rp-flag-n { text-align: right; font-size: var(--font-size-body-md); font-weight: var(--font-weight-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Tablas */
.rp-table { border: 0; border-radius: 0; background: transparent; }
.rp-table .data-table td, .rp-table .data-table th { white-space: nowrap; }
.rp-table .data-table td:first-child, .rp-table .data-table th:first-child { padding-left: 0; }
.rp-table .data-table td:last-child, .rp-table .data-table th:last-child { padding-right: 0; }
.rp-person { display: inline-flex; align-items: center; gap: var(--space-2-5); }
.rp-av {
  width: 26px; height: 26px; display: grid; place-items: center; flex: none;
  border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--font-size-badge); font-weight: var(--font-weight-extrabold);
}
/* Un tono por instructora, de los contenedores de la paleta de series. */
.rp-av--1 { background: var(--color-secondary-container); color: var(--color-on-secondary-container); }
.rp-av--2 { background: var(--color-tertiary-container);  color: var(--color-on-tertiary-container); }
.rp-av--3 { background: var(--color-success-container);   color: var(--color-on-success-container); }
.rp-av--4 { background: var(--color-warning-container);   color: var(--color-on-warning-container); }
.rp-av--5 { background: var(--color-info-container);      color: var(--color-on-info-container); }

/* Las clases a mirar */
.rp-watch { gap: var(--space-1); }
.rp-watch-row { padding-inline: 0; }
.rp-watch-inst { color: var(--text-secondary); font-weight: var(--font-weight-regular); }
.rp-watch-end { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.rp-watch-fill { font-size: var(--font-size-heading-xs); font-weight: var(--font-weight-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.rp-watch-badge { margin-top: var(--space-1); }
.rp-a-full .rp-watch-fill { color: var(--color-success-text); }
.rp-a-room .rp-watch-fill { color: var(--color-warning-text); }
.rp-empty { margin: 0; font-size: var(--font-size-body-md); color: var(--text-muted); }

.rp-foot { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-2) 0 0; font-size: var(--font-size-body-sm); color: var(--text-muted); max-width: 80ch; }
.rp-foot-ico { flex: none; margin-top: 2px; color: var(--color-info-text); }
.rp-state { padding-block: var(--space-16); }

/* ── Teléfono y tablet vertical ────────────────────────────────────────── */
@media (max-width: 1023px) {
  .rp-main { padding: var(--space-4) var(--space-4) var(--space-8); }
  /* El titular ocupa su fila y los controles bajan a la siguiente. */
  .rp-head { flex-direction: column; align-items: flex-start; }
  /* En columna la base flex de 320 sería una altura: se apaga. */
  .rp-head-text { flex: none; width: 100%; }
  .rp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-lead { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
  .rp-hero-ahead { margin-top: var(--space-2); padding-top: 0; }
}
@media (max-width: 768px) {
  .rp-head { align-items: stretch; }
  .rp-controls { width: 100%; flex-wrap: wrap; }
  .rp-range { flex: 1 1 100%; }
  .rp-datebar { flex: 1 1 100%; width: auto; }
  .rp-dpanel { left: 0; right: auto; }
  .rp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .rp-stat { padding: var(--space-3-5); }
  .rp-stat .stat-value { font-size: var(--font-size-heading-xl); }
  .rp-cols-y, .rp-col-bars, .rp-cols-grid { height: 150px; }
  .rp-cols { gap: var(--space-1); }
  .rp-col-x { font-size: 10px; }
  .rp-legend { margin-left: 36px; }
  .rp-bar { grid-template-columns: 76px minmax(0, 1fr) 40px; }
  .rp-flag { grid-template-columns: 24px minmax(0, 1fr) 32px; }
  .rp-flag-track { display: none; }
  .rp-card { padding: var(--space-4); }
  .rp-nav-l { padding-inline: var(--space-2-5); }
  .rp-hero-v { font-size: 56px; }
}
/* En un día de teléfono las nueve franjas van con horas cortas: el eje no
   entra con "12:00 PM" nueve veces. */
@media (max-width: 480px) {
  .rp-col-x-long:has(+ .rp-col-x-short) { display: none; }
  .rp-col-x-short { display: inline; }
  /* En un mes solo se rotula una columna de cada cinco: la etiqueta puede
     asomar de su columna en vez de cortarse a un dígito. */
  .rp-col-x { overflow: visible; text-overflow: clip; }
  .rp-legend { margin-left: 0; }
}

/* En el teléfono una tabla de siete u ocho columnas no se desplaza de costado:
   cada fila pasa a ser una tarjeta. El primer dato es el título; los demás,
   de a tres por renglón, con su rótulo arriba (data-label). */
@media (max-width: 640px) {
  .rp-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rp-stack, .rp-stack tbody { display: block; }
  .rp-stack tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0; border-top: 1px solid var(--border);
  }
  .rp-stack tbody tr:first-child { border-top: 0; }
  .rp-table .rp-stack td {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-0-5);
    padding: 0; border: 0; white-space: normal; text-align: left;
  }
  .rp-table .rp-stack td:first-child { grid-column: 1 / -1; }
  .rp-table .rp-stack td:not(:first-child)::before {
    content: attr(data-label); font-size: var(--font-size-caption); color: var(--text-muted);
  }
  .rp-stack .rp-meter { justify-content: flex-start; min-width: 0; }
}

/* Con movimiento reducido las barras aparecen en su lugar. */
@media (prefers-reduced-motion: reduce) {
  .rp-col-booked, .rp-col-visits, .rp-bar-fill { transition: none; }
}

/* Mientras MarianaTek trae la primera sala del período no hay nada que
   dibujar: una línea, no un esqueleto. */
.rp-wait { margin: 0; padding-block: var(--space-16); text-align: center; font-size: var(--font-size-body-md); color: var(--text-muted); }

/* ── Lo que se está cargando ────────────────────────────────────────────
   Una línea arriba del reporte que nombra el tiempo en que está (agenda,
   salas, comparación), cuánto lleva y cuánto falta. Con la agenda todavía en
   camino es lo único que hay en la pantalla y va más grande. */
.rp-status {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--color-surface-container);
}
.rp-status-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.rp-status-t { font-size: var(--font-size-body-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.rp-status-b { font-size: var(--font-size-body-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rp-status--lead { margin: var(--space-12) auto 0; max-width: 560px; padding: var(--space-5) var(--space-6); gap: var(--space-3); }
.rp-status--lead .rp-status-text { flex-direction: column; align-items: flex-start; }
.rp-status--lead .rp-status-t { font-size: var(--font-size-heading-xs); }

/* MarianaTek pidió esperar: el aviso va donde va la línea de estado. */
.rp-limit { margin-bottom: var(--space-5); }
.rp-status--lead + .rp-limit, .rp-state .rp-limit { max-width: 560px; margin: var(--space-4) auto 0; }

/* Un número que sale de las salas mientras faltan salas: se ve, atenuado, y
   dice sobre cuántas clases está contado. */
.rp-partial .stat-value, .rp-partial .rp-flags { opacity: .55; transition: opacity var(--duration-normal) var(--ease-default); }
.rp-partial-note { color: var(--text-muted); font-style: italic; }

/* ── Preguntar ──────────────────────────────────────────────────────────
   Una pregunta en palabras, una respuesta con números y gráficos. La caja
   es la búsqueda del DS; la respuesta se lee como una nota con sus paneles
   debajo, en las mismas tarjetas del reporte. */
.rp-ask { display: flex; flex-direction: column; gap: var(--space-4); }
.rp-ask-form { display: flex; flex-direction: column; gap: var(--space-3); }
.rp-ask-l { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-muted); }
/* @ds-gap embassy#14 — la misma píldora de 46 de la sala, con el botón adentro. */
.rp-ask-bar { height: 48px; padding-right: var(--space-1-5); border: 1px solid var(--color-outline-variant); background: var(--color-surface-container); }
.rp-ask-bar .search-bar-icon { color: var(--color-secondary); }
.rp-ask-bar .search-bar-input:disabled { opacity: .6; }
.rp-ask-go { flex: none; height: 36px; border-radius: var(--radius-full); }
.rp-ask-sug { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rp-ask-chip { height: 32px; font-size: var(--font-size-body-sm); color: var(--text-secondary); background: var(--color-surface-container); border-color: var(--color-outline-variant); cursor: pointer; }
.rp-ask-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.rp-ask-chip .rp-ico { color: var(--color-tertiary); }
.rp-ask-chip:hover:not(:disabled) { color: var(--text-primary); background: var(--color-surface-container-high); }
.rp-ask-chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rp-ask-chip:disabled { opacity: .5; cursor: default; }

.rp-ans {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-secondary-container) 28%, var(--color-surface-container));
  border: 1px solid color-mix(in srgb, var(--color-secondary) 18%, transparent);
  transition: opacity var(--duration-normal) var(--ease-default);
}
.rp-ans--pending { opacity: .75; }
@starting-style { .rp-ans { opacity: 0; } }
.rp-ans-q { margin: 0; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-muted); }
.rp-ans-a { margin: 0; font-size: var(--font-size-heading-sm); line-height: 1.45; font-weight: var(--font-weight-medium); color: var(--text-primary); max-width: 80ch; }
.rp-ans-wait { margin: 0; font-size: var(--font-size-body-md); color: var(--text-muted); }
.rp-ans-err { margin: 0; }
.rp-ans-panels { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.rp-ans-panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-ans-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-ans-card { padding: var(--space-4); }
.rp-ans-card .card-header { margin-bottom: var(--space-3); }
.rp-ans-stat { align-self: start; }
/* Una respuesta puede rotular clases enteras ("Ride · Fri, Sep 25 · 7:15 AM · Dre"): la
   etiqueta toma hasta un tercio del ancho antes de partirse. */
.rp-ans-card .rp-bar { grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) 48px; }
@media (max-width: 1023px) {
  .rp-ans-panels--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .rp-ans-panels--2, .rp-ans-panels--3 { grid-template-columns: minmax(0, 1fr); }
  .rp-ask-bar { height: 44px; }
  .rp-ask-go { height: 34px; }
  .rp-ans { padding: var(--space-4); }
  .rp-ans-a { font-size: var(--font-size-body-lg); }
}

/* ── /stats ────────────────────────────────────────────────────────────── */
/* Dos controles en vez de uno: Argentina y el período. En el teléfono bajan. */
.st-controls { flex-wrap: wrap; }
.st-controls .seg-btn { text-decoration: none; white-space: nowrap; }