/* ============================================================================
   ERP2026 — sistema de diseño central
   Inspirado en SAP Fiori (sobrio, plano, mucho espacio en blanco), SIN usar
   activos propietarios de SAP (logo, fuente "72", librería UI5, ni el nombre
   "Fiori"). Toda decisión visual vive en este archivo: cambiá las variables y
   toda la app sigue el cambio.
   ========================================================================== */

:root {
    /* ── Color primario (PROVISIONAL — reemplazar por color de marca final) ──
       Teal/azul profundo, lectura clara en blanco y suficiente contraste con
       el sidebar oscuro. Cambiar SOLO esta variable hace re-tinte global. */
    --color-primary:        #0A6E7C;
    --color-primary-hover:  #08596A;
    --color-primary-light:  #E6F2F4;

    /* ── Semáforo de estados (mapea 1:1 a EstadoConciliacion) ── */
    --color-ok:             #1E8449;   /* verde — conciliado/declarado OK */
    --color-ok-bg:          #E8F5EE;
    --color-warn:           #B7791F;   /* amarillo — diferencia de monto */
    --color-warn-bg:        #FEF5E6;
    --color-error:          #C0392B;   /* rojo — no declarado / falta en ERP */
    --color-error-bg:       #FDECEA;
    --color-muted:          #6B7280;   /* gris — N/A / especial aduanero */
    --color-muted-bg:       #F1F3F5;

    /* ── Sidebar (oscuro, angosto) ── */
    --sidebar-bg:           #1F2937;
    --sidebar-bg-hover:     #2D3748;
    --sidebar-fg:           #D1D5DB;
    --sidebar-fg-active:    #FFFFFF;
    --sidebar-border:       #374151;
    --sidebar-width:        240px;

    /* ── Topbar ── */
    --topbar-bg:            #FFFFFF;
    --topbar-border:        #E5E7EB;
    --topbar-height:        56px;

    /* ── Superficies de contenido ── */
    --bg-app:               #F4F6F8;
    --bg-card:              #FFFFFF;
    --bg-section:           #FAFBFC;
    --border-soft:          #E5E7EB;
    --border-medium:        #D1D5DB;
    --text-primary:         #1F2937;
    --text-secondary:       #4B5563;
    --text-muted:           #6B7280;

    /* ── Tipografía: Inter via Google Fonts con fallback system-ui ── */
    --font-sans:            "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:            ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

    /* ── Espaciado (escala consistente) ── */
    --space-1:              4px;
    --space-2:              8px;
    --space-3:              12px;
    --space-4:              16px;
    --space-5:              24px;
    --space-6:              32px;
    --space-7:              48px;

    /* ── Radios y sombras ── */
    --radius-sm:            4px;
    --radius-md:            6px;
    --radius-lg:            8px;
    --shadow-soft:          0 1px 2px rgba(0,0,0,0.05);
    --shadow-card:          0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lifted:        0 4px 12px rgba(0,0,0,0.08);
}

/* ── Base reset / tipografía global ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-3); }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

/* ============================================================================
   LAYOUT — app shell con sidebar + topbar + content
   ========================================================================== */

.app {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar content";
    min-height: 100vh;
}

.app__sidebar { grid-area: sidebar; background: var(--sidebar-bg); color: var(--sidebar-fg); overflow-y: auto; }
.app__topbar  { grid-area: topbar; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); display: flex; align-items: center; padding: 0 var(--space-5); }
.app__content { grid-area: content; padding: var(--space-5); overflow-y: auto; }

/* ── Sidebar ── */

.sidebar__brand {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--sidebar-fg-active);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: flex; align-items: center; gap: var(--space-2);
}

.sidebar__brand .brand__mark {
    width: 26px; height: 26px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700;
}

.sidebar__section-header {
    padding: var(--space-4) var(--space-5) var(--space-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar__nav { display: flex; flex-direction: column; }

.sidebar__nav-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    color: var(--sidebar-fg);
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background-color 80ms, border-color 80ms;
    text-decoration: none;
}

.sidebar__nav-item:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-fg-active);
    text-decoration: none;
}

.sidebar__nav-item.is-active {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-fg-active);
    border-left-color: var(--color-primary);
    font-weight: 500;
}

.sidebar__nav-item i { font-size: 16px; opacity: 0.85; }

/* ── Topbar ── */

.topbar__title { flex: 1; font-size: 15px; font-weight: 500; color: var(--text-secondary); }

.topbar__user {
    display: flex; align-items: center; gap: var(--space-3);
    color: var(--text-secondary);
    font-size: 13px;
}
.topbar__user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px;
}
.topbar__logout {
    background: transparent; border: none; color: var(--text-secondary);
    cursor: pointer; padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}
.topbar__logout:hover { background: var(--bg-app); color: var(--text-primary); }

/* ============================================================================
   COMPONENTES — reutilizables por todas las vistas
   ========================================================================== */

/* ── Page header (encabezado de página: titulo + acciones) ── */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.page-header__title h1 { margin-bottom: var(--space-1); }
.page-header__subtitle { color: var(--text-muted); font-size: 13px; }
.page-header__actions { display: flex; gap: var(--space-2); }

/* ── Botones ── */
.btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms, border-color 80ms;
    text-decoration: none;
    line-height: 1.4;
}
.btn-primary {
    background: var(--color-primary); color: #fff;
}
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; text-decoration: none; }
.btn-secondary {
    background: #fff; color: var(--text-primary); border-color: var(--border-medium);
}
.btn-secondary:hover { background: var(--bg-app); text-decoration: none; }
.btn-danger {
    background: var(--color-error); color: #fff;
}
.btn-danger:hover { background: #A93226; color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ── Tile / tarjeta dashboard (entrada a funciones) ── */
.tile {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 100ms, border-color 100ms, transform 100ms;
    min-height: 130px;
}
.tile:hover {
    box-shadow: var(--shadow-lifted);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    color: var(--text-primary);
    text-decoration: none;
}
.tile__icon {
    width: 40px; height: 40px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    margin-bottom: var(--space-3);
}
.tile__title { font-size: 14px; font-weight: 600; margin: 0 0 var(--space-1); }
.tile__subtitle { font-size: 12px; color: var(--text-muted); }
.tile__metric { font-size: 24px; font-weight: 600; color: var(--color-primary); margin-top: var(--space-2); }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

/* ── Card genérica (sección de contenido) ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    margin-bottom: var(--space-5);
}
.card__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: space-between;
}
.card__title { margin: 0; font-size: 15px; font-weight: 600; }
.card__body { padding: var(--space-5); }

/* ── Tabla de datos densa ── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table thead th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-section);
    border-bottom: 1px solid var(--border-medium);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky; top: 0; z-index: 1;
}
.data-table tbody tr { border-bottom: 1px solid var(--border-soft); transition: background-color 60ms; }
.data-table tbody tr:hover { background: var(--bg-section); }
.data-table td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    color: var(--text-primary);
}
.data-table td.right { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.muted { color: var(--text-muted); }

/* ── Badge de estado (semáforo) ── */
.status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.status-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.status-badge--ok    { background: var(--color-ok-bg);    color: var(--color-ok); }
.status-badge--ok::before    { background: var(--color-ok); }
.status-badge--warn  { background: var(--color-warn-bg);  color: var(--color-warn); }
.status-badge--warn::before  { background: var(--color-warn); }
.status-badge--error { background: var(--color-error-bg); color: var(--color-error); }
.status-badge--error::before { background: var(--color-error); }
.status-badge--muted { background: var(--color-muted-bg); color: var(--color-muted); }
.status-badge--muted::before { background: var(--color-muted); }
/* consent: pausa por consentimiento (Ley 29733). Teal de marca — distinto de error (rojo)
   y de warn (ámbar), porque no es un fallo de SUNAT ni se resuelve con reintento. */
.status-badge--consent { background: var(--color-primary-light); color: var(--color-primary); }
.status-badge--consent::before { background: var(--color-primary); }

/* ── Barra de filtros ── */
.filter-bar {
    display: flex; gap: var(--space-3); align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-section);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.filter-bar label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.filter-bar input, .filter-bar select {
    padding: 6px 10px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: #fff;
}

/* ── Formularios ── */
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-bottom: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
.form-field input:focus, .form-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.field-validation-error { color: var(--color-error); font-size: 12px; margin-top: var(--space-1); display: block; }
.text-danger { color: var(--color-error); }

/* ── Alerts ── */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    font-size: 13px;
}
.alert-info     { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
.alert-success  { background: var(--color-ok-bg); border-color: var(--color-ok); color: var(--color-ok); }
.alert-warning  { background: var(--color-warn-bg); border-color: var(--color-warn); color: var(--color-warn); }
.alert-error    { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
.validation-summary-errors ul { margin: 0; padding-left: var(--space-5); }

/* ── Empty states — cuando una tabla / dashboard no tiene datos ── */
.empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-5);
    color: var(--text-muted);
}
.empty-state__icon {
    font-size: 36px; color: var(--border-medium);
    margin-bottom: var(--space-3); display: block;
}
.empty-state__title { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.empty-state__desc  { font-size: 13px; margin-bottom: var(--space-4); }

/* ── Stat grid (estadísticas en grid responsive, ej. en Detalle) ── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.stat {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.stat__label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.stat__value { font-size: 18px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Tarjetas que actúan como filtro: click filtra la tabla por ese estado (ver conciliacion.js). */
.stat--filtrable { cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.stat--filtrable:hover { border-color: var(--border-strong, var(--text-muted)); }
.stat--filtrable:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }
.stat--filtrable.is-active {
    border-color: var(--color-primary, #2563eb);
    box-shadow: inset 0 0 0 1px var(--color-primary, #2563eb);
    background: var(--bg-section);
}

/* ── Pill tabs (tabs radiales sin contenido oculto: switchers) ── */
.pill-tabs {
    display: inline-flex; gap: 4px;
    padding: 4px;
    background: var(--bg-section);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
}
.pill-tab {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms;
}
.pill-tab:hover { background: var(--color-primary-light); }
.pill-tab.is-active {
    background: var(--color-primary);
    color: #fff;
}
.pill-tab.is-active:hover { background: var(--color-primary-hover); }

/* ── Info box (cajón explicativo, ej. en Conciliacion para fuentes fusionadas) ── */
.info-box {
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--text-primary);
    font-size: 13px;
}
.info-box__title { font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-1); }

/* ── Field help (texto secundario debajo de un input) ── */
.field-help {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* ── Progress indeterminate (barra animada de "en proceso") ── */
.progress-indeterminate {
    height: 6px;
    background: var(--bg-section);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.progress-indeterminate::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 30%; height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    animation: progress-slide 1.4s ease-in-out infinite;
}
@keyframes progress-slide {
    0%   { left: -30%; }
    100% { left: 100%; }
}

/* ── Toolbar de acciones (contador + botones, ej. en Detalle para descarga batch) ── */
.toolbar-actions {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-section);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.toolbar-actions__counter { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
.toolbar-actions__spacer { flex: 1; }

/* ── Utility classes ── */
.tabular { font-variant-numeric: tabular-nums; }
.monospace { font-family: var(--font-mono); font-size: 12px; }
.muted-text { color: var(--text-muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.text-bold { font-weight: 600; }
.flex { display: flex; }
.flex-gap-2 { gap: var(--space-2); }
.flex-gap-3 { gap: var(--space-3); }
.flex-between { justify-content: space-between; }
.flex-center { align-items: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* ── Pills/chips (ej. "Compras"/"Ventas" en cabeceras) ── */
.chip {
    display: inline-flex; align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chip--neutral { background: var(--color-muted-bg); color: var(--color-muted); }

/* ── Form grid (varios fields en una fila, ej. en Editar config) ── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

/* ── Paginación ── */
.pagination {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-soft);
    background: var(--bg-section);
    font-size: 13px;
    color: var(--text-secondary);
}
.pagination__spacer { flex: 1; }

/* ── Layout específico de auth (login/changepassword centrados) ── */
.auth-shell {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bg-app) 0%, var(--color-primary-light) 100%);
    padding: var(--space-5);
}
.auth-card {
    width: 100%; max-width: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lifted);
    padding: var(--space-6);
}
.auth-card__brand {
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-5);
    color: var(--color-primary);
    font-size: 18px; font-weight: 700;
}
.auth-card__brand .brand__mark {
    width: 32px; height: 32px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700;
}

/* ============================================================================
   CONCILIACIÓN POR EXCEPCIÓN — pantalla de una empresa (tarjetas accionables)
   Solo se listan los comprobantes que necesitan decisión humana; los Ok se
   cuentan, no se muestran. Colores con significado: verde = crédito recuperable,
   ámbar = diferencia, azul = informativo (Falta en ERP), rojo = riesgo
   (PREPARADO, sin datos: la capa de riesgo aún no existe en el motor).
   ========================================================================== */

/* ── Color informativo (azul) y riesgo (rojo): no estaban en el semáforo base ── */
:root {
    --color-info:    #1D4ED8;
    --color-info-bg: #EAF0FE;
    --color-risk:    #B91C1C;
    --color-risk-bg: #FEE2E2;
}

/* extienden .status-badge (semáforo) */
.status-badge--info  { background: var(--color-info-bg); color: var(--color-info); }
.status-badge--info::before  { background: var(--color-info); }
.status-badge--risk  { background: var(--color-risk-bg); color: var(--color-risk); }
.status-badge--risk::before  { background: var(--color-risk); }

/* ── Encabezado de la pantalla de empresa ── */
.empresa-head { margin-bottom: var(--space-5); }
.empresa-head__crumb {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: 13px; color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.empresa-head__crumb:hover { color: var(--color-primary); text-decoration: none; }
.empresa-head__nombre { margin: 0 0 var(--space-1); }
.empresa-head__sub {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    color: var(--text-muted); font-size: 13px;
}
.empresa-head__dot { color: var(--border-medium); }

/* ── KPIs (reusa .stat-grid/.stat, sólo acentos) ── */
.kpi__value--ok      { color: var(--color-ok); }
.kpi__value--warn    { color: var(--color-warn); }
.kpi__value--credito { color: var(--color-ok); }
.kpi__pct  { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: var(--space-1); }
.kpi__hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kpi--credito { border-color: var(--color-ok); background: var(--color-ok-bg); }

/* ── Filtro / contexto ── */
.exc-filter {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.exc-filter__chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 5px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    border: 0.5px solid var(--color-primary);
    background: var(--color-primary-light); color: var(--color-primary);
}
.exc-filter__count { font-size: 13px; color: var(--text-muted); }

/* ── Lista + tarjeta de excepción ── */
.exc-list { display: flex; flex-direction: column; gap: var(--space-3); }
.exc-card {
    display: flex; align-items: stretch; gap: var(--space-4);
    background: var(--bg-card);
    border: 0.5px solid var(--border-soft);
    border-left: 3px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}
.exc-card--credito { border-left-color: var(--color-ok); }
.exc-card--warn    { border-left-color: var(--color-warn); }

.exc-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.exc-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.exc-card__razon { font-weight: 600; font-size: 14px; display: block; }
.exc-card__meta {
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--text-muted); font-size: 12px; margin-top: 2px;
}
.exc-card__dot { color: var(--border-medium); }
.exc-card__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

.exc-card__causa {
    display: flex; gap: var(--space-2); align-items: flex-start;
    font-size: 13px; color: var(--text-secondary); line-height: 1.45;
}
.exc-card__causa i { color: var(--text-muted); margin-top: 2px; flex-shrink: 0; }
.exc-card--credito .exc-card__causa i { color: var(--color-ok); }

.exc-card__montos { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.monto { display: flex; flex-direction: column; gap: 2px; }
.monto__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); font-weight: 600;
}
.monto__val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.monto__val--none { color: var(--text-muted); font-weight: 400; }
.monto--credito .monto__label,
.monto--credito .monto__val { color: var(--color-ok); }
.monto--diff .monto__val { color: var(--color-warn); font-weight: 500; font-size: 13px; }

.exc-card__prorrata {
    display: flex; gap: var(--space-2); align-items: flex-start;
    font-size: 12px; line-height: 1.45;
    color: var(--color-warn);
    background: var(--color-warn-bg);
    border: 0.5px solid var(--color-warn);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}
.exc-card__prorrata i { flex-shrink: 0; margin-top: 1px; }

.exc-card__action { display: flex; align-items: center; flex-shrink: 0; }

/* ── Leyenda de la capa de RIESGO (PENDIENTE — no integrada al motor) ── */
.riesgo-note {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    border: 0.5px dashed var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-section);
    color: var(--text-muted); font-size: 12px;
    margin-top: var(--space-5);
}
.riesgo-note__tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600; opacity: 0.7;
}

/* ── Responsive: en pantallas angostas la acción baja debajo ── */
@media (max-width: 720px) {
    .exc-card { flex-direction: column; }
    .exc-card__action { justify-content: flex-start; }
    .exc-card__montos { gap: var(--space-4); }
}

/* ============================================================================
   CARTERA DEL ESTUDIO — pantalla de inicio (Vista 1): lista de empresas, cada
   una un resumen de su Vista 2. Reusa .stat-grid/.kpi para los KPIs y
   .status-badge para los estados; sólo agrega la tarjeta-empresa y los grupos.
   Misma gramática visual que .exc-card para no driftear respecto a la Vista 2.
   ========================================================================== */

.cartera-head { margin-bottom: var(--space-5); }
.cartera-head__title { margin: 0 0 var(--space-1); }
.cartera-sub { color: var(--text-muted); font-size: 13px; }

/* ── Grupos (Necesitan atención / Conciliadas) ── */
.cartera-group { margin-bottom: var(--space-5); }
.cartera-group__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.cartera-group__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--color-muted-bg); color: var(--text-secondary);
    font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none;
}

.cartera-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Tarjeta-empresa (misma gramática que .exc-card) ── */
.cartera-card {
    display: flex; align-items: stretch; gap: var(--space-4);
    background: var(--bg-card);
    border: 0.5px solid var(--border-soft);
    border-left: 3px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    text-decoration: none; color: var(--text-primary);
    transition: box-shadow 100ms, border-color 100ms, transform 100ms;
}
a.cartera-card:hover {
    box-shadow: var(--shadow-lifted);
    border-left-color: var(--color-primary);
    transform: translateY(-1px);
    text-decoration: none; color: var(--text-primary);
}
.cartera-card--credito   { border-left-color: var(--color-ok); }
.cartera-card--warn      { border-left-color: var(--color-warn); }
.cartera-card--ok        { border-left-color: var(--border-medium); }
.cartera-card--pendiente { border-left-color: var(--color-muted); border-left-style: dashed; background: var(--bg-section); }

.cartera-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cartera-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.cartera-card__razon { font-weight: 600; font-size: 14px; display: block; }
.cartera-card__meta {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    color: var(--text-muted); font-size: 12px; margin-top: 2px;
}
.cartera-card__dot { color: var(--border-medium); }
.cartera-card__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

/* ── Métricas en fila (Comprobantes / Conciliados / Excepciones / Crédito) ── */
.cartera-card__metrics { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.cartera-metric { display: flex; flex-direction: column; gap: 2px; }
.cartera-metric__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); font-weight: 600;
}
.cartera-metric__val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cartera-metric__val--ok   { color: var(--color-ok); }
.cartera-metric__val--warn { color: var(--color-warn); }
.cartera-metric__hint { font-size: 11px; color: var(--text-muted); }
.cartera-metric--credito .cartera-metric__label,
.cartera-metric--credito .cartera-metric__val { color: var(--color-ok); }

/* ── Nota de empresa pendiente (sin conciliar ≠ conciliada) ── */
.cartera-card__pendiente-note {
    display: flex; gap: var(--space-2); align-items: flex-start;
    font-size: 13px; color: var(--text-secondary); line-height: 1.45;
}
.cartera-card__pendiente-note i { color: var(--text-muted); margin-top: 2px; flex-shrink: 0; }

/* ── Chevron de "entrar" ── */
.cartera-card__entrar { display: flex; align-items: center; flex-shrink: 0; color: var(--border-medium); font-size: 18px; }
a.cartera-card:hover .cartera-card__entrar { color: var(--color-primary); }

/* ── Responsive ── */
@media (max-width: 720px) {
    .cartera-card__metrics { gap: var(--space-4); }
}