/* Base mínima: abans la donava Bootstrap sencer (carregat a totes les pàgines només per a aquestes
   poques regles i les classes .form-control/.form-label dels formularis de /Account). */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
}

p {
    margin-top: 0;
}

img, svg {
    vertical-align: middle;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font: inherit;
    line-height: 1.5;
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control:focus {
        outline: 0;
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    }

.form-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

:root {
    --household-radius-card: 20px;
    --household-radius-control: 9px;
    /* Tercer nivell de text: ara definit a tokens.css (--oo-text-3, contrast ~5.2:1 en clar i
       ~5.4:1 en fosc, WCAG AA); es manté aquest nom mentre hi hagi regles que el facin servir. */
    --household-text-tertiary: var(--oo-text-3);
}

/* 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;
    border: 1px solid var(--mud-palette-lines-default);
}

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

/* Al mòbil no hi ha appbar: cada pàgina porta la seva capçalera (CapcaleraMobil) i el contingut comença
   just per sota de la safe area superior. */
@media (max-width: 959.98px) {
    .household-appbar {
        display: none;
    }

    .mud-main-content {
        padding-top: env(safe-area-inset-top);
    }
}

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

/* Cap contingut pot fer més ample que la finestra la zona principal (i, per tant, la pàgina): si un
   element s'hi desborda, es retalla aquí en comptes de fer scroll horitzontal de tota la pàgina, que
   tallava el menú lateral per l'esquerra i les accions per la dreta. clip (i no hidden) no crea cap
   contenidor de scroll: els elements sticky continuen funcionant. Els desplegables i diàlegs de
   MudBlazor es pinten fora (MudPopoverProvider), així que no queden retallats. */
.mud-main-content {
    min-width: 0;
    overflow-x: clip;
}

/* Contingut de totes les pàgines amb 1200 px d'amplada màxima i centrat (MudContainer Large en fa 1280).
   El Panell SuperAdmin (taules de Logs, Auditoria, Usuaris...) fa servir tota l'amplada. */
.mud-container.household-main-content {
    max-width: 1200px;
}

.mud-container.household-main-content:has(.oo-admin-nav) {
    max-width: none;
}

.household-main-content {
    min-width: 0;
}

/* Xips: radius més tancat que les targetes. Els botons i el FAB es queden amb el radi del tema
   (DefaultBorderRadius): abans d'invertir l'ordre de càrrega del CSS aquesta regla ja no els
   arribava a aplicar mai, i forçar-la ara canviaria la forma del FAB (rodó → quadrat). */
.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;
}

.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));
    border-color: transparent;
}

/* 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;
    border-left-style: solid;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Icones d'acció soltes (fora del menú, sense badge). Colors de la paleta del tema, perquè en
   mode fosc segueixin els tons aclarits (ex: primari #5C7CF0 enlloc de #3454D1). */
.household-icon-delete {
    color: var(--mud-palette-error);
}

.household-icon-download {
    color: var(--mud-palette-success);
}

.household-icon-view {
    color: var(--mud-palette-primary);
}

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

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

/* =========================================================================
   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-venciment {
    margin-top: 12px;
}

/* Targeta clicable sencera (ItemInfoCard.Href): l'enllaç cobreix tota la targeta i els botons
   d'acció queden per sobre perquè continuïn sent clicables. */
.household-item-card-clicable {
    position: relative;
    transition: border-color var(--oo-dur-fast) var(--oo-ease), box-shadow var(--oo-dur) var(--oo-ease);
}

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

.household-item-card-cobertura {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

    .household-item-card-cobertura:focus-visible {
        outline: 2px solid var(--oo-primary);
        outline-offset: 2px;
    }

.household-item-card-clicable .household-item-card-accions {
    position: relative;
    z-index: 2;
}

.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);
    background-color: transparent;
    box-shadow: none;
}

.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;
        padding-right: 0;
    }

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

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

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

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

/* Fila de xifres secundàries (número + etiqueta petita): la fa servir la fitxa d'Actiu. */
.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;
}

:root[data-tema="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) {
    :root[data-tema="dark"] 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;
    }

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

.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;
    z-index: 1;
}

/* També en :hover: ".mud-icon-button:hover" de MudBlazor hi posaria el fons gris clar del tema i la
   icona blanca deixaria de veure's. */
.household-doc-grid-item-remove,
.household-doc-grid-item-remove:hover {
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
}

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

/* Panell del menú de creació ràpida (MenuCreacioRapida): la posició concreta la dona la classe
   PanelClass de qui l'obre (barra inferior o botó "Nou" del menú lateral). */
.household-fab-menu-panel {
    position: absolute;
    bottom: 64px;
    right: 0;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* Panell del menú de creació que obre el "+" de la barra inferior (BottomNav, CSS aïllat). */
.household-bottom-nav-menu-panel {
    position: absolute;
    bottom: calc(100% + var(--oo-space-4));
    left: 50%;
    transform: translateX(-50%);
    /* Prou ample perquè el subtítol d'«Escanejar amb IA» hi càpiga en una línia. */
    min-width: min(272px, calc(100vw - 2 * var(--oo-space-4)));
}

@media (max-width: 959.98px) {
    .household-main-content {
        padding-bottom: calc(var(--oo-barra-inferior-ocupa) + var(--oo-space-4));
    }
}

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

/* El contingut del menú lateral ocupa tota l'alçada del calaix (NavMenu: el peu del menú d'usuari a baix). */
.household-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}