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: 14px;
    --household-radius-control: 9px;
}

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

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

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

.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). El to fosc és
   necessari perquè el pastel clar per defecte deixa el text pràcticament il·legible
   sobre fons fosc (contrast insuficient). */
.household-metric-highlight {
    background-color: var(--household-metric-highlight-bg, #FAECE7) !important;
    border-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
    .household-metric-highlight {
        --household-metric-highlight-bg: #3A2A22;
    }
}

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

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

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

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

.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: #17171A;
        --mud-palette-surface: #1F1F23;
        --mud-palette-appbar-background: #1F1F23;
        --mud-palette-appbar-text: #F2F1ED;
        --mud-palette-divider: #2E2E33;
        --mud-palette-lines-default: #2E2E33;
        --mud-palette-lines-inputs: #2E2E33;
        --mud-palette-text-primary: #F2F1ED;
        --mud-palette-text-secondary: #9B9A93;
        --mud-palette-primary: #5C7CF0;
        --mud-palette-error: #E86A6A;
    }
}

/* =========================================================================
   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: 16px;
    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(--mud-palette-text-secondary);
}

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

/* "Els teus Actius" al Dashboard: graella de targetes petites, sempre 2 columnes a mòbil. */
.household-actius-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

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

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

.household-actiu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--household-radius-card);
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}

/* Icona/foto de perfil de l'Actiu: mateixa mida tant si és una foto real (object-fit: cover
   via .household-actiu-card-badge-img) com si és la icona per defecte de la Categoria. */
.household-actiu-card-badge {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .household-actiu-card-badge .mud-icon-root {
        width: 32px;
        height: 32px;
    }

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

/* min-height reserva sempre l'espai de 2 línies (independentment que el nom en necessiti 1 o
   2): així totes les targetes fan la mateixa alçada encara que quedin soles en una fila (ex.
   nombre senar d'Actius), no només quan CSS Grid les pot igualar amb veïnes de la mateixa fila. */
.household-actiu-card-nom {
    font-size: 0.875rem;
    line-height: 1.3em;
    min-height: 2.6em;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Botó "píndola" turquesa: única acció explícita de la targeta (a diferència de l'anterior
   targeta plana sencera clicable). Selector compost (.mud-link + classe pròpia) perquè guanyi
   en especificitat el color propi de MudLink, 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 {
    display: inline-block;
    border: 1.5px solid #00A6A0;
    color: #00A6A0 !important;
    background-color: transparent;
    border-radius: 20px;
    padding: 3px 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: auto;
    flex-shrink: 0;
}

/* Foto de l'Actiu a la capçalera de la seva fitxa de detall (ActiuDetail): mida prominent. */
.household-actiu-detail-foto {
    width: 96px;
    height: 96px;
    min-width: 96px;
    border-radius: 20px;
    object-fit: cover;
}

.household-actiu-detail-foto-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F3E9DC;
    color: #8B5E34;
}

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

/* 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-grey);
    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: 60px;
    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: 2px;
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

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

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

.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: 44px;
    height: 44px;
    min-width: 44px;
    margin-top: -20px;
    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-menu-panel {
    position: absolute;
    bottom: 56px;
    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(60px + 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;
}