/* ==========================================================================
   SECPLAM · INICIO — TABLERO EJECUTIVO (prefijo .ix-)
   ========================================================================== */
/* El tablero reemplaza los bloques anteriores del Inicio (otros universos de cálculo) */
#view-dashboard.ix-on > .stats-grid,
#view-dashboard.ix-on #cp-home-pipeline,
#view-dashboard.ix-on #ux-home-kpis,
#view-dashboard.ix-on #fl-home-resumen,
#view-dashboard.ix-on > .filter-panel,
#view-dashboard.ix-on > .dashboard-split-layout { display: none !important; }
#ix-root { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
.ix-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 12px; padding: 10px 14px; font-size: 0.8rem; line-height: 1.45; }
.ix-scope svg { width: 16px; height: 16px; flex-shrink: 0; }
.ix-scope span { flex: 1; min-width: 240px; }
.ix-sec { padding: 16px 18px !important; }
.ix-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ix-sec-h h3 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.ix-sec-h h3 svg { width: 17px; height: 17px; color: var(--primary-start); }
.ix-sec-h > span { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }
.ix-note { font-size: 0.74rem; color: var(--text-muted); line-height: 1.45; }
.ix-muted { font-size: 0.8rem; color: var(--text-muted); }
.ix-ok { display: flex; align-items: center; gap: 8px; color: #047857; font-weight: 600; font-size: 0.84rem; background: #f0fdf4; border-radius: 10px; padding: 12px; }
.ix-ok svg { width: 18px; height: 18px; }

/* KPI */
.ix-kpis { display: grid; gap: 10px; }
.ix-kpis-main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ix-kpis-cond { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: -6px; }
.ix-kpis-cond .ix-kpi { padding: 10px 12px; }
.ix-kpis-cond .ix-kpi-ico { width: 34px; height: 34px; }
.ix-kpis-cond .ix-kpi-t strong { font-size: 1.25rem; }
.ix-kpi { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid var(--border-color); border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; font-family: inherit; cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; min-width: 0; }
.ix-kpi:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07); transform: translateY(-1px); }
.ix-kpi-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--c); }
.ix-kpi-ico svg { width: 20px; height: 20px; }
.ix-kpi-t { display: flex; flex-direction: column; min-width: 0; }
.ix-kpi-t em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.ix-kpi-t strong { font-size: 1.45rem; font-weight: 800; color: var(--text-main); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ix-kpi-t small { font-size: 0.7rem; color: var(--text-muted); line-height: 1.3; }

/* Etapas */
.ix-row2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ix-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ix-stages { display: flex; flex-direction: column; gap: 6px; }
.ix-stage { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px 110px; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 7px 8px; font-family: inherit; cursor: pointer; }
.ix-stage:hover { background: #f8fafc; border-color: var(--border-color); }
.ix-st-n { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--text-main); }
.ix-st-n b { width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ix-st-bar { display: block; height: 16px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
.ix-st-fill { display: flex; height: 100%; min-width: 3px; border-radius: 5px; overflow: hidden; }
.ix-st-fill i { display: block; height: 100%; }
.ix-stage > strong { font-size: 1.05rem; font-weight: 800; color: var(--text-main); text-align: right; }
.ix-stage > em { font-style: normal; font-size: 0.76rem; font-weight: 700; color: var(--text-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ix-st-sub { grid-column: 2 / -1; font-size: 0.68rem; color: var(--text-muted); }
.ix-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.ix-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ix-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* Índice */
.ix-idx-body { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; }
.ix-ring { width: 128px; height: 128px; }
.ix-ring-v { font-size: 32px; font-weight: 800; fill: var(--text-main); font-family: 'Outfit', sans-serif; }
.ix-ring-l { font-size: 11px; font-weight: 600; fill: #55657a; font-family: 'Outfit', sans-serif; }
.ix-factores { display: flex; flex-direction: column; gap: 4px; }
.ix-factor { display: grid; grid-template-columns: minmax(120px, 44%) 1fr 28px; gap: 8px; align-items: center; border: none; background: none; padding: 4px 6px; border-radius: 8px; font-family: inherit; text-align: left; cursor: pointer; }
.ix-factor:hover { background: #f8fafc; }
.ix-f-n { font-size: 0.76rem; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.ix-f-n small { display: block; font-size: 0.64rem; font-weight: 600; color: var(--text-muted); }
.ix-factor strong { font-size: 0.84rem; font-weight: 800; color: var(--text-main); text-align: right; }
.ix-factor.na .ix-f-n, .ix-factor.na strong { color: #55657a; }
.ix-bar { display: block; height: 8px; background: #eef2f7; border-radius: 4px; overflow: hidden; }
.ix-bar i { display: block; height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.ix-bar.big { height: 12px; border-radius: 6px; margin: 8px 0; }
.ix-metodo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-color); font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; }
.ix-metodo ul { margin: 6px 0 0 16px; display: flex; flex-direction: column; gap: 3px; }
.ix-metodo strong { color: var(--text-main); }

/* Avance */
.ix-av-big { display: flex; align-items: baseline; gap: 8px; }
.ix-av-big strong { font-size: 2.2rem; font-weight: 800; color: color-mix(in srgb, var(--c) 75%, #000); line-height: 1; }
.ix-av-big span { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.ix-fin { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ix-fin span { font-size: 0.78rem; color: var(--text-main); border-left: 3px solid var(--c); padding-left: 8px; }
.ix-fin strong { font-weight: 800; }

/* Listas */
.ix-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ix-list button { width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; border: 1px solid var(--border-color); background: #fff; border-radius: 10px; padding: 8px 10px; font-family: inherit; cursor: pointer; }
.ix-list button:hover { border-color: var(--primary-start); }
.ix-list button > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ix-list strong { font-size: 0.8rem; color: var(--text-main); line-height: 1.3; }
.ix-list small { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-when { flex-shrink: 0; min-width: 62px; text-align: center; font-size: 0.68rem; font-weight: 800; padding: 3px 6px; border-radius: 6px; background: #f1f5f9; color: #475569; }
.ix-when.venc { background: #fef2f2; color: #b91c1c; } .ix-when.pronto { background: #fff7ed; color: #c2410c; }
.ix-mov { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ix-mov li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.ix-mov li:last-child { border-bottom: none; }
.ix-mov time { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); }
.ix-mov p { font-size: 0.8rem; color: var(--text-main); line-height: 1.4; margin: 1px 0; }
.ix-mov small { font-size: 0.7rem; color: var(--text-muted); }

@media (max-width: 1280px) { .ix-kpis-cond { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ix-row2 { grid-template-columns: 1fr; } .ix-row3 { grid-template-columns: 1fr 1fr; } .ix-row3 > :first-child { grid-column: 1 / -1; } }
@media (max-width: 1024px) { .ix-kpis-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .ix-kpis-cond { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-row3 { grid-template-columns: 1fr; }
  .ix-stage { grid-template-columns: 1fr 44px; } .ix-st-bar { grid-column: 1 / -1; order: 3; } .ix-stage > em { grid-column: 1 / -1; text-align: left; order: 4; } .ix-st-sub { grid-column: 1 / -1; order: 5; }
  .ix-idx-body { grid-template-columns: 1fr; justify-items: center; } .ix-factores { width: 100%; }
  .ix-mov li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .ix-kpi { transition: none; } .ix-kpi:hover { transform: none; } }
@media print { .ix-scope button { display: none; } }
.ix-list strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ix-more { display: block; margin-top: 8px; }