/* ===========================================================================
   Modulo de Inteligencia Crediticia (CDCI)
   ---------------------------------------------------------------------------
   TODO va scopeado bajo .cdci. Fuera de las pantallas del modulo este archivo
   no cambia absolutamente nada, aunque se cargue.

   Existe porque app.css impone reglas sobre .panel que rompen cualquier
   pantalla densa:

     .panel .panel-heading { height: 44px; text-transform: uppercase; }

   Una cabecera de altura FIJA hace que un titulo de dos lineas se desborde y
   pise el contenido de abajo; el uppercase forzado vuelve ilegible cualquier
   texto explicativo. En vez de pelear con !important caso por caso, aqui se
   neutralizan una sola vez dentro del modulo y se define un sistema propio.
   =========================================================================== */

.cdci {
    --cdci-bg:        #f4f6f8;
    --cdci-surface:   #ffffff;
    --cdci-border:    #e3e8ec;
    --cdci-ink:       #2c3a47;
    --cdci-ink-soft:  #5b6b7a;
    --cdci-muted:     #8b99a7;
    --cdci-primary:   #2f6fad;
    --cdci-ok:        #3d9970;
    --cdci-warn:      #d3901f;
    --cdci-danger:    #c0392b;
    /* Informativo: ni bueno ni malo. Lo usa el estado de capacidad "tiene
       prestamo vigente", que no es un defecto de riesgo y no debe pintarse
       con el mismo color que la mora. */
    --cdci-info:      #2f6fad;
    --cdci-radius:    6px;

    color: var(--cdci-ink);
    font-size: 13px;
}

/* --- Neutralizar lo heredado ---------------------------------------------
   Solo dentro de .cdci. El resto de la aplicacion conserva su apariencia. */

.cdci .panel {
    border: 1px solid var(--cdci-border);
    border-radius: var(--cdci-radius);
    box-shadow: 0 1px 2px rgba(44, 58, 71, .05);
    margin-bottom: 18px;
}

.cdci .panel .panel-heading {
    /* height:44px fijo en app.css: la causa del desbordamiento. */
    height: auto;
    min-height: 0;
    padding: 13px 16px;
    text-transform: none;
    background: #fbfcfd;
    border-bottom: 1px solid var(--cdci-border);
    border-radius: var(--cdci-radius) var(--cdci-radius) 0 0;
    position: static;
}

.cdci .panel .panel-heading .panel-title {
    display: block;
    float: none;
    padding: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cdci-ink);
    line-height: 1.4;
}

.cdci .panel .panel-body { padding: 16px; }
.cdci .panel .panel-footer {
    background: #fbfcfd;
    border-top: 1px solid var(--cdci-border);
    padding: 10px 16px;
    font-size: 11.5px;
    color: var(--cdci-muted);
}

.cdci .breadcrumb {
    background: transparent;
    padding: 0 0 14px 0;
    margin-bottom: 0;
    text-transform: none;
    font-size: 12px;
}

/* --- Tipografia ----------------------------------------------------------- */

.cdci h1, .cdci h2, .cdci h3, .cdci h4 { text-transform: none; }
.cdci strong { font-weight: 600; }
.cdci code {
    background: #eef2f5;
    color: #40566b;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

.cdci-muted { color: var(--cdci-muted); font-size: 11.5px; line-height: 1.5; }
.cdci-note  { color: var(--cdci-ink-soft); font-size: 12px; line-height: 1.55; }

/* --- Encabezado de pantalla ----------------------------------------------- */

.cdci-hero {
    background: linear-gradient(135deg, #34495e 0%, #2c3a47 100%);
    color: #fff;
    padding: 20px 24px;
    border-radius: var(--cdci-radius);
    margin-bottom: 20px;
}
.cdci-hero h2 { margin: 0 0 5px 0; font-size: 20px; font-weight: 600; color: #fff; }
.cdci-hero p  { margin: 0; font-size: 12.5px; opacity: .88; line-height: 1.5; }
.cdci-hero code { background: rgba(255,255,255,.15); color: #fff; }

.cdci-hero--ok     { background: linear-gradient(135deg, #43946c 0%, #35795a 100%); }
.cdci-hero--warn   { background: linear-gradient(135deg, #d3901f 0%, #b57816 100%); }
.cdci-hero--danger { background: linear-gradient(135deg, #c0392b 0%, #a33025 100%); }

/* --- Avisos --------------------------------------------------------------- */

.cdci-callout {
    border-radius: var(--cdci-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 12.5px;
    line-height: 1.55;
    border-left: 3px solid var(--cdci-border);
    background: #f7f9fa;
}
.cdci-callout--ok     { background: #eff7f2; border-left-color: var(--cdci-ok); }
.cdci-callout--warn   { background: #fdf7ec; border-left-color: var(--cdci-warn); }
.cdci-callout--danger { background: #fdf1f0; border-left-color: var(--cdci-danger); }
.cdci-callout strong { display: inline; }

/* --- Formularios ----------------------------------------------------------
   No se usa .form-inline de Bootstrap: app.css la deja inservible. En su
   lugar, una fila flexible propia que envuelve bien en pantallas angostas. */

.cdci-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.cdci-form-row > * { margin: 0; }

.cdci .form-control,
.cdci input[type="text"],
.cdci input[type="number"],
.cdci input[type="password"],
.cdci input[type="date"],
.cdci select {
    display: inline-block;
    width: auto;
    min-width: 130px;
    height: 32px;
    padding: 5px 9px;
    font-size: 12.5px;
    border: 1px solid #d3dae0;
    border-radius: 4px;
    box-shadow: none;
    color: var(--cdci-ink);
    background: #fff;
}
.cdci .form-control:focus {
    border-color: var(--cdci-primary);
    box-shadow: 0 0 0 2px rgba(47, 111, 173, .12);
    outline: none;
}
.cdci textarea.form-control { height: auto; }

.cdci-input--wide { min-width: 300px; flex: 1 1 300px; }
.cdci-input--full { width: 100%; flex: 1 1 100%; }
.cdci-input--sm   { min-width: 80px; width: 90px; }

.cdci label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cdci-ink-soft);
    text-transform: none;
    margin: 0 2px 0 0;
}

/* --- Botones --------------------------------------------------------------- */

.cdci .btn {
    height: 32px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: none;
    line-height: 30px;
    border: 1px solid transparent;
}
.cdci .btn-primary {
    background: var(--cdci-primary);
    border-color: var(--cdci-primary);
    color: #fff;
}
.cdci .btn-primary:hover { background: #275d92; border-color: #275d92; }
.cdci .btn-default {
    background: #fff;
    border-color: #d3dae0;
    color: var(--cdci-ink-soft);
}
.cdci .btn-default:hover { background: #f4f6f8; }
.cdci .btn-danger  { background: var(--cdci-danger); border-color: var(--cdci-danger); color: #fff; }
.cdci .btn-success { background: var(--cdci-ok); border-color: var(--cdci-ok); color: #fff; }
.cdci .btn-xs { height: 24px; line-height: 22px; padding: 0 9px; font-size: 11px; }

/* --- Etiquetas de estado ---------------------------------------------------- */

.cdci .label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .2px;
    vertical-align: middle;
}
.cdci .label-default { background: #e5eaee; color: #5b6b7a; }
.cdci .label-success { background: #e2f2e9; color: #2c7a55; }
.cdci .label-info    { background: #e4eef7; color: #2a5f8f; }
.cdci .label-warning { background: #fbf0dc; color: #96660f; }
.cdci .label-danger  { background: #fae5e2; color: #96271c; }

/* --- Tablas ----------------------------------------------------------------- */

.cdci .table { margin-bottom: 0; font-size: 12.5px; }
.cdci .table > thead > tr > th {
    background: #fbfcfd;
    border-bottom: 1px solid var(--cdci-border);
    color: var(--cdci-ink-soft);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 9px 12px;
    vertical-align: middle;
}
.cdci .table > tbody > tr > td {
    padding: 9px 12px;
    vertical-align: middle;
    border-top: 1px solid #eef1f4;
    color: var(--cdci-ink);
}
.cdci .table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfc; }
.cdci .table-hover > tbody > tr:hover { background: #f2f6f9; }
.cdci .num { text-align: right; font-variant-numeric: tabular-nums; }
.cdci .mono {
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 11px;
}

/* --- Indicadores ------------------------------------------------------------- */

.cdci-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.cdci-stat {
    flex: 1 1 180px;
    background: var(--cdci-surface);
    border: 1px solid var(--cdci-border);
    border-radius: var(--cdci-radius);
    padding: 14px 16px;
}
.cdci-stat__cap {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cdci-muted);
    margin-bottom: 4px;
}
.cdci-stat__val  { font-size: 22px; font-weight: 600; line-height: 1.2; }
.cdci-stat__note { font-size: 11px; color: var(--cdci-muted); margin-top: 4px; line-height: 1.4; }

.cdci-up   { color: var(--cdci-ok); }
.cdci-down { color: var(--cdci-danger); }
.cdci-flat { color: var(--cdci-muted); }

/* --- Semaforo ---------------------------------------------------------------- */

.cdci-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex: 0 0 auto;
}
.cdci-dot--ok   { background: var(--cdci-ok); }
.cdci-dot--warn { background: var(--cdci-warn); }
.cdci-dot--fail { background: var(--cdci-danger); }

.cdci-check {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding: 11px 0;
    border-bottom: 1px solid #f0f3f5;
}
.cdci-check:last-child { border-bottom: 0; }
.cdci-check__main  { flex: 1; min-width: 0; }
.cdci-check__label { font-weight: 600; font-size: 12.5px; }
.cdci-check__detail{ color: var(--cdci-ink-soft); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.cdci-check__items {
    margin-top: 7px;
    padding: 8px 11px;
    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-check__items div { padding: 1px 0; }

/* --- Bloque de interruptor ---------------------------------------------------- */

.cdci-flag { border-left: 3px solid var(--cdci-border); }
.cdci-flag--on { border-left-color: var(--cdci-warn); }

.cdci-flag__key {
    font-family: Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--cdci-muted);
    margin-top: 3px;
}
.cdci-flag__desc {
    font-size: 12px;
    color: var(--cdci-ink-soft);
    margin-top: 7px;
    line-height: 1.5;
}
.cdci-flag__section {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #eef1f4;
}
.cdci-flag__section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.cdci-flag__section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cdci-muted);
    margin-bottom: 9px;
}

.cdci-sensitive {
    background: #fdf1f0;
    border: 1px solid #f3d7d3;
    border-left: 3px solid var(--cdci-danger);
    border-radius: 4px;
    padding: 11px 14px;
    margin-top: 11px;
}
.cdci-sensitive__title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cdci-danger);
    margin-bottom: 8px;
}

/* --- Guia (i) ------------------------------------------------------------------ */

.cdci-guide-btn {
    display: inline-block;
    width: 18px; height: 18px; line-height: 17px;
    border-radius: 50%;
    background: #9aa8b5;
    color: #fff !important;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    font-family: Georgia, serif;
    font-style: italic;
    text-decoration: none !important;
    vertical-align: middle;
    margin-left: 6px;
    cursor: pointer;
}
.cdci-guide-btn:hover { background: var(--cdci-primary); }

.cdci-guide-modal .modal-content { border-radius: var(--cdci-radius); border: 0; }
.cdci-guide-modal .modal-header {
    background: #2c3a47;
    color: #fff;
    border-radius: var(--cdci-radius) var(--cdci-radius) 0 0;
    border-bottom: 0;
    padding: 15px 20px;
}
.cdci-guide-modal .modal-header .close { color: #fff; opacity: .75; text-shadow: none; }
.cdci-guide-modal .modal-title { font-size: 16px; font-weight: 600; text-transform: none; }
.cdci-guide-modal .modal-body { padding: 20px; }
.cdci-guide-intro {
    font-size: 13px;
    color: var(--cdci-ink-soft);
    line-height: 1.6;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef1f4;
}
.cdci-guide-sec { margin-bottom: 15px; }
.cdci-guide-sec h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cdci-ink);
    margin: 0 0 4px 0;
}
.cdci-guide-sec p {
    font-size: 12.5px;
    color: var(--cdci-ink-soft);
    line-height: 1.6;
    margin: 0;
}

/* --- Matriz de segmentacion ------------------------------------------------------ */

.cdci-matrix { border-collapse: separate; border-spacing: 4px; width: 100%; }
.cdci-matrix th {
    font-size: 10.5px;
    color: var(--cdci-muted);
    font-weight: 600;
    text-align: center;
    padding: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.cdci-matrix th.rowhead { text-align: right; padding-right: 10px; width: 118px; }
.cdci-matrix td { padding: 0; border-radius: 4px; background: #f2f5f7; text-align: center; }
.cdci-matrix td a, .cdci-matrix td > div { display: block; padding: 13px 6px; text-decoration: none; }
.cdci-matrix .n { font-size: 16px; font-weight: 600; line-height: 1.1; }
.cdci-matrix .e { font-size: 10px; margin-top: 2px; }

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

.cdci-bar {
    height: 9px;
    background: #e8edf1;
    border-radius: 5px;
    overflow: hidden;
}
.cdci-bar__fill { height: 100%; border-radius: 5px; background: var(--cdci-primary); }

/* --- Responsivo ---------------------------------------------------------------------- */

@media (max-width: 991px) {
    .cdci-stat { flex: 1 1 100%; }
    .cdci-input--wide { flex: 1 1 100%; min-width: 0; }
    .cdci .table-responsive-wrap { overflow-x: auto; }
}