/* ============================================================
   Control Interno — back-office financiero
   Prefijo: .ci-

   VIVE ADENTRO DEL PANEL (/admin), no del sitio público. Eso cambia dos
   cosas: el ancho y el padding los pone AdminLayout —si los repitiéramos
   acá, el contenido quedaría con el doble de margen y más angosto que el
   resto del panel— y la escala tipográfica es la de una herramienta de
   trabajo, no la de una página que se lee una vez en el celular.
   ============================================================ */

.ci-page {
    color: var(--color-text);
}

/* ── Encabezado ─────────────────────────────────────────── */
.ci-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ci-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-brand-dark);
}
/* Mismo tamaño que los títulos del resto del panel: 24px. 1.9rem hacía que
   esta pantalla pareciera de otra aplicación. */
.ci-title {
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.2px;
    margin: 2px 0 4px;
    color: var(--color-text);
}
.ci-sub { color: var(--color-text-muted); font-size: 14px; margin: 0; }

.ci-head__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.ci-select, .ci-input {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: 7px 10px;
    font-size: 13px;
    background: var(--color-surface);
    color: var(--color-text);
}
.ci-btn {
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ci-btn:hover { border-color: var(--color-brand); color: var(--color-brand-dark); }
.ci-btn--primary {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}
.ci-btn--primary:hover { background: var(--color-brand-dark); color: #fff; }
.ci-btn--ghost { background: transparent; }
.ci-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Navegación interna (tabs) ──────────────────────────── */
.ci-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.ci-tab {
    padding: 10px 16px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--color-text-subtle);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.ci-tab:hover { color: var(--color-text); }
.ci-tab--active { color: var(--color-brand-dark); border-bottom-color: var(--color-brand); }

/* ── Cards ──────────────────────────────────────────────── */
.ci-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}
.ci-card__title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── KPIs ───────────────────────────────────────────────── */
.ci-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.ci-kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.ci-kpi__label { font-size: .78rem; color: var(--color-text-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ci-kpi__value { font-size: 1.5rem; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ci-kpi__hint { font-size: .8rem; color: var(--color-text-subtle); margin-top: 4px; }
/* Antes era un degradado teal a pantalla completa. En un panel donde el teal
   es el color de las acciones, un bloque entero de ese color se lleva toda la
   atención sin que el dato lo merezca: alcanza con el borde y el número. */
.ci-kpi--accent { border-color: var(--color-brand); box-shadow: inset 3px 0 0 var(--color-brand), var(--shadow-sm); }
.ci-kpi--accent .ci-kpi__value { color: var(--color-brand-dark); }
/* Cuando la tarjeta tenía fondo teal, la etiqueta y la nota iban en blanco.
   Sin ese fondo, heredan el color normal: en blanco quedaban invisibles. */
.ci-kpi--accent .ci-kpi__label { color: var(--color-brand-dark); }
.ci-kpi--accent .ci-kpi__hint { color: var(--color-text-subtle); }

.ci-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 20px; }
.ci-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }

.ci-chart-wrap { position: relative; height: 280px; }
.ci-chart-wrap--sm { height: 220px; }

/* ── Tablas ─────────────────────────────────────────────── */
.ci-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ci-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-subtle);
    padding: 9px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ci-table td { padding: 10px; border-bottom: 1px solid var(--color-border); }
.ci-table tr:last-child td { border-bottom: none; }
.ci-table tbody tr:hover { background: var(--color-brand-bg); }
.ci-num { text-align: right; font-variant-numeric: tabular-nums; }
.ci-table-scroll { overflow-x: auto; }

/* ── Badges de estado ───────────────────────────────────── */
.ci-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.4;
}
.ci-badge--emitida   { background: #fef3c7; color: #92400e; }
.ci-badge--cobrada   { background: #dbeafe; color: #1e40af; }
.ci-badge--conciliada{ background: #d1fae5; color: #065f46; }
.ci-badge--anulada   { background: #f1f5f9; color: #64748b; }
.ci-badge--vencida   { background: #fee2e2; color: #991b1b; }

/* ── Semáforos de integridad ────────────────────────────── */
.ci-checks { display: flex; flex-direction: column; gap: 8px; }
.ci-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.ci-check__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ci-check__desc { flex: 1; font-size: .9rem; }
.ci-check__count { font-weight: 800; font-variant-numeric: tabular-nums; }
.ci-check--ok          { background: #f0fdf4; }
.ci-check--ok .ci-check__dot { background: var(--color-success); }
.ci-check--advertencia { background: #fffbeb; }
.ci-check--advertencia .ci-check__dot { background: var(--color-warning); }
.ci-check--error       { background: #fef2f2; }
.ci-check--error .ci-check__dot { background: var(--color-error); }

.ci-pill-estado {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: var(--radius-pill);
    font-weight: 700; font-size: .85rem;
}
.ci-pill-estado--ok    { background: #d1fae5; color: #065f46; }
.ci-pill-estado--alerta{ background: #fee2e2; color: #991b1b; }

/* ── Aging ──────────────────────────────────────────────── */
.ci-aging { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ci-aging__cell { text-align: center; padding: 14px; border-radius: var(--radius-md); background: var(--color-bg); }
.ci-aging__cell--warn { background: #fffbeb; }
.ci-aging__cell--danger { background: #fef2f2; }
.ci-aging__label { font-size: .76rem; color: var(--color-text-subtle); font-weight: 600; }
.ci-aging__value { font-size: 1.15rem; font-weight: 800; margin-top: 4px; }
.ci-aging__count { font-size: .78rem; color: var(--color-text-subtle); }

/* ── Alertas / mensajes ─────────────────────────────────── */
.ci-alert { padding: 12px 16px; border-radius: var(--radius-md); font-size: .9rem; margin-bottom: 16px; }
.ci-alert--ok { background: #f0fdf4; color: #065f46; border: 1px solid #bbf7d0; }
.ci-alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.ci-empty { text-align: center; color: var(--color-text-subtle); padding: 28px 0; font-size: .9rem; }
.ci-loading { text-align: center; color: var(--color-text-subtle); padding: 60px 0; }

/* ── Drawer / panel lateral simple ──────────────────────── */
.ci-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 20px;
}
.ci-modal {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; padding: 24px;
}
.ci-modal__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 16px; }
.ci-field { margin-bottom: 14px; }
.ci-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 5px; }
.ci-field .ci-input, .ci-field .ci-select { width: 100%; }
.ci-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ── Sugerencias de conciliación ────────────────────────── */
.ci-match { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; }
.ci-match__mov { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.ci-match__mov-desc { font-weight: 600; }
.ci-match__mov-monto { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-success); }
.ci-candidato { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--color-border); }
.ci-score { font-weight: 800; min-width: 44px; text-align: center; border-radius: var(--radius-sm); padding: 3px 0; font-size: .82rem; }
.ci-score--alto { background: #d1fae5; color: #065f46; }
.ci-score--medio { background: #fef3c7; color: #92400e; }
.ci-score--bajo { background: #f1f5f9; color: #64748b; }
.ci-candidato__desc { flex: 1; font-size: .86rem; }
.ci-candidato__razon { font-size: .76rem; color: var(--color-text-subtle); }

@media (max-width: 980px) {
    .ci-kpis { grid-template-columns: repeat(2, 1fr); }
    .ci-grid-2, .ci-grid-3 { grid-template-columns: 1fr; }
    .ci-aging { grid-template-columns: repeat(2, 1fr); }
}