/* ==========================================================================
   dashboard.css — V3 (Sprint estético)
   Sistema de diseño del Dashboard Comercial Partnerships México.
   Identidad: paleta cálida (crema + terracota), reemplaza la identidad
   "rojo Bigbox + sidebar oscuro" original — confirmado explícitamente
   con el equipo, para que coincida con el mockup de referencia.
   Inspiración: Stripe, Linear, Vercel, HubSpot, Attio.
   IMPORTANTE: todos los nombres de variables, clases e ids que usa el
   JavaScript (cards.js, charts.js, tables.js, dashboard.js, ui.js,
   dashboard.html) se mantienen sin cambios. Este archivo solo ajusta
   valores y agrega selectores nuevos, nunca renombra ni elimina los
   existentes.
   CAMBIO (Sprint 8): se agregó .quarter-select — estilo del selector
   de trimestre, reutilizando las mismas variables ya definidas acá
   (colores, radios, tipografía) para que quede consistente con el
   resto del header, sin inventar una paleta nueva.
   CAMBIO (Sprint estético): paleta de colores reemplazada por la
   cálida del mockup (ver variables de color abajo, cada una con su
   valor sampleado documentado). Se agregaron .goal-category-header,
   .goal-category y .goal-category-list — antes vivían solo como
   estilos inline en cards.js porque estas clases no existían acá;
   ahora el estilo vive en un solo lugar, como corresponde.
   ========================================================================== */
:root {
    /* Color — paleta Bigbox (reemplaza la cálida crema/terracota
       anterior). Fondo lavanda + accent púrpura/teal/dorado/bordó
       tomados directo de la paleta de marca. */
    --color-bg: #F7F5FB;
    --color-surface: #FFFFFF;
    --color-border: #E9E4F2;
    --color-border-strong: #D6CCE6;
    --color-sidebar: #121214;
    --color-sidebar-hover: #1C1C21;
    --color-sidebar-active: #232328;
    --color-sidebar-border: #232327;
    --color-text-primary: #171717;
    --color-text-secondary: #5C5468;
    --color-text-muted: #8C82A0;
    --color-text-inverse: #F5F5F7;
    --color-text-inverse-muted: #9C9CA6;
    /* Accent: púrpura Bigbox (4F2C67), reemplaza la terracota. */
    --color-accent: #4F2C67;
    --color-accent-hover: #3F2352;
    --color-accent-strong: #331D43;
    --color-accent-soft: #EDE6F5;
    /* Success: teal Bigbox (20544F). */
    --color-success: #20544F;
    --color-success-strong: #163B37;
    --color-success-soft: #E3EEEC;
    /* Warning: dorado Bigbox (C7991C). */
--color-warning: #C7991C;
--color-warning-strong: #A67D18;
--color-warning-soft: #FAF1DC;
    /* Danger: bordó Bigbox (7A1636). */
    --color-danger: #7A1636;
    --color-danger-soft: #F5E5EA;
    /* Tipografía */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
        Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
        monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.9375rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.375rem;
    --font-size-xl: 1.75rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Layout */
    --header-height: 92px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --shadow-sm: 0 1px 2px rgba(20, 20, 26, 0.04), 0 1px 1px rgba(20, 20, 26, 0.03);
    --shadow-md: 0 6px 16px rgba(20, 20, 26, 0.06), 0 2px 4px rgba(20, 20, 26, 0.04);
    --shadow-lg: 0 16px 40px rgba(20, 20, 26, 0.10), 0 4px 10px rgba(20, 20, 26, 0.05);
    --shadow-focus: 0 0 0 3px var(--color-accent-soft);
    --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==========================================================================
   Reset base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 1, "cv11" 1;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    font-family: inherit;
    cursor: pointer;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
svg {
    display: block;
}
/* ==========================================================================
   Layout raíz: sidebar + header + main
   ========================================================================== */
.app-shell {
    display: flex;
    min-height: 100vh;
}
/* --- Marca en el header (antes vivía en el sidebar, ya eliminado) --- */
.header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-right: var(--space-5);
    border-right: 1px solid var(--color-border);
    flex-shrink: 0;
}
.header__brand-mark {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background-image: url("https://50749107.fs1.hubspotusercontent-na1.net/hubfs/50749107/logo-simple%20%281%29.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.header__brand-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}
.header__brand-sub {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}
/* --- Header --- */
.header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: 0 var(--space-6);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.header__left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}
.header__title {
    font-size: 1.375rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header__subtitle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 4px;
}
.header__subtitle-item::after {
    content: "·";
    margin-left: 7px;
    color: var(--color-border-strong);
}
.header__subtitle-item:last-child::after {
    content: "";
    margin: 0;
}
.header__right {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-shrink: 0;
}
.header__updated {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.header__updated-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.header__updated-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
}
.header__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
    height: 36px;
    width: 240px;
}
.header__search input {
    border: none;
    background: none;
    outline: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    width: 100%;
}
.header__search input::placeholder {
    color: var(--color-text-muted);
}
.quarter-select {
    height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}
.quarter-select:hover {
    border-color: var(--color-text-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.quarter-select:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-soft) 0%, #F3DDBB 100%);
    color: var(--color-accent-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(160, 125, 61, 0.12);
}
/* --- Main --- */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}
.main__content {
    padding: var(--space-4) var(--space-6) var(--space-6);
    flex: 1;
    width: 100%;
}
/* ==========================================================================
   Componentes reutilizables (estructura, sin gráficos)
   ========================================================================== */
.panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.panel__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.panel__body {
    padding: var(--space-5);
}
.grid {
    display: grid;
    gap: var(--space-5);
}
.grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px var(--space-2) 3px 7px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background-color: var(--color-accent-soft);
    color: var(--color-accent-strong);
    line-height: 1.4;
}
.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}
.badge--success {
    background-color: var(--color-success-soft);
    color: var(--color-success-strong);
}
.badge--error {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}
.badge--warning {
    background-color: var(--color-warning-soft);
    color: var(--color-warning);
}
.badge--neutral {
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.badge--neutral::before {
    background-color: var(--color-text-muted);
}
.badge--accent {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-strong);
}
.button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid transparent;
    transition: background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}
.button--primary {
    background-color: var(--color-accent);
    color: #FFFFFF;
}
.button--primary:hover {
    background-color: var(--color-accent-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.button--secondary {
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}
.button--secondary:hover {
    border-color: var(--color-text-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.button:disabled {
    opacity: 0.65;
    cursor: default;
    transform: none;
    box-shadow: none;
}
.button__icon {
    display: inline-block;
}
.button.is-loading .button__icon {
    animation: spin 700ms linear infinite;
}
/* ==========================================================================
   Sección: layout de página del dashboard (stack vertical con scroll)
   ========================================================================== */
.dashboard-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
/* ==========================================================================
   Composición macro del Dashboard Ejecutivo (iteración de layout).
   ========================================================================== */
.overview-row {
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(480px, 1.6fr);
    align-items: stretch;
    gap: var(--space-5);
}
/* CAMBIO (ago 2026, pedido Sofi): variante angosta de .overview-row, solo
   para "Vista general del país" del Líder (ver renderCountrySummary) — ahí
   Performance del país y KPIs consolidados no necesitan ocupar todo el
   ancho disponible. No toca .overview-row base, que el Ejecutivo sigue
   usando tal cual (no pedido achicarlo ahí). */
.overview-row--compact {
    grid-template-columns: minmax(320px, 420px) minmax(400px, 560px);
}
.overview-row__performance {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /* min-width: 0 evita que el contenido de adentro (ej. la grilla
       de KPIs, con textos largos) fuerce a esta columna a crecer más
       allá del ancho fijado por .overview-row/.overview-row--compact
       — sin esto, el navegador puede "romper" el layout de 2 columnas
       y mandar el bloque de KPIs consolidados abajo en vez de al
       lado de Performance del país (pedido Sofi, Vista general del
       país del Líder). */
    min-width: 0;
}
.overview-row__kpis {
    min-width: 0;
}
.body-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: var(--space-5);
}
.body-split__main {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}
.body-split__rail {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border-strong);
}
.section-header__title {
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
    margin: 0;
}
.section-header__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
    max-width: 60ch;
}
/* --- Info Tooltip (ícono ℹ️ clickeable) ---
   Aclaraciones cortas que se despliegan al hacer click, en vez de
   texto siempre visible bajo cada título de sección. */
.info-tooltip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: var(--space-2);
}
.info-tooltip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: help;
    opacity: 0.75;
    transition: opacity var(--transition-base), color var(--transition-base);
}
.info-tooltip__icon:hover,
.info-tooltip:focus-within .info-tooltip__icon {
    opacity: 1;
    color: var(--color-text-secondary);
}
.info-tooltip__text {
    display: none;
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 30;
    width: 260px;
    background-color: var(--color-text-primary);
    color: var(--color-bg);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    box-shadow: var(--shadow-lg);
    white-space: normal;
}
/* Aparece con hover o foco de teclado; desaparece solo al sacar el
   mouse (o perder el foco) — sin click, sin JS. */
.info-tooltip:hover .info-tooltip__text,
.info-tooltip:focus-within .info-tooltip__text {
    display: block;
}
/* --- Goal Category Header (Sprint estético: antes vivía como style
   inline en cards.js porque estas clases no existían acá) --- */
.goal-category-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.goal-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.goal-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-6) 0 var(--space-3);
}
.goal-category:first-child .goal-category-header {
    margin-top: 0;
}
.goal-category-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
}
.goal-category-header__icon svg {
    width: 18px;
    height: 18px;
}
.goal-category-header__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    white-space: nowrap;
}
.goal-category-header__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.goal-category-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
    margin-left: var(--space-2);
}
/* --- Dashboard Líder: breadcrumb del detalle de ejecutivo --- */
.leader-breadcrumb {
    margin-bottom: var(--space-5);
}
.leader-breadcrumb__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent-strong);
    margin-bottom: var(--space-3);
}
.leader-breadcrumb__back:hover {
    text-decoration: underline;
}
.leader-breadcrumb__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.leader-breadcrumb__title {
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
    margin: 0;
}
.leader-breadcrumb__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
}
/* --- Dashboard Líder: Ranking de ejecutivos --- */
.ranking-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ranking-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.ranking-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
}
.ranking-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.ranking-card__position {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    flex-shrink: 0;
    width: 32px;
}
.ranking-card__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 140px;
}
.ranking-card__name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.ranking-card__objectives {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.ranking-card__percentage {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-strong);
    flex-shrink: 0;
    width: 80px;
    text-align: right;
}
.ranking-card__stats {
    display: flex;
    gap: var(--space-5);
    flex-shrink: 0;
}
.ranking-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 64px;
}
.ranking-card__stat-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}
.ranking-card__stat-label {
    font-size: 10.5px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
@media (max-width: 1024px) {
    .ranking-card {
        flex-wrap: wrap;
    }
    .ranking-card__stats {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-3);
    }
}
/* --- Dashboard Líder: barra de navegación (Vista País) ---
   CAMBIO (ago 2026, pedido Sofi): pasa de sidebar vertical (220px a la
   izquierda) a una barra horizontal debajo del header, a todo el ancho —
   libera el espacio que antes ocupaba la columna del sidebar, para que
   Performance del país y KPIs consolidados vuelvan a entrar cómodos en
   la misma fila (ver .overview-row). El comportamiento responsive que
   antes vivía en el @media de acá abajo (fila horizontal, wrap) ahora
   es el comportamiento base, así que ese @media se elimina: no hay
   nada más que cambiar en mobile. */
.leader-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
/* CAMBIO (pedido Sofi, ago 2026): selector de vista (ver
   renderExecutiveSwitcher en dashboard.js) — "Vista general del país"
   + cada ejecutivo, arriba de la Vista País y del detalle de un
   ejecutivo. Reutiliza el estilo ya existente de .quarter-select, solo
   agrega el alineado a la derecha. */
.leader-shell__toolbar {
    display: flex;
    justify-content: flex-end;
}
.leader-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-2);
    position: sticky;
    top: var(--header-height);
    z-index: 15;
}
.leader-nav__item {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    flex: 1 1 auto;
    text-align: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    outline: none;
    transition: background-color var(--transition-base), color var(--transition-base);
}
.leader-nav__item:hover {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
}
.leader-nav__item:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}
.leader-nav__item--active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-weight: var(--font-weight-semibold);
}
.leader-nav__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
/* --- Dashboard Líder: filtros de "Status adquisición" --- */
.cartera-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
.cartera-filters .quarter-select {
    width: 100%;
}
@media (max-width: 1024px) {
    .cartera-filters {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* CAMBIO (ago 2026, pedido Sofi): "Altas del trimestre" dejó de tener
   una fila de selects arriba de la tabla (.cartera-filters--altas-*,
   ya no existen) — ahora cada columna filtrable tiene un ícono de
   filtro al lado del label, ver .table-card__th/.table-card__filter-
   icon-wrap más abajo. */
/* --- Dashboard Líder: gráfico de torta --- */
.pie-chart {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.pie-chart__svg {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}
.pie-chart__legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 160px;
}
.pie-chart__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}
.pie-chart__legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pie-chart__legend-label {
    flex: 1;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pie-chart__legend-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
}
.pie-chart__legend-pct {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}
/* --- Dashboard Líder: gráfico de líneas (Evolución de la actividad) --- */
.line-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.line-chart__svg {
    width: 100%;
    height: 260px;
}
.line-chart__grid {
    stroke: var(--color-border);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}
.line-chart__axis-label {
    font-size: 10.5px;
    fill: var(--color-text-muted);
}
.line-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}
.line-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.line-chart__legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
/* --- KPI Card --- */
.kpi-card {
    position: relative;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
    overflow: hidden;
    transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.kpi-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--color-border-strong);
}
.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.kpi-card--accent::after {
    background-color: var(--color-accent);
}
.kpi-card--success::after {
    background-color: var(--color-success);
}
.kpi-card--warning::after {
    background-color: var(--color-warning);
}
.kpi-card--danger::after {
    background-color: var(--color-danger);
}
.kpi-card__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.kpi-card__icon svg {
    width: 18px;
    height: 18px;
}
.kpi-card--accent .kpi-card__icon {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-strong);
}
.kpi-card--success .kpi-card__icon {
    background-color: var(--color-success-soft);
    color: var(--color-success-strong);
}
.kpi-card--warning .kpi-card__icon {
    background-color: var(--color-warning-soft);
    color: var(--color-warning);
}
.kpi-card--danger .kpi-card__icon {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}
.kpi-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kpi-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}
.kpi-card__value {
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.kpi-card__help {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-warning);
    background-color: var(--color-warning-soft);
    padding: 2px var(--space-2);
    border-radius: 999px;
}
.kpi-card--featured {
    justify-content: flex-start;
    gap: var(--space-5);
    padding: var(--space-6);
}
.kpi-card--featured .kpi-card__icon {
    width: 46px;
    height: 46px;
}
.kpi-card--featured .kpi-card__icon svg {
    width: 23px;
    height: 23px;
}
.kpi-card--featured .kpi-card__value {
    font-size: 3rem;
}
.kpi-card--featured .kpi-card__label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}
.kpi-card--sm {
    padding: var(--space-4);
    gap: var(--space-3);
}
.kpi-card--sm .kpi-card__icon {
    width: 28px;
    height: 28px;
}
.kpi-card--sm .kpi-card__icon svg {
    width: 14px;
    height: 14px;
}
.kpi-card--sm .kpi-card__value {
    font-size: 1.375rem;
}
.kpi-card--sm .kpi-card__label {
    font-size: var(--font-size-xs);
}
/* --- KPI Mosaic --- */
.kpi-mosaic {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
}
.kpi-mosaic__featured {
    flex: 0 0 300px;
    display: flex;
}
.kpi-mosaic__featured .kpi-card {
    width: 100%;
}
.kpi-mosaic__secondary {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-3);
    min-width: 0;
}
/* --- Metric Strip --- */
.metric-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.metric-strip__item {
    flex: 1 1 0;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.metric-strip__item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.metric-strip__item--featured {
    background-color: var(--color-accent-soft);
    border-color: transparent;
}
.metric-strip__item--featured:hover {
    background-color: var(--color-accent-soft);
}
.metric-strip__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.metric-strip__icon svg {
    width: 16px;
    height: 16px;
}
.metric-strip__item--accent .metric-strip__icon {
    background-color: var(--color-surface);
    color: var(--color-accent-strong);
}
.metric-strip__item--success .metric-strip__icon {
    background-color: var(--color-success-soft);
    color: var(--color-success-strong);
}
.metric-strip__item--warning .metric-strip__icon {
    background-color: var(--color-warning-soft);
    color: var(--color-warning);
}
.metric-strip__item--danger .metric-strip__icon {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}
.metric-strip__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.metric-strip__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.metric-strip__value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.metric-strip__item--featured .metric-strip__value {
    color: var(--color-accent-strong);
    font-size: var(--font-size-xl);
}
.metric-strip__help {
    font-size: 10.5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-warning);
}
/* --- Progress Card --- */
.progress-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.progress-card--goal {
    position: relative;
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.progress-card--goal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--color-border-strong);
}
.progress-card--state-cumplido::before {
    background-color: var(--color-success);
}
.progress-card--state-en-progreso::before {
    background-color: var(--color-warning);
}
.progress-card--state-sin-metrica::before {
    background-color: var(--color-border-strong);
}
.progress-card--goal:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.progress-card--goal .progress-card__header {
    margin-bottom: var(--space-3);
}
.progress-card--goal .progress-card__footer {
    margin-top: var(--space-2);
}
.progress-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.progress-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.progress-card__title-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.progress-card__percentage {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-strong);
    letter-spacing: -0.01em;
}
.progress-card__bar {
    height: 8px;
    border-radius: 999px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;
}
.progress-card__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-strong) 0%, var(--color-accent) 100%);
    border-radius: 999px;
    transition: width var(--transition-slow);
}
.progress-card__bar-fill--success {
    background: linear-gradient(90deg, var(--color-success-strong) 0%, var(--color-success) 100%);
}
.progress-card__bar-fill--warning {
    background: linear-gradient(90deg, var(--color-warning-strong) 0%, var(--color-warning) 100%);
}
.progress-card__bar-fill--muted {
    background: var(--color-text-muted);
    opacity: 0.5;
}
.progress-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.progress-card__meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
.progress-card--hero {
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    gap: var(--space-6);
    background-color: var(--color-surface);
}
.progress-card__hero-figure {
    flex-shrink: 0;
}
.radial-progress {
    position: relative;
}
.radial-progress__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.radial-progress__track {
    fill: none;
    stroke: var(--color-bg);
}
.radial-progress__fill {
    fill: none;
    stroke: var(--color-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--transition-slow);
}
.radial-progress__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}
.progress-card__hero-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.progress-card--hero .progress-card__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}
.progress-card__hero-stats {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.progress-card__hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.progress-card__hero-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.progress-card__hero-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
/* --- Chart Card --- */
.chart-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.chart-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.chart-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.chart-card__description {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}
.chart-card__body {
    flex: 1;
}
.chart-svg {
    width: 100%;
    height: 170px;
}
.chart-bar__value {
    font-size: 11.5px;
    font-weight: 700;
    fill: var(--color-text-primary);
}
.chart-bar__label {
    font-size: 11.5px;
    fill: var(--color-text-secondary);
}
.chart-baseline {
    stroke: var(--color-border);
    stroke-width: 1;
}
/* --- Bar list --- */
.bar-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.bar-list__item {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: var(--space-3);
}
.bar-list__label {
    grid-column: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
}
/**
 * "Prom. N días en la etapa" debajo del label de cada barra (ago
 * 2026, pedido Sofi). grid-column: 1 / -1 lo saca del layout de 3
 * columnas de .bar-list__item y lo manda a su propia fila completa,
 * en vez de competir por espacio con la barra/valor.
 *
 * FIX (2026-08-18, pedido Sofi: "se rompió el embudo"): este elemento
 * es CONDICIONAL — components/charts.js#renderHorizontalBars solo lo
 * agrega al HTML cuando item.subLabel existe (antes del fix de "Días
 * en la etapa", avgDaysByStage siempre daba null, así que este
 * elemento nunca se llegaba a renderizar en la práctica — por eso el
 * bug quedó agazapado hasta ahora). Como .bar-list__track y
 * .bar-list__value no tenían una columna FIJA asignada (dependían del
 * auto-placement de CSS Grid, que las ubica según el orden de
 * aparición en el HTML), agregar este 4to elemento al DOM corría a
 * .bar-list__track a la columna 1 (150px, la del label) en vez de la
 * columna 2 (1fr) — la barra se veía angosta y "atada" corta en las
 * filas CON subLabel, y normal en las filas sin él. Se corrige
 * fijando grid-column explícito en label/track/value (ver abajo), así
 * el layout no depende de si el sublabel está presente o no.
 * Reproducido y verificado con un test aislado antes de este fix.
 */
.bar-list__sublabel {
  grid-column: 1 / -1;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.bar-list__track {
    grid-column: 2;
    height: 10px;
    border-radius: 999px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;
}
.bar-list__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-strong) 0%, var(--color-accent) 100%);
    border-radius: 999px;
    transition: width var(--transition-slow);
}
.bar-list__value {
    grid-column: 3;
    display: flex;
    align-items: baseline;
    gap: 5px;
    justify-content: flex-end;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: right;
    white-space: nowrap;
}
.bar-list__percentage {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}
.bar-list__item--interactive {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
    transition: background-color var(--transition-base);
}
.bar-list__item--interactive:hover {
    background-color: var(--color-bg);
}
.bar-list__item--interactive:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.bar-list__item--interactive.is-active {
    background-color: var(--color-accent-soft);
}
.bar-list__item--interactive.is-active .bar-list__label {
    color: var(--color-accent-strong);
    font-weight: var(--font-weight-semibold);
}
.bar-list-detail {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.bar-list-detail__title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}
.bar-list-detail__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}
/**
 * Variante de 5 columnas SOLO para las 3 tablas de "New Partners"
 * (renderPartnersMiniTable con showHunter + showCreatedDate a la
 * vez), que suma Hunter y Fecha de creación. No toca
 * .bar-list-detail__row base, que sigue en 4 columnas para el resto
 * de usos (ago 2026, pedido Sofi).
 */
.bar-list-detail__row--newpartners {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}
/**
 * Variante de 5 columnas SOLO para el detalle de Alta de
 * experiencias (renderExperienceTypeDetail en dashboard.js), que
 * suma la columna "Alta objetivo". No toca .bar-list-detail__row
 * base porque esa clase la comparten otros detalles (ej. Negocios)
 * que siguen usando 4 columnas (ago 2026, pedido Sofi, alcance
 * acotado a esta tabla).
 */
.bar-list-detail__row--experience {
  grid-template-columns: 1.2fr 1fr 1fr 1fr 0.7fr 0.7fr;
}
/**
 * Variante de 5 columnas SOLO para "Última semana"
 * (renderLastWeekSection en dashboard.js), que suma Hunter — mismo
 * criterio que .bar-list-detail__row--newpartners, no toca la base de
 * 4 columnas que comparten otros detalles.
 */
.bar-list-detail__row--ultima-semana {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}
/**
 * Indicador de "Partner nuevo" en el detalle de Alta de experiencias
 * (ago 2026, pedido Sofi): tilde verde (--yes) si es nuevo, cruz roja
 * (--no) si no — antes la celda quedaba vacía cuando no era nuevo.
 * Se aprovecha para sacar también una llave "}" de sobra que había
 * quedado acá (bug de una edición anterior, sin efecto visible pero
 * rompía el balance de llaves del archivo).
 */
.bar-list-detail__check {
  font-weight: var(--font-weight-semibold);
}
.bar-list-detail__check--yes {
  color: var(--color-success-strong);
}
.bar-list-detail__check--no {
  color: var(--color-danger);
}
.bar-list-detail__row + .bar-list-detail__row {
    border-top: 1px solid var(--color-bg);
}
.bar-list-detail__row--head {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bar-list-detail__empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
    padding: var(--space-2) 0;
}
/* --- Type Card Grid --- */
.type-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}
.type-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-base),
        background-color var(--transition-base),
        box-shadow var(--transition-base);
}
.type-card--interactive {
    cursor: pointer;
}
.type-card--interactive:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}
.type-card--interactive:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.type-card.is-active {
    background-color: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}
.type-card__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.type-card__value {
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.type-card__track {
    height: 8px;
    border-radius: 999px;
    background-color: var(--color-border);
    overflow: hidden;
}
.type-card__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-strong) 0%, var(--color-accent) 100%);
    border-radius: 999px;
    transition: width var(--transition-slow);
}
.type-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.type-card__percentage {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/**
 * Badge "+N/-N semana anterior" en las tarjetas de tipo de actividad
 * (ago 2026, pedido Sofi). flex-basis: 100% dentro de .type-card__meta
 * (que ya es flex/space-between para %/toggle) lo empuja a su propia
 * fila, en vez de amontonarse con esos dos en la misma línea.
 */
.type-card__week-delta {
  flex-basis: 100%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.type-card__week-delta--up {
  color: var(--color-success-strong);
}
.type-card__week-delta--down {
  color: var(--color-danger);
}
.type-card__week-delta--flat {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}
.type-card__toggle {
    display: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-strong);
    white-space: nowrap;
}
.type-card.is-active .type-card__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Override puntual: "Actividades del trimestre por tipo" usa el mismo
   componente type-card-grid que Negocios/Alta de Experiencias, pero
   acá se pide específicamente 2 columnas (Reuniones/Llamadas/Emails/
   Tareas en 2x2) en vez del auto-fit genérico del resto. Selector más
   específico, no toca el comportamiento default de .type-card-grid. */
.activity-type-grid .type-card-grid {
    grid-template-columns: repeat(2, 1fr);
}
/* --- Table Card --- */
.table-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.table-card__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.table-card__scroll {
    overflow-x: auto;
}
.table-card__table {
    width: 100%;
    border-collapse: collapse;
}
.table-card__table th {
    text-align: left;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
/* CAMBIO (ago 2026, pedido Sofi): filtros de columna como ícono al
   lado del label, no como fila/card de selects aparte — usados por
   "Altas del trimestre" (ver components/tables.js#renderTableCard,
   columns[].filter/filterActive) y por "Última semana" (armado a mano
   en dashboard.js#renderLastWeekSection, mismas clases, porque esa
   tabla no es un <table> sino una grilla de .bar-list-detail__row).
   El <select> real (table-card__filter-select) queda invisible
   superpuesto sobre el ícono: sigue siendo el control nativo que
   dispara el evento "change" ya cableado (initAltasFilters para
   Altas, initLeaderNavigation para Última semana), pero visualmente
   solo se ve el embudo. */
.table-card__th {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.table-card__filter-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.table-card__filter-icon-wrap:hover {
    color: var(--color-text-secondary);
}
.table-card__filter-icon-wrap--active {
    color: var(--color-accent);
}
.table-card__filter-icon {
    pointer-events: none;
}
.table-card__filter-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}
.table-card__filter-icon-wrap:has(.table-card__filter-select:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* Variante "popover" del ícono de filtro — para filtros que no son un
   único <select> (ej. rango de fechas de "Última semana": 2 inputs).
   Mismo mecanismo que .info-tooltip: se abre con hover/foco del
   trigger o de un input de adentro (:focus-within), sin JS — al
   clickear un input queda con foco, así que el popover no se cierra
   mientras se escribe la fecha. */
.table-card__filter-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.table-card__filter-popover {
    display: none;
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 30;
    width: 190px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    flex-direction: column;
    gap: var(--space-2);
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--font-weight-regular);
    cursor: default;
}
.table-card__filter-icon-wrap--popover:hover .table-card__filter-popover,
.table-card__filter-icon-wrap--popover:focus-within .table-card__filter-popover {
    display: flex;
}
.table-card__filter-popover label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.table-card__filter-popover-input {
    height: 30px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-xs);
}
.table-card__filter-popover-input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}
.table-card__table td {
    font-size: var(--font-size-sm);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-bg);
    color: var(--color-text-primary);
}
.table-card__table tbody tr {
    transition: background-color var(--transition-base);
}
.table-card__table tbody tr:hover {
    background-color: var(--color-bg);
}
.table-card__table tr:last-child td {
    border-bottom: none;
}
.table-card__empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-6) var(--space-5);
}
.table-card--accent-warning .table-card__table tbody td:first-child {
    border-left: 3px solid var(--color-warning);
}
.table-card--accent-danger .table-card__table tbody td:first-child {
    border-left: 3px solid var(--color-danger);
}
.table-card--accent-success .table-card__table tbody td:first-child {
    border-left: 3px solid var(--color-success);
}
.table-card__identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.table-card__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-accent-soft);
    color: var(--color-accent-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}
/* --- List Card --- */
.list-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.list-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.list-card__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.list-card__items {
    display: flex;
    flex-direction: column;
}
.list-card__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition-base);
}
.list-card__item:hover {
    background-color: var(--color-bg);
}
.list-card__item:last-child {
    border-bottom: none;
}
.list-card__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-accent-soft);
    color: var(--color-accent-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}
.list-card__primary {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-card__secondary {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.list-card__empty {
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
/* --- Alert Card --- */
.alert-card {
    position: relative;
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    padding-left: calc(var(--space-5) + 3px);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: none;
}
.alert-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    border-radius: 999px 0 0 999px;
    background-color: var(--color-border-strong);
}
.alert-card--info::before {
    background-color: var(--color-text-muted);
}
.alert-card--warning {
    background-color: var(--color-warning-soft);
}
.alert-card--warning::before {
    background-color: var(--color-warning);
}
.alert-card--danger {
    background-color: var(--color-danger-soft);
}
.alert-card--danger::before {
    background-color: var(--color-danger);
}
.alert-card__title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}
.alert-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}
/* --- Estados --- */
.state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--color-text-secondary);
}
.state__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}
.state__text {
    font-size: var(--font-size-sm);
    margin: 0;
    max-width: 32ch;
}
.state--error .state__title {
    color: var(--color-danger);
}
.state--success .state__text {
    color: var(--color-success-strong);
    font-weight: var(--font-weight-medium);
}
.state__spinner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    animation: spin 700ms linear infinite;
}
/* --- Verificación de conexión (temporal, Sprint 2) --- */
.check-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.check-list li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.check-list__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.check-list__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
@media (max-width: 720px) {
    .check-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .overview-row {
        grid-template-columns: 1fr;
    }
    .body-split {
        grid-template-columns: 1fr;
    }
    .body-split__main,
    .body-split__rail {
        grid-column: 1;
        grid-row: auto;
    }
    .grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .progress-card--hero {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
    }
    .header__search {
        width: 180px;
    }
}
@media (max-width: 768px) {
    .header__search {
        display: none;
    }
    .header__brand-sub {
        display: none;
    }
    .grid--cols-2,
    .grid--cols-3,
    .grid--cols-4 {
        grid-template-columns: 1fr;
    }
    .metric-strip {
        flex-direction: column;
    }
    .kpi-mosaic {
        flex-direction: column;
    }
    .kpi-mosaic__featured {
        flex-basis: auto;
    }
    .header__right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-3);
    }
    .quarter-select {
        order: -1;
    }
    .main__content {
        padding: var(--space-4);
    }
}
</content>