/* Design system de dashboards de analítica (.ana-*) — compartido por los paneles
   de Actividades e Inventario. Antes vivía inline en ActivityAnalytics.razor. */

.ana-shell { display:flex; flex-direction:column; gap:16px; padding:8px 4px 64px; }

.ana-board { display:flex; flex-direction:column; gap:14px; }

.ana-empty {
    background:white; border:1px solid #E6ECF4; border-radius:12px;
    padding:88px 40px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    box-shadow:0 1px 2px rgba(16,33,64,0.05), 0 12px 28px -18px rgba(16,33,64,0.16);
}
.ana-empty__title { font-size:0.95rem; font-weight:700; color:#13203A; margin-top:8px; }
.ana-empty__sub { font-size:0.78rem; color:#6B7280; }

/* ═══ HERO STRIP ═══ */
.ana-strip {
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:14px;
}
.ana-tile {
    background:white; border:1px solid #E6ECF4; border-radius:12px;
    padding:16px 18px 14px;
    display:flex; flex-direction:column;
    box-shadow:0 1px 2px rgba(16,33,64,0.05), 0 12px 28px -18px rgba(16,33,64,0.16);
    min-width:0;
}
.ana-tile--lead {
    background:linear-gradient(150deg,#13203A 0%,#1A3D7A 100%);
    border-color:transparent;
    box-shadow:0 14px 32px -14px rgba(19,32,58,0.55);
}
.ana-tile--lead .ana-tile__hint { color:rgba(255,255,255,0.62); }
.ana-tile__key {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:0.62rem; font-weight:700; letter-spacing:0.08em;
    text-transform:uppercase; color:#6B7280;
    white-space:nowrap;
}
.ana-tile__label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ana-tile__semaphore {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
    background:var(--tc);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--tc) 16%, transparent);
    margin-right:auto; order:-1;
}
.ana-tile--lead .ana-tile__key { justify-content:flex-start; gap:7px; color:rgba(255,255,255,0.78); }
.ana-tile__value-row {
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
    margin-top:10px;
}
.ana-tile__value {
    font-size:1.7rem; font-weight:800; color:#13203A; line-height:1.05;
    font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
}
.ana-tile--lead .ana-tile__value { color:#fff; }
.ana-tile--lead .ana-tile__unit { color:rgba(255,255,255,0.62); }
.ana-tile__unit-sym { font-size:0.95rem; font-weight:700; color:#94A3B8; margin-left:2px; }
.ana-tile__unit { font-size:0.68rem; font-weight:600; color:#9CA3AF; white-space:nowrap; }
.ana-tile__foot {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    margin-top:10px; min-height:20px;
}
.ana-tile__hint { font-size:0.68rem; color:#6B7280; font-variant-numeric:tabular-nums; }

.ana-chip {
    display:inline-flex; align-items:center;
    font-size:0.62rem; font-weight:700; color:var(--tc);
    background:color-mix(in srgb, var(--tc) 9%, white);
    border:1px solid color-mix(in srgb, var(--tc) 26%, transparent);
    border-radius:999px; padding:1px 8px;
    white-space:nowrap; font-variant-numeric:tabular-nums;
    line-height:1.6; cursor:default;
}

.ana-trend {
    display:inline-flex; align-items:center; gap:3px;
    font-size:0.62rem; font-weight:700;
    padding:1px 7px; border-radius:999px;
    font-variant-numeric:tabular-nums;
    letter-spacing:0; text-transform:none;
    color:var(--tc);
    background:color-mix(in srgb, var(--tc) 9%, white);
    border:1px solid color-mix(in srgb, var(--tc) 26%, transparent);
    cursor:default; flex-shrink:0;
}
.ana-trend__icon { font-size:0.56rem; line-height:1; }

/* ═══ CARDS ═══ */
.ana-card {
    background:white; border:1px solid #E6ECF4; border-radius:12px;
    padding:16px 18px;
    display:flex; flex-direction:column; gap:14px;
    box-shadow:0 1px 2px rgba(16,33,64,0.05), 0 12px 28px -18px rgba(16,33,64,0.16);
    min-width:0;
}
.ana-card__head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px; flex-wrap:wrap;
}
.ana-card__title {
    font-size:0.85rem; font-weight:800; color:#13203A; line-height:1.2; letter-spacing:-0.01em;
}
.ana-card__sub { font-size:0.7rem; color:#9CA3AF; margin-top:4px; }
.ana-card__body { min-width:0; }
.ana-card__big {
    font-size:1.3rem; font-weight:800; color:#13203A;
    font-variant-numeric:tabular-nums; letter-spacing:-0.02em; line-height:1;
}
.ana-card__meta { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ana-card__empty {
    font-size:0.74rem; color:#9CA3AF; text-align:center;
    padding:42px 16px;
}

/* ═══ STATUS COMPOSITION ═══ */
.ana-donut {
    display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.ana-donut__chart { flex:0 0 250px; min-width:220px; }
.ana-legend { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; flex:1; min-width:240px; }
.ana-legend__item {
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.7rem; font-weight:600; color:#374151;
    background:color-mix(in srgb, var(--tc) 7%, white);
    border:1px solid color-mix(in srgb, var(--tc) 22%, transparent);
    border-radius:999px; padding:3px 10px;
    white-space:nowrap;
}
.ana-legend__dot { width:7px; height:7px; border-radius:50%; background:var(--tc); flex-shrink:0; }
.ana-legend__num { font-weight:800; color:#13203A; font-variant-numeric:tabular-nums; }
.ana-legend__pct { font-weight:600; color:#9CA3AF; font-variant-numeric:tabular-nums; }

/* ═══ FLOW CHART ═══ */
.ana-flow__peak {
    font-size:0.66rem; font-weight:600; color:#9CA3AF;
    font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ana-flow { min-height:280px; }

/* ═══ SECTION HEADER ═══ */
.ana-section { margin-top:10px; }
.ana-section__title {
    font-size:0.98rem; font-weight:800; color:#13203A; letter-spacing:-0.01em;
}
.ana-section__sub { font-size:0.72rem; color:#6B7280; margin-top:3px; }

/* ═══ TOP LISTS / GRIDS ═══ */
.ana-grid3 {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    align-items:start;
}
.ana-grid-sf {
    display:grid;
    grid-template-columns:minmax(300px, 1fr) 2fr;
    gap:14px;
    align-items:stretch;
}
.ana-grid-sf > .ana-card { height:100%; }
.ana-donut--stacked { flex-direction:column; align-items:stretch; gap:14px; }
.ana-donut--stacked .ana-donut__chart { flex:0 0 auto; align-self:center; }
.ana-donut--stacked .ana-legend { flex-direction:column; align-items:stretch; }
@media (max-width: 1180px) {
    .ana-grid-sf { grid-template-columns:1fr; }
}
.ana-rows { display:flex; flex-direction:column; }
.ana-rows > * + * { border-top:1px solid rgba(0,0,0,0.06); padding-top:11px; margin-top:11px; }
.ana-row { min-width:0; transition:opacity .15s ease; }
.ana-row--dim { opacity:0.45; }
.ana-row--dim:hover { opacity:0.85; }
.ana-row__line { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ana-row__name {
    font-size:0.8rem; font-weight:600; color:#13203A;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.ana-row__name--mono {
    font-family:'SF Mono','JetBrains Mono','Cascadia Code',Consolas,monospace;
    letter-spacing:0.02em;
}
.ana-row__num {
    font-size:0.86rem; font-weight:800; color:#13203A;
    font-variant-numeric:tabular-nums; flex-shrink:0;
}
.ana-row__bar {
    background:#F1F3F7; border-radius:999px; height:6px;
    overflow:hidden; margin-top:7px;
}
.ana-row__fill {
    height:100%; border-radius:999px; min-width:2px;
    transition:width .35s cubic-bezier(0.4,0,0.2,1);
}
.ana-row__meta {
    font-size:0.68rem; color:#9CA3AF; margin-top:5px;
    font-variant-numeric:tabular-nums;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ═══ SKELETON ═══ */
.ana-sk { background:#EEF1F5; border-radius:6px; flex-shrink:0; }
@media (prefers-reduced-motion: no-preference) {
    .ana-sk {
        background:linear-gradient(100deg, #EEF1F5 36%, #E5E9F0 50%, #EEF1F5 64%);
        background-size:300% 100%;
        animation:ana-shimmer 1.4s ease-in-out infinite;
    }
    .ana-board--in { animation:ana-enter 0.2s ease-out both; }
}
@keyframes ana-shimmer { from { background-position:100% 0; } to { background-position:0% 0; } }
@keyframes ana-enter { from { opacity:0; } }

.ana-mobile-placeholder { padding:60px 20px; text-align:center; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1480px) {
    .ana-strip { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
    .ana-grid3 { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
    .ana-strip { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
    .ana-shell { padding:4px 0 48px; }
    .ana-card { padding:14px; }
}

/* ══════════════════════════════════════════════════════════════
   Proceso de afiliación y cartera de socios.
   Compartidas por las dos analíticas del módulo, así que viven
   aquí y no en el <style> de una sola página.
   ══════════════════════════════════════════════════════════════ */

    .pm-lede { margin:6px 0 2px; }
    .pm-lede__text { margin:0; max-width:78ch; font-size:.95rem; line-height:1.55; color:#1F2A3C; }
    .pm-lede__meta {
        display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:12px;
        font-size:.76rem; color:#94A3B8; font-variant-numeric:tabular-nums;
    }
    .pm-lede__meta b { color:#13203A; font-weight:700; font-size:.86rem; }
    .pm-lede__sep { width:1px; height:16px; background:#E5E9F0; }
    .pm-lede__note { margin-top:8px; font-size:.7rem; color:#A9B2C1; }
    .pm-lede__warn {
        margin-top:12px; padding:9px 13px; border-radius:9px;
        background:#FFFBF2; border:1px solid #F6E6CE;
        font-size:.74rem; line-height:1.5; color:#8A5A16; max-width:80ch;
    }

    .pm-tabs {
        display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
        margin:2px 0 18px; border-bottom:1px solid #E5E7EB;
    }
    .pm-tab {
        position:relative; font:inherit; font-size:.85rem; font-weight:600;
        border:0; background:transparent; color:#6B7280;
        min-height:44px; padding:0 20px; cursor:pointer;
        transition:color .12s ease, background .12s ease;
    }
    .pm-tab::after {
        content:""; position:absolute; left:0; right:0; bottom:-1px;
        height:3px; border-radius:3px 3px 0 0; background:transparent;
        transition:background .12s ease;
    }
    .pm-tab:hover { color:#374151; background:rgba(0,0,0,.02); }
    .pm-tab:focus-visible { outline:2px solid #23519E; outline-offset:-2px; }
    .pm-tab--on { color:#23519E; }
    .pm-tab--on::after { background:#F18A25; }
    .pm-tab__n {
        margin-left:7px; font-size:.72rem; font-weight:700; color:#9CA3AF;
        font-variant-numeric:tabular-nums;
    }
    .pm-tab--on .pm-tab__n { color:#23519E; }
    .pm-tabs__note { font-size:.72rem; color:#9CA3AF; margin-left:auto; align-self:center; padding-left:12px; }

    .pm-section { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
    .pm-section__title {
        font-size:.7rem; font-weight:800; letter-spacing:.08em;
        text-transform:uppercase; color:#475569;
    }
    .pm-section__hint { font-size:.72rem; color:#9CA3AF; flex:1; min-width:0; }
    .pm-toggle {
        font:inherit; font-size:.72rem; font-weight:600; color:#23519E;
        background:white; border:1px solid #E0E4EB; border-radius:7px;
        padding:4px 11px; cursor:pointer;
    }
    .pm-toggle:hover { border-color:#23519E; }

    .pm-tablewrap { overflow-x:auto; }
    .pm-table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
    .pm-table th {
        text-align:right; font-size:.62rem; font-weight:700; letter-spacing:.05em;
        text-transform:uppercase; color:#94A3B8; padding:0 10px 8px;
        border-bottom:1px solid #E5E9F0; white-space:nowrap;
    }
    .pm-th--name, .pm-th--user { text-align:left; }
    .pm-table td {
        text-align:right; padding:8px 10px; font-size:.8rem; color:#1F2A3C;
        border-bottom:1px solid #F4F6FA; white-space:nowrap;
    }
    .pm-table tbody tr:hover { background:#FAFBFD; }
    .pm-tr--hot { background:#FFFDF8; }
    .pm-tr--hot:hover { background:#FFFAF0; }
    .pm-td--name { text-align:left; font-weight:600; }
    .pm-td--user {
        text-align:left; color:#94A3B8; font-size:.73rem;
        max-width:130px; overflow:hidden; text-overflow:ellipsis;
    }
    .pm-num--soft { color:#9AA5B5; }
    .pm-zero { color:#CBD3DE; }
    .pm-stage { display:inline-block; min-width:16px; margin-right:8px; font-size:.62rem; font-weight:800; color:#A9B2C1; }
    .pm-bad { color:#B42318; font-weight:700; }
    .pm-warn { color:#B54708; font-weight:700; }
    .pm-hold { color:#475569; font-weight:700; }

    .pm-map { overflow-x:auto; padding:16px 0 2px; }
    .pm-map svg { display:block; width:100%; min-width:1010px; height:auto; }
    .pm-node__t { font-size:11.5px; font-weight:600; fill:#13203A; text-anchor:middle; }
    .pm-node__t--mute { fill:#667085; }
    .pm-node__c { font-size:14px; font-weight:600; fill:#13203A; text-anchor:middle; font-variant-numeric:tabular-nums; }
    .pm-node__c--mute { fill:#667085; }
    .pm-node__i { font-size:10.5px; font-weight:600; fill:#1A3D7A; text-anchor:middle; }
    .pm-node__i--mute { fill:#94A3B8; }
    .pm-seg__n {
        font-size:9.5px; font-weight:600; fill:#1A3D7A; text-anchor:middle;
        font-variant-numeric:tabular-nums;
        stroke:#FFFFFF; stroke-width:3.2; stroke-linejoin:round; paint-order:stroke;
    }
    .pm-arc__n {
        font-size:9px; font-weight:600; fill:#667085; text-anchor:middle;
        font-variant-numeric:tabular-nums;
        stroke:#FFFFFF; stroke-width:3.2; stroke-linejoin:round; paint-order:stroke;
    }
    .pm-note { font-size:10px; font-weight:600; fill:#13203A; text-anchor:middle; }
    .pm-hold { font-size:9.5px; font-weight:600; fill:#DC2626; text-anchor:middle; }
    .pm-hold--crit { font-size:12.5px; font-weight:700; }
    .pm-age { font-size:9.5px; font-weight:400; fill:#667085; text-anchor:middle; }
    .pm-age--crit { font-size:10.5px; font-weight:600; }
    .pm-exit__t { font-size:10.5px; font-weight:600; fill:#667085; text-anchor:start; }
    .pm-exit__s { font-size:9.5px; font-weight:400; fill:#94A3B8; text-anchor:start; }

    .pm-legend {
        display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px;
        border-top:1px solid #E5E7EB; margin-top:8px; padding-top:14px;
        font-size:11.5px; color:#667085;
    }
    .pm-legend span { display:inline-flex; align-items:center; gap:8px; }

    .pm-strips { display:flex; flex-direction:column; gap:2px; }
    .pm-strip {
        display:grid; grid-template-columns:minmax(120px, 190px) minmax(0, 1fr) 74px;
        align-items:center; gap:12px; padding:3px 6px; border-radius:7px;
    }
    .pm-strip:hover { background:#FAFBFD; }
    .pm-strip__name { font-size:.74rem; color:#475569; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pm-strip__track { display:flex; gap:2px; height:17px; }
    .pm-blk { border-radius:2px; min-width:3px; }
    .pm-blk--rework { box-shadow:inset 0 0 0 2px #B54708; }
    .pm-strip__end { font-size:.7rem; color:#94A3B8; font-variant-numeric:tabular-nums; text-align:right; }
    .pm-strip__end--ok { color:#177245; font-weight:700; }
    .pm-strip__end--bad { color:#B42318; font-weight:700; }
    @media (max-width: 640px) {
        .pm-strip { grid-template-columns:minmax(84px, 110px) minmax(0, 1fr) 56px; gap:8px; padding:3px 0; }
        .pm-tab { padding:0 14px; }
    }

    .pm-foot { margin-top:12px; font-size:.7rem; color:#A9B2C1; max-width:82ch; line-height:1.5; }

    .pm-empty {
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:4px; padding:52px 24px; text-align:center;
    }
    .pm-empty__icon { font-size:2.2rem !important; color:#C7D0DD; }
    .pm-empty__title { font-size:.88rem; font-weight:700; color:#475569; margin-top:4px; }
    .pm-empty__hint { font-size:.76rem; color:#9CA3AF; max-width:56ch; }

    /* ── Antigüedad: banda navegable, no adorno ── */
    .bl-strip {
        display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
        gap:8px; margin:0 0 12px;
    }
    .bl-seg {
        display:block; font:inherit; text-align:left; cursor:pointer;
        background:white; border:1px solid #E6ECF4; border-radius:10px; padding:10px 12px;
        transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
    }
    .bl-seg:hover { background:#F7F9FC; }
    .bl-seg:focus-visible { outline:2px solid var(--brand-blue); outline-offset:1px; }
    .bl-seg--on { background:var(--brand-blue-light); border-color:var(--brand-blue); box-shadow:0 0 0 1px var(--brand-blue); }
    .bl-seg__dot { width:8px; height:8px; border-radius:50%; background:var(--tc); flex-shrink:0; }
    .bl-seg--calm .bl-seg__k, .bl-seg--calm .bl-seg__n { color:#A9B2C1; }
    .bl-seg--calm .bl-seg__v { color:#5B6676; font-weight:500; }
    .bl-seg__k { display:flex; align-items:center; gap:7px; font-size:.73rem; font-weight:600; color:#475569; }
    .bl-seg__v {
        display:block; margin-top:2px; font-size:.95rem; font-weight:600; color:#13203A;
        font-variant-numeric:tabular-nums; letter-spacing:-.01em;
    }
    .bl-seg__n { display:block; margin-top:1px; font-size:.66rem; color:#A2ACBB; font-variant-numeric:tabular-nums; }

    .bl-unapplied {
        display:flex; align-items:flex-start; gap:10px;
        padding:11px 14px; border-radius:9px;
        background:#F5F8FD; border:1px solid #DDE7F5;
        font-size:.74rem; line-height:1.5; color:#31465F; max-width:82ch;
    }
    .bl-unapplied__i { font-size:1.05rem !important; color:#5B7DB1; flex:none; }
    .bl-unapplied b { color:#13203A; font-variant-numeric:tabular-nums; }

    /* ── Lista de cobranza ── */
    .bl-work { display:flex; flex-direction:column; }
    .bl-w { border-top:1px solid #EEF1F5; }
    .bl-w:first-child { border-top:0; }
    .bl-w--open { background:#FBFCFE; }

    .bl-w__head {
        display:grid; align-items:center; width:100%; gap:0 16px;
        grid-template-columns:minmax(0,1fr) 116px 116px 84px 84px 22px;
        padding:12px 4px; font:inherit; text-align:left; cursor:pointer;
        background:transparent; border:0;
    }
    .bl-w__head:hover { background:#F7F9FC; }
    .bl-w__head:focus-visible { outline:2px solid #23519E; outline-offset:-2px; }

    .bl-w__id { min-width:0; }
    .bl-w__name {
        display:block; font-size:.85rem; font-weight:600; color:#13203A;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .bl-w__meta { display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:2px; font-size:.69rem; color:#8B95A5; }
    .bl-w__habit { color:#667085; }
    .bl-w__habit--slow { color:#B5651A; font-weight:600; }
    .bl-w__band {
        padding:1px 7px; border-radius:5px; background:#F1F3F7;
        color:#5B6676; font-weight:600; font-size:.65rem;
    }
    .bl-w__contact {
        color:#8B95A5; max-width:210px; overflow:hidden;
        text-overflow:ellipsis; white-space:nowrap;
    }

    .bl-w__num { text-align:right; }
    .bl-w__amount {
        display:block; font-size:.88rem; font-weight:600; color:#13203A;
        font-variant-numeric:tabular-nums; letter-spacing:-.01em;
    }
    .bl-w__amount--soft { font-weight:400; color:#667085; }
    .bl-w__over { display:block; font-size:.88rem; font-weight:600; color:#B5651A; font-variant-numeric:tabular-nums; }
    .bl-w__over--bad { color:#DC2626; }
    .bl-w__exp { display:block; font-size:.88rem; font-weight:500; color:#31465F; font-variant-numeric:tabular-nums; }
    .bl-w__lbl { display:block; margin-top:1px; font-size:.62rem; color:#A2ACBB; }
    .bl-w__chev { font-size:1.15rem !important; color:#A2ACBB; }

    .bl-w__body { padding:2px 4px 16px 8px; overflow-x:auto; }

    .bl-over { font-size:.78rem; font-weight:600; color:#B5651A; font-variant-numeric:tabular-nums; }
    .bl-over--bad { color:#DC2626; }
    .bl-over--none { font-size:.78rem; color:#B7BFCB; }

    @media (max-width:1100px) {
        .bl-w__head { grid-template-columns:minmax(0,1fr) 100px 84px 22px; row-gap:8px; }
        .bl-w__num:nth-of-type(3), .bl-w__num:nth-of-type(4) { display:none; }
    }

    @media (max-width:640px) {
        .bl-strip { grid-template-columns:repeat(2, minmax(0, 1fr)); }
        .bl-w__head { grid-template-columns:minmax(0,1fr) 96px 22px; gap:0 10px; }
        .bl-w__num:nth-of-type(5) { display:none; }
        .bl-w__contact { max-width:100%; }
    }