html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================================================
   Household — sistema visual propi (estil pla, sense ombres, amb personalitat)
   ========================================================================= */

:root {
    --household-radius-card: 20px;
    --household-radius-control: 9px;
    /* Tercer nivell de text (per sota de --mud-palette-text-secondary): etiquetes/metadades
       clarament auxiliars. Derivat amb color-mix() de les variables --mud-palette-* (que ja
       reaccionen soles al mode fosc, tant per preferència de sistema com pel commutador manual
       de MainLayout — a diferència d'un valor fix darrere @media prefers-color-scheme, que
       ignoraria el commutador manual) enlloc de duplicar un valor clar/fosc a mà. Contrast
       resultant ~5.2:1 sobre superfície clara i ~5.4:1 sobre fosca (compleix WCAG AA). */
    --household-text-tertiary: color-mix(in srgb, var(--mud-palette-text-secondary) 85%, var(--mud-palette-background) 15%);
}

/* Cap ombra enlloc: superfícies planes amb vora fina en comptes d'elevació. */
.mud-paper,
.mud-popover,
.mud-menu .mud-list,
.mud-picker-container {
    box-shadow: none !important;
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-paper {
    border-radius: var(--household-radius-card);
}

.household-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.household-appbar-brand {
    color: inherit;
    text-decoration: none;
}

    .household-appbar-brand:hover {
        opacity: 0.75;
    }

.household-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
}

/* Botons i camps: radius més tancat que les targetes, consistent amb la resta. */
.mud-button-root,
.mud-fab,
.mud-chip {
    border-radius: var(--household-radius-control);
}

/* Micro-interacció (mateix patró que .landing-btn a la Landing): un lleuger aixecament en
   hover/premuda, i un anell de focus clar per a navegació per teclat. Sense res d'això
   MudBlazor només depèn de la ondulació ("ripple"), que aquí ja tenim suprimida via les
   ombres a 0 de dalt (regla ".mud-paper, .mud-popover..."). */
.mud-button-root {
    transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
    .mud-button-root:not(.mud-disabled):hover {
        transform: translateY(-1px);
    }
}

.mud-button-root:not(.mud-disabled):active {
    transform: translateY(0) scale(0.98);
    transition-duration: 80ms;
}

.mud-button-root.mud-disabled {
    opacity: 0.5;
}

.mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.mud-input-control .mud-input-outlined {
    border-radius: var(--household-radius-control);
}

/* Reconverteix el camp "underline" per defecte de MudBlazor en una caixa amb vora
   (sense la línia inferior), coherent amb la resta de controls de la interfície. */
.mud-input.mud-input-underline {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--household-radius-control);
    padding: 6px 12px 4px;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.mud-input.mud-input-underline:hover {
    border-color: var(--mud-palette-primary);
}

/* Focus: anell subtil (no una ombra forta) al voltant del camp, a més de la vora que ja
   canvia de color — mateix patró "focus elegant" que un input de Stripe/Linear. */
.mud-input.mud-input-underline.mud-input-underline-focused {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.mud-input.mud-input-underline.mud-input-error {
    border-color: var(--mud-palette-error);
}

.mud-input.mud-input-underline:before,
.mud-input.mud-input-underline:after {
    display: none !important;
}

.mud-input-control-input-container {
    margin-top: 22px;
}

/* Targeta de mètrica destacada (ex: "Aquest mes" al Dashboard/Despeses): to pastel càlid
   derivat amb color-mix() de --mud-palette-surface (que ja reacciona sola al mode fosc, tant
   per preferència de sistema com pel commutador manual de MainLayout) enlloc de duplicar un
   valor clar/fosc a mà darrere "@media prefers-color-scheme" — aquell mecanisme NOMÉS reacciona
   a la preferència del sistema operatiu, no al commutador manual de l'app, i per tant deixava
   el pastel clar (il·legible) actiu quan algú commutava a fosc manualment amb el SO en clar. */
.household-metric-highlight {
    background-color: color-mix(in srgb, #E8734A 16%, var(--mud-palette-surface)) !important;
    border-color: transparent !important;
}

/* Selectors compostos (.mud-typography-X + classe pròpia) perquè guanyin en especificitat la
   mida/pes que imposa el Typo de MudText, independentment de l'ordre de càrrega dels CSS
   (mateix truc ja establert a .mud-dialog.mud-dialog-width-xl / .mud-link.household-actiu-card-veure-pill):
   sense això, "Typo.caption"/"Typo.body1" guanyaven silenciosament i aquestes targetes es
   veien amb una mida de text genèrica en comptes de l'etiqueta petita + xifra grossa previstes. */
.mud-typography-caption.household-metric-label {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Sobre el pastel càlid de .household-metric-highlight cal més contrast que el
   text-secondary habitual (verificat WCAG AA en ambdós modes, vegeu comentari de dalt). */
.household-metric-highlight .household-metric-label {
    color: var(--mud-palette-text-primary);
}

.mud-typography-body1.household-metric-figure {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    display: block;
}

/* Mateix motiu: ".mud-paper" de MudBlazor imposa --mud-default-borderradius (12px) amb la
   mateixa especificitat que la regla pròpia de sota, i com que es carrega després sempre
   guanyava. Un selector compost (.mud-paper.mud-paper-outlined, que és com són pràcticament
   totes les superfícies d'aquesta app) el supera sense necessitat de !important. */
.mud-paper.mud-paper-outlined {
    border-radius: var(--household-radius-card);
}

/* Targeta d'urgència: vora esquerra de color en comptes de vora perimetral. */
.household-urgent-card {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

/* Menú lateral: cada element amb un badge d'icona pastel; la fila activa es
   tenyeix sencera amb el mateix to (no només el badge). */
.household-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin: 2px 8px;
    border-radius: var(--household-radius-control);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    min-height: 44px;
}

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

    .household-nav-link.active {
        background-color: var(--household-nav-pastel, transparent);
    }

.household-nav-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
    background-color: var(--household-nav-pastel, transparent);
}

    .household-nav-badge .mud-icon-root {
        width: 16px;
        height: 16px;
        color: var(--household-nav-accent, currentColor);
    }

/* Icones d'acció soltes (fora del menú, sense badge). Colors fixos (no varien amb el tema). */
.household-icon-create {
    color: #3454D1 !important;
}

.household-icon-delete {
    color: #E24B4A !important;
}

.household-icon-upload {
    color: #0F6E56 !important;
}

.household-icon-download {
    color: #3F8F5F !important;
}

.household-icon-view {
    color: #3454D1 !important;
}

/* Input de fitxer natiu (pujada de documents/fotos) i formularis natius de /Account/:
   coherents amb la resta de camps i amb el tema (Bootstrap no reacciona al mode fosc). */
.form-control {
    border-radius: var(--household-radius-control);
    border: 1px solid var(--mud-palette-lines-inputs);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.form-label,
.form-check-label {
    color: var(--mud-palette-text-primary);
}

.text-danger {
    color: var(--mud-palette-error) !important;
}

/* Taules (MudTable, ex: Despeses/Admin/Ubicacions): separadors més subtils i més aire
   vertical que la densitat per defecte de MudBlazor, coherent amb la resta de superfícies
   planes de l'app. La vora ja ve de --mud-palette-table-lines (MudBlazor l'aplica sola). */
.mud-table-root .mud-table-cell,
.mud-table-root .mud-table-head .mud-table-cell {
    padding-top: 12px;
    padding-bottom: 12px;
}

.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

/* Calendari: força que les 7 columnes (dl-dg) es reparteixin sempre dins l'amplada
   disponible, sense desbordar-se ni deixar cap dia tallat a mòbil. */
.household-calendar-table table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

/* Capçalera del mes: el nom es centra i posa en majúscula inicial (abans es feia amb un
   Style= inline sobre el MudText, ara amb classe pròpia). */
.household-cal-header-mes {
    flex: 1;
    text-align: center;
    text-transform: capitalize;
}

/* La <td> es manté "buida" a efectes visuals (calen table-layout:fixed + border-collapse
   perquè els 375px de mòbil no desbordin, vegeu regla de sobre): tot l'aspecte de targeta
   arrodonida (border-radius no té cap efecte sobre <td> amb border-collapse) es fa amb un
   <div> intern, que és el que realment rep vora, radius, hover i estats. */
/* Selector compost amb 3 classes perquè guanyi en especificitat la regla pròpia de MudBlazor
   ".mud-simple-table.mud-table-dense * tr td" (2 classes + 2 elements): sense això la cel·la
   es queda amb el padding 6px 16px per defecte, només ~19px d'amplada útil a mòbil, i el "dia"
   es veu com una píndola alta en comptes d'una targeta (mateix truc que a
   .mud-paper.mud-paper-outlined de dalt). */
.household-calendar-table.mud-table-dense td.household-cal-day-cell {
    vertical-align: top;
    width: 14.28%;
    padding: 3px;
    box-sizing: border-box;
}

.household-cal-day {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
    padding: 6px 4px;
    box-sizing: border-box;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--household-radius-control);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

@media (hover: hover) {
    .household-cal-day:hover {
        background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.05));
    }
}

/* Cap de setmana: to molt subtil perquè es distingeixi sense cridar l'atenció. */
.household-cal-day-cap-setmana {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

/* Avui: només vora de color (mai fons ple), perquè quedi clarament diferenciat del dia
   seleccionat (fons ple) encara que coincideixin el mateix dia. */
.household-cal-day-avui {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    padding: 5px 3px;
}

/* Seleccionat: fons ple suau, l'únic estat amb fons de color propi. */
.household-cal-day-seleccionat {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface));
    border-color: var(--mud-palette-primary);
}

@media (hover: hover) {
    .household-cal-day-seleccionat:hover {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 26%, var(--mud-palette-surface));
    }
}

.household-cal-day-num {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.household-cal-day-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.household-cal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.household-cal-dot-element {
    background-color: #0F6E56;
}

.household-cal-dot-avis {
    background-color: #854F0B;
}

/* Color fix només per a la llegenda (el punt real d'un esdeveniment concret es pinta amb el
   color del TipusActiu del seu Actiu via ActiuPresentacio.ColorPerTipus, vegeu household-cal-day-barres
   més avall per al mateix criteri aplicat a les barres de rang). */
.household-cal-dot-esdeveniment {
    background-color: #2F7FBF;
}

.household-cal-dot-exces {
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
}

/* Barres d'esdeveniment de diversos dies (Element.DataInici != DataFi): un segment per cel·la
   apilat sota els punts, amb marge horitzontal negatiu (compensa el padding de la targeta del
   dia + el de la cel·la de la taula, vegeu household-cal-day/household-cal-day-cell més amunt)
   perquè el segment d'un dia i el del següent es toquin sense escletxa visible — l'efecte de
   "barra contínua" ve d'aquí, no de cap element real que travessi diverses cel·les. Cantonada
   arrodonida només al costat que sigui l'inici/fi real del rang (mai als dies intermedis).*/
.household-cal-day-barres {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.household-cal-barra {
    height: 6px;
    margin: 0 -8px;
}

.household-cal-barra-inici {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.household-cal-barra-fi {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.household-cal-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.household-cal-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Mateix criteri de color pendent/pagat ja establert als xips d'Estat (ActiuDetail.razor:
   ColorEstatElement/ColorEstatAvis) — ambre per pendent, verd per ja pagat/completat. */
.household-cal-resum-pendent {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}

.household-cal-resum-pagat {
    color: var(--mud-palette-success);
}

/* Barra de proporció Fixa/Variable a /despeses (ResumMensual): dos segments flex l'amplada dels
   quals ve directament del % calculat a la pàgina (style inline), sense cap llibreria de
   gràfics. Colors diferents dels ja establerts per pendent (ambre)/pagat (verd) perquè "fixa"
   i "variable" són un eix completament diferent (com es paga, no si ja s'ha pagat). */
.household-percent-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--mud-palette-action-disabled-background, #E0E0E0);
}

.household-percent-bar-fixa {
    background-color: var(--mud-palette-primary);
}

.household-percent-bar-variable {
    background-color: var(--mud-palette-info);
}

.mud-typography-body1.household-despeses-fixa {
    color: var(--mud-palette-primary);
}

.mud-typography-body1.household-despeses-variable {
    color: var(--mud-palette-info);
}

/* Comparativa "+X% respecte al mes passat/mateix mes any anterior" al Resum d'aquest mes:
   vermell = despesa a l'alça (pitjor), verd = a la baixa (millor) — invers al verd/vermell
   habitual de cotitzacions borsàries, més intuïtiu per a despesa personal. */
.mud-typography-caption.household-comparativa-pujada {
    color: var(--mud-palette-error);
}

.mud-typography-caption.household-comparativa-baixada {
    color: var(--mud-palette-success);
}

.mud-typography-caption.household-comparativa-neutra {
    color: var(--mud-palette-text-secondary);
}

/* Barra de percentatge d'una sola fila (DesglossamentDespesaList): un únic segment, a diferència
   de .household-percent-bar (que en té dos, Fixa/Variable), perquè cada fila del desglossament
   només representa la seva pròpia part respecte al total del mes. */
.household-percent-bar-simple {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background-color: var(--mud-palette-action-disabled-background, #E0E0E0);
}

.household-percent-bar-simple-fill {
    height: 100%;
    background-color: var(--mud-palette-primary);
    border-radius: 3px;
}

.household-despesa-fila:not(:last-child) {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Mides tàctils còmodes a mòbil. */
@media (max-width: 599px) {
    .mud-button-root, .mud-icon-button, .mud-input-control-input-container {
        min-height: 44px;
    }
}

/* Pàgines /Account/ (Login/Register): es renderitzen amb SSR estàtic (sense circuit
   interactiu, necessari per poder escriure la cookie d'autenticació), així que no es pot
   detectar el mode fosc via JS interop (WatchSystemDarkModeAsync no funciona aquí). En
   comptes d'això, se sobreescriuen les variables de paleta amb una media query CSS pura,
   només dins d'aquest contenidor, sense afectar la resta de l'aplicació.  */
.household-account-shell {
    min-height: 100vh;
    background-color: var(--mud-palette-background);
}

@media (prefers-color-scheme: dark) {
    .household-account-shell {
        --mud-palette-background: #101217;
        --mud-palette-surface: #191B21;
        --mud-palette-appbar-background: #191B21;
        --mud-palette-appbar-text: #F0F2F5;
        --mud-palette-divider: #262A33;
        --mud-palette-lines-default: #262A33;
        --mud-palette-lines-inputs: #262A33;
        --mud-palette-text-primary: #F0F2F5;
        --mud-palette-text-secondary: #94A0B2;
        --mud-palette-primary: #5C7CF0;
        --mud-palette-error: #E86A6A;
    }
}

/* =========================================================================
   Login/Register (AccountLayout): graella de dues columnes — mosaic de marca a
   l'esquerra (purament decoratiu, amagat a mòbil) i formulari a la dreta. La resta de l'app
   és plana (sense ombres, vegeu .mud-paper de sota), però aquí sí n'hi ha una de subtil a la
   targeta del formulari: excepció deliberada i acotada, mateix criteri que altres targetes
   "protagonistes" (ActiuCard/Dashboard) que ja en porten.
   ========================================================================= */
.household-auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
}

@media (min-width: 960px) {
    .household-auth-split {
        grid-template-columns: minmax(360px, 560px) minmax(0, 1fr);
    }
}

.household-auth-brand {
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 64px 56px;
    background: linear-gradient(160deg,
        color-mix(in srgb, #6C3FE0 12%, var(--mud-palette-background)) 0%,
        color-mix(in srgb, #3454D1 9%, var(--mud-palette-background)) 100%);
    border-right: 1px solid var(--mud-palette-lines-default);
}

@media (min-width: 960px) {
    .household-auth-brand {
        display: flex;
    }
}

.household-auth-brand-content {
    max-width: 420px;
}

.household-auth-brand-marca {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.household-auth-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--household-radius-control);
}

.household-auth-brand-nom {
    color: var(--mud-palette-text-primary);
}

.household-auth-brand-subtitol {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    line-height: 1.4em;
    /* !important: MudText renderitza un <h5> amb el propi margin de MudBlazor, que altrament
       guanya la cascada (carregada després d'app.css) i elimina aquest espaiat. */
    margin-bottom: 48px !important;
}

.household-auth-mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 320px;
}

.household-auth-mosaic-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--household-radius-card);
    background-color: color-mix(in srgb, var(--household-auth-tile-color) 16%, var(--mud-palette-surface));
    color: var(--household-auth-tile-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .household-auth-mosaic-tile svg {
        width: 30px;
        height: 30px;
    }

.household-auth-form-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

/* Amplada del propi contenidor de columna: prou generosa per no estrènyer altres pàgines que
   comparteixen aquest layout (ex: Onboarding.razor, amb la seva pròpia MudContainer
   MaxWidth.Small de 600px i la graella de Categories recomanades — mai només les 420px que calen
   per a Login/Register). L'amplada final de la targeta de Login/Register ve d'household-auth-card
   (max-width:420px) més avall, no d'aquí. */
.household-auth-form-col-inner {
    width: 100%;
    max-width: 640px;
}

/* Franja "resum" de marca només a mòbil (<960px, vegeu AccountLayout.razor): mateix gradient que
   household-auth-brand d'escriptori però en horitzontal i molt més baixa — logo+nom reduïts,
   subtítol i 5 de les 6 icones del mosaic en una sola fila, mai la graella 3x2 sencera. Padding
   superior amb env(safe-area-inset-top): aquestes pàgines no tenen cap AppBar per davant, així
   que la franja toca la vora superior real de la pantalla (notch/illa dinàmica d'iPhone inclosos). */
.household-auth-mobile-resum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: max(20px, env(safe-area-inset-top)) 20px 18px;
    text-align: center;
    background: linear-gradient(160deg,
        color-mix(in srgb, #6C3FE0 12%, var(--mud-palette-background)) 0%,
        color-mix(in srgb, #3454D1 9%, var(--mud-palette-background)) 100%);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

@media (min-width: 960px) {
    .household-auth-mobile-resum {
        display: none;
    }
}

.household-auth-mobile-resum-marca {
    display: flex;
    align-items: center;
    gap: 8px;
}

.household-auth-mobile-resum-logo {
    width: 28px;
    height: 28px;
    border-radius: var(--household-radius-control);
}

.household-auth-mobile-resum-subtitol {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    max-width: 300px;
    margin: 0 !important;
}

.household-auth-mobile-resum-icones {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.household-auth-mobile-resum-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--household-radius-control);
    background-color: color-mix(in srgb, var(--household-auth-tile-color) 16%, var(--mud-palette-surface));
    color: var(--household-auth-tile-color);
}

    .household-auth-mobile-resum-icona svg {
        width: 18px;
        height: 18px;
    }

/* Targeta de Login/Registre: substitueix la vora superior plana d'household-brand-card (un sol
   color, !important, vegeu més avall) per una barra amb el mateix degradat violeta→blau del
   mosaic d'escriptori (household-auth-brand), i hi afegeix una ombra de tres capes enlloc de cap
   ni una (la regla ".mud-paper, .mud-popover..." de dalt de tot posa box-shadow:none !important
   a TOTA superfície de l'app per disseny — aquí sí que val la pena trencar-ho, mateix criteri
   "excepció deliberada i acotada" que ja s'aplicava a la intenció original d'aquesta targeta,
   només que ara amb prou especificitat perquè realment s'apliqui). Capa 1: contacte molt tènue
   (la separa del fons). Capa 2: ombra ambient neutra (dona profunditat). Capa 3: resplendor ampla
   i molt suau tenyida amb el blau corporatiu (la personalitat pròpia que demanava la tasca —
   mai un gris genèric). */
.household-auth-card {
    position: relative;
    overflow: hidden;
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 36px;
    box-shadow:
        0 1px 2px rgba(15, 15, 40, 0.05),
        0 10px 28px -10px rgba(15, 15, 40, 0.14),
        0 30px 60px -24px color-mix(in srgb, #3454D1 24%, transparent) !important;
}

.household-auth-card.household-brand-card {
    border-top: none !important;
}

.household-auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #6C3FE0, #3454D1);
}

@media (prefers-color-scheme: dark) {
    /* Una ombra neutra fosca-sobre-fosc gairebé no es veu: es redueix a una vora de contacte molt
       discreta i es deixa que sigui la resplendor blava (més visible sobre fons fosc que una
       ombra) qui aporti la profunditat. */
    .household-auth-card {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.35),
            0 10px 28px -12px rgba(0, 0, 0, 0.5),
            0 30px 60px -22px color-mix(in srgb, #6C3FE0 32%, transparent) !important;
    }
}

@media (max-width: 599px) {
    .household-auth-card {
        padding: 28px 22px;
    }
}

.household-auth-subtitol {
    color: var(--mud-palette-text-secondary);
    /* !important: MudText renderitza un <p> amb el propi margin:0 de MudBlazor, carregat
       després d'app.css, que altrament guanya la cascada i elimina aquest espaiat. */
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

/* A mòbil ja el mostra la franja household-auth-mobile-resum de sobre (amb el logo i les
   icones): repetir-lo aquí també allargaria la pàgina sense aportar-hi res de nou. A escriptori
   es queda tal com estava (aquí és l'únic lloc on apareix). */
@media (max-width: 959px) {
    .household-auth-subtitol {
        display: none;
    }
}

/* Camps amb icona a l'esquerra: com que aquestes pàgines es renderitzen amb SSR estàtic
   (vegeu household-account-shell), no es pot fer servir l'Adornment de MudTextField (necessita
   un circuit interactiu) — icona superposada en CSS pur sobre un <InputText> natiu normal. */
.household-auth-camp {
    margin-bottom: 22px;
}

.household-auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.household-auth-input-icon {
    position: absolute;
    left: 16px;
    display: flex;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    transition: color 0.15s ease;
}

    .household-auth-input-icon svg {
        width: 20px;
        height: 20px;
    }

/* L'icona es tenyeix del color corporatiu mentre el camp té el focus (:has(), suportat pels
   navegadors moderns; sense suport simplement es queda gris com ara, cap trencament). */
.household-auth-input-wrapper:has(.form-control:focus) .household-auth-input-icon {
    color: var(--mud-palette-primary);
}

.household-auth-input-wrapper .form-control {
    height: 52px;
    padding-left: 48px;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.household-auth-input-wrapper .form-control.household-auth-input-amb-alternar {
    padding-right: 48px;
}

/* Bootstrap (.form-control) no reacciona a l'estil de l'app: sense això, el focus cauria en un
   blau genèric del navegador enlloc del corporatiu — un detall petit però és exactament el que
   fa que un formulari se senti "estàndard" enlloc de dissenyat. */
.household-auth-input-wrapper .form-control:hover:not(:focus) {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-inputs));
}

.household-auth-input-wrapper .form-control:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    outline: none;
}

/* Mostrar/amagar contrasenya: aquestes pàgines no tenen circuit interactiu, així que no es pot
   fer servir @onclick de Blazor — un onclick="" pla (JS natiu del navegador, no interceptat pel
   pipeline d'events de Blazor) commuta l'atribut type de l'input veí i la pròpia classe. */
.household-auth-toggle-password {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

    .household-auth-toggle-password:hover {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    }

    .household-auth-toggle-password svg {
        width: 20px;
        height: 20px;
    }

    .household-auth-toggle-password .household-auth-icon-eye-off {
        display: none;
    }

    .household-auth-toggle-password.household-auth-toggle-password-actiu .household-auth-icon-eye {
        display: none;
    }

    .household-auth-toggle-password.household-auth-toggle-password-actiu .household-auth-icon-eye-off {
        display: block;
    }

/* !important arreu: MudButton ja porta el seu propi background-color pla i una ombra Material
   grisa genèrica (".mud-button-filled.mud-button-filled-primary", 2 classes — més específica
   que aquesta d'una sola classe), que altrament guanyen la cascada silenciosament. Degradat molt
   subtil (mai un canvi de to cridaner) + una ombra tenyida amb el mateix blau enlloc de gris,
   perquè el botó es llegeixi "de la marca" i no un botó Material per defecte. */
.household-auth-submit {
    height: 50px;
    font-size: 1rem;
    letter-spacing: 0.02em;
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--mud-palette-primary) 100%, white 12%) 0%,
        var(--mud-palette-primary) 55%,
        color-mix(in srgb, var(--mud-palette-primary) 100%, black 10%) 100%) !important;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--mud-palette-primary) 55%, transparent) !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
    .household-auth-submit:not(.mud-disabled):hover {
        box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--mud-palette-primary) 68%, transparent) !important;
    }
}

/* Llista de beneficis sota el botó: icones discretes, mai la protagonista de la pantalla. */
.household-auth-beneficis {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.household-auth-benefici {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

    .household-auth-benefici .mud-icon-root {
        width: 16px;
        height: 16px;
        color: var(--mud-palette-primary);
    }

/* =========================================================================
   ItemInfoCard: targeta d'informació reutilitzable (Elements/Categories/
   Actius/Avisos). Els colors de la banda d'estat i la vora dels botons es
   calculen amb color-mix() a partir de les variables --mud-palette-* (que ja
   reaccionen soles al mode fosc, tant per preferència de sistema com pel
   commutador manual), enlloc de duplicar valors clar/fosc a mà.
   ========================================================================= */

:root {
    --household-border-strong: color-mix(in srgb, var(--mud-palette-text-primary) 25%, var(--mud-palette-lines-default));
}

.household-item-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
}

.household-item-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.household-item-card-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.household-item-card-avatar .mud-icon-root {
    width: 22px;
    height: 22px;
}

.household-item-card-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Foto de perfil d'un Actiu dins una ItemInfoCard: contenidor més gran que el badge d'icona
   habitual (vegeu ItemInfoCard.ImatgeGran). Només s'aplica quan hi ha imatge real. */
.household-item-card-avatar-gran {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 16px;
}

.household-item-card-titols {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    padding-top: 2px;
}

/* min-height reserva sempre l'espai de 2 línies (vegeu el mateix comentari a
   .household-actiu-card-nom): perquè totes les targetes facin la mateixa alçada encara que
   quedin soles en una fila de la graella. */
.household-item-card-titol {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3em;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.household-item-card-subtitol {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.household-item-card-banda {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--household-radius-control);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 12px;
}

.household-item-card-banda-danger {
    background-color: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-surface));
    color: var(--mud-palette-error);
}

.household-item-card-banda-warning {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-surface));
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}

.household-item-card-banda-success {
    background-color: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface));
    color: var(--mud-palette-success);
}

.household-item-card-graella {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.household-item-card-camp {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.household-item-card-etiqueta {
    font-size: 0.75rem;
    color: var(--household-text-tertiary);
}

.household-item-card-valor {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.household-item-card-accions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.household-item-card-accio {
    flex: 1 1 0;
    min-width: 0;
    border: 0.5px solid var(--household-border-strong) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.household-item-card-accio-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Amb 3 botons ("Veure"/"Descarregar"/"Eliminar") a mòbil, el text no hi cap sense desbordar:
   es passa a icona sola (amb "title" com a alternativa accessible al text visible). */
@media (max-width: 400px) {
    .household-item-card-accio-text {
        display: none;
    }

    .household-item-card-accio {
        min-width: 40px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        .household-item-card-accio .mud-button-label {
            justify-content: center;
        }

        .household-item-card-accio .mud-icon-root {
            margin: 0 !important;
        }
}

/* Graella de targetes: 1 columna a mòbil, 2 a tauleta/escriptori.
   minmax(0, 1fr) enlloc de "1fr": una columna "1fr" no encongeix mai per sota de l'amplada
   mínima del seu contingut (ex: els 3 botons d'accions sense poder embolicar el text), fent
   que tota la pàgina desbordi horitzontalment a mòbil. Amb minmax(0, ...) la columna sí que
   pot encongir per sota d'aquest mínim i és la targeta (via overflow controlat) qui s'hi adapta. */
.household-item-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 600px) {
    .household-item-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Detall de marca exclusiu de Login/Registre: violeta elèctric #6C3FE0, no es fa servir
   enlloc més (no s'ha de confondre amb el violeta ja assignat a "Categories" al menú,
   que és un altre to, #534AB7). */
.household-brand-card {
    border-top: 4px solid #6C3FE0 !important;
}

/* =========================================================================
   Dashboard: llista compacta "Properament" (propòsit diferent de l'ItemInfoCard
   de les llistes de gestió: aquí cal triar ràpid, no gestionar).
   ========================================================================= */

.household-dashboard-row {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .household-dashboard-row:last-child {
        border-bottom: none;
    }

.household-dashboard-row-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.household-dashboard-row-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .household-dashboard-row-avatar .mud-icon-root {
        width: 16px;
        height: 16px;
    }

.household-dashboard-row-nom {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
}

/* "Resum" al Dashboard: fila única de xips amb scroll horitzontal natiu (substitueix les
   antigues targetes de comptador apilades). Inclou el xip "Avís" (color ambre fix), "Sense
   categoria" (neutre) i un xip per Categoria amb Elements/Avisos pendents (color ve de
   Categoria.Color: fons pastel via color-mix + text amb el color fort, ja que cada categoria
   només en desa un de sol). */
.household-chip-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

/* Radi tipus píndola (no el --household-radius-control de 9px dels botons/targetes) i mida
   compacta consistent per als tres tipus de xip (Avís/Sense categoria/Categoria). */
.household-resum-chip {
    flex-shrink: 0;
    font-weight: 600;
    border-radius: 999px !important;
}

/* Selector d'Espai prominent a dalt de tot d'Inici: fila amb scroll horitzontal, una targeta
   per Espai de l'usuari (amagada si només en té un). */
.household-espai-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.household-espai-card,
.household-espai-card-form {
    flex-shrink: 0;
}

.household-espai-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border: 0.5px solid var(--household-border-strong);
    border-radius: var(--household-radius-card);
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.household-espai-card-nom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Icona segons TipusEspai (Llar/Vacances/Empresa/Lloguer...): distingeix les targetes d'un cop
   d'ull sense haver de llegir el nom. Sense opacitat reduïda perquè tingui bon contrast tant a
   l'estat actiu (fons violeta) com a l'inactiu. */
.household-espai-card-icona {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.household-espai-card-sub {
    font-size: 0.6875rem;
}

.household-espai-card-actiu {
    background-color: #6C3FE0;
    border-color: #6C3FE0;
    color: #fff;
    cursor: default;
}

/* Input de PIN (EspaiPinDialog): 4 dígits grans i espaiats, centrats. */
.household-espai-pin-input {
    display: block;
    width: 100%;
    max-width: 160px;
    margin: 0 auto;
    padding: 10px;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    text-align: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--household-radius-control);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* Capçalera compacta d'Inici: salutació + Espai actual + fila d'estadístiques secundàries
   (Actius/Documents/Avisos/Despesa del mes/Compromisos futurs). Deliberadament sense targetes
   de color: número + etiqueta petita, separats per una vora prima, perquè quedin clarament per
   sota dels Actius en pes visual ("les estadístiques són secundàries"). */
.household-home-salutacio {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.household-home-espai-nom {
    color: var(--mud-palette-text-secondary);
}

.household-home-stats-strip {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

.household-home-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

    .household-home-stat:last-child {
        padding-right: 0;
        border-right: none;
    }

.household-home-stat-valor {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.household-home-stat-etiqueta {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Capçaleres de secció (Actius/Necessita atenció/...): jerarquia via mida i pes, no via
   targetes de colors — reforça que "Actius" pesi visualment més que la resta. */
.household-home-section-titol {
    margin-top: 28px;
    margin-bottom: 12px;
}

.household-home-section-titol:first-of-type {
    margin-top: 0;
}

/* =========================================================================
   "Les teves coses" (Home): graella d'Actius amb la fotografia com a protagonista
   (inspirada en Apple Home/Photos, mai còpia literal). Mobile-first: 1 columna al mòbil
   més petit, 2 al mòbil normal, 3 a tauleta, 4-5 a escriptori — a diferència de la resta
   de l'app (targetes planes sense ombra), aquestes SÍ porten una ombra molt subtil i un
   petit efecte hover/tap: excepció deliberada i acotada només a aquesta secció, no un
   canvi del sistema visual global.
   ========================================================================= */
.household-actius-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

@media (min-width: 380px) {
    .household-actius-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 720px) {
    .household-actius-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .household-actius-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1600px) {
    .household-actius-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Tota la targeta és l'enllaç (a diferència de l'antiga "Veure" en píndola a part): menys
   text, un únic gest clar tant a tocar com a clicar. */
a.household-actiu-hero-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) {
    a.household-actiu-hero-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.07);
    }
}

a.household-actiu-hero-card:active {
    transform: scale(0.98);
    transition-duration: 80ms;
}

@media (prefers-color-scheme: dark) {
    a.household-actiu-hero-card {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 10px rgba(0, 0, 0, 0.22);
    }

    @media (hover: hover) {
        a.household-actiu-hero-card:hover {
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.32);
        }
    }
}

/* Fotografia: 65% de l'alçada aprox. via aspect-ratio, sempre retallada uniformement. */
.household-actiu-hero-foto-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--mud-palette-lines-default);
}

.household-actiu-hero-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sense foto: mateixa proporció que amb foto (graella uniforme), icona centrada sobre un
   fons pastel derivat del color de la Categoria. */
.household-actiu-hero-foto-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .household-actiu-hero-foto-placeholder .mud-icon-root {
        width: 40px;
        height: 40px;
    }

.household-actiu-hero-cos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
}

.household-actiu-hero-nom {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.household-actiu-hero-tipus {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Indicadors (Documents/Pagaments/Avisos): només es mostren els que tenen recompte > 0,
   mai una filera fixa de zeros — "evitar molt text". */
.household-actiu-hero-indicadors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.household-actiu-hero-indicador {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

    .household-actiu-hero-indicador .mud-icon-root {
        width: 15px;
        height: 15px;
    }

/* =========================================================================
   Targetes de Categoria a "Les teves coses" del Dashboard: graella dedicada
   (household-categories-hero-grid, independent de household-actius-grid — que és la de la
   galeria d'Actius amb foto dins de CategoriaDetail — perquè un canvi de gap/columnes aquí no
   n'afecti l'altra). Estil "targeta d'aplicació" (icona gran a dalt, nom fins a 2 línies,
   comptadors protagonistes a baix) enlloc de fila CRUD compacta.
   ========================================================================= */
.household-categories-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (min-width: 720px) {
    .household-categories-hero-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .household-categories-hero-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1600px) {
    .household-categories-hero-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

a.household-categoria-hero-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 14px 20px;
    min-height: 188px;
    border-radius: 20px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) {
    a.household-categoria-hero-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.07);
    }
}

a.household-categoria-hero-card:active {
    transform: scale(0.98);
    transition-duration: 80ms;
}

@media (prefers-color-scheme: dark) {
    a.household-categoria-hero-card {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 10px rgba(0, 0, 0, 0.22);
    }

    @media (hover: hover) {
        a.household-categoria-hero-card:hover {
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.32);
        }
    }
}

.household-categoria-hero-icona {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .household-categoria-hero-icona .mud-icon-root {
        width: 32px;
        height: 32px;
    }

/* Fins a 2 línies senceres abans de truncar (mai una sola línia amb "..." per a noms una mica
   llargs, motiu original d'aquest redisseny): min-height reserva l'espai de 2 línies perquè els
   comptadors de sota quedin sempre alineats entre targetes, tinguin 1 o 2 línies de nom. */
.household-categoria-hero-nom {
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
    overflow-wrap: break-word;
}

.household-categoria-hero-comptadors {
    display: flex;
    gap: 20px;
    margin-top: auto;
    padding-top: 6px;
}

.household-categoria-hero-comptador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.household-categoria-hero-comptador-valor {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
}

.household-categoria-hero-comptador-etiqueta {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

/* Avisos pendents com a badge de cantonada (a l'estil icona d'app amb notificacions) enlloc
   d'un tercer comptador: no soterra Actius/Elements i només apareix quan cal parar atenció. */
.household-categoria-hero-avis-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--mud-palette-warning);
    color: #fff;
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* Targeta "+ Categoria" al final de la graella de "Les teves coses" del Dashboard: mateix
   llenguatge visual que household-item-card-afegir (gris, vora discontínua), però amb les
   dimensions d'una targeta d'household-categories-hero-grid enlloc de les d'household-item-card-
   grid, perquè encaixi a la mateixa fila que a.household-categoria-hero-card. */
.household-categoria-hero-afegir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 188px;
    border-radius: 20px;
    background-color: var(--mud-palette-action-disabled-background, rgba(0, 0, 0, 0.04));
    border: 2px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font: inherit;
    transition: border-color 150ms ease, color 150ms ease;
}

    .household-categoria-hero-afegir:hover {
        border-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary);
    }

    .household-categoria-hero-afegir .mud-icon-root {
        width: 32px;
        height: 32px;
    }

/* =========================================================================
   Graella de Categories recomanades seleccionables (SelectorCategoriesRecomanades, Onboarding i
   CrearEspaiDialog): mateixa graella/icona/nom que les targetes de Categoria del Dashboard
   (household-categories-hero-grid / household-categoria-hero-icona/-nom), però com a <button>
   commutable (seleccionada/no) enlloc d'un enllaç de navegació.
   ========================================================================= */
.household-categoria-selector-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-height: 150px;
    padding: 20px 12px 16px;
    border-radius: 20px;
    background-color: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    font: inherit;
    color: inherit;
}

.household-categoria-selector-card.household-categoria-selector-seleccionada {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.household-categoria-selector-check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--mud-palette-primary);
    display: flex;
}

/* Targeta "+ Afegir categoria" al final de la graella de CategoriesIndex: mateix llenguatge
   visual que household-item-card (les targetes de Categoria d'aquesta pàgina), però en gris
   clar i sense contingut de dades — només convida a obrir el diàleg. */
.household-item-card-afegir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    border-radius: var(--household-radius-card, 20px);
    background-color: var(--mud-palette-action-disabled-background, rgba(0, 0, 0, 0.04));
    border: 2px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font: inherit;
    transition: border-color 150ms ease, color 150ms ease;
}

    .household-item-card-afegir:hover {
        border-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary);
    }

/* =========================================================================
   Fitxa de detall d'un Actiu (ActiuDetail): hero superior amb fotografia gran 16:9,
   a l'estil "pàgina de producte" — nom d'espai (household-actiu-fitxa-*) diferent del de la
   targeta de galeria (household-actiu-hero-*, aspect-ratio 4:3) per no col·lidir-hi.
   ========================================================================= */
.household-actiu-fitxa-hero {
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
}

@media (prefers-color-scheme: dark) {
    .household-actiu-fitxa-hero {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 10px rgba(0, 0, 0, 0.22);
    }
}

/* md i amunt (escriptori/tauleta gran): capçalera en dues columnes — fotografia d'alçada fixa a
   l'esquerra, informació principal + accions a la dreta — enlloc d'apilada amb la fotografia a
   aspect-ratio 16:9 a amplada completa (que a un viewport ample arribava a ocupar ~800px
   d'alçada). Per sota de 960px es manté l'apilat mòbil intacte. */
@media (min-width: 960px) {
    .household-actiu-fitxa-hero {
        display: flex;
        align-items: stretch;
    }
}

.household-actiu-fitxa-hero-foto-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--mud-palette-lines-default);
}

/* sm/tauleta (600-959px): encara apilada, però amb una alçada topada enlloc de l'aspect-ratio
   16:9 sencer (massa alta a amplades de tauleta). */
@media (min-width: 600px) and (max-width: 959px) {
    .household-actiu-fitxa-hero-foto-wrapper {
        aspect-ratio: auto;
        height: 220px;
    }
}

@media (min-width: 960px) {
    /* Amplada més continguda just en aquest primer graó: entre el calaix de navegació fix
       (240px, vegeu MudDrawer Breakpoint.Md a MainLayout) i els botons Editar/Eliminar (que mai
       han de passar a sota, vegeu household-actiu-fitxa-hero-textos/-accions més avall), 300px
       hi deixava massa poc marge per al nom — es guanya amplada real per al text enlloc. */
    .household-actiu-fitxa-hero-foto-wrapper {
        aspect-ratio: auto;
        width: 260px;
        height: 220px;
        flex-shrink: 0;
    }
}

@media (min-width: 1280px) {
    .household-actiu-fitxa-hero-foto-wrapper {
        width: 340px;
        height: 250px;
    }
}

@media (min-width: 1920px) {
    .household-actiu-fitxa-hero-foto-wrapper {
        width: 380px;
        height: 280px;
    }
}

.household-actiu-fitxa-hero-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.household-actiu-fitxa-hero-foto-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .household-actiu-fitxa-hero-foto-placeholder .mud-icon-root {
        width: 64px;
        height: 64px;
    }

.household-actiu-fitxa-hero-cos {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.household-actiu-fitxa-hero-titols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.household-actiu-fitxa-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.household-actiu-fitxa-hero-accions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* md i amunt: la informació principal es centra verticalment al costat de la fotografia
   (l'alçada de -cos ara ve determinada per align-items:stretch al pare), i el nom/accions es
   mantenen sempre a la mateixa fila — els botons Editar/Eliminar queden fixos a la dreta enlloc
   de passar a sota en apilar-se per manca d'espai. */
@media (min-width: 960px) {
    .household-actiu-fitxa-hero-cos {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    .household-actiu-fitxa-hero-titols {
        flex-wrap: nowrap;
    }

    .household-actiu-fitxa-hero-textos {
        min-width: 0;
        flex: 1 1 auto;
    }

    .household-actiu-fitxa-hero-accions {
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    .household-actiu-fitxa-hero-cos {
        padding: 16px;
    }

    .household-actiu-fitxa-hero-accions {
        width: 100%;
    }

        .household-actiu-fitxa-hero-accions .mud-button-root {
            flex: 1;
        }
}

/* Graella "label + valor" de la secció Informació: reutilitza el mateix estil atòmic que
   household-item-card-camp/etiqueta/valor, però sense la vora superior (aquí és el primer
   contingut de la targeta, no un bloc addicional sota una capçalera). */
.household-actiu-info-graella {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

@media (min-width: 600px) {
    .household-actiu-info-graella {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================================
   Capçalera resum de CategoriaDetail: "mini dashboard" de la Categoria (Fase 8), amb el mateix
   llenguatge visual que la resta de l'app (targeta gran, cantonades arrodonides ja donades per
   .mud-paper, icona protagonista, tipografia clara). Responsive: les estadístiques passen a
   embolicar-se en diverses línies a mòbil enlloc de desbordar horitzontalment.
   ========================================================================= */
.household-categoria-resum {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.household-categoria-resum-cap {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.household-categoria-resum-icona {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .household-categoria-resum-icona .mud-icon-root {
        width: 32px;
        height: 32px;
    }

.household-categoria-resum-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.household-categoria-resum-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 84px;
}

.household-categoria-resum-valor {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
}

.household-categoria-resum-etiqueta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .household-categoria-resum-cap {
        gap: 12px;
    }

    .household-categoria-resum-icona {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 14px;
    }

        .household-categoria-resum-icona .mud-icon-root {
            width: 26px;
            height: 26px;
        }

    .household-categoria-resum-stats {
        gap: 16px;
    }

    .household-categoria-resum-stat {
        min-width: 68px;
    }
}

/* Estat buit de la pestanya "Actius" quan la Categoria encara no en té cap de real (Fase 8):
   mai deixar la pantalla buida, sempre amb un CTA clar per crear-ne el primer. */
.household-categoria-estat-buit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 20px;
}

    .household-categoria-estat-buit .mud-icon-root {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }

/* Foto de perfil al formulari de creació/edició d'Actiu: patró d'avatar habitual (cercle gran +
   badge de càmera superposat), enlloc de semblar el mateix input genèric de pujar documents. */
.household-actiu-foto-secio {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

.household-actiu-foto-wrapper {
    position: relative;
    width: 104px;
    height: 104px;
}

.household-actiu-foto-circle {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.household-actiu-foto-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.household-actiu-foto-circle-icon {
    width: 40px;
    height: 40px;
}

.household-actiu-foto-camera {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.household-actiu-foto-menu-panel {
    position: absolute;
    top: 112px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 4px;
    z-index: 5;
}

.household-actiu-foto-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--household-radius-control);
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

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

.household-actiu-foto-input-ocult {
    display: none;
}

/* Diàleg de retall/rotació (ImageCropDialog + Cropper.js). El mode "avatar" simula una
   màscara circular sobreposant border-radius a les capes internes que pinta Cropper.js
   (truc habitual de la llibreria: el retall segueix sent quadrat, només en canvia la
   vista prèvia; l'avatar ja el mostra rodó igualment via object-fit + border-radius). */
.household-image-crop-container {
    width: 100%;
    height: 320px;
    overflow: hidden;
    background-color: #1c1c1c;
}

.household-image-crop-img {
    display: block;
    max-width: 100%;
}

.household-image-crop-avatar .cropper-view-box,
.household-image-crop-avatar .cropper-face {
    border-radius: 50%;
}

/* Menú de pujada de documents (ElementFormDialog/AvisFormDialog): mateix patró de <label>
   ocults + panell que ja fa servir household-actiu-foto-*, però com a llista sota un botó
   normal enlloc de sobreposat a un cercle d'avatar. */
.household-doc-upload-menu-panel {
    display: flex;
    flex-direction: column;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.household-doc-upload-input-ocult {
    display: none;
}

/* Graella de previsualitzacions dels fitxers pendents de pujar (imatges amb miniatura real,
   PDF amb icona genèrica), amb botó per eliminar-ne algun abans de desar el formulari. */
.household-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.household-doc-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 84px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--household-radius-control);
    overflow: hidden;
    background-color: var(--mud-palette-background-gray);
    padding: 4px;
    text-align: center;
}

.household-doc-grid-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.household-doc-grid-item-nom {
    font-size: 0.625rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.household-doc-grid-item-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    z-index: 1;
}

/* Diàleg de "Foto escàner" (EscannerDocumentDialog + jscanify/OpenCV.js): canvas on l'usuari
   arrossega les 4 cantonades detectades. touch-action: none evita que el navegador interpreti
   l'arrossegament tàctil com un gest de scroll de la pàgina enlloc d'un moviment de cantonada. */
.household-scanner-canvas {
    width: 100%;
    max-width: 520px;
    display: block;
    margin: 0 auto;
    touch-action: none;
    border-radius: var(--household-radius-control);
    cursor: grab;
}

.household-scanner-carregant {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
}

/* Embolcall de posicionament perquè l'overlay "Detectant contorn..." quedi superposat al canvas
   (ja visible amb la foto) mentre findPaperContour/getCornerPoints s'executen, en comptes de fer
   esperar l'usuari sense cap resposta visual. */
.household-scanner-canvas-wrapper {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
}

.household-scanner-detectant-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: var(--household-radius-control);
    color: #fff;
}

/* Botó d'icona que obre el panell de filtres del Dashboard. */
.household-filter-button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--household-radius-control);
}

/* FAB de creació ràpida des del Dashboard: turquesa de marca, únic ús d'aquest color.
   El "position: fixed" es posa al div exterior (no al MudFab en si), ja que MudMenu aplica
   una transformació CSS al seu contingut intern que, altrament, reconvertiria el "fixed" en
   relatiu a aquest contenidor enlloc del viewport. */
.household-fab-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 20;
}

.household-fab-crear {
    background-color: #00A6A0 !important;
    color: #fff !important;
}

.household-fab-menu-panel {
    position: absolute;
    bottom: 64px;
    right: 0;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* Barra de navegació inferior: només a mòbil (substitueix el FAB flotant en aquest
   breakpoint; vegeu la regla @media més avall que amaga .household-fab-wrapper). */
.household-bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    align-items: center;
    justify-content: space-around;
    height: 78px;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--mud-palette-surface);
    border-top: 0.5px solid var(--mud-palette-lines-default);
}

.household-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .household-bottom-nav-item span {
        font-size: 0.75rem;
        line-height: 1;
    }

    .household-bottom-nav-item .mud-icon-root {
        width: 26px;
        height: 26px;
    }

.household-bottom-nav-item-inici {
    color: var(--mud-palette-text-secondary);
}

    .household-bottom-nav-item-inici.active {
        color: #D85A30;
    }

.household-bottom-nav-item-elements {
    color: #0F6E56;
}

.household-bottom-nav-item-avisos {
    color: #854F0B;
}

.household-bottom-nav-item-calendari {
    color: #993556;
}

.household-bottom-nav-fab-wrapper {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.household-bottom-nav-fab {
    width: 50px;
    height: 50px;
    min-width: 50px;
    margin-top: -26px;
    border: none;
    border-radius: 50%;
    background-color: #00A6A0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

    .household-bottom-nav-fab .mud-icon-root {
        width: 26px;
        height: 26px;
    }

.household-bottom-nav-menu-panel {
    position: absolute;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 600px) {
    .household-bottom-nav {
        display: flex;
    }

    .household-fab-wrapper {
        display: none;
    }

    .household-main-content {
        padding-bottom: calc(78px + env(safe-area-inset-bottom) + 16px) !important;
    }
}

/* DocumentPreviewDialog: únic ús de MaxWidth.ExtraLarge a l'app, per això se sobreescriu
   directament la classe que hi posa MudBlazor — MudDialog no exposa cap Class/Style propi
   per apuntar al "paper" del diàleg. La doble classe li dona més especificitat que la regla
   pròpia de MudBlazor (.mud-dialog-width-xl), independentment de l'ordre de càrrega dels CSS. */
.mud-dialog.mud-dialog-width-xl {
    width: 90vw;
    max-width: 90vw;
    height: 90vh;
    max-height: 90vh;
    animation-duration: 250ms;
}

@media (max-width: 600px) {
    .mud-dialog.mud-dialog-width-xl {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
}

.household-document-preview-zoom-wrapper,
.household-document-preview-iframe {
    width: 100%;
    height: calc(90vh - 140px);
    display: block;
    border: none;
}

/* Contenidor amb el zoom/pan real (vegeu household.zoom a app.js): overflow: hidden hi talla la
   imatge quan s'amplia més enllà de la mida del visor. */
.household-document-preview-zoom-wrapper {
    overflow: hidden;
    position: relative;
}

.household-document-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    touch-action: none;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 600px) {
    .household-document-preview-zoom-wrapper,
    .household-document-preview-iframe {
        height: calc(100vh - 140px);
    }
}

/* Patró "blur-up" (vegeu ImatgeProgressiva.razor i household.imatgeProgressiva a app.js): la
   miniatura i la imatge completa se superposen exactament a la mateixa posició; la completa
   comença invisible i el JS només hi afegeix una classe al contenidor quan ja ha carregat, moment
   en què el fos el porta CSS pur (sense esperar cap round-trip a Blazor Server). */
.household-progressive-img-wrapper {
    position: relative;
}

.household-progressive-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.household-progressive-img-miniatura,
.household-progressive-img-completa {
    position: absolute;
    inset: 0;
}

.household-progressive-img-completa {
    opacity: 0;
    transition: opacity 250ms ease;
}

.household-progressive-img-wrapper.household-progressive-img-carregada .household-progressive-img-completa {
    opacity: 1;
}

.household-progressive-img-wrapper.household-progressive-img-carregada .household-progressive-img-miniatura {
    opacity: 0;
    transition: opacity 250ms ease;
}