/* ============================================================
   HUF — Componente: Report (.hd-report)
   ------------------------------------------------------------
   La segunda forma de pantalla del producto, al lado del Workspace
   (workspace.css). Un Workspace es un centro de operaciones y su zona
   dominante es de acción; un informe tiene al dato como objeto dominante.
   HVL §7.3 ya apuntaba a esta forma —"pertenece al módulo de Inteligencia
   o a un reporte exportable"— pero el componente no existía, así que
   Inteligencia se renderizaba como Workspace y mostraba 5 filas donde
   §7.4 exige 12. Ver ADR-085.

   La MECÁNICA DEL ALTO es deliberadamente la misma que la de la zona C
   (.hd-workspace__table): caja de alto definido, scroll interno, tira de
   pestañas quieta y scroll solo en el panel activo. Lo que cambia es el
   contrato de contenido, no el del alto — copiar esa mecánica es el punto,
   no un descuido.
   ============================================================ */

.hd-report {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--hd-theme-surface);
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-md);
    overflow: auto;
}

/* `min-height: 0` en los dos niveles: sin él, un hijo flex no baja de su
   alto de contenido y la cáscara de alto definido (HVL §7.2) se desborda
   por abajo en vez de dar scroll interno. */
.hd-report > .hd-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.hd-report > .hd-tabs > .hd-tabs__list {
    flex: 0 0 auto;
    padding: var(--hd-space-3) var(--hd-space-3) var(--hd-space-2);
}

/* `overflow` va en TODOS los paneles, visibles u ocultos — la misma nota al
   pie que ya costó un defecto en workspace.css. Condicionado a
   `:not([hidden])`, el panel de una pestaña que nace oculta todavía no es
   scroller cuando `initStickyFirst` de hd-table.js busca uno al cargar (lo
   hace UNA vez), el motor observa `.hd-report` en su lugar, y al abrir esa
   pestaña la primera columna nunca se fija: se pierde de vista el nombre del
   cliente al deslizar, que es el defecto de ADR-073. */
/* `hidden` y no `auto`: el panel reparte el alto entre la cabecera de cifras
   (fija) y el cuerpo (el que scrollea). Con `auto` acá, el panel entero
   scrollea y la cabecera se va de la vista al primer giro de rueda.

   `hidden` NO cuenta como scroller para `initStickyFirst`: ese motor solo
   acepta `overflow-x: auto|scroll` (hd-table.js, `scrollerHorizontal`).
   Comprobado leyendo el motor, no supuesto. No importa, y por una razón que
   conviene dejar escrita: entre la tabla y el panel está siempre
   `.hd-report__body`, que sí es `auto`, así que el motor lo encuentra a él y
   nunca llega hasta acá. Si alguien quita el cuerpo y cuelga la tabla
   directamente del panel, la primera columna deja de fijarse. */
.hd-report > .hd-tabs > .hd-tabs__panel {
    flex: 1;
    min-height: 0;
    padding-top: 0;
    overflow: hidden;
}

/* `display: flex` sí queda condicionado: ganaría contra el `display: none`
   que el navegador aplica a [hidden] y las pestañas se verían todas a la vez. */
.hd-report > .hd-tabs > .hd-tabs__panel:not([hidden]) {
    display: flex;
    flex-direction: column;
}

/* ── Cabecera de una historia ──────────────────────────────────
   Lo que reemplaza al rail. El rail mostraba las cuatro cifras a la vez al
   lado de cualquier pestaña: cuatro respuestas para la pregunta que
   estuvieras haciendo y para las tres que no. Acá cada historia trae las
   suyas, y se quedan fuera del scroll de su tabla. */
.hd-report__head {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--hd-space-6);
    padding: var(--hd-space-3) var(--hd-space-4) var(--hd-space-4);
    border-bottom: 1px solid var(--hd-color-border);
}

/* A sangre y sin tarjeta: cuatro tarjetas iguales en fila es la señal
   delatora de plantilla administrativa que HVL §7.4 prohíbe, y la prohíbe
   igual en un informe que en un Workspace. La jerarquía la da el tamaño de
   la cifra, no una caja alrededor. */
.hd-report__figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hd-report__figure-label {
    font-size: var(--hd-text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hd-theme-text-muted);
}

.hd-report__figure-value {
    font-size: var(--hd-text-display, 2rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--hd-theme-text);
}

.hd-report__figure-hint {
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
}

.hd-report__figure-hint--up { color: var(--hd-color-success); }
.hd-report__figure-hint--down { color: var(--hd-color-error); }

/* Texto que explica la historia, bajo las cifras y a todo el ancho. Sin él,
   un informe es una pared de números que cada gerente interpreta a su modo. */
.hd-report__lead {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
    max-width: 90ch;
}

/* Acciones de la historia (un enlace a la pantalla que la acciona). */
.hd-report__head-actions {
    margin-left: auto;
    display: flex;
    gap: var(--hd-space-2);
    align-items: center;
}

/* ── Parrilla día × hora ───────────────────────────────────────
   `peak_hours` se calcula y persiste entero desde siempre; hasta 2026-09-20
   solo se pintaban las 5 celdas más altas en un ranking del rail. Las 7×24
   no caben en un ranking y sí en una parrilla: la pregunta del gerente no es
   "¿cuál es mi mejor hora?" sino "¿cuándo refuerzo turno?", y esa se lee en
   la forma de la semana, no en un top 5.

   Es un mapa de calor, que HVL §7.6 veta DENTRO de un Workspace por ser un
   informe. Acá no aplica: esto es el informe. */
.hd-report__grid-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--hd-space-4);
}

.hd-report__grid {
    display: grid;
    grid-template-columns: auto repeat(24, minmax(22px, 1fr));
    gap: 2px;
    min-width: 640px;
}

.hd-report__grid-corner,
.hd-report__grid-hour,
.hd-report__grid-day {
    font-size: var(--hd-text-micro);
    color: var(--hd-theme-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.hd-report__grid-day {
    justify-content: flex-end;
    padding-right: var(--hd-space-2);
    white-space: nowrap;
}

/* La intensidad va por opacidad del acento sobre el inset, no por una escala
   de colores distintos: una rampa multicolor inventa categorías donde solo
   hay más y menos (HVL §4.2). El nivel lo pone el servidor en data-nivel. */
.hd-report__cell {
    aspect-ratio: 1;
    min-height: 20px;
    border-radius: var(--hd-radius-sm);
    background: var(--hd-color-inset);
}

.hd-report__cell[data-nivel="1"] { background: rgba(var(--hd-theme-accent-rgb), 0.18); }
.hd-report__cell[data-nivel="2"] { background: rgba(var(--hd-theme-accent-rgb), 0.38); }
.hd-report__cell[data-nivel="3"] { background: rgba(var(--hd-theme-accent-rgb), 0.62); }
.hd-report__cell[data-nivel="4"] { background: rgba(var(--hd-theme-accent-rgb), 0.88); }

/* Leyenda de la rampa: sin ella, el color no dice cuánto. */
.hd-report__grid-legend {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin-top: var(--hd-space-4);
    font-size: var(--hd-text-micro);
    color: var(--hd-theme-text-muted);
}

.hd-report__grid-legend-scale {
    display: flex;
    gap: 2px;
}

.hd-report__grid-legend-scale span {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    background: var(--hd-color-inset);
}

.hd-report__grid-legend-scale span[data-nivel="1"] { background: rgba(var(--hd-theme-accent-rgb), 0.18); }
.hd-report__grid-legend-scale span[data-nivel="2"] { background: rgba(var(--hd-theme-accent-rgb), 0.38); }
.hd-report__grid-legend-scale span[data-nivel="3"] { background: rgba(var(--hd-theme-accent-rgb), 0.62); }
.hd-report__grid-legend-scale span[data-nivel="4"] { background: rgba(var(--hd-theme-accent-rgb), 0.88); }

/* ── Filtro segmentado dentro de una historia ──────────────────
   "Se me van" contiene dos listas que NO se pueden mezclar en una tabla: los
   cientos que se registraron y nunca vinieron —todos empatados en 95 % de
   churn— tapan a los pocos que venían y se apagaron, que son los únicos
   accionables (ADR-077). Van con este filtro, que muestra una u otra, nunca
   las dos juntas. No son pestañas anidadas: la pestaña ya es la historia, y
   esto es el corte dentro de ella. */
.hd-report__filter {
    flex: 0 0 auto;
    display: flex;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3) var(--hd-space-4) 0;
}

.hd-report__filter-option {
    padding: var(--hd-space-1) var(--hd-space-3);
    background: transparent;
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-pill, 999px);
    color: var(--hd-theme-text-muted);
    font-family: var(--hd-theme-font, var(--hd-font-sans));
    font-size: var(--hd-text-meta);
    cursor: pointer;
    white-space: nowrap;
}

.hd-report__filter-option:hover { border-color: var(--hd-color-border-strong); }

.hd-report__filter-option:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: var(--hd-focus-offset);
}

.hd-report__filter-option[aria-pressed="true"] {
    background: rgba(var(--hd-theme-accent-rgb), 0.12);
    border-color: var(--hd-theme-accent);
    color: var(--hd-theme-accent-text);
    font-weight: 600;
}

/* El CUERPO de la historia es lo que scrollea, no el panel entero: así la
   cabecera de cifras se queda a la vista mientras se recorre la tabla. Es la
   diferencia entre un informe y una página larga — el gerente lee una fila y
   necesita seguir viendo contra qué total la está leyendo.

   Medido a 1440×900 con los avisos cerrados: con el panel como scroller, la
   cabecera se iba hacia arriba al primer giro de rueda. En "Se me van" ya
   pasaba lo correcto por accidente (el corte era el scroller), y esa
   asimetría entre pestañas era el síntoma.

   `overflow` en TODOS los cuerpos, el oculto incluido, para que
   `initStickyFirst` de hd-table.js encuentre un scroller también en el que
   nace con [hidden] — la misma nota al pie de arriba. El `display: flex` sí
   condicionado, o le ganaría al `display: none`. */
.hd-report__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.hd-report__body:not([hidden]) {
    display: flex;
    flex-direction: column;
}

/* ── Serie diaria (SVG en línea) ───────────────────────────────
   No hay motor de gráficos en el producto y no se añade uno: HVL §7.6 fija
   exactamente cómo debe verse una serie (línea de 2px en acento, relleno
   plano al 10 % sin degradado, máximo 3 líneas de rejilla, sin ejes con
   borde), y eso cabe en un <svg> escrito a mano. Una librería traería su
   paleta, sus tooltips y sus animaciones, y habría que apagarlas una por una. */
.hd-report__chart {
    flex: 0 0 auto;
    padding: var(--hd-space-4) var(--hd-space-4) 0;
}

.hd-report__chart svg {
    display: block;
    width: 100%;
    height: 140px;
    overflow: visible;
}

/* `vector-effect: non-scaling-stroke` es lo que permite estirar el SVG al ancho
   disponible con preserveAspectRatio="none" sin que el trazo se deforme: sin él,
   una serie ancha sale con la línea aplastada en vertical y gorda en horizontal,
   y los 2px que manda HVL §7.6 dejan de ser 2px. */
.hd-report__chart-grid {
    stroke: var(--hd-color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.hd-report__chart-area { fill: rgba(var(--hd-theme-accent-rgb), 0.10); }

.hd-report__chart-line {
    fill: none;
    stroke: var(--hd-theme-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* La proyección se dibuja punteada: una línea continua afirmaría que el
   futuro ya ocurrió. */
.hd-report__chart-line--proyeccion { stroke-dasharray: 4 4; }

.hd-report__chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: var(--hd-space-2);
    font-size: var(--hd-text-micro);
    color: var(--hd-theme-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Bajo 992px ────────────────────────────────────────────────
   La ventana scrollea por diseño (HVL §7.2), así que el informe suelta su
   alto definido y las cifras se apilan de a dos. */
@media (max-width: 991.98px) {
    .hd-report {
        overflow: visible;
    }

    .hd-report > .hd-tabs > .hd-tabs__panel,
    .hd-report__body {
        overflow: visible;
    }

    .hd-report__head {
        gap: var(--hd-space-4);
    }

    .hd-report__figure {
        flex: 1 1 40%;
    }

    .hd-report__figure-value {
        font-size: var(--hd-text-h2, 1.5rem);
    }

    .hd-report__head-actions {
        margin-left: 0;
        flex: 1 1 100%;
    }
}