/* ==========================================================================
   TRIA Projects · estil del CRM (alineat amb triaprojects.com)
   Monocrom, tipografia Geist, botons en píndola, línies fines, sense ombres dures.
   ========================================================================== */

:root {
    --tria-bg: #FFFFFF;
    --tria-bg-soft: #FAFAFA;
    --tria-surface-2: #F5F5F5;
    --tria-surface-3: #EDEDED;
    --tria-ink: #0A0A0A;
    --tria-text-2: #525252;
    --tria-text-3: #737373;
    --tria-line: #E5E5E5;
    --tria-line-strong: #D4D4D4;
    --tria-accent: #2B4ACB;
    --tria-accent-soft: #EEF1FC;
    --tria-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px rgba(10, 10, 10, .06);
    --tria-gap: 16px;
}

/* ---------- Base ---------- */
.fi-body {
    background-color: var(--tria-bg-soft);
    color: var(--tria-ink);
    -webkit-font-smoothing: antialiased;
}

.fi-header-heading {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.fi-header-subheading,
.fi-breadcrumbs-item-label {
    color: var(--tria-text-3);
}

/* ---------- Barra superior ---------- */
.fi-topbar {
    background-color: var(--tria-bg);
    box-shadow: none;
    border-bottom: 1px solid var(--tria-line);
}

.fi-sidebar-header {
    background-color: transparent;
    box-shadow: none;
}

/* Logo */
.tria-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tria-ink);
    white-space: nowrap;
}

.tria-brand-mark {
    width: 28px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.tria-brand-name {
    font-size: 17px;
    letter-spacing: -0.01em;
    line-height: 1;
}

.tria-brand-name strong {
    font-weight: 700;
    color: #0A0A0A;
}

.tria-brand-name span {
    font-weight: 400;
    color: #555555;
}

.tria-brand-tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--tria-text-2);
    border: 1px solid var(--tria-line);
    border-radius: 9999px;
    padding: 1px 8px;
}

/* ---------- Columna lateral: targeta separada del contingut ---------- */
@media (min-width: 64rem) {
    /* Oberta o plegada (només icones), sempre com a targeta */
    .fi-main-sidebar {
        top: calc(var(--topbar-height) + var(--tria-gap));
        height: calc(100dvh - var(--topbar-height) - (var(--tria-gap) * 2));
        margin: var(--tria-gap) 0 var(--tria-gap) var(--tria-gap);
        background-color: var(--tria-bg) !important;
        border: 1px solid var(--tria-line);
        border-radius: 16px;
    }

    /* Separació justa entre la columna i el contingut */
    .fi-main {
        padding-inline-start: 20px;
    }

    /* Nansa per canviar l'amplada (arrossegar; doble clic = amplada per defecte) */
    .tria-resizer {
        position: absolute;
        top: 16px;
        bottom: 16px;
        right: -5px;
        width: 10px;
        cursor: col-resize;
        z-index: 40;
    }

    .tria-resizer::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 4px;
        width: 2px;
        border-radius: 2px;
        background: transparent;
        transition: background-color .15s;
    }

    .tria-resizer:hover::after,
    html.tria-resizing .tria-resizer::after {
        background: var(--tria-line-strong);
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .tria-resizer {
        display: none;
    }

    html.tria-resizing,
    html.tria-resizing * {
        cursor: col-resize !important;
        user-select: none !important;
    }

    html.tria-resizing .fi-sidebar,
    html.tria-resizing .fi-main-ctn {
        transition: none !important;
    }
}

/* Fletxes de plegar/desplegar a dalt de la columna (substitueixen la fletxa de la barra superior) */
.tria-collapse-row {
    display: none;
}

@media (min-width: 64rem) {
    .fi-topbar-collapse-sidebar-btn-ctn {
        display: none !important;
    }

    .tria-collapse-row {
        display: flex;
        justify-content: flex-end;
        margin: -6px -4px 4px;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .tria-collapse-row {
        justify-content: center;
        margin-inline: 0;
    }

    .tria-collapse-btn {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 9999px;
        color: var(--tria-text-3);
    }

    .tria-collapse-btn:hover {
        background: var(--tria-surface-2);
        color: var(--tria-ink);
    }

    .tria-collapse-btn svg {
        width: 18px;
        height: 18px;
    }

    .fi-main-sidebar.fi-sidebar-open .tria-icon-expand,
    .fi-main-sidebar:not(.fi-sidebar-open) .tria-icon-collapse {
        display: none;
    }
}

/* Menú a tota l'alçada: Administració queda al peu de la columna */
.fi-sidebar-nav {
    padding-inline: 14px;
    padding-block: 16px;
    row-gap: 8px;
}

.fi-sidebar-nav-groups {
    flex-grow: 1;
    row-gap: 20px;
}

.fi-sidebar-group[data-group-label="Administració"] {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--tria-line);
}

.fi-sidebar-group-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--tria-text-3);
    letter-spacing: 0;
}

.fi-sidebar-item-btn {
    border-radius: 10px;
}

.fi-sidebar-item-label {
    color: var(--tria-text-2);
    font-weight: 500;
}

.fi-sidebar-item-btn > .fi-icon {
    color: var(--tria-text-3);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--tria-surface-2);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--tria-ink);
}

/* ---------- Botons: píndola ---------- */
.fi-btn {
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-icon-btn {
    border-radius: 9999px;
}

/* ---------- Seccions, taules, widgets: targetes amb línia fina ---------- */
/* Filament dibuixa les vores amb box-shadow (ring): les substituïm per una línia fina */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-simple-main,
.fi-modal-window {
    border-radius: 16px;
    box-shadow: none;
    border: 1px solid var(--tria-line);
}

/* Capçalera de cada caixa: franja diferenciada (fons suau + línia), icona en pastilla */
.fi-section:not(.fi-section-not-contained) > .fi-section-header {
    background-color: var(--tria-bg-soft);
    border-bottom: 1px solid var(--tria-line);
    border-radius: 15px 15px 0 0;
    padding-block: 14px;
    align-items: center;
}

.fi-section:not(.fi-section-not-contained).fi-collapsed > .fi-section-header {
    border-bottom: 0;
    border-radius: 15px;
}

.fi-section-header > .fi-icon {
    box-sizing: content-box;
    padding: 7px;
    border-radius: 10px;
    background-color: var(--tria-bg);
    border: 1px solid var(--tria-line);
    color: var(--tria-ink);
}

.fi-section-header-text-ctn {
    row-gap: 0;
}

.fi-section-header-heading {
    line-height: 20px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tria-ink);
}

.fi-section-header-description {
    font-size: 13px;
    line-height: 18px;
    color: var(--tria-text-3);
}

/* Etiquetes dels camps una mica més suaus que el contingut */
.fi-fo-field-label-content {
    color: var(--tria-text-2);
    font-size: 13px;
}

/* Finestres modals (crear/editar dins la fitxa del client) */
.fi-modal-header {
    border-bottom: 1px solid var(--tria-line);
    padding-bottom: 16px;
}

.fi-modal-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-modal-content {
    background-color: var(--tria-bg-soft);
    padding-top: 20px;
    padding-bottom: 20px;
}

.fi-modal-footer {
    border-top: 1px solid var(--tria-line);
    padding-top: 16px;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.fi-ta-header-cell {
    background-color: var(--tria-bg-soft);
}

.fi-ta-header-cell-label {
    color: var(--tria-text-3);
    font-weight: 500;
}

/* ---------- Camps ---------- */
.fi-input-wrp {
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid var(--tria-line-strong);
    background-color: var(--tria-bg);
}

.fi-input-wrp:focus-within {
    border-color: var(--tria-ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, .06);
}

.fi-input-wrp.fi-invalid {
    border-color: #B91C1C;
}

.fi-fo-field-label-content {
    font-weight: 500;
}

.fi-section:not(.fi-section-not-contained) {
    background-color: var(--tria-bg);
}

/* ---------- Pestanyes de la fitxa del client ---------- */
.fi-tabs {
    border-radius: 9999px;
    box-shadow: none;
    border: 1px solid var(--tria-line);
    background-color: var(--tria-bg);
    padding: 4px;
}

.fi-tabs-item {
    border-radius: 9999px;
}

.fi-tabs-item.fi-active {
    background-color: var(--tria-ink);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: #fff;
}

/* ---------- Insígnies ---------- */
.fi-badge {
    border-radius: 9999px;
    font-weight: 500;
}

/* ---------- Accions de les taules: només icones ---------- */
.fi-ta-actions .fi-icon-btn {
    width: 32px;
    height: 32px;
}

.fi-ta-actions .fi-icon-btn {
    opacity: .45;
    transition: opacity .15s, background-color .15s;
}

.fi-ta-row:hover .fi-ta-actions .fi-icon-btn {
    opacity: .7;
}

.fi-ta-actions .fi-icon-btn:hover {
    opacity: 1;
    background-color: var(--tria-surface-2);
}

/* ---------- Inici de sessió ---------- */
.fi-simple-layout {
    background-color: var(--tria-bg-soft);
}

.fi-simple-main {
    background-color: var(--tria-bg);
    border: 1px solid var(--tria-line);
    box-shadow: var(--tria-shadow);
}

/* ---------- Paginació: "Per pàgina" a la dreta, recompte més discret ---------- */
.fi-pagination-records-per-page-select-ctn,
.fi-pagination-records-per-page-select {
    grid-column: 3;
    justify-self: end;
}

.fi-pagination-overview {
    font-size: 13px;
    color: var(--tria-text-3);
}

.fi-pagination-overview,
.fi-pagination-items,
.fi-pagination-records-per-page-select-ctn,
.fi-pagination-records-per-page-select {
    grid-row: 1;
}

.fi-pagination-items {
    grid-column: 2;
}

/* ---------- Filtre de dates: compacte i diferenciat ---------- */
.tria-date-filter {
    background-color: var(--tria-bg-soft);
    border: 1px dashed var(--tria-line-strong) !important;
    border-radius: 12px;
    padding: 4px 8px 8px !important;
    column-gap: 6px !important;
    margin-top: -6px;
}

.tria-date-filter > legend,
.tria-date-filter .fi-fo-fieldset-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--tria-text-2);
    padding-inline: 4px;
}

.tria-date-filter .fi-input-wrp {
    background-color: var(--tria-bg);
    border-radius: 9999px;
    min-height: 34px;
}

.tria-date-filter .fi-input {
    font-size: 13px;
}

.tria-date-filter .fi-input {
    text-align: center;
    padding-inline: 8px;
}

/* El filtre de dates sempre a l'última columna (a la dreta) */
.fi-grid > .fi-grid-col:has(.tria-date-filter) {
    grid-column-end: -1;
}

/* ---------- Rols: permisos en files visuals ---------- */
.tria-perm-row {
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--tria-line);
}

.tria-perm-row:last-child {
    border-bottom: 0;
}

.tria-perm-mod {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tria-perm-icon {
    width: 20px;
    height: 20px;
    box-sizing: content-box;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--tria-line);
    background: var(--tria-bg-soft);
    color: var(--tria-ink);
    flex-shrink: 0;
}

.tria-perm-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--tria-ink);
}

.tria-perm-desc {
    font-size: 12.5px;
    color: var(--tria-text-3);
    line-height: 1.35;
}

/* Cada acció com una píndola: blanca si no està permesa, negra si ho està */
.tria-perm-actions .fi-fo-checkbox-list-options {
    gap: 8px;
}

.tria-perm-actions .fi-fo-checkbox-list-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--tria-line-strong);
    border-radius: 9999px;
    background: var(--tria-bg);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.tria-perm-actions .fi-fo-checkbox-list-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tria-perm-actions .fi-fo-checkbox-list-option-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--tria-text-2);
}

.tria-perm-actions .fi-fo-checkbox-list-option:hover {
    border-color: var(--tria-ink);
}

.tria-perm-actions .fi-fo-checkbox-list-option:has(input:checked) {
    background: var(--tria-ink);
    border-color: var(--tria-ink);
}

.tria-perm-actions .fi-fo-checkbox-list-option:has(input:checked) .fi-fo-checkbox-list-option-label {
    color: #fff;
}

.tria-perm-actions .fi-fo-checkbox-list-option:has(input:checked)::before {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.tria-perm-actions .fi-fo-checkbox-list-option:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(10, 10, 10, .12);
}

/* Camps calculats (només lectura) en gris */
.tria-computed .fi-input-wrp {
    background-color: var(--tria-bg-soft);
}

.tria-perm-extra .fi-fo-checkbox-list-option {
    width: fit-content;
    padding-inline: 16px;
}

.tria-perm-row + .tria-perm-row,
.fi-grid-col:has(> .fi-sc-component > .tria-perm-row) + .fi-grid-col {
    border-top: 1px solid var(--tria-line);
}

/* ---------- Propostes: línies de concepte ---------- */
.fi-fo-table-repeater-add {
    justify-content: flex-start !important;
    margin-top: 10px;
}

.fi-fo-table-repeater-add .fi-btn {
    width: 100%;
    justify-content: center;
    border: 1px dashed var(--tria-line-strong);
    border-radius: 12px;
    background-color: var(--tria-bg-soft);
    color: var(--tria-text-2);
    box-shadow: none;
    padding-block: 10px;
}

.fi-fo-table-repeater-add .fi-btn:hover {
    border-color: var(--tria-ink);
    color: var(--tria-ink);
    background-color: var(--tria-bg);
}

.fi-fo-table-repeater-actions .fi-icon-btn {
    opacity: .45;
}

.fi-fo-table-repeater tr:hover .fi-fo-table-repeater-actions .fi-icon-btn,
.fi-fo-table-repeater-actions .fi-icon-btn:hover {
    opacity: 1;
}

/* Peu de la proposta (base, IVA, total) */
.tria-sum {
    margin-left: auto;
    width: min(320px, 100%);
    display: grid;
    gap: 6px;
    padding-top: 4px;
}

.tria-sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--tria-text-2);
}

.tria-sum-total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--tria-line);
    font-size: 16px;
    font-weight: 600;
    color: var(--tria-ink);
}

/* ---------- Fitxa del client: pestanyes a l'esquerra, "Projectes" a la dreta ---------- */
.tria-subnav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tria-subnav > .fi-tabs {
    flex: 0 1 auto;
    min-width: 0;
}

.tria-subnav-side {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--tria-line);
    border-radius: 9999px;
    background: var(--tria-bg);
    font-size: 14px;
    font-weight: 500;
    color: var(--tria-text-2);
    transition: border-color .15s, background-color .15s, color .15s;
}

.tria-subnav-side:hover {
    border-color: var(--tria-ink);
    color: var(--tria-ink);
}

.tria-subnav-side-icon {
    width: 18px;
    height: 18px;
}

.tria-subnav-side.tria-active {
    background: var(--tria-ink);
    border-color: var(--tria-ink);
    color: #fff;
}

/* Logotip del client */
.tria-logo-upload .filepond--root {
    max-width: 240px;
    margin-bottom: 0;
}

/* Caixa del logotip baixa: una sola línia de text */
.tria-logo-upload .filepond--drop-label {
    min-height: 44px !important;
    height: 44px;
}

.tria-logo-upload .filepond--drop-label label {
    padding: 6px 10px;
    font-size: 12.5px;
    line-height: 1.3;
}

.tria-logo-upload .filepond--panel-root {
    border-radius: 10px;
}

.tria-logo-thumb {
    border: 1px solid var(--tria-line);
    object-fit: contain;
    background: #fff;
}

/* ==========================================================================
   Capçalera de les taules: filtres · lupa · restablir en una sola fila
   (sense la fila separada del cercador)
   ========================================================================== */
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "head head head"
        "form search reset";
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--tria-line);
}

.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) > .fi-ta-header {
    grid-area: head;
    margin: -20px -24px 20px;
}

.fi-ta-header-ctn > .fi-ta-filters-above-content-ctn,
.fi-ta-header-ctn > .fi-ta-filters-above-content-ctn > .fi-ta-filters {
    display: contents;
}

.fi-ta-header-ctn > .fi-ta-filters-above-content-ctn > .fi-ta-filters > :not(.fi-ta-filters-header) {
    grid-area: form;
}

/* Restablir: botó quadrat amb icona, alineat amb les caixes (sota les etiquetes) */
.fi-ta-filters-heading {
    display: none;
}

.fi-ta-header-ctn > .fi-ta-filters-above-content-ctn .fi-ta-filters-header {
    grid-area: reset;
    margin-top: 36px;
}

.fi-ta-filters-header .fi-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--tria-line-strong);
    background-color: var(--tria-bg);
    color: var(--tria-text-2);
}

.fi-ta-filters-header .fi-icon-btn:hover {
    border-color: var(--tria-ink);
    color: var(--tria-ink);
}

/* Barra del cercador: dins la mateixa fila, a l'esquerra de Restablir */
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) > .fi-ta-header-toolbar {
    grid-area: search;
    margin-top: 27px;
    padding: 0;
    border: 0;
    background: transparent;
}

.fi-ta-header-toolbar > * {
    min-height: 0;
    column-gap: 8px;
}

/* Cercador: només la lupa; en clicar-la s'obre la caixa */
.fi-ta-search-field .fi-input-wrp {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    overflow: hidden;
    transition: width .2s ease, border-radius .2s ease;
    cursor: pointer;
}

.fi-ta-search-field .fi-input-wrp-prefix {
    padding-inline: 10px;
    pointer-events: none;
}

.fi-ta-search-field .fi-input {
    position: absolute;
    inset: 0;
    width: 100%;
    padding-left: 38px;
    background: transparent;
    cursor: pointer;
    color: transparent;
}

.fi-ta-search-field .fi-input::placeholder {
    color: transparent;
}

.fi-ta-search-field .fi-input-wrp {
    position: relative;
}

.fi-ta-search-field:focus-within .fi-input-wrp,
.fi-ta-search-field:has(.fi-input:not(:placeholder-shown)) .fi-input-wrp {
    width: 240px;
    cursor: text;
}

.fi-ta-search-field:focus-within .fi-input,
.fi-ta-search-field:has(.fi-input:not(:placeholder-shown)) .fi-input {
    color: var(--tria-ink);
    cursor: text;
}

.fi-ta-search-field:focus-within .fi-input::placeholder {
    color: var(--tria-text-3);
}

/* Taules sense filtres: la barra queda compacta */
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)) > .fi-ta-header-toolbar {
    padding-block: 10px;
}

/* Sense el botó de columnes: al costat de Restablir només hi ha la lupa */
.fi-ta-header-toolbar .fi-ta-col-manager-dropdown {
    display: none;
}

.tria-subnav > .fi-tabs,
.fi-page-sub-navigation-tabs {
    margin-inline: 0 !important;
    width: fit-content;
    max-width: 100%;
}

.tria-chat-hint {
    font-size: 12px;
    color: var(--tria-text-3);
    margin-top: -4px;
}

/* ---------- Xat intern de les fases ---------- */
.tria-chat {
    display: grid;
    gap: 12px;
}

.tria-chat-messages {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--tria-line);
    border-radius: 14px;
    background: var(--tria-bg-soft);
}

.tria-chat-msg {
    max-width: 75%;
    align-self: flex-start;
    padding: 10px 14px;
    border-radius: 14px 14px 14px 4px;
    background: var(--tria-bg);
    border: 1px solid var(--tria-line);
}

.tria-chat-msg.tria-chat-mine {
    align-self: flex-end;
    border-radius: 14px 14px 4px 14px;
    background: var(--tria-ink);
    border-color: var(--tria-ink);
    color: #fff;
}

.tria-chat-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--tria-text-3);
    margin-bottom: 2px;
}

.tria-chat-meta strong {
    color: var(--tria-ink);
    font-weight: 600;
}

.tria-chat-mine .tria-chat-meta,
.tria-chat-mine .tria-chat-meta strong {
    color: rgba(255, 255, 255, .75);
}

.tria-chat-del {
    margin-left: auto;
    opacity: .5;
    font-size: 11px;
}

.tria-chat-del:hover {
    opacity: 1;
}

.tria-chat-body {
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tria-chat-empty {
    font-size: 13px;
    color: var(--tria-text-3);
    text-align: center;
    padding: 18px 0;
}

.tria-chat-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.tria-chat-form textarea {
    flex: 1;
    resize: vertical;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--tria-line-strong);
    border-radius: 12px;
    font-size: 14px;
    background: var(--tria-bg);
}

.tria-chat-form textarea:focus {
    outline: none;
    border-color: var(--tria-ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, .06);
}

.tria-chat-send {
    padding: 10px 18px;
    border-radius: 9999px;
    background: var(--tria-ink);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.tria-chat-send:disabled {
    opacity: .5;
}

.tria-chat-error {
    font-size: 12px;
    color: #B91C1C;
}

@media (min-width: 80rem) {
    .tria-sticky {
        position: sticky;
        top: calc(var(--topbar-height) + 16px);
        align-self: start;
    }

    .tria-sticky .tria-chat-messages {
        max-height: calc(100dvh - var(--topbar-height) - 330px);
        min-height: 240px;
    }
}

/* ==========================================================================
   Fases: vista de targetes
   ========================================================================== */
.tria-phases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}

.tria-phase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 14px;
    background: var(--tria-bg);
    border: 1px solid var(--tria-line);
    border-radius: 16px;
    border-top: 4px solid var(--st, #A3A3A3);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.tria-phase-card:hover {
    box-shadow: var(--tria-shadow);
    transform: translateY(-2px);
}

.tria-st-pendent { --st: #A3A3A3; }
.tria-st-en_curs { --st: #2B4ACB; }
.tria-st-bloquejada { --st: #B91C1C; }
.tria-st-finalitzada { --st: #15803D; }

.tria-phase-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tria-phase-num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--tria-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.tria-phase-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--st);
    background: color-mix(in srgb, var(--st) 10%, white);
    padding: 3px 10px;
    border-radius: 9999px;
}

.tria-phase-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tria-ink);
    line-height: 1.25;
}

.tria-phase-dep,
.tria-phase-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tria-text-2);
}

.tria-phase-dep strong {
    color: var(--tria-ink);
    font-weight: 600;
}

.tria-phase-ico {
    width: 15px;
    height: 15px;
    color: var(--tria-text-3);
    flex-shrink: 0;
}

.tria-phase-dur {
    margin-left: auto;
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 9999px;
    background: var(--tria-surface-2);
    color: var(--tria-text-2);
}

.tria-phase-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--tria-line);
}

.tria-avatars {
    display: flex;
}

.tria-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: -6px;
    border-radius: 9999px;
    border: 2px solid #fff;
    background: var(--tria-surface-3);
    color: var(--tria-ink);
    font-size: 11px;
    font-weight: 600;
}

.tria-avatar-more {
    background: var(--tria-ink);
    color: #fff;
}

.tria-phase-muted {
    font-size: 12px;
    color: var(--tria-text-3);
}

.tria-phase-counts {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--tria-text-2);
}

.tria-phase-counts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tria-phases-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 16px;
    border: 1px dashed var(--tria-line-strong);
    border-radius: 16px;
    background: var(--tria-bg);
    color: var(--tria-text-2);
    font-size: 14px;
}

.tria-phases-empty-ico {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    color: var(--tria-text-3);
}

/* ==========================================================================
   Fases: cronograma (Gantt)
   ========================================================================== */
.tria-gantt-wrap {
    background: var(--tria-bg);
    border: 1px solid var(--tria-line);
    border-radius: 16px;
    padding: 16px 20px;
    overflow-x: auto;
}

.tria-gantt {
    min-width: 760px;
}

.tria-gantt-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    border-bottom: 1px solid var(--tria-line);
}

.tria-gantt-head {
    height: 34px;
    font-size: 12px;
    color: var(--tria-text-3);
    font-weight: 500;
}

.tria-gantt-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    font-size: 14px;
    color: var(--tria-ink);
    overflow: hidden;
}

.tria-gantt-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

a.tria-gantt-label:hover .tria-gantt-name {
    text-decoration: underline;
}

.tria-gantt-dot {
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    flex-shrink: 0;
}

.tria-gantt-track {
    position: relative;
    height: 100%;
}

.tria-gantt-month {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: 8px;
    border-left: 1px solid var(--tria-line);
    white-space: nowrap;
}

.tria-gantt-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--tria-line);
}

.tria-gantt-bar {
    position: absolute;
    top: 11px;
    bottom: 11px;
    display: flex;
    align-items: center;
    padding-inline: 8px;
    border-radius: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    z-index: 2;
    transition: filter .15s;
}

.tria-gantt-bar:hover {
    filter: brightness(1.1);
}

.tria-gantt-body {
    position: relative;
}

.tria-gantt-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 220px;
    right: 0;
    pointer-events: none;
    z-index: 3;
}

.tria-gantt-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tria-gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 2px solid #B91C1C;
}

.tria-gantt-today span {
    position: absolute;
    top: -2px;
    left: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #B91C1C;
    background: #fff;
    padding: 0 3px;
    border-radius: 4px;
}

.tria-gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--tria-text-2);
}

.tria-gantt-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tria-gantt-legend i {
    width: 14px;
    height: 8px;
    border-radius: 3px;
    display: inline-block;
}

.tria-legend-dash {
    border-top: 2px dashed #525252;
    height: 0 !important;
}

.tria-gantt-undated {
    margin-top: 10px;
    font-size: 12px;
    color: var(--tria-text-3);
}

.tria-gantt-undated a {
    text-decoration: underline;
}

/* Botons de vista (Targetes / Cronograma / Taula) */
.tria-view-btn {
    border-radius: 9999px;
}

/* Capçalera de pàgina: les accions sempre a la dreta, encara que el títol sigui llarg */
@media (min-width: 64rem) {
    .fi-header {
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    .fi-header > :first-child {
        min-width: 0;
    }

    /* Les molles de pa no es parteixen: poden passar per sobre de la zona dels botons */
    .fi-header .fi-breadcrumbs-list {
        flex-wrap: nowrap;
        white-space: nowrap;
        width: max-content;
    }

    .fi-header .fi-ac {
        flex-shrink: 0;
    }
}

/* ==========================================================================
   Projecte i fase: capçalera del projecte sota el menú del client
   ========================================================================== */
/* Els botons de la pàgina es mostren dins la capçalera del projecte, no al costat del nom del client */
.fi-resource-projectes .fi-header-actions-ctn,
.fi-resource-fases .fi-header-actions-ctn {
    display: none;
}

.tria-project-block {
    margin-top: 8px;
    padding: 20px 20px 16px;
    border: 1px solid var(--tria-line);
    border-radius: 18px;
    background: var(--tria-bg);
    display: grid;
    gap: 16px;
    margin-bottom: 8px;
}

.tria-project-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.tria-project-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 2px;
    min-width: 0;
}

.tria-project-title h2 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tria-ink);
    line-height: 1.2;
}

.tria-project-kicker {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tria-text-3);
}

a.tria-project-kicker:hover {
    color: var(--tria-ink);
}

.tria-project-kicker-ico {
    width: 14px;
    height: 14px;
}

.tria-project-status {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--tria-surface-2);
    color: var(--tria-text-2);
}

.tria-project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tria-project-block .tria-subnav .fi-tabs {
    background: var(--tria-bg-soft);
}

/* Botó d'Excel: quadrat amb vora, icona verda (mateixa mida que la lupa i Restablir) */
.fi-ta-header-toolbar .tria-excel-btn.fi-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px;
    border: 1px solid #BBF7D0;
    background-color: #F0FDF4;
}

.fi-ta-header-toolbar .tria-excel-btn:hover {
    border-color: #15803D;
    background-color: #DCFCE7;
}

/* ==========================================================================
   Escriptori: projectes i fases
   ========================================================================== */
.tria-dash {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    .tria-dash {
        grid-template-columns: 1fr;
    }
}

.tria-dash-card {
    background: var(--tria-bg);
    border: 1px solid var(--tria-line);
    border-radius: 16px;
    padding: 6px 0;
    align-self: start;
}

.tria-dash-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--tria-line);
}

.tria-dash-card h3 {
    font-size: 15px;
    font-weight: 600;
}

.tria-dash-card > header span {
    font-size: 12px;
    padding: 1px 9px;
    border-radius: 9999px;
    background: var(--tria-surface-2);
    color: var(--tria-text-2);
}

.tria-dash-project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 90px;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--tria-line);
}

.tria-dash-project:last-child {
    border-bottom: 0;
}

.tria-dash-project:hover,
.tria-dash-phase:hover {
    background: var(--tria-bg-soft);
}

.tria-dash-project-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tria-dash-project-meta {
    font-size: 12.5px;
    color: var(--tria-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tria-dash-project-meta strong {
    color: var(--tria-text-2);
    font-weight: 500;
}

.tria-dash-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 9999px;
    background: var(--tria-surface-2);
    color: var(--tria-text-2);
}

.tria-dash-en_curs {
    background: var(--tria-accent-soft);
    color: var(--tria-accent);
}

.tria-dash-progress {
    display: grid;
    gap: 4px;
    font-size: 11.5px;
    color: var(--tria-text-3);
}

.tria-dash-bar {
    height: 6px;
    border-radius: 9999px;
    background: var(--tria-surface-3);
    overflow: hidden;
}

.tria-dash-bar i {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--tria-ink);
}

.tria-dash-end {
    text-align: right;
    font-size: 13px;
    color: var(--tria-text-2);
}

.tria-dash-end span {
    display: block;
    font-size: 11px;
    color: var(--tria-text-3);
}

.tria-dash-phase {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--tria-line);
}

.tria-dash-phase:last-child {
    border-bottom: 0;
}

.tria-dash-phase strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.tria-dash-phase small {
    font-size: 12px;
    color: var(--tria-text-3);
}

.tria-dash-flag {
    flex-shrink: 0;
    min-width: 82px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 9999px;
    background: #FEF2F2;
    color: #B91C1C;
}

.tria-dash-flag-soon {
    background: #FFFBEB;
    color: #B45309;
}

.tria-dash-empty {
    padding: 18px 20px;
    font-size: 13px;
    color: var(--tria-text-3);
}

/* Més aire entre els filtres i el grup Excel · lupa · Restablir */
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) > .fi-ta-header-toolbar {
    margin-left: 22px;
}

/* ---------- Preferits (estrella) ---------- */
.tria-star {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    color: var(--tria-text-3);
    transition: color .15s, background-color .15s, transform .15s;
    align-self: center;
}

.tria-star:hover {
    background: #FFFBEB;
    color: #D97706;
    transform: scale(1.08);
}

.tria-star-on {
    color: #F59E0B;
}

.tria-star-ico {
    width: 20px;
    height: 20px;
}

.tria-star-sm {
    width: 26px;
    height: 26px;
    margin-left: 6px;
}

.tria-star-sm .tria-star-ico {
    width: 17px;
    height: 17px;
}

/* La targeta de fase sencera és clicable, però l'estrella té el seu propi clic */
.tria-phase-link {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

.tria-phase-card .tria-star {
    position: relative;
    z-index: 2;
}

.tria-phase-top .tria-phase-status {
    margin-left: auto;
}

/* ---------- Escriptori: preferits ---------- */
.tria-fav {
    height: 100%;
}

.tria-fav h3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tria-fav-title-ico {
    width: 17px;
    height: 17px;
    color: #F59E0B;
}

.tria-inline-ico {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.tria-fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    padding: 14px 16px;
}

.tria-fav-item {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--tria-line);
    border-radius: 12px;
    background: var(--tria-bg);
    transition: box-shadow .15s, transform .15s;
    border-left: 3px solid var(--st, var(--tria-ink));
}

.tria-fav-item:hover {
    box-shadow: var(--tria-shadow);
    transform: translateY(-1px);
}

.tria-fav-kind {
    font-size: 11.5px;
    color: var(--tria-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tria-fav-name {
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.25;
}

.tria-fav-meta {
    font-size: 12px;
    color: var(--tria-text-3);
}

.tria-fav-status {
    color: var(--st, var(--tria-text-2));
    font-weight: 600;
}

.tria-fav-star {
    position: absolute !important;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.tria-fav .tria-dash-bar {
    margin-top: 4px;
}

/* Benvinguda compacta (dalt a la dreta) */
.fi-account-widget .fi-btn,
.fi-wi-account .fi-btn {
    white-space: nowrap;
}

/* Escriptori: benvinguda a la capçalera, a l'altura del títol */
.tria-welcome {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.75rem 0.6rem 0.7rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.9rem;
}
.tria-welcome-text { display: flex; flex-direction: column; line-height: 1.2; margin-right: 0.5rem; }
.tria-welcome-title { font-weight: 600; font-size: 0.9rem; color: #0a0a0a; }
.tria-welcome-name { font-size: 0.8rem; color: #737373; }
.tria-welcome form .fi-btn { white-space: nowrap; }
.fi-header:has(.tria-welcome) { align-items: center; }

/* Preferits: client (i projecte) a sobre del nom */
.tria-fav-client {
    font-size: 0.8rem;
    font-weight: 500;
    color: #404040;
    margin: 0.15rem 0 0.1rem;
    padding-right: 1.5rem;
    line-height: 1.35;
}
.tria-fav-client span { color: #a3a3a3; margin: 0 0.15rem; }

/* Fitxa del client: estrella al costat del nom */
.fi-header > div:has(> .tria-client-star) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.6rem;
}
.fi-header > div:has(> .tria-client-star) > .fi-breadcrumbs,
.fi-header > div:has(> .tria-client-star) > .fi-header-subheading {
    flex-basis: 100%;
}

/* Preferits: targeta de client */
.tria-fav-name-client { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.tria-fav-logo { width: 1.75rem; height: 1.75rem; object-fit: contain; border-radius: 0.35rem; border: 1px solid rgba(0,0,0,0.06); background: #fff; }

/* ==========================================================================
   Taules: fila de filtres plegable (per defecte plegada)
   ========================================================================== */
.tria-ft-cb {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.tria-ft-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    align-self: center;
    width: max-content;
    height: 32px;
    padding: 0 10px 0 11px;
    border: 1px solid var(--tria-line-strong);
    border-radius: 9999px;
    background: var(--tria-bg);
    color: var(--tria-text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, color .15s;
}
.tria-ft-toggle:hover { border-color: var(--tria-ink); color: var(--tria-ink); }
.tria-ft-ico { width: 15px; height: 15px; }
.tria-ft-chevron { width: 15px; height: 15px; transition: transform .2s ease; }
.tria-ft-cb:checked + .tria-ft-toggle .tria-ft-chevron { transform: rotate(180deg); }
.tria-ft-cb:checked + .tria-ft-toggle { color: var(--tria-ink); }
.tria-ft-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--tria-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* Taules amb filtres: el botó ocupa la seva pròpia fila, a sobre dels filtres */
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) {
    grid-template-areas:
        "head head head"
        "toggle toggle toggle"
        "form search reset";
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn) > .tria-ft-toggle { grid-area: toggle; }
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .tria-ft-cb:checked) > .tria-ft-toggle { margin-bottom: 16px; }

/* Plegat: s'amaguen filtres, lupa, restablir i Excel */
.fi-ta-header-ctn:has(> .tria-ft-cb:not(:checked)) > .fi-ta-header-toolbar,
.fi-ta-header-ctn:has(> .tria-ft-cb:not(:checked)) > .fi-ta-filters-above-content-ctn {
    display: none !important;
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .tria-ft-cb:not(:checked)) {
    padding-block: 12px;
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .tria-ft-cb:not(:checked)) > .fi-ta-header {
    margin: -12px -24px 12px;
}

/* Taules sense filtres (només lupa/Excel): botó i barra en línia */
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):has(> .tria-ft-toggle) > .tria-ft-toggle {
    margin: 10px 24px;
}
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):has(> .tria-ft-cb:checked) > .tria-ft-toggle {
    margin-bottom: 0;
}

/* Si la taula té capçalera (p. ex. "Nou projecte"), el botó Filtres va a la mateixa línia, a l'esquerra */
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header) {
    grid-template-areas:
        "head head head"
        "form search reset";
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header) > .tria-ft-toggle {
    grid-area: head;
    z-index: 1;
    margin: 0 !important;
    transform: translateY(-20px);
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header):has(> .tria-ft-cb:not(:checked)) > .tria-ft-toggle {
    transform: translateY(-12px);
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header):has(> .tria-ft-cb:not(:checked)) {
    padding: 0 24px;
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header):has(> .tria-ft-cb:not(:checked)) > .fi-ta-header {
    margin: 0 -24px;
    border-bottom: 0;
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header):has(> .tria-ft-cb:not(:checked)) > .tria-ft-toggle {
    transform: none;
}

/* Taules sense filtres però amb capçalera: el botó també a la línia de la capçalera */
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):has(> .fi-ta-header):has(> .tria-ft-toggle) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "toolbar";
}
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):has(> .fi-ta-header) > .fi-ta-header { grid-area: head; }
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):has(> .fi-ta-header) > .fi-ta-header-toolbar { grid-area: toolbar; }
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):has(> .fi-ta-header) > .tria-ft-toggle {
    grid-area: head;
    z-index: 1;
    margin: 0 0 0 24px !important;
}

/* Botó Filtres a la dreta (amplada fixa perquè la capçalera li pugui deixar lloc) */
.tria-ft-toggle {
    justify-self: end;
    justify-content: center;
    width: 112px;
}
.fi-ta-header-ctn:has(> .tria-ft-toggle) > .fi-ta-header {
    padding-right: calc(24px + 112px + 10px) !important;
}
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header) > .tria-ft-toggle,
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):has(> .fi-ta-header) > .tria-ft-toggle {
    margin: 0 !important;
}
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):has(> .fi-ta-header) > .tria-ft-toggle {
    margin-right: 24px !important;
}
.fi-ta-header-ctn:not(:has(> .fi-ta-filters-above-content-ctn)):not(:has(> .fi-ta-header)) > .tria-ft-toggle {
    display: flex;
    margin-left: auto;
}

/* Projecte: "Nova fase" a l'esquerra del botó Fases */
.tria-subnav-side-action { margin-left: auto; flex-shrink: 0; }
.tria-subnav-side.tria-subnav-side-after-action { margin-left: 0; }
.tria-project-actions > .tria-subnav-side { margin-left: 0; }

/* ---------- Versions de les fases (columna del mig) ---------- */
.tria-versions { display: grid; gap: 14px; }
.tria-version-add {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px 14px;
    border: 1px dashed var(--tria-line-strong); border-radius: 12px;
    background: var(--tria-bg); color: var(--tria-text-2);
    font-size: 14px; font-weight: 600;
    transition: border-color .15s, color .15s;
}
.tria-version-add:hover { border-color: var(--tria-ink); color: var(--tria-ink); }
.tria-version-add span { font-size: 12px; font-weight: 500; color: var(--tria-text-3); }
.tria-version-add-ico { width: 16px; height: 16px; }

.tria-version-form {
    display: grid; gap: 10px; padding: 14px;
    border: 1px solid var(--tria-line-strong); border-radius: 14px; background: #fff;
}
.tria-version-form-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.tria-version-input {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--tria-line-strong); border-radius: 10px;
    font-size: 14px; background: var(--tria-bg); resize: vertical;
}
.tria-version-input:focus { outline: none; border-color: var(--tria-ink); box-shadow: 0 0 0 3px rgba(10,10,10,.06); }
.tria-version-drop {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; border: 1px dashed var(--tria-line-strong); border-radius: 10px;
    font-size: 13px; color: var(--tria-text-2); text-align: center; cursor: pointer;
}
.tria-version-drop.tria-over, .tria-version-drop:hover { border-color: var(--tria-ink); color: var(--tria-ink); }
.tria-version-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tria-version-drop-ico { width: 18px; height: 18px; flex-shrink: 0; }
.tria-version-actions { display: flex; justify-content: flex-end; }

.tria-version-list { display: grid; gap: 10px; }
.tria-version {
    padding: 12px 14px;
    border: 1px solid var(--tria-line); border-radius: 14px; background: var(--tria-bg);
}
.tria-version:first-child { border-color: var(--tria-line-strong); background: #fff; }
.tria-version-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tria-text-3); }
.tria-version-meta .tria-chat-del { margin-left: auto; }
.tria-version-num {
    padding: 1px 7px; border-radius: 9999px;
    background: var(--tria-ink); color: #fff; font-weight: 600; font-size: 11px;
}
.tria-version:not(:first-child) .tria-version-num { background: var(--tria-line-strong); color: var(--tria-text-2); }
.tria-version-title { margin: 6px 0 2px; font-size: 14.5px; font-weight: 600; color: var(--tria-ink); }
.tria-version-desc { font-size: 13px; color: var(--tria-text-2); line-height: 1.5; }
.tria-version-files { display: grid; gap: 4px; margin-top: 8px; }
.tria-version-files li { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.tria-version-files a, .tria-version-files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tria-version-files a { color: var(--tria-ink); text-decoration: underline; text-underline-offset: 2px; }
.tria-version-files small { margin-left: auto; color: var(--tria-text-3); flex-shrink: 0; }
.tria-version-file-ico { width: 15px; height: 15px; color: var(--tria-text-3); flex-shrink: 0; }

/* Xat en columna estreta: el missatge i el botó Enviar no surten de la caixa */
.tria-chat, .tria-chat-messages, .tria-versions { min-width: 0; }
.tria-chat-form { flex-wrap: wrap; min-width: 0; }
.tria-chat-form textarea { min-width: 0; width: 100%; flex-basis: 100%; }
.tria-chat-form .tria-chat-send { margin-left: auto; }
.tria-chat-msg { max-width: 90%; overflow-wrap: anywhere; }

/* Projecte: a la dreta, "Nova fase" i la pestanya Fases */
.tria-subnav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Menú plegat: icones centrades (mateix espai a banda i banda) */
@media (min-width: 64rem) {
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0;
        align-items: center;
        scrollbar-gutter: auto;
        overflow-x: hidden;
    }
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        margin-inline: 0;
        align-items: center;
    }
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items {
        width: auto;
        margin-inline: auto;
        align-items: center;
    }
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label="Administració"] {
        align-self: stretch;
    }
}

/* Breadcrumbs una mica més petits */
.fi-breadcrumbs-item-label { font-size: 12px; }
.fi-breadcrumbs-item-separator { width: 14px; height: 14px; }

/* Dins d'una fase: el nom del projecte enllaça a les fases */
.tria-project-title h2 a { color: inherit; text-decoration: none; }
.tria-project-title h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Caixa principal de la fase: el nom de la fase com a títol */
.tria-phase-main > .fi-section-header .fi-section-header-heading { font-size: 17px; }

/* Cronograma: adjunts i versions al costat del nom de la fase */
.tria-gantt-badges { display: inline-flex; gap: 4px; margin-left: auto; flex-shrink: 0; padding-left: 6px; }
.tria-gantt-badge {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 6px; border-radius: 9999px;
    background: var(--tria-surface-2, #f5f5f5); color: var(--tria-text-2);
    font-size: 11px; font-weight: 600; line-height: 16px;
}
.tria-gantt-badge-ver { background: var(--tria-ink); color: #fff; }
.tria-gantt-badge-ico { width: 12px; height: 12px; }

/* ==========================================================================
   Dins d'una fase: tira amb totes les fases del projecte
   ========================================================================== */
.tria-phase-nav {
    margin-top: -16px;
    padding: 14px 16px 16px;
    background: #fff;
    border: 1px solid var(--tria-line);
    border-radius: 20px;
}
.tria-pn-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--tria-ink);
}
.tria-pn-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.tria-pn-head-ico { width: 16px; height: 16px; color: var(--tria-text-3); }
.tria-pn-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--tria-text-3); }
.tria-pn-progress i { display: block; width: 90px; height: 6px; border-radius: 9999px; background: var(--tria-line); overflow: hidden; }
.tria-pn-progress b { display: block; height: 100%; background: #15803D; border-radius: 9999px; }

.tria-pn-track {
    display: flex; align-items: stretch; gap: 6px;
    overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
    padding: 4px 2px 6px;
    scrollbar-width: thin;
}
.tria-pn-arrow { display: grid; place-items: center; flex-shrink: 0; color: var(--tria-line-strong); }
.tria-pn-arrow svg { width: 16px; height: 16px; }

.tria-pn-card {
    position: relative;
    flex: 0 0 220px;
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px 12px;
    border: 1px solid var(--tria-line);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pn-color) 9%, #fff) 0%, #fff 70%);
    scroll-snap-align: center;
    color: var(--tria-ink);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    overflow: hidden;
}
.tria-pn-card::before {
    content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--pn-color);
}
.tria-pn-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.07); border-color: var(--tria-line-strong); }
.tria-pn-current {
    border-color: var(--tria-ink);
    box-shadow: 0 0 0 1px var(--tria-ink), 0 8px 22px rgba(0,0,0,.10);
}
.tria-pn-current:hover { transform: none; border-color: var(--tria-ink); }

.tria-pn-top { display: flex; align-items: center; gap: 6px; }
.tria-pn-num {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px;
    background: var(--pn-color); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.tria-pn-num svg { width: 14px; height: 14px; }
.tria-pn-status { font-size: 11.5px; font-weight: 600; color: var(--pn-color); }
.tria-st-pendent .tria-pn-status { color: var(--tria-text-3); }
.tria-pn-here {
    margin-left: auto; padding: 1px 8px; border-radius: 9999px;
    background: var(--tria-ink); color: #fff; font-size: 10.5px; font-weight: 600;
}
.tria-pn-name {
    font-size: 14px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.6em;
}
.tria-pn-dates { font-size: 12px; color: var(--tria-text-3); }
.tria-pn-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; min-height: 22px; }
.tria-pn-people { display: inline-flex; }
.tria-pn-people i {
    display: grid; place-items: center; width: 22px; height: 22px; margin-right: -6px;
    border-radius: 9999px; border: 2px solid #fff; background: var(--tria-ink); color: #fff;
    font-style: normal; font-size: 9.5px; font-weight: 700;
}
.tria-pn-badges { display: inline-flex; gap: 4px; }
/* Vores esvaïdes quan hi ha més fases de les que caben */
.tria-pn-track { mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); padding-inline: 14px; }
.tria-pn-card { flex-basis: 210px; }

/* ==========================================================================
   Fases amb tons suaus i color triat per fase (--accent / --pn-color)
   ========================================================================== */
.tria-st-pendent { --st: #9AA1A9; }
.tria-st-en_curs { --st: #6F82B3; }
.tria-st-bloquejada { --st: #B5716B; }
.tria-st-finalitzada { --st: #6F9A7C; }

/* Targetes del tauler */
.tria-phase-card { border-top-color: var(--accent, #B8BEC6); }
.tria-phase-num {
    background: color-mix(in srgb, var(--accent, #B8BEC6) 30%, #fff);
    color: color-mix(in srgb, var(--accent, #B8BEC6) 45%, #262626);
}
.tria-phase-status { background: color-mix(in srgb, var(--st) 9%, #fff); }
.tria-phase-card .tria-avatar {
    background: #EDEEF0; color: #5B6068; border-color: #fff;
}

/* Tira de navegació */
.tria-pn-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pn-color) 10%, #fff) 0%, #fff 55%);
}
.tria-pn-card::before { height: 3px; }
.tria-pn-num {
    background: color-mix(in srgb, var(--pn-color) 32%, #fff);
    color: color-mix(in srgb, var(--pn-color) 40%, #262626);
}
.tria-pn-status {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--tria-text-2) !important; font-weight: 500;
}
.tria-pn-status i { width: 7px; height: 7px; border-radius: 9999px; background: var(--pn-st); }
.tria-pn-current {
    border-color: color-mix(in srgb, var(--pn-color) 60%, #525252);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pn-color) 60%, #525252), 0 6px 18px rgba(0,0,0,.06);
}
.tria-pn-current:hover { border-color: color-mix(in srgb, var(--pn-color) 60%, #525252); }
.tria-pn-here {
    background: color-mix(in srgb, var(--pn-color) 22%, #fff);
    color: #404040;
}
.tria-pn-people i { background: #EDEEF0; color: #5B6068; }
.tria-pn-arrow { color: #D4D4D4; }
.tria-phase-nav .tria-gantt-badge { background: #F1F2F4; color: #6B7078; }
.tria-phase-nav .tria-gantt-badge-ver { background: #E6E8EC; color: #4B5058; }
.tria-pn-progress b { background: #86AE92; }

/* Final previst de la fase: targeta amb calendari */
.tria-end {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--tria-line); border-radius: 14px; background: #fff;
    --end: #7F93C4;
}
.tria-end-empty { padding: 12px; font-size: 13px; color: var(--tria-text-3); border-style: dashed; }
.tria-end-today, .tria-end-soon { --end: #C9A15A; }
.tria-end-past { --end: #9AA1A9; }
.tria-end-cal {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 46px; height: 50px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--end) 45%, #fff);
    background: #fff;
}
.tria-end-cal span {
    width: 100%; text-align: center; padding: 2px 0;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    background: color-mix(in srgb, var(--end) 30%, #fff);
    color: color-mix(in srgb, var(--end) 45%, #262626);
}
.tria-end-cal strong { flex: 1; display: grid; place-items: center; font-size: 19px; font-weight: 700; color: var(--tria-ink); line-height: 1; }
.tria-end-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tria-end-text strong { font-size: 14px; font-weight: 600; color: var(--tria-ink); }
.tria-end-rel { font-size: 12px; color: color-mix(in srgb, var(--end) 55%, #404040); }

/* Estat editable des de la línia: desplegable en forma de píndola */
.tria-status-select select,
.tria-status-select .fi-select-input {
    appearance: none;
    -webkit-appearance: none;
    height: 26px;
    min-height: 0;
    padding: 0 26px 0 10px !important;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23737373'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.tria-status-select .fi-input-wrp {
    width: max-content;
    min-height: 0;
    border-radius: 9999px;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    background: transparent;
}
.tria-ss-success .fi-input-wrp { background: #ECFDF3; border-color: #ABEFC6 !important; }
.tria-ss-success select { color: #067647; }
.tria-ss-danger .fi-input-wrp { background: #FEF3F2; border-color: #FECDCA !important; }
.tria-ss-danger select { color: #B42318; }
.tria-ss-warning .fi-input-wrp { background: #FFFAEB; border-color: #FEDF89 !important; }
.tria-ss-warning select { color: #B54708; }
.tria-ss-info .fi-input-wrp { background: #EFF4FF; border-color: #C7D7FE !important; }
.tria-ss-info select { color: #3538CD; }
.tria-ss-gray .fi-input-wrp { background: #F5F5F5; border-color: #E5E5E5 !important; }
.tria-ss-gray select { color: #525252; }
.tria-status-select .fi-input-wrp:hover { filter: brightness(.97); }

/* Facturació: moviment que forma part d'una sèrie */
.tria-series { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13.5px; color: var(--tria-text-2); }
.tria-series strong { color: var(--tria-ink); }
.tria-series-chip { padding: 2px 10px; border-radius: 9999px; background: #F1F2F4; color: #4B5058; font-size: 12px; font-weight: 600; }
.tria-series-sep { color: var(--tria-line-strong); }
.tria-series-link { margin-left: auto; font-weight: 600; color: var(--tria-ink); text-decoration: underline; text-underline-offset: 3px; }
.tria-series-muted { color: var(--tria-text-3); }
/* El color segueix el valor triat (també just després de canviar-lo, sense recarregar) */
.tria-status-select:has(option:checked:is([value="pagat"],[value="acceptada"])) .fi-input-wrp { background: #ECFDF3; border-color: #ABEFC6 !important; }
.tria-status-select:has(option:checked:is([value="pagat"],[value="acceptada"])) select { color: #067647; }
.tria-status-select:has(option:checked:is([value="vencut"],[value="rebutjada"],[value="caducada"])) .fi-input-wrp { background: #FEF3F2; border-color: #FECDCA !important; }
.tria-status-select:has(option:checked:is([value="vencut"],[value="rebutjada"],[value="caducada"])) select { color: #B42318; }
.tria-status-select:has(option:checked[value="pendent"]) .fi-input-wrp { background: #FFFAEB; border-color: #FEDF89 !important; }
.tria-status-select:has(option:checked[value="pendent"]) select { color: #B54708; }
.tria-status-select:has(option:checked[value="enviada"]) .fi-input-wrp { background: #EFF4FF; border-color: #C7D7FE !important; }
.tria-status-select:has(option:checked[value="enviada"]) select { color: #3538CD; }
.tria-status-select:has(option:checked:is([value="anullat"],[value="esborrany"])) .fi-input-wrp { background: #F5F5F5; border-color: #E5E5E5 !important; }
.tria-status-select:has(option:checked:is([value="anullat"],[value="esborrany"])) select { color: #525252; }

/* Escriptori: només la casa, a dalt a l'esquerra, al costat de la fletxa de plegar */
@media (min-width: 64rem) {
    .tria-collapse-row { justify-content: space-between !important; align-items: center; }
    .fi-main-sidebar:not(.fi-sidebar-open) .tria-collapse-row {
        flex-direction: column; justify-content: center !important; gap: 6px; margin-bottom: 8px;
    }
}
.tria-home-btn {
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    color: var(--tria-text-2);
    transition: background-color .15s, color .15s;
}
.tria-home-btn:hover { background: var(--tria-surface-2); color: var(--tria-ink); }
.tria-home-btn.tria-active { background: var(--tria-surface-2); color: var(--tria-ink); }
.tria-home-ico { width: 21px; height: 21px; }
@media (max-width: 63.99rem) { .tria-home-btn { display: none; } }

/* Escriptori dels usuaris externs: els seus projectes */
.tria-my { display: grid; gap: 16px; }
.tria-my-client header h3 { display: flex; align-items: center; gap: 8px; }
.tria-my-client header h3 a { color: inherit; }
.tria-my-client header h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tria-my-level { font-size: 12px; font-weight: 500; color: var(--tria-text-3); background: #F1F2F4; padding: 2px 10px; border-radius: 9999px; }
/* Menú de pestanyes buit (usuaris externs amb poc accés): no es mostra */
.tria-subnav > .fi-tabs:not(:has(.fi-tabs-item)) { display: none; }
.tria-subnav:has(> .fi-tabs:not(:has(.fi-tabs-item))) { justify-content: flex-end; }

/* Etiqueta CRM: degradat del blau corporatiu, lletra blanca */
.tria-brand-tag {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #3F5BD9 0%, #2B47CB 55%, #1E36A8 100%);
    font-weight: 600;
    letter-spacing: .04em;
    padding: 2px 9px;
    box-shadow: 0 1px 2px rgba(43, 71, 203, .25);
}

/* ==========================================================================
   Xat del projecte
   ========================================================================== */
.tria-unread {
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 9999px;
    background: #E5484D; color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}
.fi-tabs-item .tria-unread { margin-left: 2px; }
.tria-unread-card { position: relative; z-index: 2; margin-left: auto; }
.tria-unread-ico { width: 11px; height: 11px; }
.tria-fav-kind { display: flex; align-items: center; gap: 4px; }

.tria-pchat-card {
    background: #fff; border: 1px solid var(--tria-line); border-radius: 20px; overflow: hidden;
}
.tria-pchat-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--tria-bg); border-bottom: 1px solid var(--tria-line); }
.tria-pchat-head h3 { font-size: 15px; font-weight: 600; color: var(--tria-ink); }
.tria-pchat-head p { font-size: 13px; color: var(--tria-text-3); }
.tria-pchat-head-ico { width: 22px; height: 22px; color: var(--tria-text-2); }
.tria-pchat { display: grid; gap: 10px; padding: 0 22px 18px; }
.tria-pchat-messages {
    height: calc(100dvh - var(--topbar-height) - 470px); min-height: 320px;
    overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
    padding: 18px 4px 6px;
}
.tria-pchat-day { display: flex; justify-content: center; margin: 6px 0; }
.tria-pchat-day span { font-size: 11.5px; color: var(--tria-text-3); background: #F1F2F4; padding: 2px 10px; border-radius: 9999px; }
.tria-pchat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.tria-pchat-mine { align-self: flex-end; flex-direction: row-reverse; }
.tria-pchat-avatar {
    display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 9999px; background: #EDEEF0; color: #5B6068; font-size: 10.5px; font-weight: 700;
}
.tria-pchat-bubble {
    padding: 9px 13px; border-radius: 16px 16px 16px 4px;
    background: var(--tria-bg); border: 1px solid var(--tria-line);
    min-width: 0; overflow-wrap: anywhere;
}
.tria-pchat-mine .tria-pchat-bubble { border-radius: 16px 16px 4px 16px; background: #EEF1FB; border-color: #D9DFF5; }
.tria-pchat-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--tria-text-3); margin-bottom: 2px; }
.tria-pchat-meta strong { color: var(--tria-ink); font-weight: 600; }
.tria-pchat-meta .tria-chat-del { margin-left: auto; }
.tria-pchat-body { font-size: 14px; color: var(--tria-ink); line-height: 1.5; }
.tria-pchat-files { display: grid; gap: 4px; margin-top: 6px; }
.tria-pchat-files a {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    border-radius: 10px; background: #fff; border: 1px solid var(--tria-line);
    font-size: 13px; color: var(--tria-ink);
}
.tria-pchat-files a:hover { border-color: var(--tria-line-strong); }
.tria-pchat-files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tria-pchat-files small { margin-left: auto; color: var(--tria-text-3); flex-shrink: 0; padding-left: 8px; }
.tria-pchat-file-ico { width: 15px; height: 15px; color: var(--tria-text-3); flex-shrink: 0; }
.tria-pchat-empty { margin: auto; text-align: center; color: var(--tria-text-3); font-size: 13px; }
.tria-pchat-empty strong { color: var(--tria-ink); }
.tria-pchat-empty-ico { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--tria-line-strong); }
.tria-pchat-pending { display: flex; flex-wrap: wrap; gap: 6px; }
.tria-pchat-pending li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: 9999px; background: #F1F2F4; font-size: 12.5px; }
.tria-pchat-form { display: flex; align-items: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--tria-line); }
.tria-pchat-form textarea {
    flex: 1; resize: none; min-height: 42px; max-height: 160px; padding: 10px 14px;
    border: 1px solid var(--tria-line-strong); border-radius: 14px; font-size: 14px; background: var(--tria-bg);
}
.tria-pchat-form textarea:focus { outline: none; border-color: var(--tria-ink); box-shadow: 0 0 0 3px rgba(10,10,10,.06); }
.tria-pchat-attach {
    position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
    border: 1px solid var(--tria-line-strong); border-radius: 12px; color: var(--tria-text-2); cursor: pointer;
}
.tria-pchat-attach:hover { border-color: var(--tria-ink); color: var(--tria-ink); }
.tria-pchat-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tria-pchat-attach-ico { width: 19px; height: 19px; }
.tria-pchat-form .tria-chat-send { height: 42px; }
/* Rodona de no llegits a les pestanyes generades per Filament */
.fi-tabs-item .fi-badge.fi-color-danger { background: #E5484D !important; color: #fff !important; border-radius: 9999px; min-width: 20px; justify-content: center; box-shadow: none; }

/* Projectes: els botons de la pàgina ja surten a la caixa del projecte; a la línia del títol només hi va "Projectes" (si cal) */
.fi-resource-projectes .fi-header-actions-ctn:has(.tria-subnav-side),
.fi-resource-fases .fi-header-actions-ctn:has(.tria-subnav-side) {
    display: flex !important;
    align-items: center;
}
.fi-resource-projectes .fi-header-actions-ctn:has(.tria-subnav-side) > .fi-ac,
.fi-resource-fases .fi-header-actions-ctn:has(.tria-subnav-side) > .fi-ac {
    display: none !important;
}

/* Menú plegat: els projectes (subelements) no es mostren, només la icona del client */
@media (min-width: 64rem) {
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-sub-group-items { display: none; }
}
/* Subelements: text una mica més petit */
.fi-sidebar-sub-group-items .fi-sidebar-item-label { font-size: 13.5px; }

/* Barra superior (usuaris de client i d'equip): botó de tancar la sessió */
.tria-topbar-logout { margin-right: 10px; }
.tria-topbar-logout .fi-btn { white-space: nowrap; }
/* Etiqueta CRM: degradat del negre al blau corporatiu */
.tria-brand-tag {
    background: linear-gradient(135deg, #0A0A0A 0%, #1A2A7A 50%, #2B47CB 100%);
    box-shadow: 0 1px 2px rgba(10, 10, 10, .25);
}

/* Resum de fases plegable */
button.tria-pn-head { width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.tria-pn-chevron { width: 16px; height: 16px; color: var(--tria-text-3); transition: transform .2s ease; }
.tria-pn-closed .tria-pn-chevron { transform: rotate(-90deg); }
.tria-pn-closed .tria-pn-head { margin-bottom: 0; }
.tria-phase-nav.tria-pn-closed { padding-bottom: 14px; }

/* Xat del projecte: no tan ample */
.tria-pchat-card { max-width: 860px; margin-inline: auto; width: 100%; }
.tria-pchat-row { max-width: 85%; }

/* Pestanyes actives (menús horitzontals) i botons Projectes / Fases: degradat corporatiu, com l'etiqueta CRM */
:root { --tria-gradient: linear-gradient(135deg, #0A0A0A 0%, #1A2A7A 50%, #2B47CB 100%); }
.fi-tabs-item.fi-active,
.tria-subnav-side.tria-active {
    background: var(--tria-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(26, 42, 122, .25);
}
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon,
.tria-subnav-side.tria-active .tria-subnav-side-icon,
.tria-subnav-side.tria-active span {
    color: #fff !important;
}
.tria-subnav-side.tria-active:hover { filter: brightness(1.08); }
/* Selector de vista actiu (Targetes / Cronograma / Taula) */
.fi-btn.tria-view-active { background: var(--tria-gradient) !important; border-color: transparent !important; color: #fff !important; }
.fi-btn.tria-view-active .fi-icon { color: #fff !important; }