/* =========================================
   IRIS (Intel·ligència, Recerca, Informació i Seguiment de clients)
   LC CLOUD Design System + paleta IRIS (petroli, turquesa, blau marí, lila)
   ========================================= */

: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);
    --rojo: var(--lc-danger);
    --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;
    /* Part fixa de dalt: barra de navegació (--navbar-row) i, a sota, la
       barra de títol (--titlebar-height: la meitat de 56px + un 20%, 33,6px
       arrodonits a 34px). --navbar-height és el total: és el que fan servir
       els marges, el menú lateral i els elements enganxats (aquí, a mat.css
       i a xxss.css). */
    --navbar-row: 56px;
    --titlebar-height: 34px;
    /* App instal·lada a l'iPhone (barra d'estat translúcida): la barra
       superior baixa fins sota l'hora i la bateria. A la resta, 0. */
    --safe-top: env(safe-area-inset-top, 0px);
    --navbar-height: calc(var(--navbar-row) + var(--titlebar-height) + var(--safe-top));
    /* Color de cada divisió: el mateix dels gràfics (DIVISION_CHART_COLORS i
       VENDES_DIV_COLORS a index.php, DIV_COLORS a assets/client-file.js). */
    --div-mp2: #14284b;
    --div-mp3: #0f4c5c;
    --div-mp4: #13786f;
    --div-mp5: #1aa6a6;
    --div-lcpack: #00694e;
    /* Paleta IRIS: verds blavosos, turqueses, petroli i un toc de blau marí;
       el lila només és a la marca. Els verds LC es mantenen. */
    --iris-petrol: #0f4c5c;
    --iris-petrol-deep: #0b3a46;
    --iris-teal: #13786f;
    --iris-turquoise: #1aa6a6;
    --iris-turquoise-dark: #0e7c86;
    /* Recordatoris (icona, text i rellotge actiu): groc fosc, 5:1 sobre blanc. */
    --rem-ink: #8a6a00;
    --iris-aqua-pale: #e3f4f2;
    --iris-navy: #14284b;
    --iris-lilac: #a58bd8;
    --iris-lilac-pale: #efe9fa;
    /* Gris neutre una mica blavós per als fons de controls (abans #f1f0e8). */
    --iris-mist: #eff3f6;
    /* Fons del menú lateral: verd blavós grisenc gairebé blanc (abans sorra). */
    --iris-sidebar: #f3f7f7;
    --iris-mist-border: #dce3e9;
    /* Taules (vegeu «TAULES» més avall; materials/assets/mat.css fa servir
       els mateixos tokens). Una taula més densa només redefineix --tbl-font-size,
       --tbl-pad-y i --tbl-pad-x. */
    --tbl-font-size: 13px;
    --tbl-pad-y: 7px;
    --tbl-pad-x: 12px;
    --tbl-text: var(--lc-text);
    --tbl-head-bg: #f1f5f6;
    --tbl-head-fg: var(--iris-petrol-deep);
    --tbl-head-rule: var(--iris-petrol);
    --tbl-rule: #e3e9ec;
    --tbl-hover: #f3f8f8;
    --tbl-group-bg: #f6f9f9;
    --tbl-group-open-bg: #e8f4f2;
    --tbl-detail-bg: #f8fbfb;
    --tbl-detail-fg: var(--iris-teal);
    --tbl-detail-rule: #c9d8dc;
    --tbl-selected-bg: var(--iris-aqua-pale);
    /* Alçada de tot el que va dins d'una fila: botons, desplegables, camps
       i etiquetes d'estat. */
    --tbl-ctl-h: 30px;
}

/* 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;
}

.page-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Capçalera de secció sense títol (el títol és a la barra de títol): només
   els botons d'acció, a la dreta. */
.page-header-actions-only {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.page-header-actions-only .page-header-actions { flex: 0 1 auto; justify-content: flex-end; }

/* Diàleg dels informes (Imprimir a una divisió, dades desactualitzades). */
.report-dialog { max-width: 560px; }
.report-dialog-body { font-size: 14px; line-height: 1.55; color: var(--lc-text, #2b2b2b); }
.report-dialog-body p { margin: 0 0 12px; }
.report-dialog-body ul { margin: 0 0 12px; padding-left: 20px; }
.report-dialog-body li { margin-bottom: 4px; }
.report-dialog-body .report-dialog-hint { font-size: 13px; color: var(--lc-text-dim); }
.report-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.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: 2px solid var(--iris-petrol-deep);
    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(--iris-teal);
}
.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;
    /* Vora transparent: els botons plens (primary, danger) fan la mateixa
       alçada que els outline/secondary del costat, que porten 1px de vora. */
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.btn:hover { opacity: 0.85; }
.btn-primary {
    background: var(--iris-petrol);
    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;
    padding-top: var(--safe-top);
    color: var(--lc-white);
    z-index: 200;
}
/* El fons de la barra va en una capa a part perquè s'hi pugui obrir un forat
   a la mida de la pestanya de la divisió activa (.has-tab-hole, vegeu el
   selector de divisió): així la pestanya és vidre glaçat com la barra de
   títol, amb el contingut de la pàgina desenfocat a sota. */
.top-navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--iris-petrol-deep);
    background: linear-gradient(90deg, var(--lc-forest) 0%, var(--iris-petrol-deep) 42%, var(--iris-navy) 100%);
}
.top-navbar.has-tab-hole::before {
    -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) var(--hole-x) var(--hole-y) / var(--hole-w) var(--hole-h) no-repeat;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) var(--hole-x) var(--hole-y) / var(--hole-w) var(--hole-h) no-repeat;
    mask-composite: exclude;
}
.navbar-row-top {
    height: var(--navbar-row);
    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: 32px;
    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;
    align-self: stretch;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    min-width: 0;
}
.navbar-division-selector {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.navbar-div-group {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 2px;
}
.navbar-div-group + .navbar-div-group {
    margin-left: 8px;
    padding-left: 8px;
}
/* Separador entre grups, més curt que els botons (que arriben a baix). */
.navbar-div-group + .navbar-div-group::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 8px;
    width: 1px;
    background: rgba(255,255,255,0.15);
}
/* Selector de divisió. L'activa és una pestanya del color de la barra de
   títol, enganxada a sota (el fons és el mateix pastel que la barra fa sobre
   blanc: el color de la divisió al 17,6% = 42% × 42%), així sembla que la
   barra en surt. La resta queden apagades. */
.navbar-div-btn {
    --tb-color: var(--iris-petrol-deep);
    --tb-ink: var(--iris-petrol-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 6px;
    padding: 4px 12px 6px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.navbar-div-btn .div-icon { display: flex; align-items: center; justify-content: center; height: 24px; transition: opacity 0.15s; }
/* Divisions: il·lustració del producte de cada línia, amb colors propis
   (irisDivisionIcon(), includes/ui_icons.php). Resum: icona de línia del color
   del text del botó. Les que no són l'activa queden apagades. */
.navbar-div-btn .div-icon svg { width: 24px; height: 24px; }
.navbar-div-btn[data-division="resum"] .div-icon svg { width: 20px; height: 20px; }
.navbar-div-btn:not(.active) .div-icon { opacity: 0.7; }
.navbar-div-btn:hover {
    color: var(--lc-white);
    background: rgba(255,255,255,0.08);
}
.navbar-div-btn:not(.active):hover .div-icon { opacity: 1; }
.navbar-div-btn.active {
    color: var(--tb-ink);
    background: color-mix(in srgb, var(--tb-color) 17.6%, #fff);
    font-weight: 700;
    cursor: default;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar-div-btn.active { background: color-mix(in srgb, var(--tb-color) 14%, #fff); }
}
/* Amb el forat obert al fons de la barra (sidebar.php ho fa si el navegador
   ho suporta), la pestanya activa és el mateix vidre que la barra de títol. */
.top-navbar.has-tab-hole .navbar-div-btn.active {
    background: color-mix(in srgb, color-mix(in srgb, var(--tb-color) 42%, #fff) 42%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
}
.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); }

/* ---- BARRA DE TÍTOL ----
   Sota la barra de navegació (34px d'alt), com la «page header bar» de
   Tramuntana (assets/style.css, .page-header-wrap): vidre glaçat d'un color
   pastel (42% d'opacitat, saturate + blur 14px), filet inferior suau i el
   títol en la tinta del color, amb el text secundari al costat. A Tramuntana
   és sempre menta; aquí el color depèn de l'apartat (data-tone, que posa
   includes/sidebar.php): cada divisió el seu (MP2–MP5, LC PACK) i, a les
   pàgines sense divisió, el del grup del menú. El títol comença on comença
   el logo (20px; en mòbil, després del botó del menú). */
.iris-titlebar {
    --tb-color: var(--iris-petrol-deep);
    --tb-ink: var(--iris-petrol-deep);
    position: fixed;
    top: calc(var(--navbar-row) + var(--safe-top));
    left: 0;
    right: 0;
    z-index: 190;
    height: var(--titlebar-height);
    /* Tres columnes: el títol a l'esquerra i la màquina i la divisió al mig
       de la barra. Les dues dels costats són iguals perquè el centre quedi
       centrat; si el títol no hi cap, s'eixampla i el centre es desplaça. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    min-width: 0;
    padding: 0 20px;
    background: color-mix(in srgb, color-mix(in srgb, var(--tb-color) 42%, #fff) 42%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--tb-color) 18%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-family: var(--font-main);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .iris-titlebar { background: color-mix(in srgb, var(--tb-color) 14%, #fff); }
}
/* Divisions: el color dels gràfics (--div-*). Els botons del selector de
   divisió de la barra de navegació fan servir els mateixos (data-division). */
.pc-div-badge[data-division="kraft"], .iris-titlebar[data-tone="kraft"],     .navbar-div-btn[data-division="kraft"]     { --tb-color: var(--div-mp2);    --tb-ink: var(--div-mp2); }
.pc-div-badge[data-division="tisu"], .iris-titlebar[data-tone="tisu"],      .navbar-div-btn[data-division="tisu"]      { --tb-color: var(--div-mp3);    --tb-ink: var(--div-mp3); }
.pc-div-badge[data-division="afh"], .iris-titlebar[data-tone="afh"],       .navbar-div-btn[data-division="afh"]       { --tb-color: var(--div-mp4);    --tb-ink: #0e5a53; }
/* El turquesa de MP5 és massa clar per a text: la tinta és més fosca. */
.pc-div-badge[data-division="ecommerce"], .iris-titlebar[data-tone="ecommerce"], .navbar-div-btn[data-division="ecommerce"] { --tb-color: var(--div-mp5);    --tb-ink: #0b6870; }
.pc-div-badge[data-division="bolsas"], .iris-titlebar[data-tone="bolsas"],    .navbar-div-btn[data-division="bolsas"]    { --tb-color: var(--div-lcpack); --tb-ink: #00513c; }
/* Apartats sense divisió: Resum i la resta de Cartera actual (Fitxa client,
   Agents) amb el petroli d'IRIS (valor per defecte), Materials comercials en
   verd LC, Creativitats XXSS en el lila d'IRIS i Administració en gris. */
.iris-titlebar[data-tone="mat"]   { --tb-color: var(--lc-forest);  --tb-ink: var(--lc-forest); }
.iris-titlebar[data-tone="xxss"]  { --tb-color: var(--iris-lilac); --tb-ink: #4b3a86; }
.iris-titlebar[data-tone="admin"] { --tb-color: #6b7780;           --tb-ink: #2f3a40; }
.iris-titlebar-title {
    margin: 0;
    padding: 0;
    justify-self: start;
    /* Sencer: la columna del títol s'eixampla si cal (i el centre es desplaça). */
    min-width: max-content;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--tb-ink);
}
.iris-titlebar-div {
    flex-shrink: 0;
    display: inline-block;
    padding: 4px 7px;
    background: var(--tb-ink);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
}
.iris-titlebar-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.iris-titlebar-meta {
    /* Si no hi cap tot, s'escurça aquest text, i no el títol. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1;
    color: var(--lc-text);
}
.iris-titlebar [hidden] { display: none; }
/* Centrat vertical òptic: cada text es retalla a l'alçada de les majúscules
   (de la línia de majúscules a la base), de manera que align-items: center
   centra el que es veu i no la caixa de la font, que deixa més aire a sota.
   La pastilla queda amb 4px de marge a dalt i a baix de les lletres; el títol
   i el text secundari, amb un marge simètric perquè l'overflow (punts
   suspensius) no talli accents ni descendents. */
@supports (text-box: trim-both cap alphabetic) {
    .iris-titlebar-title,
    .iris-titlebar-div,
    .iris-titlebar-meta { text-box: trim-both cap alphabetic; }
    .iris-titlebar-title,
    .iris-titlebar-meta { padding-block: 6px; }
}
@supports not (text-box: trim-both cap alphabetic) {
    .iris-titlebar-div { height: 18px; padding-top: 0; padding-bottom: 0; line-height: 18px; }
}
@media print { .iris-titlebar { display: none; } }

/* ---- LAYOUT ---- */
.app-container {
    display: flex;
    padding-top: var(--navbar-height);
    min-height: 100vh;
}
.sidebar {
    width: 240px;
    background: var(--iris-sidebar);
    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-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(--iris-petrol);
    background: #e8f1f0;
}
.sidebar-link.active {
    color: var(--iris-petrol-deep);
    background: var(--iris-aqua-pale);
    border-left-color: var(--iris-turquoise-dark);
    font-weight: 500;
}
.sidebar-link svg { width: 18px; height: 18px; color: var(--iris-teal); opacity: 0.7; flex-shrink: 0; }
.sidebar-link.active svg { color: var(--iris-turquoise-dark); opacity: 1; }

/* 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; }

/* ---- VISTA DIVIDIDA (Comandes entrants) ----
   body.io-split s'aplica només quan: preferència activada + secció
   Comandes i cartera + divisió amb comandes entrants + no mode Resum
   (ho gestiona updateIoSplitMode a assets/incoming-orders.js). */

/* Caixa del toggle, mateixa alçada (~28px) que el botó Sincronitzar
   (.btn-sm.btn-secondary: font 12px + padding 6px 12px + vora 1px). */
.io-split-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--lc-text-dim);
    border: 1px solid var(--lc-border);
    border-radius: 6px;
    padding: 6px 12px;
    background: var(--lc-white);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.io-split-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.io-switch {
    position: relative;
    width: 26px;
    height: 14px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s;
    flex: 0 0 auto;
}
.io-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}
.io-split-toggle input:checked + .io-switch { background: var(--lc-tech-green); }
.io-split-toggle input:checked + .io-switch::after { transform: translateX(12px); }

/* Mode dividit: només escriptori — el calaix mòbil (≤767px) no es toca. */
@media (min-width: 768px) {
    body.io-split .io-pdf-link { display: none; }

    /* Sidebar en carril d'icones; :hover l'expandeix per sobre del contingut
       (position:fixed + z-index:100 ja garanteixen l'overlay). Les etiquetes
       dels .sidebar-link són nodes de text nus: es retallen amb nowrap +
       overflow, no es poden amagar amb display:none. */
    body.io-split .sidebar {
        width: 56px;
        overflow-x: hidden;
        transition: width 0.15s ease;
    }
    body.io-split .sidebar:hover {
        width: 240px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }
    body.io-split .sidebar-link { white-space: nowrap; }
    body.io-split .sidebar-section-title { display: none; }
    body.io-split .sidebar:hover .sidebar-section-title { display: block; }
    body.io-split .main-content { margin-left: 56px; }

    /* Partició 40/60 del contenidor de Comandes entrants: PDF | taula. */
    body.io-split .io-split-wrap {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }
    body.io-split .io-split-pdf {
        flex: 0 0 40%;
        max-width: 40%;
        position: sticky;
        top: calc(var(--navbar-height) + 16px);
    }
    body.io-split .io-split-table {
        flex: 1 1 60%;
        min-width: 0; /* la .table-container interna pot fer scroll */
    }
    .io-pdf-frame {
        display: block;
        width: 100%;
        height: calc(100vh - var(--navbar-height) - 32px);
        border: 1px solid var(--lc-border-light);
        border-radius: 6px;
        background: #fff;
    }
    .io-split-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - var(--navbar-height) - 32px);
        border: 1px dashed var(--lc-border-light);
        border-radius: 6px;
        color: var(--lc-text-muted);
        font-size: 13px;
        text-align: center;
        padding: 20px;
    }
}
@media (max-width: 767px) {
    /* En mòbil la classe pot quedar posada però no té efecte: ni panell PDF
       (fallback si es redimensiona) ni amagar la icona PDF (única via
       d'obrir el PDF en mòbil). */
    body.io-split .io-split-pdf { display: none; }
}

/* 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: 2px solid var(--iris-petrol-deep);
}
.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;
}
/* Separador sota els títols: 2 px petroli fosc a tot IRIS (el mateix que els
   blocs d'Estadíst. i cartera, la configuració, el Resum i Materials). */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--iris-petrol-deep);
}
.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-title > svg { color: var(--iris-teal); flex-shrink: 0; }
.section-badge {
    background: var(--iris-aqua-pale);
    color: var(--iris-petrol-deep);
    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); }

/* ---- KPIs de cartera comercial (Resum i comandes; una fila per divisió) ----
   Totes les targetes tenen la mateixa anatomia en cinc files (etiqueta ·
   xifra · context · barra · peu; les buides no ocupen) i, amb subgrid, cada
   fila queda alineada entre les targetes. El color només diu l'estat: filet
   lateral i barra. La xifra sempre en tinta fosca. */
.kpi-grid-dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.kpi-card.kpi-dash {
    --tone: #cfd8dd; --tone-strong: #8796a1;
    display: flex; flex-direction: column; gap: 8px; min-width: 0;
    padding: 16px 18px 14px; text-align: left; background: #fff;
    border: 1px solid var(--lc-border-light); border-left: 3px solid var(--tone);
}
@supports (grid-template-rows: subgrid) {
    .kpi-grid-dashboard > .kpi-card.kpi-dash { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 8px; }
}
.kpi-card.kpi-dash.kpi-tone--good { --tone: #2f9e64; --tone-strong: #23885a; }
.kpi-card.kpi-dash.kpi-tone--warn { --tone: #e3a21a; --tone-strong: #d38c0b; }
.kpi-card.kpi-dash.kpi-tone--bad  { --tone: #c0392b; --tone-strong: #c0392b; }

.kpi-dash .kpi-eyebrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.kpi-dash .kpi-label {
    margin: 0; min-width: 0; font-size: 11px; font-weight: 600; line-height: 1.35;
    letter-spacing: 0.08em; text-transform: uppercase; color: #5b6670;
}

.kpi-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; min-width: 0; color: var(--iris-petrol-deep); }
.kpi-num { font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; }
/* La unitat i la projecció (entre parèntesis), a la mateixa mida. */
.kpi-unit, .kpi-proj { font-size: 14px; font-weight: 600; color: #5b6670; }
.kpi-proj { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-hero .trend-arrow { margin-left: 2px; }
.trend-arrow.trend-up { color: #23885a; }
.trend-arrow.trend-down { color: var(--lc-danger); }
.trend-arrow.trend-neutral { color: var(--lc-text-muted); }

.kpi-context { font-size: 13px; line-height: 1.45; color: #3d4852; }
.kpi-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: #0d6b3a; }
.kpi-delta.down { color: #a32020; }

/* Barra alta dels KPIs: els valors a dins (realitzat al final de la part
   plena, esperat al costat de la marca negra, objectiu al final). */
.kpi-vbar { position: relative; height: 22px; background: #e8edf0; overflow: visible; font-variant-numeric: tabular-nums; }
.kpi-vbar-fill { height: 100%; background: var(--tone-strong); transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.kpi-vbar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #1f2933; }
.kpi-vbar-lab { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none; }
.kpi-vbar-lab[hidden] { display: none; }
.kpi-vbar-f { color: var(--tone-strong); }
.kpi-vbar-f.is-in { color: #fff; }
.kpi-vbar-m { color: #1f2933; font-weight: 600; }
.kpi-vbar-m.is-on-fill { color: #fff; }
.kpi-vbar.is-tight .kpi-vbar-lab { font-size: 10px; letter-spacing: -0.01em; }
.kpi-vbar-e { right: 6px; color: #5b6670; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .kpi-vbar-fill { transition: none; } }

/* Barra fina (Configuració): realitzat sobre objectiu. */
.kpi-meter-track { position: relative; height: 8px; background: #e8edf0; }
.kpi-meter-fill { height: 100%; background: var(--tone-strong); transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.kpi-meter-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #1f2933; }
.kpi-meter-caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: #3d4852; font-variant-numeric: tabular-nums; }
.kpi-meter-exp { color: #6b7280; white-space: nowrap; }

.kpi-foot { padding-top: 8px; border-top: 1px solid #edf0f2; font-size: 12px; line-height: 1.4; color: #6b7280; }
.kpi-foot:empty { padding-top: 0; border-top: 0; }

@media (prefers-reduced-motion: reduce) { .kpi-meter-fill { transition: none; } }
@media (max-width: 1100px) {
    .kpi-grid-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .kpi-grid-dashboard { grid-template-columns: 1fr; }
    .kpi-num { font-size: 22px; }
}

/* ---- 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); }

/* ---- Famílies de producte: fila clicable i detall desplegat ----
   Clic a una família (index.php, toggleFamilyDetail) → fila de detall amb
   capçalera (període, € / quantitat), 4 xifres, barres apilades per client i
   taula de clients. Els colors dels clients són una paleta categòrica
   validada (ordre fix); el text sempre en tinta, mai en el color de la sèrie. */
.fam-interactive tr.fam-row { cursor: pointer; }
.fam-amt-short { display: none; }
.fam-interactive tr.fam-row:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: -2px; }
.fam-chevron {
    display: inline-flex; vertical-align: -1px; margin-right: 6px;
    color: var(--lc-text-muted);
    transition: transform .2s cubic-bezier(.25, 1, .5, 1), color .15s;
}
tr.fam-row:hover .fam-chevron { color: var(--iris-turquoise-dark); }
tr.fam-row.fam-open .fam-chevron { transform: rotate(90deg); color: var(--iris-turquoise-dark); }
table.data-table tbody tr.fam-row.fam-open > td { background: var(--iris-aqua-pale); border-bottom-color: transparent; }
table.data-table tbody tr.fam-detail-row > td,
table.data-table tbody tr.fam-detail-row:hover > td { background: var(--iris-aqua-pale); padding: 0 8px 10px; }
.fam-detail {
    background: #fff;
    border: 1px solid var(--iris-mist-border);
    border-radius: 12px;
    padding: 14px 16px 12px;
    text-align: left;
    white-space: normal;
}
.fam-detail .loading { padding: 18px 0; }
.fam-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.fam-detail-title { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--iris-petrol-deep); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.fam-detail-code { font-family: monospace; font-size: 14px; }
.fam-detail-sub { font-family: var(--font-main); font-size: 12px; font-weight: 400; color: var(--lc-text-muted); }
.fam-detail-ctrls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fam-detail-ctrls .vs-segmented { padding: 2px; border-radius: 8px; align-self: center; }
.fam-detail-ctrls .vs-seg { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.fam-detail-close {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--iris-mist-border);
    background: #fff; color: var(--lc-text-dim); font-size: 18px; line-height: 1; cursor: pointer;
}
.fam-detail-close:hover { background: var(--iris-mist); color: var(--iris-petrol-deep); }
.fam-detail-empty { padding: 8px 0 4px; }

.fam-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.fam-kpi { border: 1px solid var(--iris-mist-border); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.fam-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lc-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam-kpi-value { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--iris-petrol-deep); line-height: 1.25; white-space: nowrap; }
.fam-kpi-foot { font-size: 11.5px; color: var(--lc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.fam-pill-new { background: #e3f4ea; color: #006300; }
.fam-pill-lost { background: #fbe9e7; color: #a5281b; }

/* Gràfic de barres apilades (HTML): eix Y a l'esquerra (--famc-gutter),
   una columna per mes; files de mesos i comandes alineades a sota. */
.famc { --famc-gutter: 58px; --famc-h: 210px; margin-bottom: 14px; }
.famc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: 12px; color: var(--lc-text); }
.famc-leg { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.famc-sw { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.famc-sw-none { background: transparent; }
.famc-plot { position: relative; height: var(--famc-h); margin-left: var(--famc-gutter); }
.famc-grid { position: absolute; inset: 0; pointer-events: none; }
.famc-gl { position: absolute; left: 0; right: 0; border-top: 1px solid #e8ecee; }
.famc-gl:first-child { border-top-color: #c3c9cc; }
.famc-gl span {
    position: absolute; right: calc(100% + 8px); top: -7px;
    font-size: 10.5px; color: var(--lc-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.famc-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.famc-col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; cursor: default; outline: none; }
.famc-col::before { content: ''; position: absolute; inset: 0 1px; border-radius: 6px; background: transparent; transition: background .12s; }
.famc-col.is-hover::before, .famc-col:focus-visible::before { background: rgba(15, 76, 92, .06); }
.famc-bar {
    position: relative; width: 62%; max-width: 38px; min-width: 6px;
    display: flex; flex-direction: column-reverse;
    border-radius: 4px 4px 0 0; overflow: hidden;
}
.famc-seg { box-sizing: border-box; min-height: 0; transition: opacity .15s; }
.famc-seg + .famc-seg { border-bottom: 2px solid #fff; }
.famc-col.is-partial .famc-seg { opacity: .55; }
.famc.is-hl .famc-seg { opacity: .22; }
.famc.is-hl[data-hl="0"] .famc-seg[data-fam-s="0"],
.famc.is-hl[data-hl="1"] .famc-seg[data-fam-s="1"],
.famc.is-hl[data-hl="2"] .famc-seg[data-fam-s="2"],
.famc.is-hl[data-hl="3"] .famc-seg[data-fam-s="3"],
.famc.is-hl[data-hl="4"] .famc-seg[data-fam-s="4"],
.famc.is-hl[data-hl="5"] .famc-seg[data-fam-s="5"] { opacity: 1; }
.famc-total {
    position: absolute; left: 0; right: 0; text-align: center;
    font-size: 10.5px; font-weight: 600; color: var(--lc-text-dim); white-space: nowrap;
    font-variant-numeric: tabular-nums; pointer-events: none;
}
.famc-x {
    display: grid; grid-template-columns: var(--famc-gutter) repeat(var(--n), minmax(0, 1fr));
    font-size: 10.5px; color: var(--lc-text-dim); text-align: center; margin-top: 6px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.famc-x > span { overflow: hidden; }
.famc-x .is-partial { font-style: italic; }
.famc-orders { margin-top: 3px; color: var(--lc-text); font-weight: 600; }
.famc-row-label { text-align: left; font-weight: 600; color: var(--lc-text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; }
.famc-lbl-short { display: none; }
.famc-note { margin-top: 6px; font-size: 11px; color: var(--lc-text-muted); }
.famc-tip {
    position: absolute; z-index: 5; min-width: 190px; max-width: 260px;
    background: #fff; border: 1px solid var(--iris-mist-border); border-radius: 10px;
    box-shadow: 0 6px 20px rgba(11, 58, 70, .14); padding: 8px 10px; font-size: 12px; pointer-events: none;
}
.famc-tip-head { font-weight: 700; color: var(--iris-petrol-deep); margin-bottom: 2px; }
.famc-tip-total { color: var(--lc-text-dim); margin-bottom: 6px; }
.famc-tip-total strong { color: var(--lc-text); }
.famc-tip-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 6px; line-height: 1.6; }
.famc-tip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.famc-tip-val { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Taula de clients de la família (dins de la taula de famílies: es neutralitzen
   les regles de .family-trend-table que hi arriben per herència). */
.fam-clients-wrap { overflow-x: auto; }
table.data-table.fam-clients { table-layout: auto; font-size: 12.5px; }
table.family-trend-table table.fam-clients thead th { text-align: left; }
table.family-trend-table table.fam-clients thead th.num { text-align: right; }
table.fam-clients td.fam-cl-name { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam-cl-label { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fam-cl-label .client-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
table.fam-clients .fam-cl-spark { width: 132px; }
table.fam-clients tr.fam-cl-total > td { font-weight: 700; background: var(--iris-mist); }
.fam-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; width: 120px; }
.fam-spark-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.fam-spark-bar > span { display: block; width: 100%; border-radius: 2px 2px 0 0; }
.fam-spark-bar.is-partial > span { opacity: .45; }
.fam-more { margin-top: 8px; }

@media (max-width: 900px) {
    .fam-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    table.data-table tbody tr.fam-detail-row > td { padding: 0 4px 8px; }
    .fam-detail { padding: 12px 10px 10px; border-radius: 10px; }
    .fam-detail-title { font-size: 14px; }
    .famc { --famc-gutter: 44px; --famc-h: 180px; }
    .famc-gl span { font-size: 9.5px; right: calc(100% + 5px); }
    .famc-x { font-size: 9px; line-height: 1.2; }
    .famc-yy { display: block; color: var(--lc-text-muted); }
    .famc-total { font-size: 9px; }
    .famc-row-label { font-size: 8.5px; letter-spacing: 0; align-self: center; }
    .famc-lbl-long { display: none; }
    .famc-lbl-short { display: inline; }
    .famc-bar { width: 72%; }
    /* Amb 12 o 18 mesos no hi caben totes les etiquetes: una de cada dues. */
    .famc[data-n="12"] .famc-total, .famc[data-n="18"] .famc-total { display: none; }
    .famc[data-n="18"] .famc-x:not(.famc-orders) > span:nth-child(even) { visibility: hidden; }
    .famc[data-n="18"] .famc-orders { font-size: 8px; }
    .fam-kpi-value { font-size: 17px; }
    table.fam-clients .fam-cl-share, table.fam-clients .fam-cl-orders { display: none; }
    table.data-table.fam-clients { font-size: 12px; }
    table.data-table.fam-clients th, table.data-table.fam-clients td { padding-left: 4px; padding-right: 4px; }
    table.fam-clients td.fam-cl-name { max-width: none; white-space: normal; overflow: visible; line-height: 1.3; }
    table.fam-clients td.fam-cl-name .client-link { white-space: normal; text-align: left; }
    table.fam-clients .fam-cl-spark { width: 64px; }
    .fam-spark { width: 60px; gap: 1px; }

    /* Taula de famílies al mòbil: sense el nom (només el codi), xifres sense
       partir-se i la tendència dins la columna. */
    .family-trend-table { font-size: 12px; }
    table.family-trend-table th, table.family-trend-table > tbody > tr > td { padding-left: 4px; padding-right: 4px; }
    .family-trend-table > tbody > tr > td { white-space: nowrap; }
    .family-trend-table .col-family { width: 22%; }
    .family-trend-table .col-trend { width: 24%; padding-right: 4px; }
    .family-trend-wrap { grid-template-columns: 30px 40px; gap: 4px; }
    .family-trend-table .famhist { width: 30px; height: 22px; gap: 2px; }
    .family-trend-table .family-trend-pct { font-size: 10.5px; }
    .family-trend-table .fam-sub { display: none; }
    .family-trend-table .fam-amt-long { display: none; }
    .family-trend-table .fam-amt-short { display: inline; }
}

/* ---- TAULES ----
   Un sol estil per a totes les taules de pantalla d'IRIS i de Materials
   comercials (materials/assets/mat.css hi aplica els mateixos tokens):
   - Capçalera: fons clar, versaleta petroli i filet petroli de 2 px.
   - Files: compactes, filet fi i realçat en passar-hi el ratolí. Les xifres,
     amb .num (a la dreta i tabulars).
   - Grups (famílies, carpetes): fons suau i negreta; els fills, sagnats.
   - Detall dins d'una fila (línies d'una comanda, productes d'un client):
     lletra més petita, capçalera sense fons i filet fi.
   Els PDF i els informes impresos tenen el seu propi disseny (vegeu
   .print-report-body i .print-client-file). */
.table-container { overflow-x: auto; }
table.data-table,
table.all-clients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tbl-font-size);
    color: var(--tbl-text);
}
table.data-table th,
table.all-clients-table th {
    text-align: left;
    vertical-align: bottom;
    padding: calc(var(--tbl-pad-y) + 1px) var(--tbl-pad-x);
    font-size: .85em;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tbl-head-fg);
    background: var(--tbl-head-bg);
    border-bottom: 2px solid var(--tbl-head-rule);
}
table.data-table td,
table.all-clients-table td {
    padding: var(--tbl-pad-y) var(--tbl-pad-x);
    border-bottom: 1px solid var(--tbl-rule);
    vertical-align: middle;
}
table.data-table tbody tr:hover > td,
table.all-clients-table tbody tr:hover > td { background: var(--tbl-hover); }
table.data-table .num,
table.all-clients-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Fila que conté una taula de detall: fons de detall, sense realçat. */
table.data-table tbody tr.io-lines-row > td,
table.all-clients-table tbody tr.ac-products-row > td { background: var(--tbl-detail-bg); }

/* Taules de detall (nivell 3). */
.io-lines-table,
.ac-products-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.io-lines-table th,
.ac-products-table th { text-align: left; }
.io-lines-table th,
.ac-products-table th,
.cf-order-detail table.data-table th {
    padding: 5px 10px;
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tbl-detail-fg);
    background: transparent;
    border-bottom: 1px solid var(--tbl-detail-rule);
}
.io-lines-table td,
.ac-products-table td { padding: 5px 10px; border-bottom: 1px solid var(--tbl-rule); }
.cf-order-detail table.data-table { font-size: 12px; }
.cf-order-detail table.data-table td { padding: 5px 10px; }

/* Controls dins de les files: botons, desplegables, camps i etiquetes fan
   tots --tbl-ctl-h d'alt perquè la fila quedi alineada. Les etiquetes que
   acompanyen un text (codis, percentatges) segueixen l'alçada del text. */
table.data-table td .btn,
table.data-table td .form-input,
table.data-table td .form-select {
    height: var(--tbl-ctl-h);
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}
table.data-table td .form-input,
table.data-table td .form-select { padding-left: 10px; font-size: 13px; }
table.data-table td .btn-icon { width: var(--tbl-ctl-h); }
.cf-docs-table .cf-doc-kind,
.cf-docs-table .cf-lang {
    display: inline-flex;
    align-items: center;
    height: var(--tbl-ctl-h);
    box-sizing: border-box;
}
.cf-docs-table .cf-doc-kind { padding: 0 8px; }

/* Comandes entrants: moltes columnes i vista dividida, més densa. */
table.incoming-orders-table { --tbl-font-size: 12.5px; --tbl-pad-y: 5px; --tbl-pad-x: 8px; --tbl-ctl-h: 26px; }

/* ---- 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: 2px solid var(--iris-petrol-deep);
}
/* Interruptor mestre d'una funcionalitat dins d'un bloc de Configuració:
   activa/desactiva la funció per a tots els usuaris i atenua la resta de
   camps del bloc quan està apagat. */
.master-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--lc-grey);
    border: 1px solid var(--lc-border-light);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.master-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    flex: 1 1 320px;
}
.master-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.master-switch {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s;
    flex: 0 0 auto;
    margin-top: 1px;
}
.master-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}
.master-toggle input:checked + .master-switch { background: var(--lc-tech-green); }
.master-toggle input:checked + .master-switch::after { transform: translateX(18px); }
.master-toggle input:focus-visible + .master-switch { outline: 2px solid var(--verde-oscuro); outline-offset: 2px; }
.master-toggle-text { display: flex; flex-direction: column; gap: 4px; }
.master-toggle-text strong { font-size: 14px; color: var(--lc-forest); }
/* Camps del bloc quan l'interruptor mestre està apagat: visibles però
   inoperants (l'API tampoc els fa servir). */
.master-off { opacity: 0.45; pointer-events: none; }

.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;
}


/* ---- 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(--iris-turquoise-dark);
    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(--iris-turquoise-dark);
}

/* Configuració: les pestanyes de Materials comercials i Creativitats XXSS són
   a materials/?action=config, que pinta la mateixa barra (config_tabs.php)
   sobre el panell de Materials, alineats com a config.php (marges del
   .page-content i amplada màxima del contingut). */
.config-tabs-bar .tab { display: inline-flex; align-items: center; line-height: 1.3; text-decoration: none; }
.mat-config-tabs { max-width: 1336px; margin: 32px 32px 0; }
@media (max-width: 1024px) { .mat-config-tabs { margin: 24px 24px 0; } }
@media (max-width: 767px) { .mat-config-tabs { margin: 12px 12px 0; } }

/* Pàgines i seccions que valen per a totes les línies de producte (Fitxa
   client, Materials comercials, configuració): sense selector MP2…LC PACK. */
body.iris-no-divisions .navbar-center { display: none; }

@media (max-width: 767px) {
    /* Sense la fila de divisions, la barra superior torna a una sola fila. */
    body.iris-no-divisions {
        --navbar-row: 54px;
        --navbar-height: calc(var(--navbar-row) + var(--titlebar-height) + var(--safe-top));
    }
}

/* ---- 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-row: 54px;
        --navbar-height: calc(var(--navbar-row) + var(--titlebar-height) + var(--safe-top));
        --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; }

    /* Una sola fila: menú, IRIS, divisió (desplegable) i «+». El logotip de
       LC Paper i la salutació no hi caben (Tancar sessió és al menú). */
    .navbar-row-top { flex-wrap: nowrap; height: var(--navbar-row); padding: 0 10px 0 8px; gap: 6px; }
    .navbar-left { gap: 8px; height: var(--navbar-row); }
    #navbar-logo, .navbar-brand-sep { display: none; }
    .navbar-center { flex: 1 1 auto; justify-content: flex-end; align-self: center; overflow: visible; }
    .navbar-division-selector { display: none; }

    .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; }
    /* El logo va després del botó del menú: 14px de marge + 32px de botó +
       12px d'espai. Al Resum no hi ha botó de menú. */
    /* En mòbil no hi ha lloc per centrar: tot seguit, com abans. */
    .iris-titlebar { display: flex; padding: 0 14px 0 48px; gap: 8px; }
    .iris-titlebar-center { flex: 0 1 auto; gap: 8px; }
    /* El títol no cedeix espai (s'escurça el text secundari); només en
       pantalles molt estretes es talla, deixant lloc a la pastilla. */
    .iris-titlebar-title { min-width: 0; max-width: calc(100% - 64px); }
    body.resum-mode .iris-titlebar { padding-left: 14px; }
    .iris-titlebar-title { font-size: 15px; }
    .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; }
    :root { --tbl-font-size: 12px; --tbl-pad-y: 6px; --tbl-pad-x: 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; }
    .section-header > div { width: 100%; justify-content: flex-end; }
}

/* ---- PROSPECT CARDS ---- */
.prospect-card a { color: var(--iris-teal); text-decoration: none; }
.prospect-card a:hover { color: var(--iris-petrol-deep); text-decoration: underline; }
.prospect-card .card-footer .btn { line-height: 1; }
.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-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;
}

/* ---- 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; }
/* Mosaics d'OpenStreetMap en grisos: el mapa queda discret i els punts verds destaquen. */
#bbdd-map .leaflet-tile-pane { filter: grayscale(1) brightness(1.04); }
.prospect-map-error { display: flex; align-items: center; justify-content: center; height: 100%;
    background: var(--iris-mist); color: var(--lc-text-muted); font-size: 13px; }
.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 TABLE ---- */
.compare-table th, .compare-table td { min-width: 140px; }
.compare-table td:first-child { min-width: 100px; white-space: nowrap; }

/* ---- 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; }
/* Botons d'actualitzar: icona sempre visible, abans del text; gira mentre
   dura la càrrega (refreshWithSpin a index.php). */
.btn-refresh .refresh-icon { display: inline-block; order: -1; width: 14px; height: 14px; flex-shrink: 0; }
.btn-refresh.is-spinning { cursor: progress; }
.btn-refresh.is-spinning .refresh-icon { animation: lc-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .btn-refresh.is-spinning .refresh-icon { animation: none; opacity: .45; }
}

/* ---- 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(--iris-turquoise-dark); 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(4, 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); }
/* Barres de progrés alineades: l'objectiu i la barra van al peu de la targeta
   encara que l'etiqueta d'alguna ocupi dues línies. */
.pipeline-kpis .kpi-card { display: flex; flex-direction: column; }
/* En flex els marges no es fusionen: així els espais queden com abans. */
.pipeline-kpis .kpi-label { margin-top: 0; }
.pipeline-kpis .kpi-target { margin-top: auto; }
/* Semàfor segons el moment de l'any (renderKPIs): vermell, taronja, verd. */
.pk-kpi { border-top: 3px solid var(--lc-border-light); }
.pk-kpi--low { border-top-color: #b3261e; }
.pk-kpi--low .kpi-value { color: #b3261e; }
.pk-kpi--low .kpi-bar-fill { background: #b3261e; }
.pk-kpi--mid { border-top-color: #c66a00; }
.pk-kpi--mid .kpi-value { color: #a4500c; }
.pk-kpi--mid .kpi-bar-fill { background: #e08a1e; }
.pk-kpi--ok { border-top-color: #17694a; }
.pk-kpi--ok .kpi-value { color: #17694a; }
.pk-kpi--ok .kpi-bar-fill { background: #17694a; }
.pk-kpi .kpi-bar { position: relative; overflow: visible; }
.pk-kpi-mark { position: absolute; top: -3px; width: 2px; height: 10px; margin-left: -1px; background: var(--iris-petrol-deep, #0b3a46); }
.pk-kpi-due { color: var(--lc-text-muted); }
/* Targeta baixa: la xifra a l'esquerra i el títol a la dreta en dues línies,
   amb la xifra de la mateixa alçada que el títol. */
.pipeline-kpis .pk-kpi { padding: 10px 14px 12px; }
.pk-kpi-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pipeline-kpis .pk-kpi .kpi-value { font-size: 38px; line-height: 1; margin: 0; flex-shrink: 0; letter-spacing: -.5px; }
.pipeline-kpis .pk-kpi .kpi-label { margin: 0; font-size: 11px; line-height: 1.35; letter-spacing: .4px; text-align: left; }
.pipeline-kpis .pk-kpi .kpi-label span { display: block; white-space: nowrap; }
.pipeline-kpis .pk-kpi .kpi-target { margin-top: 6px; }
.pipeline-kpis .pk-kpi .kpi-bar { margin-top: 6px; }
@media (max-width: 600px) {
    .pipeline-kpis .pk-kpi { padding: 8px 10px 10px; }
    .pk-kpi-head { gap: 6px; }
    .pipeline-kpis .pk-kpi .kpi-value { font-size: 26px; }
    .pipeline-kpis .pk-kpi .kpi-label { font-size: 9.5px; letter-spacing: .2px; }
    .pipeline-kpis .pk-kpi .kpi-target { font-size: 10.5px; }
    /* Filtres: el toggle de responsable en una sola fila i la persona a sota. */
    .pipeline-filter-group { flex-wrap: wrap; row-gap: 6px; }
    .pipeline-owner-seg { flex-wrap: nowrap; }
    .pipeline-owner-seg .vs-seg { padding: 5px 9px; font-size: 12px; white-space: nowrap; }
    .pipeline-owner-seg + .phase-select { margin-left: 0; }
}

/* 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, .pipeline-filter-label { font-size: 12px; color: var(--lc-text-dim); font-weight: 600; margin-right: 4px; }
.pipeline-owner-seg .vs-seg { min-height: 30px; padding: 5px 11px; font-size: 12.5px; }
.pipeline-owner-seg + .phase-select { margin-left: 6px; }
/* Desplegables de Rellevància i Persona: la mateixa alçada que el toggle. */
.pipeline-filters .phase-select { height: 38px; box-sizing: border-box; padding: 0 8px 0 10px; font-size: 12.5px; border-radius: 10px; border-color: var(--iris-mist-border); }
.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-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); }

/* Targeta del seguiment: és una .prospect-card en compacte (vegeu més avall). */
.pipeline-card { cursor: pointer; }
/* Possibles clients (BBDD i seguiment). El color de la targeta diu d'on ve:
   afegit per algú (alta manual, bessó d'un client) o automàtic (import de la
   BBDD, cerca web). L'origen complet és al rètol emergent de la targeta. */
.pk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 12px; color: var(--lc-text-dim); }
.pk-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.pk-legend strong { color: var(--lc-text); }
.pk-swatch { width: 16px; height: 14px; }
.pk-swatch.pk-human { border: 2px solid var(--pk-human-bd); background: var(--pk-human-bg); }
.pk-swatch.pk-auto { border: 1px dashed var(--pk-auto-bd); background: var(--pk-auto-bg); }
.pk-legend-order { margin-left: auto; color: var(--lc-text-muted); font-size: 11.5px; }

:root {
    /* Origen d'un possible client, a tota la vora de la targeta:
       afegit per algú = vora sòlida turquesa i fons turquesa pàl·lid;
       automàtic = vora discontínua grisa i fons blanc. */
    --pk-human-bd: var(--iris-turquoise-dark); --pk-human-bg: #eaf7f5;
    --pk-auto-bd: #a3aeb4; --pk-auto-bg: #fff;
}
.prospect-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--pk-auto-bg);
    border: 1px dashed var(--pk-auto-bd);
    cursor: pointer;
    transition: box-shadow .15s;
}
.prospect-card.pk-human { border: 2px solid var(--pk-human-bd); background: var(--pk-human-bg); padding: 13px 15px; }
.prospect-card:hover { box-shadow: 0 3px 12px rgba(0, 40, 50, .10); }
/* Nom a l'esquerra; divisió i paperera a la dreta, a la mateixa fila (alineats
   amb la primera línia del nom si aquest en fa dues). */
.prospect-card .pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.prospect-card .pc-head-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-top: -3px; }
.prospect-card .card-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--iris-petrol-deep); }
.pc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--lc-text); }
.pc-meta-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.pc-meta-item svg, .pc-web svg { flex-shrink: 0; color: var(--iris-teal); }
.prospect-card a.pc-web { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%; font-size: 13px; color: var(--iris-teal); overflow-wrap: anywhere; }
.prospect-card a.pc-web:hover { color: var(--iris-petrol-deep); }
/* Assignació (vegeu renderBBDD): «Assignat a <persona>» o «Assignar a…»;
   tots dos obren el menú de persones. */
.pc-assign {
    display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; max-width: 100%;
    min-height: 30px; padding: 0 12px; font-family: var(--font-main); font-size: 12px; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.pc-assign svg { flex-shrink: 0; color: var(--iris-teal); }
.pc-assign span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-assign.is-on { background: var(--iris-aqua-pale); border: 1px solid #c5e4e0; color: var(--iris-petrol-deep); }
.pc-assign.is-on:hover { border-color: var(--iris-teal); }
.pc-assign.is-off { background: #fff; border: 1px dashed #9fb7bd; color: var(--iris-petrol); font-weight: 600; }
.pc-assign.is-off svg { color: #c99a2e; }
.pc-assign.is-off:hover { background: #fff8e6; border-style: solid; border-color: #e0a526; color: var(--iris-petrol-deep); }
/* «Assignar a…» crida l'atenció: fons groc que entra i surt cada 2 s. */
.pc-assign.is-off { animation: pcAssignPulse 2s ease-in-out infinite; }
.pc-assign.is-off:hover { animation: none; }
@keyframes pcAssignPulse {
    0%, 100% { background-color: #fff; border-color: #9fb7bd; }
    50% { background-color: #fff8d6; border-color: #ecd27a; }
}
@media (prefers-reduced-motion: reduce) { .pc-assign.is-off { animation: none; background: #fff6cc; } }
.pc-assign-menu {
    position: absolute; z-index: 1200; min-width: 200px; max-height: 320px; overflow-y: auto; padding: 4px 0;
    background: #fff; border: 1px solid var(--lc-border-light); box-shadow: 0 12px 28px -12px rgba(11, 58, 70, .45);
}
.pc-assign-menu-head { padding: 6px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-text-dim); }
.pc-assign-menu button { display: block; width: 100%; padding: 8px 12px; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; color: var(--lc-text); cursor: pointer; }
.pc-assign-menu button:hover, .pc-assign-menu button:focus-visible { background: var(--iris-mist, #eef4f5); outline: none; }
.pc-assign-menu button[aria-checked="true"] { font-weight: 700; color: var(--iris-petrol-deep); }
.pc-assign-menu button[aria-checked="true"]::after { content: " ✓"; color: var(--iris-teal); }
.pc-assign-menu .pc-assign-menu-x { margin-top: 4px; border-top: 1px solid var(--lc-border-light); color: #b3261e; }
.prospect-card .pc-actions .btn svg { flex-shrink: 0; }
/* Regist. activitat · LinkedIn · Veure detalls sempre en una sola fila,
   ocupant-la tota; en targetes estretes, només la icona (el nom és al title). */
.prospect-card { container-type: inline-size; }
.prospect-card .pc-actions .btn {
    flex: 1 1 auto; min-width: 0; justify-content: center; gap: 4px;
    padding: 6px 6px; font-size: 11px; letter-spacing: .02em;
}
.prospect-card .pc-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prospect-card .pc-actions .btn { position: relative; }
/* Els tres botons amb el mateix aspecte (contorn turquesa, com «Regist. activitat»). */
.prospect-card .pc-actions .btn { background: #fff; color: var(--iris-turquoise-dark); border: 1px solid var(--iris-turquoise-dark); }
.prospect-card .pc-actions .btn:hover { background: #e6f4f3; color: var(--iris-turquoise-dark); }
/* «Detalls» destacat (BBDD i seguiment): l'acció principal de la targeta. */
.prospect-card .pc-actions .btn.pc-details-btn { background: var(--iris-turquoise-dark); color: #fff; border-color: var(--iris-turquoise-dark); }
.prospect-card .pc-actions .btn.pc-details-btn:hover { background: var(--iris-petrol-deep, #0b3a46); border-color: var(--iris-petrol-deep, #0b3a46); color: #fff; }
/* Si no hi caben les tres etiquetes, LinkedIn queda només amb la icona «in». */
@container (max-width: 289px) {
    .prospect-card .pc-actions .pc-li-btn .pc-btn-label { display: none; }
    .prospect-card .pc-actions .pc-li-btn { flex: 0 0 auto; padding: 6px 9px; }
}
@container (max-width: 199px) {
    .prospect-card .pc-btn-label { display: none; }
}
/* Targetes estretes (mòbil): els noms curts («Activitat», «Detalls»). */
@container (max-width: 419px) {
    .prospect-card .pc-lbl-x { display: none; }
}
/* La pastilla de la divisió, de la mateixa alçada que la paperera. */
.prospect-card .pc-head .pc-div-badge { height: 26px; padding: 0 9px; font-size: 11px; }
.prospect-card .pc-actions { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--lc-border-light); display: flex; gap: 5px; flex-wrap: nowrap; }
/* Pastilla de la divisió (MP2…LC PACK), en el seu color (assignació a la
   barra de títol). */
.pc-div-badge {
    display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
    background: var(--tb-ink); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap;
}

/* 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: var(--iris-mist);
    border: 1px solid var(--iris-mist-border);
    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 var(--iris-mist-border);
    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-money-short { display: none; }

.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; }

/* 324px = els 300px d'abans més la llegenda (viewBox 820 × 302). */
.vs-scatter-svg { width: 100%; height: auto; max-height: 324px; }

/* 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 var(--iris-mist-border);
    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 var(--iris-mist-border);
    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;
}

/* Taula de clients: l'estil és el de «TAULES»; aquí només la capçalera fixa. */
.all-clients-table thead {
    position: sticky;
    top: 0;
    background: var(--tbl-head-bg);
    z-index: 1;
}
.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; }
.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; white-space: nowrap; 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; }

.all-clients-table .ac-products-row > td { padding: 0 var(--tbl-pad-x) 10px 54px; }
.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; }
    .all-clients-table .ac-products-row > td { padding-left: 20px; }
    .all-clients-summary { gap: 12px; font-size: 12px; }
}

.vs-movers-card { background: #fff; }
.vs-movers-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.vs-movers-head .vs-card-title { margin-bottom: 12px; }
.vs-movers-mode { font-weight: 500; color: var(--iris-turquoise-dark); }
.vs-movers-toggle { font-size: 12px; }
.vs-mover-col-sub { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--lc-text-muted); margin-top: 2px; }
.vs-mover-total { margin-top: 8px; font-size: 11.5px; color: var(--lc-text-dim); }
.vs-mover-total strong { color: var(--lc-text); }
/* El commutador no s'imprimeix: el títol ja diu si és "pes relatiu". */
.print-report-body .vs-movers-toggle, #print-report .vs-movers-toggle, .print-page .vs-movers-toggle { display: none !important; }
@media print { .vs-movers-toggle { display: none !important; } }
.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: var(--iris-mist);
    border: 1px solid var(--iris-mist-border);
    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 var(--iris-mist-border);
    border-radius: 6px;
    background: #fff;
}
.comparativa-client-input:disabled {
    background: var(--iris-mist);
    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;
}
/* "Δ % vs <període base>": a long month label is cut with an ellipsis
   (the full text is in the title). */
.comparativa-delta-head { padding: 0 8px; min-width: 0; }
.comparativa-delta-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Excel export: same 32 px height as the other header controls. */
.comparativa-export { height: 32px; 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; }
/* Major variació: grups (creixements / caigudes) i pastilles TOP i RISC. */
.comparativa-row-group, .comparativa-delta-group { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.comparativa-row-group.up, .comparativa-delta-group.up { background: #eef6f1; color: var(--verde-intenso, #2a7d5f); }
.comparativa-row-group.down, .comparativa-delta-group.down { background: #fbefed; color: #c0392b; }
.comparativa-row-group .comparativa-name { color: inherit; font-weight: 800; }
.cmp-flag { display: inline-block; margin-left: 6px; padding: 1px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.4; color: #fff; cursor: help; vertical-align: 1px; }
.cmp-flag.top { background: var(--verde-intenso, #2a7d5f); }
.cmp-flag.risc { background: #c0392b; }
.comparativa-note { margin-top: 10px; font-size: 12px; color: var(--text-muted, #6b6b63); line-height: 1.6; }
.comparativa-note:empty { display: none; }
.comparativa-note .cmp-flag { margin-left: 0; }
.comparativa-name .client-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 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(2, 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; }
    /* Les 3 xifres en una sola fila també al mòbil. */
    .vs-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .vs-kpi-row .vs-kpi { padding: 10px 10px; min-width: 0; }
    .vs-kpi-row .vs-kpi-label { font-size: 10px; letter-spacing: 0.3px; line-height: 1.25; overflow-wrap: anywhere; }
    .vs-kpi-row .vs-kpi-value { font-size: 18px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vs-kpi-row .vs-kpi-sub { font-size: 10.5px; line-height: 1.25; }
    .vs-kpi-row .vs-kpi-ctx { display: none; }
    .vs-kpi-row .vs-money-full { display: none; }
    .vs-kpi-row .vs-money-short { display: inline; }
    .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; }

/* KPIs de cartera: barres planes i fosques, que sobre paper es distingeixen
   clarament del fons. */
.print-resum .kpi-grid-dashboard > .kpi-card.kpi-dash { row-gap: 1.2mm; }
.print-resum .kpi-num { font-size: 13pt; }
.print-resum .kpi-unit { font-size: 8pt; }
.print-resum .kpi-context,
.print-resum .kpi-foot,
.print-resum .kpi-meter-caption { font-size: 7pt; }
.print-resum .kpi-foot { padding-top: 1mm; }
.print-resum .kpi-meter-track { height: 5px; background: #e4e4e4 !important; }
.print-resum .kpi-meter-fill { background: #333 !important; }
.print-resum .kpi-meter-mark { background: #000 !important; }
.print-resum .kpi-proj { font-size: 8pt; }
.print-resum .kpi-vbar { height: 4.2mm; background: #e4e4e4 !important; }
.print-resum .kpi-vbar-fill { background: #555 !important; }
.print-resum .kpi-vbar-mark { background: #000 !important; }
.print-resum .kpi-vbar-lab { font-size: 6.5pt; }
.print-resum .kpi-vbar-f { color: #222 !important; }
.print-resum .kpi-vbar-f.is-in, .print-resum .kpi-vbar-m.is-on-fill { color: #fff !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: space-between;
    gap: 4mm;
    border-top: 1px solid #ddd;
    font-size: 8pt;
    color: #333;
}
/* Peu: confidencialitat i identificador de l'informe a l'esquerra, número de
   pàgina a la dreta. */
.print-resum .print-foot-confidential {
    font-size: 6.5pt;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.print-resum .print-foot-page { white-space: nowrap; }
/* Avís de confidencialitat de la primera pàgina (tots els informes). */
.print-resum .print-confidential,
.print-stats .print-confidential {
    display: flex;
    align-items: flex-start;
    gap: 3mm;
    border: 1.2pt solid #000;
    padding: 2mm 3mm;
    margin: 0 0 4mm;
    color: #000;
    break-inside: avoid;
    page-break-inside: avoid;
}
.print-resum .print-confidential-icon,
.print-stats .print-confidential-icon { flex: 0 0 auto; width: 7mm; height: 7mm; margin-top: 0.3mm; }
.print-resum .print-confidential-icon svg,
.print-stats .print-confidential-icon svg { display: block; width: 100%; height: 100%; }
.print-resum .print-confidential-body,
.print-stats .print-confidential-body { min-width: 0; }
.print-resum .print-confidential-title,
.print-stats .print-confidential-title {
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 0.8mm;
}
.print-resum .print-confidential-text,
.print-stats .print-confidential-text { font-size: 7.5pt; line-height: 1.35; }
.print-resum .print-confidential-id,
.print-stats .print-confidential-id { font-size: 7.5pt; margin-top: 1mm; }
.print-resum .print-confidential-id strong,
.print-stats .print-confidential-id strong { font-family: 'Courier New', monospace; letter-spacing: 0.5px; }
/* 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; }
/* Informe d'una sola divisió: la divisió encapçala la introducció. */
.print-resum .print-intro-division .resum-row-head { font-size: 11pt; font-weight: 700; }
.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: 2px 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: 2px 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%; }

/* ---- IRIS: marca a la barra superior ----
   Marca + mot IRIS (includes/iris_logo.php, degradat turquesa ↔ lila). En
   passar-hi el ratolí, o amb el focus del teclat, cada lletra s'il·lumina per
   torns i al costat apareix la paraula que representa, cada 2 s (el guió és a
   includes/sidebar.php). Les paraules floten sobre la barra: no desplacen res
   i només es mostren on hi ha espai fins al selector de divisions. */
.iris-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.iris-brand .iris-logo { display: block; flex-shrink: 0; }
.iris-brand:focus-visible { outline: 2px solid rgba(255,255,255,0.75); outline-offset: 4px; }
.iris-words { display: none; }
@media (hover: hover) and (min-width: 1100px) {
    .iris-ltr { transition: fill-opacity .3s cubic-bezier(.25, 1, .5, 1); }
    .iris-brand.is-cycling .iris-ltr { fill-opacity: .38; }
    .iris-brand.is-cycling .iris-ltr.is-on { fill-opacity: 1; }
    .iris-words {
        display: block;
        position: absolute;
        left: 100%;
        top: 50%;
        width: 11em;
        height: 1.4em;
        margin: -.62em 0 0 10px;   /* a l'alçada de les majúscules del mot */
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: .02em;
        color: rgba(255,255,255,0.92);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s cubic-bezier(.25, 1, .5, 1);
    }
    .iris-brand.is-cycling .iris-words { opacity: 1; }
    .iris-word {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transform: translateY(.55em);
        transition: opacity .32s cubic-bezier(.25, 1, .5, 1), transform .32s cubic-bezier(.25, 1, .5, 1);
    }
    .iris-word.is-on { opacity: 1; transform: none; }
    .iris-word.is-out { opacity: 0; transform: translateY(-.55em); transition-duration: .22s; }
    .iris-word b { font-weight: 700; color: #8fdcd6; }
}
@media (hover: hover) and (min-width: 1100px) and (prefers-reduced-motion: reduce) {
    /* Sense desplaçament: només es fonen. */
    .iris-word, .iris-word.is-out { transform: none; }
}
@media print { .iris-logo animateTransform { display: none; } .iris-words { display: none; } }

/* «Estadístiques vendes» (enllaços antics ?section=vendes-stats) porta al bloc. */
#vendes-stats-block { scroll-margin-top: calc(var(--navbar-height) + 16px); }
.section-intro { margin: -6px 0 14px; font-size: 13px; color: var(--lc-text-dim); }

/* ---- Icones d'acció (includes/ui_icons.php) i files d'integració ---- */
.iris-ic { flex-shrink: 0; display: inline-block; vertical-align: -2px; }
.integration-row {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding: 12px 0; border-top: 1px solid var(--lc-border-light);
}
.integration-row:first-of-type { border-top: 0; }
.integration-row strong { font-size: 13px; color: var(--iris-petrol-deep); }
@media (max-width: 700px) { .integration-row { flex-direction: column; } }

/* ---- Seguiment de possibles clients: responsable i fites ---- */
.owner-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px !important;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    background: var(--iris-aqua-pale); color: var(--iris-petrol-deep); border: 1px solid #b9dcd8;
}
.owner-chip-none { background: #f4f4f4; color: #999; border-color: #e2e2e2; }
.pc-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border: 1px solid var(--lc-border-light); background: #fff; color: var(--iris-petrol); cursor: pointer; padding: 0;
}
.pc-icon-btn:hover { border-color: var(--iris-turquoise-dark); background: var(--iris-aqua-pale); }
.pc-icon-btn.danger { color: #b3261e; }
.pc-icon-btn.danger:hover { border-color: #b3261e; background: #fdecea; }
.pm-block { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--lc-border-light); }
.pm-title { margin: 0 0 4px; font-size: 14px; color: var(--iris-petrol-deep); }
.pm-form { display: grid; grid-template-columns: 150px 170px 1fr; gap: 8px; margin-bottom: 12px; }
.pm-form textarea { grid-column: 1 / -1; }
.pm-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.pm-list { max-height: 320px; overflow-y: auto; }
.pm-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.pm-date { font-weight: 600; font-size: 12px; color: var(--lc-text); margin-right: 6px; }
.pm-type {
    display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    padding: 1px 7px; margin-right: 6px; background: #efefef; color: #555; border: 1px solid transparent;
}
/* Un color ben diferent per a cada tipus de fita. */
.pm-type-email        { background: #e3eefc; color: #1d4f91; border-color: #c3d8f5; }
.pm-type-trucada      { background: #e2f5ec; color: #17694a; border-color: #bfe5d2; }
.pm-type-videotrucada { background: #efe9fa; color: #5b3aa8; border-color: #d9cdf2; }
.pm-type-visita       { background: #fdeee0; color: #a4500c; border-color: #f6d3b2; }
.pm-type-mostres      { background: #fde8f1; color: #9c1f5c; border-color: #f5c6da; }
.pm-type-oferta       { background: #fff6d6; color: #7d6000; border-color: #f0dd96; }
.pm-type-fira         { background: #def4f6; color: #0e6e7a; border-color: #b4e2e7; }
.pm-type-altres       { background: #efefef; color: #555; border-color: #dcdcdc; }
.btn .btn-ic { flex-shrink: 0; }
.pm-actions { display: flex; gap: 4px; }
@media (max-width: 640px) { .pm-form { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   Fitxa cli.existent (#section-client-file, assets/client-file.js)
   ════════════════════════════════════════════════════════════════════════ */
/* Barra superior: el cercador de client fa de títol, amb les accions a la dreta. */
.cf-topbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.cf-picker { flex: 1 1 360px; max-width: 640px; }
.cf-topbar .cf-combobox .form-input { height: 42px; padding-top: 0; padding-bottom: 0; font-size: 15px; }
.cf-topbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.cf-topbar-actions .btn { height: 42px; padding: 0 16px; }
/* «Registrar activitat» de la fitxa: l'estètica del botó de la barra
   (aiguamarina, lletra blanca i el mateix batec), amb la mida dels botons de
   la fitxa. Amb la fitxa oberta, el de la barra s'amaga (no n'hi ha dos). */
.cf-add-sit-btn { border: 0; background: var(--iris-turquoise-dark); color: #fff; transition: background-color .15s, transform .15s, opacity .2s; }
.cf-add-sit-btn:not(:disabled) { animation: iris-add-pulse 2.6s ease-in-out infinite; }
.cf-add-sit-btn:hover:not(:disabled), .cf-add-sit-btn:focus-visible { animation: none; background: var(--iris-turquoise); color: #fff; }
.cf-add-sit-btn:active:not(:disabled) { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .cf-add-sit-btn:not(:disabled) { animation: none; } }
body:has(#section-client-file.active #cf-add-sit-btn:not(:disabled)) .navbar-quick { display: none; }
.cf-topbar-actions .btn:disabled { opacity: .5; cursor: not-allowed; }
.cf-topbar-actions .btn:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 2px; }
/* Modal «Interacció amb <client>»: títol petit amb el nom del client, data i
   tipus en una fila (scroll horitzontal si no hi caben) i un text baix, perquè
   al mòbil es vegi «Desar activitat» sense fer scroll. */
.cf-sit-modal-title { font-size: 16px; line-height: 1.3; font-weight: 600; }
.cf-sit-modal-title span { font-weight: 700; color: var(--iris-petrol-deep); }
#cf-sit-modal .modal-header { align-items: flex-start; gap: 12px; margin-bottom: 14px; }
#cf-sit-modal .cf-sit-row { flex-wrap: nowrap; align-items: center; }
#cf-sit-modal .cf-sit-row .cf-sit-types { flex: 1 1 auto; min-width: 0; }
#cf-sit-modal .cf-type-picker { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; }
#cf-sit-modal .cf-type-btn { flex: 0 0 auto; }
#cf-msit-text { min-height: 0; resize: vertical; }
@media (max-width: 700px) {
    #cf-sit-modal.modal-overlay { align-items: flex-start; }
    #cf-sit-modal .modal { width: calc(100% - 16px); margin-top: 8px; padding: 14px 14px 16px; max-height: calc(100% - 16px); }
    #cf-sit-modal .modal-header { margin-bottom: 10px; }
    #cf-sit-modal .cf-sit-row { margin-bottom: 8px; }
    #cf-sit-modal .cf-sit-row .form-input.cf-sit-date { width: 124px; padding: 0 6px; }
    #cf-msit-text { height: 64px; padding: 8px 10px; }
    /* El recordatori ocupa una sola línia fins que s'activa. */
    #cf-sit-modal .cf-rem-select:disabled { display: none; }
    #cf-sit-modal .cf-rem-select { flex: 1 1 120px; min-width: 0; }
}
#cf-sit-modal .cf-form-row > * { flex: 1 1 150px; }
#cf-msit-msg .alert { margin-top: 10px; }
@media (max-width: 700px) {
    /* Imprimir a l'esquerra i Registrar activitat a la dreta. */
    .cf-topbar-actions { margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: nowrap; }
    .cf-topbar-actions .btn { flex: 0 1 auto; }
    .cf-topbar-actions #cf-print-btn { order: -1; }
}
.cf-combobox { position: relative; }
.cf-combobox-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--lc-text-muted); pointer-events: none; }
.cf-combobox .form-input { padding-left: 36px; padding-right: 38px; }
/* Botó × per buidar la caixa i cercar un altre client. */
.cf-combobox-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    padding: 0; border: none; background: transparent; color: var(--lc-text-muted); cursor: pointer;
    transition: color .15s, background-color .15s;
}
.cf-combobox-clear:hover { color: var(--iris-petrol-deep); background: var(--iris-mist); }
.cf-combobox-clear:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 1px; }
.cf-combobox-clear[hidden] { display: none; }
.cf-combobox .form-input::placeholder { color: var(--lc-text-muted); }
.cf-client-list {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
    max-height: 360px; overflow-y: auto; list-style: none;
    background: #fff; border: 1px solid var(--lc-border); box-shadow: 0 10px 28px rgba(11, 58, 70, 0.14);
}
.cf-client-option { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f1f1; }
.cf-client-option:last-child { border-bottom: none; }
.cf-client-option.is-active, .cf-client-option:hover { background: var(--iris-aqua-pale); }
.cf-client-option-name { font-size: 13px; font-weight: 600; color: var(--iris-petrol-deep); }
.cf-client-option-meta { font-size: 11px; color: var(--lc-text-dim); }
.cf-client-empty { padding: 10px 12px; font-size: 13px; color: var(--lc-text-dim); }
.cf-empty { padding: 28px 24px; border: 1px dashed #c9dcd9; background: #fafcfc; color: var(--lc-text-dim); font-size: 14px; line-height: 1.6; max-width: 760px; }

/* Capçalera del client: franja de marca (blau marí → petroli → turquesa, amb
   un tret lila a la cantonada) i text en blanc. */
.cf-head {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(85% 170% at 100% 0%, rgba(196, 178, 239, 0.6) 0%, rgba(196, 178, 239, 0) 62%),
        linear-gradient(115deg, var(--iris-navy) 0%, var(--iris-petrol) 36%, var(--iris-teal) 72%, var(--iris-turquoise) 100%);
    padding: 22px 24px 20px; margin-bottom: 18px;
    box-shadow: 0 16px 34px -20px rgba(11, 58, 70, 0.75);
}
.cf-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 45%); }
.cf-head > * { position: relative; }
.cf-head .loading { color: rgba(255, 255, 255, 0.9); padding: 18px; }
.cf-head .alert { margin: 0; }
.cf-head-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cf-client-name { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 10px; text-shadow: 0 1px 12px rgba(11, 30, 50, 0.25); }
.cf-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: rgba(255, 255, 255, 0.88); }
.cf-head-groups { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.88); }
.cf-head .cf-chip { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.cf-head .cf-group { background: rgba(6, 28, 40, 0.3); padding: 3px 9px 3px 3px; }
.cf-head .cf-group .text-muted { color: rgba(255, 255, 255, 0.75); }
.cf-head .abc-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
.cf-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-head .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); transition: background-color .15s, border-color .15s; }
.cf-head .btn-outline:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.8); }
.cf-head .btn-outline:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Activitat registrada: rajoles per tipus de situació dins la capçalera.
   Xifra gran, color de tipus i clic que porta a "Situacions i context". */
.cf-head-activity { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.cf-act-head { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 9px; }
.cf-act-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-act-row .cf-act { flex: 1 1 auto; }
.cf-act {
    --act: #e2e8f0;
    position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left;
    padding: 7px 12px 7px 13px; border: none; cursor: pointer; color: #fff; font: inherit;
    background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transition: transform .2s cubic-bezier(.25, 1, .5, 1), background-color .2s, box-shadow .2s;
}
.cf-act::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--act); }
.cf-act-ic { flex-shrink: 0; width: 18px; height: 18px; color: var(--act); }
.cf-act-n { flex-shrink: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cf-act-l { min-width: 0; font-size: 12px; line-height: 1.2; color: rgba(255, 255, 255, 0.86); }
.cf-act:hover { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 22px -12px rgba(4, 20, 30, 0.7); transform: translateY(-2px); }
.cf-act:active { transform: translateY(0); }
.cf-act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cf-act.is-zero .cf-act-n, .cf-act.is-zero .cf-act-l, .cf-act.is-zero .cf-act-ic { opacity: 0.55; }
.cf-act.is-zero::before { opacity: 0.4; }
.cf-act--email { --act: #93c5fd; }
.cf-act--trucada { --act: #6ee7b7; }
.cf-act--mostres { --act: #f9a8d4; }
.cf-act--visita { --act: #fdba74; }
.cf-act--videotrucada { --act: #c4b5fd; }
.cf-act--oferta { --act: #fde68a; }
.cf-act--fira { --act: #67e8f9; }
.cf-act--comercial { --act: #e2e8f0; }
.cf-act--altres { --act: #cbd5e1; }
/* Mòbil: capçalera compacta (menys files). Classificació i agent en una
   fila, els tres botons en una altra i l'activitat en quatre caselles
   (icona i nombre; el nom és al títol). */
@media (max-width: 700px) {
    .cf-head { padding: 14px 14px 12px; }
    .cf-head-main { gap: 10px; }
    .cf-client-name { font-size: 20px; margin-bottom: 6px; }
    .cf-head-meta { font-size: 11.5px; gap: 2px 10px; }
    .cf-head-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; }
    .cf-head-id > .cf-client-name, .cf-head-id > .cf-head-meta { flex: 1 0 100%; }
    .cf-head-groups, .cf-head-agents { margin-top: 0; }
    .cf-head-agents-lbl { display: none; }
    .cf-agent-chip { padding: 3px 8px; font-size: 12px; }
    .cf-head-actions { width: 100%; flex-wrap: nowrap; gap: 6px; }
    .cf-head-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 6px; font-size: 11px; white-space: nowrap; }
    .cf-head .cf-lbl-long { display: none; }
    .cf-head-activity { margin-top: 10px; padding-top: 8px; }
    .cf-act-head { margin-bottom: 6px; font-size: 10px; }
    .cf-act-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .cf-act { justify-content: center; gap: 6px; padding: 6px 4px 6px 6px; }
    .cf-act-n { font-size: 18px; }
    .cf-act-l { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cf-act, .cf-act:hover { transition: none; transform: none; } }
#cf-crm-section { scroll-margin-top: calc(var(--navbar-height, 56px) + 16px); }
.cf-entry.is-flash { animation: cf-flash 1.8s cubic-bezier(.25, 1, .5, 1); }
@keyframes cf-flash { 0%, 35% { background-color: var(--iris-lilac-pale); box-shadow: inset 3px 0 0 var(--iris-lilac); } 100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .cf-entry.is-flash { animation: none; background-color: var(--iris-lilac-pale); } }
.cf-chip { display: inline-block; padding: 2px 8px; background: var(--iris-petrol); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }
.cf-group { display: inline-flex; align-items: center; gap: 5px; }
.cf-kpis { margin-bottom: 26px; }
.kpi-sub { font-size: 12px; color: var(--lc-text-dim); line-height: 1.45; }
.cf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.cf-nowrap { white-space: nowrap; }
.cf-meta { font-size: 11px; color: var(--lc-text-muted); }
.cf-title-note { font-size: 11px; font-weight: 400; margin-left: 6px; }

/* Comparativa YoY: 30 / 90 / 365 dies */
#cf-compare-section .section-header { flex-wrap: wrap; gap: 10px; }
.cf-cmp-seg-unit { font-size: 11px; font-weight: 400; color: var(--lc-text-dim); }
.cf-cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-bottom: 18px; }
.cf-cmp-card { background: #fff; border: 1px solid var(--lc-border-light); padding: 14px 16px 16px; display: flex; flex-direction: column; min-width: 0; }
.cf-cmp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.cf-cmp-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--iris-petrol-deep); }
.cf-cmp-range { font-size: 11px; color: var(--lc-text-dim); text-align: right; line-height: 1.45; }
.cf-cmp-range span { color: var(--lc-text-muted); }
.cf-cmp-svg { display: block; width: 100%; height: auto; }
.cf-cmp-legend { display: flex; gap: 14px; font-size: 11px; color: var(--lc-text-dim); margin: 4px 0 10px; }
.cf-cmp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cf-cmp-legend i { display: inline-block; width: 10px; height: 10px; }
.cf-cmp-legend i.cf-cmp-ghost { background: #cfd8da; width: 14px; }
.cf-cmp-yoy { display: flex; align-items: baseline; gap: 6px; padding-top: 10px; border-top: 1px solid #eef1f1; }
.cf-cmp-pct { font-family: var(--font-heading); font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cf-cmp-yoy-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--lc-text-dim); }
.cf-cmp-up .cf-cmp-pct { color: #13786f; }
.cf-cmp-down .cf-cmp-pct { color: #b3261e; }
.cf-cmp-flat .cf-cmp-pct { color: var(--lc-text-dim); }
.cf-cmp-vals { margin-top: 6px; font-size: 13px; color: var(--lc-text); font-variant-numeric: tabular-nums; }
.cf-cmp-sub { margin-top: 2px; font-size: 12px; color: var(--lc-text-dim); font-variant-numeric: tabular-nums; }
.cf-cmp-note { margin-top: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.45; color: #6b5a1e; background: #fdf8e6; border-left: 2px solid #e2c15a; }
.cf-cmp-chip { display: inline-block; min-width: 64px; padding: 2px 8px; font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cf-cmp-chip.up { background: #e2f5ec; color: #17694a; }
.cf-cmp-chip.down { background: #fdecea; color: #a12a1f; }
.cf-cmp-chip.flat { background: #f0f2f2; color: #555; }
.cf-cmp-empty { color: var(--lc-text-muted); }

/* Evolució de vendes */
.cf-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cf-division { width: auto; min-width: 0; max-width: 190px; }
.cf-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; white-space: nowrap; }
.cf-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--verde-oscuro, #075236); }
.cf-head-btn { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; line-height: 1; white-space: nowrap; }
.cf-head-btn svg { flex: none; }
@media (max-width: 600px) { .cf-division { max-width: 150px; } }
.cf-sales-totals { font-size: 13px; color: var(--lc-text-dim); margin-bottom: 10px; }
.cf-growth.up { color: #17694a; }
.cf-growth.down { color: var(--lc-danger, #c0392b); }
.cf-growth.flat { color: var(--lc-text-dim); }
.cf-sales-totals strong { color: var(--iris-petrol-deep); }
.cf-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--lc-text-dim); }
.cf-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cf-legend-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.cf-legend-item .cf-legend-dot { margin-right: 0; }
.cf-legend-line { display: inline-block; width: 18px; height: 3px; }
.cf-legend-dashed { height: 0; border-top: 2px dashed #555; background: none !important; }
/* Evolució de vendes: rang habitual i mesos extraordinaris (▲ venda, ▼ caiguda). */
.cf-an-wrap { position: relative; }
.cf-an-svg { display: block; }
.cf-an-svg text { font-family: var(--font-main); }
.cf-an-tip {
    position: absolute; z-index: 6; pointer-events: none; min-width: 180px; max-width: 280px; padding: 8px 10px;
    background: #fff; border: 1px solid var(--lc-border-light); box-shadow: 0 10px 26px rgba(11, 58, 70, 0.16);
    font-size: 12px; line-height: 1.45; color: var(--lc-text);
}
.cf-an-tip strong { display: block; margin-bottom: 2px; color: var(--iris-petrol-deep); }
.cf-an-tip .up { color: #006300; font-weight: 600; }
.cf-an-tip .down { color: #b3261e; font-weight: 600; }
.cf-an-swatch { display: inline-block; width: 18px; height: 10px; background: #e4e9ed; box-shadow: inset 0 -1px 0 #a7b1b9; }
.cf-legend .cf-an-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50% !important; }
.cf-an-dot.up { background: #0ca30c; }
.cf-an-dot.down { background: #d03b3b; }
.cf-an-summary { margin-top: 12px; font-size: 13px; color: var(--lc-text); }
.cf-an-line { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.cf-an-ico { flex-shrink: 0; font-size: 11px; }
.cf-an-ico.up { color: #0ca30c; }
.cf-an-ico.down { color: #d03b3b; }
.cf-an-rel { color: var(--lc-text-dim); font-variant-numeric: tabular-nums; }
.cf-an-note { margin-top: 6px; font-size: 11.5px; color: var(--lc-text-muted); }
.cf-an-details { margin-top: 6px; }
.cf-an-details summary { cursor: pointer; font-size: 12px; color: var(--iris-teal); width: max-content; }
.cf-an-details table { margin-top: 8px; }
.cf-an-details td.num { font-variant-numeric: tabular-nums; }
.cf-an-row-up td:last-child { color: #006300; font-weight: 600; }
.cf-an-row-down td:last-child { color: #b3261e; font-weight: 600; }
.cf-two-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.cf-two-cols .vs-card { margin-bottom: 0; }
/* Famílies i productes: els productes es despleguen dins de cada família. */
.cf-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cf-card-head .vs-card-title { margin: 0; }
.cf-link-btn { background: none; border: none; padding: 2px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--iris-teal); cursor: pointer; }
.cf-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.cf-products-table { table-layout: fixed; min-width: 780px; }
.cf-products-table .cf-col-yoy { width: 100px; }
.cf-products-table td { white-space: nowrap; }
.cf-products-table .cf-col-stock { width: 112px; }
.cf-products-table .cf-col-next { width: 190px; }
.cf-products-table td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-products-table .cf-cmp-chip { min-width: 58px; }
.cf-col-note { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }
.cf-fam-toggle { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: none; border: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cf-fam-toggle .btn-ic { flex-shrink: 0; color: var(--lc-text-muted); transition: transform .2s cubic-bezier(.25, 1, .5, 1); }
.cf-fam-row.is-open .cf-fam-toggle .btn-ic { transform: rotate(90deg); }
.cf-fam-toggle:hover strong { color: var(--iris-teal); }
.cf-fam-toggle:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 2px; }
.cf-fam-count { font-size: 11px; font-weight: 400; color: var(--lc-text-muted); margin-left: 4px; }
.cf-fam-row td { background: var(--tbl-group-bg); }
.cf-fam-row.is-open td { background: var(--tbl-group-open-bg); }
.cf-prod-row td { font-size: 12.5px; color: var(--lc-text-dim); }
.cf-prod-row td:first-child { padding-left: 40px; }
.cf-prod-row .cf-mono { color: var(--iris-petrol-deep); margin-right: 4px; }
.cf-prod-more td { font-style: italic; color: var(--lc-text-muted); }
.cf-bar-col { width: 110px; }
.cf-bar { height: 6px; background: #edf2f1; min-width: 60px; }
.cf-bar > div { height: 100%; background: var(--iris-teal); }
.cf-bar-sm { height: 4px; width: 100%; }
.cf-share-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 120px; }
.cf-share-cell .text-muted { font-size: 11px; }

/* Stocks i properes fabricacions */
.cf-stocks-actions { display: flex; gap: 8px; align-items: center; }
.cf-stock-out { color: var(--rojo); }
.cf-next { font-weight: 600; color: var(--iris-petrol-deep); }
.cf-next-now { color: var(--iris-teal); }

/* Últimes comandes */
.cf-orders-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 18px; }
.cf-orders-grid .vs-card { margin-bottom: 0; }
.cf-order-list { border-top: 1px solid var(--lc-border-light); }
.cf-order { border-bottom: 1px solid var(--lc-border-light); }
.cf-order-row {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 4px;
    background: none; border: none; font: inherit; font-size: 13px; color: var(--lc-text); text-align: left; cursor: pointer;
}
.cf-order-row-io { cursor: default; flex-wrap: wrap; }
button.cf-order-row:hover, .cf-order.is-open > .cf-order-row { background: #f6faf9; }
.cf-order-chev, .cf-order-chev-btn { display: inline-flex; color: var(--lc-text-muted); transition: transform .2s cubic-bezier(.25, 1, .5, 1); }
.cf-order-chev-btn { background: none; border: none; padding: 2px; cursor: pointer; }
.cf-order.is-open .cf-order-chev, .cf-order.is-open .cf-order-chev-btn { transform: rotate(90deg); }
.cf-order-date { width: 84px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cf-order-divs { color: var(--lc-text-dim); font-size: 12px; }
.cf-order-lines { color: var(--lc-text-dim); font-size: 12px; margin-left: auto; }
.cf-order-row .num { min-width: 90px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-order-origin { font-size: 11px; color: var(--lc-text-dim); margin-left: auto; }
.cf-order-detail { padding: 2px 4px 12px 28px; }
.cf-io-status { display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 600; }
.cf-io-pending { background: #fff4d6; color: #7d5a00; }
.cf-io-entrat { background: #e2f5ec; color: #17694a; }
.cf-io-lanzado { background: #e3eefc; color: #1d4f91; }
.cf-io-cerrado { background: #efefef; color: #555; }

/* Situacions, contactes i mitjans */
.cf-form { background: #f7faf9; border: 1px solid #e1ebe9; padding: 12px 14px; margin-bottom: 16px; }
.cf-form.is-editing { border-left: 3px solid var(--iris-turquoise-dark); }
.cf-editing { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--iris-petrol-deep); }
.cf-form-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
/* Data i tipus de situació a la mateixa fila, tot de 32 px d'alçada. */
.cf-sit-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
/* Els botons ocupen l'espai del costat de la data i, si no hi caben, salten de línia
   dins d'aquest espai; només en pantalles estretes baixen tots sota la data. */
.cf-sit-row .cf-sit-types,
.cf-sit-row > .cf-type-picker { flex: 1 1 260px; min-width: 0; }
.cf-sit-row .cf-type-picker { margin-bottom: 0; }
.cf-sit-row .form-input.cf-sit-date { flex: 0 0 auto; width: 150px; height: 32px; padding: 0 10px; font-size: 12.5px; }
.cf-form-hint { margin: 0 auto 0 0; align-self: center; font-size: 12px; font-weight: 600; color: #b3261e; }
#cf-msit-msg .cf-form-hint { margin-top: 8px; }
/* Tipus de situació: botons sempre visibles amb la icona i el color de cada tipus. */
.cf-type-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cf-type-btn {
    --act-ink: #475569; --act-bg: #f1f5f9; --act-line: #cbd5e1;
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
    font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--lc-text);
    background: #fff; border: 1px solid var(--lc-border-light); cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
.cf-type-btn svg { flex-shrink: 0; color: var(--act-ink); }
.cf-type-btn:hover { border-color: var(--act-line); background: var(--act-bg); }
.cf-type-btn[aria-checked="true"] { color: var(--act-ink); font-weight: 600; background: var(--act-bg); border-color: var(--act-ink); box-shadow: inset 0 0 0 1px var(--act-ink); }
.cf-type-btn:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 2px; }
.cf-type-btn--email        { --act-ink: #1d4f91; --act-bg: #e3eefc; --act-line: #c3d8f5; }
.cf-type-btn--trucada      { --act-ink: #17694a; --act-bg: #e2f5ec; --act-line: #bfe5d2; }
.cf-type-btn--visita       { --act-ink: #a4500c; --act-bg: #fdeee0; --act-line: #f6d3b2; }
.cf-type-btn--mostres      { --act-ink: #9c1f5c; --act-bg: #fde8f1; --act-line: #f5c6da; }
.cf-type-btn--oferta       { --act-ink: #7d6000; --act-bg: #fff6d6; --act-line: #f0dd96; }
@media (prefers-reduced-motion: reduce) { .cf-type-btn { transition: none; } }
.cf-form-row > * { width: auto; flex: 0 1 190px; }
.cf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-span-2 { grid-column: span 2; }
.cf-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.cf-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cf-timeline { border-top: 1px solid var(--lc-border-light); }
.cf-entry { padding: 11px 10px 12px; border-bottom: 1px solid var(--lc-border-light); }
.cf-entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cf-entry-head > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Capçalera d'una situació (data, icona del tipus i persona), del color del
   tipus: els mateixos colors que les etiquetes .pm-type-*. */
.cf-entry { --sit-ink: var(--iris-petrol); }
.cf-entry[data-type="email"]        { --sit-ink: #1d4f91; }
.cf-entry[data-type="trucada"]      { --sit-ink: #17694a; }
.cf-entry[data-type="videotrucada"] { --sit-ink: #5b3aa8; }
.cf-entry[data-type="visita"]       { --sit-ink: #a4500c; }
.cf-entry[data-type="mostres"]      { --sit-ink: #9c1f5c; }
.cf-entry[data-type="oferta"]       { --sit-ink: #7d6000; }
.cf-entry[data-type="fira"]         { --sit-ink: #0e6e7a; }
.cf-entry[data-type="altres"]       { --sit-ink: #555; }
.cf-entry-title { color: var(--sit-ink); }
/* Degradat del color del tipus des de la cantonada superior esquerra: prou
   clar per llegir el text, prou visible per distingir els tipus d'un cop d'ull. */
.cf-timeline .cf-entry[data-type] { background-image: radial-gradient(ellipse 75% 190% at 0 0, color-mix(in srgb, var(--sit-ink) 15%, transparent), transparent 100%); }
/* Situacions: separador de mes (gris fosc) i, al final, «Veure'n més». */
.cf-timeline--months { border-top: 0; }
.cf-month { display: flex; align-items: center; gap: 10px; padding: 18px 0 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3d4247; }
.cf-month::after { content: ''; flex: 1; height: 2px; background: #3d4247; }
.cf-timeline--months > .cf-month:first-child { padding-top: 4px; }
.cf-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 0 2px; }
@media print { .cf-more { display: none !important; } }
.cf-entry-date { font-size: 12px; font-weight: 700; color: var(--sit-ink); font-variant-numeric: tabular-nums; }
.cf-entry-type { display: inline-flex; align-items: center; color: var(--sit-ink); }
.cf-entry-user { font-size: 12px; color: var(--sit-ink); }
.cf-entry-actions { display: flex; gap: 4px; flex-shrink: 0; }
.cf-entry-text { margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--lc-text); white-space: pre-wrap; }
.cf-entry-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--iris-teal); text-decoration: none; }
.cf-entry-link:hover { text-decoration: underline; }
.cf-entry .pm-type { margin-right: 0; }
.cf-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.cf-contact { background: #fff; border: 1px solid var(--lc-border-light); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cf-contact-name { font-size: 14px; font-weight: 700; color: var(--iris-petrol-deep); }
.cf-contact-role { font-size: 12px; color: var(--lc-text-dim); }
.cf-contact-lines { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cf-contact-lines a { display: inline-flex; align-items: center; gap: 5px; color: var(--iris-teal); text-decoration: none; }
.cf-contact-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.cf-search-results { border: 1px solid #dbe8e6; background: #fbfdfd; padding: 12px 14px; margin-bottom: 16px; }
.cf-search-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.cf-search-head strong { margin-right: 4px; }
.cf-news { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 10px 0; border-top: 1px solid #edf2f1; }
.cf-news-main { min-width: 0; }
.cf-news-title { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--iris-petrol); text-decoration: none; line-height: 1.35; }
a.cf-news-title:hover { text-decoration: underline; }
.cf-media-source { display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: 11px; background: var(--iris-aqua-pale); color: var(--iris-petrol-deep); }
.cf-doc-kind { display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 600; background: var(--iris-aqua-pale); color: var(--iris-petrol-deep); }
/* La cel·la continua sent de taula (amb flex perdia la vora inferior). */
.cf-doc-links > * { vertical-align: middle; margin: 2px 6px 2px 0; }
.cf-lang { font-size: 11px; font-weight: 700; color: var(--iris-teal); text-decoration: none; padding: 0 4px; }
.cf-lang:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .cf-form-grid { grid-template-columns: 1fr; }
    .cf-span-2 { grid-column: auto; }
    .cf-two-cols, .cf-orders-grid { grid-template-columns: 1fr; }
    .cf-order-row { flex-wrap: wrap; gap: 6px 10px; }
}

/* Nom del client a les targetes (Comandes i cartera, Resum): obre la fitxa */
.card-title-link {
    display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 3px;
    background: none; border: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600;
    color: var(--lc-text); text-align: left; cursor: pointer;
}
.card-title-link:hover { color: var(--iris-petrol); text-decoration: underline; text-underline-offset: 3px; }
.card-title-link:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 2px; }
.card-title-arrow { flex-shrink: 0; opacity: .4; transition: transform .2s cubic-bezier(.25, 1, .5, 1), opacity .2s; }
.card-title-link:hover .card-title-arrow { opacity: 1; transform: translateX(2px); }
.print-resum .card-title-arrow { display: none; }

/* Impressió de la fitxa (motor de assets/print-report.js, en color) */
.print-client-file .cf-print-head-right { display: flex; align-items: center; gap: 4mm; }
.print-client-file .cf-print-intro { margin-bottom: 3mm; }
.print-client-file .cf-print-name { font-family: var(--font-heading), Arial, sans-serif; font-size: 16pt; font-weight: 700; color: #0b3a46; }
.print-client-file .cf-print-meta { font-size: 8pt; color: #444; margin-top: 1mm; }
.print-client-file .cf-print-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-bottom: 2mm; }
.print-client-file .cf-print-kpi { border: 1px solid #b5c4c4; padding: 1.8mm 2.2mm; }
.print-client-file .cf-print-kpi-l { font-size: 6.8pt; text-transform: uppercase; letter-spacing: .4px; color: #555; }
.print-client-file .cf-print-kpi-v { font-size: 11pt; font-weight: 700; color: #0b3a46; margin: .6mm 0; }
.print-client-file .cf-print-kpi-s { font-size: 7pt; color: #444; }
.print-client-file .cf-print-chart svg { max-width: 100%; height: auto; }
.print-client-file .vs-line-scroll-wrap { overflow: visible; }
.print-client-file .cf-cmp-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5mm; margin-bottom: 2mm; }
.print-client-file .cf-cmp-card { padding: 2mm; border-color: #b5c4c4; }
.print-client-file .cf-cmp-title { font-size: 7.5pt; }
.print-client-file .cf-cmp-range { font-size: 6.5pt; }
.print-client-file .cf-cmp-pct { font-size: 15pt; }
.print-client-file .cf-cmp-vals { font-size: 7.5pt; }
.print-client-file .cf-cmp-sub, .print-client-file .cf-cmp-legend { font-size: 6.8pt; }
.print-client-file .cf-cmp-note { font-size: 6.5pt; padding: 1mm 1.5mm; }
.print-client-file .cf-table { font-size: 7.5pt; }
.print-client-file .cf-table th, .print-client-file .cf-table td { padding: 1mm 1.5mm; }
.print-client-file .cf-print-list { border-top: .5pt solid #ccc; }
.print-client-file .cf-print-note { margin: 0 0 1mm; font-size: 7pt; color: #555; }
.print-client-file .cf-print-entry { padding: 1.4mm 0; border-bottom: .5pt solid #ccc; font-size: 8pt; }
.print-client-file .cf-print-entry-head { font-size: 7.5pt; color: #333; margin-bottom: .6mm; }
.print-client-file .cf-print-url { font-size: 6.5pt; color: #555; word-break: break-all; }
.print-client-file .cf-legend { font-size: 7pt; }
.print-client-file .cf-bar > div { background: #13786f !important; }
.print-client-file .cf-products-table { margin: 0; min-width: 0; }
.print-client-file .cf-print-nohead { display: none; }
.print-client-file .cf-prod-row td { font-size: 7pt; }
.print-client-file .cf-prod-row td:first-child { padding-left: 6mm; }
.print-client-file .cf-prod-row .cf-mono { font-size: 7pt; }
.print-client-file .cf-fam-count { font-size: 6.5pt; }
.print-client-file .cf-fam-row td, .print-client-file .cf-prod-row td { background: none !important; }
.print-client-file .cf-products-table .cf-col-yoy { width: 19mm; }
.print-client-file .cf-products-table .cf-col-stock { width: 20mm; }
.print-client-file .cf-products-table .cf-col-next { width: 30mm; }
.print-client-file .cf-products-table .cf-cmp-chip { min-width: 0; padding: 0 1mm; font-size: 6.5pt; }


/* L'atribut hidden ha de guanyar a qualsevol display (p. ex. .vs-segmented). */
[hidden] { display: none !important; }
.cf-kpis { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.kpi-unit { font-size: 15px; font-weight: 600; margin-left: 2px; color: var(--lc-text-dim); }
.cf-kpi-qty { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 8px; }
.cf-kpi-qty-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lc-forest); font-variant-numeric: tabular-nums; }
.cf-kpi-qty-row .kpi-change { margin-left: auto; }
.cf-cmp-nodata-box { display: flex; align-items: center; justify-content: center; height: 150px; font-size: 12px; color: var(--lc-text-muted); background: repeating-linear-gradient(135deg, #fafbfb 0 8px, #f3f6f6 8px 16px); }
.print-client-file .cf-cmp-nodata-box { height: 28mm; font-size: 7pt; }
.print-client-file .cf-print-qty { font-size: 9pt; }
.print-client-file .cf-print-qty span { font-size: 7pt; color: #444; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Tipus de document (bloc «Documents al Partner Portal» de la fitxa): un color
   ben diferent per a cadascun, la mateixa gamma que les fites. */
.cf-doc-kind--technical_sheet { background: #e3eefc; color: #1d4f91; }
.cf-doc-kind--lca_report      { background: #e2f5ec; color: #17694a; }
.cf-doc-kind--declaration     { background: #fff4d6; color: #7d5a00; }
.cf-doc-kind--presentation    { background: #efe9fa; color: #5b3aa8; }
.cf-doc-kind--certificate     { background: #def4f6; color: #0e6e7a; }
.cf-doc-kind--memory          { background: #fde8f1; color: #9c1f5c; }
.cf-doc-kind--document        { background: #efefef; color: #555; }


/* ---- AGENTS I COMISSIONS (assets/agent-file.js) ----
   Mateix vocabulari que la Fitxa cli.existent: franja de capçalera, KPIs,
   taules «TAULES» i gràfiques amb una sola sèrie (petroli) i l'any
   anterior en gris de context. */
.ag-topbar { align-items: center; }
.ag-topbar .btn { height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; }
.ag-select { height: 42px; min-width: 280px; max-width: 100%; width: auto; font-size: 15px; }
.ag-head-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 4px; }
.ag-head-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ag-diag code { font-size: 12px; }
.ag-section-header { flex-wrap: wrap; gap: 10px; }
.ag-table tbody tr.ag-row { cursor: pointer; }
.ag-table tbody td:first-child { min-width: 210px; }
.ag-table tbody tr.ag-row:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: -2px; }
.ag-name-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--iris-petrol-deep); text-align: left; cursor: pointer; }
.ag-name-link:hover, .ag-client-link:hover { color: var(--iris-teal); text-decoration: underline; text-underline-offset: 3px; }
.ag-client-link { font-weight: 600; color: var(--iris-petrol-deep); text-decoration: none; }
.ag-table tfoot td { padding: var(--tbl-pad-y) var(--tbl-pad-x); font-weight: 700; color: var(--iris-petrol-deep); border-top: 2px solid var(--tbl-head-rule); background: var(--tbl-head-bg); }
.ag-table tfoot td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Barra horitzontal dins la cel·la (pes o comissió relativa), sota la xifra. */
.ag-bar-cell { position: relative; min-width: 110px; }
.ag-bar { position: absolute; right: var(--tbl-pad-x); bottom: 3px; height: 3px; max-width: calc(100% - 2 * var(--tbl-pad-x)); background: var(--iris-turquoise); border-radius: 2px; }
.ag-bar-val { position: relative; }
.ag-row-partial td { color: var(--lc-text-dim); }
.ag-row-lost td { color: var(--lc-text-muted); }
.ag-spark { display: block; }
.ag-inactive { margin-top: 14px; }
.ag-inactive summary { cursor: pointer; font-size: 13px; color: var(--iris-teal); width: max-content; max-width: 100%; }
.ag-inactive-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ag-pill { background: var(--iris-mist); border: 1px solid var(--iris-mist-border); padding: 4px 10px; font: inherit; font-size: 12px; color: var(--lc-text); cursor: pointer; }
.ag-pill:hover { background: var(--iris-aqua-pale); border-color: var(--iris-turquoise); }
.ag-charts .vs-card { min-width: 0; }
.ag-chart-foot { margin-top: 8px; font-size: 12.5px; color: var(--lc-text-dim); font-variant-numeric: tabular-nums; }
.ag-chart-foot strong { color: var(--iris-petrol-deep); }
.ag-partial-swatch { display: inline-block; width: 10px; height: 10px; background: #0f4c5c; opacity: .45; vertical-align: -1px; }
.ag-divs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 12px; font-size: 12.5px; color: var(--lc-text-dim); font-variant-numeric: tabular-nums; }
.ag-div { display: inline-flex; align-items: center; gap: 6px; }
.ag-assigned-note { margin: 10px 0 0; font-size: 12.5px; color: var(--lc-text-dim); }
.ag-assigned-note a { color: var(--iris-petrol-deep); font-weight: 600; }
.ag-footnote { margin: -12px 0 24px; font-size: 11.5px; line-height: 1.5; color: var(--lc-text-muted); max-width: 900px; }

/* Fitxa cli.existent: agent comercial a la capçalera (obre la fitxa de l'agent). */
.cf-head-agents { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; }
.cf-head-agents-lbl { color: rgba(255, 255, 255, 0.75); margin-right: 2px; }
.cf-agent-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.5); transition: background-color .15s, border-color .15s;
}
.cf-agent-chip:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.85); }
.cf-agent-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cf-agent-chip.is-old { font-weight: 500; background: rgba(6, 28, 40, 0.22); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.85); }
.cf-agent-pct { font-weight: 400; color: rgba(255, 255, 255, 0.82); }
.cf-agent-old { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 700px) {
    .ag-select { min-width: 0; width: 100%; }
    .ag-topbar .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cf-agent-chip { transition: none; } }

/* ---- RENDIBILITAT (Tramuntana, assets/rendibilitat.js) ----
   Tres targetes (12 mesos tancats, any en curs, any anterior) a la fitxa de
   client i a la d'agents. Una sola xifra gran (el marge), una barra amb la
   mitjana de l'empresa com a marca i el veredicte amb text, no només color. */
.rend-headline { margin: -4px 0 14px; font-size: 14px; line-height: 1.5; color: var(--lc-text); }
.rend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.rend-card.kpi-dash { padding: 14px 16px 14px; gap: 8px; }
.rend-card .kpi-eyebrow { align-items: baseline; }
.rend-card-range { flex-shrink: 0; font-size: 11px; color: var(--lc-text-dim); white-space: nowrap; }
.rend-card .kpi-num.is-neg { color: #b3261e; }
/* Barra divergent del benefici: 0 € a la línia negra, verd cap a la dreta,
   vermell cap a l'esquerra. L'import, en tinta (blanc a dins de la barra). */
.rend-dbar-fill { position: absolute; top: 0; bottom: 0; }
.rend-dbar-fill.is-gain { background: #23885a; }
.rend-dbar-fill.is-loss { background: #c0392b; }
.rend-dbar .kpi-vbar-lab { color: #1f2933; }
.rend-dbar .kpi-vbar-lab.is-in { color: #fff; }
.rend-mix { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--lc-text-dim); font-variant-numeric: tabular-nums; }
.rend-note { margin-top: 2px; font-size: 11px; color: #6b5a1e; background: #fdf8e6; border-left: 2px solid #e2c15a; padding: 4px 8px; }
.rend-card-empty { justify-content: flex-start; }
.rend-empty { font-size: 12px; color: var(--lc-text-muted); padding: 18px 0 8px; }
.rend-unavailable { font-size: 13px; color: var(--lc-text-dim); padding: 10px 12px; background: var(--iris-mist); border: 1px solid var(--iris-mist-border); }

/* ---- Cobertura de producció (assets/order-backlog.js) ----
   Bloc de «Resum i comandes» (la màquina de la divisió) i de Resum (una fila
   per màquina). Les files de qualitat o de màquina es despleguen. */
.cb-kpis { margin-bottom: 14px; }
.cb-kpi .kpi-label .cf-chip { margin-right: 4px; }
.cb-notes { margin: 0 0 10px; }
.cb-table tbody tr.cb-row { cursor: pointer; }
.cb-table tbody tr.cb-row:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: -2px; }
.cb-table tbody td:first-child { min-width: 200px; }
.cb-table .io-lines-row .cb-table { background: var(--lc-white); }
.cb-caret { display: inline-block; width: 1em; color: var(--lc-text-muted); }
.cb-warn { color: var(--lc-danger); }
.cb-foot { margin-top: 8px; }
/* A l'informe imprès: taules compactes perquè la columna Dies hi càpiga. */
.print-resum .cb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; }
.print-resum .cb-kpi { padding: 3mm; }
.print-resum .cb-kpi .kpi-value { font-size: 15pt; }
.print-resum .table-container { overflow: visible; }
.print-resum .cb-table { font-size: 7.5pt; }
.print-resum .cb-table th,
.print-resum .cb-table td { padding: 1mm 1.5mm; }
.print-resum .cb-table tbody td:first-child,
.print-resum .cb-table .ag-bar-cell { min-width: 0; }
.print-resum .cb-table .ag-bar { background: #333 !important; }
.print-resum .cb-notes,
.print-resum .cb-foot { font-size: 7.5pt; }

/* Cobertura de producció: cartera per mes d'entrega (columnes a la divisió,
   mapa de calor màquina × mes a Resum) i totes les línies. Una sola sèrie
   (petroli); l'endarrerit és un estat (vermell amb ⚠ i etiqueta). */
.cb-viz { margin: 4px 0 16px; padding: 14px 16px 10px; border: 1px solid var(--lc-border-light); background: #fff; }
.cb-viz-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.cb-viz-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--iris-petrol-deep); }
.cb-viz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 6px; font-size: 12px; color: var(--lc-text-dim); }
.cb-seg { display: inline-flex; border: 1px solid var(--lc-border-light); background: #fff; }
.cb-seg button { border: 0; background: transparent; padding: 6px 12px; font: inherit; font-size: 12.5px; color: var(--lc-text-dim); cursor: pointer; white-space: nowrap; }
.cb-seg button + button { border-left: 1px solid var(--lc-border-light); }
.cb-seg button:hover:not(:disabled):not([aria-pressed="true"]) { background: #f2f7f8; color: var(--iris-petrol-deep); }
.cb-seg button[aria-pressed="true"] { background: var(--iris-petrol); color: #fff; }
.cb-seg button:disabled { opacity: 0.45; cursor: not-allowed; }
.cb-seg button:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: -2px; }
.cb-count { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 5px; font-size: 11px; line-height: 16px; text-align: center; background: rgba(15, 76, 92, 0.1); }
.cb-seg button[aria-pressed="true"] .cb-count { background: rgba(255, 255, 255, 0.22); }
.cb-key { display: inline-flex; align-items: center; gap: 6px; }
.cb-key > i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.cb-late-icon { color: var(--lc-danger); }
.cb-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--iris-teal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cb-chart { padding-bottom: 2px; }
.cb-hit { cursor: pointer; outline: none; }
.cb-hit:hover, .cb-hit:focus-visible { fill: rgba(15, 76, 92, 0.06); }
.cb-hit:focus-visible { stroke: var(--iris-turquoise-dark); stroke-width: 2; }
.cb-tip-hint { margin-top: 4px; color: var(--lc-text-muted); font-size: 11px; }
.cb-month-table { margin-top: 10px; }
.cb-row-link { cursor: pointer; }
.cb-row-link:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: -2px; }
/* Mapa de calor: taula HTML (les xifres hi són escrites), cel·les separades per 2 px. */
.cb-heat-wrap { overflow-x: auto; }
table.cb-heat { border-collapse: separate; border-spacing: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cb-heat th { padding: 2px 6px 6px; font-size: 11.5px; font-weight: 600; color: var(--lc-text-dim); text-align: center; white-space: nowrap; vertical-align: bottom; }
.cb-heat th small { display: block; font-size: 10px; font-weight: 400; color: var(--lc-text-muted); }
.cb-heat th.cb-heat-late { box-shadow: inset 0 2px 0 var(--lc-danger); }
.cb-heat th.cb-heat-row { text-align: left; padding-right: 12px; color: var(--lc-text); }
.cb-heat tbody th.cb-heat-row { font-weight: 600; white-space: nowrap; }
.cb-heat td { min-width: 62px; height: 40px; padding: 0 8px; text-align: center; font-weight: 600; border-radius: 3px; }
.cb-heat td[data-cb-cell] { cursor: pointer; }
.cb-heat td[data-cb-cell]:hover, .cb-heat td[data-cb-cell]:focus-visible { outline: 2px solid var(--iris-navy); outline-offset: 1px; }
.cb-heat td.cb-sel { outline: 3px solid var(--iris-navy); outline-offset: 1px; }
.cb-heat td.cb-heat-zero { background: #f4f6f7; color: var(--lc-text-muted); font-weight: 400; }
.cb-heat .cb-heat-total { padding-left: 12px; text-align: right; color: var(--lc-text); font-weight: 700; background: none; }
.cb-scale { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cb-scale-step { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.cb-scale-step i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
/* Totes les línies. */
.cb-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 10px; }
.cb-search { width: 300px; max-width: 100%; height: 32px; padding: 4px 10px; font-size: 13px; }
.cb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--iris-petrol); background: #eef6f8; color: var(--iris-petrol-deep); font: inherit; font-size: 12px; cursor: pointer; }
.cb-chip:hover { background: #dcecef; }
.cb-lines .cb-lines-group > td { padding-top: 10px; background: #f2f7f8; color: var(--iris-petrol-deep); font-weight: 600; }
.cb-lines .cb-lines-group.late > td { box-shadow: inset 3px 0 0 var(--lc-danger); }
.cb-lines .cb-sum { margin-left: 12px; font-weight: 400; color: var(--lc-text-dim); }
.cb-lines-count, .cb-empty { margin-top: 6px; }
/* Línies: l'entrega (una data) no necessita l'amplada de la primera columna
   de les altres taules; la guanya el producte, amb el nom sota el codi. */
.cb-lines tbody td:first-child { min-width: 0; }
.cb-lines .cb-col-prod { min-width: 240px; }
.cb-prod-code { display: block; }
.print-resum .cb-viz { padding: 0; border: 0; }
.print-resum .cb-viz-foot { font-size: 7.5pt; }
.print-resum table.cb-heat { font-size: 7.5pt; }
.print-resum .cb-heat td { min-width: 0; height: 7mm; padding: 0 1.5mm; }
.print-resum .cb-heat th { font-size: 7pt; padding: 0 1mm 1mm; }
.cb-heat tfoot th, .cb-heat tfoot td { border-top: 1px solid var(--tbl-rule); }
.cb-heat td.cb-heat-sum { height: 30px; background: none; color: var(--lc-text); font-weight: 600; }
/* La columna de la màquina queda fixa en desplaçar el mapa; al mòbil, només la píndola. */
.cb-heat .cb-heat-row { position: sticky; left: 0; z-index: 1; background: #fff; }
@media (max-width: 700px) {
    .cb-heat .cb-heat-name { display: none; }
    .cb-heat td { min-width: 52px; }
}
.cb-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--lc-border-light); font-size: 10.5px; line-height: 16px; color: var(--lc-text-dim); background: #f6f8f9; vertical-align: 1px; }

/* ---- Simulador de cartera (assets/order-sim.js): capa a pantalla completa ----
   Rampa ordinal petroli per a l'origen dels blocs (cartera → afegits →
   propostes); el semàfor de rendibilitat amb icona i etiqueta. */
body.sim-open { overflow: hidden; }
.modal-overlay.sim-overlay { align-items: stretch; justify-content: stretch; z-index: 1100; }
.sim-shell { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--lc-bg, #f7f8f8); overflow: hidden; }
.sim-head { flex: 0 0 auto; padding: 14px 24px 10px; background: #fff; border-bottom: 2px solid var(--iris-petrol-deep); }
.sim-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sim-title { margin: 0; font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--lc-forest); }
.sim-close { font-size: 30px; padding: 0 6px; }
.sim-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin-top: 10px; }
.sim-ctl { display: inline-flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--lc-text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.sim-ctl .form-select, .sim-ctl .form-input { height: 34px; min-width: 150px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.sim-ctl-wide .form-select, .sim-ctl-wide .form-input { min-width: 280px; }
.sim-check { display: inline-flex; align-items: center; gap: 6px; height: 34px; font-size: 13px; color: var(--lc-text); }
.sim-dirty { align-self: center; font-size: 12px; color: #8a5a00; }
.sim-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px 32px; }
.sim-intro { margin: 0 0 12px; }
.sim-alert { margin-bottom: 10px; }
.sim-kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sim-kpi { padding: 14px 16px; }
.sim-kpi .kpi-value { font-size: 24px; font-variant-numeric: tabular-nums; }
.sim-kpi .kpi-sub { font-size: 12px; color: var(--lc-text-dim); line-height: 1.4; }
.sim-kpi-over { box-shadow: inset 3px 0 0 var(--lc-danger); }
.sim-delta { color: var(--lc-text-dim); }
.sim-delta.up, .sim-delta.down { font-weight: 600; color: var(--lc-text); }
.sim-warn-line { margin-top: 3px; color: var(--lc-danger); }
.sim-viz { margin-bottom: 14px; }
.sim-chart { width: 100%; }
.sim-chart-svg { display: block; font-family: var(--font-main); }
.sim-seg { cursor: default; outline: none; }
.sim-seg:hover, .sim-seg:focus-visible { stroke: #0b0b0b; stroke-width: 1.5; }
.sim-over { color: var(--lc-danger); font-weight: 600; }
.sim-mini { margin-top: 8px; max-width: 520px; }
.sim-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 6px 0 10px; }
.sim-grow { flex: 1 1 auto; }
.sim-props, .sim-add { margin: 0 0 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--lc-border-light); }
.sim-props-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sim-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--iris-petrol-deep); }
.sim-prop-list { list-style: none; margin: 6px 0; padding: 0; }
.sim-prop { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #eef1f2; }
.sim-prop:first-child { border-top: 0; }
.sim-prop-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sim-prop-act { display: flex; align-items: flex-start; gap: 6px; flex: 0 0 auto; }
.sim-class { font-weight: 600; color: var(--iris-petrol-deep); }
/* Propostes: un bloc requadrat per client i una fila per producte. Client,
   codi i nom de producte amb la mateixa font. */
.sim-clients { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.sim-client { border: 1px solid #cfdcdf; background: #fff; }
.sim-client-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; background: #f2f7f8; border-bottom: 1px solid #dfe8ea; }
.sim-client-head .btn { margin-left: auto; }
.sim-client .sim-prop-list { margin: 0; padding: 0 12px; }
.sim-prop-name { font-family: var(--font-main); font-size: 13.5px; font-weight: 600; color: var(--iris-petrol-deep); text-decoration: none; }
a.sim-prop-name:hover { text-decoration: underline; }
.sim-table a { color: var(--iris-petrol-deep); text-decoration: none; font-weight: 600; }
.sim-table a:hover { text-decoration: underline; }
.sim-add-preview { margin-top: 8px; padding-top: 10px; border-top: 1px solid #eef1f2; }
.sim-last { margin: 2px 0 10px 18px; padding: 0; font-size: 12px; color: var(--lc-text-dim); }
.sim-table-wrap { background: #fff; }
.sim-table { font-size: 12.5px; }
.sim-table td { vertical-align: top; }
.sim-table td.num { white-space: nowrap; }
.sim-table .sim-in { width: 92px; height: 30px; padding: 2px 6px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sim-table tr.is-deleted td { color: var(--lc-text-muted); background: #fafafa; }
.sim-table tr.is-deleted td a { color: var(--lc-text-muted); text-decoration: line-through; }
.sim-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.sim-code { font-family: var(--font-mono, monospace); font-size: 12px; }
.sim-neg { color: #b3261e; font-weight: 600; }
.sim-tag { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 10.5px; line-height: 16px; background: #eef2f3; color: var(--lc-text-dim); }
.sim-tag-warn { background: #fdecea; color: #b3261e; }
.sim-sem { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.sim-sem-green { background: #e6f2ee; color: #00573f; border-color: #b7d8cd; }
.sim-sem-orange { background: #fdf3e1; color: #7a4f00; border-color: #f1d49a; }
.sim-sem-red { background: #fdecea; color: #a1281c; border-color: #f2b8b1; }
.sim-sem-none { background: #f1f3f4; color: var(--lc-text-dim); border-color: #dfe3e5; }
.sim-foot { margin-top: 10px; }
/* Rètol en passar el ratolí (o en enfocar amb el teclat o tocar al mòbil): el
   text d'introducció del bloc, al títol, i les notes de la màquina, a la
   targeta de Cobertura. */
.cb-has-tip { position: relative; cursor: help; outline: none; }
.cb-has-tip:focus-visible { box-shadow: 0 0 0 2px var(--iris-turquoise-dark); }
.cb-title-tip { display: inline-flex; align-items: center; gap: 6px; }
.cb-tip-icon { color: var(--lc-text-muted); flex-shrink: 0; vertical-align: -2px; }
.cb-has-tip:hover .cb-tip-icon, .cb-has-tip:focus-visible .cb-tip-icon { color: var(--iris-teal); }
.cb-tip {
    display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 8px);
    width: max-content; max-width: min(420px, 86vw); padding: 10px 12px;
    background: #fff; border: 1px solid var(--lc-border-light); box-shadow: 0 10px 26px rgba(11, 58, 70, 0.16);
    font-family: var(--font-main); font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: normal;
    text-transform: none; text-align: left; white-space: normal; color: var(--lc-text);
}
.cb-kpi .cb-tip { width: 340px; }
.cb-has-tip:hover > .cb-tip, .cb-has-tip:focus-within > .cb-tip { display: block; }
/* Capçalera de Cobertura de producció: Simular cartera, Exportar a Excel i
   Actualitzar, tots de la mateixa altura (la del botó d'exportar). */
.btn.cb-head-btn { height: 32px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.cb-head-btn svg { flex-shrink: 0; }
/* Simulador: els botons fan la mateixa altura que el camp de nom i que el
   desplegable d'ordre (34 px). */
.sim-controls .btn, .sim-toolbar .btn { height: 34px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.sim-toolbar .cb-search { height: 34px; box-sizing: border-box; }
.sim-toolbar .cb-seg { height: 34px; box-sizing: border-box; }
.sim-toolbar .cb-seg button { display: inline-flex; align-items: center; gap: 4px; }
.sim-controls .btn svg, .sim-toolbar .btn svg { flex-shrink: 0; }
@media (max-width: 760px) {
    .sim-shell { overflow-y: auto; }
    .sim-head { padding: 10px 14px 8px; }
    .sim-body { flex: 0 0 auto; overflow: visible; padding: 12px 14px 28px; }
    .sim-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .sim-kpi { padding: 10px; }
    .sim-kpi .kpi-value { font-size: 19px; }
    .sim-toolbar .cb-search { width: 100%; }
    .sim-ctl-wide .form-select, .sim-ctl-wide .form-input { min-width: 0; width: 100%; }
    .sim-ctl-wide { flex: 1 1 100%; }
    .sim-prop { flex-direction: column; }
}

/* ---- Fitxa del seguiment (pipeline-edit-modal): compacta i a dues columnes ----
   Dades i qualificació a l'esquerra, fites a la dreta; tot a la vista sense
   desplaçar-se en una pantalla d'escriptori. */
/* Alta manual d'un possible client: ampla, marges petits i camps compactes
   (com la fitxa), en quatre columnes; cap scroll a l'ordinador. */
.modal.pa-modal { max-width: 860px; width: calc(100% - 32px); max-height: calc(100vh - 32px); padding: 0; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.pa-modal .pa-header { margin: 0; padding: 12px 18px; border-bottom: 2px solid var(--iris-petrol-deep); }
.pa-modal .pa-header .modal-title { margin: 0; font-size: 18px; }
.pa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 18px 16px; overflow-y: auto; }
.pa-span-2 { grid-column: span 2; }
.pa-span-4 { grid-column: 1 / -1; }
.pa-modal .form-group { gap: 3px; margin: 0; }
.pa-modal .form-label { font-size: 10.5px; }
.pa-modal .form-input, .pa-modal .form-select, .pa-modal .form-textarea { padding: 6px 10px; font-size: 13px; }
.pa-modal .form-select { padding-right: 30px; background-position: right 10px center; }
.pa-modal .form-textarea { min-height: 0; resize: vertical; }
#pa-msg:empty { display: none; }
.pa-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
@media (max-width: 700px) {
    .pa-grid { grid-template-columns: 1fr 1fr; }
    .pa-span-2 { grid-column: 1 / -1; }
}
.modal.pe-modal {
    max-width: 1040px; width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    padding: 0; display: flex; flex-direction: column; overflow: hidden;
    border-radius: 10px;
}
.pe-modal .pe-header {
    margin: 0; padding: 12px 18px; gap: 12px;
    border-bottom: 2px solid var(--iris-petrol-deep);
}
.pe-header-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.pe-header-main .modal-title { margin: 0; font-size: 18px; }
.pe-header-main .pc-div-badge { height: 22px; }
.pe-origin { font-size: 12px; color: var(--lc-text-dim); }
.pe-modal .pipeline-edit-form { padding: 12px 18px 16px; gap: 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.pe-stepper { padding: 2px 0 0; }
.pe-stepper .phase-step-dot { width: 22px; height: 22px; font-size: 10px; }
.pe-stepper .phase-stepper-line { top: 11px; left: 12.5%; right: 12.5%; }
/* Pas 4: «Guanyat / Perdut», es tria un dels dos (verd o vermell). */
.pe-stepper.is-lost .phase-stepper-line-fill { background: var(--lc-danger); }
.phase-step-closed { cursor: default; }
.phase-step-closed .phase-step-dot { cursor: pointer; }
.phase-step-split { display: inline-flex; align-items: center; gap: 3px; }
.phase-step-split button { padding: 0 2px; border: 0; background: none; font: inherit; color: var(--lc-text-muted); cursor: pointer; }
.phase-step-split button:hover { color: var(--lc-text); text-decoration: underline; }
.phase-step-split button[aria-pressed="true"][data-close="won"] { color: var(--lc-forest); font-weight: 700; }
.phase-step-split button[aria-pressed="true"][data-close="lost"] { color: var(--lc-danger); font-weight: 700; }
.phase-step-split span { color: var(--lc-text-muted); }
.pe-stepper .phase-step-label { margin-top: 3px; font-size: 11px; }
.pe-stepper .phase-step:hover .phase-step-dot { border-color: var(--lc-forest); }

.pe-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; }
.pe-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.pe-qual {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 12px; background: var(--lc-grey); border-radius: 8px;
}
/* X/3 a l'esquerra, de l'alçada de les dues línies «Criteris» / «'target'». */
.pe-qual-score { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pe-qual .pipeline-score-value { font-size: 26px; line-height: 1; }
.pe-qual-cap { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.2; font-weight: 600; color: var(--lc-text-dim); }
.pe-criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pe-criteria li {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 999px;
    background: var(--lc-white); color: var(--lc-text-dim); border: 1px solid var(--lc-border-light);
}
.pe-criteria li::before { content: "○"; font-size: 11px; }
.pe-criteria li.ok { background: #e2f5ec; color: #17694a; border-color: #bfe5d2; font-weight: 600; }
.pe-criteria li.ok::before { content: "✓"; }

.pe-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.pe-fields [hidden] { display: none; }
.pe-span-3 { grid-column: 1 / -1; }
.pe-email { grid-column: 1 / -1; }
.pe-modal .form-group { gap: 3px; }
.pe-modal .form-label { font-size: 10.5px; }
.pe-modal .form-input, .pe-modal .form-select, .pe-modal .form-textarea { padding: 6px 10px; font-size: 13px; }
.pe-modal .form-select { padding-right: 30px; background-position: right 10px center; }
.pe-modal .form-textarea { min-height: 0; }
.pe-modal .sku-toggle-btn { padding: 6px 6px; font-size: 12.5px; }
.pe-save { display: flex; justify-content: flex-end; gap: 8px; }

/* Fites: la columna fa l'alçada de la de l'esquerra i la llista hi desplaça. */
.pm-block.pe-side {
    margin: 0; padding: 0 0 0 18px; border-top: none; border-left: 1px solid var(--lc-border-light);
    display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 300px;
    contain: size;
}
.pm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pe-side .pm-title { margin: 0; }
.pm-hint { font-size: 11px; color: var(--lc-text-muted); }
.pe-side .pm-form { grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0; }
.pe-side .pm-list { flex: 1 1 0; min-height: 0; max-height: none; }
.pe-side .pm-item { padding: 6px 0; }

@media (max-width: 860px) {
    .pe-cols { grid-template-columns: 1fr; }
    .pm-block.pe-side { contain: none; min-height: 0; padding: 12px 0 0; border-left: none; border-top: 1px solid var(--lc-border-light); }
    /* En una sola columna la llista no té alçada definida: mida del contingut. */
    .pe-side .pm-list { flex: none; max-height: 420px; }
}
@media (max-width: 560px) {
    .pe-fields { grid-template-columns: 1fr 1fr; }
    .pe-side .pm-form { grid-template-columns: 1fr 1fr; }
}

/* Botó de comparar: «A ⇄ B». */

/* Kanban: Guanyat i Perdut en una sola columna (guanyats verds, perduts vermells).
   Cada fase és una zona on es pot deixar anar; les buides només s'obren
   mentre s'arrossega una targeta (.is-dragging). */
.pipeline-column-counts { display: inline-flex; gap: 4px; }
.pipeline-column-count.count-won { background: #d7f0e3; color: #17694a; }
.pipeline-column-count.count-lost { background: #f8dcd8; color: #a32d22; }
.col-closed .t-won { color: #17694a; }
.col-closed .t-lost { color: #a32d22; }
.col-closed .pipeline-column-cards { flex: 0 0 auto; min-height: 0; }
.col-closed .zone-lost { flex: 1 0 auto; }
.col-closed .zone-won:not(:empty) + .zone-lost:not(:empty) { margin-top: 8px; }
.pipeline-kanban.is-dragging .col-closed .pipeline-column-cards { min-height: 56px; padding: 6px; outline: 2px dashed; outline-offset: -2px; }
.pipeline-kanban.is-dragging .col-closed .zone-won { outline-color: #17694a; background: rgba(0,105,78,0.05); }
.pipeline-kanban.is-dragging .col-closed .zone-lost { outline-color: #a32d22; background: rgba(192,57,43,0.05); margin-top: 8px; }
.pipeline-kanban.is-dragging .col-closed .pipeline-column-cards::before {
    content: attr(data-drop-label); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.pipeline-kanban.is-dragging .col-closed .zone-won::before { color: #17694a; }
.pipeline-kanban.is-dragging .col-closed .zone-lost::before { color: #a32d22; }
.pipeline-kanban.is-dragging .col-closed .pipeline-column-cards.drag-over { background: rgba(0,0,0,0.04); }
/* Guanyat/perdut: el color diu el resultat; l'estil de la vora (sòlida o
   discontínua) continua dient l'origen. */
.pipeline-card.card-won { background: #e8f6ee; border-color: var(--lc-tech-green); }
.pipeline-card.card-lost { background: #fdecea; border-color: var(--lc-danger); }

/* BBDD possibles clients: filtre de text + «Tots / Els meus» a la mateixa fila. */
.bbdd-search { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.bbdd-assigned-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; color: var(--lc-text); background: var(--lc-white); border: 1px solid var(--lc-border-light); cursor: pointer; user-select: none; }
.bbdd-assigned-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--verde-oscuro, #075236); }
.bbdd-assign-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; color: var(--iris-petrol-deep); background: #eef7f6; border-left: 3px solid var(--iris-teal); }
.bbdd-assign-note svg { flex-shrink: 0; margin-top: 1px; color: var(--iris-teal); }
.bbdd-assign-note a { color: var(--iris-turquoise-dark); font-weight: 600; }
/* Avís efímer (irisFlash). */
.iris-flash { position: fixed; left: 50%; top: calc(var(--navbar-height, 56px) + 12px); z-index: 3000; display: flex; align-items: flex-start; gap: 10px; width: min(560px, calc(100% - 24px)); padding: 12px 14px; font-size: 13px; line-height: 1.45; color: #4a3500; background: #fff4c7; border: 1px solid #f0d27a; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); transform: translate(-50%, -8px); opacity: 0; transition: opacity .25s, transform .25s; }
.iris-flash.is-in { opacity: 1; transform: translate(-50%, 0); }
.iris-flash svg { flex-shrink: 0; margin-top: 1px; color: #a07800; }
.iris-flash button { margin-left: auto; padding: 0 4px; border: 0; background: none; font-size: 18px; line-height: 1; color: #7d6000; cursor: pointer; }
.bbdd-owner-toggle { display: inline-flex; border: 1px solid var(--lc-border-light); background: var(--lc-white); }
.bbdd-owner-toggle button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; font: inherit; font-size: 13px; font-weight: 500;
    background: transparent; color: var(--lc-text-dim); border: none; cursor: pointer;
}
.bbdd-owner-toggle button + button { border-left: 1px solid var(--lc-border-light); }
.bbdd-owner-toggle button:hover { background: var(--lc-grey); }
.bbdd-owner-toggle button.active { background: var(--lc-forest); color: #fff; font-weight: 600; }
.bbdd-owner-count {
    min-width: 18px; padding: 1px 5px; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center;
    background: var(--lc-grey); color: var(--lc-text-dim);
}
.bbdd-owner-toggle button.active .bbdd-owner-count { background: rgba(255,255,255,0.2); color: #fff; }
@media (max-width: 640px) {
    .bbdd-owner-toggle { width: 100%; }
    .bbdd-owner-toggle button { flex: 1; justify-content: center; min-height: 40px; }
}

/* ---- Targeta de possible client, comuna a la BBDD i al seguiment ---- */
.pc-title {
    display: inline; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit; text-align: left; line-height: inherit;
}
.pc-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.pc-title:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 2px; }
.pc-desc { font-size: 12px; color: var(--lc-text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--iris-petrol); }
.pc-status .owner-chip { margin-left: auto; }
.pc-prio { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
/* Rellevància: tres «!» en negreta; en verd tants com criteris 'target'. */
.pc-rel { display: inline-flex; align-items: center; gap: 3px; cursor: help; }
.pc-rel-mark { font-size: 15px; font-weight: 900; line-height: 1; color: #c3ccd0; }
.pc-rel-mark.on { color: #17803d; }
.pc-prio.score-3 { color: #17694a; }
.pc-prio.score-2 { color: #8a5a00; }
.pc-prio.score-1, .pc-prio.score-0 { color: var(--lc-text-dim); font-weight: 500; }
.pc-meta a.pc-web { color: var(--iris-teal); text-decoration: none; overflow-wrap: anywhere; }
.pc-meta a.pc-web:hover { color: var(--iris-petrol-deep); text-decoration: underline; }

/* Compacta (columnes del kanban). */
.prospect-card.is-compact { gap: 6px; padding: 10px 11px; }
.prospect-card.is-compact.pk-human { padding: 9px 10px; }
.prospect-card.is-compact .card-title { font-size: 14px; }
.prospect-card.is-compact .pc-head-side { gap: 5px; margin-top: -1px; }
.prospect-card.is-compact .pc-head .pc-div-badge { height: 22px; padding: 0 6px; font-size: 10px; }
.prospect-card.is-compact .pc-icon-btn { width: 22px; height: 22px; }
.prospect-card.is-compact .pc-meta { font-size: 12px; gap: 2px 10px; }
.prospect-card.is-compact .pc-desc { font-size: 11.5px; }
.prospect-card.is-compact .pc-status { font-size: 11.5px; }
.prospect-card.is-compact .pc-actions { padding-top: 7px; gap: 4px; }
.prospect-card.is-compact .pc-actions .btn { padding: 5px 4px; font-size: 10px; }
.prospect-card.is-compact .pc-actions .btn-ic { margin: 0; }

/* Fitxa del possible client (BBDD i seguiment): dades, seguiment i activitat.
   Capçalera fosca amb l'accent turquesa, per distingir-la d'un cop d'ull. */
.pe-modal .pe-header { background: linear-gradient(120deg, var(--iris-petrol-deep, #0b3a46), var(--iris-petrol, #0f4c5c)); border-bottom: 3px solid var(--iris-turquoise, #2bb3a8); margin-bottom: 0; }
.pe-modal .pe-header .modal-title { color: #fff; }
.pe-modal .pe-header .pe-origin { color: rgba(255, 255, 255, .78); }
.pe-modal .pe-header .modal-close { color: rgba(255, 255, 255, .85); }
.pe-modal .pe-header .modal-close:hover { color: #fff; }
.pe-side > .pe-sub { margin: 0 0 8px; }
.pe-side .cf-timeline { border-top: 0; }
.pe-side .cf-month:first-child { padding-top: 2px; }
.pe-sub { margin: 4px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--iris-petrol-deep); padding-bottom: 4px; border-bottom: 2px solid var(--iris-petrol-deep, #0b3a46); }
.pe-span-2 { grid-column: span 2; }
.pe-link { margin-left: 6px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--iris-teal); text-decoration: none; }
.pe-link:hover { text-decoration: underline; }
.pe-notice .btn { margin-left: auto; flex-shrink: 0; align-self: center; }
.pe-msg:empty { display: none; }
.pe-side .pact-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
/* Data i tipus, tot a la vista (sense scroll): en una fila si hi cap i, si
   no, en dues de tres caselles (la data i els cinc tipus), totes de 32 px,
   l'alçada de la data. */
.pact-form { container-type: inline-size; }
.pact-form .cf-sit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 0; }
.pact-form .cf-sit-row .cf-sit-types,
.pact-form .cf-sit-row .cf-type-picker { display: contents; }
.pact-form .cf-type-btn { min-width: 0; height: 32px; padding: 0 6px; justify-content: center; }
.pact-form .cf-type-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pact-form .cf-sit-row .form-input.cf-sit-date { width: 100%; min-width: 0; height: 32px; padding: 0 8px; font-size: 12.5px; }
@container (min-width: 620px) {
    .pact-form .cf-sit-row { grid-template-columns: 140px repeat(5, minmax(0, 1fr)); }
}
.pact-text { min-height: 0; font-size: 13px; padding: 7px 10px; resize: vertical; }
.pact-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pact-actions .pact-msg { margin-right: auto; }
.pact-modal .pact-form { display: flex; flex-direction: column; gap: 10px; }
.pact-modal .pact-text { min-height: 72px; }
.pact-tag { display: inline-block; margin-left: 6px; padding: 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; background: #fff6d6; color: #7d6000; border: 1px solid #f0dd96; }
.pipeline-edit-row.three { grid-template-columns: 1.2fr 1fr 1fr; }
@media (max-width: 700px) {
    .pact-modal.modal { width: calc(100% - 16px); padding: 14px 14px 16px; }
    #pact-modal.modal-overlay { align-items: flex-start; }
    .pact-modal { margin-top: 8px; }
    .pact-modal .pact-text { min-height: 0; height: 64px; }
    .pe-span-2 { grid-column: 1 / -1; }
    .pipeline-edit-row.three { grid-template-columns: 1fr; }
}
.pe-notice {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    background: #fff8e6; border: 1px solid #f0d79f; color: var(--lc-text); font-size: 13px; line-height: 1.45;
}
.pe-notice svg { color: #c99a2e; flex-shrink: 0; margin-top: 2px; }
.pe-fields .form-group { min-width: 0; }
.prospect-card a.btn, .prospect-card a.btn:hover { color: var(--lc-forest); text-decoration: none; }
.prospect-card .pc-actions .btn { line-height: 1; }
/* Al kanban, els tres botons hi caben amb el nom curt («Activitat»,
   «LinkedIn», «Detalls») des de 180 px. */
.prospect-card.is-compact .pc-lbl-x { display: none; }
@container (min-width: 180px) {
    .prospect-card.is-compact .pc-btn-label { display: inline; }
}


/* ===== Resum seguim.cli (assets/followups.js): un full de càlcul ===== */
.fu-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.fu-divs { display: inline-flex; border: 1px solid var(--lc-border-light); background: #fff; }
.fu-div-btn {
    --c: var(--iris-petrol);
    height: 32px; padding: 0 16px; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c);
}
.fu-div-btn + .fu-div-btn { border-left: 1px solid var(--lc-border-light); }
.fu-div-btn[data-div="kraft"] { --c: var(--div-mp2); }
.fu-div-btn[data-div="tisu"] { --c: var(--div-mp3); }
.fu-div-btn[data-div="afh"] { --c: #0e5a53; }
.fu-div-btn[data-div="ecommerce"] { --c: #0b6870; }
.fu-div-btn:hover { background: var(--iris-mist); }
.fu-div-btn[aria-checked="true"] { background: var(--c); color: #fff; }
.fu-div-btn:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 2px; }
/* «Es desa sol…», Actualitzar i Imprimir: sempre a la dreta, també quan
   baixen a una segona línia (mòbil). */
.fu-toolbar-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; margin-left: auto; }
.fu-status { font-size: 12px; color: var(--lc-text-muted); }
.fu-status.is-saving { color: var(--iris-turquoise-dark); }
.fu-status.is-error { color: #b3261e; font-weight: 600; }

.fu-sheet { background: #fff; border: 1px solid #d3dcdf; font-size: 13px; }
.fu-row {
    /* Tipus: l'amplada del botó més llarg; el que sobra, per al client. */
    display: grid; grid-template-columns: minmax(190px, 270px) 118px 142px minmax(220px, 1fr) 104px;
    border-bottom: 1px solid #e3e8ea; background: #fff; position: relative;
}
.fu-cell { position: relative; min-width: 0; display: flex; align-items: flex-start; border-right: 1px solid #eef1f2; }
.fu-cell:last-child { border-right: 0; }
.fu-row:not(.fu-head) .fu-cell:focus-within { box-shadow: inset 0 0 0 2px var(--iris-turquoise-dark); z-index: 2; }
.fu-head {
    position: sticky; top: var(--navbar-height); z-index: 6; background: #f1f5f6; border-bottom: 1px solid #d3dcdf;
}
.fu-head .fu-cell { padding: 8px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-text-dim); }
.fu-in {
    display: block; width: 100%; min-width: 0; border: 0; background: transparent; outline: none;
    padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.45; color: var(--lc-text);
}
.fu-in::placeholder { color: #9aa6ab; }
.fu-notes { resize: none; overflow: hidden; min-height: 36px; }
.fu-combobox { width: 100%; }
.fu-combobox .fu-client { padding-right: 34px; font-weight: 600; color: var(--iris-petrol-deep); }
.fu-c-client .cf-combobox-clear { width: 24px; height: 24px; top: 18px; }
.fu-client-list { right: auto; min-width: 340px; max-height: 300px; }
.fu-ro { padding: 8px 10px; line-height: 1.45; overflow-wrap: anywhere; }
.fu-ro-client { font-weight: 600; color: var(--iris-petrol-deep); }
.fu-ro-notes { white-space: pre-wrap; width: 100%; }
.fu-member { padding: 8px 10px; color: var(--lc-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-c-type { flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 4px; padding: 4px 6px; }
.fu-type {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; min-height: 28px;
    font: inherit; font-size: 12px; font-weight: 600; border: 1px solid transparent; cursor: pointer;
    background: #efefef; color: #555;
}
.fu-type span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-type svg { flex-shrink: 0; }
.fu-type.is-ro { cursor: default; }
.fu-type:not(.is-ro):hover { filter: brightness(.97); border-color: currentColor; }
.fu-type:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 1px; }
.fu-type--email        { background: #e3eefc; color: #1d4f91; }
.fu-type--trucada      { background: #e2f5ec; color: #17694a; }
.fu-type--videotrucada { background: #efe9fa; color: #5b3aa8; }
.fu-type--visita       { background: #fdeee0; color: #a4500c; }
.fu-type--mostres      { background: #fde8f1; color: #9c1f5c; }
.fu-type--oferta       { background: #fff6d6; color: #7d6000; }
.fu-type--fira         { background: #def4f6; color: #0e6e7a; }
.fu-type--altres, .fu-type--comercial { background: #efefef; color: #555; }
/* «IA» al costat del tipus: la mateixa alçada que la pastilla del tipus (28 px). */
.fu-ai { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 28px; padding: 0 7px; border: 1px solid transparent; font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1; background: #efe9fa; color: #5b3aa8; }
.fu-c-act { justify-content: flex-end; gap: 2px; padding: 4px 6px; }
.fu-ic {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
    border: 1px solid transparent; background: none; color: var(--iris-petrol); cursor: pointer;
}
.fu-ic:hover:not(:disabled) { border-color: var(--lc-border-light); background: var(--iris-mist); }
.fu-ic:disabled { opacity: .3; cursor: default; }
.fu-ic:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 1px; }
/* Recordatoris: groc fosc (icona i text) a tot arreu, per reconèixer-los d'un cop d'ull. */
.fu-clock.is-set { color: #fff; background: var(--rem-ink, #8a6a00); }
.fu-clock.is-set:hover { background: #6f5500; }
.fu-clock.is-sent { color: #17694a; background: #e2f5ec; }
.fu-clock.is-error { color: #b3261e; background: #fdecea; border-color: #f3c2bd; }
.fu-del { color: #b3261e; opacity: 0; }
.fu-row:hover .fu-del, .fu-row:focus-within .fu-del, .fu-del:focus-visible { opacity: 1; }
.fu-del:hover { background: #fdecea !important; border-color: #f3c2bd !important; }

/* Fila de dalt: sempre buida per afegir-ne una. */
.fu-row.is-new { background: #f4fbfa; border-bottom: 2px solid #c5e4e0; }
.fu-new-mark { display: inline-flex; align-items: center; padding: 11px 0 0 10px; color: var(--iris-turquoise-dark); flex-shrink: 0; }
.fu-row.is-new .fu-c-client .fu-combobox { flex: 1; }
/* Possibles clients al Resum: casella «Possib.» a la fila de dalt i etiqueta a les files. */
.fu-pros-toggle { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; align-self: flex-start; margin: 8px 8px 0 0; padding: 2px 6px; font-size: 11px; font-weight: 700; color: #7d6000; background: #fff6d6; border: 1px solid #f0dd96; cursor: pointer; white-space: nowrap; }
.fu-pros-toggle input { margin: 0; accent-color: #7d6000; }
.fu-pros-toggle:has(input:not(:checked)) { color: var(--lc-text-dim); background: #fff; border-color: var(--lc-border-light); }
.fu-pros-tag { flex-shrink: 0; align-self: flex-start; margin: 9px 8px 0 0; padding: 1px 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7d6000; background: #fff6d6; border: 1px solid #f0dd96; }
.fu-pr-pros { font-weight: 400; font-size: .85em; }
.fu-row.is-new .fu-in { padding-left: 8px; }
.fu-row.is-saving .fu-c-act::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50% !important; background: var(--iris-turquoise-dark); animation: fu-pulse 1s ease-in-out infinite; }
@keyframes fu-pulse { 50% { opacity: .2; } }
.fu-row.has-error { background: #fff6f5; box-shadow: inset 3px 0 0 #b3261e; }
.fu-row.is-flash { animation: fu-flash 1.6s ease-out; }
@keyframes fu-flash { from { background: #d9f2ee; } to { background: #fff; } }
@media (prefers-reduced-motion: reduce) { .fu-row.is-flash, .fu-row.is-saving .fu-c-act::before { animation: none; } }

/* Capçalera de cada dia (només els dies amb entrades). */
.fu-day {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 10px; background: #e9eff1; border-bottom: 1px solid #d3dcdf;
    font-size: 12px; font-weight: 700; color: var(--iris-petrol-deep);
}
.fu-day-tag { display: inline-block; margin-right: 8px; padding: 1px 6px; background: var(--iris-petrol); color: #fff; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.fu-day-cont { font-weight: 500; color: var(--lc-text-muted); }
.fu-day-count { font-size: 11px; font-weight: 500; color: var(--lc-text-muted); }
.fu-empty, .fu-loading { padding: 22px 16px; color: var(--lc-text-dim); font-size: 13px; }
.fu-loading { display: flex; align-items: center; gap: 10px; }
.fu-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 4px; min-height: 8px; }
.fu-pager-info { font-size: 12px; color: var(--lc-text-muted); }

/* Desplegable del tipus de contacte. */
.fu-type-menu {
    position: fixed; z-index: 1200; min-width: 200px; margin: 0; padding: 4px 0; list-style: none;
    background: #fff; border: 1px solid var(--lc-border); box-shadow: 0 10px 28px rgba(11, 58, 70, .16);
}
.fu-type-opt { display: flex; align-items: center; gap: 9px; padding: 7px 12px; font-size: 13px; cursor: pointer; background: #fff !important; outline: none; }
.fu-type-opt span { color: var(--lc-text); }
.fu-type-opt:hover, .fu-type-opt:focus { background: var(--iris-aqua-pale) !important; }
.fu-type-opt[aria-selected="true"] span { font-weight: 700; }

/* Finestreta del recordatori (també a la Fitxa cli.existent). */
.fu-pop {
    position: fixed; z-index: 1200; width: 300px; max-width: calc(100vw - 16px); padding: 14px;
    display: flex; flex-direction: column; gap: 6px;
    background: #fff; border: 1px solid var(--lc-border); box-shadow: 0 14px 36px rgba(11, 58, 70, .2); font-size: 13px;
}
.fu-pop-head { display: flex; align-items: center; gap: 8px; color: var(--iris-petrol-deep); }
.fu-pop-head strong { flex: 1; font-size: 14px; }
.fu-pop-x { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--lc-text-muted); cursor: pointer; padding: 0 2px; }
.fu-pop-client { margin: 0 0 4px; font-weight: 600; color: var(--iris-teal); }
.fu-pop-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-text-dim); margin-top: 4px; }
.fu-pop-input { padding: 6px 10px; font-size: 13px; }
.fu-pop .form-select.fu-pop-input { padding-right: 30px; background-position: right 10px center; }
.fu-pop-horizons { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--lc-border-light); }
.fu-hz { padding: 6px 2px; border: 0; background: #fff; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--lc-text-dim); }
.fu-hz + .fu-hz { border-left: 1px solid var(--lc-border-light); }
.fu-hz[aria-checked="true"] { background: var(--iris-petrol); color: #fff; font-weight: 700; }
.fu-pop-hint, .fu-pop-note { margin: 2px 0 0; font-size: 11.5px; color: var(--lc-text-muted); line-height: 1.4; }
.fu-pop-note.is-error, .fu-pop-msg { color: #b3261e; }
.fu-pop-msg { margin: 0; font-size: 12px; min-height: 0; }
.fu-pop-msg:empty { display: none; }
.fu-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

@media (max-width: 860px) {
    .fu-head { display: none; }
    .fu-row:not(.fu-head) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "client act" "type member" "notes notes";
        padding: 4px 0;
    }
    .fu-row .fu-cell { border-right: 0; }
    .fu-c-client { grid-area: client; }
    .fu-c-member { grid-area: member; justify-content: flex-end; }
    .fu-c-type { grid-area: type; }
    .fu-c-notes { grid-area: notes; }
    .fu-c-act { grid-area: act; }
    .fu-del { opacity: 1; }
    .fu-member { font-size: 12px; }
}
/* La creu del selector de client només a la cel·la on s'està escrivint. */
.fu-c-client .cf-combobox-clear { display: none; }
.fu-c-client:focus-within .cf-combobox-clear:not([hidden]) { display: inline-flex; }
.fu-pop { width: 330px; }
.fu-hz { white-space: nowrap; padding: 6px 4px; font-size: 11px; }

/* Fitxa cli.existent: recordatori en afegir una situació i a cada situació. */
.cf-rem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.cf-rem-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--rem-ink, #8a6a00); cursor: pointer; }
.cf-rem-toggle svg { color: var(--rem-ink, #8a6a00); }
.cf-rem-toggle input { accent-color: var(--rem-ink, #8a6a00); }
.cf-rem-select { width: auto; min-width: 150px; padding: 6px 30px 6px 10px; font-size: 13px; background-position: right 10px center; }
.cf-rem-select:disabled { opacity: .45; }
.cf-rem-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--rem-ink, #8a6a00); font-weight: 600; }
.cf-rem-line.is-error { color: #b3261e; }
.cf-clock.is-set { color: #fff; background: var(--rem-ink, #8a6a00); border-color: var(--rem-ink, #8a6a00); }
.cf-clock.is-sent { color: #17694a; background: #e2f5ec; }
.cf-clock.is-error { color: #b3261e; background: #fdecea; border-color: #f3c2bd; }

/* =========================================================================
   ESTADÍST. I CARTERA EN BLOCS (index.php, #section-portfolio)
   Un índex discret enganxat a sota de la barra de títol (.pf-index) i blocs
   per naturalesa (.pf-block): títol amb una ratlla a sota que talla la pàgina,
   i a dins les subseccions, més petites i sense ratlla.
   ========================================================================= */
#section-portfolio { --pf-gutter: 32px; --pf-index-h: 38px; }
@media (max-width: 1024px) { #section-portfolio { --pf-gutter: 24px; } }
@media (max-width: 767px) { #section-portfolio { --pf-gutter: 12px; } }

.pf-index {
    position: sticky;
    top: var(--navbar-height);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--pf-index-h);
    margin: calc(-1 * var(--pf-gutter)) calc(-1 * var(--pf-gutter)) 6px;
    padding: 0 var(--pf-gutter);
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--lc-border-light);
    font-family: var(--font-main);
}
.pf-index-links {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.pf-index-links::-webkit-scrollbar { display: none; }
.pf-index-links a {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    min-height: var(--pf-index-h);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--lc-text-dim);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.pf-index-links a:hover { color: var(--lc-forest); text-decoration: underline; text-underline-offset: 3px; }
.pf-index-label {
    display: inline-flex;
    align-items: center;
    padding-right: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--lc-text-muted);
    white-space: nowrap;
}
.pf-index-links a[hidden] { display: none; }
.pf-index-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pf-index-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    background: none;
    font: 500 12px var(--font-main);
    color: var(--iris-petrol-deep);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.pf-index-btn:hover { background: var(--iris-mist); border-color: var(--iris-mist-border); }
.pf-index-btn:disabled { opacity: .6; cursor: default; }
/* Si l'índex no hi cap sencer, els botons de la dreta queden en icona. */
@media (max-width: 1399px) {
    .pf-index { gap: 8px; }
    .pf-index-btn { padding: 0 6px; }
    .pf-index-btn-txt { display: none; }
}

.pf-block { margin: 0 0 28px; scroll-margin-top: calc(var(--navbar-height) + var(--pf-index-h) + 8px); }
.pf-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--iris-petrol-deep);
}
.pf-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--lc-forest);
}
.pf-block-title > svg { color: var(--iris-teal); flex-shrink: 0; }
.pf-block-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-sub-note { font-family: var(--font-main); font-size: 12px; font-weight: 400; color: var(--lc-text-muted); }

/* Subseccions dins d'un bloc: títol petit, sense ratlla. */
.pf-block .section { margin-bottom: 22px; scroll-margin-top: calc(var(--navbar-height) + var(--pf-index-h) + 8px); }
.pf-block .section-header { margin-bottom: 10px; padding-bottom: 0; border-bottom: 0; gap: 12px; flex-wrap: wrap; }
.pf-block .section-title { font-size: 15px; font-weight: 700; }
.pf-block .section-title .pf-sub-note { margin-left: 4px; }
.pf-block .vs-filters-card { margin-bottom: 14px; }
.pf-block .vs-kpi-row { margin-bottom: 14px; }
.pf-block .vs-card { margin-bottom: 14px; }
.pf-block .concentration-panel.mt-24 { margin: 18px 0 14px; }
/* Alertes de clients més denses: quatre targetes per fila. */
#pf-clients .card-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
#pf-clients .client-card { padding: 14px 16px; }
/* Alertes de clients: el primer títol enganxat a la capçalera del bloc. */
#portfolio-container > h3:first-child { margin-top: 0 !important; }
#pf-concentration:empty, #vs-clients-slot:empty { display: none; }

/* Rànquings de clients en dues columnes. */
.vs-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vs-two-col > .vs-card { margin-bottom: 14px; min-width: 0; }
.vs-two-col .vs-bar-row { grid-template-columns: 26px minmax(0, 170px) minmax(0, 1fr) 88px; }
@media (max-width: 1100px) { .vs-two-col { grid-template-columns: 1fr; } }

/* Període del bloc Vendes al títol de les targetes que en depenen. */
.vs-period-tag {
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--iris-mist-border);
    background: var(--iris-mist);
    font: 500 11px var(--font-main);
    color: var(--iris-petrol);
    vertical-align: 1px;
    cursor: pointer;
    white-space: nowrap;
}
.vs-period-tag:hover { border-color: var(--iris-teal); color: var(--lc-forest); }
@media print { .vs-period-tag { border: 0; background: none; padding: 0; } }

/* Nom de client que obre la seva fitxa (clientLinkHTML) i elements de
   gràfics amb el mateix enllaç. */
.client-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.client-link:hover, .client-link:focus-visible { color: var(--iris-teal); text-decoration: underline; text-underline-offset: 2px; }
.treemap-rect.is-client, .concentration-segment[data-open-client], .vs-scatter-dot { cursor: pointer; }
.vs-scatter-dot:hover { fill-opacity: .85; }

/* Fitxa ràpida d'un client (assets/client-peek.js). */
.client-peek {
    position: fixed;
    z-index: 400;
    width: 300px;
    max-width: calc(100vw - 16px);
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--iris-mist-border);
    border-top: 3px solid var(--iris-teal);
    box-shadow: 0 8px 24px rgba(11, 58, 70, 0.16);
    font-family: var(--font-main);
    font-size: 12.5px;
    color: var(--lc-text);
    line-height: 1.4;
}
.client-peek[hidden] { display: none; }
.client-peek .cp-name { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--lc-forest); margin-bottom: 4px; }
.client-peek .cp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 8px; }
.client-peek .cp-meta .abc-badge { width: 18px; height: 16px; font-size: 10px; }
.client-peek .cp-abc-txt { font-size: 11.5px; color: var(--lc-text-dim); margin-right: 4px; }
.client-peek .cp-rows { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid var(--tbl-rule); }
.client-peek .cp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.client-peek .cp-label { color: var(--lc-text-dim); white-space: nowrap; }
.client-peek .cp-value { text-align: right; min-width: 0; }
.client-peek .cp-dim { color: var(--lc-text-muted); }
.client-peek .cp-chg { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.client-peek .cp-chg.up { color: var(--lc-tech-green); }
.client-peek .cp-chg.down { color: var(--lc-danger); }
.client-peek .cp-chg.flat { color: var(--lc-text-dim); }
.client-peek .cp-sit { margin-top: 2px; padding: 6px 0 0; border-top: 1px solid var(--tbl-rule); }
.client-peek .cp-sit-head { font-size: 11px; font-weight: 600; color: var(--iris-petrol); margin-bottom: 2px; }
.client-peek .cp-sit-text { color: var(--lc-text-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.client-peek .cp-empty { color: var(--lc-text-muted); padding: 4px 0 6px; }
.client-peek .cp-loading { display: flex; justify-content: center; padding: 14px 0; }
.client-peek .cp-loading .spinner { width: 18px; height: 18px; border-width: 2px; }
.client-peek .cp-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.client-peek .cp-open { display: inline-flex; align-items: center; gap: 4px; }
@media print { .client-peek { display: none !important; } }

/* =========================================================================
   BARRA SUPERIOR: selector de divisió desplegable (mòbil) i botó «+»
   (registrar activitat, assets/quick-activity.js).
   ========================================================================= */
.navbar-div-dropdown { display: none; position: relative; }
.navbar-div-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 8px 0 6px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font: 700 12px var(--font-main);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.navbar-div-dd-btn .div-icon { display: flex; }
.navbar-div-dd-btn .div-icon svg { width: 22px; height: 22px; }
.navbar-div-dd-chev { opacity: .8; transition: transform .15s; }
.navbar-div-dd-btn[aria-expanded="true"] .navbar-div-dd-chev { transform: rotate(180deg); }
.navbar-div-dd-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 300;
    min-width: 248px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--iris-mist-border);
    box-shadow: 0 12px 32px rgba(11, 58, 70, 0.22);
}
.navbar-div-dd-menu[hidden] { display: none; }
.navbar-div-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    background: none;
    text-align: left;
    font: 13px var(--font-main);
    color: var(--lc-text);
    cursor: pointer;
}
.navbar-div-dd-item .div-icon { display: flex; width: 24px; justify-content: center; color: var(--iris-petrol); }
.navbar-div-dd-text { display: flex; flex-direction: column; line-height: 1.25; }
.navbar-div-dd-text strong { font-size: 13px; color: var(--lc-forest); }
.navbar-div-dd-text { font-size: 11.5px; color: var(--lc-text-dim); }
.navbar-div-dd-item:hover, .navbar-div-dd-item:focus-visible { background: var(--iris-aqua-pale); outline: none; }
.navbar-div-dd-item.is-active { background: var(--iris-mist); box-shadow: inset 3px 0 0 var(--iris-teal); }

.navbar-quick { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; }
.navbar-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px 0 9px;
    border: 0;
    background: var(--iris-turquoise-dark);
    color: #fff;
    font: 600 12.5px var(--font-main);
    cursor: pointer;
    transition: background-color .15s, transform .15s;
}
.navbar-add-btn:hover { background: var(--iris-turquoise); }
/* Batec suau cap a un aiguamarina més viu, amb un halo que s'expandeix, perquè
   el «+» es vegi. S'atura en passar-hi el ratolí o amb el focus, i amb
   «reduir moviment» al sistema. */
@keyframes iris-add-pulse {
    0%, 100% { background-color: var(--iris-turquoise-dark); box-shadow: 0 0 0 0 rgba(45, 226, 200, 0); }
    45% { background-color: #19c2ae; box-shadow: 0 0 0 0 rgba(45, 226, 200, 0.55); }
    75% { background-color: #15a99a; box-shadow: 0 0 0 7px rgba(45, 226, 200, 0); }
}
.navbar-add-btn { animation: iris-add-pulse 2.6s ease-in-out infinite; }
.navbar-add-btn:hover, .navbar-add-btn:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) { .navbar-add-btn { animation: none; } }
.navbar-add-btn:active { transform: scale(.96); }
.navbar-add-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Diàleg «Registrar activitat». */
html.qa-open { overflow: hidden; }
.qa-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--navbar-row) + var(--safe-top) + 16px) 16px 16px;
    background: rgba(8, 30, 38, 0.45);
    font-family: var(--font-main);
}
.qa-overlay[hidden] { display: none; }
.qa-dialog {
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - var(--navbar-row) - 32px);
    overflow-y: auto;
    background: #fff;
    border-top: 3px solid var(--iris-turquoise-dark);
    box-shadow: 0 18px 48px rgba(8, 30, 38, 0.3);
    padding: 16px 18px 18px;
}
.qa-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qa-title { margin: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--lc-forest); }
.qa-close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--lc-text-muted); cursor: pointer; padding: 0 4px; }
.qa-close:hover { color: var(--lc-forest); }
.qa-label { display: block; margin: 10px 0 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lc-text-dim); }
/* Client i, a la mateixa fila, la casella «Possible» (possibles clients). */
.qa-client-row { display: flex; align-items: center; gap: 10px; }
.qa-client-row .qa-combobox { flex: 1 1 auto; min-width: 0; }
.qa-pros { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 38px; padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--lc-text-dim); background: #fff; border: 1px solid var(--lc-border-light); cursor: pointer; white-space: nowrap; user-select: none; }
.qa-pros input { width: 15px; height: 15px; margin: 0; accent-color: #7d6000; }
.qa-pros:has(input:checked) { color: #7d6000; background: #fff6d6; border-color: #f0dd96; }
.qa-form .form-input, .qa-form .form-textarea { padding: 9px 12px; font-size: 14px; }
.qa-form .cf-combobox .form-input { padding-left: 36px; }
.qa-form .form-input.is-invalid { border-color: var(--lc-danger); }
.qa-types { margin-bottom: 0; }
.qa-row { display: flex; align-items: center; gap: 10px; }
.qa-row .qa-label { margin: 10px 0 0; }
.qa-date { width: auto; margin-top: 10px; height: 36px; padding: 0 10px !important; }
.qa-msg:empty { display: none; }
.qa-msg { margin-top: 10px; font-size: 12.5px; font-weight: 600; }
.qa-msg.is-error { color: #b3261e; }
.qa-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.qa-toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 10px 14px;
    background: var(--iris-petrol-deep);
    color: #fff;
    font: 13px var(--font-main);
    box-shadow: 0 10px 28px rgba(8, 30, 38, 0.3);
    transform: translate(-50%, 20px);
    opacity: 0;
    transition: transform .25s, opacity .25s;
}
.qa-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.qa-toast svg { color: #7fe0c4; flex-shrink: 0; }
.qa-toast a { color: #9fe8e1; font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) {
    .qa-overlay { padding: 8px; align-items: flex-end; }
    .qa-dialog { max-height: calc(100dvh - 16px); }
    .qa-types .cf-type-btn { flex: 1 1 calc(50% - 6px); justify-content: center; height: 38px; }
}
@media (max-width: 767px) {
    .navbar-div-dropdown { display: block; }
    /* Al mòbil (i a l'app), «Registr. activitat» al costat del «+»; en
       pantalles estretes, en dues línies perquè la barra hi càpiga. */
    .navbar-add-txt { display: none; }
    .navbar-add-btn { gap: 5px; padding: 0 9px 0 7px; font-size: 12px; }
}
@media print { .navbar-quick, .qa-overlay, .qa-toast { display: none !important; } }

/* =========================================================================
   INICI (index.php #section-home, includes/home.php)
   ========================================================================= */
.home { max-width: 1080px; margin: 0 auto; padding: 8px 0 12px; }
.home-search { display: flex; align-items: stretch; gap: 0; max-width: 720px; margin: 8px auto 0; box-shadow: 0 6px 22px rgba(11, 58, 70, 0.10); }
.home-combobox { flex: 1 1 auto; min-width: 0; }
.home-combobox .cf-combobox-icon { left: 16px; }
.home-search .form-input { height: 52px; padding: 0 44px 0 46px; font-size: 16px; border-color: var(--iris-mist-border); border-right: 0; }
.home-search .form-input:focus { border-color: var(--iris-teal); }
.home-search .cf-client-list { text-align: left; }
.home-search-go {
    flex: 0 0 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--iris-petrol-deep);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s;
}
.home-search-go:hover { background: var(--iris-teal); }
.home-search-go:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 2px; }
.home-search-hint { max-width: 720px; margin: 8px auto 0; font-size: 13px; color: #8a5a00; }
.home-search-hint[hidden] { display: none; }
.home-group { margin-top: 22px; }
.home-group-title {
    margin: 0 0 10px;
    font: 600 11px var(--font-main);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lc-text-muted);
}
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
/* Cada rajola, d'un color sòlid propi (--tile, includes/home.php): tots
   prou foscos per al text blanc (contrast ≥ 4,9:1). */
.home-tile {
    --tile: var(--iris-petrol-deep);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--tile);
    border: 0;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: box-shadow .15s, transform .15s, filter .15s;
}
.home-tile:hover { filter: brightness(1.1) saturate(1.05); box-shadow: 0 8px 20px color-mix(in srgb, var(--tile) 35%, transparent); transform: translateY(-1px); }
.home-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--tile) 55%, #fff); outline-offset: 2px; }
.home-tile-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.home-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-tile-title { font: 600 14px var(--font-heading); color: #fff; line-height: 1.25; }
.home-tile-sub { font-size: 12px; color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .home-tile, .home-tile:hover { transition: none; transform: none; } }
@media (max-width: 767px) {
    .home { padding-top: 4px; }
    .home-search { margin-top: 4px; }
    .home-search .form-input { height: 48px; font-size: 16px; }
    .home-group { margin-top: 18px; }
    .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .home-tile { gap: 9px; padding: 10px; }
    .home-tile-icon { flex-basis: 36px; width: 36px; height: 36px; }
    .home-tile-icon svg { width: 21px; height: 21px; }
    .home-tile-title { font-size: 13px; }
    .home-tile-sub { display: none; }
}

/* Peu: instal·lar l'app i APK d'Android (index.php). */
.lc-footer-app { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.lc-footer-app[hidden], .lc-footer-app-link[hidden] { display: none; }
.lc-footer-app-link { padding: 0; border: 0; background: none; font: 11px var(--font-main); color: var(--lc-text-muted); text-decoration: none; cursor: pointer; }
.lc-footer-app-link:hover { color: var(--iris-teal); text-decoration: underline; }
/* iPhone/iPad: instruccions per afegir IRIS a la pantalla d'inici. */
.ios-install-modal { max-width: 440px; padding: 24px; }
.ios-install-modal .modal-title { font-size: 18px; }
.ios-install-steps { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--lc-text); }
.ios-install-ico { display: inline-flex; vertical-align: -4px; color: var(--iris-turquoise-dark, #0e7c86); }
.ios-install-where { color: var(--lc-text-muted); }
.ios-install-note { margin: 0 0 16px; font-size: 12px; color: var(--lc-text-muted); }
.ios-install-actions { display: flex; justify-content: flex-end; }

/* L'Inici només és per al mòbil: a l'ordinador, el menú no el porta i
   index.php obre Estadíst. i cartera. Al mòbil sense secció, html.iris-start-home
   (script del <head> d'index.php) ensenya l'Inici fins que el JS tria la secció. */
html.iris-start-home #section-portfolio { display: none; }
html.iris-start-home #section-home { display: block; }
@media (min-width: 768px) {
    .sidebar-link[data-section="home"] { display: none; }
    .sidebar-link[data-section="home"] + .sidebar-section-title { margin-top: 0; }
}
.navbar-add-txt-m { display: none; }
@media (max-width: 767px) {
    .navbar-add-txt-m { display: inline; white-space: nowrap; }
}
@media (max-width: 400px) {
    .navbar-add-txt-m { white-space: normal; max-width: 60px; line-height: 1.1; text-align: left; }
}

/* Fitxa de client: correus amb el client (api/gmail_sync.php). */
.cf-mail-sync { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: 12px; }
.cf-mail-sync[hidden] { display: none; }
.cf-mail-sync-info { display: inline-flex; align-items: center; gap: 6px; color: var(--lc-text-dim); }
.cf-mail-sync-info.is-running { color: var(--lc-danger); font-weight: 600; }
/* Lectura de correus en curs: «Aturar» i «En curs» en vermell. */
.btn.btn-stop { color: var(--lc-danger); border-color: var(--lc-danger); }
.btn.btn-stop:hover { opacity: 1; background: var(--lc-danger); color: var(--lc-white); }
.gs-running { color: var(--lc-danger); }
.gs-box-errors { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; font-size: 12px; color: var(--text-muted, #6b7280); }
.gs-box-errors span[title] { cursor: help; }
.cf-mail-sync-info .spinner { width: 12px; height: 12px; border-width: 2px; margin: 0; }
.cf-mail-sync .form-select.cf-mail-sync-box { width: auto; max-width: 190px; height: 30px; padding: 0 30px 0 8px; font-size: 12px; background-position: right 10px center; }
.cf-mail-sync .btn { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 767px) { .cf-mail-sync { justify-content: flex-start; } }
.gs-row [hidden] { display: none !important; }

/* Configuració → Correus amb clients: desplegables, interruptor i botons
   de cada fila a la mateixa alçada. */
.gs-row { --gs-h: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gs-row .form-select { width: auto; height: var(--gs-h); padding: 0 34px 0 12px; font-size: 13px; background-position: right 12px center; }
.gs-row .io-split-toggle { height: var(--gs-h); box-sizing: border-box; padding: 0 12px; border-radius: 0; }
.gs-row .btn { height: var(--gs-h); box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; white-space: nowrap; }
.gs-row .btn svg { flex-shrink: 0; }

/* Finestra «Vinculació clients ↔ dominis de correu». */
.modal.links-modal { max-width: 920px; width: 94%; max-height: 88vh; display: flex; flex-direction: column; padding: 22px 24px; }
.links-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 10px; }
.links-tools .form-input { flex: 1 1 260px; height: 36px; padding: 0 12px; font-size: 13px; }
.links-active { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lc-text); cursor: pointer; }
.links-msg:empty { display: none; }
.links-msg .alert { margin-bottom: 8px; padding: 8px 12px; font-size: 13px; }
.links-table { overflow-y: auto; min-height: 120px; border-top: 1px solid var(--lc-border-light); }
.links-table .data-table td { vertical-align: top; }
.links-table .data-table td:first-child { width: 38%; }
.link-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.link-chip { display: inline-flex; align-items: stretch; border: 1px solid #c3d8f5; background: #e3eefc; color: #1d4f91; font-size: 12.5px; }
.link-chip-text { border: 0; background: none; color: inherit; font: inherit; padding: 3px 4px 3px 8px; cursor: pointer; }
.link-chip-text:hover { text-decoration: underline; }
.link-chip-del { display: inline-flex; align-items: center; border: 0; border-left: 1px solid #c3d8f5; background: none; color: inherit; padding: 0 6px; cursor: pointer; }
.link-chip-del:hover { background: #fde2e1; color: var(--lc-danger); }
.link-add { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--iris-mist-border); background: none; padding: 3px 8px; font: 500 12px var(--font-main); color: var(--iris-turquoise-dark); cursor: pointer; }
.link-add:hover { border-color: var(--iris-turquoise-dark); background: var(--iris-aqua-pale); }
.link-edit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.link-edit .form-input.link-input { width: 220px; height: 30px; padding: 0 8px; font-size: 13px; }
.link-edit .btn { height: 30px; }

/* Possibles clients: «Afegir ▾» (manualment / buscar amb IA). */
.add-menu { position: relative; display: inline-flex; }
.add-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.add-menu-chev { margin-left: 2px; opacity: .85; }
.add-menu-list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 270px; background: #fff; border: 1px solid var(--lc-border, #d9dcd5); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); z-index: 60; padding: 4px 0; }
.add-menu-list[hidden] { display: none; }
.add-menu-list button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 14px; background: none; border: 0; text-align: left; font: inherit; font-size: 13px; color: var(--text, #1f2a24); cursor: pointer; }
.add-menu-list button:hover, .add-menu-list button:focus-visible { background: #f1f5f2; outline: none; }
.add-menu-list svg { color: var(--verde-oscuro, #075236); flex-shrink: 0; }

/* Buscar possibles clients amb IA. */
.twin-form { padding: 4px 0 8px; }
.twin-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; color: var(--text, #1f2a24); }
.twin-sentence .twin-client { width: 230px; height: 38px; }
.twin-sentence .twin-select { width: auto; max-width: 240px; height: 38px; padding-top: 0; padding-bottom: 0; line-height: 36px; }
.twin-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.twin-form-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.twin-profile { margin: 14px 0 8px; padding: 10px 12px; background: #f4f6f2; font-size: 13px; line-height: 1.5; }
.twin-instr { margin-top: 6px; font-weight: 700; color: var(--lc-danger, #c0392b); }
.twin-sentence .twin-search-btn { margin-left: auto; height: 38px; display: inline-flex; align-items: center; gap: 7px; }
.comparativa-prod-check { display: inline-flex; align-items: center; gap: 8px; margin: -2px 0 12px; font-size: 13px; color: var(--text, #1f2a24); cursor: pointer; user-select: none; }
.comparativa-prod-check input { width: 16px; height: 16px; accent-color: var(--verde-oscuro, #075236); }
.twin-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; margin-top: 8px; }
.twin-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--lc-border-light, #e6e8e2); background: #fff; cursor: pointer; }
.twin-item:hover { border-color: var(--verde-oscuro, #075236); }
.twin-item:has(.twin-check:checked) { border-color: var(--verde-oscuro, #075236); background: #f2f8f4; }
.twin-item.is-blocked { cursor: default; background: #fafaf8; }
.twin-item.is-blocked:hover { border-color: var(--lc-border-light, #e6e8e2); }
.twin-check { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--verde-oscuro, #075236); }
.twin-body { min-width: 0; flex: 1; }
.twin-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.twin-name { font-weight: 700; font-size: 14px; color: var(--text, #1f2a24); }
.twin-badge { font-size: 11px; font-weight: 700; padding: 1px 7px; background: #e8ebe6; color: #555; }
.twin-badge.is-added { background: #e1f1e7; color: var(--verde-intenso, #2a7d5f); }
.twin-conf { margin-left: auto; font-size: 11px; color: var(--text-muted, #6b6b63); }
.twin-body .pc-meta { margin-top: 4px; }
.twin-why { margin-top: 5px; font-size: 13px; line-height: 1.45; color: #333; }
.twin-size { margin-top: 3px; font-size: 12px; color: var(--text-muted, #6b6b63); }
.twin-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lc-border-light, #e6e8e2); }
#twin-add-msg .alert { margin: 10px 0 0; }
@media (max-width: 640px) { .twin-sentence .twin-client, .twin-sentence .twin-select { width: 100%; max-width: none; } }

/* Resum seguim.cli: descriptor, mode ruta de visites i impressió. */
.fu-intro { margin: 0 0 12px; max-width: 980px; font-size: 13px; line-height: 1.5; color: var(--lc-text-dim, #5a6260); }
.fu-route { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 9px 12px; background: #e9f3f5; border: 1px solid #a9cdd4; border-left: 4px solid var(--iris-petrol, #0f4c5c); color: #0b3a46; font-size: 13px; }
.fu-route[hidden] { display: none; }
.fu-route svg { flex-shrink: 0; color: var(--iris-petrol, #0f4c5c); }
.fu-route-text { flex: 1; min-width: 0; line-height: 1.45; }
.fu-route-end { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; }
.fu-route-line, .cf-entry-route { margin-top: 3px; font-size: 12px; color: #4a5560; }
.fu-c-notes:has(.fu-route-line) { flex-direction: column; align-items: stretch; }
.fu-c-notes .fu-route-line { margin: -4px 0 6px; padding: 0 10px; }
.fu-type-opt.is-route { border-top: 1px solid var(--lc-border-light, #e6e8e2); margin-top: 4px; padding-top: 8px; font-weight: 600; }
.fu-route-pop { width: 320px; }
.fu-print-btn { display: inline-flex; align-items: center; gap: 6px; }
.fu-print-modal { max-width: 560px; }
.fu-print-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fu-print-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--lc-border-light, #e6e8e2); cursor: pointer; }
.fu-print-opt:has(input:checked) { border-color: var(--iris-petrol, #0f4c5c); background: #f2f7f8; }
.fu-print-opt:has(input:disabled) { opacity: .6; cursor: default; }
.fu-print-opt input { margin-top: 3px; accent-color: var(--iris-petrol, #0f4c5c); }
.fu-print-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.fu-print-name { font-weight: 700; font-size: 14px; }
.fu-print-desc { font-size: 12px; color: var(--lc-text-dim, #5a6260); }
.fu-print-sel { height: 38px; max-width: 100%; padding-top: 0; padding-bottom: 0; line-height: 36px; }
.fu-print-note { margin: 12px 0 0; font-size: 12px; color: var(--lc-text-dim, #5a6260); }
.fu-print-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.print-followups, .print-followups * { color: #000 !important; }
.print-followups .fu-pr-intro { margin-bottom: 4mm; }
.print-followups .fu-pr-title { font-family: var(--font-heading), Arial, sans-serif; font-size: 14pt; font-weight: 700; }
.print-followups .fu-pr-sub { font-size: 8.5pt; margin-top: 1mm; }
.print-followups .fu-pr-client { margin-top: 4mm; padding-bottom: 1mm; border-bottom: .8pt solid #000; font-size: 10.5pt; font-weight: 700; }
.print-followups .fu-pr-item { padding: 1.4mm 0; border-bottom: .4pt solid #999; font-size: 8.5pt; line-height: 1.4; }
.print-followups .fu-pr-head { font-size: 8pt; margin-bottom: .5mm; }
.print-followups .fu-pr-text { white-space: pre-wrap; }
.print-followups .fu-pr-route { font-size: 7.8pt; margin-top: .5mm; }
.print-followups .fu-pr-empty { font-size: 8.5pt; font-style: italic; margin: 1.5mm 0 0; }
.print-client-file .cf-print-route { font-size: 7.5pt; color: #444; margin-top: .4mm; }

/* Comparativa per períodes a la impressió (Resum i informe d'una divisió):
   sense filtres, amb el període escrit en lloc del desplegable, i sempre a
   tres columnes (l'amplada d'A4 activaria la vista d'una sola columna). */
.comparativa-period-label { height: 36px; display: flex; align-items: center; padding: 0 10px; border: 1px solid #d4d3c4; background: #fff; font-size: 13px; font-weight: 600; box-sizing: border-box; }
.resum-row-comparativa .comparativa-card { margin-bottom: 0; }
.print-resum .comparativa-print { padding: 2mm 0 0; border: 0; box-shadow: none; }
.print-resum .comparativa-print .comparativa-grid { grid-template-columns: 2fr 2fr 1fr !important; gap: 2mm; }
.print-resum .comparativa-print .comparativa-panel { padding: 1.5mm; gap: 1.5mm; }
.print-resum .comparativa-print .comparativa-panel-body { grid-auto-rows: 5.2mm; column-gap: 1.5mm; }
.print-resum .comparativa-print .comparativa-row, .print-resum .comparativa-print .comparativa-delta { font-size: 7pt; }
.print-resum .comparativa-print .comparativa-period-label, .print-resum .comparativa-print .comparativa-delta-head { height: 6mm; font-size: 7.5pt; }
.print-resum .comparativa-print .comparativa-row-group, .print-resum .comparativa-print .comparativa-delta-group { font-size: 6.5pt; }
.print-resum .comparativa-print .cmp-flag { font-size: 6pt; padding: 0 3px; border: .5pt solid #000; }
.print-resum .comparativa-print .comparativa-note { font-size: 7pt; margin-top: 1.5mm; }
.print-resum .comparativa-print .client-link { font-size: inherit; }

/* Mòbil: «Tornar a Inici» a la barra, a l'esquerra del selector de divisió
   i del «+», amb el mateix marc, fons i lletra que el selector. */
.navbar-home-btn { display: none; }
@media (max-width: 767px) {
    .navbar-home-btn {
        display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
        height: 36px; padding: 0 8px; margin-left: auto; box-sizing: border-box;
        border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: #fff;
        font: 700 12px var(--font-main); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
    }
    .navbar-home-btn:hover, .navbar-home-btn:focus-visible { background: rgba(255,255,255,0.16); color: #fff; }
    .navbar-home-txt { white-space: nowrap; }
    body:not(.iris-on-home) .navbar-center { flex: 0 0 auto; }
    body:not(.iris-on-home) .navbar-quick { margin-left: 0; }
    body.iris-on-home .navbar-home-btn { display: none; }
}
@media print { .navbar-home-btn { display: none !important; } }
/* «Tornar a Inici» sempre en una línia. Si amb el selector de divisió no hi
   cap (pantalles estretes), queda la icona i «INICI». El desplegable de
   divisió es queda amb el text (MP2, RESUM) sense la icona i, per sota de
   375 px, també sense la fletxa i amb el «+» més ajustat. */
@media (max-width: 540px) {
    body:not(.iris-no-divisions) .navbar-home-pre { display: none; }
}
@media (max-width: 420px) {
    body:not(.iris-on-home) .navbar-row-top { gap: 4px; }
    body:not(.iris-on-home) .navbar-div-dd-btn .div-icon { display: none; }
    .navbar-home-btn { gap: 4px; padding: 0 6px; }
}
@media (max-width: 374px) {
    body:not(.iris-on-home) .navbar-div-dd-chev { display: none; }
    body:not(.iris-on-home) .navbar-div-dd-btn { padding: 0 7px; }
    body:not(.iris-on-home) .navbar-add-btn { gap: 3px; padding: 0 6px 0 5px; }
    body:not(.iris-on-home) .navbar-row-top { gap: 3px; padding-right: 8px; }
}

/* ---- Estadíst. i cartera → Vendes per geografies (assets/sales-geo.js) ----
   Mapes sense tiles: els països en gris clar (amb vendes, una mica més fosc)
   sobre un fons blanc. Bombolles amb un anell blanc perquè se'n vegi la vora
   quan es toquen. */
#pf-geo .pf-block-head { flex-wrap: wrap; gap: 10px; }
.geo-map { height: 360px; border: 1px solid var(--lc-border-light); z-index: 0; }
.geo-map.leaflet-container { background: #fbfcfc; }
.geo-map-main { height: 480px; }
.geo-map.is-list { height: 380px; }
.geo-map .leaflet-interactive { cursor: pointer; }
.geo-sub { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-text-dim); }
.geo-tip { font-size: 12px; line-height: 1.45; }
.geo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 10px; font-size: 12px; color: var(--lc-text-dim); }
.geo-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.geo-legend-dots { display: inline-flex; align-items: center; gap: 3px; }
.geo-legend-dots i { display: inline-block; border-radius: 50% !important; background: #9aa3a8; }
.geo-legend-ramp { display: inline-flex; }
.geo-legend-ramp i { display: inline-block; width: 18px; height: 10px; }
.geo-legend-scale { display: inline-flex; gap: 10px; font-size: 11px; }
.geo-legend-note { flex: 1 1 100%; font-size: 11.5px; color: var(--lc-text-muted); }
/* Llistat per països: fila per país, desplegable amb els clients. */
.geo-ctable { table-layout: fixed; }
.geo-ctable .geo-col-n { width: 90px; }
.geo-ctable .geo-col-eur { width: 140px; }
.geo-ctable .geo-col-pct { width: 110px; }
.geo-crow { cursor: pointer; }
.geo-crow td { background: var(--tbl-group-bg); }
.geo-crow.is-open td { background: var(--tbl-group-open-bg); }
.geo-crow:hover strong { color: var(--iris-teal); }
.geo-ctoggle { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.geo-ctoggle:focus-visible { outline: 2px solid var(--iris-turquoise-dark); outline-offset: 2px; }
.geo-chev { flex-shrink: 0; color: var(--lc-text-muted); transition: transform .2s cubic-bezier(.25, 1, .5, 1); }
.geo-crow.is-open .geo-chev { transform: rotate(90deg); }
.geo-sub-row td:first-child { padding-left: 30px; }
.geo-sub-row td { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .geo-chev { transition: none; } }
@media (max-width: 600px) {
    .geo-ctable { min-width: 600px; }
    .geo-ctable .geo-col-n { width: 64px; }
    .geo-ctable .geo-col-eur { width: 108px; }
    .geo-ctable .geo-col-pct { width: 86px; }
    .geo-sub-row td:first-child { padding-left: 16px; }
}
.geo-country { margin-top: 12px; scroll-margin-top: calc(var(--navbar-height, 56px) + 60px); }
.geo-table td:first-child span[data-open-client] { cursor: pointer; color: var(--iris-petrol-deep); font-weight: 600; }
.geo-table td:first-child span[data-open-client]:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .geo-map { height: 240px; }
    .geo-map-main { height: 340px; }
    .geo-map.is-list { height: 260px; }
    .geo-table th:nth-child(3), .geo-table td:nth-child(3) { white-space: nowrap; }
}

/* Impressió de Vendes per geografies: mapa (60 %) i, al costat, la llista
   A–J (lletra, client, t/any, tendència), tot en blanc i negre. */
.geo-pr { margin: 0 0 4mm; color: #000; }
.geo-pr-title { margin: 0 0 1.5mm; font-size: 8pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.geo-pr-row { display: flex; align-items: flex-start; gap: 3mm; }
.geo-pr-map { flex: 0 0 60%; }
.geo-pr-svg { display: block; width: 100%; height: auto; }
.geo-pr-table { flex: 1 1 40%; border-collapse: collapse; font-size: 7.5pt; line-height: 1.3; color: #000; }
.geo-pr-table td { padding: .6mm 1mm; border-bottom: .2mm solid #bbb; vertical-align: top; }
.geo-pr-l { width: 4mm; font-weight: 700; text-align: center; }
.geo-pr-n { word-break: break-word; }
.geo-pr-q { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.geo-pr-a { width: 6mm; white-space: nowrap; text-align: center; font-weight: 700; }
.geo-pr-empty { margin: 0; font-size: 7.5pt; color: #000; }
/* Configuració → objectius dels KPIs del seguiment, per divisió. */
.pt-table td.num { text-align: right; }
.pt-input { max-width: 120px; margin-left: auto; text-align: right; }