/* ===========================================================================
   CDCI — componentes por pantalla
   ---------------------------------------------------------------------------
   Antes vivian como bloques <style> dentro de cada vista. Se consolidaron aqui
   para que exista UN solo lugar donde se gobierna el aspecto del modulo: con
   estilos repartidos en doce archivos, cualquier ajuste de color o espaciado
   habia que repetirlo doce veces y siempre quedaba alguno atras.

   Depende de las variables definidas en cdci.css, que debe cargarse antes.

   Los nombres conservan el guion simple (cdci-hero-ok, no cdci-hero--ok)
   porque varias vistas los componen dinamicamente desde PHP.
   =========================================================================== */

/* --- Utilidades compartidas ------------------------------------------------ */

.cdci .cdci-help,
.cdci .cdci-prov,
.cdci .cdci-hash,
.cdci .cdci-bin,
.cdci .cdci-emb-note,
.cdci .cdci-cp-note {
    font-size: 11px;
    color: var(--cdci-muted);
    line-height: 1.5;
}

.cdci .cdci-prov { font-style: italic; }

.cdci .cdci-hash,
.cdci .cdci-range,
.cdci .cdci-bin { font-family: Menlo, Consolas, monospace; }

.cdci .cdci-range { font-size: 11px; color: var(--cdci-muted); }
.cdci .cdci-expired { color: var(--cdci-danger); font-weight: 600; }

.cdci .up, .cdci .cdci-delta-up, .cdci .cdci-emb-up, .cdci .cdci-pts-pos {
    color: var(--cdci-ok);
    font-weight: 600;
}

.cdci .down, .cdci .cdci-delta-down, .cdci .cdci-emb-down, .cdci .cdci-pts-neg {
    color: var(--cdci-danger);
    font-weight: 600;
}

.cdci .cdci-delta-same, .cdci .cdci-pts-nil { color: var(--cdci-muted); }

/* Todas las tablas del modulo comparten el mismo tratamiento. */
.cdci .cdci-audit td, .cdci .cdci-audit th,
.cdci .cdci-emb-table td,
.cdci .cdci-emp-table td, .cdci .cdci-emp-table th,
.cdci .cdci-exc-table td, .cdci .cdci-exc-table th,
.cdci .cdci-factor-table td, .cdci .cdci-factor-table th,
.cdci .cdci-mon-table td, .cdci .cdci-mon-table th,
.cdci .cdci-nb-table td, .cdci .cdci-nb-table th,
.cdci .cdci-rs-table td, .cdci .cdci-rs-table th,
.cdci .cdci-scope-table td,
.cdci .cdci-seg-table td, .cdci .cdci-seg-table th,
.cdci .cdci-var-table td, .cdci .cdci-var-table th,
.cdci .cdci-wi-table td, .cdci .cdci-wi-table th,
.cdci .cdci-table td, .cdci .cdci-table th {
    vertical-align: middle !important;
}

.cdci .cdci-audit td { font-size: 11px; }
.cdci .cdci-audit .val { font-family: Menlo, Consolas, monospace; }

.cdci .cdci-var-table input[type=number],
.cdci .cdci-wi-table input[type=number] { width: 88px; min-width: 0; }

/* Fila con observacion: se destaca sin gritar. */
.cdci .cdci-note-row { background: #fdf8ea !important; }

/* --- Bloques informativos --------------------------------------------------- */

.cdci .cdci-intro,
.cdci .cdci-scale,
.cdci .cdci-stamp,
.cdci .cdci-exc-intro,
.cdci .cdci-nb-intro,
.cdci .cdci-wi-intro,
.cdci .cdci-risk {
    background: #f7f9fa;
    border: 1px solid var(--cdci-border);
    border-radius: var(--cdci-radius);
    padding: 13px 17px;
    margin-bottom: 18px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cdci-ink-soft);
}

.cdci .cdci-stamp strong { color: var(--cdci-ink); }
.cdci .cdci-stamp .excluded { color: var(--cdci-danger); font-weight: 600; }

.cdci .cdci-risk {
    font-family: Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: #fbfcfd;
}
.cdci .cdci-risk .term { display: inline-block; margin-right: 6px; }
.cdci .cdci-risk .val  { font-weight: 600; color: var(--cdci-ink); }

.cdci .cdci-shadow-note,
.cdci .cdci-shadow-banner,
.cdci .cdci-emb-shadow {
    background: #eff7f2;
    border-left: 3px solid var(--cdci-ok);
    border-radius: 0 4px 4px 0;
    padding: 11px 15px;
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 18px;
    color: var(--cdci-ink-soft);
}

.cdci .cdci-empty,
.cdci .cdci-emb-empty,
.cdci .cdci-live-banner,
.cdci .cdci-trunc,
.cdci .cdci-wi-warn,
.cdci .cdci-readonly {
    background: #fdf7ec;
    border-left: 3px solid var(--cdci-warn);
    border-radius: 0 4px 4px 0;
    padding: 13px 17px;
    font-size: 12.5px;
    line-height: 1.55;
    margin-bottom: 18px;
    color: var(--cdci-ink-soft);
}

.cdci .cdci-problems {
    background: #fdf1f0;
    border-left: 3px solid var(--cdci-danger);
    border-radius: 0 4px 4px 0;
    padding: 13px 17px;
    font-size: 12.5px;
    line-height: 1.55;
    margin-bottom: 18px;
}

.cdci .cdci-pending {
    background: #f7f9fa;
    border-left: 3px solid #c3ccd4;
    border-radius: 0 4px 4px 0;
    padding: 13px 17px;
    font-size: 12px;
    color: var(--cdci-ink-soft);
    line-height: 1.55;
}

/* --- Encabezados de pantalla ------------------------------------------------- */

.cdci .cdci-sim-hero,
.cdci .cdci-sc-hero,
.cdci .cdci-seg-hero,
.cdci .cdci-ctl-hero,
.cdci .cdci-mon-hero,
.cdci .cdci-nb-result {
    background: linear-gradient(135deg, #34495e 0%, #2c3a47 100%);
    color: #fff;
    padding: 19px 23px;
    border-radius: var(--cdci-radius);
    margin-bottom: 20px;
}

.cdci .cdci-sim-hero h2,
.cdci .cdci-sc-hero h2,
.cdci .cdci-seg-hero h2,
.cdci .cdci-ctl-hero h2,
.cdci .cdci-mon-hero h2,
.cdci .cdci-nb-result h2 {
    margin: 0 0 5px 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.cdci .cdci-sim-hero .sub,
.cdci .cdci-sc-hero .sub,
.cdci .cdci-seg-hero .sub,
.cdci .cdci-ctl-hero p,
.cdci .cdci-nb-result p,
.cdci .cdci-mon-hero p {
    margin: 0;
    font-size: 12.5px;
    opacity: .88;
    line-height: 1.5;
}

.cdci .cdci-ctl-hero code { background: rgba(255,255,255,.16); color: #fff; }

/* Variantes de estado. Guion simple: las vistas las componen desde PHP. */
.cdci .cdci-hero-ok,
.cdci .cdci-ctl-off,
.cdci .cdci-nb-pass,
.cdci .cdci-mon-ok {
    background: linear-gradient(135deg, #43946c 0%, #35795a 100%);
}

.cdci .cdci-hero-warn,
.cdci .cdci-ctl-on,
.cdci .cdci-mon-warn {
    background: linear-gradient(135deg, #d3901f 0%, #b57816 100%);
}

.cdci .cdci-hero-fail,
.cdci .cdci-nb-fail,
.cdci .cdci-mon-alert {
    background: linear-gradient(135deg, #c0392b 0%, #a33025 100%);
}

.cdci .cdci-mon-hero h2 { font-size: 30px; }
.cdci .cdci-mon-hero .lbl {
    font-size: 12px;
    opacity: .9;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.cdci .cdci-tally { font-size: 12px; margin-top: 12px; }
.cdci .cdci-tally span {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 10px;
    border-radius: 3px;
    background: rgba(255,255,255,.16);
}

/* --- Indicadores en fila ------------------------------------------------------ */

.cdci .cdci-kpi,
.cdci .cdci-compare,
.cdci .cdci-emb-kpi,
.cdci .cdci-tier-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.cdci .cdci-kpi-cell,
.cdci .cdci-compare-cell,
.cdci .cdci-emb-cell,
.cdci .cdci-tier-cell {
    flex: 1 1 190px;
    background: var(--cdci-surface);
    border: 1px solid var(--cdci-border);
    border-radius: var(--cdci-radius);
    padding: 15px 17px;
    /* Columna con el rotulo arriba y las notas abajo: sin esto las tarjetas
       cortas dejaban un hueco muerto al estirarse a la altura de la mas alta. */
    display: flex;
    flex-direction: column;
}

.cdci .cdci-tier-cell { text-align: center; }

/* La ultima nota se pega al fondo para que las lineas de detalle queden
   alineadas entre tarjetas aunque tengan distinta cantidad de texto. */
.cdci .cdci-kpi-cell .note:last-child,
.cdci .cdci-compare-cell .note:last-child { margin-top: auto; padding-top: 4px; }

.cdci .cdci-kpi-cell .cap,
.cdci .cdci-compare-cell .cap,
.cdci .cdci-emb-cell .cap,
.cdci .cdci-tier-cell .l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cdci-muted);
    margin-bottom: 4px;
}

.cdci .cdci-kpi-cell .big,
.cdci .cdci-compare-cell .big,
.cdci .cdci-emb-cell .big,
.cdci .cdci-tier-cell .n {
    font-size: 24px;
    font-weight: 600;
    color: var(--cdci-ink);
    line-height: 1.2;
    /* Las cifras se leen en columna: sin ancho tabular, los millares bailan
       de una tarjeta a otra y cuesta compararlas de un vistazo. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.cdci .cdci-kpi-cell .note,
.cdci .cdci-compare-cell .note,
.cdci .cdci-emb-cell .note {
    font-size: 11px;
    color: var(--cdci-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* --- Semaforo de salud --------------------------------------------------------- */

.cdci .cdci-status-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.cdci .cdci-dot-ok   { background: var(--cdci-ok); }
.cdci .cdci-dot-warn { background: var(--cdci-warn); }
.cdci .cdci-dot-fail { background: var(--cdci-danger); }

.cdci .cdci-check-row {
    border-bottom: 1px solid #f0f3f5;
    padding: 11px 0;
}
.cdci .cdci-check-row:last-child { border-bottom: 0; }
.cdci .cdci-check-label  { font-weight: 600; font-size: 12.5px; }
.cdci .cdci-check-detail {
    color: var(--cdci-ink-soft);
    font-size: 12px;
    margin-top: 3px;
    line-height: 1.5;
}
.cdci .cdci-check-items {
    margin: 8px 0 0 20px;
    padding: 8px 12px;
    background: #f7f9fa;
    border-left: 2px solid #dde3e8;
    border-radius: 0 3px 3px 0;
    font-family: Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--cdci-ink-soft);
    max-height: 200px;
    overflow-y: auto;
}
.cdci .cdci-check-items div { padding: 1px 0; }

/* --- Interruptores -------------------------------------------------------------- */

.cdci .cdci-flag-card { margin-bottom: 16px; }
.cdci .cdci-flag-title { font-size: 14px; font-weight: 600; color: var(--cdci-ink); }
.cdci .cdci-flag-key {
    font-family: Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--cdci-muted);
    margin-top: 4px;
}
.cdci .cdci-flag-desc {
    font-size: 12px;
    color: var(--cdci-ink-soft);
    margin-top: 7px;
    line-height: 1.5;
}

.cdci .cdci-sensitive-box {
    background: #fdf1f0;
    border: 1px solid #f3d7d3;
    border-left: 3px solid var(--cdci-danger);
    border-radius: 4px;
    padding: 12px 15px;
    margin: 12px 0;
}
.cdci .cdci-sensitive-box .hdr {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cdci-danger);
    margin-bottom: 9px;
}

.cdci .cdci-kill {
    background: #fff;
    border: 1px solid #edd4d1;
    border-left: 3px solid var(--cdci-danger);
    border-radius: var(--cdci-radius);
    padding: 17px 21px;
    margin-bottom: 22px;
}
.cdci .cdci-kill h4 {
    margin-top: 0;
    color: var(--cdci-danger);
    font-size: 14px;
    font-weight: 600;
}

.cdci .cdci-form-row-spaced { margin-top: 11px; }

.cdci .cdci-sticky-save {
    background: #f7f9fa;
    border: 1px solid var(--cdci-border);
    border-radius: var(--cdci-radius);
    padding: 15px 18px;
    margin: 20px 0;
}

/* --- Scorecards ------------------------------------------------------------------ */

.cdci .cdci-engine-head {
    font-size: 14px;
    font-weight: 600;
    color: var(--cdci-ink);
    padding: 12px 0 7px 0;
}
.cdci .cdci-var-panel { margin-bottom: 14px; }

/* --- Barras comparativas ---------------------------------------------------------- */

.cdci .cdci-bar-wrap {
    position: relative;
    height: 15px;
    background: #eef1f4;
    border-radius: 3px;
}
.cdci .cdci-bar-wrap .cdci-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 3px;
}
.cdci .cdci-bar-ref { background: #b9c6d1; }
.cdci .cdci-bar-cur { background: var(--cdci-primary); }

.cdci .cdci-dist-bar {
    height: 16px;
    background: #eef1f4;
    border-radius: 3px;
    overflow: hidden;
}
.cdci .cdci-dist-fill { height: 100%; }

/* --- Panel del cliente (lo ve el empleado) ------------------------------------------ */

.cdci .cdci-cp-panel .panel-heading { background: #2c3a47; }
.cdci .cdci-cp-panel .panel-heading .panel-title { color: #fff; }

.cdci .cdci-cp-level { text-align: center; padding: 16px 0 10px 0; }
.cdci .cdci-cp-level .lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cdci-muted);
}
.cdci .cdci-cp-level .val {
    font-size: 26px;
    font-weight: 600;
    color: var(--cdci-ink);
    margin-top: 3px;
}

.cdci .cdci-cp-bar {
    height: 9px;
    background: #e8edf1;
    border-radius: 5px;
    overflow: hidden;
    margin: 13px 0 6px 0;
}
.cdci .cdci-cp-fill { height: 100%; background: var(--cdci-ok); border-radius: 5px; }
.cdci .cdci-cp-next { font-size: 11px; color: var(--cdci-muted); text-align: center; }

.cdci .cdci-cp-sec {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cdci-muted);
    margin: 15px 0 7px 0;
}
.cdci .cdci-cp-list { padding-left: 18px; margin: 0; }
.cdci .cdci-cp-list li {
    font-size: 12px;
    color: var(--cdci-ink-soft);
    margin-bottom: 6px;
    line-height: 1.5;
}
.cdci .cdci-cp-trend { font-size: 11px; color: var(--cdci-ink-soft); }
.cdci .cdci-cp-trend span { display: inline-block; margin-right: 11px; }

/* ---------------------------------------------------------------------------
   Capacidad de pago (ficha del empleado)

   Bloque aparte y no una tarjeta mas del KPI: responde una pregunta distinta.
   El KPI dice cuanto puede tomar; esto dice POR QUE ese numero es el que es.
   Sin la explicacion, un margen en cero se lee como un error del sistema.
   --------------------------------------------------------------------------- */

.cdci .cdci-emb-capacity {
    background: var(--cdci-surface);
    border: 1px solid var(--cdci-border);
    border-radius: var(--cdci-radius);
    padding: 14px 17px;
    margin-bottom: 20px;
}

.cdci .cdci-emb-capacity-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cdci-border);
    font-size: 13px;
    color: var(--cdci-ink);
}

.cdci .cdci-emb-capacity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.cdci .cdci-emb-capacity-grid > div { flex: 1 1 150px; }

.cdci .cdci-emb-capacity-grid .cap {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cdci-muted);
    margin-bottom: 3px;
}

.cdci .cdci-emb-capacity-grid .val {
    font-size: 15px;
    font-weight: 600;
    color: var(--cdci-ink);
    margin-bottom: 2px;
}

/* Desglose de capacidad en el tablero de cartera. */
.cdci .cdci-cap-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cdci .cdci-cap-cell {
    flex: 1 1 200px;
    border: 1px solid var(--cdci-border);
    border-left-width: 3px;
    border-radius: var(--cdci-radius);
    padding: 13px 15px;
    background: var(--cdci-surface);
}

.cdci .cdci-cap-cell.is-headroom   { border-left-color: var(--cdci-ok); }
.cdci .cdci-cap-cell.is-gated      { border-left-color: var(--cdci-info); }
.cdci .cdci-cap-cell.is-capacity   { border-left-color: var(--cdci-warn); }
.cdci .cdci-cap-cell.is-unknown    { border-left-color: var(--cdci-border); }

.cdci .cdci-cap-cell .n {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--cdci-ink);
}

.cdci .cdci-cap-cell .t {
    font-size: 12px;
    font-weight: 600;
    color: var(--cdci-ink);
    margin: 3px 0 4px;
}

.cdci .cdci-cap-cell .d {
    font-size: 11px;
    color: var(--cdci-muted);
    line-height: 1.5;
}

/* Subtitulo dentro de un panel: separa bloques que no ameritan panel propio. */
.cdci .cdci-sec-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cdci-muted);
    margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   Avance de una corrida por lotes

   El recalculo completo se procesa en lotes encadenados. Sin barra, el
   operador solo ve botones deshabilitados durante varios minutos y no puede
   distinguir "avanzando" de "colgado".
   --------------------------------------------------------------------------- */

.cdci .cdci-hidden { display: none !important; }

.cdci .cdci-run-progress {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--cdci-surface);
    border: 1px solid var(--cdci-border);
    border-radius: var(--cdci-radius);
}

.cdci .cdci-run-bar {
    height: 8px;
    background: #eef1f4;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 9px;
}

.cdci .cdci-run-bar .fill {
    height: 100%;
    width: 0;
    background: var(--cdci-primary);
    border-radius: 4px;
    transition: width .25s ease;
}

.cdci .cdci-run-text {
    font-size: 12px;
    color: var(--cdci-ink-soft);
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Cifras alineadas en las tablas

   Las columnas de dinero se leen comparando de arriba abajo. Con la fuente
   proporcional los digitos tienen anchos distintos y los millares no quedan
   alineados entre filas, que es justo lo que hace falta para comparar.
   --------------------------------------------------------------------------- */

.cdci table td.text-right,
.cdci table th.text-right {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Filas dejadas fuera de un analisis. Se declaran siempre: un escenario
   calculado sobre media cartera sin decirlo se lee como si cubriera todo. */
.cdci .cdci-excluded {
    color: var(--cdci-warn);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Bloque hipotetico (escenarios de excepcion al tope)

   Tratamiento visual DELIBERADAMENTE distinto al resto del tablero. Las demas
   secciones describen la cartera como es; esta describe una cartera que no
   existe. Con el mismo peso visual, las cifras se leen como si el sistema ya
   las aplicara — que es exactamente lo que no debe pasar.

   Borde punteado, fondo calido y etiqueta explicita. Ademas va colapsado: hay
   que abrirlo a proposito.
   --------------------------------------------------------------------------- */

.cdci .panel.cdci-hypo {
    border: 1px dashed #d9c48f;
    background: #fffdf7;
}

.cdci .cdci-hypo-head {
    background: #fdf8ea !important;
    border-bottom: 1px dashed #e3d3a8 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    user-select: none;
}

.cdci .cdci-hypo-head:hover { background: #fbf3dd !important; }

.cdci .cdci-hypo-head .panel-title {
    color: #8a5d0e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cdci .cdci-hypo-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e8b84b;
    color: #4a3607;
}

.cdci .cdci-hypo-hint {
    font-size: 11px;
    color: #96660f;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* La flecha gira al abrir: indica el estado sin necesidad de leer nada. */
.cdci .cdci-hypo-hint .fa-chevron-down { transition: transform .2s ease; }

.cdci .cdci-hypo-head[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Aviso dentro del bloque. Se repite arriba y abajo a proposito: el contenido
   es largo y quien llega al final ya no tiene la etiqueta a la vista. */
.cdci .cdci-hypo-warn {
    background: #fbf3dd;
    border-left: 3px solid #d3901f;
    border-radius: 0 4px 4px 0;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 16px;
    color: #6b5416;
}

.cdci .cdci-hypo-warn strong { color: #4a3607; }

/* Las tablas de dentro no compiten con las reales. */
.cdci .cdci-hypo .cdci-table th {
    background: #f7f1e2;
    color: #7a6320;
    border-bottom-color: #e3d3a8;
}

/* ---------------------------------------------------------------------------
   Persona en una tabla

   Nombre arriba, id y cedula debajo en gris. El id NUNCA se omite: es lo que
   identifica al registro sin ambiguedad —hay homonimos, y las cedulas se
   cargan mal— y es la clave con la que se abre el banco de pruebas.
   --------------------------------------------------------------------------- */

.cdci .cdci-person {
    font-weight: 600;
    color: var(--cdci-ink);
    line-height: 1.3;
}

.cdci .cdci-person-meta {
    font-size: 10.5px;
    color: var(--cdci-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    margin-top: 1px;
}

/* Id junto al nombre en el encabezado de una pantalla. */
.cdci .cdci-hero-id {
    font-size: 14px;
    font-weight: 400;
    opacity: .72;
    vertical-align: middle;
}

.cdci .cdci-hero-meta {
    margin: 7px 0 3px;
    font-size: 12px;
    opacity: .9;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.cdci .cdci-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}