/* =========================================================================
   Components base (Components/Shared/): només tokens de tokens.css, cap hex.
   ========================================================================= */

/* PageHeader ------------------------------------------------------------- */
.oo-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--oo-space-3) var(--oo-space-4);
    margin-bottom: var(--oo-space-5);
}

.oo-page-header-titols {
    min-width: 0;
}

.oo-page-header-subtitol {
    color: var(--oo-text-2);
    margin-top: var(--oo-space-1);
}

.oo-page-header-accions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oo-space-2);
}

/* Al mòbil, les accions passen a sota del títol i ocupen tota l'amplada perquè l'acció
   principal sigui fàcil de tocar amb el dit. */
@media (max-width: 599.98px) {
    .oo-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .oo-page-header-accions > .mud-button-root {
        flex: 1 1 auto;
    }

    .oo-page-header-accions > .oo-page-header-accio-escriptori {
        display: none;
    }

    /* Sense l'acció principal, el menú ⋯ queda a la dreta del títol (no sol en una fila). */
    .oo-page-header:has(.oo-page-header-accio-escriptori) {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
}

/* EmptyState ------------------------------------------------------------- */
.oo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--oo-space-7) var(--oo-space-5);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--oo-radius-lg);
    background-color: var(--oo-surface);
}

.oo-empty-state-compacte {
    padding: var(--oo-space-5) var(--oo-space-4);
    border: none;
    background-color: transparent;
}

.oo-empty-state-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--oo-space-4);
    border-radius: var(--oo-radius-pill);
    background-color: var(--oo-surface-tint);
    color: var(--oo-primary);
}

.oo-empty-state-compacte .oo-empty-state-icona {
    width: 44px;
    height: 44px;
    margin-bottom: var(--oo-space-3);
}

.oo-empty-state-titol {
    color: var(--oo-text);
}

.oo-empty-state-descripcio {
    max-width: 420px;
    margin-top: var(--oo-space-1);
    color: var(--oo-text-2);
}

.oo-empty-state-accio {
    margin-top: var(--oo-space-5);
}

.oo-empty-state-compacte .oo-empty-state-accio {
    margin-top: var(--oo-space-4);
}

/* LoadingState ----------------------------------------------------------- */
.oo-loading-avatar {
    border-radius: var(--oo-radius-sm);
}

/* Capçalera --------------------------------------------------------------- */
.oo-appbar-marca {
    margin-right: var(--oo-space-4);
}

/* Al mòbil la marca cedeix l'espai al selector d'Espai, que és el que importa. */
@media (max-width: 599.98px) {
    .oo-appbar-marca {
        display: none;
    }
}

.oo-espai-selector {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-2);
    max-width: 260px;
    min-height: 40px;
    padding: 0 var(--oo-space-3);
    border: var(--oo-border);
    border-radius: var(--oo-radius-pill);
    background-color: var(--oo-surface);
    color: var(--oo-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--oo-dur-fast) var(--oo-ease);
}

    .oo-espai-selector:hover {
        background-color: var(--oo-surface-tint);
    }

.oo-espai-selector-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oo-espai-selector-icona {
    display: inline-flex;
    flex: none;
}

/* Reicon no té "ExpandMore": el ChevronRight girat fa la mateixa funció. */
.oo-espai-selector-chevron {
    transform: rotate(90deg);
    color: var(--oo-text-2);
}

/* Capçalera mòbil d'Inici: píndola de 40 px sense vora, blanca amb la mateixa ombra que els botons rodons del costat
   (en fosc, amb la vora subtil de les targetes); la icona del tipus dins un cercle pastel de 24 px, el nom en una
   línia amb «…» i, si l'Espai té PIN, un cadenat petit. En tocar-la, un lleuger canvi de fons i escala 0,98. */
.oo-espai-selector--capcalera {
    flex: 0 1 auto;
    gap: var(--oo-space-2);
    max-width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 var(--oo-space-3) 0 var(--oo-space-2);
    border: var(--oo-card-border);
    background-color: var(--oo-surface);
    box-shadow: var(--oo-shadow-flotant);
    font-size: 0.9375rem;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--oo-dur-fast) var(--oo-ease), transform var(--oo-dur-fast) var(--oo-ease);
}

    .oo-espai-selector--capcalera:active {
        background-color: var(--oo-surface-tint);
        transform: scale(0.98);
    }

    .oo-espai-selector--capcalera:focus-visible {
        outline: 2px solid var(--oo-primary);
        outline-offset: 2px;
    }

    .oo-espai-selector--capcalera .oo-espai-selector-icona {
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: var(--oo-radius-pill);
        background-color: color-mix(in srgb, var(--oo-primary) 14%, var(--oo-surface));
        color: var(--oo-primary);
    }

        .oo-espai-selector--capcalera .oo-espai-selector-icona .mud-icon-root {
            width: 15px;
            height: 15px;
        }

    .oo-espai-selector--capcalera .oo-espai-selector-nom {
        min-width: 0;
    }

    .oo-espai-selector--capcalera .oo-espai-selector-pin {
        flex: none;
        width: 14px;
        height: 14px;
        margin-left: calc(-1 * var(--oo-space-1));
        color: var(--oo-text-2);
    }

    .oo-espai-selector--capcalera .oo-espai-selector-chevron {
        flex: none;
        width: 18px;
        height: 18px;
        color: var(--oo-text-3);
    }

@media (prefers-reduced-motion: reduce) {
    .oo-espai-selector--capcalera {
        transition: none;
    }

        .oo-espai-selector--capcalera:active {
            transform: none;
        }
}

.oo-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--oo-radius-pill);
    background: none;
    font: inherit;
    cursor: pointer;
}

/* Elements de menú (selector d'Espai) ------------------------- */
.oo-espai-menu .mud-list {
    min-width: 240px;
    padding: var(--oo-space-1);
}

.oo-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--oo-space-3);
    width: 100%;
    min-height: 40px;
    padding: var(--oo-space-2) var(--oo-space-3);
    border: none;
    border-radius: var(--oo-radius-sm);
    background: none;
    color: var(--oo-text);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .oo-menu-item:hover {
        background-color: var(--mud-palette-action-default-hover);
    }

    .oo-menu-item .mud-icon-root {
        color: var(--oo-text-2);
    }

.oo-menu-item-actiu {
    font-weight: 600;
    cursor: default;
}

    .oo-menu-item-actiu:hover {
        background: none;
    }

.oo-menu-item-final {
    margin-left: auto;
}

.oo-menu-item-actiu .oo-menu-item-final {
    color: var(--oo-primary);
}

.oo-menu-item-perill,
.oo-menu-item-perill .mud-icon-root {
    color: var(--oo-danger);
}

/* Menú lateral --------------------------------------------------------------- */
/* Tota l'alçada del calaix: el peu del menú d'usuari (MenuUsuariEspais) queda a baix. */
.oo-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
    /* Alçada fixa del calaix: la fila del menú d'usuari (MenuUsuariEscriptori) queda enganxada a baix. */
    height: 100%;
    min-height: 0;
    padding: var(--oo-space-3) var(--oo-space-2);
}

.oo-nav-nou {
    position: relative;
    padding: 0 var(--oo-space-2) var(--oo-space-3);
}

/* Per sota de md hi ha el "+" de la barra inferior: aquí sobraria. */
@media (max-width: 959.98px) {
    .oo-nav-nou {
        display: none;
    }
}

.oo-nav-nou-panel {
    top: calc(100% - var(--oo-space-2));
    bottom: auto;
    left: var(--oo-space-2);
    right: var(--oo-space-2);
    z-index: 30;
}

.oo-nav-link {
    display: flex;
    align-items: center;
    gap: var(--oo-space-3);
    min-height: 40px;
    padding: var(--oo-space-2) var(--oo-space-3);
    border-radius: var(--oo-radius-sm);
    color: var(--oo-text);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color var(--oo-dur-fast) var(--oo-ease);
}

    .oo-nav-link .mud-icon-root {
        color: var(--oo-text-2);
    }

    .oo-nav-link:hover {
        background-color: var(--mud-palette-action-default-hover);
    }

    .oo-nav-link.active {
        background-color: var(--oo-surface-tint);
        color: var(--oo-primary);
        font-weight: 600;
    }

        .oo-nav-link.active .mud-icon-root {
            color: var(--oo-primary);
        }

/* DueBadge --------------------------------------------------------------------- */
.oo-due {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-1);
    padding: 3px var(--oo-space-2);
    border-radius: var(--oo-radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

    .oo-due .mud-icon-root {
        width: 16px;
        height: 16px;
    }

/* MiniAlMobil: forma mínima per sota de 600 px, la curta a partir d'aquí. */
.oo-due--mini-mobil .oo-due-text {
    display: none;
}

.oo-due--mini-mobil {
    white-space: nowrap;
}

@media (min-width: 600px) {
    .oo-due--mini-mobil .oo-due-text {
        display: inline;
    }

    .oo-due--mini-mobil .oo-due-text-mini {
        display: none;
    }
}

/* Colors per nivell (ReglesVenciment a Core): vençut vermell, avui taronja intens (entre l'error i
   l'avís del tema), 1-7 dies ambre i més endavant neutre. */
.oo-due-vencut {
    background-color: color-mix(in srgb, var(--oo-danger) 14%, var(--oo-surface));
    color: var(--oo-danger);
}

.oo-due-avui {
    background-color: color-mix(in srgb, color-mix(in srgb, var(--oo-danger) 45%, var(--oo-warning)) 18%, var(--oo-surface));
    color: color-mix(in srgb, color-mix(in srgb, var(--oo-danger) 45%, var(--oo-warning)) 85%, var(--oo-text));
}

.oo-due-aviat {
    background-color: color-mix(in srgb, var(--oo-warning) 20%, var(--oo-surface));
    color: color-mix(in srgb, var(--oo-warning) 65%, var(--oo-text));
}

.oo-due-llunya {
    background-color: transparent;
    color: var(--oo-text-2);
    padding-left: 0;
}

/* Camp en píndola (selectors i cercadors petits sobre el fons de la pàgina: Inici, ActionBar). El fons va a la
   caixa arrodonida i no al contenidor de MudBlazor, que és quadrat i en deixava veure les cantonades. Mateix
   aspecte que els xips de filtre; el hover i el focus de la vora continuen sent els de MudBlazor. */
.oo-camp-pindola .mud-input-outlined {
    border-radius: var(--oo-radius-pill);
    background-color: var(--oo-surface);
    box-shadow: var(--oo-card-ombra);
}

    .oo-camp-pindola .mud-input-outlined .mud-input-outlined-border {
        border-color: var(--oo-card-vora);
        border-radius: var(--oo-radius-pill);
    }

/* ActionBar -------------------------------------------------------------------- */
.oo-action-bar {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-3);
    margin-bottom: var(--oo-space-5);
}

.oo-action-bar-fila {
    display: flex;
    gap: var(--oo-space-2);
    align-items: center;
}

/* Els camps de MudBlazor porten un marge superior per a l'etiqueta flotant; aquí no n'hi ha. */
.oo-action-bar .mud-input-control-input-container {
    margin-top: 0;
}

.oo-action-bar .mud-input-control {
    margin-top: 0;
}

.oo-action-bar-cerca {
    flex: 1 1 auto;
}

.oo-action-bar-ordre {
    flex: 0 0 190px;
}

@media (max-width: 599.98px) {
    .oo-action-bar-ordre {
        flex-basis: 140px;
    }
}

/* Xips en una sola fila amb scroll horitzontal: al mòbil no ocupen mai més d'una línia. */
.oo-action-bar-filtres {
    display: flex;
    gap: var(--oo-space-2);
    overflow-x: auto;
    /* Aire perquè l'ombra dels xips no quedi tallada per l'overflow. */
    margin: -4px 0 -8px;
    padding: 4px 0 8px;
    scrollbar-width: none;
}

    .oo-action-bar-filtres::-webkit-scrollbar {
        display: none;
    }

/* Xip de filtre (redisseny-diari.md): píndola blanca sense vora sobre el fons gris; l'actiu, ple amb el primari. */
.oo-filtre-xip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: var(--oo-card-border);
    border-radius: var(--oo-radius-pill);
    background-color: var(--oo-surface);
    box-shadow: var(--oo-card-ombra);
    color: var(--oo-text);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--oo-dur-fast) var(--oo-ease), color var(--oo-dur-fast) var(--oo-ease);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .oo-filtre-xip:not(.oo-filtre-xip-actiu):hover {
        background-color: var(--oo-surface-tint);
    }
}

    .oo-filtre-xip:focus-visible {
        outline: 2px solid var(--oo-primary);
        outline-offset: 2px;
    }

    .oo-filtre-xip .mud-icon-root {
        width: 16px;
        height: 16px;
        color: var(--oo-text-2);
    }

.oo-filtre-xip-actiu {
    border-color: var(--oo-primary);
    background-color: var(--oo-primary);
    box-shadow: none;
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

    .oo-filtre-xip-actiu .mud-icon-root {
        color: inherit;
    }

/* Nombre al costat del text (xips de «Necessita atenció» a Inici). */
.oo-filtre-xip-comptador {
    color: var(--oo-text-2);
    font-variant-numeric: tabular-nums;
}

.oo-filtre-xip-actiu .oo-filtre-xip-comptador {
    color: inherit;
    opacity: 0.85;
}

/* Separador vertical entre grups de xips dins la mateixa fila (ex: Estat | Categories). */
.oo-action-bar-separador {
    flex-shrink: 0;
    width: 1px;
    margin: 4px var(--oo-space-1);
    background-color: var(--mud-palette-lines-default);
}

/* Inici -------------------------------------------------------------------------- */
.oo-home-seccio {
    margin-bottom: var(--oo-space-6);
}

.oo-home-seccio-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oo-space-3);
    margin-bottom: var(--oo-space-3);
}

.oo-home-dies {
    flex: 0 0 112px;
    margin-left: auto;
}

    /* Compacte perquè el títol de la secció hi càpiga al mòbil. */
    .oo-home-dies .mud-input {
        font-size: 0.8125rem;
    }

    .oo-home-dies .mud-input-control-input-container {
        margin-top: 0;
    }

/* Files de venciment (FilaVenciment: «Necessita atenció» a Inici i detall del dia del Calendari), redisseny-diari.md
   §2, estil «Today's focus»: una targeta blanca per fila, amb la franja del color de la categoria a l'esquerra, el
   cercle per completar, els textos, l'estat a la dreta i el chevron. */
.oo-atencio {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oo-atencio-fila {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 72px;
    overflow: hidden;
    border: var(--oo-card-border);
    border-radius: var(--oo-radius-xl);
    background-color: var(--oo-surface);
    box-shadow: var(--oo-card-ombra);
}

/* Franja de 4 px amb el color de la categoria (gris si no en té). */
.oo-atencio-franja {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background-color: var(--oo-cat-color, var(--oo-text-3));
}

/* Columna del cercle: 44 px tàctils, per sobre de l'enllaç de la fila. */
.oo-atencio-cercle {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    margin-left: var(--oo-space-3);
}

.oo-cercle-completar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--oo-radius-pill);
    background: none;
    color: var(--oo-text-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* L'anell de 24 px: buit; la marca ✓ només s'insinua en passar-hi el ratolí o en prémer. */
.oo-cercle-completar-anell {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid currentColor;
    border-radius: var(--oo-radius-pill);
    transition: background-color var(--oo-dur-fast) var(--oo-ease), border-color var(--oo-dur-fast) var(--oo-ease), color var(--oo-dur-fast) var(--oo-ease);
}

    .oo-cercle-completar-anell .mud-icon-root {
        width: 16px;
        height: 16px;
        opacity: 0;
        transition: opacity var(--oo-dur-fast) var(--oo-ease);
    }

@media (hover: hover) and (pointer: fine) {
    button.oo-cercle-completar:hover {
        color: var(--oo-success);
    }

        button.oo-cercle-completar:hover .mud-icon-root {
            opacity: 1;
        }
}

button.oo-cercle-completar:active .oo-cercle-completar-anell {
    border-color: var(--oo-success);
    background-color: var(--oo-success);
    color: var(--mud-palette-success-text);
}

    button.oo-cercle-completar:active .mud-icon-root {
        opacity: 1;
    }

button.oo-cercle-completar:focus-visible {
    outline: 2px solid var(--oo-primary);
    outline-offset: -2px;
}

/* Ja pagat (Calendari): ple i verd, no es pot tocar. */
.oo-cercle-completar--fet {
    cursor: default;
}

    .oo-cercle-completar--fet .oo-cercle-completar-anell {
        border-color: var(--oo-success);
        background-color: var(--oo-success);
        color: var(--mud-palette-success-text);
    }

        .oo-cercle-completar--fet .oo-cercle-completar-anell .mud-icon-root {
            opacity: 1;
        }

/* Sense acció ràpida: la icona de la categoria (o la foto de l'actiu) en un cercle pastel. */
.oo-atencio-cercle-icona {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: var(--oo-radius-pill);
    background-color: color-mix(in srgb, var(--oo-cat-color, var(--oo-text-2)) 16%, var(--oo-surface));
    color: var(--oo-cat-color, var(--oo-text-2));
}

    .oo-atencio-cercle-icona .mud-icon-root {
        width: 18px;
        height: 18px;
    }

    .oo-atencio-cercle-icona img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* La resta de la fila: enllaç (element) o botó (recordatori) sense estils propis. */
.oo-atencio-principal {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--oo-space-2);
    min-width: 0;
    min-height: 72px;
    margin: 0;
    padding: var(--oo-space-3) var(--oo-space-2) var(--oo-space-3) var(--oo-space-2);
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--oo-dur-fast) var(--oo-ease);
    -webkit-tap-highlight-color: transparent;
}

/* Hover només amb ratolí: en tàctil, :hover es quedava enganxat a la fila tocada. Al tàctil, un feedback breu. */
@media (hover: hover) {
    .oo-atencio-fila:has(.oo-atencio-principal:hover) {
        box-shadow: var(--oo-shadow-hover);
    }
}

.oo-atencio-principal:active {
    background-color: color-mix(in srgb, var(--oo-primary) 5%, transparent);
    transition-duration: 0ms;
}

.oo-atencio-principal:focus-visible {
    outline: 2px solid var(--oo-primary);
    outline-offset: -2px;
    border-radius: var(--oo-radius-xl);
}

.oo-atencio-textos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.oo-atencio-nom,
.oo-atencio-subtitol {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oo-atencio-nom {
    color: var(--oo-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.oo-atencio-subtitol {
    min-width: 0;
    color: var(--oo-text-2);
    font-size: 0.8125rem;
}

/* Segona línia: l'estat (DueBadge o «Pagat») i «Categoria · Actiu», que es talla si no hi cap. */
.oo-atencio-meta {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    min-width: 0;
}

    .oo-atencio-meta .oo-due,
    .oo-atencio-meta .oo-xip-estat {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Un xip llarg («Vençut fa 1 dies · 10:00–11:00») en pantalles estretes: es talla amb «…» abans que sobresortir. */
    .oo-atencio-meta .oo-due {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

        .oo-atencio-meta .oo-due > span {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .oo-atencio-meta .oo-due .mud-icon-root {
            flex-shrink: 0;
        }

/* A la dreta: l'import (detall del dia del Calendari) o la data. */
.oo-atencio-dreta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

.oo-atencio-import {
    color: var(--oo-text);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oo-atencio-data {
    color: var(--oo-text-3);
    font-size: 0.75rem;
    white-space: nowrap;
}

.oo-atencio-chevron.mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--oo-text-3);
}

.oo-atencio-fet {
    color: var(--oo-success);
}

/* Menú ⋯ (desfer el pagament, repetició, renovar): a la dreta, per sobre de l'enllaç. */
.oo-atencio-accions {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-right: var(--oo-space-1);
}

.oo-atencio-accions:empty {
    display: none;
}

/* Al mòbil, la data de la dreta sobra (ja és al xip relatiu de la segona línia) i deixa lloc al text. */
@media (max-width: 599.98px) {
    .oo-atencio-data {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oo-cercle-completar-anell,
    .oo-cercle-completar-anell .mud-icon-root,
    .oo-atencio-principal {
        transition: none;
    }
}

/* Mètriques (Inici, redisseny-diari.md §2, estil «Quick stats»): tres enllaços amb el mateix pes, sempre en una
   fila. Cada targeta: la icona al quadrat pastel del seu color, la xifra gran, l'etiqueta i una píndola de dada. */
.oo-metriques {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--oo-space-3);
    margin-bottom: var(--oo-space-6);
}

.oo-metrica {
    --oo-metrica-color: var(--oo-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--oo-space-1);
    min-width: 0;
    padding: var(--oo-space-4);
    border: var(--oo-card-border);
    border-radius: var(--oo-radius-xl);
    background-color: var(--oo-surface);
    box-shadow: var(--oo-card-ombra);
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--oo-dur) var(--oo-ease), transform var(--oo-dur-fast) var(--oo-ease);
    -webkit-tap-highlight-color: transparent;
}

.oo-metrica--despesa {
    --oo-metrica-color: var(--mud-palette-tertiary);
}

.oo-metrica--pendent {
    --oo-metrica-color: var(--oo-warning);
}

@media (hover: hover) and (pointer: fine) {
    .oo-metrica:hover {
        box-shadow: var(--oo-shadow-hover);
    }
}

.oo-metrica:active {
    transform: scale(0.98);
}

.oo-metrica:focus-visible {
    outline: 2px solid var(--oo-primary);
    outline-offset: 2px;
}

.oo-metrica-icona {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--oo-space-2);
    border-radius: var(--oo-radius-sm);
    background-color: color-mix(in srgb, var(--oo-metrica-color) 14%, var(--oo-surface));
    color: var(--oo-metrica-color);
}

    .oo-metrica-icona .mud-icon-root {
        width: 18px;
        height: 18px;
    }

.oo-metrica-valor {
    max-width: 100%;
    color: var(--oo-text);
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.oo-metrica-etiqueta {
    color: var(--oo-text-2);
    font-size: 0.8125rem;
    line-height: 1.3;
}

/* La píndola de dada, a sota de l'etiqueta. */
.oo-metrica .oo-xip-estat {
    margin-top: var(--oo-space-1);
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .oo-metrica {
        padding: var(--oo-space-3);
    }

    .oo-metrica-valor {
        font-size: 1.125rem;
    }

    .oo-metrica-etiqueta {
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oo-metrica {
        transition: none;
    }

    .oo-metrica:active {
        transform: none;
    }
}

/* PageHeader: breadcrumbs, etiquetes i menú «⋮» ------------------------------------ */
.oo-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--oo-space-1);
    margin-bottom: var(--oo-space-2);
    font-size: 0.8125rem;
    color: var(--oo-text-2);
}

    .oo-breadcrumbs a {
        color: var(--oo-text-2);
        text-decoration: none;
    }

        .oo-breadcrumbs a:hover {
            color: var(--oo-primary);
            text-decoration: underline;
        }

    .oo-breadcrumbs .mud-icon-root {
        width: 14px;
        height: 14px;
        color: var(--oo-text-3);
    }

    .oo-breadcrumbs [aria-current="page"] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 40ch;
        color: var(--oo-text);
    }

.oo-page-header-etiquetes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oo-space-2);
    margin-top: var(--oo-space-2);
}

    .oo-page-header-etiquetes .mud-chip {
        margin: 0;
    }

/* Al mòbil el menú «⋮» no s'ha d'estirar com els botons. */
@media (max-width: 599.98px) {
    .oo-page-header-accions > .oo-page-header-menu {
        flex: 0 0 auto;
    }
}

/* SectionCard ---------------------------------------------------------------------- */
.oo-section-card {
    margin-bottom: var(--oo-space-5);
    padding: var(--oo-space-4) var(--oo-space-5) var(--oo-space-5);
    border: var(--oo-card-border);
    box-shadow: var(--oo-card-ombra);
    border-radius: var(--oo-radius-lg);
    background-color: var(--oo-surface);
}

@media (max-width: 599.98px) {
    .oo-section-card {
        padding: var(--oo-space-3) var(--oo-space-4) var(--oo-space-4);
    }
}

.oo-section-card-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--oo-space-1) var(--oo-space-3);
    min-height: 40px;
    margin-bottom: var(--oo-space-3);
}

/* El títol (i, a la secció buida, el text gris): un grup que s'adapta, amb l'acció a la dreta. */
.oo-section-card-titols {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--oo-space-3);
    min-width: 0;
}

.oo-section-card-titol {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-2);
    /* Un doble toc a prop (xips, botons) no l'ha de seleccionar (docs/plans/fets/pagina-espai.md §4). */
    -webkit-user-select: none;
    user-select: none;
}

/* Control al costat del comptador (l'ordre de la llista): més a prop del títol que l'espai del grup. */
.oo-section-card-accio-titol {
    display: inline-flex;
    align-items: center;
    margin-left: calc(-1 * var(--oo-space-2));
}

/* Secció buida (SectionCard Buit): menys marge intern i, si hi cap, tot en una línia. Si el text buit no hi cap
   sencer al costat del títol, baixa a una segona línia sota el títol (flex-wrap del grup: només es parteix en
   paraules si sol no hi cap), i «Afegir» es queda a la dreta, a l'altura del títol. */
.oo-section-card--buit {
    padding-top: var(--oo-space-2);
    padding-bottom: var(--oo-space-2);
}

.oo-section-card--buit .oo-section-card-cap {
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 0;
}

.oo-section-card--buit .oo-section-card-titols {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 2px 0;
}

.oo-section-card-buit {
    flex: 0 1 auto;
    max-width: 100%;
    color: var(--oo-text-2);
    font-size: 0.875rem;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.oo-section-card--buit .oo-section-card-accio {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-left: auto;
}

/* Contingut d'una pestanya (SectionCard Pestanya): sense targeta, directament sobre el fons; la fila de dalt és la fila
   d'eines, amb «Afegir» sempre a la dreta. Les llistes i l'estat buit porten la seva superfície. */
.oo-section-card--pestanya {
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
}

.oo-section-card--pestanya .oo-section-card-cap {
    min-height: 44px;
}

.oo-section-card--pestanya .oo-section-card-accio {
    margin-left: auto;
}

.oo-section-card--pestanya.oo-section-card--buit {
    padding: 0;
}

.oo-section-card--pestanya .oo-empty-state {
    border: var(--oo-border);
    border-radius: var(--oo-radius-md);
    background-color: var(--oo-surface);
}

/* Subtítol gris sota el títol (Descripcio); el contingut, a sota. */
.oo-section-card-descripcio {
    margin: calc(-1 * var(--oo-space-2)) 0 var(--oo-space-3);
    color: var(--oo-text-2);
    font-size: 0.875rem;
    line-height: 1.45;
}

.oo-section-card-icona {
    color: var(--oo-primary);
}

/* Plegable: el títol sencer és el botó, amb el chevron al final (gira en desplegar). */
.oo-section-card-plegar {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-2);
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--oo-radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .oo-section-card-plegar:focus-visible {
        outline: 2px solid var(--oo-primary);
        outline-offset: 2px;
    }

.oo-section-card-chevron {
    color: var(--oo-text-2);
    transform: rotate(0deg);
    transition: transform var(--oo-dur) var(--oo-ease);
}

.oo-section-card-chevron--obert {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .oo-section-card-chevron {
        transition: none;
    }
}

/* Plegada: sense marge sota la capçalera si no hi ha res més. */
.oo-section-card--plegada {
    padding-bottom: var(--oo-space-3);
}

    .oo-section-card--plegada .oo-section-card-cap {
        margin-bottom: 0;
    }

    .oo-section-card--plegada .oo-section-card-descripcio {
        margin-top: 0;
        margin-bottom: 0;
    }

/* Zona de perill (ex: «Eliminar l'Espai»). */
.oo-section-card--perill {
    border: 1px solid color-mix(in srgb, var(--oo-danger) 40%, transparent);
    box-shadow: none;
}

    .oo-section-card--perill .oo-section-card-titol {
        color: var(--oo-danger);
    }

/* Seccions d'una fitxa (element, recordatori): un sol espai entre totes, sigui quin sigui el component
   (SectionCard, SeccioInfo, DocumentList), en lloc dels marges de cadascun. */
.oo-fitxa-seccions {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-4);
    min-width: 0;
}

.oo-fitxa-seccions .oo-section-card {
    margin-bottom: 0;
}

.oo-section-card-comptador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 var(--oo-space-2);
    border-radius: var(--oo-radius-pill);
    background-color: var(--mud-palette-lines-default);
    font-family: Inter, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--oo-text-2);
}

.oo-notes-estat {
    display: block;
    min-height: 1.5em;
    margin-top: var(--oo-space-1);
    color: var(--oo-text-2);
}

.oo-text-notes {
    white-space: pre-line;
}

.oo-section-card-accio .mud-button-root {
    white-space: nowrap;
}

/* Formularis al mòbil (< 600 px): full inferior estil iOS. Són els diàlegs MaxWidth.Small (DialegFormOpcions)
   que no són confirmacions (oo-dialeg-confirmacio), ni fulls d'opcions (oo-full-inferior), ni de pantalla completa
   (oo-pantalla-completa: retall i escàner), i els oo-full-inferior-mobil. S'obre des de baix, deixa veure la
   pàgina enfosquida a dalt, té una nansa i el títol amb la ✕; el contingut fa scroll per dins i el peu
   queda fix per sobre de la safe area i del teclat (--oo-teclat, que posa app.js amb visualViewport). Lliscar
   des de dalt, tocar el fons o la ✕ passen pel «Cancel·lar» del formulari, que demana confirmació si hi
   ha canvis: el botó amb data-oo-cancel (vegeu omniaone.fullFormulari a app.js). Tauleta i escriptori: diàleg
   centrat com sempre. */
@media (max-width: 599.98px) {
    .mud-dialog-container:has(> .mud-dialog:is(.mud-dialog-width-sm:not(.oo-full-inferior, .oo-dialeg-confirmacio, .oo-pantalla-completa), .oo-full-inferior-mobil)) {
        align-items: flex-end;
        padding: 0 0 var(--oo-teclat, 0px);
    }

    .mud-dialog:is(.mud-dialog-width-sm:not(.oo-full-inferior, .oo-dialeg-confirmacio, .oo-pantalla-completa), .oo-full-inferior-mobil) {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        max-height: calc((100vh - var(--oo-teclat, 0px)) * 0.92);
        max-height: calc((100dvh - var(--oo-teclat, 0px)) * 0.92);
        margin: 0;
        border-radius: 20px 20px 0 0;
        animation: oo-full-puja 260ms var(--oo-ease) both;
    }

    /* Nansa centrada a dalt. */
    .mud-dialog:is(.mud-dialog-width-sm:not(.oo-full-inferior, .oo-dialeg-confirmacio, .oo-pantalla-completa), .oo-full-inferior-mobil)::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 36px;
        height: 5px;
        border-radius: var(--oo-radius-pill);
        background-color: color-mix(in srgb, var(--oo-text) 22%, transparent);
        transform: translateX(-50%);
    }

    /* Capçalera: zona per lliscar (touch-action: none perquè el gest no faci scroll de la pàgina). */
    .mud-dialog:is(.mud-dialog-width-sm:not(.oo-full-inferior, .oo-dialeg-confirmacio, .oo-pantalla-completa), .oo-full-inferior-mobil) .mud-dialog-title {
        flex: none;
        padding-top: var(--oo-space-5);
        touch-action: none;
    }

    .mud-dialog:is(.mud-dialog-width-sm:not(.oo-full-inferior, .oo-dialeg-confirmacio, .oo-pantalla-completa), .oo-full-inferior-mobil) .mud-dialog-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mud-dialog:is(.mud-dialog-width-sm:not(.oo-full-inferior, .oo-dialeg-confirmacio, .oo-pantalla-completa), .oo-full-inferior-mobil) .mud-dialog-actions {
        flex: none;
        border-top: var(--oo-border);
        padding-bottom: calc(var(--oo-space-3) + env(safe-area-inset-bottom));
    }

    .mud-dialog:is(.mud-dialog-width-sm:not(.oo-full-inferior, .oo-dialeg-confirmacio, .oo-pantalla-completa), .oo-full-inferior-mobil) .mud-dialog-actions .mud-button-filled {
        flex: 1 1 auto;
    }

    /* Mentre es llisca (app.js), el full segueix el dit sense animació. */
    .mud-dialog.oo-full-arrossegant {
        transition: none;
    }

    .mud-dialog.oo-full-tornant {
        transition: transform 200ms var(--oo-ease);
    }

    /* Retall d'imatge i escàner: continuen a pantalla completa al mòbil. */
    .mud-dialog-container .mud-dialog.oo-pantalla-completa {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        padding-top: env(safe-area-inset-top);
        border-radius: 0;
    }

    .mud-dialog.oo-pantalla-completa .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .mud-dialog.oo-pantalla-completa .mud-dialog-actions {
        border-top: var(--oo-border);
        padding-bottom: calc(var(--oo-space-3) + env(safe-area-inset-bottom));
    }
}

/* Full alt al mòbil (MudDialog Class="oo-full-alt": Nou element, Nou actiu, recordatori; docs/plans/fets/fulls-nou-element-mobil.md):
   el mateix full, però d'alçada fixa, amb només una franja de la pàgina a dalt (--oo-full-marge, 8 % de l'alçada
   sense teclat, i mai sota la notch). Amb el teclat, la vora de dalt es queda on es veu (--oo-vv-dalt compensa el
   desplaçament d'iOS) i el full acaba just sobre el teclat (--oo-vv-alt): només s'escurça el contingut amb scroll.
   Sense transició en l'alçada, perquè no hi hagi salts. Les variables les posa app.js (omniaone.fullFormulari). */
@media (max-width: 599.98px) {
    .mud-dialog-container .mud-dialog.mud-dialog-width-sm.oo-full-alt {
        --oo-full-dalt: max(var(--oo-full-marge, 8vh), calc(env(safe-area-inset-top) + 12px));
        position: fixed;
        top: calc(var(--oo-full-dalt) + var(--oo-vv-dalt, 0px));
        right: 0;
        left: 0;
        height: calc(var(--oo-vv-alt, 100dvh) - var(--oo-full-dalt));
        max-height: none;
        padding-right: env(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
    }

    /* Capçalera fixa: ✕ a l'esquerra, el títol i «Desar» a la dreta (CapcaleraFull). */
    .mud-dialog.oo-full-alt > .mud-dialog-title {
        display: flex;
        align-items: center;
        gap: var(--oo-space-1);
        padding-right: var(--oo-space-2);
        padding-left: var(--oo-space-2);
    }

    .mud-dialog.oo-full-alt > .mud-dialog-title .mud-button-close {
        position: static;
        flex: none;
        order: -1;
    }

    /* Al peu, Cancel·lar i Desar ja són a la capçalera (la ✕ fa el «Cancel·lar»): s'amaguen, però el botó amb
       data-oo-cancel continua al DOM perquè app.js el premi. Si no hi queda res més (el ⋯ d'un recordatori en
       editar-lo sí que hi queda), tampoc el peu. */
    .mud-dialog.oo-full-alt > .mud-dialog-actions > :is([data-oo-cancel], .oo-desar-peu) {
        display: none;
    }

    .mud-dialog.oo-full-alt > .mud-dialog-actions:not(:has(> :not([data-oo-cancel], .oo-desar-peu))) {
        display: none;
    }

    /* La safe area de baix: amb el teclat obert ja la tapa el teclat, i no cal l'espai de més. */
    .mud-dialog.oo-full-alt {
        --oo-full-safe-baix: env(safe-area-inset-bottom);
    }

    html.oo-teclat-obert .mud-dialog.oo-full-alt {
        --oo-full-safe-baix: 0px;
    }

    .mud-dialog-container .mud-dialog.oo-full-alt > .mud-dialog-actions {
        padding-bottom: calc(var(--oo-space-3) + var(--oo-full-safe-baix));
    }

    /* Sense peu, la deixa el contingut. */
    .mud-dialog.oo-full-alt:not(:has(> .mud-dialog-actions > :not([data-oo-cancel], .oo-desar-peu))) > .mud-dialog-content {
        padding-bottom: calc(var(--oo-space-4) + var(--oo-full-safe-baix));
    }

    /* Amb un diàleg obert, la pàgina de darrere no fa scroll (i iOS té menys a desplaçar en obrir el teclat). */
    html:has(.mud-dialog-container .mud-dialog),
    html:has(.mud-dialog-container .mud-dialog) body {
        overflow: hidden;
    }

    /* Camps dels diàlegs a 16 px: amb menys, iOS fa zoom a la pàgina en enfocar-los. */
    .mud-dialog :is(input, textarea, select) {
        font-size: max(1rem, 16px);
    }
}

/* La ✕ dels formularis (DialogOptions.CloseButton) només és per al full del mòbil: a partir de 600 px, el
   diàleg queda com sempre. */
@media (min-width: 600px) {
    .mud-dialog.mud-dialog-width-sm:not(.oo-full-inferior-mobil) > .mud-dialog-title .mud-button-close {
        display: none;
    }
}

@keyframes oo-full-puja {
    from {
        transform: translateY(100%);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mud-dialog:is(.mud-dialog-width-sm, .oo-full-inferior-mobil) {
        animation: none;
    }

    .mud-dialog.oo-full-tornant {
        transition: none;
    }
}

/* Diàlegs de confirmació (DialegConfirmacio, docs/plans/fets/dialegs-avisos.md): modal centrat, també al mòbil, amb marge
   als costats. Peu en una fila alineada a la dreta si hi cap; si no (--apilat-mobil / --apilat-escriptori, que decideix
   el component), botons a amplada completa en ordre invers al del DOM: la principal (l'última) a dalt, les secundàries
   a sota i «Cancel·lar» (la primera) a baix de tot. */
.mud-dialog.oo-dialeg-confirmacio {
    border-radius: var(--oo-radius-lg);
}

    .mud-dialog.oo-dialeg-confirmacio .mud-dialog-title {
        padding: var(--oo-space-5) var(--oo-space-5) var(--oo-space-2);
    }

    .mud-dialog.oo-dialeg-confirmacio .mud-dialog-content {
        max-height: min(60vh, 520px);
        padding: 0 var(--oo-space-5);
        overflow-y: auto;
        color: var(--oo-text-2);
    }

    .mud-dialog.oo-dialeg-confirmacio .mud-dialog-actions {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: var(--oo-space-2);
        padding: var(--oo-space-4) var(--oo-space-5) var(--oo-space-5);
    }

        /* Si una traducció es queda llarga sense apilar, parteix la línia en lloc de tallar-se. */
        .mud-dialog.oo-dialeg-confirmacio .mud-dialog-actions > .mud-button-root {
            min-width: 0;
            min-height: 44px;
            margin: 0;
            white-space: normal;
        }

@media (min-width: 600px) {
    .mud-dialog.oo-dialeg-confirmacio {
        max-width: 420px;
    }

    .mud-dialog.oo-dialeg-confirmacio--apilat-escriptori .mud-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

@media (max-width: 599.98px) {
    .mud-dialog-container .mud-dialog.oo-dialeg-confirmacio {
        width: calc(100% - 2 * var(--oo-space-4));
        max-width: 480px;
        margin: var(--oo-space-4);
    }

        .mud-dialog.oo-dialeg-confirmacio .mud-dialog-title {
            padding: var(--oo-space-4) var(--oo-space-4) var(--oo-space-2);
        }

        .mud-dialog.oo-dialeg-confirmacio .mud-dialog-content {
            padding: 0 var(--oo-space-4);
        }

        .mud-dialog.oo-dialeg-confirmacio .mud-dialog-actions {
            padding: var(--oo-space-4);
        }

    .mud-dialog.oo-dialeg-confirmacio--apilat-mobil .mud-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* Avisos (snackbars de MudBlazor, política a AvisosSnackbar; docs/plans/fets/dialegs-avisos.md): neutres i compactes, amb
   el fons invers del tema (fosc en mode clar, clar en mode fosc), sense els colors plens per gravetat. A baix al centre:
   al mòbil, per sobre de la barra inferior i del «+»; sense barra (pàgines de compte), sobre la safe area. Amb un
   diàleg o full obert al mòbil, a dalt sota la barra d'estat, perquè no tapi els botons del peu del full. */
#mud-snackbar-container.mud-snackbar-location-bottom-center {
    bottom: calc(env(safe-area-inset-bottom) + var(--oo-space-4));
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(480px, calc(100vw - 2 * var(--oo-space-4)));
}

@media (max-width: 959.98px) {
    body:has(.oo-barra-inferior) #mud-snackbar-container.mud-snackbar-location-bottom-center {
        bottom: calc(var(--oo-barra-inferior-ocupa) + var(--oo-space-3));
    }
}

@media (max-width: 599.98px) {
    body:has(.mud-dialog-container) #mud-snackbar-container.mud-snackbar-location-bottom-center {
        top: calc(env(safe-area-inset-top) + var(--oo-space-3));
        bottom: auto;
        flex-direction: column-reverse;
    }

        body:has(.mud-dialog-container) #mud-snackbar-container .mud-snackbar {
            margin-top: 0;
            margin-bottom: var(--oo-space-2);
        }
}

#mud-snackbar-container .mud-snackbar {
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    margin-top: var(--oo-space-2);
    padding: 0 var(--oo-space-4);
    border-radius: var(--oo-radius-md);
    background-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    box-shadow: var(--oo-shadow-flotant);
    font-size: 0.875rem;
    font-weight: 500;
}

    #mud-snackbar-container .mud-snackbar .mud-snackbar-content-message {
        padding: var(--oo-space-2) 0;
    }

    /* Només els errors i els avisos en porten (AvisosSnackbar): petita i del color del text. */
    #mud-snackbar-container .mud-snackbar .mud-snackbar-icon {
        padding: 0;
        margin-inline-end: var(--oo-space-2);
        font-size: 18px;
        opacity: 1;
    }

    /* «Desfer», «Descarregar» i la ✕: botons de text, en un to de l'accent llegible sobre el fons invers. */
    #mud-snackbar-container .mud-snackbar .mud-snackbar-content-action {
        margin-inline-end: calc(-1 * var(--oo-space-2));
        padding-inline-start: var(--oo-space-3);
    }

        #mud-snackbar-container .mud-snackbar .mud-snackbar-content-action > .mud-button-root {
            min-height: 36px;
            color: var(--mud-palette-primary-lighten);
            font-weight: 600;
        }

        #mud-snackbar-container .mud-snackbar .mud-snackbar-content-action > .mud-icon-button {
            color: inherit;
        }

html[data-tema="dark"] #mud-snackbar-container .mud-snackbar .mud-snackbar-content-action > .mud-button-root:not(.mud-icon-button) {
    color: var(--mud-palette-primary-darken);
}

/* Contingut dels diàlegs de moure i eliminar (categoria i actiu). */
.oo-moure-text {
    margin-bottom: var(--oo-space-3);
    color: var(--oo-text-2);
}

/* Opció del selector «Moure a»: la icona (sobre el pastel de la categoria, si en té) i el nom. */
.oo-moure-opcio {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-2);
    min-width: 0;
}

.oo-moure-opcio-icona {
    --oo-cat-color-efectiu: var(--oo-cat-color, var(--oo-text-2));
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--oo-radius-sm);
    background-color: color-mix(in srgb, var(--oo-cat-color-efectiu) 16%, var(--oo-surface));
    color: var(--oo-cat-color-efectiu);
}

.oo-moure-opcio-icona .mud-icon-root {
    width: 18px;
    height: 18px;
}

/* Títol de secció dins d'un formulari llarg (FormSeccio). */
.oo-form-seccio {
    margin: var(--oo-space-5) 0 var(--oo-space-1);
    padding-top: var(--oo-space-4);
    border-top: var(--oo-border);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--oo-text-3);
}

.oo-form-seccio-primera {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* SelectorIconaColor --------------------------------------------------------------- */
.oo-selector-icona-color {
    margin-top: var(--oo-space-4);
}

.oo-selector-previsualitzacio {
    display: flex;
    align-items: center;
    gap: var(--oo-space-3);
    margin-bottom: var(--oo-space-4);
}

.oo-selector-previsualitzacio-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--oo-radius-md);
}

.oo-selector-previsualitzacio-nom {
    font-weight: 600;
    color: var(--oo-text);
}

.oo-selector-etiqueta {
    display: block;
    margin-bottom: var(--oo-space-2);
    color: var(--oo-text-2);
}

.oo-selector-icones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: var(--oo-space-2);
    margin-bottom: var(--oo-space-4);
}

.oo-selector-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: var(--oo-border);
    border-radius: var(--oo-radius-sm);
    background-color: var(--oo-surface);
    color: var(--oo-text-2);
    cursor: pointer;
}

    .oo-selector-icona:hover {
        border-color: color-mix(in srgb, var(--oo-primary) 40%, var(--mud-palette-lines-default));
    }

.oo-selector-colors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oo-space-2);
}

.oo-selector-color {
    width: 32px;
    height: 32px;
    border: 2px solid var(--oo-surface);
    border-radius: var(--oo-radius-pill);
    background-color: var(--oo-selector-color);
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
    cursor: pointer;
}

.oo-selector-icona.oo-selector-actiu {
    border-color: var(--oo-primary);
    background-color: var(--oo-surface-tint);
    color: var(--oo-primary);
}

.oo-selector-color.oo-selector-actiu {
    box-shadow: 0 0 0 2px var(--oo-primary);
}

/* Pestanyes de secció (PageHeader.Pestanyes) --------------------------------------- */
.oo-page-header-amb-pestanyes {
    margin-bottom: var(--oo-space-3);
}

/* <select> natiu (tema i idioma del Perfil, que s'envien amb un formulari real) amb la mateixa caixa que els camps de
   MudBlazor (app.css): vora, radi, alçada i focus. La fletxa, amb dos degradats en el gris del tema (sense imatges ni
   colors fixos). */
.oo-camp-select-natiu {
    min-width: 10rem;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--household-radius-control);
    background-color: var(--oo-surface);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--oo-text-2) 50%),
        linear-gradient(135deg, var(--oo-text-2) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    color: var(--oo-text);
    font: inherit;
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .oo-camp-select-natiu:hover {
        border-color: var(--mud-palette-primary);
    }

    .oo-camp-select-natiu:focus-visible {
        border-color: var(--mud-palette-primary);
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    }

/* Panell d'Admin -------------------------------------------------------------------- */
/* Dues classes: guanya a ".mud-simple-table table * tr > th", que posa el text a l'inici. */
.mud-simple-table .oo-text-dreta {
    text-align: right;
}

/* Formularis d'element i d'avís ----------------------------------------------------- */
/* Import i data al costat (es parteixen en dues files quan no hi caben). Alineats a dalt: el text d'ajuda
   d'un camp mai desplaça l'altre. */
.oo-form-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0 16px;
    align-items: start;
}

/* Ajuda d'un camp de la fila, sota tota la fila. */
.oo-form-fila-ajuda {
    display: block;
    margin-top: 4px;
}

/* Text al costat d'un camp: a l'altura de l'entrada. */
.oo-form-fila-text {
    align-self: end;
    padding-bottom: 8px;
}

/* «Escanejar document» i «Triar foto o arxiu» (AdjuntsPendents): en línia; si no hi caben, un sota l'altre. */
.oo-form-adjunts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oo-space-1) var(--oo-space-2);
    margin-top: 12px;
    margin-left: -8px;
}

/* Fulls inferiors amb MudDrawer (FullDetallText, FiltresResponsius, detall de Tipus de document): MudBlazor l'amaga
   amb bottom: -(--mud-drawer-height), l'alçada que mesura en obrir-se. Si el contingut creix després (el text d'un
   log llarg es pinta en el mateix render que obre el full), en tancar-lo en quedava a la vista la diferència. Ara
   s'amaga movent-lo tota la seva alçada real (translateY(100%), més l'ombra), sigui quin sigui el contingut o el
   scroll intern, i un cop fora deixa de ser visible (ni enfocable). */
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--open,
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--closed {
    bottom: 0;
}

.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--open {
    transform: none;
    visibility: visible;
}

.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--closed {
    transform: translateY(calc(100% + var(--oo-space-6)));
    visibility: hidden;
}

.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom:not(.mud-drawer--initial) {
    transition: transform 225ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 225ms;
}

.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--open:not(.mud-drawer--initial) {
    transition: transform 225ms cubic-bezier(0, 0, 0.2, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom:not(.mud-drawer--initial) {
        transition: none;
    }
}

/* Full inferior (bottom sheet, p. ex. OrigenDocumentSheet): diàleg enganxat a baix, a tota l'amplada, amb les
   cantonades superiors arrodonides. MudDialog no exposa el paper per a CSS aïllat. */
.mud-dialog-container:has(> .mud-dialog.oo-full-inferior) {
    padding: 0;
    align-items: flex-end;
}

.mud-dialog.oo-full-inferior {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: var(--oo-radius-lg) var(--oo-radius-lg) 0 0;
}

/* Full inferior només al mòbil (OrigenDocumentSheet, que també s'obre des del «+» de l'actiu a l'escriptori): a
   partir de 600 px, diàleg centrat i estret amb les quatre cantonades arrodonides. Al mòbil, el peu (que només té el
   «Cancel·lar» del diàleg) no ocupa lloc. */
@media (max-width: 599.98px) {
    .mud-dialog.oo-full-inferior--centrat-escriptori .mud-dialog-actions {
        display: none;
    }
}

@media (min-width: 600px) {
    .mud-dialog-container:has(> .mud-dialog.oo-full-inferior--centrat-escriptori) {
        padding: var(--oo-space-5);
        align-items: center;
    }

    .mud-dialog.oo-full-inferior.oo-full-inferior--centrat-escriptori {
        width: 100%;
        max-width: 400px;
        padding-bottom: 0;
        border-radius: var(--oo-radius-lg);
    }
}

/* Text només per al lector de pantalla (ex: «respecte al mes passat» al costat de la píndola «↑ 12%» d'Inici). */
.oo-visualment-amagat {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}