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

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

.oo-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--oo-radius-pill);
    background-color: color-mix(in srgb, var(--oo-primary) 14%, var(--oo-surface));
    color: var(--oo-primary);
    font: inherit;
    font-weight: 600;
    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: els Espais i membres fan scroll per dins i el peu queda a baix (MenuUsuariEspais). */
    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;
    }

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

/* 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;
    background-color: var(--oo-surface);
}

.oo-action-bar-ordre {
    flex: 0 0 190px;
    background-color: var(--oo-surface);
}

@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;
    padding-bottom: 2px;
    scrollbar-width: none;
}

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

.oo-filtre-xip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--oo-space-1);
    min-height: 32px;
    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.8125rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--oo-dur-fast) var(--oo-ease), border-color var(--oo-dur-fast) var(--oo-ease);
}

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

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

.oo-filtre-xip-actiu {
    border-color: var(--oo-primary);
    background-color: var(--oo-surface-tint);
    color: var(--oo-primary);
    font-weight: 600;
}

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

/* 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 170px;
    margin-left: auto;
}

    .oo-home-dies .mud-input-control {
        background-color: var(--oo-surface);
    }

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

/* Llista "Necessita atenció": files compactes dins una sola superfície, pensades per triar
   ràpid (no per gestionar, que és el que fan les targetes dels llistats). */
.oo-atencio {
    border: var(--oo-border);
    border-radius: var(--oo-radius-lg);
    background-color: var(--oo-surface);
    overflow: hidden;
}

.oo-atencio-fila {
    display: flex;
    align-items: center;
    border-bottom: var(--oo-border);
}

    .oo-atencio-fila:last-child {
        border-bottom: none;
    }

.oo-atencio-principal {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
    gap: var(--oo-space-3);
    min-width: 0;
    min-height: 60px;
    padding: var(--oo-space-3) var(--oo-space-4);
    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 (fons gris). Al
   tàctil, un feedback breu mentre es prem. */
@media (hover: hover) {
    .oo-atencio-principal:hover {
        background-color: color-mix(in srgb, var(--oo-primary) 4%, transparent);
    }
}

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

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

.oo-atencio-textos {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

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

.oo-atencio-nom {
    font-weight: 500;
    color: var(--oo-text);
}

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

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

/* Data concreta del venciment, al costat de la insígnia (no al mòbil, que no canvia). */
.oo-atencio-data {
    font-size: 0.8125rem;
    white-space: nowrap;
    color: var(--oo-text-3);
}

/* Accions de la fila (completar, marcar com a pagat, renovar): a la dreta. */
.oo-atencio-accions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-right: var(--oo-space-2);
}

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

/* Amb ratolí, només en passar-hi per sobre (o amb el focus); en tàctil, sempre visibles. */
@media (hover: hover) and (pointer: fine) {
    .oo-atencio-accions {
        opacity: 0;
        transition: opacity var(--oo-dur-fast) var(--oo-ease);
    }

    .oo-atencio-fila:hover .oo-atencio-accions,
    .oo-atencio-fila:focus-within .oo-atencio-accions {
        opacity: 1;
    }
}

/* A partir de 600 px, files compactes (~72 px): títol a dalt i, a sota, la insígnia, la data i
   categoria · actiu, tot junt i a prop del títol (abans la insígnia anava a l'altre extrem). */
@media (min-width: 600px) {
    .oo-atencio-principal {
        display: grid;
        grid-template-columns: auto auto auto minmax(0, 1fr);
        grid-template-areas:
            "mini nom nom nom"
            "mini due data sub";
        align-items: center;
        column-gap: var(--oo-space-2);
        row-gap: 2px;
        min-height: 72px;
        padding: var(--oo-space-3) var(--oo-space-3) var(--oo-space-3) var(--oo-space-4);
    }

    .oo-atencio-principal .oo-miniatura-actiu {
        grid-area: mini;
        margin-right: var(--oo-space-2);
    }

    .oo-atencio-textos {
        display: contents;
    }

    .oo-atencio-nom {
        grid-area: nom;
    }

    .oo-atencio-principal .oo-due {
        grid-area: due;
        justify-self: start;
    }

    .oo-atencio-data {
        grid-area: data;
    }

    .oo-atencio-subtitol {
        grid-area: sub;
    }

    .oo-atencio-subtitol::before {
        content: "· ";
    }
}

/* Al mòbil el DueBadge passa a sota del nom perquè el nom no quedi retallat a 3 lletres: graella amb
   la miniatura ocupant les dues files a l'esquerra. */
@media (max-width: 599.98px) {
    .oo-atencio-principal {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        row-gap: var(--oo-space-1);
    }

    .oo-atencio-principal .oo-miniatura-actiu {
        grid-row: 1 / span 2;
    }

    .oo-atencio-principal .oo-due {
        justify-self: start;
    }

    .oo-atencio-data {
        display: none;
    }
}

/* Import de la fila (detall del dia del Calendari): a la dreta, ocupant les dues línies. */
.oo-atencio-import {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--oo-text);
}

@media (max-width: 599.98px) {
    .oo-atencio-principal--import {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .oo-atencio-principal--import .oo-atencio-import {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (min-width: 600px) {
    .oo-atencio-principal--import {
        grid-template-columns: auto auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "mini nom nom nom imp"
            "mini due data sub imp";
    }

    .oo-atencio-principal--import .oo-atencio-import {
        grid-area: imp;
    }
}

/* Mètriques: tres enllaços amb el mateix pes, sempre en una fila. */
.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 {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
    padding: var(--oo-space-4);
    border: var(--oo-border);
    border-radius: var(--oo-radius-lg);
    background-color: var(--oo-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--oo-dur-fast) var(--oo-ease), box-shadow var(--oo-dur) var(--oo-ease);
}

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

.oo-metrica-valor {
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--oo-text);
}

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

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

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

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

.oo-section-card-titol {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-2);
}

.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 curts (oo-dialeg-curt), 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-curt, .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-curt, .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-curt, .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-curt, .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-curt, .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-curt, .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-curt, .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;
        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));
    }
}

/* 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 curts (MudDialog Class="oo-dialeg-curt"): modal compacte centrat també al mòbil, com les
   confirmacions, amb marge als costats i el contingut que fa scroll si cal. Al mòbil, els botons
   apilats a amplada completa i en ordre invers al del DOM: l'acció principal (l'última) queda a dalt i
   «Cancel·lar» (la primera) a baix. A escriptori, en fila com sempre. */
.mud-dialog.oo-dialeg-curt .mud-dialog-content {
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

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

    .mud-dialog.oo-dialeg-curt .mud-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--oo-space-2);
        padding: var(--oo-space-2) var(--oo-space-4) var(--oo-space-4);
    }

    .mud-dialog.oo-dialeg-curt .mud-dialog-actions > .mud-button-root {
        width: 100%;
        min-height: 44px;
        margin: 0;
        white-space: normal;
    }
}

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

/* Capçalera de grup dins d'un MudSelect (element desactivat que fa de títol). */
.mud-list-item.oo-select-grup {
    min-height: 32px;
    padding-top: var(--oo-space-3);
    opacity: 1;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--oo-text-3);
}

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

/* Grups per període de la llista de l'Agenda. */
.oo-agenda-grup {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    margin: 0 0 var(--oo-space-3);
    font-family: Inter, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--oo-text-2);
}

/* Camp del PIN a la Configuració de l'Espai: 4 dígits, no cal que ocupi tota la fila. */
.oo-camp-pin {
    max-width: 160px;
}

/* 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). */
.oo-form-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0 16px;
    align-items: end;
}

.oo-form-fila-text {
    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;
}

/* Només a partir de 960 px (on no hi ha barra inferior ni botó flotant): p. ex. el botó d'afegir de
   la capçalera d'una secció, que al mòbil substitueix BotoFlotant. */
.oo-nomes-escriptori-md {
    display: none;
}

@media (min-width: 960px) {
    .oo-nomes-escriptori-md {
        display: contents;
    }
}

/* Mentre un visor a pantalla completa és obert (omniaone.visor, VisorImatge): la pàgina de sota no
   es desplaça. */
.oo-sense-scroll,
.oo-sense-scroll body {
    overflow: hidden;
}

/* Full inferior (bottom sheet, AfegirActiuSheet): 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;
}