/* =========================================
   LC PAPER Sales Intelligence — LC CLOUD Design System
   ========================================= */

:root {
    --lc-forest: #003017;
    --lc-mint: #c8e6d0;
    --lc-tech-green: #00694e;
    --lc-white: #ffffff;
    --lc-grey: #f8f8f8;
    --lc-sand: #faf8f5;
    --lc-text: #333333;
    --lc-text-dim: #666666;
    --lc-text-muted: #999999;
    --lc-border: #cccccc;
    --lc-border-light: #e5e5e5;
    --lc-danger: #c0392b;
    --lc-warning: #f39c12;
    --lc-success: #00694e;
    /* Legacy Spanish-named aliases still referenced inline across index.php.
       Without these the var() resolves to the property's initial value
       (transparent for background, black for color) — e.g. the Configuració
       modal's dark green header went transparent so its white ✕ became white
       on white. Map them to the canonical LC palette. */
    --verde-oscuro: var(--lc-forest);
    --verde-intenso: var(--lc-tech-green);
    --arena: var(--lc-sand);
    --gris-light: var(--lc-border-light);
    --text: var(--lc-text);
    --text-light: var(--lc-text-muted);
    --font-main: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'DM Sans', 'Inter', 'Helvetica Neue', sans-serif;
    --font-hand: 'Covered By Your Grace', cursive;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --navbar-height: 56px;
}

/* Optional advanced analytics. Native Salesint dashboards never depend on it. */
.page-header-with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.advanced-analytics-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.advanced-analytics-page {
    min-height: 100vh;
    margin: 0;
    color: #173529;
    background: #f4f3ee;
}

.advanced-analytics-header {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 20px;
    min-height: 64px;
    padding: 10px clamp(20px, 4vw, 64px);
    border-bottom: 1px solid rgba(0, 48, 23, 0.14);
    background: #fff;
}

.advanced-analytics-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: #003017;
    font-weight: 700;
    text-decoration: none;
}

.advanced-analytics-heading h1 {
    margin: 0;
    color: #003017;
    font: 700 clamp(16px, 1.5vw, 20px)/1.2 "DM Sans", sans-serif;
    text-align: center;
}

.advanced-division-control {
    display: block;
    justify-self: end;
    width: min(100%, 300px);
}

.advanced-division-control select {
    width: 100%;
    min-height: 44px;
    padding: 0 38px 0 13px;
    border: 1px solid #aab8b0;
    border-radius: 8px;
    color: #173529;
    background: #fff;
    font: 600 14px "DM Sans", sans-serif;
}

.advanced-analytics-main {
    min-height: calc(100vh - 64px);
    padding: 0;
    overflow: visible;
}

.advanced-analytics-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
    padding: 28px;
    border: 1px solid rgba(0, 48, 23, 0.12);
    border-radius: 12px;
    background: #fff;
    text-align: left;
}

.advanced-analytics-state[hidden] { display: none; }
.advanced-analytics-state strong,
.advanced-analytics-state span { display: block; }
.advanced-analytics-state span { margin-top: 4px; color: #67746d; }
.advanced-analytics-state-error { color: #8b2f25; }
.advanced-analytics-actions { display: flex; gap: 8px; margin-left: 12px; }

.advanced-analytics-embed {
    display: block;
    width: 100%;
    height: max(900px, calc(100vh - 64px));
    min-height: 0;
    border: 0;
    background: #fff;
    overflow: visible;
}

.advanced-analytics-embed[hidden] { display: none; }
.advanced-analytics-embed metabase-dashboard { display: block; width: 100%; height: 100%; }

@media (max-width: 800px) {
    .page-header-with-action {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .advanced-analytics-link { width: fit-content; }
    .advanced-analytics-header {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }
    .advanced-analytics-heading h1 { font-size: 16px; }
    .advanced-division-control select { min-height: 40px; padding-left: 10px; font-size: 12px; }
    .advanced-analytics-actions { flex-direction: column; margin: 12px 0 0; }
    .advanced-analytics-state { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 520px) {
    .advanced-analytics-header { grid-template-rows: auto auto; }
    .advanced-analytics-back { grid-column: 1; grid-row: 1; }
    .advanced-analytics-heading { grid-column: 2; grid-row: 1; }
    .advanced-division-control {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: none;
    }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

body {
    font-family: var(--font-main);
    background: var(--lc-white);
    color: var(--lc-text);
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---- LOGIN ---- */
@keyframes lc-login-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.login-body {
    background: linear-gradient(135deg, #001a0e, #00261a, #003328, #00352e, #002e2b, #002418, #001a0e);
    background-size: 400% 400%;
    animation: lc-login-gradient 20s ease infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: 1.5rem;
}
.lc-login-logo {
    height: 45px;
    filter: brightness(10);
    opacity: 0.85;
}
.login-container { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 20px; }
.login-card {
    background: var(--lc-white);
    border-top: 4px solid var(--lc-forest);
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    padding: 48px 40px;
    min-width: 380px;
    max-width: 420px;
    text-align: center;
}
.login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}
.login-logo-img {
    max-width: 220px;
    height: auto;
    filter: brightness(10);
    opacity: 0.85;
}
.login-brand-text {
    font-size: var(--text-xl);
    font-weight: 300;
    color: var(--lc-forest);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
}
.login-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.login-back {
    text-align: center;
    color: var(--lc-tech-green);
    text-decoration: none;
    font-size: var(--text-sm);
}
.login-back:hover { text-decoration: underline; }
.login-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 9px;
    color: var(--lc-text-muted);
}

/* ---- FORMS ---- */
.form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--lc-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--lc-border-light);
    background: var(--lc-white);
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--lc-text);
    outline: none;
    transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--lc-tech-green);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: flex; gap: 12px; align-items: flex-end; }
.form-inline { display: flex; gap: 8px; align-items: center; }

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: var(--font-main);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.btn:hover { opacity: 0.85; }
.btn-primary {
    background: var(--lc-forest);
    color: var(--lc-white);
}
.btn-secondary {
    background: transparent;
    color: var(--lc-forest);
    border: 1px solid var(--lc-border);
}
.btn-outline {
    background: transparent;
    color: var(--lc-forest);
    border: 1px solid var(--lc-border);
}
.btn-danger {
    background: var(--lc-danger);
    color: var(--lc-white);
}
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-full { width: 100%; }
.btn-icon {
    width: 32px; height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- ALERTS ---- */
.alert {
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 16px;
    border-left: 3px solid;
}
.alert-error {
    background: #fde8e8;
    border-color: var(--lc-danger);
    color: var(--lc-danger);
}
.alert-success {
    background: #e8f5e9;
    border-color: var(--lc-tech-green);
    color: var(--lc-forest);
}
.alert-warning {
    background: #fff3cd;
    border-color: var(--lc-warning);
    color: var(--lc-warning);
}

/* ---- TOP NAVBAR ---- */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--lc-forest);
    color: var(--lc-white);
    z-index: 200;
}
.navbar-row-top {
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 16px;
}
.navbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.navbar-logo-img {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}
.navbar-brand-sep {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.lc-header-app-name {
    font-size: var(--text-sm);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lc-white);
    white-space: nowrap;
}
.lc-header-greeting {
    font-size: var(--text-sm);
    color: var(--lc-white);
    white-space: nowrap;
}
.lc-header-greeting strong { font-weight: 600; }
.lc-header-logout {
    font-size: var(--text-xs);
    color: var(--lc-mint);
    text-decoration: none;
    border: 1px solid rgba(200,230,208,0.4);
    padding: 4px 12px;
    transition: opacity 0.2s;
}
.lc-header-logout:hover { opacity: 0.85; }
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--lc-white);
    cursor: pointer;
    padding: 4px;
}

.navbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    min-width: 0;
}
.navbar-division-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}
.navbar-div-group {
    display: flex;
    align-items: center;
    gap: 2px;
}
.navbar-div-group + .navbar-div-group {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.15);
}
.navbar-div-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.navbar-div-btn .div-icon { font-size: 16px; }
.navbar-div-btn:hover {
    color: var(--lc-white);
    background: rgba(255,255,255,0.08);
}
.navbar-div-btn.active {
    color: var(--lc-white);
    background: rgba(255,255,255,0.1);
    border-bottom-color: var(--lc-mint);
}
.tab-label-mobile { display: none; }

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.navbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
}
.navbar-user-avatar {
    width: 30px;
    height: 30px;
    background: var(--lc-tech-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    border-radius: 50%;
}
.navbar-user-name {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
}
.navbar-logout {
    color: rgba(255,255,255,0.5);
    transition: color 0.15s;
}
.navbar-logout:hover { color: var(--lc-white); }

/* ---- LAYOUT ---- */
.app-container {
    display: flex;
    padding-top: var(--navbar-height);
    min-height: 100vh;
}
.sidebar {
    width: 240px;
    background: var(--lc-sand);
    border-right: 1px solid var(--lc-border-light);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
}
.sidebar-nav {
    flex: 1;
    padding: 16px 0;
}
.sidebar-section-title {
    padding: 8px 20px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--lc-text-muted);
    font-weight: 500;
}
.sidebar-division-info {
    padding: 4px 20px 12px;
}
.sidebar-division-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--lc-forest);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 6px;
}
.sidebar-division-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    background: var(--lc-mint);
    color: var(--lc-forest);
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--lc-text-dim);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.sidebar-link:hover {
    color: var(--lc-forest);
    background: var(--lc-sand);
}
.sidebar-link.active {
    color: var(--lc-forest);
    background: var(--lc-mint);
    border-left-color: var(--lc-tech-green);
    font-weight: 500;
}
.sidebar-link svg { width: 18px; height: 18px; opacity: 0.5; }
.sidebar-link.active svg { opacity: 0.8; }

/* Sidebar footer (logout) — only shown on smartphones, pinned to the bottom */
.sidebar-footer {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    margin-top: auto;
    border-top: 1px solid var(--lc-border-light);
}
.sidebar-footer-greeting {
    font-size: 13px;
    color: var(--lc-text-dim);
}
.sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    color: var(--lc-forest);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--lc-border-light);
}
.sidebar-logout:hover { background: var(--lc-mint); }
.sidebar-logout svg { width: 18px; height: 18px; }

.main-content {
    margin-left: 240px;
    flex: 1;
    min-height: calc(100vh - var(--navbar-height));
    /* Flex items default to min-width: auto (= min-content). If a deep
       descendant (e.g. the ~3000 px line-chart SVG) has a large intrinsic
       width, the flex chain refuses to shrink and the whole main column
       grows past the viewport, producing horizontal page scroll. Cap the
       column and forbid content overflow from leaking sideways. */
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

/* ---- RESUM MODE ----
   The Resum view is not division-scoped and shows a single section, so the
   left sidebar (Divisió actual / Seccions / Administració) has nothing to
   drive: it is hidden and the content column reclaims its width. */
body.resum-mode .sidebar,
body.resum-mode .sidebar-toggle { display: none !important; }
body.resum-mode .main-content { margin-left: 0; }
body.resum-mode .page-content { max-width: 1600px; }

/* One row per MP line inside each Resum block. */
.resum-row { margin-bottom: 28px; }
.resum-row:last-child { margin-bottom: 0; }
.resum-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--lc-forest);
    padding-bottom: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--lc-border-light);
}
.resum-row-mp {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--lc-forest);
    color: var(--lc-white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.resum-treemap { height: 220px; }
/* Division chip on the mixed trending/at-risk cards, where a client's card
   no longer carries its division from context. */
.resum-div-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--lc-grey);
    border: 1px solid var(--lc-border-light);
    color: var(--lc-text-dim);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

/* ---- APP SECTIONS ---- */
.app-section { display: none; }
.app-section.active { display: block; }

/* ---- PAGE CONTENT ---- */
.page-content {
    padding: 32px;
    max-width: 1400px;
}
.page-header {
    margin-bottom: 32px;
}
.page-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--lc-forest);
    margin-bottom: 4px;
}
.page-desc {
    font-size: 13px;
    color: var(--lc-text-dim);
}

/* ---- SECTIONS/BLOCKS ---- */
.section {
    margin-bottom: 32px;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lc-border-light);
}
.section-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--lc-forest);
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-badge {
    background: var(--lc-mint);
    color: var(--lc-forest);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
}

/* ---- FROSTED GLASS PANELS ---- */
.glass-panel, .lc-frosted {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.glass-panel-dark {
    background: rgba(45,90,61,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(45,90,61,0.3);
    color: var(--lc-white);
    padding: 24px;
}

/* ---- CARDS ---- */
.card {
    background: var(--lc-sand);
    border: 1px solid var(--lc-border-light);
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}
.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--lc-text);
}
.card-meta {
    font-size: 12px;
    color: var(--lc-text-dim);
}
.card-body { font-size: 13px; color: var(--lc-text-dim); line-height: 1.6; }
.card-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--lc-border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* News cards */
.news-card {
    border-left: 3px solid var(--lc-tech-green);
}
.news-card .card-title a {
    color: var(--lc-text);
    text-decoration: none;
}
.news-card .card-title a:hover {
    color: var(--lc-tech-green);
}
.news-source {
    font-size: 11px;
    color: var(--lc-tech-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Client cards */
.client-card { position: relative; }
.client-card.positive { border-left: 3px solid var(--lc-tech-green); }
.client-card.negative { border-left: 3px solid var(--lc-danger); }
.client-card.neutral { border-left: 3px solid var(--lc-warning); }
.client-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
}
.client-tag.trending { background: var(--lc-mint); color: var(--lc-forest); }
.client-tag.growth { background: #e8f5e9; color: #2e7d32; }
.client-tag.decline { background: #fde8e8; color: var(--lc-danger); }
.client-tag.at-risk { background: #fff3cd; color: var(--lc-warning); }

/* Mini histogram */
.mini-chart-wrapper {
    display: flex;
    gap: 4px;
    margin: 12px 0;
}
.mini-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 9px;
    color: var(--lc-text-muted);
    padding-bottom: 16px;
    min-width: 28px;
}
.mini-chart-body {
    flex: 1;
    min-width: 0;
}
.mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 48px;
    border-left: 1px solid var(--lc-border-light);
    border-bottom: 1px solid var(--lc-border-light);
    padding-left: 2px;
}
.mini-chart-x-axis {
    display: flex;
    gap: 2px;
    padding-left: 2px;
    margin-top: 2px;
}
.mini-chart-x-axis .axis-label {
    flex: 1;
    text-align: center;
    font-size: 8px;
    color: var(--lc-text-muted);
    min-width: 8px;
}
.mini-chart-bar {
    flex: 1;
    background: var(--lc-mint);
    min-width: 8px;
    transition: height 0.3s;
}
.mini-chart-bar.negative-bar { background: #f8b4b4; }
.mini-chart-bar:hover { opacity: 0.8; }

/* Mini line chart (replaces bar histogram inside client cards) */
.mini-chart .mini-line-chart {
    display: block;
    width: 100%;
    height: 100%;
}

/* Client × revenue treemap (Anàlisi cartera) */
.treemap-canvas {
    position: relative;
    width: 100%;
    height: 300px;
    background: var(--lc-grey);
    border: 1px solid var(--lc-border-light);
    overflow: hidden;
}
.treemap-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--lc-text-muted);
    font-size: 13px;
}
.treemap-rect {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.92);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: filter 0.15s;
}
.treemap-rect:hover {
    filter: brightness(1.08);
    outline: 2px solid var(--lc-forest);
    outline-offset: -2px;
    z-index: 2;
}
.treemap-rect-label {
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    max-width: 100%;
}
.treemap-rect-label .trc-name {
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}
.treemap-rect-label .trc-rev { font-size: 10px; opacity: 0.92; }
.treemap-slicer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.treemap-label {
    min-width: 96px;
    text-align: center;
    font-size: 13px;
    color: var(--lc-forest);
}

/* BBDD filter input — narrow with funnel icon prefix */
.bbdd-filter-wrap {
    position: relative;
    width: 25%;
    min-width: 220px;
}
.bbdd-filter-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lc-text-muted);
    pointer-events: none;
}
.bbdd-filter-input { padding-left: 34px; width: 100%; }
@media (max-width: 640px) {
    .bbdd-filter-wrap { width: 100%; min-width: 0; }
}

/* ---- KPIs ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.kpi-card {
    background: var(--lc-white);
    border: 1px solid var(--lc-border-light);
    padding: 20px;
}
.kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--lc-text-dim);
    margin-bottom: 8px;
    font-weight: 500;
}
.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--lc-forest);
    line-height: 1;
    margin-bottom: 6px;
}
.kpi-change {
    font-size: 12px;
    font-weight: 500;
}
.kpi-change.up { color: var(--lc-tech-green); }
.kpi-change.down { color: var(--lc-danger); }
.kpi-change.neutral { color: var(--lc-text-muted); }

/* ---- Dashboard-style KPIs (Cartera comercial, divisions MP2–MP5) ---- */
.kpi-grid-dashboard { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.kpi-card.kpi-dash {
    position: relative; border-left: 4px solid var(--lc-border-light);
    display: flex; flex-direction: column; gap: 6px;
}
.kpi-card.kpi-dash .kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-card.kpi-dash .kpi-change { font-size: 12px; color: var(--lc-text-dim); font-weight: 500; }
.kpi-card.kpi-dash .kpi-value-xl { font-size: 36px; line-height: 1; letter-spacing: -0.5px; }

.kpi-dash-prod { background: #f3f8f4; border-left-color: var(--lc-tech-green); }
.kpi-dash-prod .kpi-value { color: var(--lc-tech-green); }
.kpi-dash-sales { background: #fdfaf3; border-left-color: #c7a96b; }
.kpi-dash-sales .kpi-value { color: #8a6a2b; }
.kpi-dash-stock { background: #f5f8ff; border-left-color: #4a7bbf; }
.kpi-dash-stock .kpi-value { color: #2d4d80; }
.kpi-dash-price { background: #f8f8f8; border-left-color: var(--lc-forest); }
.kpi-dash-price .kpi-value { color: var(--lc-forest); }

.kpi-dash.stock-up { background: #f3f8f4; border-left-color: var(--lc-tech-green); }
.kpi-dash.stock-up .kpi-value { color: var(--lc-tech-green); }
.kpi-dash.stock-down { background: #fdf3ee; border-left-color: var(--lc-warning); }
.kpi-dash.stock-down .kpi-value { color: #b4730f; }

.kpi-dash.at-risk, .kpi-dash.price-deficit {
    background: #fff5e6; border-left-color: var(--lc-warning);
}
.kpi-dash.at-risk .kpi-value, .kpi-dash.price-deficit .kpi-value { color: #b4730f; }
.kpi-dash.behind, .kpi-dash.price-catastrophic {
    background: #fdecea; border-left-color: var(--lc-danger);
}
.kpi-dash.behind .kpi-value, .kpi-dash.price-catastrophic .kpi-value { color: var(--lc-danger); }

.kpi-badge {
    font-size: 10px; font-weight: 600; padding: 2px 6px; letter-spacing: 0.4px;
    text-transform: uppercase; background: rgba(0,0,0,0.06); color: var(--lc-text-dim);
}
.kpi-badge.on-track, .kpi-badge.price-great, .kpi-badge.price-fair { background: #d6efd9; color: var(--lc-tech-green); }
.kpi-badge.at-risk, .kpi-badge.price-deficit { background: #fbe1bf; color: #b4730f; }
.kpi-badge.behind, .kpi-badge.price-catastrophic { background: #f6c9c4; color: var(--lc-danger); }

.trend-arrow { font-size: 14px; margin-left: 4px; }
.trend-arrow.trend-up { color: var(--lc-tech-green); }
.trend-arrow.trend-down { color: var(--lc-danger); }
.trend-arrow.trend-neutral { color: var(--lc-text-muted); }

/* Progress bar inside KPI cards (current % filled + expected % marker) */
.kpi-progress-wrap { position: relative; margin-top: 12px; padding-top: 14px; }
.kpi-progress-container {
    position: relative; height: 18px; background: rgba(0,0,0,0.06); overflow: visible;
}
.kpi-progress-bar {
    height: 100%; min-width: 40px;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 6px; font-size: 11px; font-weight: 700; color: var(--lc-white);
    transition: width 0.6s ease;
}
.kpi-progress-bar.on-track { background: linear-gradient(90deg, var(--lc-tech-green), #4a9d7f); }
.kpi-progress-bar.at-risk  { background: linear-gradient(90deg, #b4730f, var(--lc-warning)); }
.kpi-progress-bar.behind   { background: linear-gradient(90deg, #8B1A1A, var(--lc-danger)); }
.kpi-progress-bar.stock-up { background: linear-gradient(90deg, var(--lc-tech-green), #4a9d7f); }
.kpi-progress-bar.stock-down { background: linear-gradient(90deg, #b4730f, var(--lc-warning)); }
.kpi-progress-marker {
    position: absolute; top: -4px; bottom: -4px; width: 2px;
    background: var(--lc-text); opacity: 0.65;
}
.kpi-progress-marker-label {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    font-size: 10px; font-weight: 600; color: var(--lc-text-dim); white-space: nowrap;
}

@media (max-width: 1100px) {
    .kpi-grid-dashboard { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .kpi-grid-dashboard { grid-template-columns: 1fr; }
    .kpi-card.kpi-dash .kpi-value-xl { font-size: 28px; }
}

/* ---- Family trend table (Evolució per família de producte) ---- */
.family-trend-table { table-layout: fixed; width: 100%; }
.family-trend-table .col-family { width: 24%; }
.family-trend-table .col-trend { width: 28%; padding-right: 14px; }
/* All header labels are centred horizontally in their column. Needs one
   extra element (`table`) so it beats the generic `table.data-table th`
   rule below, which would otherwise re-apply text-align: left by cascade
   order at the same specificity. */
table.family-trend-table thead th { text-align: center; }
.family-trend-table td.col-trend { text-align: center; }
.family-trend-table td.col-family {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Two invisible sub-columns: the histogram slot is fixed to the chart
   width so every chart across rows sits at exactly the same x-offset,
   and the percentage slot is fixed and right-aligned so 1-, 2- and
   3-digit values line up on their right edge without shoving the
   chart sideways. */
.family-trend-wrap {
    display: inline-grid;
    grid-template-columns: 60px 56px;
    align-items: center;
    gap: 10px;
}
.family-trend-chart {
    display: block;
    width: 100%;
    text-align: left;
    line-height: 0; /* famhist is inline-flex; drop leading */
}
.family-trend-pct {
    display: block;
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.famhist {
    display: inline-flex; align-items: flex-end; gap: 3px;
    width: 60px; height: 28px;
}
.famhist-bar {
    flex: 1 1 0; min-width: 0; min-height: 2px;
    background: var(--lc-border-light);
    transition: background 0.2s;
}
.famhist-bar.famhist-up { background: var(--lc-tech-green); }
.famhist-bar.famhist-down { background: var(--lc-danger); }
.famhist-bar.famhist-current { box-shadow: inset 0 -2px 0 var(--lc-forest); }

/* ---- TABLES ---- */
.table-container { overflow-x: auto; }
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.data-table th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lc-white);
    background: var(--lc-forest);
}
table.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--lc-border-light);
}
table.data-table tr:hover td { background: var(--lc-sand); }

/* ---- TWIN FINDER ---- */
.twin-finder-hero {
    background: var(--lc-forest);
    color: var(--lc-white);
    padding: 40px;
    text-align: center;
    margin-bottom: 24px;
}
.twin-finder-hero .btn { color: #fff; }
.twin-finder-hero h2 {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.4;
}
.twin-finder-hero strong {
    color: var(--lc-mint);
    font-weight: 600;
}
.twin-finder-hero .form-select {
    display: inline-block;
    width: auto;
    margin: 0 8px;
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: var(--lc-white);
}
.twin-finder-hero .form-select option {
    background: var(--lc-white);
    color: var(--lc-text);
}
.twin-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--lc-border-light);
    gap: 16px;
}
.twin-result:last-child { border-bottom: none; }
.twin-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--lc-text);
}
.twin-desc {
    font-size: 13px;
    color: var(--lc-text-dim);
    margin-top: 4px;
}
.btn-star {
    background: none;
    border: 1px solid var(--lc-tech-green);
    color: var(--lc-tech-green);
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-main);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.btn-star:hover, .btn-star.starred {
    background: var(--lc-tech-green);
    color: var(--lc-white);
}

/* ---- CONFIG ---- */
.config-section {
    background: var(--lc-white);
    border: 1px solid var(--lc-border-light);
    padding: 24px;
    margin-bottom: 20px;
}
.config-section h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--lc-forest);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-border-light);
}
.user-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--lc-border-light);
}
.user-list-item:last-child { border-bottom: none; }

/* ---- FAVORITES ---- */
.fav-card {
    background: var(--lc-white);
    border: 1px solid var(--lc-border-light);
    padding: 20px;
}
.fav-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* ---- MATERIALS ---- */
.material-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lc-border-light);
}
.material-icon {
    width: 40px; height: 40px;
    background: var(--lc-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--lc-forest);
}

/* ---- LOADING / SPINNER ---- */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--lc-text-dim);
    font-size: 13px;
    gap: 10px;
}
.spinner, .lc-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--lc-border-light);
    border-top-color: var(--lc-tech-green);
    border-radius: 50% !important;
    animation: lc-spin 0.8s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }

/* ---- MODAL ---- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
    background: var(--lc-white);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 32px;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; color: var(--lc-forest); }
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--lc-text-muted);
    padding: 0;
    line-height: 1;
}

/* ---- EMAIL COMPOSER ---- */
.email-composer {
    background: var(--lc-sand);
    border: 1px solid var(--lc-border-light);
    padding: 20px;
}
.email-preview {
    background: var(--lc-white);
    border: 1px solid var(--lc-border-light);
    padding: 20px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* ---- TABS ---- */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--lc-border-light);
    margin-bottom: 20px;
}
.tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lc-text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-main);
}
.tab:hover { color: var(--lc-forest); }
.tab.active {
    color: var(--lc-forest);
    border-bottom-color: var(--lc-tech-green);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; }
    .page-content { padding: 24px; }
    .navbar-user-name { display: none; }
}
@media (max-width: 767px) {
    :root {
        --navbar-height: 108px;
        --text-xs: 14px; --text-sm: 16px; --text-base: 18px; --text-lg: 22px; --text-xl: 32px;
    }
    .sidebar-toggle { display: block; }
    .sidebar-toggle svg { width: 24px; height: 24px; }
    .navbar-brand, .navbar-brand-sep { display: none; }
    .navbar-user-name { display: none; }

    /* Two-level navbar: top row = logo+logout, bottom row = divisions */
    .navbar-row-top {
        flex-wrap: wrap;
        height: auto;
        padding: 0 14px;
        gap: 0;
    }
    .navbar-left, .navbar-right {
        height: 54px;
        display: flex;
        align-items: center;
    }
    .navbar-logo-img { height: 32px; }
    .navbar-user-avatar { width: 34px; height: 34px; font-size: 14px; }
    .navbar-logout svg { width: 22px; height: 22px; }
    .navbar-center {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        padding: 4px 0 8px 0;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .navbar-division-selector {
        width: 100%;
        justify-content: center;
    }
    .navbar-div-btn { padding: 8px 10px; font-size: 10px; }
    .navbar-div-btn .div-icon { font-size: 17px; }
    .tab-label-full { display: none; }
    .tab-label-mobile { display: inline; }
    .navbar-div-group + .navbar-div-group { margin-left: 6px; padding-left: 6px; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s;
        z-index: 150;
        width: 260px;
        box-shadow: none;
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0,0,0,0.1);
    }
    /* On smartphones the logout lives at the bottom of the hamburger menu */
    .navbar-right { display: none; }
    .sidebar-footer { display: flex; }
    .main-content { margin-left: 0; }
    /* No horizontal page scroll on smartphones; wide tables keep their own
       inner .table-container scroller, this only clips stray overflow */
    .app-container { overflow-x: clip; }
    .page-content { padding: 12px; max-width: 100%; overflow-wrap: break-word; }
    /* Tab bars (favorites filters, config admin tabs) keep their own
       horizontal scroll so no button is left unreachable by overflow-x:clip */
    .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { flex: 0 0 auto; white-space: nowrap; }
    .page-title { font-size: 18px; }
    .page-header { margin-bottom: 20px; }
    .section-header { gap: 8px; flex-wrap: wrap; }
    .section-title { font-size: 14px; white-space: normal; flex-wrap: wrap; min-width: 0; }
    .cache-info { font-size: 10px; }
    .kpi-value { font-size: 22px; }
    .kpi-card { padding: 14px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .card-grid { grid-template-columns: 1fr; }
    .modal { width: 95%; padding: 20px; max-height: 90vh; }
    .twin-finder-hero { padding: 24px 16px; }
    .twin-finder-hero h2 { font-size: 18px; }
    .twin-result { flex-direction: column; align-items: flex-start; gap: 10px; }
    .fav-tools { flex-direction: column; }
    .fav-tools .btn { width: 100%; justify-content: center; }
    .form-row { flex-direction: column; }
    table.data-table { font-size: 11px; }
    table.data-table th, table.data-table td { padding: 6px 8px; }
    .refresh-label { display: none; }
    .refresh-icon { display: inline !important; }
    .btn-refresh.btn-sm { padding: 4px 8px; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .navbar-div-btn { padding: 7px 8px; font-size: 9px; }
    .navbar-div-btn .div-icon { font-size: 15px; }
    .section-header > div { width: 100%; justify-content: flex-end; }
}

/* ---- PROSPECT CARDS ---- */
.prospect-card a { color: #5a3a1a; text-decoration: none; }
.prospect-card a:hover { color: #3d2610; text-decoration: underline; }
.prospect-card .card-footer .btn { line-height: 1; }
.prospect-notes-section { margin-top: 12px; border-top: 1px solid var(--lc-border-light); padding-top: 10px; }
.prospect-note { padding: 6px 0; border-bottom: 1px solid #f0ede8; }
.prospect-note:last-child { border-bottom: none; }
.prospect-note-user { font-weight: 600; color: var(--lc-forest); font-size: 12px; }
.prospect-note-date { font-size: 11px; color: var(--lc-text-muted); margin-left: 8px; }
.prospect-note-text { font-size: 13px; color: var(--lc-text); margin-top: 2px; }
.note-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--lc-grey); color: var(--lc-text-dim); font-size: 10px; font-weight: 600; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }
.note-send-btn {
    width: 44px;
    min-width: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- CONCENTRATION ANALYSIS ---- */
.concentration-panel {
    background: var(--lc-white);
    border: 1px solid var(--lc-border-light);
    padding: 20px;
}
.concentration-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-left: 4px solid;
}
.concentration-danger {
    background: #fde8e8;
    border-color: var(--lc-danger);
}
.concentration-warning {
    background: #fff3cd;
    border-color: var(--lc-warning);
}
.concentration-success {
    background: #e8f5e9;
    border-color: var(--lc-tech-green);
}
.concentration-icon { font-size: 24px; flex-shrink: 0; }
.concentration-headline { font-size: 14px; font-weight: 600; color: var(--lc-text); }
.concentration-detail { font-size: 12px; color: var(--lc-text-dim); margin-top: 4px; }
.concentration-bar-container { position: relative; }
.concentration-bar {
    display: flex;
    height: 28px;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--lc-border-light);
}
.concentration-segment {
    height: 100%;
    transition: width 0.3s;
    cursor: pointer;
    position: relative;
}
.concentration-segment:hover { opacity: 0.8; }
.concentration-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
}
.concentration-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.concentration-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* ---- NEWS DELETE BUTTON ---- */
.news-card { position: relative; }
.news-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0,0,0,0.06);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lc-text-muted);
    transition: background 0.2s, color 0.2s;
    padding: 0;
    z-index: 2;
}
.news-delete-btn:hover {
    background: rgba(220,53,69,0.12);
    color: #dc3545;
}

/* ---- PROSPECT MAP ---- */
#bbdd-map {
    background: var(--lc-white);
    border: 1px solid var(--lc-border-light);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
#bbdd-map .leaflet-container { border-radius: 8px; }
.leaflet-pin-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.leaflet-pin-label span {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    pointer-events: none;
}
.prospect-map-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}
.prospect-map-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--lc-text-dim);
    background: var(--lc-sand);
    padding: 3px 10px;
    white-space: nowrap;
}
.prospect-map-chip strong {
    color: var(--lc-forest);
    font-weight: 700;
}

/* ---- COMPARE BAR ---- */
.compare-floating-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lc-forest);
    color: var(--lc-white);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    font-size: 13px;
    font-weight: 500;
}
.compare-floating-bar .btn-outline { border-color: rgba(255,255,255,0.4); color: var(--lc-white); }
.compare-floating-bar .btn-outline:hover { background: rgba(255,255,255,0.1); }

/* ---- COMPARE TABLE ---- */
.compare-table th, .compare-table td { min-width: 140px; }
.compare-table td:first-child { min-width: 100px; white-space: nowrap; }
.compare-btn.btn-primary { background: var(--lc-forest); color: var(--lc-white); border-color: var(--lc-forest); }

/* ---- UTILITIES ---- */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-sm { font-size: 12px; }
.text-muted { color: var(--lc-text-dim); }
.text-center { text-align: center; }
.text-verde { color: var(--lc-tech-green); }
.text-danger { color: var(--lc-danger); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.hidden { display: none !important; }
.w-full { width: 100%; }
.cache-info { font-size: var(--text-xs); color: var(--lc-text-muted); font-weight: 400; white-space: nowrap; }
.refresh-icon { display: none; vertical-align: middle; }

/* ---- LC CLOUD FOOTER ---- */
.lc-footer { text-align: center; padding: var(--spacing-lg) var(--spacing-md); margin-top: var(--spacing-xl); }
.lc-footer-claim { font-size: var(--text-base); color: var(--lc-text-dim); margin-bottom: 1rem; }
.lc-footer-today { font-family: var(--font-hand); font-size: 105%; color: var(--lc-tech-green); text-decoration: underline; text-underline-offset: 2px; }
.lc-footer-copy { font-size: 9px; color: var(--lc-text-muted); }
.lc-footer-links { margin-top: var(--spacing-sm); font-size: var(--text-xs); }
.lc-footer-links a { color: var(--lc-tech-green); text-decoration: none; }
.lc-footer-links a:hover { text-decoration: underline; }

/* =========================================
   PIPELINE COMERCIAL
   ========================================= */

/* KPI Panel */
.pipeline-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.kpi-card {
    background: var(--lc-white);
    border: 1px solid var(--lc-border-light);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.kpi-value { font-size: 28px; font-weight: 700; color: var(--lc-forest); line-height: 1.2; }
.kpi-label { font-size: 12px; color: var(--lc-text-dim); margin-top: 4px; }
.kpi-target { font-size: 11px; color: var(--lc-text-muted); margin-top: 2px; }
.kpi-bar { height: 4px; background: var(--lc-border-light); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.kpi-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.kpi-bar-fill.kpi-low { background: var(--lc-danger); }
.kpi-bar-fill.kpi-mid { background: var(--lc-warning); }
.kpi-bar-fill.kpi-high { background: var(--lc-tech-green); }

/* Pipeline filters */
.pipeline-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pipeline-filter-group { display: flex; gap: 4px; align-items: center; }
.pipeline-filter-group label { font-size: 12px; color: var(--lc-text-dim); font-weight: 600; margin-right: 4px; }
.pipeline-filter-btn {
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
    border: 1px solid var(--lc-border-light); background: var(--lc-white);
    color: var(--lc-text-dim); cursor: pointer; transition: all 0.15s;
}
.pipeline-filter-btn:hover { border-color: var(--lc-tech-green); color: var(--lc-tech-green); }
.pipeline-filter-btn.active { background: var(--lc-forest); color: var(--lc-white); border-color: var(--lc-forest); }

/* Pipeline Kanban */
.pipeline-kanban {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 12px;
    min-height: 200px;
}
.pipeline-column {
    min-width: 200px;
    flex: 1;
    background: var(--lc-grey);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.pipeline-column.col-lost { opacity: 0.6; }
.pipeline-column-header {
    font-weight: 600;
    font-size: 12px;
    color: var(--lc-text-dim);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pipeline-column-count {
    background: var(--lc-border-light);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--lc-text-dim);
}
.pipeline-column-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 40px; transition: background 0.15s; border-radius: 8px; }
.pipeline-column-cards.drag-over { background: rgba(0,105,78,0.08); outline: 2px dashed var(--lc-tech-green); outline-offset: -2px; }
.pipeline-card.dragging { opacity: 0.4; transform: rotate(2deg); }

/* Pipeline Card */
.pipeline-card {
    background: var(--lc-white);
    border: 1px solid var(--lc-border-light);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.pipeline-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-color: var(--lc-tech-green); }
.pipeline-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.pipeline-card-title { font-size: 13px; font-weight: 600; color: var(--lc-text); line-height: 1.3; }
.pipeline-card-desc { font-size: 11px; color: var(--lc-text-dim); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pipeline-card-meta { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pipeline-card-source { font-size: 10px; color: var(--lc-text-muted); margin-top: 4px; }
.pipeline-card-actions {
    display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap;
}
.pipeline-card-actions .btn { font-size: 10px; padding: 3px 6px; }

/* Segment badges */
.segment-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
    letter-spacing: 0.3px; white-space: nowrap; line-height: 1.4;
}
.segment-A1 { background: #003017; color: #fff; }
.segment-A2 { background: #c8e6d0; color: #003017; }
.segment-B1 { background: #fff3cd; color: #856404; }
.segment-C  { background: #e9ecef; color: #6c757d; }
.segment-none { background: var(--lc-border-light); color: var(--lc-text-muted); }

/* Qualification dots */
.qual-dots { display: flex; gap: 3px; align-items: center; }
.qual-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lc-border-light); border: 1px solid var(--lc-border);
}
.qual-dot.met { background: var(--lc-tech-green); border-color: var(--lc-tech-green); }

/* Pipeline edit modal */
.pipeline-edit-form { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.pipeline-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pipeline-edit-row.full { grid-template-columns: 1fr; }
.pipeline-segment-options { display: flex; gap: 8px; flex-wrap: wrap; }
.pipeline-segment-option {
    flex: 1; min-width: 100px; padding: 10px;
    border: 2px solid var(--lc-border-light); border-radius: 8px;
    cursor: pointer; text-align: center; transition: all 0.15s;
}
.pipeline-segment-option:hover { border-color: var(--lc-tech-green); }
.pipeline-segment-option.selected { border-color: var(--lc-forest); background: var(--lc-mint); }
.pipeline-segment-option .seg-code { font-size: 16px; font-weight: 700; color: var(--lc-forest); }
.pipeline-segment-option .seg-desc { font-size: 10px; color: var(--lc-text-dim); margin-top: 2px; }
.pipeline-score-display {
    display: flex; align-items: center; gap: 8px; padding: 12px;
    background: var(--lc-grey); border-radius: 8px;
}
.pipeline-score-value { font-size: 24px; font-weight: 700; }
.pipeline-score-value.score-3 { color: var(--lc-tech-green); }
.pipeline-score-value.score-2 { color: var(--lc-warning); }
.pipeline-score-value.score-1, .pipeline-score-value.score-0 { color: var(--lc-danger); }
.pipeline-score-label { font-size: 12px; color: var(--lc-text-dim); }

/* Pipeline phase select styling */
.phase-select {
    font-size: 11px; padding: 3px 6px; border-radius: 6px;
    border: 1px solid var(--lc-border-light); background: var(--lc-white);
    cursor: pointer;
}

/* SKU toggle buttons (1-click) */
.sku-toggle { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--lc-border-light); }
.sku-toggle-btn {
    flex: 1; padding: 8px 12px; font-size: 13px; font-weight: 500;
    background: var(--lc-white); color: var(--lc-text-dim); border: none;
    cursor: pointer; transition: all 0.15s; text-align: center;
    border-right: 1px solid var(--lc-border-light);
}
.sku-toggle-btn:last-child { border-right: none; }
.sku-toggle-btn:hover { background: var(--lc-grey); }
.sku-toggle-btn.active { background: var(--lc-forest); color: #fff; font-weight: 600; }

/* Phase stepper (linear progress in edit modal) */
.phase-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    position: relative;
}
.phase-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.phase-step-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--lc-border-light); border: 2px solid var(--lc-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--lc-text-muted);
    transition: all 0.2s;
}
.phase-step.reached .phase-step-dot {
    background: var(--lc-tech-green); border-color: var(--lc-tech-green); color: #fff;
}
.phase-step.active .phase-step-dot {
    background: var(--lc-forest); border-color: var(--lc-forest); color: #fff;
    box-shadow: 0 0 0 3px rgba(0,48,23,0.2);
}
.phase-step.lost-step .phase-step-dot {
    background: var(--lc-danger); border-color: var(--lc-danger); color: #fff;
}
.phase-step-label {
    font-size: 10px; color: var(--lc-text-muted); margin-top: 4px;
    text-align: center; font-weight: 500;
}
.phase-step.active .phase-step-label,
.phase-step.reached .phase-step-label { color: var(--lc-text); font-weight: 600; }
.phase-stepper-line {
    position: absolute;
    top: 14px;
    left: 14%;
    right: 14%;
    height: 3px;
    background: var(--lc-border-light);
    z-index: 0;
}
.phase-stepper-line-fill {
    height: 100%;
    background: var(--lc-tech-green);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Phase pill on card */
.phase-pill {
    font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
.phase-identified { background: #e3e8ef; color: #4a5568; }
.phase-contacted { background: #bee3f8; color: #2b6cb0; }
.phase-pilot { background: #fed7aa; color: #9c4221; }
.phase-won { background: #c8e6d0; color: #003017; }
.phase-lost { background: #fed7d7; color: #9b2c2c; }

/* ---- COMPETITIVE ANALYSIS ---- */
.competitor-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.competitor-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--lc-tech-green);
    text-decoration: none;
    font-weight: 500;
}
.competitor-links a:hover {
    text-decoration: underline;
}
.competitor-strengths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.competitor-strengths-grid ul {
    margin: 4px 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
}
.competitors-table td .form-input {
    padding: 6px 10px;
    font-size: 13px;
}
.competitive-grid {
    grid-template-columns: 1fr;
}
@media (max-width: 600px) {
    .competitor-strengths-grid { grid-template-columns: 1fr; }
}

/* ─── Estadístiques vendes — filtres ────────────────────────────────── */
.vs-filters-card {
    background: #fff;
    border: 1px solid #ebebe2;
    border-radius: 14px;
    padding: 0;
    margin-bottom: 24px;
    overflow: hidden;
}
.vs-filters-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 20px;
    background: linear-gradient(180deg, #fafaf6 0%, #f6f6f0 100%);
    border-bottom: 1px solid #ebebe2;
    flex-wrap: wrap;
}
.vs-filters-summary {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    margin-right: auto;
}
.vs-filters-summary strong {
    color: var(--verde-oscuro);
    font-weight: 700;
}
.vs-filters-meta {
    font-size: 12px;
    color: #3a3a36;
    font-style: italic;
    margin-right: 4px;
}
#vendes-stats-refresh { display: inline-flex; align-items: center; gap: 6px; }
#vendes-stats-refresh .spinner {
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.vs-filters-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
}

.vs-filter-block { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; min-width: 0; }
/* Detail column sits to the right of Període and shows whichever sub-
   selector matches the current mode. Hidden entirely when the mode
   is "Any sencer" (all three panels are [hidden]). */
.vs-filter-detail { flex: 0 1 auto; }
.vs-filter-detail:not(:has(> :not([hidden]))) { display: none; }
.vs-filter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    /* Teal / turquoise — same "verd blavós" already used elsewhere on
       Evolució cartera so labels read as secondary but legible. */
    color: #0e7a6b;
}

/* Segmented control (primary tabs) */
.vs-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    background: #f1f0e8;
    border: 1px solid #e4e3d8;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    align-self: flex-start;
    max-width: 100%;
}
.vs-segmented-compact { padding: 3px; }
.vs-seg {
    background: transparent;
    border: none;
    color: var(--text);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    line-height: 1;
}
.vs-seg-icon { font-size: 14px; line-height: 1; }
.vs-seg-short { display: none; }
.vs-seg:hover:not(.vs-active) { background: rgba(0, 0, 0, 0.04); }
.vs-seg:active { transform: scale(0.97); }
.vs-seg.vs-active {
    background: #fff;
    color: var(--verde-oscuro);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.vs-seg:focus-visible { outline: 2px solid var(--verde-oscuro); outline-offset: 2px; }

/* Chips for quarters / months (secondary) */
/* Subpanels mirror the height of the segmented controls (Any / Període)
   so the whole filter row aligns to a single 44 px baseline. */
.vs-period-subpanel {
    margin-top: 0;
    padding: 4px;
    background: #fafaf6;
    border: 1px solid #ebebe2;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
}
/* Class rule above ties [hidden] on specificity and, being declared later
   in the file, defeats the UA `[hidden] { display: none }` — so all three
   subpanels would render simultaneously despite the `hidden` attribute
   toggled from JS. This override restores the intended toggle. */
.vs-period-subpanel[hidden] { display: none !important; }
.vs-chip-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}
.vs-chip-row-12 { gap: 3px; }
.vs-chip {
    background: #fff;
    border: 1px solid #e4e3d8;
    color: var(--text);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 56px;
    line-height: 1;
}
/* 12-month row: keep everything in a single strip that fits alongside
   Any and Període. Tightened horizontal padding and gap so all twelve
   chips fit within ~550 px. */
.vs-chip-row-12 .vs-chip { min-width: 40px; padding: 0 4px; font-size: 12px; }
.vs-chip:hover:not(.vs-active) { background: #f6f6f0; border-color: #cbcabb; }
.vs-chip.vs-active {
    background: var(--verde-oscuro);
    color: #fff;
    border-color: var(--verde-oscuro);
    box-shadow: 0 2px 6px rgba(7, 82, 54, 0.18);
}
.vs-chip:focus-visible { outline: 2px solid var(--verde-oscuro); outline-offset: 2px; }

/* Custom date range — inputs sit inline with a green arrow between them. */
.vs-range {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}
.vs-date-input {
    border: 1px solid #d4d3c4;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    min-height: 36px;
    box-sizing: border-box;
}
.vs-date-input:focus {
    outline: none;
    border-color: var(--verde-oscuro);
    box-shadow: 0 0 0 3px rgba(7, 82, 54, 0.12);
}
.vs-range-arrow {
    color: var(--verde-oscuro);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    padding: 0 2px;
}
.vs-range-apply { min-height: 36px; padding: 0 16px; }

.vs-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.vs-kpi {
    background: #fff;
    border: 1px solid #ebebe2;
    border-radius: 10px;
    padding: 16px 18px;
}
.vs-kpi-label { font-size: 11.5px; font-weight: 600; color: #3a3a36; text-transform: uppercase; letter-spacing: 0.6px; }
.vs-kpi-value { font-size: 30px; font-weight: 700; color: var(--verde-oscuro); margin-top: 6px; font-family: 'DM Sans', sans-serif; }
.vs-kpi-sub { font-size: 12px; color: #3a3a36; margin-top: 4px; }

.vs-card {
    background: #fff;
    border: 1px solid #ebebe2;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
    /* Keep every widget contained: a very dominant bar or an oversized
       value cell must not stretch the card (and the whole section) into
       horizontal scroll. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.vs-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vs-card-title { font-size: 14px; font-weight: 700; color: var(--verde-oscuro); margin: 0 0 12px 0; }
.vs-card-head .vs-card-title { margin: 0; }
.vs-card-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.vs-card-sub { font-size: 12px; color: #3a3a36; margin-bottom: 14px; }

.vs-bar-list { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
/* Fixed template — the 220 px name column and the 100 px value column
   are hard limits so the track column (minmax(0, 1fr)) can always shrink
   to fit. */
.vs-bar-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 100px; align-items: center; gap: 10px; font-size: 13px; max-width: 100%; }
.vs-bar-row > * { min-width: 0; }
.vs-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.vs-bar-track { height: 18px; background: #f4f4f0; border-radius: 4px; overflow: hidden; }
.vs-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.vs-bar-value { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vs-scatter-svg { width: 100%; height: auto; max-height: 300px; }

/* Line chart: horizontal scroll for wide series (e.g. 52 weeks of an
 * entire year). The wrapper scrolls; the SVG keeps its intrinsic width
 * so the layout never collapses or stretches the labels. */
.vs-line-scroll-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    /* iOS momentum scroll. */
    -webkit-overflow-scrolling: touch;
    /* Slim, themed scrollbar so it doesn't feel like a leftover. */
    scrollbar-width: thin;
    scrollbar-color: #cbcabb #f4f4f0;
    padding-bottom: 4px;
    /* Guard rails: keep the wrap inside its parent card even when the
       SVG child carries a 3000 px intrinsic width. Without min-width: 0
       the wrap will resist shrinking below its content's min-content. */
    min-width: 0;
    max-width: 100%;
}
.vs-line-scroll-wrap::-webkit-scrollbar { height: 8px; }
.vs-line-scroll-wrap::-webkit-scrollbar-track { background: #f4f4f0; }
.vs-line-scroll-wrap::-webkit-scrollbar-thumb {
    background: #cbcabb;
    border-radius: 4px;
}
.vs-line-scroll-wrap::-webkit-scrollbar-thumb:hover { background: var(--verde-oscuro); }
.vs-line-svg { display: block; height: 240px; }

.vs-line-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #1f1f1d;
}
.vs-legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.vs-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* All-clients modal */
.all-clients-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.all-clients-header-text { flex: 1; min-width: 0; }
.all-clients-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}
/* Modal action buttons share a fixed height so INFO / Excel / Imprimir
   line up regardless of their individual label lengths. */
#all-clients-api-info,
#all-clients-export,
#all-clients-print {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 14px;
    line-height: 1;
    font-size: 13px;
}
#all-clients-export:disabled,
#all-clients-print:disabled { opacity: 0.7; cursor: progress; }
.all-clients-controls {
    padding: 12px 20px;
    border-bottom: 1px solid #ebebe2;
    background: #fafaf6;
}
.all-clients-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}
.all-clients-checkbox input { width: 16px; height: 16px; cursor: pointer; }
#all-clients-content { padding: 0; max-height: calc(85vh - 140px); overflow-y: auto; }
.all-clients-summary {
    padding: 12px 20px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid #ebebe2;
    font-size: 13px;
    color: var(--text);
}
.all-clients-summary strong { color: var(--verde-oscuro); }

/* Teal "verd blavós" used for secondary text inside Veure tots so the
   numbers and codes stay readable against the light card background. */
.all-clients-controls,
.all-clients-summary { --ac-teal: #0e7a6b; }
.all-clients-summary { color: #0e7a6b; }
.all-clients-checkbox { color: #0e7a6b; }

/* ABC classification — KPI strip shown at the top of Veure tots and the
   dashboard top-15 sections. Three counters plus a segmented bar whose
   widths are proportional to the per-group client counts. */
.abc-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 1.4fr);
    gap: 18px;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(180deg, #fafdfc 0%, #f3f8f6 100%);
    border-bottom: 1px solid #ebebe2;
}
/* Stacked strip used below the dashboard Top-15 cards: segmented bar at
   the top, legend row below where each item is constrained to its
   segment width so the badge/count/percentage sit centred under their
   slice of the bar. */
.abc-strip {
    max-width: 720px;
    width: 92%;
    margin: 18px auto 6px auto;
}
.abc-bar-strip { height: 14px; }
.abc-strip-legend {
    display: flex;
    width: 100%;
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.2;
    color: #0e7a6b;
}
.abc-strip-legend-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 2px;
    min-width: 0;
    text-align: center;
}
.abc-strip-legend-item .abc-badge {
    width: 20px;
    height: 18px;
    font-size: 10.5px;
    flex-shrink: 0;
}
.abc-strip-count { font-weight: 700; color: var(--verde-oscuro); font-variant-numeric: tabular-nums; }
.abc-strip-pct { font-weight: 600; color: #0e7a6b; }
.abc-counts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.abc-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #0e7a6b;
}
.abc-count .abc-badge { width: 22px; height: 22px; font-size: 11px; }
.abc-count-num { font-weight: 700; color: var(--verde-oscuro); font-size: 16px; font-variant-numeric: tabular-nums; }
.abc-count-pct { color: #0e7a6b; font-size: 11px; }
.abc-bar {
    display: flex;
    height: 14px;
    width: 100%;
    overflow: hidden;
    border: 1px solid #d8e3df;
    background: #f4f4f0;
}
.abc-bar-seg {
    height: 100%;
    transition: width 0.3s ease;
    min-width: 0;
}
.abc-bar-seg-A { background: #2e8b57; }
.abc-bar-seg-B { background: #e0a800; }
.abc-bar-seg-C { background: #8b1d1d; }

/* Traffic-light ABC badge used in Veure tots, top-15 charts, and the
   public API info modal. */
.abc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--font-heading);
    color: #fff;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
    vertical-align: middle;
}
.abc-badge-A { background: #2e8b57; border-color: #226b43; }
.abc-badge-B { background: #e0a800; border-color: #b88800; color: #1f1100; }
.abc-badge-C { background: #8b1d1d; border-color: #6a1414; }
.abc-badge-none {
    background: transparent;
    color: #999;
    border-color: #d8d8d0;
    font-size: 11px;
}

/* Top-15 bar list — slot the badge in front of the label. */
.vs-bar-row { grid-template-columns: 28px 220px minmax(0, 1fr) 100px; }
.vs-bar-row .abc-badge { width: 24px; height: 20px; font-size: 11px; }
@media (max-width: 1200px) {
    .vs-bar-row { grid-template-columns: 26px 160px minmax(0, 1fr) 90px; }
}
@media (max-width: 768px) {
    .vs-bar-row { grid-template-columns: 24px 120px minmax(0, 1fr) 80px; font-size: 12px; }
    .abc-summary { grid-template-columns: 1fr; }
}

/* Veure tots — ABC column inside the cartera table. */
.all-clients-table th.ac-col-abc { text-align: center; }
.all-clients-table td.ac-col-abc {
    text-align: center;
    width: 56px;
    padding-left: 8px;
    padding-right: 8px;
}

/* INFO API CLASSIFIC.CLIENTS button — sits to the left of Excel export
   in the modal header. Background matches the modal fill (white), border
   and label use the LC forest green. */
#all-clients-api-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lc-white);
    color: var(--verde-oscuro);
    border: 1px solid var(--verde-oscuro);
    font-weight: 700;
    letter-spacing: 0.3px;
}
#all-clients-api-info:hover { background: #f3f8f6; }

/* API info modal — endpoint reference. */
.api-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}
.api-info-endpoint {
    border: 1px solid #e4e3d8;
    background: #fafaf6;
    padding: 12px 14px;
}
.api-info-endpoint h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--verde-oscuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.api-info-endpoint code {
    display: block;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 12.5px;
    color: #0e7a6b;
    background: #fff;
    border: 1px solid #e4e3d8;
    padding: 8px 10px;
    word-break: break-all;
    margin-top: 6px;
}
.api-info-endpoint p {
    margin: 0;
    font-size: 13px;
    color: #3a3a36;
}
.api-info-test {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.api-info-test input {
    flex: 1;
    min-width: 180px;
    padding: 8px 10px;
    border: 1px solid #d8d8d0;
    font-size: 13px;
}
.api-info-test button {
    background: var(--verde-oscuro);
    color: #fff;
    border: none;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
}
.api-info-result {
    margin-top: 12px;
    background: #1b2b25;
    color: #c7e4d9;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 12px;
    padding: 12px;
    max-height: 240px;
    overflow: auto;
    white-space: pre;
}

.all-clients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.all-clients-table thead {
    position: sticky;
    top: 0;
    background: #fafaf6;
    z-index: 1;
}
.all-clients-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: #3a3a36;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #e4e3d8;
}
.all-clients-table th.ac-col-rev,
.all-clients-table th.ac-col-vol,
.all-clients-table th.ac-col-lines,
.all-clients-table th.ac-col-num { text-align: right; }
.all-clients-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #f0eee5;
    vertical-align: top;
}
.ac-col-num { color: var(--gris-light); text-align: right; width: 40px; font-variant-numeric: tabular-nums; }
.ac-col-name { font-weight: 500; color: var(--text); }
/* Customer code and revenue percentage were rendered with --gris-light
   (#e5e5e5) and were illegible on the white card. Swap them for a teal
   "verd blavós" that still reads as secondary information. */
.ac-customer-no { color: #0e7a6b; font-weight: 500; font-size: 11px; }
.ac-col-rev, .ac-col-vol, .ac-col-lines { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.ac-col-rev { font-weight: 600; }
.ac-pct { color: #0e7a6b; font-size: 11px; font-weight: 600; margin-left: 6px; }
.ac-client-row.has-products td { border-bottom: none; }

.ac-products-row td { padding: 0 14px 12px 54px; background: #fafaf6; }
.ac-products-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ac-products-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 11px;
    color: #0e7a6b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 700;
    border-bottom: 1px solid #e4e3d8;
}
.ac-products-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #ebebe2;
    color: var(--text);
}
.ac-prod-no { font-family: monospace; font-weight: 600; color: var(--verde-oscuro); width: 120px; }
.ac-prod-desc { color: #3a3a36; }

@media (max-width: 768px) {
    .all-clients-table .ac-col-lines { display: none; }
    .ac-products-row td { padding-left: 20px; }
    .all-clients-summary { gap: 12px; font-size: 12px; }
}

.vs-movers-card { background: #fff; }
.vs-movers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vs-mover-col-title { font-size: 13px; font-weight: 700; margin: 0 0 10px 0; }
.vs-mover-col-title.up { color: var(--verde-intenso, #2a7d5f); }
.vs-mover-col-title.down { color: #c0392b; }
/* Subgrid so every row within a column shares the same "delta" and
   "pct" column widths — that keeps the € sign of every amount and the
   % sign of every percentage at the exact same x-offset, with the 1 px
   .vs-mover-sep sitting between them. */
.vs-mover-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 1px auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
}
.vs-mover-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    padding: 6px 0;
    border-bottom: 1px solid #f0eee5;
    font-size: 13px;
    align-items: center;
}
.vs-mover-row:last-child { border-bottom: none; }
.vs-mover-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-mover-delta, .vs-mover-pct { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vs-mover-delta.up, .vs-mover-pct.up { color: var(--verde-intenso, #2a7d5f); }
.vs-mover-delta.down, .vs-mover-pct.down { color: #c0392b; }
.vs-mover-sep {
    width: 1px;
    height: 60%;
    align-self: center;
    justify-self: center;
    background: #d4d3c4;
}

/* ─── Comparativa per períodes ─────────────────────────────────────── */
/* This card doesn't host a wide chart, so lift the `overflow: hidden`
   inherited from .vs-card so the absolute-positioned autocomplete
   dropdown can escape the card box. */
.comparativa-card { min-width: 0; overflow: visible; }
.comparativa-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.comparativa-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Prod on/off pill — two poles [I  O], with a "Prod" thumb that slides
   between them. When ON the thumb sits on the I side (I hidden, O
   visible); when OFF it sits on the O side (O hidden, I visible).
   Lives inside .comparativa-controls so the gap to the granularity
   segmented is the same 10 px used between the other toggles. Height
   32 px to match every other Comparativa header control. */
.prod-toggle {
    position: relative;
    display: inline-block;
    /* Wider pill so the "Prod" thumb has visible breathing room on
       both sides of the label. */
    width: 100px;
    height: 32px;
    padding: 2px;
    background: #f1f0e8;
    border: 1px solid #e4e3d8;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    vertical-align: middle;
}
.prod-toggle:focus-visible { outline: 2px solid var(--verde-oscuro); outline-offset: 2px; }
.prod-toggle-labels {
    position: absolute;
    inset: 2px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.6px;
    pointer-events: none;
    z-index: 1;
}
.prod-toggle-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: var(--verde-oscuro);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    z-index: 2;
    /* Idle nudge animation — the thumb rocks a few pixels toward the
       opposite pole every three seconds so the affordance ("this is a
       slider") is obvious even before you interact with it. */
    animation: prod-nudge-off 3s ease-in-out infinite;
    transform: translateX(100%); /* default OFF → thumb on the O (right) side */
}
.prod-toggle[aria-pressed="true"] .prod-toggle-thumb {
    animation-name: prod-nudge-on;
    transform: translateX(0);
}
/* When aria-pressed flips, suspend the wobble for a bit so the slide
   from one pole to the other reads as a single smooth motion instead
   of chopping against the keyframe timeline. */
.prod-toggle.prod-toggle-transitioning .prod-toggle-thumb {
    animation: none;
    transition: transform 0.22s ease;
}

/* OFF idle wobble: thumb at translateX(100%), nudges 5 px LEFT (toward
   the I pole) between 82 % and 92 % of the cycle, then returns. */
@keyframes prod-nudge-off {
    0%, 80%, 100% { transform: translateX(100%); }
    88%          { transform: translateX(calc(100% - 5px)); }
}
/* ON idle wobble: thumb at translateX(0), nudges 5 px RIGHT (toward
   the O pole). */
@keyframes prod-nudge-on {
    0%, 80%, 100% { transform: translateX(0); }
    88%          { transform: translateX(5px); }
}
.comparativa-client-wrap {
    position: relative;
    min-width: 180px;
    display: inline-flex;
    align-items: stretch;
}
/* All four Comparativa header controls share a strict 32 px outer
   height (COMPARATIVA_CONTROL_HEIGHT = 32 px) so title / Prod pill /
   granularity toggle / mode toggle / client input sit on the same
   baseline. */
.comparativa-client-input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 12px;
    border: 1px solid #e4e3d8;
    border-radius: 6px;
    background: #fff;
}
.comparativa-client-input:disabled {
    background: #f1f0e8;
    color: #999;
    cursor: not-allowed;
}
.comparativa-client-input:focus {
    outline: none;
    border-color: var(--verde-oscuro);
    box-shadow: 0 0 0 3px rgba(7, 82, 54, 0.12);
}
/* Compact overrides so the granularity + mode segmented pills match
   the 32 px baseline shared by the input and the Prod toggle. Scoped
   to .comparativa-controls / .comparativa-head so the rest of the app
   keeps its default vs-segmented sizing. */
.comparativa-head .vs-segmented { padding: 2px; border-radius: 6px; height: 32px; box-sizing: border-box; }
.comparativa-head .vs-seg {
    min-height: 26px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 4px;
}
.comparativa-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d4d3c4;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 240px;
    overflow-y: auto;
    z-index: 40;
}
.comparativa-dropdown-item {
    padding: 6px 10px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--text);
    border-bottom: 1px solid #f0eee5;
}
.comparativa-dropdown-item:last-child { border-bottom: none; }
.comparativa-dropdown-item:hover { background: #f6f6f0; }
.comparativa-dropdown-item strong { color: var(--verde-oscuro); font-weight: 700; }

.comparativa-grid {
    display: grid;
    /* 40% / 40% / 20% — the delta column earns half the width of a
       period panel because it only holds a single percentage. */
    grid-template-columns: 2fr 2fr 1fr;
    gap: 12px;
    min-width: 0;
}
.comparativa-panel {
    background: #fafaf6;
    border: 1px solid #ebebe2;
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Custom chevron so the "this is a dropdown" affordance is loud and
   consistent across Chrome/Firefox/Safari (native <select> arrows are
   different sizes and colours per browser). */
.comparativa-period-select {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 10px;
    box-sizing: border-box;
    font-size: 13px;
    border: 1px solid #d4d3c4;
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23075236' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
.comparativa-period-select:focus {
    outline: none;
    border-color: var(--verde-oscuro);
    box-shadow: 0 0 0 3px rgba(7, 82, 54, 0.12);
}
/* Panel body: subgrid rows so the € (right edge of the rev column) and
   the tonelage columns share widths across every row inside a panel.
   Fixed grid-auto-rows keeps rows aligned side-by-side across the
   three columns (A / B / Δ) at the same y-offset. */
.comparativa-panel-body {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 1px auto;
    grid-auto-rows: 32px;
    align-items: center;
    row-gap: 0;
    column-gap: 8px;
}
.comparativa-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    border-bottom: 1px solid #f0eee5;
    font-size: 12.5px;
    height: 100%;
}
.comparativa-row:last-child { border-bottom: none; }
.comparativa-cell { min-width: 0; align-self: center; }
.comparativa-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.comparativa-rev, .comparativa-vol {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
}
/* Right-align amounts so the € sign sits at the same x-position on
   every row of the panel (thanks to the shared subgrid column). */
.comparativa-rev { font-weight: 600; text-align: right; }
.comparativa-vol { color: #0e7a6b; text-align: right; }
.comparativa-sep {
    width: 1px;
    height: 60%;
    align-self: center;
    background: #d4d3c4;
    justify-self: center;
}

/* Delta column: single-column subgrid, headed by a fixed 36 px "Δ %"
   label so its rows begin at the same y as the panel selects. */
.comparativa-delta-col { background: #fafaf6; }
.comparativa-delta-head {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--verde-oscuro);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid #d4d3c4;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}
.comparativa-delta-body {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
}
.comparativa-delta {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: center;
    font-size: 12.5px;
    align-self: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0eee5;
}
.comparativa-delta:last-child { border-bottom: none; }
.comparativa-delta.up { color: var(--verde-intenso, #2a7d5f); }
.comparativa-delta.down { color: #c0392b; }

/* Product sub-rows: same 32 px track but with a smaller font, a
   forest-tinted left border on the name column to visually nest the
   product list under its client, and a slightly muted delta so the
   client-level delta still reads as the primary signal. */
.comparativa-row-prod {
    font-size: 11.5px;
    background: #fbfaf5;
}
.comparativa-row-prod .comparativa-name {
    padding-left: 14px;
    color: #3a3a36;
    font-family: 'Menlo', 'Consolas', monospace;
    border-left: 2px solid rgba(7, 82, 54, 0.25);
}
.comparativa-row-prod .comparativa-rev { font-weight: 500; }
.comparativa-row-prod .comparativa-vol { color: rgba(14, 122, 107, 0.75); }
.comparativa-row-client .comparativa-name { font-weight: 600; }
.comparativa-delta-prod { font-size: 11px; font-weight: 600; background: #fbfaf5; }

@media (max-width: 900px) {
    .comparativa-grid { grid-template-columns: 1fr; }
    .comparativa-controls { justify-content: flex-start; }
}

/* Responsive */
@media (max-width: 1200px) {
    .pipeline-kpis { grid-template-columns: repeat(3, 1fr); }
    .vs-bar-row { grid-template-columns: 26px 160px minmax(0, 1fr) 90px; }
}
@media (max-width: 768px) {
    .pipeline-kpis { grid-template-columns: repeat(2, 1fr); }
    .pipeline-kanban { flex-direction: column; }
    .pipeline-column { min-width: auto; }
    .pipeline-edit-row { grid-template-columns: 1fr; }
    .pipeline-segment-options { flex-direction: column; }
    .vs-kpi-row { grid-template-columns: 1fr; }
    .vs-bar-row { grid-template-columns: 24px 120px minmax(0, 1fr) 80px; font-size: 12px; }
    .abc-summary { grid-template-columns: 1fr; }
    .vs-movers-grid { grid-template-columns: 1fr; }
    .vs-filters-head { padding: 12px 14px; }
    .vs-filters-body { padding: 14px; gap: 14px; }
    .vs-seg { padding: 7px 10px; font-size: 12px; min-height: 34px; }
    .vs-seg-full { display: none; }
    .vs-seg-short { display: inline; }
    .vs-chip { padding: 0 10px; font-size: 12px; min-height: 34px; min-width: 48px; }
    .vs-chip-row-12 .vs-chip { min-width: 38px; padding: 0 3px; }
    .vs-filters-body { flex-direction: column; align-items: stretch; }
    .vs-range { flex-wrap: wrap; }
    .vs-range-apply { flex: 1 0 auto; }
}

/* ─── Print report (Imprimir button) ─────────────────────────────────── */
/* Screen: keep the printable clone hidden while it is being prepared. */
#print-report { display: none; }

/* @page needs to be top-level (outside @media print) for some engines;
   the rule only takes effect during printing anyway. Includes generous
   fallbacks per Chrome and Firefox: `margin` alone is not always honoured
   when the user has "Default" margins in the print dialog. */
@page {
    size: A4 portrait;
    margin: 20mm 16mm;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 20mm 16mm;
    }
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.printing > *:not(#print-report) { display: none !important; }
    /* No grayscale filter here — see the note above .print-stats and
       .print-resum below. Both reports bake their greys into the colours
       themselves; a filter would come out blank on paper. */
    body.printing #print-report {
        display: block !important;
        background: #ffffff !important;
        color: #000000 !important;
        /* Print the fills even when the print dialog's "background graphics"
           box is unticked — the treemap, the MP badges and the KPI bars are
           data, not decoration. The -moz- alias covers Firefox before 97. */
        -webkit-print-color-adjust: exact;
        -moz-print-color-adjust: exact;
        print-color-adjust: exact;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box !important;
        font-family: var(--font-main, Arial, sans-serif);
    }
    /* NO CSS FILTER ANYWHERE IN A PRINTED REPORT — not on the wrapper, not
       on a page, not on their contents. Both reports used to be greyed out
       with `filter: grayscale(100%)`, which renders correctly in the print
       *preview* but not on the way out: filtered content must be flattened
       into a raster layer, and Chrome's "Save as PDF" plus most printer
       drivers drop that layer on the floor. The Resum report came out as a
       stack of blank sheets showing nothing but the header rule — the one
       element that happened to sit outside the filtered subtrees. Both
       reports now bake the very same luminance conversion into the colours
       themselves (printGrayscaleTree), so the paper gets plain paint no
       driver can skip. */
    body.printing #print-report,
    body.printing #print-report * {
        -webkit-filter: none !important;
        filter: none !important;
    }

    /* ── Resum report ──
       The Resum report paginates itself: printResumReport() emits explicit
       .print-page boxes sized to the printable area, so the wrapper must not
       add padding of its own on top of the @page margins (that would shift
       every page down by 8 mm and spill onto a blank one). */
    body.printing #print-report.print-resum { padding: 0 !important; }
    /* Belt-and-braces: nothing inside a page may create its own break. */
    body.printing #print-report.print-resum .print-page-body > * {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Modals and other overlays never leak into the print output. */
    .modal-overlay { display: none !important; }
}

/* ─── Estadístiques vendes report (Imprimir · PDF A4) ─────────────────────
   These rules deliberately live OUTSIDE @media print, exactly like the
   .print-resum ones below. printSalesStatsReport() stages the report
   off-screen at the printed column width before it prints: the treemap
   measures its container there, and printGrayscaleTree() reads every
   computed colour there to bake the greys in. Neither would see the printed
   layout if this styling only existed while printing. The report still never
   shows on screen — `#print-report { display: none }` takes care of that. */
.print-stats {
    box-sizing: border-box;
    background: #ffffff;
    color: #000000;
    font-family: var(--font-main, Arial, sans-serif);
    /* Belt-and-braces margin: even if the user has "None" or a very small
       custom margin in the print dialog, this internal padding keeps
       horizontal breathing room on every page (element-level horizontal
       padding is honoured on every printed page) plus a safe top/bottom band
       on the first and last page.
       NOTE: for intermediate pages the per-page top margin comes exclusively
       from @page. Pure CSS has no `:first-in-page` selector, so we can't add
       padding-top only to elements that actually land at a page break — a
       blanket rule would also add the same 8 mm gap between adjacent cards on
       the same page, making the layout feel airy. If a user forces "None" in
       the print dialog they'll see intermediate pages hug the top edge; the
       trade-off is intentional to keep same-page spacing tight. */
    padding: 8mm;
}

.print-report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12mm;
    margin-bottom: 4mm;
}
.print-report-logo img {
    /* Was 16 mm; reduced by 40% per design. */
    height: 9.6mm;
    width: auto;
    display: block;
}
.print-report-meta {
    text-align: right;
    font-size: 9pt;
    line-height: 1.35;
    color: #000;
}
.print-report-date { font-weight: 600; }
.print-report-title { font-weight: 700; margin-top: 2px; font-size: 10pt; }
.print-report-period { color: #444; margin-top: 1px; }
.print-report-sep {
    border: none;
    border-top: 1px solid #000;
    margin: 0 0 6mm 0;
    width: 100%;
}

/* Body: strict white, no scrolling artefacts, and no orphaned chart
   pieces across page breaks. */
.print-report-body,
.print-report-body * {
    background-image: none !important;
    box-shadow: none !important;
}
.print-report-body {
    background: #ffffff !important;
    color: #000000 !important;
}
.print-report-body .vs-card,
.print-report-body .vs-kpi,
.print-report-body .vs-kpi-row,
.print-report-body .abc-strip,
.print-report-body .vs-movers-card,
.print-report-body .treemap-canvas,
.print-report-body .vs-scatter-svg,
.print-report-body .vs-line-scroll-wrap {
    page-break-inside: avoid;
    break-inside: avoid;
}
.print-report-body .vs-card {
    background: #ffffff !important;
    border: 1px solid #999 !important;
    margin-bottom: 5mm;
    padding: 4mm 5mm;
}
.print-report-body .vs-kpi {
    background: #ffffff !important;
    border: 1px solid #999 !important;
}
.print-report-body .vs-kpi-value,
.print-report-body .vs-card-title,
.print-report-body .vs-filters-summary strong { color: #000 !important; }

/* Line + scatter SVGs scale to page width; wrapper stops horizontal
   scroll so nothing is hidden. */
.print-report-body .vs-line-scroll-wrap {
    overflow: visible !important;
    padding-bottom: 0 !important;
}
.print-report-body .vs-line-svg,
.print-report-body .vs-scatter-svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
/* Treemap is absolutely positioned by pixel; clip anything that
   overflows the page column. */
.print-report-body .treemap-canvas {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ── Cartera block: full client list (with optional products) ── */
/* The whole block is allowed to break freely — only individual rows
   have to stay together per the spec. */
.print-report-body .print-cartera-block {
    page-break-inside: auto;
    break-inside: auto;
    margin-bottom: 6mm;
}
.print-report-body .print-cartera-block .abc-strip {
    margin: 0 auto 4mm auto;
}
.print-cartera-summary {
    display: flex;
    gap: 8mm;
    flex-wrap: wrap;
    font-size: 9pt;
    margin-bottom: 3mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid #000;
}
.print-cartera-summary strong { color: #000; }
.print-report-body .print-cartera-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
}
.print-report-body .print-cartera-table thead {
    display: table-header-group; /* repeat header on each page */
}
.print-report-body .print-cartera-table thead th {
    background: #fff !important;
    border-bottom: 1px solid #000;
    text-align: left;
    padding: 4px 6px;
    font-size: 8.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #000;
}
.print-report-body .print-cartera-table th.ac-col-rev,
.print-report-body .print-cartera-table th.ac-col-vol,
.print-report-body .print-cartera-table th.ac-col-lines { text-align: right; }
.print-report-body .print-cartera-table th.ac-col-abc { text-align: center; }
.print-report-body .print-cartera-table td {
    padding: 3px 6px;
    border-bottom: 1px solid #ccc;
    vertical-align: top;
    color: #000;
}
/* Individual client rows never split. */
.print-report-body .ac-client-row {
    page-break-inside: avoid;
    break-inside: avoid;
}
/* A client row with attached products may sit apart from its products
   block: the client stays together, and the products table breaks
   between rows freely. */
.print-report-body .ac-products-row {
    page-break-inside: auto;
    break-inside: auto;
    background: #fff !important;
}
.print-report-body .ac-products-row > td {
    padding: 0 0 6px 24px;
    background: #fff !important;
    border-bottom: 1px solid #ccc;
}
.print-report-body .ac-products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8.5pt;
}
.print-report-body .ac-products-table thead th {
    text-align: left;
    padding: 3px 6px;
    border-bottom: 1px solid #999;
    color: #000;
    font-weight: 700;
}
.print-report-body .ac-products-table td {
    padding: 2px 6px;
    border-bottom: 1px dotted #bbb;
}
/* No product-row is allowed to split, but the table itself can span
   pages — sibling product rows may end up on different pages. */
.print-report-body .ac-products-table tr {
    page-break-inside: avoid;
    break-inside: avoid;
}
.print-report-body .ac-customer-no { color: #444 !important; }
.print-report-body .ac-pct { color: #444 !important; }
.print-cartera-empty {
    padding: 6mm;
    text-align: center;
    color: #444;
    font-style: italic;
}


/* ─── Resum report (Imprimir · informe comercial A4) ──────────────────────
   These rules deliberately live OUTSIDE @media print. printResumReport()
   measures every block in an off-screen `.print-stage.print-resum` before
   deciding where the page breaks go, and those measurements are only
   trustworthy if the stage lays out exactly like the printed page. The
   report itself stays invisible on screen via `#print-report { display:none }`
   above, and the stage is parked at left:-10000px. */
.print-resum {
    background: #ffffff;
    color: #000000;
    font-family: var(--font-main, Arial, sans-serif);
    font-size: 9pt;
    line-height: 1.35;
}
/* NOTE: no blanket `background-image: none` here. Several fills in these
   blocks are linear-gradients carrying real data — the KPI progress bars
   most of all — and stripping them leaves an empty track with the
   percentage floating over nothing. Decorative gradients just come out
   grey, which is harmless. */
.print-resum * { box-shadow: none !important; }

/* Progress bars: a flat dark fill beats a greyscaled gradient on paper —
   the filled portion has to be unmistakable against the track. */
.print-resum .kpi-progress-wrap { margin-top: 6px; padding-top: 12px; }
.print-resum .kpi-progress-container { height: 14px; background: #e4e4e4 !important; }
.print-resum .kpi-progress-bar {
    background: #333 !important;
    color: #fff !important;
    font-size: 7.5pt;
    min-width: 30px;
}
.print-resum .kpi-progress-marker { background: #000 !important; opacity: 1; }
.print-resum .kpi-progress-marker-label { font-size: 7pt; color: #333 !important; }

/* Page box: exactly the printable area of A4 minus @page margins. The
   height is fixed (not min-height) so the footer sits at the same place on
   every page and content can never bleed into the next one. */
.print-resum .print-page {
    position: relative;
    width: 100%;
    height: var(--print-page-h);
    overflow: hidden;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
}
.print-resum .print-page:last-child {
    page-break-after: auto;
    break-after: auto;
}
/* Letterhead: logo left, INFORME COMERCIAL right, on the same line, then a
   full-width rule. Repeated on every page. */
.print-resum .print-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12mm;
    height: 12mm;
}
.print-resum .print-report-logo img {
    height: 9.6mm;
    width: auto;
    display: block;
}
.print-resum .print-report-title-right {
    font-family: var(--font-heading), Arial, sans-serif;
    font-size: 12pt;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #000;
    white-space: nowrap;
}
.print-resum .print-report-sep {
    border: none;
    border-top: 1px solid #000;
    margin: 0 0 4mm 0;
    width: 100%;
}
.print-resum .print-page-body {
    height: var(--print-body-h);
    overflow: hidden;
}
.print-resum .print-page-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8mm;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid #ddd;
    font-size: 8pt;
    color: #333;
}
/* Blocks taller than a whole page are scaled instead of clipped. */
.print-resum .print-scaled { transform-origin: top left; }

/* Headings */
.print-resum .print-intro-meta { font-size: 8.5pt; color: #333; margin-bottom: 3mm; }
.print-resum .print-section-title {
    font-family: var(--font-heading), Arial, sans-serif;
    font-size: 12pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #000;
    margin: 3mm 0 2.5mm;
    padding-bottom: 1.2mm;
    border-bottom: 1.2pt solid #000;
}
.print-resum .print-subsection-title { font-size: 10pt; font-weight: 700; margin: 2.5mm 0 2mm; color: #000; }
.print-resum .print-division-head { margin-bottom: 2mm; }

/* Division rows */
.print-resum .resum-row { margin-bottom: 3mm; }
.print-resum .resum-row-head {
    font-size: 9pt;
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 1mm;
    margin-bottom: 2mm;
}
.print-resum .resum-row-mp { background: #000 !important; color: #fff !important; font-size: 7.5pt; }

/* Cards and grids re-flowed for the 178 mm column */
.print-resum .kpi-grid,
.print-resum .kpi-grid-dashboard { grid-template-columns: repeat(2, 1fr); gap: 2.5mm; }
.print-resum .kpi-card {
    background: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 0;
    padding: 2mm 2.5mm;
}
.print-resum .kpi-label { font-size: 7.5pt; }
.print-resum .kpi-value { font-size: 12pt; }
.print-resum .kpi-change,
.print-resum .text-sm { font-size: 7.5pt; }
.print-resum .card-grid { grid-template-columns: repeat(2, 1fr); gap: 3mm; }
.print-resum .card {
    background: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 0;
    padding: 2.5mm 3mm;
}
.print-resum .card-title { font-size: 9pt; }
.print-resum .card-footer { display: none; }
.print-resum .mini-chart-wrapper { height: 58px; }
/* The block already has a section heading; the panel's own title would just
   repeat it once per division. */
.print-resum .concentration-panel > .section-title,
#resum-concentracio .concentration-panel > .section-title { display: none; }
.print-resum .concentration-panel,
#resum-concentracio .concentration-panel { margin-top: 0 !important; }
.print-resum .vs-kpi-row { grid-template-columns: repeat(3, 1fr); gap: 2.5mm; margin-bottom: 3mm; }
.print-resum .vs-kpi {
    background: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 0;
    padding: 2mm 2.5mm;
}
.print-resum .vs-kpi-label { font-size: 7.5pt; }
.print-resum .vs-kpi-value { font-size: 12pt; color: #000 !important; }
.print-resum .vs-kpi-sub { font-size: 7pt; }
.print-resum .vs-card {
    background: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 0;
    margin-bottom: 3mm;
    padding: 2.5mm 3mm;
}
.print-resum .vs-card-title { font-size: 10pt; color: #000 !important; }
/* Four columns for four cells — badge, name, track, value. A three-column
   template silently drops the value onto a second grid row and leaves the
   badge stranded in an oversized first column, which is what breaks
   one-row-per-client. Widths are sized for the 178 mm page: long names
   ellipsize rather than wrap. */
.print-resum .vs-bar-row {
    grid-template-columns: 18px 230px minmax(0, 1fr) 52px;
    gap: 6px;
    font-size: 8pt;
}
.print-resum .vs-bar-row .abc-badge { width: 16px; height: 13px; font-size: 7pt; line-height: 13px; }
.print-resum .vs-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print-resum .vs-bar-value { white-space: nowrap; }
.print-resum .vs-bar-track { height: 12px; }
.print-resum .vs-mover-list { font-size: 8pt; }
/* IMPORTANT: every responsive grid that can appear in the report must be
   pinned here, even when the pinned value equals the desktop default.
   When printing, `@media (max-width: …)` is evaluated against the page box
   (178 mm ≈ 673 px), so the mobile rules fire — while printResumReport()
   measures its blocks against the window width, where they don't. Anything
   left unpinned measures short and overflows the printed page. These
   selectors are (0,2,0), so they win over the media-query rules regardless
   of viewport. */
.print-resum .vs-movers-grid { grid-template-columns: repeat(2, 1fr); }

/* Charts. The evolution SVG is authored wider than the page; letting it
   scale to 100% with an auto height keeps its aspect ratio intact, and the
   scroll wrapper must not clip it. */
.print-resum .vs-line-scroll-wrap {
    overflow: visible !important;
    padding-bottom: 0 !important;
}
.print-resum .vs-line-svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}
.print-resum .treemap-canvas {
    max-width: 100%;
    overflow: hidden;
}
.print-resum .mini-line-chart { width: 100%; }

/* ============================================================
   Welcome / intro video overlay (first visit per browser)
   ============================================================ */
.intro-video-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 48, 23, 0.92);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.intro-video-box {
    width: min(960px, 100%);
    background: var(--lc-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.intro-video-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--verde-oscuro);
    color: #fff;
}
.intro-video-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
}
.intro-video-sub {
    margin: 2px 0 0;
    font-size: 13px;
    opacity: 0.8;
}
.intro-video-skip {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.intro-video-skip:hover {
    background: rgba(255, 255, 255, 0.25);
}
.intro-video-frame {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}
.intro-video-frame iframe,
.intro-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.intro-video-frame video::cue {
    background: rgba(0, 48, 23, 0.85);
    color: #fff;
    font-size: 0.9em;
}
@media (max-width: 600px) {
    .intro-video-overlay { padding: 12px; }
    .intro-video-header { flex-direction: row; padding: 12px 14px; }
    .intro-video-title { font-size: 15px; }
    .intro-video-sub { font-size: 12px; }
}