/* ════════════════════════════════════════════════════════════════════
   F3 · Reporting financiero · tríada (Año anterior · Real · Presupuesto)
   Réplica fiel del mockup POC v7 con los tokens del design system Azhum.
   Escenarios en columnas, grupos gemelos MENSUAL / ACUMULADO (IBCS).
   ════════════════════════════════════════════════════════════════════ */
.azhum-rep { --ibcs-py: var(--az-text-faint); }

/* ── Barra de período (selector global · «gobierna todas las vistas») ── */
.azhum-periodbar{
  display:flex;align-items:center;gap:14px;background:var(--az-surface);
  border:1px solid var(--az-border-subtle);border-radius:var(--az-radius-lg);
  padding:9px 15px;margin-bottom:13px;flex-wrap:wrap;position:sticky;top:0;z-index:30;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
}
/* Tipografía del selector = la del app (Inter, font-family:inherit), NO mono.
   Solo eyebrow uppercase como el resto de labels de selector del app. */
.azpb-label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--az-text-faint);font-weight:600}
.azpb-year .k-dropdownlist{font-size:13px}
/* Modal de trazabilidad: más ancho para las columnas del split directo/driver, capado al viewport
   (el Width fijo de la TelerikWindow vive en el componente; este cap evita desbordes en portátiles). */
.azhum-drill-window{max-width:96vw}
.azpb-months{display:flex;gap:4px;flex-wrap:wrap}
.azpb-months button{border:1px solid var(--az-border);background:transparent;color:var(--az-text-muted);font-family:inherit;font-size:12px;font-weight:500;padding:4px 11px;border-radius:var(--az-radius-full);cursor:pointer;transition:all .15s}
.azpb-months button:hover:not(:disabled){border-color:var(--az-blue);color:var(--az-text-2)}
.azpb-months button.on{background:var(--az-blue);color:#fff;border-color:var(--az-blue)}
.azpb-months button:disabled{color:var(--az-text-faint);border-style:dashed;cursor:not-allowed}
/* M2.5 · conmutador de granularidad Mes/Trimestre (segmentado) */
.azpb-gran{display:inline-flex;gap:0;border:1px solid var(--az-border);border-radius:var(--az-radius-full);overflow:hidden}
.azpb-gran button{border:0;background:transparent;color:var(--az-text-muted);font-family:inherit;font-size:11.5px;font-weight:600;padding:4px 12px;cursor:pointer;transition:all .15s}
.azpb-gran button:hover:not(.on){color:var(--az-text-2)}
.azpb-gran button.on{background:var(--az-blue);color:#fff}
.azpb-gran button:disabled{color:var(--az-text-faint);cursor:not-allowed}
/* M8.9 (foco visible) · anillo de foco por teclado en pills/tabs de reporting — el outline por
   defecto se pierde sobre el azul de la pill activa. */
.azpb-months button:focus-visible,.azpb-gran button:focus-visible,.azhum-rep-tabs button:focus-visible{outline:2px solid var(--az-blue);outline-offset:2px}

/* ── Tabs de estado (P&L · Balance · Cash Flow) ── */
.azhum-rep-tabs{display:flex;gap:4px;background:var(--az-surface);border:1px solid var(--az-border-subtle);border-radius:var(--az-radius-lg);padding:4px;width:fit-content;margin-bottom:13px}
.azhum-rep-tabs button{border:0;background:transparent;color:var(--az-text-muted);font-size:12.5px;font-weight:500;padding:6px 15px;border-radius:var(--az-radius-md);cursor:pointer;font-family:var(--az-font-ui)}
.azhum-rep-tabs button.on{background:var(--az-surface-3);color:var(--az-text);font-weight:600}
.azhum-rep-tabs button:disabled{color:var(--az-text-faint);cursor:not-allowed}

/* ── Panel + cabecera ── */
/* Ritmo vertical entre TARJETAS consecutivas. El resto de bloques de reporting llevan su
   `margin-bottom:13px` (.azhum-rep-panel, .azhum-rep-tabs), pero .k-card de Telerik viene sin
   margen: dos TelerikCard seguidas quedaban a 0px — medido en /ballena (gráfico pegado a la
   tabla) y en /dashboard-analitico (sus cuatro tarjetas, todas a 0). Solo entre HERMANAS
   adyacentes: la primera ya recibe su aire del bloque anterior, así que no se duplica. */
.azhum-rep .k-card + .k-card { margin-top: 13px; }
.azhum-rep-panel{background:var(--az-surface);border:1px solid var(--az-border-subtle);border-radius:var(--az-radius-lg);padding:14px 17px;margin-bottom:13px}
.azhum-rep-phead{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.azhum-rep-ptitle{font-weight:600;font-size:13.5px;color:var(--az-text)}
.azhum-rep-psub{font-family:var(--az-font-mono);font-size:9.5px;color:var(--az-text-faint)}
/* M8.3 · "HOY" = marcador de período (no variación) → acento de marca, no verde. */
.azhum-tag-hoy{font-family:var(--az-font-mono);font-size:8.5px;letter-spacing:.08em;padding:2px 7px;border-radius:var(--az-radius-full);background:var(--az-blue-muted);color:var(--az-ink-blue)}
.azhum-rep-lock{font-family:var(--az-font-mono);font-size:10px;padding:4px 11px;border:1px dashed var(--az-border-strong);border-radius:var(--az-radius-full);color:var(--az-text-faint);display:inline-block;margin-top:11px}

/* ── Tabla tríada (grupos gemelos). Los NÚMEROS van en la tipografía del
   app (Inter con cifras tabulares · igual que .azhum-num-mono del resto de
   informes), NUNCA en monoespaciada — el mono a tamaño pequeño no se lee.
   El mono se reserva para las etiquetas de cabecera (versalitas). ── */
/* FRD#5 · el wrap es el contenedor de scroll PROPIO de la tabla (max-height): así la
   cabecera (sticky top) y la 1ª columna (sticky left) se congelan respecto a la tabla,
   no a la página — y no chocan con la PeriodBar sticky. Tablas cortas no llegan al
   max-height → no scrollean (sin cambio visible). */
.azhum-tri-wrap{overflow:auto;max-height:72vh}
table.azhum-tri{--az-tri-head-h:23px;width:100%;border-collapse:collapse;font-size:13px}
.azhum-tri th{font-family:var(--az-font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--az-text-muted);font-weight:600;text-align:right;padding:5px 8px;border-bottom:1px solid var(--az-border);white-space:nowrap;position:sticky;top:0;z-index:2;background:var(--az-surface)}
/* FRD#5 · cabecera de 2 filas (tríada: grpH arriba + labels debajo): la 2ª fila se
   ancla bajo la 1ª (alto de la 1ª fila = --az-tri-head-h). Tablas de 1 fila ignoran esta regla. */
.azhum-tri thead tr:nth-child(2) th{top:var(--az-tri-head-h)}
.azhum-tri th:first-child{text-align:left}
/* Cabeceras ordenables (tabla de la ballena): clic/Enter reordena; foco visible. */
.azhum-tri th.sortable{cursor:pointer;user-select:none}
.azhum-tri th.sortable:hover{color:var(--az-text-2)}
.azhum-tri th.sortable:focus-visible{outline:2px solid var(--az-blue);outline-offset:-2px}
.azhum-tri th.grpH{text-align:center;color:var(--az-text-faint);font-weight:600;border-bottom:2px solid var(--az-border-strong);letter-spacing:.14em}
.azhum-tri th.grpSep,.azhum-tri td.grpSep{border-left:1px solid var(--az-border-strong)}
.azhum-tri td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--az-border-subtle);color:var(--az-text-2);white-space:nowrap}
/* FRD#5 · 1ª columna (Concepto/epígrafe) congelada en scroll horizontal. La esquina
   (th:first-child) gana en z a ambas para no transparentar. Fondo opaco obligatorio. */
.azhum-tri td:first-child{text-align:left;min-width:178px;color:var(--az-text);position:sticky;left:0;z-index:1;background:var(--az-surface)}
/* Esquina de la tabla: el th de la 1ª columna congela TAMBIÉN en horizontal (left) — sin esto,
   al scrollear a la derecha las filas quedaban ancladas pero el título "Valor" se iba. */
.azhum-tri th:first-child{z-index:3;left:0}
.azhum-tri td.num{font-variant-numeric:var(--az-numeric);font-feature-settings:"tnum"}
.azhum-tri td.aa{font-variant-numeric:var(--az-numeric);font-feature-settings:"tnum";color:var(--ibcs-py)}
.azhum-tri td.bu{font-variant-numeric:var(--az-numeric);font-feature-settings:"tnum";color:var(--az-text-faint)}
/* Columna ACTUAL (Real): el ancla visual — letras más claras + algo de peso
   (convención IBCS: el real destaca sobre el año anterior y el presupuesto). */
.azhum-tri td.re{color:var(--az-text);font-weight:500}
.azhum-tri tr.head td{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px;color:var(--az-text-faint);border-bottom:0;padding-top:13px}
.azhum-tri tr.sub td{font-weight:700;color:var(--az-text);border-top:1.5px solid var(--az-border-strong);background:color-mix(in srgb,var(--az-surface-2) 55%,transparent)}
.azhum-tri tr.ratio td{font-style:italic;color:var(--az-text-faint);font-size:12px}
.azhum-tri tr.det td:first-child{padding-left:22px}
.azhum-tri .up{color:var(--az-ink-green);font-size:11.5px;font-variant-numeric:var(--az-numeric)}
.azhum-tri .down{color:var(--az-ink-red);font-size:11.5px;font-variant-numeric:var(--az-numeric)}
.azhum-tri .flat{color:var(--az-text-faint);font-size:11.5px}

/* ── Conciliación cross-dimensión de la curva de ballena (§0 del stress del CFO) ──
   "Sin asignar a [dim]" = el resto que antes se caía en silencio; "Margen de compañía"
   = total al que TODO corte puentea (cliente = línea = matrícula). */
.azhum-tri tr.azhum-whale-resid td{color:var(--az-text-faint);font-style:italic;border-top:1px dashed var(--az-border)}
.azhum-tri tr.azhum-whale-resid td:first-child{color:var(--az-text-muted);font-style:italic}
.azhum-tri tr.azhum-whale-total td{font-weight:700;color:var(--az-text);border-top:2px solid var(--az-blue);background:color-mix(in srgb,var(--az-blue) 7%,transparent)}
.azhum-tri tr.azhum-whale-total td:first-child{color:var(--az-text);text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.azhum-whale-note{margin:2px 0 13px;font-size:12px;color:var(--az-text-muted);line-height:1.5;max-width:74ch;border-left:2px solid var(--az-border-strong);padding-left:10px}

/* ── Cuenta resumida (Dashboard) · jerarquía visual scopeada (M1.2–M1.5).
   SOLO bajo .azhum-tri--summary → no repinta /informes ni la tabla de KPIs,
   que comparten .azhum-tri. Tres pesos: ancla (Ingresos) · subtotales
   operativos discretos · líneas de resultado (MC/EBITDA/Neto) destacadas. ── */
/* M1.5 · cabeceras de grupo MENSUAL/ACUM como rótulos de bloque reales */
.azhum-tri--summary th.grpH{color:var(--az-text-2);font-size:10.5px;letter-spacing:.16em;border-bottom-width:2px}
/* M1.2 · subtotales operativos: peso medio, sin fondo (hoy se ven «todos como totales») */
.azhum-tri--summary tr.sub td{font-weight:500;background:transparent;border-top:1px solid var(--az-border-subtle);color:var(--az-text-2)}
.azhum-tri--summary tr.sub td:first-child{color:var(--az-text-2)}
/* M1.2 · Ingresos = arranque del escalón (ancla, sin regla superior) */
.azhum-tri--summary tr.anchor td{font-weight:700;color:var(--az-text);border-top:0;background:transparent}
.azhum-tri--summary tr.anchor td:first-child{color:var(--az-text);text-transform:uppercase;letter-spacing:.04em;font-size:12px}
/* M1.3 · líneas de resultado destacadas (MC · EBITDA · Resultado neto) */
.azhum-tri--summary tr.result td{font-weight:700;color:var(--az-text);border-top:1.5px solid var(--az-border-strong);background:color-mix(in srgb,var(--az-surface-2) 50%,transparent)}
.azhum-tri--summary tr.result td:first-child{color:var(--az-text)}
.azhum-tri--summary tr.result td.re{color:var(--az-text)}
/* M1.3 · Resultado neto = hito final, acento de marca sutil */
.azhum-tri--summary tr.result.net td{border-top:2px solid var(--az-blue);background:color-mix(in srgb,var(--az-blue) 7%,transparent)}

/* ── Informe anual (TelerikGrid .azhum-stmt-grid) · selector global F3 · B.2 ──
   RESALTA la columna del mes elegido en el PeriodBar; ATENÚA los meses sin
   cierre (sin datos). Clases puestas en th (HeaderClass) y td (OnCellRender). */
/* M3.2 · Δ% vs año anterior en el informe anual (bajo el valor / junto al total) */
.azhum-aa-d{font-size:10px;font-variant-numeric:var(--az-numeric)}
.azhum-aa-d.up{color:var(--az-ink-green)}
.azhum-aa-d.down{color:var(--az-ink-red)}
/* Mes sin cierre: se marca con una BANDA y el rótulo tenue — apagarlo con opacity borraba el
   nombre del mes (2,6:1 medido) y el usuario perdía la referencia de columna. */
.azhum-stmt-grid .azhum-col-dim{background:color-mix(in srgb,var(--az-text) 4%,transparent)}
.azhum-stmt-grid th.azhum-col-dim .k-column-title{color:var(--az-text-faint)}
/* Estados financieros (P&L tríada) + KPIs migrados al mismo grid: tintes de columna
   AA/Real/Ppto y Δ coloreadas (antes scoped a la tabla artesanal .azhum-tri). */
.azhum-stmt-grid .k-table-td.aa{color:var(--ibcs-py)}
.azhum-stmt-grid .k-table-td.bu{color:var(--az-text-faint)}
.azhum-stmt-grid .k-table-td.re{color:var(--az-text);font-weight:500}
.azhum-stmt-grid .up{color:var(--az-ink-green);font-size:11px;font-variant-numeric:var(--az-numeric)}
.azhum-stmt-grid .down{color:var(--az-ink-red);font-size:11px;font-variant-numeric:var(--az-numeric)}
.azhum-stmt-grid .flat{color:var(--az-text-faint);font-size:11px}
/* Columna del período seleccionado: resalte claro (fondo + bordes laterales azules). */
.azhum-stmt-grid .azhum-col-sel{background:color-mix(in srgb,var(--az-blue) 18%,transparent);box-shadow:inset 1px 0 var(--az-blue),inset -1px 0 var(--az-blue)}
.azhum-stmt-grid th.azhum-col-sel{background:color-mix(in srgb,var(--az-blue) 22%,transparent);border-bottom:2px solid var(--az-blue);color:var(--az-text);font-weight:700}

/* ════════════════════════════════════════════════════════════════════
   F3 · B.3 · Dashboard financiero (hero · beat/miss · puente · evolución)
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero · 4 magnitudes en UNA barra con divisores internos (POC v7).
   NO son 4 cards sueltas con gap (se veían «pegadas» y mal proporcionadas):
   es un único panel y cada magnitud se separa con border-right. Números en
   Inter tabular (decisión del founder · legibilidad), nunca mono. ── */
.azhum-hero{display:flex;flex-wrap:wrap;background:var(--az-surface);border:1px solid var(--az-border-subtle);border-radius:var(--az-radius-lg);margin-bottom:13px;overflow:hidden}
.azhum-hero__card{flex:1;min-width:210px;padding:14px 18px;border-right:1px solid var(--az-border-subtle)}
.azhum-hero__card:last-child{border-right:0}
@media (max-width:1100px){
  .azhum-hero__card{flex:1 1 46%;min-width:46%}
  .azhum-hero__card:nth-child(2n){border-right:0}
}
/* min-height reserva 2 líneas → todas las etiquetas ocupan lo mismo y los VALORES de
   debajo quedan alineados verticalmente entre tarjetas (arregla la tira ITD descuadrada). */
.azhum-hero__label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--az-text-faint);font-weight:600;line-height:1.2;min-height:2.4em}
.azhum-hero__value{font-size:23px;font-weight:600;color:var(--az-text);font-variant-numeric:var(--az-numeric);font-feature-settings:"tnum";line-height:1.2;margin-top:4px;white-space:nowrap}
.azhum-hero__value small{font-size:11px;color:var(--az-text-faint);font-weight:400}
/* % uniformes en hero: mismo tamaño (11px), misma cifra tabular y misma línea base en la
   fila de variaciones y en la de acumulado (verde/rojo del chip de variación = intencional,
   M8.3; los ratios de margen van en gris tenue). */
.azhum-hero__deltas{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:6px;font-size:11px;font-variant-numeric:var(--az-numeric)}
.azhum-hero__acum{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:7px;padding-top:7px;border-top:1px solid var(--az-border-subtle);font-size:11px}
.azhum-hero__acum-v{color:var(--az-text-faint)}
.azhum-hero__acum-v b{color:var(--az-text-2);font-weight:600;font-variant-numeric:var(--az-numeric)}
.azhum-hero__chip{white-space:nowrap;font-variant-numeric:var(--az-numeric)}
.azhum-hero__chip small{color:var(--az-text-faint);font-size:8.5px;letter-spacing:.04em}
.azhum-hero__chip.up{color:var(--az-ink-green)}
.azhum-hero__chip.down{color:var(--az-ink-red)}

/* ── Filas emparejadas del dashboard (POC v7: paneles 2-en-fila, no a
   ancho completo). Los dos paneles de una fila CIERRAN A LA MISMA ALTURA
   (`align-items:stretch`): con `start` cada uno medía lo que ocupaba su
   contenido y las cajas quedaban descuadradas, sobre todo cuando una lleva
   nota al pie y la otra no. La nota se ancla abajo (`margin-top:auto`) para
   que el hueco sobrante quede entre el contenido y el pie, no debajo. ── */
.azhum-dash-pair{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:stretch;margin-bottom:13px}
.azhum-dash-pair--wide{grid-template-columns:1.5fr 1fr}
.azhum-dash-pair > *{margin-bottom:0}
/* `margin-bottom` explícito: `.azhum-dash-pair > *` empata en especificidad con
   `.azhum-panel-lite` y pierde por orden, así que el panel se quedaba con sus 13px
   y su caja cerraba 13px más arriba que la del panel vecino. */
.azhum-dash-pair > .azhum-panel-lite{display:flex;flex-direction:column;margin-bottom:0}
.azhum-dash-pair > .azhum-panel-lite > .azhum-chart-foot{margin-top:auto;padding-top:8px}
@media (max-width:1080px){.azhum-dash-pair,.azhum-dash-pair--wide{grid-template-columns:1fr}}

/* ── Panel ligero (beat/miss, puente) ── */
.azhum-panel-lite{background:var(--az-surface);border:1px solid var(--az-border-subtle);border-radius:var(--az-radius-lg);padding:14px 17px;margin-bottom:13px}
.azhum-panel-lite__head{display:flex;align-items:center;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.azhum-panel-lite__title{font-weight:600;font-size:13.5px;color:var(--az-text)}
.azhum-panel-lite__note{font-size:11.5px;color:var(--az-text-faint);margin-left:auto}
.azhum-rep-tabs--inline{margin-bottom:0;margin-left:auto}
/* Toggle de comparación del gráfico de evolución (2ª fila bajo la cabecera, a la izquierda). */
.azhum-evo-cmp{margin-left:0;margin-bottom:11px}

/* Banner de proceso al aplicar un filtro dimensional (recálculo del corte desde el cubo). */
.azhum-filter-applying{display:flex;align-items:center;gap:10px;margin:0 0 13px;padding:8px 14px;background:color-mix(in srgb,var(--az-blue) 10%,var(--az-surface));border:1px solid color-mix(in srgb,var(--az-blue) 30%,transparent);border-radius:var(--az-radius-lg);font-size:12.5px;color:var(--az-text-2)}

/* ── Tira beat/miss · slim inline (POC v7): título + dots + contador ── */
.azhum-beat-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 17px}
.azhum-beat-strip__title{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--az-text-faint);font-weight:600}
/* M8.3 · beat/miss = estado vs presupuesto (no variación Δ) → acento de marca / neutro,
   no verde/rojo. La distinción se mantiene (azul = cumplido, gris = no). */
.azhum-beat-strip__count{font-size:11px;font-variant-numeric:var(--az-numeric);color:var(--az-text-2);font-weight:600;margin-left:auto}
.azhum-beat{display:flex;gap:7px}
.azhum-beat__dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.azhum-beat__dot.beat{background:var(--az-blue)}
/* M8.9 (no-color) · batido = punto RELLENO, no batido = ANILLO hueco → se distinguen por
   FORMA, no solo por color (daltonismo), igual que los ▲▼ de las Δ. */
.azhum-beat__dot.miss{background:transparent;border:1.5px solid var(--az-text-faint)}
.azhum-beat__dot.pending{background:transparent;border:1.5px dashed var(--az-border-strong)}

/* ── Pie de gráfico ── */
.azhum-chart-foot{font-size:11px;color:var(--az-text-faint);margin:8px 2px 0;line-height:1.4}

/* FRD#11 · afordancia de "hay explicación al pasar el ratón" (glosario inline de trazabilidad). */
.azhum-help{cursor:help}

/* FRD#4 · tooltip enriquecido de charts (todas las métricas del mes en uno). */
/* Selector de proveedor de LLM de Lumen (config del tenant) */
.azhum-llm-provider{display:flex;gap:12px;flex-wrap:wrap}
.azhum-llm-opt{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:220px;padding:12px 16px;text-align:left;cursor:pointer;border:1px solid var(--az-border);border-radius:var(--az-radius-lg);background:var(--az-surface);color:var(--az-text);transition:border-color .15s ease,box-shadow .15s ease}
.azhum-llm-opt:hover:not(:disabled){border-color:var(--az-ia-a)}
.azhum-llm-opt.sel{border-color:var(--az-ia-a);box-shadow:0 0 0 1px var(--az-ia-a) inset;background:var(--az-surface-2)}
.azhum-llm-opt:disabled{opacity:.6;cursor:default}
.azhum-llm-opt .t{font-weight:650;font-size:14px}
.azhum-llm-opt .s{font-size:12px;color:var(--az-text-muted)}
.azhum-chart-tip{min-width:152px;font-size:12px;color:var(--az-text)}
.azhum-chart-tip__cat{font-weight:600;margin-bottom:4px;color:var(--az-text)}
.azhum-chart-tip__row{display:flex;justify-content:space-between;gap:16px;line-height:1.55;color:var(--az-text-2)}
.azhum-chart-tip__val{font-variant-numeric:var(--az-numeric);font-feature-settings:"tnum";font-weight:500;color:var(--az-text)}
/* Fondo + borde del tooltip de gráfico CONTROLADOS por el design system (contraste APCA en
   claro/oscuro). Sin esto, un pie/donut pinta el fondo del tooltip con el COLOR DE LA PORCIÓN
   y el texto podía quedar ilegible. `:has()` lo acota a los tooltips de gráfico (los que llevan
   .azhum-chart-tip), sin tocar otros tooltips de Telerik. El texto usa --az-text/--az-text-2,
   que la paleta garantiza contrastados sobre --az-surface-3 en ambos temas. */
.k-tooltip:has(.azhum-chart-tip),
.k-chart-tooltip:has(.azhum-chart-tip){
    background:var(--az-surface-3) !important;
    color:var(--az-text) !important;
    border:1px solid var(--az-border-strong) !important;
    box-shadow:var(--az-elev-3);
    border-radius:var(--az-radius-md);
    padding:8px 10px;
}

/* ── Desviaciones vs plan (ranking de epígrafes por |real − ppto|) ── */
.azhum-dev{display:flex;flex-direction:column;gap:7px}
.azhum-dev__row{display:grid;grid-template-columns:190px 1fr 130px;align-items:center;gap:11px}
/* M8.10 · en móvil la fila de 190px+barra+130px se aplasta → nombre arriba, barra+valor debajo. */
@media (max-width: 640px) { .azhum-dev__row { grid-template-columns: 1fr auto; } }
.azhum-dev__name{font-size:12.5px;color:var(--az-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.azhum-dev__bar{position:relative;height:13px;background:var(--az-surface-2);border-radius:var(--az-radius-full);overflow:hidden}
.azhum-dev__fill{position:absolute;inset:0 auto 0 0;border-radius:var(--az-radius-full)}
.azhum-dev__fill.up{background:var(--az-green)}
.azhum-dev__fill.down{background:var(--az-red)}
.azhum-dev__val{text-align:right;font-size:12.5px;font-variant-numeric:var(--az-numeric);font-feature-settings:"tnum"}
.azhum-dev__val.up,.azhum-dev__foot .up{color:var(--az-ink-green)}
.azhum-dev__val.down,.azhum-dev__foot .down{color:var(--az-ink-red)}
.azhum-dev__foot{margin-top:13px;padding-top:11px;border-top:1px solid var(--az-border-subtle);font-size:12px;color:var(--az-text-muted)}
.azhum-dev__note{color:var(--az-text-faint);font-size:11px}

/* ── KPIs financieros (tabla tríada + sparkline) ── */
.azhum-kpi-tri td:first-child{min-width:200px;font-weight:500;color:var(--az-text)}
.azhum-kpi-tri tr.ratio td:first-child{font-style:normal;color:var(--az-text-2)}
.azhum-kpi-spark-empty{color:var(--az-text-faint);font-size:12px}

/* ── Curva de ballena (F3-ANA) ── */
.azhum-whale-insight{display:flex;align-items:center;gap:15px}
/* M8.3 · el nº grande y los importes de margen son SIGNO-DE-VALOR (no variación) → acento
   de marca / neutro, no verde/rojo. El chart SÍ conserva verde/rojo (ahí el color ES el dato:
   tramo rentable vs lastre de la curva, como el semáforo de ITD). */
.azhum-whale-big{font-size:34px;font-weight:700;color:var(--az-ink-blue);font-variant-numeric:var(--az-numeric);line-height:1}
.azhum-whale-txt{font-size:14px;color:var(--az-text-2);line-height:1.45}
.azhum-whale-insight .up{color:var(--az-text)}
.azhum-whale-insight .down{color:var(--az-text)}
.azhum-whale-tbl td:nth-child(2){min-width:210px;color:var(--az-text)}
/* El founder pide el margen de la tabla con semáforo: negativo rojo, positivo verde
   (tokens theme-aware). El nº grande (.azhum-whale-big) sigue azul de marca. */
.azhum-whale-tbl .up{font-size:inherit;font-weight:600;color:var(--az-ink-green)}
.azhum-whale-tbl .down{font-size:inherit;font-weight:600;color:var(--az-ink-red)}
/* Reparto de anchos: la 1ª col (#) heredaba min-width:178px de .azhum-tri td:first-child → acotar;
   numéricas con min-width estable; Cliente (col 2) flexible. */
.azhum-whale-tbl td:first-child,.azhum-whale-tbl th:first-child{min-width:auto;width:52px;text-align:center}
.azhum-whale-tbl td.num,.azhum-whale-tbl th:not(:first-child):not(:nth-child(2)){min-width:104px}

/* ── Dashboard analítico · trazabilidad AD/AC/AI/AR + barra de ITD ── */
.azhum-trace-bar{display:flex;height:26px;border-radius:var(--az-radius-md);overflow:hidden;background:var(--az-surface-2)}
.azhum-trace-bar .seg{height:100%}
.azhum-trace-bar .seg.ad{background:var(--az-green)}
.azhum-trace-bar .seg.ac{background:var(--az-blue)}
.azhum-trace-bar .seg.ai{background:var(--kendo-color-warning)}
.azhum-trace-bar .seg.ar{background:var(--az-red)}
.azhum-trace-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
.azhum-trace-item{display:flex;align-items:center;gap:7px;font-size:12.5px}
.azhum-trace-item .dot{width:11px;height:11px;border-radius:3px}
.azhum-trace-item .dot.ad{background:var(--az-green)}
.azhum-trace-item .dot.ac{background:var(--az-blue)}
.azhum-trace-item .dot.ai{background:var(--kendo-color-warning)}
.azhum-trace-item .dot.ar{background:var(--az-red)}
.azhum-trace-code{font-weight:700;color:var(--az-text)}
.azhum-trace-name{color:var(--az-text-muted)}
.azhum-trace-pct{font-variant-numeric:var(--az-numeric);color:var(--az-text-2);font-weight:600}
.azhum-qbar{display:inline-block;width:180px;height:9px;border-radius:var(--az-radius-full);background:var(--az-surface-2);vertical-align:middle;overflow:hidden}
.azhum-qbar__fill{display:block;height:100%;border-radius:var(--az-radius-full)}

/* ── Balance · pack de columnas (saldo · mes ant · Δ · Dic AA · Δ año) + indicadores ── */
.azhum-rep-balrow{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.azhum-bal-main{flex:1 1 640px;min-width:0}
.azhum-bal-kpis{flex:0 0 290px}
.azhum-bal-kgrp{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--az-text-faint);margin:13px 0 4px;font-weight:600}
.azhum-bal-kgrp:first-of-type{margin-top:2px}
.azhum-bal-krow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px solid var(--az-border-subtle)}
.azhum-bal-krow:last-child{border-bottom:none}
.azhum-bal-krow > span:first-child{color:var(--az-text-2)}
.azhum-bal-krow .num{font-variant-numeric:var(--az-numeric);font-weight:600;color:var(--az-text)}
/* Ratios con explicación al pasar el ratón: cursor de ayuda + marca ⓘ tenue. */
.azhum-bal-krow.has-tip{cursor:help}
.azhum-bal-krow.has-tip .azhum-bal-klabel::after{content:"ⓘ";font-size:10px;margin-left:5px;color:var(--az-text-faint);vertical-align:1px}
.azhum-bal-krow.has-tip:hover .azhum-bal-klabel{color:var(--az-text)}

/* ════════════════════════════════════════════════════════════════════
   Skeleton-loading (UX) · placeholders mientras carga el dashboard, en el
   ARRANQUE y en CADA cambio de período. Reutiliza las clases de panel; las
   formas y el shimmer las da <TelerikSkeleton> (color del bridge Kendo ← --az-*).
   .azhum-sk solo organiza el apilado de las formas dentro del contenedor.
   ════════════════════════════════════════════════════════════════════ */
.azhum-sk{display:flex;flex-direction:column;gap:10px}
.azhum-hero__card.azhum-sk{justify-content:center;gap:8px}
.azhum-beat-strip.azhum-sk{flex-direction:row;align-items:center;gap:14px}
.azhum-sk .k-skeleton{border-radius:var(--az-radius-md)}

/* ── HOVER (feedback founder) · realce de fila UNIFORME en toda .azhum-tri (Balance, P&L,
   Dashboard, Ballena, KPIs); antes solo el grid del Informe anual resaltaba. El td:first-child
   es sticky con fondo propio → hay que repintarlo o la 1ª columna no se resalta al scrollear. ── */
.azhum-tri tbody tr:hover td,
.azhum-tri tbody tr:hover td:first-child{background:var(--az-surface-2)}
.azhum-tri tbody tr.sub:hover td,
.azhum-tri tbody tr.sub:hover td:first-child{background:color-mix(in srgb,var(--az-surface-3) 70%,transparent)}
.azhum-tri--summary tbody tr.result:hover td,
.azhum-tri--summary tbody tr.result:hover td:first-child{background:color-mix(in srgb,var(--az-blue) 12%,transparent)}
.azhum-tri--summary tbody tr.anchor:hover td,
.azhum-tri--summary tbody tr.anchor:hover td:first-child{background:var(--az-surface-2)}

/* Toggle "Mostrar líneas en 0" (visible solo con corte dimensional activo). */
.azhum-zerotoggle{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--az-text-faint);cursor:pointer;margin-left:auto;white-space:nowrap;padding:3px 10px;border:1px solid var(--az-border-subtle);border-radius:var(--az-radius-full);transition:border-color .15s,color .15s}
.azhum-zerotoggle:hover{color:var(--az-text-2);border-color:var(--az-border)}
.azhum-zerotoggle input{accent-color:var(--az-blue);cursor:pointer;margin:0}

/* Filtro de KPIs operacionales (MultiSelect para elegir qué tarjetas ver).
   position+z-index: el desplegable (AutoClose=false) debe quedar SIEMPRE por encima
   de la rejilla de tarjetas, no montarse por debajo. width:fit-content para que la
   caja de chips no ocupe todo el ancho. */
.azhum-kpi-filter{margin-bottom:13px;position:relative;z-index:30;width:fit-content;max-width:100%}

/* ── KPIs operacionales · secciones por categoría (cabecera plegable) ──────────────
   Sustituye al MultiSelect que se montaba sobre la barra de período: las tarjetas se
   agrupan por categoría y cada sección se pliega con un clic en su cabecera. */
.azhum-kpi-section{margin-bottom:18px}
.azhum-kpi-section-head{
  display:flex;align-items:baseline;gap:10px;width:100%;
  background:transparent;border:0;border-bottom:1px solid var(--az-border-subtle);
  padding:4px 2px 8px;margin-bottom:13px;cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .15s;
}
.azhum-kpi-section-head:hover{border-bottom-color:var(--az-border)}
.azhum-kpi-section-head:focus-visible{outline:2px solid var(--az-blue);outline-offset:3px;border-radius:var(--az-radius-sm)}
.azhum-kpi-section-caret{color:var(--az-text-faint);font-size:11px;line-height:1.4;width:12px;flex:0 0 auto}
.azhum-kpi-section-title{font-weight:700;font-size:15px;color:var(--az-text);letter-spacing:-.01em}
.azhum-kpi-section-sub{font-size:12px;color:var(--az-text-faint);flex:1 1 auto}
.azhum-kpi-section-count{
  font-family:var(--az-font-mono);font-size:11px;color:var(--az-text-muted);
  background:var(--az-surface-2);border:1px solid var(--az-border-subtle);
  border-radius:var(--az-radius-full);padding:1px 9px;flex:0 0 auto
}
.azhum-kpi-section-head.is-collapsed .azhum-kpi-section-title{color:var(--az-text-2)}
/* Ancho de tarjeta UNIFORME entre secciones: auto-fill (no auto-fit) conserva las columnas
   vacías, así una sección con UNA sola tarjeta la deja al ancho de columna en vez de estirarla
   a todo el ancho. Todas las tarjetas miden lo mismo tengan 1 o 6 en su sección. */
.azhum-kpi-section .azhum-kpi-strip{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* Toolbar de la rejilla CPK por cliente (título + buscador a la derecha) */
.azhum-cpk-grid .k-grid-toolbar{display:flex;align-items:center;gap:14px;padding:8px 10px}
.azhum-cpk-toolbar-title{font-size:12.5px;font-weight:600;color:var(--az-text-2);margin-right:auto}

/* ── Botón "Exportar" (M8.6) · limpio y de marca, no el Outline lavado de Telerik ──
   Superficie sutil + icono azul; al hover se rellena de azul. Coherente en todas las vistas. */
.azhum-export-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 14px;
  border:1px solid var(--az-border);border-radius:var(--az-radius-md);
  background:var(--az-surface-2);color:var(--az-text);
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.azhum-export-btn:hover{background:var(--az-blue);border-color:var(--az-blue);color:#fff}
.azhum-export-btn:hover svg{color:#fff}
.azhum-export-btn:active{transform:translateY(1px)}
.azhum-export-btn:focus-visible{outline:2px solid var(--az-blue);outline-offset:2px}
.azhum-export-btn svg{width:15px;height:15px;color:var(--az-blue);flex:0 0 auto}
.azhum-export-btn:disabled{color:var(--az-text-faint);background:var(--az-surface);border-color:var(--az-border);cursor:not-allowed}
.azhum-export-btn:disabled svg{color:var(--az-text-faint)}