/* ================================================================
   SIFYC ? Estudio de Crédito
   Archivo: css/estudio_credito.css
   Incluir en el header principal de SIFYC
   ================================================================ */

/* ?? Constantes de campo reutilizables ??????????????????????????
   Úselas en imp_campo_bo() así:
     $var["stylecampo"] = EC_INPUT;
     $var["stylecampo"] = EC_SELECT;
   ?????????????????????????????????????????????????????????????? */

/* ?? Header del modal ???????????????????????????????????????????*/
.ec-top-bar {
    background: #185FA5;
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    padding: 6px;
    letter-spacing: .04em;
}

.ec-modal-header {
    background: #fff;
    padding: 12px 16px;
    border-bottom: 0.5px solid rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-header-info {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ec-hf { display: flex; flex-direction: column; gap: 1px; }

.ec-hl {
    font-size: 10px;
    color: #888780;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ec-hv {
    font-size: 13px;
    color: #2C2C2A;
    font-weight: 500;
}

.ec-hv.blue { color: #185FA5; }

/* ?? Tabs ?????????????????????????????????????????????????????? */
.ec-tabs {
    display: flex;
    background: #fff;
    border-bottom: 0.5px solid rgba(0,0,0,.08);
}

.ec-tab {
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #888780;
    border-bottom: 2px solid transparent;
    text-align: center;
    transition: all .12s;
    border: none;
    background: transparent;
}

.ec-tab:hover {
    color: #2C2C2A;
    background: #F7F6F3;
}

.ec-tab.active {
    color: #185FA5;
    border-bottom: 2px solid #185FA5;
    background: #fff;
}

/* ?? Contenedor de tabs ?????????????????????????????????????????*/
.ec-tab-body { padding: 16px; }

/* ?? Card de datos del asociado ????????????????????????????????*/
.ec-assoc-card {
    background: #fff;
    border: 0.5px solid rgba(0,0,0,.08);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.ec-assoc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}

.ec-af { display: flex; flex-direction: column; gap: 2px; }

.ec-al {
    font-size: 10px;
    color: #888780;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ec-av {
    font-size: 12px;
    color: #2C2C2A;
    font-weight: 500;
}

/* ?? Layout dos columnas (modalidad) ????????????????????????????*/
.ec-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ?? Panel genérico ?????????????????????????????????????????????*/
.ec-panel {
    background: #fff;
    border: 0.5px solid rgba(0,0,0,.08);
    border-radius: 8px;
    padding: 14px;
}

.ec-panel-title {
    font-size: 11px;
    font-weight: 500;
    color: #888780;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid rgba(0,0,0,.06);
}

.ec-panel-title.blue { color: #0C447C; }

/* ?? Grid de 3 campos por fila ??????????????????????????????????*/
.ec-g1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.ec-g3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.ec-g3.full-last > *:last-child { grid-column: 1 / -1; }

/* ?? Campo individual ???????????????????????????????????????????*/
.ec-field { display: flex; flex-direction: column; gap: 3px; }

.ec-label {
    font-size: 10px;
    color: #888780;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Valor solo lectura (original) */
.ec-val {
    font-size: 12px;
    color: #2C2C2A;
    font-weight: 500;
    padding: 5px 8px;
    background: #F7F6F3;
    border-radius: 5px;
    border: 0.5px solid rgba(0,0,0,.08);
    min-height: 30px;
    line-height: 1.4;
}

.ec-val.money { color: #0C447C; }
.ec-val.empty { color: #B4B2A9; font-style: italic; }
.ec-val.small { font-size: 11px; }

/* Campos editables (recomendados) ?
   Estos reemplazan estylo_caja_form y estylo_select_form
   en los campos del panel derecho                          */
.ec-input {
    width: 100%;
    padding: 5px 8px;
    border: 0.5px solid rgba(0,0,0,.15);
    border-radius: 5px;
    font-size: 12px;
    color: #2C2C2A;
    background: #fff;
    outline: none;
    height: 30px;
}

.ec-input:focus { border-color: #185FA5; box-shadow: 0 0 0 2px rgba(24,95,165,.1); }
.ec-input.money { color: #0C447C; font-weight: 500; }

.ec-select {
    width: 100%;
    padding: 5px 8px;
    border: 0.5px solid rgba(0,0,0,.15);
    border-radius: 5px;
    font-size: 12px;
    color: #2C2C2A;
    background: #fff;
    outline: none;
    height: 30px;
}

.ec-select:focus { border-color: #185FA5; }
.ec-select[multiple] { height: 60px; }

/* ?? Botones de acción ??????????????????????????????????????????*/
.ec-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 0.5px solid rgba(0,0,0,.06);
}

.ec-btn {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ec-btn-outline {
    background: #fff;
    border-color: rgba(0,0,0,.15);
    color: #2C2C2A;
}

.ec-btn-outline:hover { background: #F7F6F3; }

.ec-btn-primary {
    background: #185FA5;
    border-color: #185FA5;
    color: #fff;
}

.ec-btn-primary:hover { background: #0C447C; }

.ec-btn-success {
    background: #3B6D11;
    border-color: #3B6D11;
    color: #fff;
}

.ec-btn-success:hover { background: #27500A; }

.ec-btn-danger {
    background: #A32D2D;
    border-color: #A32D2D;
    color: #fff;
}

.ec-btn-danger:hover { background: #791F1F; }

/* ?? Tabla de capacidad ?????????????????????????????????????????*/
.ec-cap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ec-cap-table th {
    font-size: 10px;
    font-weight: 500;
    color: #888780;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 10px;
    text-align: right;
    background: #FAFAF8;
    border-bottom: 0.5px solid rgba(0,0,0,.08);
}

.ec-cap-table th:first-child { text-align: left; }

.ec-cap-table td {
    padding: 6px 10px;
    border-bottom: 0.5px solid rgba(0,0,0,.04);
    color: #2C2C2A;
    text-align: right;
    vertical-align: middle;
}

.ec-cap-table td:first-child {
    text-align: left;
    color: #5F5E5A;
}

.ec-cap-table td.indent { padding-left: 20px; }
.ec-cap-table td.money { font-weight: 500; }
.ec-cap-table td.rec { color: #0C447C; font-weight: 500; }
.ec-cap-table td.zero { color: #B4B2A9; }

.ec-cap-table tr.ec-group td {
    background: #F1EFE8;
    font-size: 10px;
    font-weight: 500;
    color: #5F5E5A;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ec-cap-table tr.ec-group td:not(:first-child) {
    color: #2C2C2A;
    font-size: 12px;
    letter-spacing: 0;
    font-weight: 500;
}

.ec-cap-table tr.ec-total td {
    background: #E6F1FB;
    font-weight: 500;
    color: #0C447C;
    border-top: 0.5px solid #B5D4F4;
}

.ec-cap-table tr:hover td { background: rgba(0,0,0,.015); }

/* Input editable dentro de la tabla de capacidad */
.ec-cap-input {
    width: 120px;
    padding: 4px 6px;
    border: 0.5px solid #B5D4F4;
    border-radius: 4px;
    font-size: 12px;
    color: #0C447C;
    background: #E6F1FB;
    outline: none;
    text-align: right;
}

.ec-cap-input:focus { border-color: #185FA5; }

/* ?? Barras de endeudamiento ??????????????????????????????????? */
.ec-perc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.ec-perc-box {
    border-radius: 6px;
    padding: 12px;
}

.ec-perc-box.orig { background: #F7F6F3; }
.ec-perc-box.reco { background: #EAF3DE; }

.ec-perc-title {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.ec-perc-box.orig .ec-perc-title { color: #888780; }
.ec-perc-box.reco .ec-perc-title { color: #3B6D11; }

.ec-perc-row-kv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.ec-perc-k { font-size: 11px; color: #5F5E5A; }
.ec-perc-v { font-size: 12px; font-weight: 500; color: #0C447C; }
.ec-perc-box.reco .ec-perc-v { color: #27500A; }

.ec-perc-bar {
    height: 5px;
    border-radius: 3px;
    margin-top: 8px;
}

.ec-perc-bar.orig { background: #E6F1FB; }
.ec-perc-bar.reco { background: #C0DD97; }

.ec-perc-fill {
    height: 100%;
    border-radius: 3px;
}

.ec-perc-fill.orig { background: #185FA5; }
.ec-perc-fill.reco { background: #3B6D11; }

/* ?? Cards de nivel de endeudamiento ????????????????????????????*/
.ec-ende-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.ec-ende-card {
    border-radius: 7px;
    padding: 12px;
    border: 0.5px solid;
}

.ec-ende-card.warn { background: #FAEEDA; border-color: #FAC775; }
.ec-ende-card.ok   { background: #EAF3DE; border-color: #C0DD97; }

.ec-ende-title {
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ec-ende-card.warn .ec-ende-title { color: #633806; }
.ec-ende-card.ok   .ec-ende-title { color: #27500A; }

.ec-ende-tag {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 500;
}

.ec-ende-card.warn .ec-ende-tag { background: #EF9F27; color: #412402; }
.ec-ende-card.ok   .ec-ende-tag { background: #97C459; color: #173404; }

.ec-ende-kv {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 0.5px solid rgba(0,0,0,.06);
}

.ec-ende-kv:last-of-type { border-bottom: none; }

.ec-ende-k { font-size: 11px; }
.ec-ende-card.warn .ec-ende-k { color: #854F0B; }
.ec-ende-card.ok   .ec-ende-k { color: #3B6D11; }

.ec-ende-v { font-size: 12px; font-weight: 500; }
.ec-ende-card.warn .ec-ende-v { color: #412402; }
.ec-ende-card.ok   .ec-ende-v { color: #173404; }
.ec-ende-v.big { font-size: 15px; }

.ec-ende-alert {
    font-size: 11px;
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 5px;
    line-height: 1.5;
}

.ec-ende-card.warn .ec-ende-alert { background: rgba(239,159,39,.2); color: #633806; }
.ec-ende-card.ok   .ec-ende-alert { background: rgba(99,153,34,.15); color: #27500A; }

/* ?? Tabla de endeudamiento ?????????????????????????????????????*/
.ec-ende-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.ec-ende-table th {
    font-size: 10px;
    font-weight: 500;
    color: #888780;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 8px;
    text-align: right;
    background: #FAFAF8;
    border-bottom: 0.5px solid rgba(0,0,0,.08);
    white-space: nowrap;
}

.ec-ende-table th.left { text-align: left; }
.ec-ende-table th.center { text-align: center; }

.ec-ende-table td {
    padding: 6px 8px;
    border-bottom: 0.5px solid rgba(0,0,0,.04);
    color: #2C2C2A;
    text-align: right;
    vertical-align: middle;
}

.ec-ende-table td.left { text-align: left; color: #5F5E5A; }
.ec-ende-table td.center { text-align: center; }
.ec-ende-table td.money { font-weight: 500; }
.ec-ende-table td.empty { color: #B4B2A9; }
.ec-ende-table tr.recoge { background: #FFF5F5; }
.ec-ende-table tr.total { background: #F7F6F3; font-weight: 500; border-top: 0.5px solid rgba(0,0,0,.1); }
.ec-ende-table tr:hover td { background: rgba(0,0,0,.015); }

.ec-badge-recoge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 500;
    background: #FCEBEB;
    color: #791F1F;
}

/* ?? Card de aprobaciones ???????????????????????????????????????*/
.ec-apro-wrap {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border: 0.5px solid rgba(0,0,0,.08);
    border-radius: 8px;
    padding: 16px;
}

.ec-etapa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #E6F1FB;
    color: #0C447C;
    font-weight: 500;
    margin-bottom: 10px;
}

.ec-apro-title {
    font-size: 15px;
    font-weight: 500;
    color: #2C2C2A;
    margin-bottom: 4px;
}

.ec-apro-sub {
    font-size: 12px;
    color: #888780;
    margin-bottom: 10px;
}

.ec-apro-alert {
    font-size: 12px;
    font-weight: 500;
    color: #633806;
    background: #FAEEDA;
    border: 0.5px solid #FAC775;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

/* ?? Impresión del bloque de Capacidad de pago (botón "Imprimir") ?
   Activado solo mientras <body> tiene la clase cred_imprimiendo_capacidad
   (agregada/quitada por imprimirCapacidadPago() en lib_js/js/bodyhtml.js
   justo antes/después de window.print()). Sin esa clase, estas reglas
   no aplican a ninguna otra impresión del sistema.                  */
@media print {
    body.cred_imprimiendo_capacidad * {
        visibility: hidden !important;
    }
    body.cred_imprimiendo_capacidad #cred_capacidad_imprimible,
    body.cred_imprimiendo_capacidad #cred_capacidad_imprimible * {
        visibility: visible !important;
    }
    body.cred_imprimiendo_capacidad #cred_capacidad_imprimible {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    body.cred_imprimiendo_capacidad .cred_no_print {
        display: none !important;
    }
}

/* ?? Responsive básico ??????????????????????????????????????????*/
@media (max-width: 768px) {
    .ec-two-col { grid-template-columns: 1fr; }
    .ec-g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ec-g1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
    .ec-assoc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ec-perc-row { grid-template-columns: 1fr; }
    .ec-ende-row { grid-template-columns: 1fr; }
}