/* ============================================================================
 * consulta_deuda.css — Consulta pública de deuda (pantalla standalone)
 * ----------------------------------------------------------------------------
 * Hermana visual de templates/acceso_magic.html: mismo shell, misma tipografia
 * Roboto, mismos tokens de marca. Prefijo de clases: cd. Tokens declarados UNA
 * sola vez en :root (no hay modal/drawer en esta pantalla, pero se respeta el
 * mismo patron del resto del proyecto).
 *
 * Design system: naranja UCG #ff6600 UNICO acento (<=10% de pantalla), neutros
 * slate, fondo frio #f8fafc, radios sm6/md10/lg16. Publico EXTERNO (edad
 * mediana 36, p90 51): cuerpo minimo 15-16px, objetivos tactiles >=44px,
 * cero jerga interna. WCAG 2.1 AA, foco naranja siempre visible.
 *
 * Indice:
 *   1. Tokens (:root)
 *   2. Base y layout de pagina
 *   3. Encabezado (cd-top)
 *   4. Avisos (cd-alert)
 *   5. Tarjeta de formulario (cd-card, cd-field, cd-input)
 *   6. Botones (cd-btn)
 *   7. Cabecera de contexto del titular (cd-accent)
 *   8. Estado vacio (cd-empty)
 *   9. KPIs (cd-kpis)
 *  10. Barra de filtros (cd-toolbar, cd-chips, cd-search)
 *  11. Programas y cuotas (cd-prog, cd-cuota, cd-badge)
 *  12. Cierre de pantalla (cd-cta, cd-link, cd-foot)
 *  13. prefers-reduced-motion global
 *  14. Responsive
 * ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
 * 1. TOKENS
 * ════════════════════════════════════════════════════════════════════════ */
:root {
    --cd-brand: #ff6600;
    --cd-brand-600: #e65c00;
    --cd-brand-bg: #fff3eb;
    --cd-brand-border: #ffc0a3;
    /* Naranja legible como texto: #ff6600 da 2.94:1 sobre blanco y AA pide 4.5:1. */
    --cd-brand-text: #c2410c;
    --cd-ink: #1f2937;
    --cd-sub: #374151;
    --cd-muted: #6b7280;
    --cd-border: #e4e4e7;
    /* Foco en tinta y no en naranja: #ff6600 sobre blanco da 2.94:1 y WCAG 2.4.11 pide 3:1. */
    --cd-focus: #1f2937;
    --cd-bg: #eceff4;
    --cd-surface: #ffffff;
    --cd-radius-sm: 6px;
    --cd-radius-md: 10px;
    --cd-radius-lg: 16px;
    --cd-shadow: 0 1px 4px rgba(17, 24, 39, .07), 0 4px 14px rgba(17, 24, 39, .06);
    --cd-success: #16a34a;
    --cd-success-bg: #d1fae5;
    --cd-success-border: #6ee7b7;
    --cd-success-ink: #065f46;
    --cd-warning: #d97706;
    --cd-warning-bg: #fff7ec;
    --cd-warning-border: #fbd8a3;
    --cd-warning-ink: #92400e;
    --cd-danger: #dc2626;
    --cd-danger-bg: #fef2f2;
    --cd-danger-border: #fecaca;
    --cd-danger-ink: #991b1b;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 2. BASE Y LAYOUT DE PAGINA
 * ════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }

/* Sin scroll de navegador: la banda queda fija y el contenido rueda por dentro. */
body {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    background: var(--cd-bg);
    color: var(--cd-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

.cd-root {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 36px 24px 56px;
}

/* Barra oculta: rueda con la ventana entera y sin cromo a la vista. */
.cd-root::-webkit-scrollbar { width: 0; height: 0; }

/* min-width:0 — como item flex de .cd-root heredaria min-width:auto y el nombre
   largo de la maestria le impondria su ancho de contenido minimo. */
.cd-shell {
    width: 100%;
    min-width: 0;
    max-width: 480px;
}


.cd-shell--wide { max-width: 1440px; }

/* ══════════════════════════════════════════════════════════════════════════
 * 3. ENCABEZADO
 * ════════════════════════════════════════════════════════════════════════ */
.cd-top { text-align: center; margin-bottom: 28px; }

.cd-logo { height: 44px; width: auto; margin: 0 auto 14px; display: block; }

.cd-inst {
    font-size: .875rem;
    font-weight: 600;
    color: var(--cd-muted);
    margin: 0 0 6px;
}

.cd-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--cd-ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-wrap: balance;
}

.cd-sub {
    font-size: 1rem;
    color: var(--cd-sub);
    line-height: 1.55;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 4. AVISOS
 * ════════════════════════════════════════════════════════════════════════ */
.cd-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .9375rem;
    line-height: 1.55;
    padding: 14px 16px;
    border-radius: var(--cd-radius-md);
    border: 1px solid;
    margin-bottom: 18px;
}

.cd-alert svg { flex-shrink: 0; margin-top: 2px; }

.cd-alert strong { display: block; margin-bottom: 2px; color: inherit; }

.cd-alert--danger { background: var(--cd-danger-bg); border-color: var(--cd-danger-border); color: var(--cd-danger-ink); }

.cd-alert--warning { background: var(--cd-warning-bg); border-color: var(--cd-warning-border); color: var(--cd-warning-ink); }

.cd-alert--info { background: var(--cd-brand-bg); border-color: var(--cd-brand-border); color: var(--cd-ink); }

.cd-alert--info svg { color: var(--cd-brand); }

/* ══════════════════════════════════════════════════════════════════════════
 * 5. TARJETA DE FORMULARIO
 * ════════════════════════════════════════════════════════════════════════ */
.cd-card {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow);
    padding: 28px 28px 26px;
}

.cd-field { margin-bottom: 18px; }

.cd-field:last-of-type { margin-bottom: 22px; }

.cd-label {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cd-sub);
    margin-bottom: 7px;
}

.cd-input {
    width: 100%;
    min-height: 48px;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    padding: 10px 14px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--cd-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cd-input::placeholder { color: var(--cd-muted); }

.cd-input:focus, .cd-input:focus-visible {
    outline: 2px solid var(--cd-focus);
    outline-offset: 2px;
    border-color: var(--cd-brand);
}

select.cd-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.cd-field--prog {
    margin-bottom: 0;
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
}

/* label con icono, patron .co-field label de comercial.css 123-131 */
.cd-field--prog .cd-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cd-ink);
}

.cd-field--prog .cd-label svg { color: var(--cd-muted); flex-shrink: 0; }

/* Select2 en cd-: centrado por flexbox como comercial.css 320-345, no por line-height */
#cd-prog-wrap .select2-container,
#cd-tipodoc-wrap .select2-container {
    width: 100% !important;
    max-width: 100%;
    display: block;
}

#cd-prog-wrap .select2-container--default .select2-selection--single,
#cd-tipodoc-wrap .select2-container--default .select2-selection--single {
    height: 48px;
    display: flex;
    align-items: center;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    transition: border-color .15s ease;
}

#cd-prog-wrap .select2-container--default .select2-selection--single,
#cd-prog-wrap .select2-container--default .select2-selection--single .select2-selection__rendered,
#cd-tipodoc-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal;
    min-height: 0;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 14px;
    padding-right: 40px;
    color: var(--cd-brand-text);
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cd-prog-wrap .select2-container--default .select2-selection--single,
#cd-prog-wrap .select2-container--default .select2-selection--single .select2-selection__arrow,
#cd-tipodoc-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 10px;
}

#cd-prog-wrap .select2-container--default.select2-container--open .select2-selection--single,
#cd-prog-wrap .select2-container--default.select2-container--focus .select2-selection--single,
#cd-tipodoc-wrap .select2-container--default.select2-container--open .select2-selection--single,
#cd-tipodoc-wrap .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--cd-brand);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .25);
}

.select2-container--default .select2-dropdown {
    border-color: var(--cd-brand);
    border-radius: var(--cd-radius-sm);
    overflow: hidden;
}

.select2-container--default .select2-results__option {
    padding: 10px 14px;
    color: var(--cd-ink);
    font-size: .9375rem;
}


.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: var(--cd-brand-bg);
    color: var(--cd-ink);
    font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--cd-brand);
    color: #ffffff;
}

.cd-hint {
    font-size: .875rem;
    color: var(--cd-muted);
    line-height: 1.5;
    margin: 8px 0 0;
}

.cd-hint strong { color: var(--cd-ink); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
 * 6. BOTONES
 * ════════════════════════════════════════════════════════════════════════ */
.cd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--cd-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.cd-btn:active { transform: translateY(1px); }

.cd-btn:focus-visible { outline: 2px solid var(--cd-focus); outline-offset: 2px; }

.cd-btn--block { display: flex; width: 100%; }

.cd-btn--primary { background: var(--cd-brand); color: #fff; }

.cd-btn--primary:hover { background: var(--cd-brand-600); color: #fff; }

.cd-btn--ghost { background: var(--cd-surface); color: var(--cd-sub); border-color: var(--cd-muted); }

.cd-btn--ghost:hover { border-color: var(--cd-brand); color: var(--cd-brand); }

/* SweetAlert v8 trae buttonsStyling:false y da la forma con clases de Bootstrap, que esta pantalla
 * no carga; el color lo sigue poniendo swal-ucg.css como en el resto del sistema. La cadena larga
 * le gana a `.swal2-modal.swal2-popup .swal2-actions .btn`, que impone padding 7px. */
.swal2-modal.swal2-popup .swal2-actions .cd-btn.cd-btn--swal {
    min-height: 40px;
    padding: 9px 26px;
    font-size: .95rem;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 7. CABECERA DE CONTEXTO DEL TITULAR
 * ════════════════════════════════════════════════════════════════════════ */
.cd-accent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.cd-accent__acciones {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cd-accent__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--cd-radius-md);
    background: var(--cd-brand-bg);
    border: 1px solid var(--cd-brand-border);
    color: var(--cd-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-accent__lbl {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cd-muted);
    margin-bottom: 3px;
}

.cd-accent__val {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cd-ink);
    line-height: 1.3;
}

.cd-accent__doc {
    font-size: .875rem;
    color: var(--cd-muted);
    margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 8. ESTADO VACIO
 * ════════════════════════════════════════════════════════════════════════ */
.cd-empty {
    background: var(--cd-surface);
    border: 1px dashed var(--cd-border);
    border-radius: var(--cd-radius-md);
    padding: 48px 24px;
    text-align: center;
    margin-bottom: 20px;
}

.cd-empty svg { color: var(--cd-success); margin: 0 auto 14px; display: block; }

.cd-empty__title { font-size: 1.125rem; font-weight: 700; color: var(--cd-ink); margin: 0 0 6px; }

.cd-empty__text { font-size: 1rem; color: var(--cd-sub); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
 * 9. KPIS
 * ════════════════════════════════════════════════════════════════════════ */
.cd-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.cd-kpi {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    padding: 14px 16px;
}

.cd-kpi__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--cd-muted);
}

.cd-kpi__val { font-size: 1.5rem; font-weight: 700; margin-top: 6px; line-height: 1.15; }

.cd-kpi__hint { font-size: .875rem; color: var(--cd-muted); margin-top: 4px; }

.cd-kpi--bad .cd-kpi__val { color: var(--cd-danger); }

.cd-kpi--wait .cd-kpi__val { color: var(--cd-warning); }

.cd-kpi--ok .cd-kpi__val { color: var(--cd-success); }

/* ══════════════════════════════════════════════════════════════════════════
 * 10. BARRA DE FILTROS
 * ════════════════════════════════════════════════════════════════════════ */
.cd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.cd-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }

.cd-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--cd-border);
    border-radius: 999px;
    background: var(--cd-surface);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cd-sub);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cd-chip:hover { background: var(--cd-bg); border-color: #d4d4d8; }

.cd-chip.is-active { background: var(--cd-brand-bg); border-color: var(--cd-brand-border); color: var(--cd-ink); }

.cd-chip:focus-visible { outline: 2px solid var(--cd-focus); outline-offset: 2px; }

.cd-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 320px;
}

.cd-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cd-muted);
    pointer-events: none;
}

.cd-search__input {
    width: 100%;
    min-height: 44px;
    padding: 9px 14px 9px 40px;
    border: 1px solid var(--cd-border);
    border-radius: 999px;
    background: var(--cd-surface);
    font-family: inherit;
    font-size: .9375rem;
    color: var(--cd-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cd-search__input::placeholder { color: var(--cd-muted); }

.cd-search__input:focus, .cd-search__input:focus-visible {
    outline: 2px solid var(--cd-focus);
    outline-offset: 2px;
    border-color: var(--cd-brand);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 11. PROGRAMAS Y CUOTAS
 * ════════════════════════════════════════════════════════════════════════ */
.cd-programas { margin-bottom: 8px; }

.cd-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cd-prog {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    overflow: hidden;
    margin-bottom: 16px;
}

.cd-prog[hidden] { display: none; }

.cd-prog__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    background: var(--cd-brand-bg);
    border-bottom: 1px solid var(--cd-brand-border);
}

.cd-prog__name {
    flex: 1 1 260px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cd-ink);
    line-height: 1.35;
}

.cd-prog__name svg { flex-shrink: 0; margin-top: 2px; color: var(--cd-brand); }

.cd-prog__meta { font-size: .8125rem; font-weight: 400; color: var(--cd-sub); margin-top: 3px; }

.cd-prog__meta strong { color: #b91c1c; font-weight: 600; }

.cd-prog__saldo { text-align: right; }

.cd-prog__saldo-lbl { font-size: .75rem; font-weight: 600; color: var(--cd-sub); }

.cd-prog__saldo-val { font-size: 1.25rem; font-weight: 700; color: var(--cd-ink); margin-top: 2px; }

.cd-prog__body { padding: 0; }

.cd-cuota {
    border-top: 1px solid var(--cd-border);
    transition: background-color .12s ease;
}

.cd-cuota:first-child { border-top: 0; }

.cd-cuota[hidden] { display: none; }

.cd-cuota--pagado .cd-cuota__monto-val { color: var(--cd-muted); font-weight: 600; }

.cd-cuota--vencido { background: linear-gradient(90deg, var(--cd-danger-bg), transparent 62%); }

/* Sin opacity: bajaba el texto de la fila a 2.3:1. La anulacion la dicen el fondo, el tachado y el badge. */
.cd-cuota--anulado { background: var(--cd-bg); }

.cd-cuota--anulado .cd-cuota__monto-val { text-decoration: line-through; }

.cd-cuota__info { min-width: 0; display: block; }

.cd-cuota__tit {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--cd-ink);
    line-height: 1.35;
}

.cd-cuota__sub { display: block; font-size: .8125rem; color: var(--cd-muted); margin-top: 1px; }

.cd-cuota__vence {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .875rem;
    color: var(--cd-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cd-cuota__vence svg { flex-shrink: 0; }

.cd-cuota__vence strong { color: var(--cd-ink); }

.cd-cuota__monto { text-align: right; }

.cd-cuota__monto-val { font-size: 1.125rem; font-weight: 700; color: var(--cd-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.cd-cuota__monto-sub { font-size: .8125rem; color: var(--cd-muted); white-space: nowrap; }

/* line-height:1 — la caja de línea reserva descendentes que las mayúsculas no usan */
.cd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 7px 10px 6px;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .01em;
    border: 1px solid;
    white-space: nowrap;
}

.cd-badge--neutral { background: var(--cd-bg); color: var(--cd-sub); border-color: var(--cd-border); }

.cd-badge--success { background: var(--cd-success-bg); color: var(--cd-success-ink); border-color: var(--cd-success-border); }

.cd-badge--warning { background: var(--cd-warning-bg); color: var(--cd-warning-ink); border-color: var(--cd-warning-border); }

.cd-badge--danger { background: var(--cd-danger-bg); color: var(--cd-danger-ink); border-color: var(--cd-danger-border); }

.cd-empty-filtro {
    text-align: center;
    padding: 32px 16px;
    color: var(--cd-muted);
    font-size: .9375rem;
}

.cd-empty-filtro[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
 * 12. CIERRE DE PANTALLA
 * ════════════════════════════════════════════════════════════════════════ */
.cd-cta { margin: 20px 0 6px; }

.cd-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cd-sub);
    text-decoration: none;
}

.cd-link:hover { color: var(--cd-brand); text-decoration: underline; }

.cd-link:focus-visible { outline: 2px solid var(--cd-focus); outline-offset: 2px; border-radius: 4px; }

.cd-foot {
    font-size: .875rem;
    color: var(--cd-muted);
    text-align: center;
    line-height: 1.5;
    margin: 28px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 13. PREFERS-REDUCED-MOTION GLOBAL
 * ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .cd-btn, .cd-input, .cd-search__input, .cd-chip, .cd-cuota, .cd-link {
        transition-duration: .01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 * 14. RESPONSIVE
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .cd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .cd-field--prog { width: 100%; max-width: none; flex-basis: auto; }
    .cd-chips { width: 100%; }

    .cd-accent__acciones { margin-left: 0; width: 100%; }

    .cd-accent__acciones .cd-btn { flex: 1 1 auto; justify-content: center; }

    .cd-ledger__cab { display: none; }

    .cd-cuota__cab {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 14px;
        padding: 14px;
    }

    .cd-cuota__info { grid-column: 1; grid-row: 1; }

    .cd-cuota__chevron { grid-column: 2; grid-row: 1; align-self: start; }

    .cd-cuota__estado { grid-column: 1 / -1; justify-self: start; }

    .cd-cel {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
        padding-top: 5px;
        border-top: 1px dotted var(--cd-border);
    }

    .cd-cel::before {
        content: attr(data-cel);
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--cd-muted);
    }

    .cd-cel__nota { display: inline; margin: 0 0 0 6px; }

    .cd-det, .cd-nota--espera { margin: 0 14px 14px; }
}

@media (max-width: 576px) {
    .cd-card { padding: 24px 20px 22px; }
    .cd-title { font-size: 1.375rem; }
    .cd-kpis { grid-template-columns: minmax(0, 1fr); }
    .cd-accent { flex-direction: column; }
    .cd-prog__head { padding: 12px 14px; }
}




/* ══════════════════════════════════════════════════════════════════════════
 * 16. FILTRO DE MAESTRIA — medidas de .co-select (comercial.css 134-142)
 * ════════════════════════════════════════════════════════════════════════ */
#cd-prog-wrap .select2-container--default .select2-selection--single {
    height: 44px;
}

#cd-prog-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    padding-right: 28px;
    font-size: .875rem;
}

#cd-prog-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 6px;
}



/* Cuatro maestrias con nombre largo no caben en los 200px por defecto. */
#cd-prog-wrap + .select2-container .select2-results__options,
.select2-container--open .select2-results__options { max-height: 320px; }


/* ══════════════════════════════════════════════════════════════════════════
 * 17. TUTORIAL DE PAGO — modal propio con capturas reales de Mis finanzas
 * ════════════════════════════════════════════════════════════════════════ */
.cd-tut {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, .55);
    animation: cd-fundido .18s ease both;
}

.cd-tut[hidden] { display: none; }

.cd-tut__caja {
    background: var(--cd-surface);
    border-radius: var(--cd-radius-lg);
    box-shadow: 0 20px 60px rgba(17, 24, 39, .3);
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    animation: cd-sube .22s cubic-bezier(.16, 1, .3, 1) both;
}

.cd-tut__cab {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--cd-border);
}

.cd-tut__tit {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cd-ink);
    margin: 0 0 5px;
}

.cd-tut__sub { font-size: .9375rem; color: var(--cd-sub); margin: 0; line-height: 1.5; }

.cd-tut__x {
    margin-left: auto;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    background: var(--cd-surface);
    color: var(--cd-muted);
    cursor: pointer;
}

.cd-tut__x:hover { background: var(--cd-bg); color: var(--cd-ink); }

.cd-tut__x:focus-visible { outline: 2px solid var(--cd-focus); outline-offset: 2px; }

.cd-tut__cuerpo { padding: 20px 24px; overflow-y: auto; }

.cd-tut__paso[hidden] { display: none; }

.cd-tut__paso { animation: cd-entra .2s ease both; }

.cd-tut__txt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1rem;
    color: var(--cd-sub);
    line-height: 1.55;
    margin: 0 0 16px;
}

.cd-tut__n {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cd-brand);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
}

.cd-tut__shot {
    margin: 0;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    overflow: hidden;
    line-height: 0;
    background: var(--cd-bg);
}

.cd-tut__shot img { width: 100%; height: auto; display: block; }

.cd-tut__pie {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--cd-border);
}

.cd-tut__puntos { display: flex; gap: 7px; }

.cd-tut__punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cd-border);
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.cd-tut__punto.is-activo { background: var(--cd-brand); transform: scale(1.25); }

.cd-tut__punto:focus-visible { outline: 2px solid var(--cd-focus); outline-offset: 3px; }

.cd-tut__nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.cd-tut__nav .cd-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 576px) {
    .cd-tut { padding: 0; }
    .cd-tut__caja { max-width: none; max-height: 100vh; border-radius: 0; }
    .cd-tut__pie { flex-wrap: wrap; }
    .cd-tut__nav { margin-left: 0; width: 100%; }
    .cd-tut__nav .cd-btn { flex: 1 1 auto; justify-content: center; }
}

@keyframes cd-fundido { from { opacity: 0; } to { opacity: 1; } }

@keyframes cd-sube {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes cd-entra {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 18. AL DIA, AVANCE Y ENTRADA
 * ════════════════════════════════════════════════════════════════════════ */
.cd-prog__barra {
    height: 5px;
    background: var(--cd-border);
    overflow: hidden;
}

.cd-prog__barra span {
    display: block;
    height: 100%;
    background: var(--cd-brand);
    transform-origin: left center;
    animation: cd-avanza .7s cubic-bezier(.16, 1, .3, 1) both;
}

.cd-kpi__val { transition: color .2s ease; }

/* Entrada escalonada del ledger: solo las 12 primeras, el resto ya esta abajo. */
.cd-cuota { animation: cd-entra-fila .3s ease both; }

.cd-cuota:nth-child(1) { animation-delay: .02s; }
.cd-cuota:nth-child(2) { animation-delay: .04s; }
.cd-cuota:nth-child(3) { animation-delay: .06s; }
.cd-cuota:nth-child(4) { animation-delay: .08s; }
.cd-cuota:nth-child(5) { animation-delay: .10s; }
.cd-cuota:nth-child(6) { animation-delay: .12s; }
.cd-cuota:nth-child(7) { animation-delay: .14s; }
.cd-cuota:nth-child(8) { animation-delay: .16s; }
.cd-cuota:nth-child(9) { animation-delay: .18s; }
.cd-cuota:nth-child(10) { animation-delay: .20s; }
.cd-cuota:nth-child(11) { animation-delay: .22s; }
.cd-cuota:nth-child(12) { animation-delay: .24s; }

.cd-kpi { animation: cd-entra .3s ease both; }
.cd-kpi:nth-child(2) { animation-delay: .05s; }
.cd-kpi:nth-child(3) { animation-delay: .10s; }
.cd-kpi:nth-child(4) { animation-delay: .15s; }

@keyframes cd-avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes cd-entra-fila {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* El bloque global de prefers-reduced-motion solo cubre transiciones. */
@media (prefers-reduced-motion: reduce) {
    .cd-situacion, .cd-prog__barra span, .cd-cuota, .cd-kpi, .cd-tut__caja, .cd-tut, .cd-tut__paso {
        animation: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 19. SITUACION GENERAL — un vistazo: cuanto debe, cuanto vencido, cuanto pago
 * ════════════════════════════════════════════════════════════════════════ */
/* Sin tarjeta ni barra de acento: el enunciado no es una tarjeta mas, es el titular
   de la pantalla. La jerarquia la hace el tamano de la cifra, no el contenedor. */
.cd-situacion {
    display: block;
    padding: 0 4px;
    margin: -4px 0 20px;
    animation: cd-entra .28s ease both;
}

.cd-situacion__texto { flex: 1 1 320px; min-width: 0; }

.cd-situacion__tit {
    font-size: clamp(1.75rem, 3.4vw, 2.375rem);
    font-weight: 700;
    color: var(--cd-ink);
    margin: 0 0 6px;
    letter-spacing: -.028em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    text-wrap: balance;
}

.cd-situacion.is-riesgo .cd-situacion__tit { color: var(--cd-danger-ink); }

.cd-situacion.is-aldia .cd-situacion__tit { color: var(--cd-success-ink); }

.cd-situacion__frase {
    font-size: 1rem;
    color: var(--cd-muted);
    margin: 0;
    line-height: 1.55;
    max-width: 56ch;
}

.cd-situacion__medida { flex: 0 1 380px; min-width: 240px; }

.cd-medidor {
    width: 100%;
    position: relative;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--cd-border);
    margin-bottom: 10px;
}

/* scaleX y no width: animar el ancho fuerza relayout en cada fotograma. Lo pagado
   crece desde la izquierda y lo vencido desde la derecha; el hueco es lo pendiente. */
.cd-medidor__pagado,
.cd-medidor__vencido {
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.cd-medidor__pagado { background: var(--cd-success); transform-origin: left center; }

.cd-medidor__vencido { background: var(--cd-danger); transform-origin: right center; }

.cd-medidor__leyenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 16px;
    font-size: .8125rem;
    color: var(--cd-muted);
}

.cd-medidor__leyenda b { color: var(--cd-ink); font-variant-numeric: tabular-nums; }

.cd-medidor__leyenda span[hidden] { display: none; }

.cd-punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}

.cd-punto--pagado { background: var(--cd-success); }

.cd-punto--pend { background: var(--cd-border); border: 1px solid var(--cd-muted); }

.cd-punto--venc { background: var(--cd-danger); }

/* ══════════════════════════════════════════════════════════════════════════
 * 20. COMPROBANTES EN REVISION
 * ════════════════════════════════════════════════════════════════════════ */
.cd-revision {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: var(--cd-warning-bg);
    border: 1px solid var(--cd-warning-border);
    border-radius: var(--cd-radius-md);
    padding: 15px 18px;
    margin-bottom: 16px;
}

.cd-revision__icono {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cd-warning);
    color: #fff;
}

.cd-revision__tit {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--cd-warning-ink);
    margin: 0 0 2px;
}

.cd-revision__txt { font-size: .875rem; color: var(--cd-warning-ink); margin: 0; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════
 * 21. CHIPS CON CONTEO
 * ════════════════════════════════════════════════════════════════════════ */
.cd-chip__n {
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef1f5;
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cd-muted);
}

.cd-chip.is-active .cd-chip__n { background: rgba(255, 102, 0, .16); color: var(--cd-brand-text); }

.cd-chip.is-vacio { opacity: .45; cursor: not-allowed; }

.cd-chip--riesgo.is-active { border-color: var(--cd-danger-border); background: var(--cd-danger-bg); }

.cd-chip--riesgo.is-active .cd-chip__n { background: rgba(220, 38, 38, .14); color: var(--cd-danger-ink); }

/* ══════════════════════════════════════════════════════════════════════════
 * 22. CUOTA EXPANDIBLE
 * ════════════════════════════════════════════════════════════════════════ */
.cd-cuota__cab {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1.5fr) 104px 156px 132px 108px 112px 122px 22px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cd-cuota__cab:hover { background: var(--cd-bg); }

.cd-cuota__cab:focus-visible { outline: 2px solid var(--cd-focus); outline-offset: 2px; }

.cd-cuota__estado { justify-self: center; align-self: center; }




.cd-cuota__chevron {
    flex-shrink: 0;
    color: var(--cd-muted);
    display: grid;
    place-items: center;
    transition: transform .2s ease, color .15s ease;
}

.cd-cuota__estado { justify-self: center; align-self: center; }

.cd-ledger__cab {
    display: grid;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(0, 1.5fr) 104px 156px 132px 108px 112px 122px 22px;
    gap: 14px;
    padding: 9px 20px;
    background: var(--cd-bg);
    border-bottom: 1px solid var(--cd-border);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cd-muted);
}

.cd-cel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .875rem;
    color: var(--cd-sub);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

.cd-cel__nota {
    display: block;
    font-size: .75rem;
    color: var(--cd-muted);
    margin-top: 1px;
}

.cd-cuota--vencido .cd-cel__nota { color: var(--cd-danger); }

.cd-num { text-align: center; }

.cd-cel--saldo { font-weight: 700; color: var(--cd-ink); font-size: .9375rem; }

.cd-cuota--pagado .cd-cel--saldo { color: var(--cd-muted); font-weight: 600; }

.cd-det {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px 32px;
    margin: 0 20px 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--cd-border);
}

.cd-det__lbl {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cd-muted);
    margin: 0 0 5px;
}

.cd-det__val { font-size: .9375rem; color: var(--cd-ink); margin: 0; line-height: 1.5; }

.cd-det__val--flojo { color: var(--cd-muted); }


.cd-cuota.is-abierta .cd-cuota__chevron { transform: rotate(180deg); color: var(--cd-brand); }



.cd-cuota.is-abierta { background: var(--cd-brand-bg); }

.cd-cuota__detalle {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .26s cubic-bezier(.16, 1, .3, 1);
}

.cd-cuota.is-abierta .cd-cuota__detalle { grid-template-rows: 1fr; }

/* overflow:hidden en el hijo — sin el, el contenido se sale de la fila de 0fr.
   min-height:0 porque un item de grid trae min-height:auto y la fila nunca baja a cero.
   Sin padding: el relleno del hijo tampoco lo comprime la fila, va en el contenido. */
.cd-cuota__detalle-in {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility .26s;
}

.cd-cuota.is-abierta .cd-cuota__detalle-in { visibility: visible; }

.cd-nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .875rem;
    color: var(--cd-muted);
    margin: 14px 0 0;
    line-height: 1.5;
}

.cd-nota svg { flex-shrink: 0; margin-top: 2px; }

.cd-nota--espera {
    margin: 0 20px 18px;
    background: var(--cd-warning-bg);
    border: 1px solid var(--cd-warning-border);
    border-radius: var(--cd-radius-sm);
    color: var(--cd-warning-ink);
    padding: 10px 12px;
}

.cd-pagos { margin-top: 16px; }

.cd-pagos__tit {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cd-muted);
    margin: 0 0 7px;
}

.cd-pagos__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cd-pagos__lista li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    padding: 8px 12px;
    font-size: .9375rem;
    color: var(--cd-sub);
    font-variant-numeric: tabular-nums;
}

.cd-pagos__lista b { color: var(--cd-ink); }

/* ══════════════════════════════════════════════════════════════════════════
 * 23. ESQUELETO DE CARGA
 * ════════════════════════════════════════════════════════════════════════ */
.cd-esqueleto { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

.cd-esqueleto[hidden] { display: none; }

.cd-esq-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }

.cd-esq {
    border-radius: var(--cd-radius-sm);
    background: linear-gradient(90deg, var(--cd-border) 25%, var(--cd-bg) 50%, var(--cd-border) 75%);
    background-size: 200% 100%;
    animation: cd-brillo 1.2s linear infinite;
}

.cd-esq--titular { height: 68px; }

.cd-esq--kpi { height: 84px; }

.cd-esq--linea { height: 56px; }

.cd-btn.is-cargando { opacity: .75; cursor: progress; }

@keyframes cd-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .cd-esq, .cd-medidor__pagado, .cd-medidor__vencido, .cd-cuota__detalle,
    .cd-cuota__detalle-in, .cd-cuota__chevron {
        animation: none !important;
        transition: none !important;
    }
}





/* ══════════════════════════════════════════════════════════════════════════
 * 24. BANDA INSTITUCIONAL — marca a la izquierda, acceso a sesion a la derecha
 * ════════════════════════════════════════════════════════════════════════ */
.cd-banner {
    flex-shrink: 0;
    background: var(--cd-surface);
    border-bottom: 1px solid var(--cd-border);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .08), 0 8px 24px rgba(17, 24, 39, .07);
    position: relative;
    z-index: 5;
}

.cd-banner__in {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cd-banner__marca {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    text-decoration: none;
    color: var(--cd-ink);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
}

.cd-banner__marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-banner__marca i { color: var(--cd-border); font-style: normal; margin: 0 2px; }

.cd-banner__marca:focus-visible { outline: 2px solid var(--cd-focus); outline-offset: 3px; }

.cd-banner__logo { height: 44px; width: auto; display: block; }

.cd-banner__acceso {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid var(--cd-brand);
    border-radius: var(--cd-radius-sm);
    background: var(--cd-brand);
    color: #ffffff;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.cd-banner__acceso:hover {
    background: var(--cd-brand-600);
    border-color: var(--cd-brand-600);
}

.cd-banner__acceso:focus-visible { outline: 2px solid var(--cd-focus); outline-offset: 2px; }


@media (max-width: 576px) {
    .cd-root { padding: 24px 16px 40px; }
    .cd-banner__in { padding: 0 16px; height: 62px; }
    .cd-banner__logo { height: 36px; }
    .cd-banner__marca { font-size: .8125rem; }
    .cd-banner__acceso span { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 25. ORDEN DE LECTURA — alcance, luego situacion, luego detalle
 * ════════════════════════════════════════════════════════════════════════ */
.cd-alcance {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow);
    padding: 14px 16px;
    margin-bottom: 18px;
}

.cd-filtros-ledger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}


/* La primera columna es texto largo: se lee alineada a la izquierda. */
.cd-ledger__cab > span:first-child,
.cd-cuota__info { text-align: left; }

.cd-ledger__cab > span:last-child { text-align: right; }