/* =============================================
   NEIX Middle Office -- kpi.css
   Tab KPI: vista comparativa por oficial + drilldown.
   Estetica consistente con el resto: serif en titulares,
   sans en data, paleta crema/grafito/bordeaux.
   ============================================= */

/* ── Toolbar de filtros: segmented control de rango temporal ──── */
.kpi-toolbar-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.kpi-range {
  display: inline-flex;
  align-items: stretch;
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  padding: 3px;
  gap: 0;
}
.kpi-range-btn {
  background: transparent;
  border: none;
  color: var(--arena);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
  white-space: nowrap;
  position: relative;
}
.kpi-range-btn:hover {
  color: var(--grafito);
}
.kpi-range-btn.active {
  background: var(--grafito);
  color: var(--crema);
  font-weight: 500;
}
/* .kpi-range-q (Q1-Q4), .kpi-range-divider y .kpi-range-scope se
   removieron del HTML por pedido del usuario (solo Año en curso +
   Mes actual). Las reglas se borraron porque ya no hay elementos
   que las consuman. */

/* ── Subtabs por oficial: pills minimalistas ───────────────
   El color por oficial vive en un punto chiquito a la izquierda del
   nombre, no en una barra lateral. Mismo color identidad, mucho menos
   peso visual. */
.kpi-subtabs-v2 {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px solid var(--gris-claro);
}
.kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--arena);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 14px 8px;
  margin-bottom: -1px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  font-weight: 500;
}
.kpi-pill:hover {
  color: var(--grafito);
}
.kpi-pill.active {
  color: var(--grafito);
  border-bottom-color: var(--bordeaux);
}
/* Punto de color por oficial — paleta numerica asignada por orden
   alfabetico en kpi.js. Cuando esta active, el punto desaparece para
   no competir con la subraya bordeaux. */
.kpi-pill:not(.active)::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gris-claro);
  flex-shrink: 0;
}
.kpi-pill:not(.active).of-1::before { background: #d99a93; }
.kpi-pill:not(.active).of-2::before { background: #d4b674; }
.kpi-pill:not(.active).of-3::before { background: #9ec2e4; }
.kpi-pill:not(.active).of-4::before { background: #a8c87b; }
.kpi-pill:not(.active).of-5::before { background: #b59ec9; }
.kpi-pill:not(.active).of-6::before { background: #aeb6bf; }

.kpi-pill-icon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  color: var(--arena);
}
.kpi-pill.active .kpi-pill-icon {
  color: var(--grafito);
}

/* ── Loading inicial ────────────────────────── */
.kpi-content {
  animation: fadeIn 0.18s ease both;
}
.kpi-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--arena);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Hero del oficial (vista 360) ──────────────────────────────
   Reemplazo del viejo .kpi-of-head minimalista. Layout 3 columnas:
   avatar circular con iniciales | nombre y eyebrow | metrica estrella.
   El borde superior toma el color de la paleta del oficial (of-1..of-6)
   para reforzar identidad visual sin agregar otra "tag pill" suelta. */
/* Hero compacto: solo identidad (avatar + eyebrow + nombre). El monto
   estrella vive en la primera top-stat para no comer banda completa.
   2 columnas (no 3) — sin la metrica derecha. */
.kpi-of-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  margin-bottom: 18px;
  background: var(--blanco);
  border: 1px solid #dcd4c5;
  border-top: 2px solid var(--gris-claro);
}
/* La paleta numerica se hereda de la regla generica .kpi-mega-card.of-N
   que ya define border-top-color — duplicamos aca explicitamente para
   que el selector mas especifico (.kpi-of-hero.of-N) gane. */
/* Paleta levemente bajada en saturacion (mismas tonalidades que las
   mega-cards y los pills, para coherencia entre las 3 superficies). */
.kpi-of-hero.of-1 { border-top-color: #d99a93; }
.kpi-of-hero.of-2 { border-top-color: #d4b674; }
.kpi-of-hero.of-3 { border-top-color: #9ec2e4; }
.kpi-of-hero.of-4 { border-top-color: #a8c87b; }
.kpi-of-hero.of-5 { border-top-color: #b59ec9; }
.kpi-of-hero.of-6 { border-top-color: #aeb6bf; }

.kpi-of-hero-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--grafito);
  background: var(--crema);
  border: 1px solid var(--gris-claro);
  letter-spacing: 0.02em;
  user-select: none;
  flex-shrink: 0;
}
/* Mismo set de combinaciones (bg/border/text) que antes pero con la
   paleta desaturada nueva. Mantiene el contraste de texto adentro
   del avatar (los colores oscuros AAA-compliantes que ya estaban). */
.kpi-of-hero.of-1 .kpi-of-hero-avatar { background: #f4dad5; border-color: #d99a93; color: #8c3a3a; }
.kpi-of-hero.of-2 .kpi-of-hero-avatar { background: #f4e4c5; border-color: #d4b674; color: #8a5a0f; }
.kpi-of-hero.of-3 .kpi-of-hero-avatar { background: #dfecf7; border-color: #9ec2e4; color: #1a4d7a; }
.kpi-of-hero.of-4 .kpi-of-hero-avatar { background: #e3edd0; border-color: #a8c87b; color: #3a6b1c; }
.kpi-of-hero.of-5 .kpi-of-hero-avatar { background: #e9deef; border-color: #b59ec9; color: #5f3a7b; }
.kpi-of-hero.of-6 .kpi-of-hero-avatar { background: #e6e9ed; border-color: #aeb6bf; color: #4a5862; }

.kpi-of-hero-id {
  min-width: 0;
}
.kpi-of-hero-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arena);
  margin-bottom: 3px;
}
.kpi-of-hero-name {
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--grafito);
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* Responsive: en pantallas chicas, achicar avatar y nombre un poco
   mas. El hero ya es 2 cols compactas — no hace falta apilar. */
@media (max-width: 540px) {
  .kpi-of-hero {
    padding: 14px 18px;
    gap: 14px;
  }
  .kpi-of-hero-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .kpi-of-hero-name {
    font-size: 18px;
  }
}

/* Compat: el viejo .kpi-of-head todavia puede aparecer si algun consumer
   externo lo referencia. Lo dejamos por defecto vacio (no rompe nada). */
.kpi-of-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--gris-claro);
}
.kpi-of-tag {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--gris-claro);
  color: var(--arena);
  background: var(--crema);
  padding: 3px 9px;
  font-weight: 500;
}
.kpi-of-tag.of-1 {
  color: #8c3a3a;
  background: #f8e4e2;
  border-color: #dfb0ab;
}
.kpi-of-tag.of-2 {
  color: #8a5a0f;
  background: #f9ecd6;
  border-color: #e5c788;
}
.kpi-of-tag.of-3 {
  color: #1a4d7a;
  background: #e8f1fa;
  border-color: #bbd3eb;
}
.kpi-of-tag.of-4 {
  color: #3a6b1c;
  background: #ecf3de;
  border-color: #bed692;
}
.kpi-of-tag.of-5 {
  color: #5f3a7b;
  background: #efe7f3;
  border-color: #c9b4d7;
}
.kpi-of-tag.of-6 {
  color: #4a5862;
  background: #eceef1;
  border-color: #c3cbd2;
}
.kpi-of-name {
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--grafito);
  letter-spacing: -0.01em;
}

/* ── Section ─────────────────────────────────── */
.kpi-section {
  margin-bottom: 18px;
  background: var(--blanco);
  border: 1px solid #dcd4c5;
  box-shadow:
    0 1px 0 rgba(60, 60, 60, 0.04),
    0 2px 6px rgba(60, 60, 60, 0.05);
}
.kpi-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
  border-left: 3px solid var(--bordeaux);
}
/* Cuando un <details> esta cerrado no hay border-bottom (no hay body
   visible), asi que el border-bottom queda dibujando una linea sin
   sentido. Lo escondemos cuando esta cerrado. */
.kpi-section-collapsible:not([open]) > .kpi-section-head {
  border-bottom-color: transparent;
}
.kpi-section-title {
  font-family: var(--ff-serif);
  font-size: 16px;
  color: var(--grafito);
  letter-spacing: -0.005em;
}
/* Sub-rotulo dentro del titulo: indica si la seccion es por-mes o total */
.kpi-section-scope {
  font-family: var(--ff-sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena);
  margin-left: 10px;
  font-weight: 400;
  font-style: normal;
  vertical-align: middle;
}
.kpi-section-total {
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--grafito);
  font-variant-numeric: tabular-nums;
}
.kpi-section-total span {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arena);
  margin-left: 6px;
}

/* ── Grid comparativa (vista General) ────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--gris-claro);
}
.kpi-cell {
  background: var(--blanco);
  padding: 18px 16px;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.12s,
    box-shadow 0.12s;
  position: relative;
  outline: none;
}
.kpi-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gris-claro);
  transition: background 0.12s;
}
.kpi-cell:hover {
  background: var(--crema);
}
.kpi-cell:focus-visible {
  background: var(--crema);
  box-shadow: inset 0 0 0 1px var(--bordeaux);
}
/* Acento lateral por oficial — mismo color que cards de AFs */
.kpi-cell.of-1::before {
  background: #dfb0ab;
}
.kpi-cell.of-2::before {
  background: #e5c788;
}
.kpi-cell.of-3::before {
  background: #bbd3eb;
}
.kpi-cell.of-4::before {
  background: #bed692;
}
.kpi-cell.of-5::before {
  background: #c9b4d7;
}
.kpi-cell.of-6::before {
  background: #c3cbd2;
}
.kpi-cell:hover::before {
  width: 3px;
}

.kpi-cell-name {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arena);
  margin-bottom: 8px;
}
.kpi-cell-val {
  font-family: var(--ff-serif);
  font-size: 28px;
  color: var(--grafito);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.kpi-cell-sub {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--arena);
}

/* ── Body de oficial individual ──────────────── */
.kpi-section-body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
}
.kpi-block {
  padding: 18px 22px;
  border-right: 1px solid var(--gris-claro);
}
.kpi-block:last-child {
  border-right: none;
}
.kpi-block-lbl {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arena);
  font-weight: 500;
  margin-bottom: 12px;
}

/* Chips para breakdowns por tipo / estado */
.kpi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--crema);
  border: 1px solid var(--gris-claro);
  padding: 4px 10px;
  font-size: 11px;
}
.kpi-chip-lbl {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena);
}
.kpi-chip-val {
  font-weight: 500;
  color: var(--grafito);
  font-variant-numeric: tabular-nums;
}
/* Chips por tipo (mismo color que el calendario) */
.kpi-chip-cafe {
  border-left: 2px solid #7a5c00;
}
.kpi-chip-almuerzo {
  border-left: 2px solid var(--ambar-tx, #8a5a0f);
}
.kpi-chip-cena {
  border-left: 2px solid var(--bordeaux);
}
.kpi-chip-reunion {
  border-left: 2px solid var(--azul, #1a4d7a);
}
.kpi-chip-llamada {
  border-left: 2px solid var(--verde-neix, #3a6b1c);
}
.kpi-chip-otro {
  border-left: 2px solid var(--arena);
}

/* Top-list con barras */
.kpi-toplist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi-toplist-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  gap: 14px;
  align-items: center;
  font-size: 12px;
}
.kpi-toplist-name {
  color: var(--grafito);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-toplist-bar {
  height: 6px;
  background: var(--crema);
  border: 1px solid var(--gris-claro);
  position: relative;
  overflow: hidden;
}
.kpi-toplist-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--bordeaux) 0%, #b85a5a 100%);
  transition: width 0.3s ease;
}
.kpi-toplist-num {
  font-variant-numeric: tabular-nums;
  color: var(--grafito);
  font-size: 12px;
  white-space: nowrap;
}
.kpi-toplist-num span {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena);
  margin-left: 4px;
}

.kpi-empty {
  padding: 14px 0;
  font-size: 11.5px;
  color: var(--arena);
  font-style: italic;
}

/* ── Stub de Facturacion ─────────────────────── */
.kpi-stub-tag {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--ff-sans);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bordeaux);
  background: var(--blanco);
  border: 1px solid var(--bordeaux);
  padding: 2px 8px;
  vertical-align: middle;
  font-weight: 500;
  font-style: normal;
}
.kpi-section-stub .kpi-section-head {
  background: linear-gradient(180deg, var(--crema) 0%, #fbf8f2 100%);
}
.kpi-stub-body {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 36px 28px;
  background: repeating-linear-gradient(-45deg, var(--blanco) 0 12px, #fafafa 12px 24px);
}
.kpi-stub-icon {
  width: 56px;
  height: 56px;
  border: 1px dashed var(--gris-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--arena);
  flex-shrink: 0;
  background: var(--blanco);
}
.kpi-stub-text {
  min-width: 0;
}
.kpi-stub-title {
  font-family: var(--ff-serif);
  font-size: 16px;
  color: var(--grafito);
  margin-bottom: 6px;
}
.kpi-stub-desc {
  font-size: 12.5px;
  color: var(--arena);
  line-height: 1.6;
}

/* Cards comparativas stub: misma forma que .kpi-cell pero con
   fondo rayado y "—" atenuado, para indicar slot pendiente de datos. */
.kpi-cell-stub {
  background: repeating-linear-gradient(-45deg, var(--blanco) 0 10px, #fafafa 10px 20px);
  cursor: default;
}
.kpi-cell-stub:hover {
  background: repeating-linear-gradient(-45deg, var(--crema) 0 10px, #f5f1ea 10px 20px);
}
.kpi-cell-stub .kpi-cell-val {
  color: var(--arena);
  opacity: 0.55;
}
.kpi-cell-stub .kpi-cell-sub {
  font-style: italic;
  color: var(--bordeaux);
  opacity: 0.7;
}
/* Total del header de una seccion stub: en bajada, italica */
.kpi-section-total-stub {
  font-style: italic;
  color: var(--arena);
  opacity: 0.7;
}

/* ── Delta (variacion vs anio anterior) ───────── */
.kpi-cell-delta {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kpi-cell-delta span {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arena);
  opacity: 0.8;
}
.kpi-section-delta {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  margin-left: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Delta porcentual (vs año anterior, vs forecast, etc.) — semaforo
   semantico que debe ganar sobre cualquier color que el contenedor
   herede (kpi-mo-stat-sub, kpi-mega-main-delta, etc. tienen sus
   propios color: var(--arena) que ganaban por orden de cascada).
   !important es legitimo aca: es un indicador de estado, NO un color
   estilistico. */
.delta-pos {
  color: #2d6a4f !important;
  font-weight: 500;
}
.delta-neg {
  color: var(--bordeaux) !important;
  font-weight: 500;
}
.delta-neutral {
  color: var(--arena);
}
.delta-pos::before {
  content: '▲ ';
  font-size: 0.85em;
}
.delta-neg::before {
  content: '▼ ';
  font-size: 0.85em;
}

/* ── Semaforo de cumplimiento / activacion ────── */
.kpi-pct-val.cmp-ok {
  color: #2d6a4f;
}
.kpi-pct-val.cmp-warn {
  color: #b07f1f;
}
.kpi-pct-val.cmp-bad {
  color: var(--bordeaux);
}
.kpi-pct-val.cmp-na {
  color: var(--arena);
  opacity: 0.6;
}

/* En cells de % grande, mantener el size del titular pero con color del semaforo */
.kpi-cell-val.kpi-pct-val {
  font-variant-numeric: tabular-nums;
}

/* Acento sutil en la seccion principal de Facturacion */
.kpi-section-flag .kpi-section-head {
  background: linear-gradient(180deg, #faf6ee 0%, var(--crema) 100%);
  border-bottom-color: #e5c788;
}
.kpi-section-flag {
  border-color: #e5c788;
}

/* ── Top-stats row del drilldown por oficial ──── */
.kpi-topstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gris-claro);
  margin-bottom: 26px;
  border: 1px solid var(--gris-claro);
}
/* Variante 6-cols: para el drilldown del oficial donde sumamos
   Encuentros + Trades enviados a los 4 stats financieros. */
.kpi-topstats-6 {
  grid-template-columns: repeat(6, 1fr);
}
/* Variante 5-cols: vista 360 del oficial. El "Facturado" salio al hero,
   quedan 5 stats operativas (Forecast / Cumpl / Activacion / Enc / Trd). */
.kpi-topstats-5 {
  grid-template-columns: repeat(5, 1fr);
}
.kpi-stat {
  background: var(--blanco);
  padding: 16px 18px;
  min-width: 0;
}
/* Cards clickeables (deep-link a Calendario / Trades). Hover sutil para
   indicar que son interactivas; sin cambiar el layout. */
.kpi-stat.is-clickable {
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.kpi-stat.is-clickable:hover {
  background: var(--crema);
  box-shadow: 0 1px 0 var(--bordeaux);
}
.kpi-stat.is-clickable:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: -2px;
}
.kpi-stat-lbl {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena);
  margin-bottom: 8px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-stat-val {
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--grafito);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.kpi-topstats-6 .kpi-stat-val {
  font-size: 20px;
}
.kpi-stat-sub {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-stat-sub span {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 4px;
  opacity: 0.8;
}

/* ── Tabla de detalle por manager ─────────────── */
.kpi-section-body-full {
  display: block;
  padding: 0;
}
.kpi-empty-padded {
  padding: 28px 22px;
}
.kpi-empty-padded code {
  background: var(--crema);
  border: 1px solid var(--gris-claro);
  padding: 1px 6px;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.kpi-mgr-table {
  display: flex;
  flex-direction: column;
}
.kpi-mgr-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 130px 90px 80px 60px 36px;
  gap: 14px;
  align-items: center;
  padding: 14px 24px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s;
}
/* Zebra striping para escanear filas largas mas facil. La head no
   cuenta para el nth-child de los filas de datos (la salteamos
   marcandola con la clase). */
.kpi-mgr-row:not(.kpi-mgr-row-head):nth-child(even) {
  background: #fcfbf8;
}
.kpi-mgr-row-head {
  background: var(--crema);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena);
  font-weight: 500;
  padding: 11px 24px;
  border-bottom: 1px solid var(--gris-claro);
}
.kpi-mgr-row:not(.kpi-mgr-row-head):hover {
  background: #f4efe6;
}

/* Mini boton "ficha" — atajo a Gestion › AFs del manager */
.kpi-mgr-ficha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--arena);
  cursor: pointer;
  padding: 0;
  transition:
    color 0.12s,
    border-color 0.12s,
    background 0.12s,
    transform 0.12s;
  font-family: inherit;
}
.kpi-mgr-ficha-btn:hover {
  color: var(--bordeaux);
  border-color: var(--bordeaux);
  background: var(--blanco);
}
.kpi-mgr-ficha-btn:active {
  transform: scale(0.92);
}
.kpi-mgr-ficha-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(171, 25, 48, 0.25);
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}
.kpi-mgr-name {
  color: var(--grafito);
  font-weight: 500;
  text-transform: capitalize;
  min-width: 0;
}
.kpi-mgr-bar {
  margin-top: 5px;
  height: 4px;
  background: var(--crema);
  border: 1px solid var(--gris-claro);
  position: relative;
  overflow: hidden;
}
.kpi-mgr-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--bordeaux) 0%, #b85a5a 100%);
  transition: width 0.3s ease;
}
.kpi-mgr-num {
  color: var(--grafito);
}
.ta-r {
  text-align: right;
}
.ta-c {
  text-align: center;
}

/* Indicador activo / inactivo */
.kpi-dot-on,
.kpi-dot-off {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
.kpi-dot-on {
  background: #2d6a4f;
  box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.15);
}
.kpi-dot-off {
  background: var(--gris-claro);
  border: 1px solid #c0bab1;
}

/* ════════════════════════════════════════════════════════════════
   VISTA GENERAL: hero del MO + 5 mega-cards por oficial
   ════════════════════════════════════════════════════════════════ */

/* ── Hero del MO ───────────────────────────────── */
.kpi-mo-hero {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  margin-bottom: 32px;
}
.kpi-mo-stat {
  padding: 26px 30px;
  border-right: 1px solid var(--gris-claro);
}
.kpi-mo-stat:last-child {
  border-right: none;
}
.kpi-mo-stat-lbl {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arena);
  font-weight: 500;
  margin-bottom: 14px;
}
.kpi-mo-stat-val {
  font-family: var(--ff-serif);
  font-size: 32px;
  color: var(--grafito);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.kpi-mo-stat-sub {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
}
.kpi-mo-stat-sub span {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 4px;
  opacity: 0.8;
}
/* La primera card (Facturacion) ocupa 2fr — sin gradient ni background
   distinto, solo el monto mas grande para destacar la metrica estrella. */
.kpi-mo-stat-hero .kpi-mo-stat-val {
  font-size: 42px;
}

/* ── Grid de mega-cards por oficial ──────────── */
.kpi-mega-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.kpi-mega-card {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-top: 2px solid var(--gris-claro);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition:
    box-shadow 0.18s,
    border-color 0.18s;
  position: relative;
  outline: none;
  min-width: 0;
}
.kpi-mega-card:hover {
  box-shadow: 0 2px 14px rgba(60, 60, 60, 0.06);
}
.kpi-mega-card:focus-visible {
  box-shadow:
    inset 0 0 0 1px var(--bordeaux),
    0 2px 14px rgba(60, 60, 60, 0.06);
}
/* Acento superior por oficial — 2px sutil, paleta levemente bajada
   en saturacion para minimalismo. */
.kpi-mega-card.of-1 { border-top-color: #d99a93; }
.kpi-mega-card.of-2 { border-top-color: #d4b674; }
.kpi-mega-card.of-3 { border-top-color: #9ec2e4; }
.kpi-mega-card.of-4 { border-top-color: #a8c87b; }
.kpi-mega-card.of-5 { border-top-color: #b59ec9; }
.kpi-mega-card.of-6 { border-top-color: #aeb6bf; }

/* Stub: cuando el oficial no tiene datos en el rango */
.kpi-mega-card.is-stub {
  background: var(--crema);
  cursor: default;
  opacity: 0.7;
}
.kpi-mega-card.is-stub:hover {
  box-shadow: none;
}

/* Header de la mega-card. Sin border-bottom — el espacio interno
   alcanza para separar visualmente del bloque siguiente. */
.kpi-mega-head {
  padding: 18px 20px 0;
}
.kpi-mega-name {
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--grafito);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body principal: facturacion grande + delta. */
.kpi-mega-main {
  padding: 14px 20px 18px;
}
.kpi-mega-main-val {
  font-family: var(--ff-serif);
  font-size: 26px;
  color: var(--grafito);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.kpi-mega-main-delta {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
}
.kpi-mega-main-delta span {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 5px;
  opacity: 0.8;
}

/* Stats secundarias: cumplimiento + activación lado a lado. Solo un
   divider horizontal liviano (no doble division con el head). */
.kpi-mega-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--gris-claro);
}
.kpi-mega-sec-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--gris-claro);
}
.kpi-mega-sec-cell:last-child {
  border-right: none;
}
.kpi-mega-sec-lbl {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena);
  margin-bottom: 6px;
  font-weight: 500;
}
.kpi-mega-sec-val {
  font-family: var(--ff-serif);
  font-size: 17px;
  color: var(--grafito);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.kpi-mega-sec-sub {
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lista compacta de top managers dentro de la mega-card */
.kpi-mega-tops {
  padding: 11px 16px 14px;
  border-top: 1px solid var(--gris-claro);
}
.kpi-mega-tops-head {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena);
  margin-bottom: 8px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.kpi-mega-tops-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.kpi-mega-tops-row + .kpi-mega-tops-row {
  border-top: 1px dashed #ede7dc;
}
.kpi-mega-tops-name {
  color: var(--grafito);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.kpi-mega-tops-num {
  color: var(--grafito);
  font-weight: 500;
  white-space: nowrap;
  font-size: 10.5px;
}
.kpi-mega-tops-row .kpi-mega-tops-num small {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--arena);
  margin-left: 4px;
  font-weight: 400;
}

/* Footer de actividad: encuentros, trades, proyectos en una linea.
   Sin background distinto — solo un divider liviano arriba, el mismo
   blanco de la card. */
.kpi-mega-foot {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--gris-claro);
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}
.kpi-mega-foot-item strong {
  color: var(--grafito);
  font-weight: 500;
  margin-right: 3px;
}
.kpi-mega-foot-sep {
  color: var(--gris-claro);
}

/* Body compacto cuando es stub (sin datos). */
.kpi-mega-empty {
  padding: 26px 20px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--arena);
  text-align: center;
}

/* ── Sección colapsable (<details>) ──────────── */
.kpi-section-collapsible {
  /* Hereda .kpi-section: borde + fondo. */
}
.kpi-section-collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  outline: none;
  /* hereda .kpi-section-head: padding, fondo, etc. */
}
.kpi-section-collapsible > summary::-webkit-details-marker {
  display: none;
}
.kpi-section-collapsible > summary::marker {
  content: '';
}
.kpi-section-collapsible > summary:hover {
  background: #faf6ee;
}
.kpi-section-collapsible > summary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--bordeaux);
}
.kpi-section-summary-right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kpi-section-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--arena);
  transition:
    transform 0.2s ease,
    color 0.15s;
  flex-shrink: 0;
}
.kpi-section-collapsible[open] > summary .kpi-section-chevron {
  transform: rotate(180deg);
  color: var(--bordeaux);
}
.kpi-section-collapsible > summary:hover .kpi-section-chevron {
  color: var(--grafito);
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 1280px) {
  /* Cards mas compactas en monitores estandar 1366x768 */
  .kpi-mega-main-val {
    font-size: 21px;
  }
  .kpi-mega-sec-val {
    font-size: 16px;
  }
  .kpi-mega-head {
    padding: 12px 14px 8px;
  }
  .kpi-mega-main {
    padding: 12px 14px 10px;
  }
  .kpi-mega-tops {
    padding: 10px 14px 12px;
  }
  .kpi-mega-foot {
    padding: 9px 14px;
    font-size: 9.5px;
  }
  .kpi-mega-sec-cell {
    padding: 10px 12px;
  }
}
@media (max-width: 1280px) and (min-width: 1025px) {
  .kpi-topstats-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .kpi-topstats-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .kpi-section-body {
    grid-template-columns: 1fr;
  }
  .kpi-block {
    border-right: none;
    border-bottom: 1px solid var(--gris-claro);
  }
  .kpi-block:last-child {
    border-bottom: none;
  }
  .kpi-topstats {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-topstats-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-topstats-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-mgr-row {
    grid-template-columns: minmax(0, 2fr) 110px 70px 60px 50px 32px;
    gap: 10px;
    padding: 10px 16px;
  }
  .kpi-mgr-row-head {
    padding: 9px 16px;
  }
  .kpi-mo-hero {
    grid-template-columns: 1fr 1fr;
  }
  /* Tablet ancho: 3 cards por fila. La cascada 5 -> 3 -> 2 -> 1 es
     suave; antes saltabamos de 5 a 2 (cards el doble de grandes). */
  .kpi-mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .kpi-mega-grid > .kpi-mega-card:nth-child(5):last-child {
    grid-column: auto;
  }
  .kpi-toolbar-v2 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .kpi-range {
    overflow-x: auto;
  }
}
/* Breakpoint intermedio: entre tablet (3 cols) y mobile (1 col),
   pasamos por 2 cols. Asi la cascada de mega-cards queda
   5 -> 3 -> 2 -> 1 sin saltos bruscos. */
@media (max-width: 820px) {
  .kpi-mega-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-cell-val {
    font-size: 22px;
  }
  .kpi-stub-body {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
  }
  .kpi-topstats {
    grid-template-columns: 1fr;
  }
  .kpi-topstats-6 {
    grid-template-columns: 1fr;
  }
  .kpi-topstats-5 {
    grid-template-columns: 1fr;
  }
  .kpi-mgr-row {
    grid-template-columns: 1fr 80px 60px 30px;
    gap: 8px;
    padding: 10px 14px;
  }
  .kpi-mgr-row > :nth-child(4),
  .kpi-mgr-row > :nth-child(5) {
    display: none;
  }
  .kpi-stat-val {
    font-size: 22px;
  }
  .kpi-mo-hero {
    grid-template-columns: 1fr;
  }
  .kpi-mo-stat-val {
    font-size: 24px;
  }
  .kpi-mo-stat-hero .kpi-mo-stat-val {
    font-size: 28px;
  }
  .kpi-pill {
    font-size: 10.5px;
    padding: 6px 11px;
    letter-spacing: 0.05em;
  }
  .kpi-mega-grid {
    grid-template-columns: 1fr;
  }
  .kpi-mega-grid > .kpi-mega-card:nth-child(5):last-child {
    grid-column: auto;
  }
}

/* K2: banner visible si Data.queryKpiFacturacion fallo. Color ambar
   (warning, no error) porque la UI sigue renderizando lo que se pudo
   con cache local — solo falta la facturacion. */
.kpi-banner-warn {
  background: #fef3e2;
  border-left: 3px solid #d4920f;
  color: var(--grafito);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.kpi-banner-warn strong {
  font-weight: 600;
}
.kpi-banner-warn .btn-link {
  margin-left: 8px;
}

/* Estado disabled de los botones Q futuros del segmented control.
   Combina opacity bajo + cursor not-allowed + sin hover state + texto
   con linethrough discreto para que se lea como "todavia no se puede"
   y NO se pueda confundir con el estilo active. */
.kpi-range .kpi-range-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--arena);
  text-decoration-thickness: 1px;
  color: var(--arena);
}
.kpi-range .kpi-range-btn:disabled:hover {
  background: transparent;
  color: var(--arena);
}

/* Panel de diagnostico: managers en mo_kpi_facturacion sin oficial. Vive
   solo en la subtab General; aparece colapsado para no contaminar la
   vista, expandible si hay algo que investigar. */
.kpi-diag-panel {
  margin-bottom: 18px;
  background: #fef6f0;
  border-left: 3px solid #c97b2a;
  color: var(--grafito);
}
.kpi-diag-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  user-select: none;
}
.kpi-diag-summary::-webkit-details-marker {
  display: none;
}
.kpi-diag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #c97b2a;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.kpi-diag-title strong {
  font-weight: 600;
}
.kpi-diag-sub {
  color: var(--arena);
  margin-left: 4px;
}
.kpi-diag-chevron {
  margin-left: auto;
  transition: transform 0.15s ease;
  color: var(--arena);
  font-size: 18px;
  line-height: 1;
}
.kpi-diag-panel[open] .kpi-diag-chevron {
  transform: rotate(90deg);
}
.kpi-diag-body {
  padding: 0 16px 16px 16px;
}
.kpi-diag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 10px;
  background: #fff;
}
.kpi-diag-table th,
.kpi-diag-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid #ede7dc;
}
.kpi-diag-table th {
  background: #faf6f0;
  font-weight: 600;
  color: var(--arena);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpi-diag-table td:nth-child(3),
.kpi-diag-table th:nth-child(3),
.kpi-diag-table td:nth-child(4),
.kpi-diag-table th:nth-child(4) {
  text-align: right;
}
/* Boton "Copiar SQL" en la columna Accion de las tablas de paneles
   diagnosticos. Discreto: link-style + uppercase, sin background hasta
   hover. is-copied flippea verde por 1.5s post-click como feedback. */
.kpi-diag-copy {
  background: transparent;
  border: 1px solid var(--gris-claro);
  color: var(--arena);
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}
.kpi-diag-copy:hover {
  border-color: var(--bordeaux);
  color: var(--bordeaux);
  background: #fff;
}
.kpi-diag-copy.is-copied {
  border-color: var(--verde-ok, #3a7d23);
  color: var(--verde-ok, #3a7d23);
  background: #f1f8ec;
}
.kpi-diag-copy:focus-visible {
  outline: 1px dotted var(--bordeaux);
  outline-offset: 2px;
}

.kpi-diag-hint {
  font-size: 12px;
  color: var(--arena);
  line-height: 1.55;
}
.kpi-diag-hint code {
  background: #fff;
  padding: 1px 5px;
  border: 1px solid #ede7dc;
  font-size: 11.5px;
}
.kpi-diag-hint ol {
  margin: 6px 0 0 18px;
  padding: 0;
}
.kpi-diag-hint li {
  margin-bottom: 4px;
}

/* Variante "info" del panel de diagnostico: drift de oficial entre MariaDB
   y mo_managers. No es un error funcional (el dashboard usa el canonico),
   solo data hygiene. Tonalidad azul-gris en vez del naranja de huerfanos. */
.kpi-diag-panel.kpi-diag-panel-info {
  background: #f1f5f9;
  border-left-color: #3a6ea5;
}
.kpi-diag-panel.kpi-diag-panel-info .kpi-diag-icon {
  background: #3a6ea5;
}

/* Banner critico (fondo rojo, no warning amarillo): se usa cuando el
   dashboard esta degradado por fallo de carga (ej. directorio de managers
   no disponible) y los numeros pueden ser falsos. Mas prominente que
   .kpi-banner-warn porque el usuario tiene que NO ignorarlo. */
.kpi-banner-err {
  background: #fdebec;
  border-left: 3px solid var(--bordeaux, #ab1930);
  color: var(--grafito);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.55;
}
.kpi-banner-err strong {
  font-weight: 600;
  color: var(--bordeaux, #ab1930);
}

/* ── Grid de mini-cards de trades enviados (drilldown del oficial) ──
   Reusa las clases .res-trade-card de css/pages/resumen.css (mismas
   tarjetas que aparecen en el bloque "Trades enviados recientes" del
   Resumen). Aca solo definimos el grid que las contiene. */
.kpi-trd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  border: 1px solid var(--gris-claro);
  background: var(--gris-claro);
  gap: 1px;
}
.kpi-trd-grid .res-trade-card {
  border-right: none;
  margin: 0;
}

/* ── Grid de mini-cards de proyectos en curso (drilldown del oficial)
   ── Cards compactas con nombre + estado pill + barra de progreso.
   Replicas en formato card lo que antes era un toplist con barras. */
.kpi-proy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 16px;
}
.kpi-proy-card {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kpi-proy-card-name {
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--grafito);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.kpi-proy-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kpi-proy-card-resp {
  font-size: 10.5px;
  color: var(--arena);
  letter-spacing: 0.04em;
}
.kpi-proy-card-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.kpi-proy-card-bar {
  flex: 1;
  height: 4px;
  background: var(--gris-claro);
  position: relative;
  overflow: hidden;
}
.kpi-proy-card-bar-fill {
  height: 100%;
  background: var(--verde-neix);
  transition: width 0.4s ease;
}
.kpi-proy-card-bar-fill.low { background: var(--arena); }
.kpi-proy-card-bar-fill.mid { background: var(--azul); }
.kpi-proy-card-bar-fill.high { background: var(--verde-ok); }
.kpi-proy-card-pct {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--arena);
  min-width: 32px;
  text-align: right;
}

/* ── Grid de mini-cards de encuentros (drilldown del oficial) ──
   Cards con fecha + tipo (con icono) + titulo + asistentes + lugar.
   Reemplaza el viejo bloque "Por tipo (chips) + Top managers (toplist)". */
.kpi-enc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px;
}
.kpi-enc-card {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.kpi-enc-card:hover {
  border-color: var(--arena);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.kpi-enc-card.is-past {
  opacity: 0.65;
}
.kpi-enc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.kpi-enc-card-fecha {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--arena);
  text-transform: lowercase;
  font-variant-numeric: tabular-nums;
}
.kpi-enc-card-tipo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arena);
  background: var(--crema);
  border: 1px solid var(--gris-claro);
  padding: 2px 8px;
  font-weight: 500;
}
.kpi-enc-card-tipo-icon {
  display: inline-flex;
  width: 11px;
  height: 11px;
  color: currentColor;
}
.kpi-enc-card-tipo-icon svg {
  width: 100%;
  height: 100%;
}
/* Color discreto por tipo (mismas tonalidades que el calendario, mas
   sutiles que un fondo solido). */
.kpi-enc-card-tipo.t-cafe     { color: #8a5a0f; }
.kpi-enc-card-tipo.t-almuerzo { color: #3a6b1c; }
.kpi-enc-card-tipo.t-cena     { color: #5f3a7b; }
.kpi-enc-card-tipo.t-reunion  { color: #1a4d7a; }
.kpi-enc-card-tipo.t-llamada  { color: #8c3a3a; }
.kpi-enc-card-tipo.t-cumple   { color: #b07f1f; }
.kpi-enc-card-tipo.t-otro     { color: var(--arena); }

.kpi-enc-card-title {
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--grafito);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-top: 2px;
}
.kpi-enc-card-asistentes {
  font-size: 11.5px;
  color: var(--arena);
  line-height: 1.4;
  word-wrap: break-word;
}
.kpi-enc-card-lugar {
  font-size: 11px;
  color: var(--arena);
  letter-spacing: 0.02em;
}

/* ── Drilldown del oficial: posts del foro ─────────────────
   Lista compacta de los ultimos N posts publicados por el oficial.
   Items "papelitos": fecha + tag chip + contenido truncado a 3 lineas.
   Click no hace nada por ahora — es solo visualizacion. */
.kpi-foro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kpi-foro-item {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi-foro-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kpi-foro-fecha {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
}
.kpi-foro-tag {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid transparent;
}
/* Paleta por tag: matchea visualmente las pills del foro pero mas chico.
   Si se agregan tags nuevos al composer, agregar la regla --<tag> aca. */
.kpi-foro-tag--avisos       { background: var(--rojo-bg);   color: var(--rojo-tx);   border-color: var(--rojo-bg);   }
.kpi-foro-tag--novedades    { background: var(--azul-bg);   color: var(--azul-tx);   border-color: var(--azul-bg);   }
.kpi-foro-tag--operativa    { background: var(--ambar-bg);  color: var(--ambar-tx);  border-color: var(--ambar-bg);  }
.kpi-foro-tag--productores  { background: var(--verde-bg);  color: var(--verde-tx);  border-color: var(--verde-bg);  }
.kpi-foro-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--grafito);
  /* Truncar a 3 lineas: si el post es largo, ellipsis. Asi un post
     gigante no rompe el ritmo visual de la lista. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}