/* ============================================================
   W·CITY — estils_v2.css
   Nou disseny basat en Figma (2025)
   ============================================================ */

/* ============================================================
   TIPOGRAFIA — Inter (fallback per a no-Apple, s'assembla a SF Pro)
   ============================================================ */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-light-beta-webfont.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-extrabold-webfont.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
    /* Colors base */
    --c-bg:          #FFFFFF;
    --c-bg-soft:     #F5F5F5;
    --c-bg-header:   #F5F5F5;     /* gris neutre — mai lila */

    /* Text */
    --c-text:        #0D0D0D;
    --c-text-sec:    #6B7280;
    --c-text-hint:   #AAAAAA;

    /* Accent */
    --c-primary:     #7f4b9c;     /* lila — color per defecte sense skin */
    --c-blue:        #2563EB;     /* blau — icones acció, links */

    /* Tipus residus */
    --c-organic:     #4CAF50;
    --c-paper:       #8B6914;
    --c-plastic:     #2196F3;
    --c-glass:       #00BCD4;
    --c-resta:       #9E9E9E;

    /* Borders / separadors */
    --c-border:      #E5E7EB;
    --c-border-input:#D1D5DB;

    /* Feedback */
    --c-success:     #22C55E;
    --c-danger:      #EF4444;
    --c-warning:     #F59E0B;

    /* Brand (sobreescrit per skin) */
    --brand-color:   #7f4b9c;

    /* Espaciats */
    --sp-xs:   4px;
    --sp-sm:   8px;
    --sp-md:   16px;
    --sp-lg:   20px;
    --sp-xl:   24px;
    --sp-2xl:  32px;

    /* Radis */
    --r-sm:    8px;
    --r-md:    12px;
    --r-lg:    16px;
    --r-xl:    20px;
    --r-pill:  100px;

    /* Ombres */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.10);

    /* Bottom nav — 64px visuals + zona segura inferior (home indicator a iPhone) */
    --nav-h:         calc(64px + env(safe-area-inset-bottom, 0px));

    /* Tipografia */
    --font: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
    --font-sz-xs:  11px;
    --font-sz-sm:  13px;
    --font-sz-md:  15px;
    --font-sz-lg:  17px;
    --font-sz-xl:  20px;
    --font-sz-2xl: 24px;
    --font-sz-3xl: 28px;
}


/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* html i body amb el color de fons de la marca — visible darrere la status bar iOS quan viewport-fit=cover */
html {
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 14%, #fff);
}

body {
    font-family: var(--font);
    font-size: var(--font-sz-md);
    color: var(--c-text);
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 14%, #fff);
    overflow-x: hidden;
    overscroll-behavior: none;
    position: relative;
}

a {
    display: inline-block;
    text-decoration: none;
    color: var(--c-blue);
}
a:focus { outline: none; }

img { max-width: 100%; display: block; }

ul, ol { list-style: none; }

b, strong { font-weight: 600; }

input, select, textarea, button {
    font-family: var(--font);
    font-size: var(--font-sz-md);
}


/* ============================================================
   3. LAYOUT PRINCIPAL
   ============================================================ */

/* Contenidor arrel de tota l'app — igual que estils.css, sense trencar la lògica JS */
#main_app {
    min-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 62px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-color, #7f4b9c) 14%, #fff) 0%,
        #F5F5F5 38%,
        #F5F5F5 100%
    );
}

/* #body ja no fa scroll — ho fa #main_app */
#main_app #body {
    overflow: visible;
    background: transparent;
}

/* Panell genèric — mateixa lògica que estils.css */
.panell {
    display: none;
    padding: var(--sp-lg);
}

.panell.actiu {
    display: block;
}

.panell.min_h_100.actiu {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.panell.min_h_100 > div {
    flex: 1;
}

/* ---- Header top: logo/QR + adreça + campana — fons transparent, floating ---- */
#header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    padding-top: calc(env(safe-area-inset-top, 12px) + 16px);
    background: transparent;
    border-bottom: none;
    gap: 12px;
    flex-shrink: 0;
}

#content_icon {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

/* Quadrat logo/QR de la skin */
#span_icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: var(--brand-color, #7f4b9c);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

#icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text de l'adreça + població */
#text_adreca {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

#adreca {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#poblacio {
    font-size: 12px;
    font-weight: 400;
    color: var(--c-text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#poblacio:empty {
    display: none;
}

/* Botó campana al header */
#menu_header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: static;
}

#header_boto_notificacions {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    border: none;
    box-shadow: var(--shadow-sm);
    color: var(--brand-color, #7f4b9c);
    font-size: 18px;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

#header_boto_notificacions:active {
    background: var(--c-border);
}

#header_num_notificacions {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* Banner últim login — ocult */
#app_last_login {
    display: none;
}


/* ============================================================
   4. BOTTOM NAV
   Usa #menu_footer (especificitat alta) per sobreescriure estils.css
   ============================================================ */
#menu_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff !important;
    border-top: 1px solid #e5e7eb;
    z-index: 1000;
    display: none; /* JS activa amb display:block */
}

#menu_footer > div {
    display: flex !important;
    width: 100% !important;
    height: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* TOTS els tabs visibles (override estils.css que feia display:none) */
#menu_footer > div > div {
    flex: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Enllaç — override del cercle gris de estils.css */
#menu_footer > div a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    color: #9ca3af !important;
    border-radius: 0 !important;
    font-size: 10px;
    font-weight: 500;
    text-decoration: none !important;
    line-height: 1;
    padding: 6px 4px;
    -webkit-tap-highlight-color: transparent;
}

#menu_footer > div > div a i {
    font-size: 21px;
    line-height: 1;
    display: block;
}

/* Icones SVG del bottom nav — 2 estats (desel/selec) intercanviats segons .active */
#menu_footer > div > div a .nav-icon {
    width: 22px;
    height: 22px;
    display: block;
}
#menu_footer > div > div a .nav-icon--desel {
    background-color: #9ca3af;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
}
#menu_footer > div > div a .nav-icon--selec {
    background-color: var(--brand-color, #7f4b9c);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    display: none;
}
#menu_footer > div > div.active a .nav-icon--desel { display: none; }
#menu_footer > div > div.active a .nav-icon--selec { display: block; }

/* Mòdul desactivat des de l'admin: el tab es queda visible (no desapareix del menú)
   però no és clicable, mateix criteri que .home-shortcut--disabled.
   Estructura real: #menu_footer > div > div#footer_xxx > a (no és fill directe). */
#menu_footer div.nav-disabled a { opacity: 0.4; pointer-events: none; }

#menu_footer > div > div a > span:not(#num_notificacions):not(.nav-icon) {
    font-size: 10px;
    display: block;
    margin-top: 2px;
}

/* Tab actiu */
/* Tab actiu (pantalla actual) */
#menu_footer > div > div.active a {
    color: var(--brand-color, #7f4b9c) !important;
}

/* Feedback al clicar */
#menu_footer > div > div a:active {
    color: var(--brand-color, #7f4b9c) !important;
}

/* Badge notificacions */
#num_notificacions {
    position: absolute !important;
    top: -3px;
    right: -6px;
    background: #ef4444;
    color: #fff !important;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 99px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}


/* ============================================================
   5. TIPOGRAFIA
   ============================================================ */
.wc-title {
    font-size: var(--font-sz-2xl);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.2;
}

.wc-subtitle {
    font-size: var(--font-sz-lg);
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.3;
}

.wc-label {
    font-size: var(--font-sz-sm);
    font-weight: 500;
    color: var(--c-text-sec);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wc-body {
    font-size: var(--font-sz-md);
    color: var(--c-text);
    line-height: 1.5;
}

.wc-caption {
    font-size: var(--font-sz-sm);
    color: var(--c-text-sec);
    line-height: 1.4;
}

.wc-hint {
    font-size: var(--font-sz-xs);
    color: var(--c-text-hint);
}


/* ============================================================
   6. BOTONS
   ============================================================ */

/* Base */
.wc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px var(--sp-lg);
    border-radius: var(--r-md);
    border: 1.5px solid var(--c-text);
    background: transparent;
    font-size: var(--font-sz-md);
    font-weight: 500;
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    gap: var(--sp-sm);
    text-align: left;
    line-height: 1;
}

.wc-btn i, .wc-btn svg {
    font-size: 18px;
    flex-shrink: 0;
}

/* Variant primary (fill) */
.wc-btn--primary {
    background: var(--brand-color, var(--c-primary));
    border-color: var(--brand-color, var(--c-primary));
    color: #fff;
}

/* Variant outline */
.wc-btn--outline {
    background: transparent;
    border-color: var(--c-text);
    color: var(--c-text);
}

/* Variant suau (fons gris) */
.wc-btn--soft {
    background: var(--c-bg-soft);
    border-color: transparent;
    color: var(--c-text);
}

/* Boto centrat (sense icon dreta) */
.wc-btn--center {
    justify-content: center;
}

/* Boto petit inline */
.wc-btn--sm {
    padding: 8px var(--sp-md);
    font-size: var(--font-sz-sm);
}

/* Boto blau (acció/link) */
.wc-btn--blue {
    border-color: var(--c-blue);
    color: var(--c-blue);
}
.wc-btn--blue i { color: var(--c-blue); }

/* Icona genèrica via mask-image: tenyeix qualsevol SVG (dinàmic, per característica CMS,
   o un asset fix del mòdul) amb el color del contenidor pare (currentColor), en lloc de
   quedar-se amb els colors propis del fitxer. Component ÚNIC compartit — no duplicar
   aquesta tècnica a cada template. Mida i color els posa qui l'utilitza (p.ex.
   informacio.php ".inf-icona-mask", recollides.php ".rec-icona-mask", ambdues només amb
   width/height); aquí només la part comuna. */
.wc-icon-mask {
    display: block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
}

/* Botó CTA (text a l'esquerra, icona a la dreta): "Sol·licitar recollida",
   "Nova incidència"... Component ÚNIC compartit — no duplicar aquest CSS a cada
   template, només aplicar la classe. Valors calcats exactes del Figma (frame
   348x56, padding 16, gap 10, radius 16, font regular 16px). */
.wc-cta-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 16px;
    background: var(--brand-color, var(--c-primary));
    color: #fff;
    border: 1px solid transparent;
    border-radius: 16px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}
.wc-cta-btn:active { opacity: 0.88; }
.wc-cta-btn i { font-size: 20px; flex-shrink: 0; }
.wc-cta-btn:disabled,
.wc-cta-btn.wc-cta-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}
/* Variant sense icona (text sol): centrat en comptes de space-between */
.wc-cta-btn--center { justify-content: center; }
/* Variant píndola (accions finals tipus "Activar codi"/"Escanejar"): radi complet enlloc del 16px */
.wc-cta-btn--pill { border-radius: var(--r-pill, 100px); }

/* Active/press */
.wc-btn:active {
    opacity: 0.75;
}


/* ============================================================
   7. CARDS
   ============================================================ */
.wc-card {
    background: var(--c-bg-soft);
    border-radius: var(--r-lg);
    padding: var(--sp-md);
    width: 100%;
}

.wc-card--white {
    background: var(--c-bg);
}

.wc-card--shadow {
    background: var(--c-bg);
    box-shadow: var(--shadow-md);
}

/* Card clickable */
.wc-card--link {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}
.wc-card--link:active { opacity: 0.75; }


/* ============================================================
   8. FORMULARIS
   ============================================================ */
.wc-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-md);
}

.wc-field label {
    font-size: var(--font-sz-sm);
    font-weight: 500;
    color: var(--c-text-sec);
}

.wc-input {
    width: 100%;
    padding: 14px var(--sp-md);
    /* !important: els skins de municipi (estils_<municipi>.css) forcen
       "input[type=text]{border:1px solid COLOR !important}" — sense guanyar-los
       aquí, el border del component queda sempre tapat pel del skin. */
    border: 1.5px solid var(--c-border-input) !important;
    border-radius: var(--r-md);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: var(--font-sz-md);
    outline: none;
    transition: border-color 0.15s;
    -webkit-appearance: none;
}

.wc-input:focus {
    border-color: var(--brand-color, var(--c-primary)) !important;
}

.wc-input::placeholder {
    color: var(--c-text-hint);
}

select.wc-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}


/* ============================================================
   9. HEADER DE PANTALLA (back + títol)
   ============================================================ */

/* Botó de tornar i de tancar (X) reutilitzats dins el topbar propi
   d'assistents amb passos (p.ex. sector/voluminosos.php: fletxa + stepper + X) */
.wc-screen-header__back {
    height: 36px;
    padding-right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--c-text);
    font-size: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.wc-screen-header__back:active { background: var(--c-bg-soft); }

.wc-screen-header__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--c-border-input);
    background: transparent;
    cursor: pointer;
    color: var(--c-text-sec);
    font-size: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Capçalera de pantalla: fletxa de tornar i títol en la mateixa fila. */
.wc-page-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 20px 8px 12px;
}
/* Afegir quan la pantalla no té cap topbar d'app per sobre (evita el notch/status bar) */
.wc-page-header--safe-top {
    padding-top: calc(env(safe-area-inset-top, 12px) + 14px);
}
/* Afegir quan el .panell pare NO té el padding reiniciat a 0 (manté el padding
   per a la resta del contingut) i cal que només la capçalera "trenqui" cap als
   costats/amunt per no acumular el padding del .panell + el propi */
.wc-page-header--inset {
    margin: -20px -20px 0;
    padding-left: var(--sp-lg);
    padding-right: var(--sp-lg);
}
.wc-page-header__back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--c-text);
    font-size: 18px;
    text-decoration: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.wc-page-header__back:active { background: var(--c-bg-soft); }
.wc-page-header__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    width: auto;
    padding-left: 0;
}

/* Progress dots (stepper) */
.wc-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 6px;
}
.wc-stepper__dot {
    width: 20px;
    height: 6px;
    border-radius: 99px;
    background: var(--brand-color, var(--c-primary));
    opacity: 0.25;
}
.wc-stepper__dot.active {
    opacity: 1;
}


/* ============================================================
   10. PANELL HOME
   ============================================================ */
#pnl_home {
    padding: 0;
}

#home_wrap {
    display: flex;
    flex-direction: column;
    padding: 8px 0 6vw;
}

/* ---- Spinner genèric per a totes les pantalles ---- */
.wc-page-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    font-size: 30px;
    color: var(--brand-color, #7f4b9c);
    opacity: 0.5;
}
.wc-page-spinner::after {
    font-family: 'Font Awesome 5 Pro', 'FontAwesome';
    content: '\f1ce'; /* fa-circle-notch */
    font-weight: 300;
    animation: wc-spin 0.9s linear infinite;
    display: block;
}
@keyframes wc-spin {
    to { transform: rotate(360deg); }
}

/* home_spinner hereta tot de .wc-page-spinner — no cal CSS extra */

/* ---- Overlay global d'API: spinner centralitzat (api.js) ---- */
#wc_api_overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    z-index: 99999;
}
#wc_api_overlay .wc-page-spinner {
    min-height: auto;
}

/* ---- Bloc adreça ---- */
#home_adreca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-bottom: 1px solid var(--c-border);
}

#home_adreca_icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand-color, var(--c-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

#home_adreca_icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.home-adreca-info {
    flex: 1;
    min-width: 0;
}

#home_adreca_nom {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

#home_adreca_muni {
    font-size: 13px;
    color: var(--c-text-sec);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-adreca-arrow {
    font-size: 16px;
    color: var(--c-text-hint);
    flex-shrink: 0;
}

/* Títol secció petit (aquesta setmana) */
.home-section-title--sm {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-sec);
    padding: 16px 20px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Cards notificació (hora cubell / voluminosos) ---- */
.home-notif-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin: 0 16px 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
}
.home-notif-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ff3b30;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 300;
}

.home-notif-icon i
{
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
}
.home-notif-icon-svg {
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.home-notif-card--warning .home-notif-icon { background: #EF4444; }
.home-notif-card--info    .home-notif-icon { background: var(--brand-color, #7f4b9c); }
.home-notif-card span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
}

/* Card porta a porta setmana */
.home-notif-card--pap {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.home-notif-pap-content { width: 100%; }
.home-notif-pap-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.home-notif-pap-titol {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
}
.home-notif-pap-dia {
    font-size: 13px;
    color: var(--c-text-sec);
}
.home-notif-pap-noms {
    font-size: 13px;
    color: var(--c-text-sec);
    margin-bottom: 6px;
}
.home-notif-pap-hora {
    font-size: 12px;
    color: var(--c-text-sec);
    margin-bottom: 8px;
}
.home-notif-pap-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Secció pròxims dies ---- */
.home-proxims-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 20px 12px;
}
.home-proxims-divider::before,
.home-proxims-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}
.home-proxims-divider span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-hint);
    white-space: nowrap;
}

.home-proxim-dia {
    padding: 0 16px 4px;
}

.home-proxim-dia-badge {
    display: inline-block;
    color: var(--c-text-sec);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    margin-bottom: 8px;
}

.home-proxim-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.home-proxim-card--vol {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.home-proxim-vol-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--brand-color, #7f4b9c);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    margin-top: 2px;
    flex-shrink: 0;
}
.home-proxim-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 2px;
}
.home-proxim-card-noms {
    font-size: 12px;
    color: var(--c-text-sec);
    margin-bottom: 4px;
}
.home-proxim-card-hora {
    font-size: 12px;
    color: var(--c-text-sec);
    margin-bottom: 8px;
}
.home-proxim-card-hora i { margin-right: 3px; }
.home-proxim-card-icons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.home-avui-icon--sm {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* ---- Avui tot tranquil ---- */
.home-avui-res {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    color: var(--c-text-sec);
    font-size: 14px;
    font-weight: 500;
}
.home-avui-res i {
    font-size: 16px;
    color: #6EBF8B;
}

/* ---- Barra data + Show All ---- */
.home-data-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 20px;
    margin-top: 20px;
    margin-bottom:10px;
}

.home-data-bar #home_data_text {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
}

.home-show-all {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-sec);
    text-decoration: none;
}

/* ---- Bloc "Avui toca" — card blanca amb ombra ---- */
/* display:none inline gestionat per JS, no el sobreescrivim */
#avui_toca,
#home_avui {
    margin: 0 16px 10px;
    padding: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    color: var(--c-text);
}

/* Override estils.css: #avui_toca > div { background: #7f4b9c } */
#avui_toca > div {
    background-color: transparent;
    color: var(--c-text);
    padding: 0;
}

.home-avui-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 4px;
}

.home-avui-when {
    font-size: 15px;
    font-weight: 400;
    color: var(--c-text);
    margin-bottom: 12px;
}

.home-avui-sub {
    font-size: 13px;
    color: var(--c-text-sec);
    margin-top: 12px;
}

/* Fila d'icones quadrades de color */
.home-avui-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.home-avui-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.home-avui-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    scale: 1.5;
}

/* ---- Capçalera de secció (títol + show all) ---- */
.home-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
    padding: 20px 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---- Shortcuts — 2 columnes, cards horitzontals ---- */
#botons_home,
#home_shortcuts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 16px 8px;
    flex-wrap: unset;
    margin: 0;
}

/* Links directes dins #botons_home (els #punt_* i div desactivats) */
#botons_home > a,
#botons_home > div.home-shortcut-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    padding: 18px 16px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
    text-align: left;
    width: 100%;
    color: var(--c-text);
    text-decoration: none;
    min-height: 110px;
    position: static;
    box-sizing: border-box;
}

#botons_home > a:active {
    opacity: 0.7;
}

#botons_home > div.home-shortcut-item--disabled {
    cursor: default;
    opacity: 0.5;
}

/* Label i icona dins les cards del home */
#botons_home .home-shortcut-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.3;
    word-break: break-word;
    flex: 0;
}

#botons_home .home-shortcut-icon {
    width: auto;
    height: auto;
    min-width: unset;
    border-radius: 0;
    background: transparent;
    font-size: 32px;
    color: var(--brand-color, #7f4b9c);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-shrink: 0;
}
#botons_home .home-shortcut-icon-svg {
    width: 32px;
    height: 32px;
    background-color: var(--brand-color, #7f4b9c);
}

.home-shortcut {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
    width: 100%;
}

.home-shortcut:active {
    opacity: 0.7;
}

.home-shortcut--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Icona rodona dins cada shortcut — fons clar, la icona agafa el color de la skin (--brand-color) */
.home-shortcut-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 12%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-color, #7f4b9c);
    font-size: 16px;
    flex-shrink: 0;
}
/* Icones SVG dels enllaços ràpids — es pinten amb el color de la skin via mask,
   igual que els botons principals (var(--brand-color)), sigui quin sigui el fill original del fitxer */
.home-shortcut-icon .home-shortcut-icon-svg {
    width: 20px;
    height: 20px;
    background-color: var(--brand-color, #7f4b9c);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}
/* Fallback: si encara queda algun <img> antic sense migrar */
.home-shortcut-icon img {
    width: 20px;
    height: 20px;
}

/* Icona "Informació" invertida: cercle ple del color de marca i la "i" en blanc (buit) */
#punt_informacio .home-shortcut-icon {
    background: var(--brand-color, #7f4b9c);
}
#punt_informacio .home-shortcut-icon-svg {
    background-color: #fff;
}

/* A les cards de "Enllaços ràpids" el contenidor és quadrat i sense mida fixa (#botons_home
   sobreescriu .home-shortcut-icon a border-radius:0 / mida auto) -> cal forçar cercle petit aquí */
#botons_home #punt_informacio .home-shortcut-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#botons_home #punt_informacio .home-shortcut-icon-svg {
    width: 18px;
    height: 18px;
}

/* Text del shortcut */
.home-shortcut-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    line-height: 1.3;
    word-break: break-word;
}

/* Shortcut item generat dinàmicament */
.home-shortcut-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    width: 100%;
    color: var(--c-text);
    text-decoration: none;
    min-height: 60px;
}
.home-shortcut-item:active { opacity: 0.7; }

/* Botó "Veure tot" — mateix estil que la resta però accent brand */
.home-shortcut-expandir .home-shortcut-icon {
    background: var(--c-bg-soft);
    color: var(--brand-color, #7f4b9c);
    border: 1.5px dashed var(--brand-color, #7f4b9c);
}
.home-shortcut-expandir .home-shortcut-label {
    color: var(--brand-color, #7f4b9c);
    font-weight: 600;
}

/* Icones SVG dins shortcuts (equips itinerants) */
.home-shortcut-icon svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* Residu icon (usat a d'altres panells) */
.wc-residu-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1.5px solid var(--c-border);
}

/* ---- Barra capçalera de secció (títol + show all) ---- */
.home-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 10px;
}
.home-section-title-inline {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
}

/* ---- Card genèrica home ---- */
.home-card {
    margin: 0 16px 16px;
    padding: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    overflow: visible;
    margin-bottom:0;
}

/* ---- Donut ---- */
.home-donut-mes-label {
    font-size: 13px;
    color: var(--c-text-sec);
    margin-bottom: 16px;
}
.home-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}
.home-donut-outer {
    position: relative;
    width: 180px;
    height: 180px;
}
#home_donut_svg {
    display: block;
}
.home-donut-hole {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
#home_donut_total {
    font-size: 30px;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1;
}
#home_donut_llegenda {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}
.home-llegenda-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border);
}
.home-llegenda-item:last-child {
    border-bottom: none;
}
.home-llegenda-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.home-llegenda-desc {
    flex: 1;
    font-size: 14px;
    color: var(--c-text);
}
.home-llegenda-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    flex-shrink: 0;
}

/* ---- Barres mensuals ---- */
.home-bars-container {
    position: relative;
    border-top: 1px solid var(--c-border);
    padding-top: 16px;
    margin-top: 4px;
}

.home-bars-chart-wrap {
    display: flex;
    gap: 6px;
    height: 130px;
}

/* Zona de barres (sense eix Y) */
.home-bars-area {
    flex: 1;
    position: relative;
    min-width: 0;
}

.home-bars-cols {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
}

.home-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.home-bar-inner {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* Barra amb dades */
.home-bar {
    width: 80%;
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 25%, #fff);
    border-radius: 4px 4px 0 0;
    min-height: 3px;
}
.home-bar--actiu {
    background: var(--brand-color, #7f4b9c);
    width: 80%;
}
/* Mes sense dades: punt al baseline */
.home-bar--zero {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 20%, #fff);
    margin-bottom: 0;
    min-height: unset;
    border-radius: 50%;
}
.home-bar-label {
    display: none;
}

/* Eix Y a la dreta */
.home-bars-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    width: 20px;
}
.home-bars-yaxis span {
    font-size: 9px;
    color: var(--c-text-hint);
    line-height: 1;
}

.home-bars-mitjana-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px dashed #c0c0c0;
    pointer-events: none;
}

.home-bars-footer {
    text-align: center;
    margin-top: 8px;
}
.home-bars-mitjana-label {
    font-size: 11px;
    color: var(--c-text-hint);
    letter-spacing: 2px;
}

/* ---- Bloc aportacions (donut) ---- */
#home_aportacions_wrap {
    margin: 0 16px;
    padding: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

#home_aportacions_wrap .home-section-title {
    padding: 0 0 12px;
    margin: 0;
}



/* ============================================================
   10b. PANELL PARTICIPACIÓ
   ============================================================ */
#pnl_participacio { padding: 0 !important; }

#pnl_participacio_wrap {
    display: flex;
    flex-direction: column;
    padding: 8px 0 6vw;
}

/* Header (veure .wc-page-header a la secció 9) */
.part-help {
    font-size: 18px;
    color: var(--c-text-sec);
    cursor: pointer;
}

/* Toggle Mes / Any */
.part-toggle {
    display: flex;
    gap: 4px;
    margin: 12px 16px 16px;
    padding: 4px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}
.part-toggle-btn {
    flex: 1;
    padding: 9px;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-sec);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.part-toggle-btn.active {
    background: var(--brand-color, #7f4b9c);
    color: #fff;
}
/* Toggle amb més de 2 períodes (Mes/Trimestre/Quadrimestre/Any) */
.part-toggle--multi .part-toggle-btn {
    font-size: 12px;
    padding: 8px 4px;
}

/* Període personalitzat */
.part-custom-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -8px 0 12px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-sec);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.part-custom-link.active { color: var(--brand-color, #7f4b9c); }
.part-custom-link-label { display: inline-flex; align-items: center; gap: 6px; }
.part-custom-link i { font-size: 14px; }
.part-custom-chevron { font-size: 12px; transition: transform 0.2s; }
.part-custom-link.is-open .part-custom-chevron { transform: rotate(180deg); }

.part-custom-panel {
    margin: 0 16px 16px;
    padding: 16px;
    background: var(--c-bg-soft);
    border-radius: 12px;
}
.part-custom-fields {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.part-custom-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-sec);
}
.part-custom-field input {
    padding: 8px 10px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--c-text);
    background: #fff;
}
.part-custom-apply {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand-color, #7f4b9c);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* En període personalitzat el navegador no té fletxes */
.part-nav.is-custom .part-nav-arrow { visibility: hidden; }

/* Card donut */
.part-donut-card {
    margin: 0 16px 16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    border-radius: 14px;
}

.part-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    margin-bottom: 12px;
}
.part-nav-arrow {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--c-text-sec);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.part-nav-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    text-align: center;
    flex: 1;
}

.part-donut-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
}
/* Contenidor relatiu que permet al forat sobreposar-se al clip circular */
.part-donut-rel {
    position: relative;
    width: 160px;
    height: 160px;
    overflow: visible;
}

.part-donut-bubble {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #111;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}
/* Disc CSS — border-radius:50% + mask per forat. Garanteix cercle perfecte */
.part-donut-disc {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #e9eaed;
    -webkit-mask: radial-gradient(circle, transparent 44%, #fff 44%);
    mask: radial-gradient(circle, transparent 44%, #fff 44%);
}
/* Número del donut — centrat sobre el disc */
.part-donut-hole {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#part_donut_total,
#pc_donut_total {
    font-family: var(--font);
    font-size: clamp(22px, 8vw, 32px);
    font-weight: 800;
    color: var(--c-text);
    line-height: 1;
}

/* Barres */
.part-bars-container { position: relative; }
.part-bars-wrap {
    display: flex;
    gap: 6px;
    height: 120px;
}
.part-bars-area { flex: 1; position: relative; min-width: 0; }
.part-bars-cols {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
}
.part-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.part-bar-inner {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.part-bar {
    width: 70%;
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 25%, #fff);
    border-radius: 4px 4px 0 0;
    min-height: 3px;
}
.part-bar--actiu { background: var(--brand-color, #7f4b9c); }
.part-bar--zero {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    min-height: unset;
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 20%, #fff);
}
.part-bar-lbl {
    font-size: 8px;
    color: var(--c-text-hint);
    margin-top: 4px;
    white-space: nowrap;
}
.part-bars-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    width: 22px;
    padding-bottom: 14px;
}
.part-bars-yaxis span {
    font-size: 9px;
    color: var(--c-text-hint);
    line-height: 1;
}
.part-bars-avg {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px dashed #c0c0c0;
    pointer-events: none;
    margin-bottom: 14px;
}
.part-bars-foot {
    text-align: center;
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--c-text-hint);
}

/* Caption */
.part-caption {
    font-size: 12px;
    color: var(--c-text-hint);
    padding: 12px 20px 4px;
    line-height: 1.4;
    margin-bottom:0;
}

/* Aportacions per fracció */
.part-fraccions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 16px;
}
.part-frac {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.part-frac:active { opacity: 0.7; }
.part-frac-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}
.part-frac-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
    line-height: 1;
    pointer-events: none;
}
.part-frac-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.part-frac-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    scale: 1.5;
}
.part-frac-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.part-frac-num {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.1;
}
.part-frac-desc {
    font-size: 12px;
    color: var(--c-text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.part-frac-chev {
    margin-left: auto;
    font-size: 11px;
    color: var(--c-text-hint, #AAAAAA);
    flex-shrink: 0;
}

/* ============================================================
   10c. PARTICIPACIÓ CHARTS (detall fracció)
   ============================================================ */
#pnl_participacio_charts { padding: 0 !important; }

.pc-donut-card {
    margin: 0 16px 16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    border-radius: 14px;
}

/* Incidències */
.pc-inc-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 12px;
}
.pc-inc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EF4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 99px;
    padding: 0 5px;
}
.pc-inc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 20px;
}
.pc-inc-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.pc-inc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pc-inc-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F59E0B;
    font-size: 15px;
    flex-shrink: 0;
}
.pc-inc-title-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pc-inc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
}
.pc-inc-date-inline {
    font-size: 11px;
    color: var(--c-text-hint);
}
.pc-inc-toggle {
    font-size: 14px;
    color: var(--c-text-sec);
    flex-shrink: 0;
}
.pc-inc-body {
    padding: 0 16px 14px;
    border-top: 1px solid var(--c-border);
}
.pc-inc-desc {
    font-size: 13px;
    color: var(--c-text-sec);
    line-height: 1.5;
    margin: 10px 0 8px;
}
.pc-inc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-text-sec);
    padding: 4px 0;
    border-bottom: 1px solid var(--c-bg-soft);
}
.pc-inc-row i { font-size: 13px; color: var(--c-text-hint); flex-shrink: 0; }
.pc-inc-row a { color: var(--brand-color, #7f4b9c); font-size: 13px; }
.pc-inc-date {
    display: block;
    font-size: 12px;
    color: var(--c-text-hint);
    margin-top: 8px;
}

/* Estimació PAYT */
#estimacio_payt_container { margin: 16px 16px 0; }
.part-payt-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 14px 16px;
    margin-bottom: 10px;
    font-size: 13px;
}
.part-payt-card b { display:block; margin-bottom: 6px; font-size: 14px; }
.part-payt-row { color: var(--c-text-sec); padding: 3px 0; border-bottom: 1px solid var(--c-border); }
.part-payt-total { font-weight: 700; margin-top: 8px; }

/* Botó consultar taxes */
.part-btn-taxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 16px 0;
    padding: 15px;
    background: var(--brand-color, #7f4b9c);
    color: #fff !important;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.part-btn-taxes span { color: #fff !important; }
.part-btn-taxes:active { opacity: 0.85; }


/* ============================================================
   10d. PANELL TAXES (PAYT)
   ============================================================ */
#pnl_taxes { padding: 0 !important; }
#pnl_taxes_wrap { display: flex; flex-direction: column; padding-bottom: 32px; }

.taxes-info-text {
    margin: 0 16px 16px;
    font-size: 14px;
    color: var(--c-text-sec);
    line-height: 1.6;
}

/* Label de secció (Part fixa / Part variable) */
.taxes-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-sec);
    padding: 12px 20px 8px;
}

/* Període de càlcul (banner global) */
.taxes-periode-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 8px;
    padding: 10px 14px;
    background: var(--c-bg-soft);
    border-radius: 10px;
    font-size: 13px;
    color: var(--c-text-sec);
}
.taxes-periode-banner i { color: var(--c-primary, #174191); }
.taxes-periode-banner strong { color: var(--c-text); }

/* Període per part (fixa / variable) */
.taxes-periode-sub {
    font-size: 12px;
    color: var(--c-text-hint);
    padding: 0 20px 6px;
}

/* Període dels imports visualitzats (peu de la card variable) */
.taxes-periode-foot {
    font-size: 11px;
    color: var(--c-text-hint);
    font-style: italic;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--c-bg-soft);
}

/* Part fixa */
.taxes-fixa-card { margin: 0 16px 12px; }
.taxes-fixa-import {
    font-size: 36px;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1;
    margin-bottom: 6px;
    position: relative;
    display: inline-block;
}
.taxes-fixa-star {
    font-size: 18px;
    vertical-align: super;
    color: var(--c-text-sec);
}
.taxes-fixa-note {
    font-size: 12px;
    color: var(--c-text-hint);
    margin-bottom: 10px;
    font-style: italic;
}

/* Part variable */
.taxes-var-card { margin: 0 16px 12px; }

/* Gràfic Històric */
.taxes-hist-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100px;
    padding-bottom: 20px;
}
.taxes-hist-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.taxes-hist-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}
.taxes-hist-bar {
    width: 60%;
    margin: 0 auto;
    background: var(--c-text);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
}
.taxes-hist-lbl {
    font-size: 10px;
    color: var(--c-text-hint);
    margin-top: 4px;
    white-space: nowrap;
}
.taxes-hist-avg-line {
    height: 1px;
    border-top: 1px dashed var(--c-text-hint);
    margin: 4px 0 2px;
}
.taxes-hist-foot {
    font-size: 11px;
    color: var(--c-text-hint);
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.taxes-payt-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.taxes-bloc-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.taxes-bloc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.taxes-bloc-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.taxes-bloc-arrow { font-size: 13px; color: var(--c-text-sec); transition: transform 0.2s; transform: rotate(180deg); }
.taxes-bloc-body { padding: 0 16px 14px; border-top: 1px solid var(--c-border); }
.taxes-concepte {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-bg-soft);
    font-size: 13px;
}
.taxes-concepte-desc { flex: 1; padding-right: 8px; color: var(--c-text-sec); }
.taxes-concepte-import { font-weight: 600; color: var(--c-text); flex-shrink: 0; }
.taxes-concepte-neg { color: #22C55E !important; }
.taxes-total { font-size: 13px; color: var(--c-text-sec); padding-top: 10px; }
.taxes-total strong { color: var(--c-text); font-size: 15px; }

.taxes-factures-list { padding: 0 16px; display: flex; flex-direction: column; }
.taxes-fac-year { font-size: 18px; font-weight: 700; color: var(--c-text); padding: 16px 0 8px; }
.taxes-fac-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.taxes-fac-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.taxes-fac-periode { font-size: 14px; font-weight: 600; color: var(--c-text); }
.taxes-fac-num { font-size: 11px; color: var(--c-text-sec); }
.taxes-fac-nodisponible { color: var(--c-text-hint) !important; }
.taxes-fac-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.taxes-fac-import { font-size: 15px; font-weight: 700; color: var(--c-text); }
.taxes-fac-dl {
    width: 34px; height: 34px;
    border: 1.5px solid var(--c-border-input);
    border-radius: 50%;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: var(--brand-color, #7f4b9c);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.taxes-fac-dl:active { background: var(--c-bg-soft); }
.taxes-more {
    display: flex; justify-content: center;
    font-size: 14px; font-weight: 500;
    color: var(--brand-color, #7f4b9c);
    padding: 12px 0 4px;
    text-decoration: none;
}


/* ============================================================
   11. ICONES TIPUS RESIDU (pastilles de colors)
   ============================================================ */
.wc-residu-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    font-size: var(--font-sz-xs);
    font-weight: 600;
    color: #fff;
}
.wc-residu-pill--organic  { background: var(--c-organic); }
.wc-residu-pill--paper    { background: var(--c-paper); }
.wc-residu-pill--plastic  { background: var(--c-plastic); }
.wc-residu-pill--glass    { background: var(--c-glass); }
.wc-residu-pill--resta    { background: var(--c-resta); }

/* Quadrats de colors per al calendari */
.wc-cal-dot {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.wc-cal-dot--organic  { background: var(--c-organic); color: #fff; }
.wc-cal-dot--paper    { background: var(--c-paper);   color: #fff; }
.wc-cal-dot--plastic  { background: var(--c-plastic); color: #fff; }
.wc-cal-dot--glass    { background: var(--c-glass);   color: #fff; }
.wc-cal-dot--resta    { background: var(--c-resta);   color: #fff; }


/* ============================================================
   12. CALENDARI
   ============================================================ */

/* ---- Nou calendari (redesign) ---- */
#pnl_calendari { padding: 0 !important; }
#pnl_cal_wrap { display: flex; flex-direction: column; padding-bottom: 24px; }

/* Card principal del calendari — override home-card per tenir margin-bottom i overflow correcte */
.cal-main-card {
    padding: 0 !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

/* Navegació mes */
.cal-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--c-border);
}
.cal-nav-btn {
    width: 32px; height: 32px;
    border: none; background: transparent;
    font-size: 16px; color: var(--c-text-sec);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.cal-nav-btn.cal-nav-disabled { opacity: 0.3; pointer-events: none; }
.cal-nav-label {
    font-size: 15px; font-weight: 600; color: var(--c-text);
    flex: 1; text-align: center;
}

/* Cos principal del calendari — padding 0 al mes (el grid va full-width), padding als costats a la setmana */
#cal_body { padding: 0; }

/* ---- Vista Setmana ---- */
.cal-setmana-list { display: flex; flex-direction: column; padding: 0 4px; }
.cal-row {
    display: flex;
    align-items: center;
    padding: 15px 16px;
    margin: 0;
    border-bottom: 1px solid var(--c-border);
    box-shadow: none;
    border-radius: 0;
    gap: 10px;
}
.cal-row:last-child { border-bottom: none; }
.cal-row-today {
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 12%, #fff);
    border-radius: 12px;
}
.cal-row-today .cal-row-dayname { font-weight: 700; color: var(--c-text); }
.cal-row-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.cal-row-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1;
}
.cal-row-dayname { font-size: 13px; font-weight: 500; color: var(--c-text-sec); }
.cal-festiu-color { color: var(--brand-color, #7f4b9c) !important; }
.cal-festiu-name { font-size: 11px; color: var(--brand-color, #7f4b9c); }
.cal-avui-nav-link {
    color: var(--c-text-sec);
    font-weight: 500;
    margin-left: 2px;
}
.cal-row-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    max-width: 60%;
}
.cal-row-icons-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
}
.cal-row-names {
    font-size: 11px;
    color: var(--c-text-sec);
    text-align: right;
    line-height: 1.3;
}
.cal-type-sq {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.cal-type-sq img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    scale: 1.5;
}
/* ---- Vista Mes ---- */
.cal-mes-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--c-border);
    border-top: 1px solid var(--c-border);
    /* Sense overflow lateral — la card amb overflow:hidden talla les cantonades */
}
.cal-mes-hdr {
    background: var(--c-bg-soft);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text-sec);
    padding: 6px 0;
}
.cal-mes-cell {
    background: #fff;
    min-height: 62px;
    padding: 4px 3px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.cal-mes-num {
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text);
    line-height: 1;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Cel·la sencera del dia d'avui */
.cal-mes-cell-today {
    border-radius: 6px;
    border: 1.5px solid var(--brand-color, #7f4b9c);
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 10%, transparent);
}

/* Número del dia d'avui — color marca, sense fons propi */
.cal-mes-num-today {
    color: var(--brand-color, #7f4b9c) !important;
    font-weight: 700;
}
.cal-mes-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
}
.cal-mes-sq {
    width: 18px; height: 18px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.cal-mes-sq img { width: 12px; height: 12px; object-fit: contain; scale: 1.5; }

/* Llegenda — card separada */
#cal_llegenda_wrap {
    margin: 12px 16px 0;
}

.cal-llegenda-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid var(--c-border);
    overflow: hidden;
}

.cal-llegenda-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.cal-llegenda-header:active { background: var(--c-bg-soft); }

.cal-llegenda-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
}

.cal-llegenda-icon {
    font-size: 14px;
    color: var(--c-text-sec);
    transition: transform 0.2s;
}

.cal-llegenda-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    padding: 16px 16px 18px;
    border-top: 1px solid var(--c-border);
}

.cal-llegenda-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cal-llegenda-sq {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.cal-llegenda-sq img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    scale: 1.5;
}
.cal-llegenda-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    line-height: 1.3;
}
.wc-cal-header {
    padding: var(--sp-lg) var(--sp-lg) 0;
    background: var(--c-bg-header);
}

.wc-cal-header__title {
    font-size: var(--font-sz-2xl);
    font-weight: 700;
    margin-bottom: var(--sp-md);
}

/* Toggle Setmana / Mes */
.wc-toggle {
    display: flex;
    background: var(--c-bg-soft);
    border-radius: var(--r-pill);
    padding: 3px;
    gap: 3px;
    margin-bottom: var(--sp-lg);
}

.wc-toggle__btn {
    flex: 1;
    padding: 8px;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    font-size: var(--font-sz-sm);
    font-weight: 500;
    color: var(--c-text-sec);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.wc-toggle__btn.active {
    background: var(--brand-color, var(--c-primary));
    color: #fff;
    font-weight: 600;
}

/* Navegació de mes */
.wc-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
}

.wc-cal-nav__arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-soft);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: var(--c-text-sec);
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
}

.wc-cal-nav__month {
    font-size: var(--font-sz-md);
    font-weight: 600;
    color: var(--c-text);
}

/* Grid mensual */
.wc-cal-grid {
    padding: 0 var(--sp-md) var(--sp-lg);
}

.wc-cal-grid__days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: var(--sp-xs);
}

.wc-cal-grid__day-name {
    font-size: var(--font-sz-xs);
    color: var(--c-text-sec);
    font-weight: 500;
    padding: var(--sp-xs) 0;
}

.wc-cal-grid__cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.wc-cal-cell {
    min-height: 52px;
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border-radius: var(--r-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.wc-cal-cell:active { background: var(--c-bg-soft); }

.wc-cal-cell__num {
    font-size: var(--font-sz-sm);
    color: var(--c-text);
    font-weight: 500;
    line-height: 1;
}

.wc-cal-cell--today .wc-cal-cell__num {
    background: var(--brand-color, var(--c-primary));
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.wc-cal-cell--empty { pointer-events: none; }

.wc-cal-cell__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
}

/* Vista setmanal (llista) */
.wc-cal-week-row {
    display: flex;
    align-items: center;
    padding: var(--sp-sm) var(--sp-lg);
    border-bottom: 1px solid var(--c-border);
    gap: var(--sp-md);
}

.wc-cal-week-row--today {
    background: #F0F5F0;
    border-radius: var(--r-md);
    border-bottom: none;
    margin: var(--sp-xs) var(--sp-md);
    padding: var(--sp-md);
}

.wc-cal-week-row__date {
    min-width: 48px;
}

.wc-cal-week-row__date-day {
    font-size: var(--font-sz-xs);
    color: var(--c-text-sec);
    font-weight: 500;
}

.wc-cal-week-row__date-num {
    font-size: var(--font-sz-xl);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1;
}

.wc-cal-week-row--today .wc-cal-week-row__date-num {
    color: var(--brand-color, var(--c-primary));
}

.wc-cal-week-row__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    flex: 1;
}

.wc-cal-week-row__empty {
    font-size: var(--font-sz-sm);
    color: var(--c-text-hint);
    font-style: italic;
}

/* Nom del tipus a la fila setmanal */
.wc-cal-type-label {
    font-size: var(--font-sz-xs);
    color: var(--c-text-sec);
    margin-top: 2px;
}


/* ============================================================
   13. LLISTA D'OPCIONS (Sol·licitar recollida, etc.)
   ============================================================ */
.wc-option-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    padding: var(--sp-lg);
}

.wc-option-item {
    background: var(--c-bg-soft);
    border-radius: var(--r-lg);
    padding: var(--sp-lg) var(--sp-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}
.wc-option-item:active { opacity: 0.75; }

.wc-option-item__icon {
    font-size: 22px;
    color: var(--c-blue);
    margin-bottom: var(--sp-sm);
}

.wc-option-item__label {
    font-size: var(--font-sz-md);
    font-weight: 500;
    color: var(--c-blue);
}


/* ============================================================
   14. PANELL LOGIN / REGISTRE
   ============================================================ */
.wc-login-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.wc-login-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2xl) var(--sp-lg) var(--sp-xl);
    text-align: center;
}

.wc-login-hero__logo {
    width: 80px;
    height: 80px;
    margin-bottom: var(--sp-xl);
}

.wc-login-hero__title {
    font-size: var(--font-sz-2xl);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--sp-sm);
    line-height: 1.2;
}

.wc-login-hero__desc {
    font-size: var(--font-sz-md);
    color: var(--c-text-sec);
    max-width: 280px;
    line-height: 1.5;
}

.wc-login-form {
    background: var(--c-bg);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}

.wc-login-form__title {
    font-size: var(--font-sz-md);
    font-weight: 600;
    color: var(--c-text);
    text-align: center;
    margin-bottom: var(--sp-lg);
}

.wc-login-form .wc-btn + .wc-btn {
    margin-top: var(--sp-sm);
}

/* Selector idioma (cantonada superior dreta) */
.wc-lang-btn {
    position: absolute;
    top: var(--sp-lg);
    right: var(--sp-lg);
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,0.8);
    font-size: var(--font-sz-sm);
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
}


/* ============================================================
   14b. AUTH V2 — pantalles login / registre / recuperació
   ============================================================ */
/* Mateix gradient que #main_app — evita les línies blanques als laterals del sheet */
#main {
    min-height: 100vh;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-color, #7f4b9c) 14%, #fff) 0%,
        #F5F5F5 38%,
        #F5F5F5 100%
    );
}

.auth-screen {
    display: none;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;   /* descompte del chrome del navegador en browsers moderns */
    overflow: hidden;
    background: transparent;
}
.auth-screen.actiu { display: flex; }

/* El sheet de la benvinguda NO s'enretalla mai */
#screen_welcome .auth-bottom {
    flex-shrink: 0;
}

/* Selector idioma (pastilla cantonada superior dreta) */
.auth-lang {
    position: absolute;
    top: calc(env(safe-area-inset-top, 12px) + 14px);
    right: 16px;
    z-index: 5;
}
.auth-lang select {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--c-border);
    background: var(--c-bg-soft);
    border-radius: var(--r-pill);
    padding: 8px 34px 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ---- Pantalla benvinguda ---- */
.auth-welcome-hero {
    flex: 1 1 0;          /* s'encongeix tant com calgui */
    min-height: 0;        /* sense mínim — el sheet sempre cap sencer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px 16px;
    overflow: hidden;
}
.auth-welcome-logo {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    object-fit: cover;
    margin-bottom: 28px;
    box-shadow: var(--shadow-md);
}
.auth-welcome-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 10px;
    line-height: 1.25;
}
.auth-welcome-desc {
    font-size: 14px;
    color: var(--c-text-sec);
    max-width: 300px;
    line-height: 1.5;
}

/* Bloc inferior — sheet blanc que llisca cap amunt */
.auth-bottom {
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
    padding: 22px 24px calc(env(safe-area-inset-bottom, 12px) + 20px);
    animation: auth-slide-up 0.38s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes auth-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.auth-bottom-label {
    font-size: 13px;
    color: var(--c-text-sec);
    text-align: center;
    margin-bottom: 14px;
}
.auth-notfound-msg {
    font-size: 14px;
    color: var(--c-text-sec);
    text-align: center;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* ---- Botons auth ---- */
.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
    line-height: 1;
}
.auth-btn + .auth-btn { margin-top: 10px; }
.auth-btn--primary { background: var(--brand-color, var(--c-text)); color: #fff; }
.auth-btn--outline { background: #fff; border-color: var(--brand-color, var(--c-text)); color: var(--brand-color, var(--c-text)); }
.auth-btn:active { opacity: 0.8; }
.auth-btn--disabled,
.auth-btn:disabled {
    background: var(--c-bg-soft);
    color: var(--c-text-hint);
    border-color: transparent;
    pointer-events: none;
}

/* ---- Capçalera amb back ---- */
.auth-head {
    padding: calc(env(safe-area-inset-top, 12px) + 16px) 20px 4px;
}
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--c-text-sec);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.auth-back i { font-size: 14px; }
.auth-form-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    padding: 10px 20px 18px;
}

/* Els formularis ocupen tota l'alçada de la pantalla amb scroll intern */
#screen_login  form,
#screen_signup form,
#screen_recovery form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- Cos i peu dels formularis ---- */
.auth-body {
    flex: 1;
    padding: 0 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.auth-foot {
    flex-shrink: 0;   /* mai es retalla — sempre visible */
    padding: 16px 20px calc(env(safe-area-inset-bottom, 16px) + 24px);
    background: #fff;
}

/* Les pantalles de formulari (login/signup/recovery) llisquen des de la dreta */
#screen_login,
#screen_signup,
#screen_recovery {
    overflow: hidden; /* el scroll va dins el form/auth-body, no a la pantalla */
}
#screen_login.actiu,
#screen_signup.actiu,
#screen_recovery.actiu {
    animation: auth-screen-in 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes auth-screen-in {
    from { transform: translateX(32px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.auth-body .wc-field { margin-bottom: 14px; }

/* Camp contrasenya amb ull */
.auth-pwd { position: relative; }
.auth-pwd .wc-input { padding-right: 46px; }
.auth-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-sec);
    font-size: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Etiqueta de secció dins formulari (ex: "Contrasenya") */
.auth-section-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
    margin: 18px 0 12px;
}

/* Enllaços */
.auth-forgot {
    display: inline-block;
    margin: 2px 0 6px;
    font-size: 14px;
    color: var(--c-blue);
}
.auth-switch {
    text-align: center;
    font-size: 14px;
    color: var(--c-text-sec);
    margin-top: 18px;
    line-height: 1.5;
}
.auth-switch a { color: var(--c-blue); }

/* Missatge d'error general al peu (botó deshabilitat) */
.auth-foot-err {
    color: var(--c-danger);
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
    display: none;
}

/* Inputs en estat error (valida_form afegeix .val-error; reforcem el look v2) */
.wc-input.val-error,
.auth-body input.val-error {
    border-color: var(--c-danger) !important;
    color: var(--c-danger) !important;
    background: #fff !important;
}

/* Logo powered ocult per defecte ja gestionat inline */


/* ============================================================
   15. MISSATGES I FEEDBACK
   ============================================================ */
#message {
    position: fixed;
    bottom: calc(var(--nav-h) + 16px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 440px;
    padding: 14px var(--sp-lg);
    border-radius: var(--r-md);
    color: #fff;
    font-size: var(--font-sz-md);
    text-align: center;
    z-index: 99999;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.bg-success { background: var(--c-success) !important; }
.bg-danger  { background: var(--c-danger)  !important; }
.bg-warning { background: var(--c-warning) !important; }

/* Loading spinner */
.wc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2xl);
    font-size: var(--font-sz-xl);
    color: var(--c-text-hint);
}

/* Pantalla error/full */
.msg_error.full_height {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-color, var(--c-primary));
    color: #fff;
    font-size: var(--font-sz-xl);
    text-align: center;
    padding: var(--sp-2xl);
    z-index: 999999;
}


/* ============================================================
   16. MODAL / POPUP
   ============================================================ */
.modal .modal-content {
    border-radius: var(--r-xl);
    border: none;
    box-shadow: var(--shadow-md);
}

.modal .modal-header {
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-md) var(--sp-lg);
}

.modal .modal-footer {
    border-top: 1px solid var(--c-border);
    padding: var(--sp-md) var(--sp-lg);
    gap: var(--sp-sm);
}

.modal .btn-small {
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-size: var(--font-sz-sm);
    border: 1.5px solid var(--c-border);
    background: transparent;
    cursor: pointer;
}

.modal .btn-primary {
    background: var(--brand-color, var(--c-primary));
    border-color: var(--brand-color, var(--c-primary));
    color: #fff;
}

.modal .btn-danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #fff;
}

.modal .btn-success {
    background: var(--c-success);
    border-color: var(--c-success);
    color: #fff;
}

.modal .btn-info {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: #fff;
}

.modal .btn-warning {
    background: var(--c-warning);
    border-color: var(--c-warning);
    color: #fff;
}

.modal .btn-secondary {
    color: var(--c-text-sec);
}

/* Reforç: garantir que el botó OK del modal es vegi ple i amb text visible
   independentment d'altres regles antigues que puguin coincidir per id */
#modal_ok_cancel_btn_ok.btn-primary,
#modal_alert_btn_ok.btn-primary {
    background: var(--brand-color, var(--c-primary)) !important;
    border-color: var(--brand-color, var(--c-primary)) !important;
    color: #fff !important;
}
#modal_ok_cancel_btn_ok_txt,
#modal_ok_cancel_btn_ok_fa {
    color: inherit !important;
    display: inline !important;
}


/* ============================================================
   17. SEPARADORS I UTILS
   ============================================================ */
.wc-divider {
    height: 1px;
    background: var(--c-border);
    margin: var(--sp-md) 0;
}

.wc-spacer-sm  { height: var(--sp-sm); }
.wc-spacer-md  { height: var(--sp-md); }
.wc-spacer-lg  { height: var(--sp-lg); }

.wc-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.wc-row--between {
    justify-content: space-between;
}

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

.no_display { display: none !important; }

/* Scroll suau global */
* { scroll-behavior: smooth; }


/* ============================================================
   PANTALLES PLENES ZERO-PADDING (gradient de fons heretit)
   ============================================================ */
.wc-fullscreen-panel {
    min-height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    /* espai per als botons del footer (70px) + nav bar (62px) */
    padding-bottom: calc(var(--nav-h, 62px) + 80px);
}


/* ============================================================
   LLISTA SELECCIONABLE (materials, bosses, etc.)
   ============================================================ */

/* Contenidor */
.wc-select-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-lg) 0;
}

/* Item seleccionable: label que encapsula checkbox + text + cercle */
.wc-select-item {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    padding: 15px var(--sp-md);
    background: #fff;
    border: 1.5px solid transparent;
    border-radius: var(--r-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, border-color 0.15s;
}
.wc-select-item:active { opacity: 0.75; }

/* Item seleccionat: vora suau + fons lleuger amb el color de marca */
.wc-select-item:has(input[type="checkbox"]:checked) {
    border-color: #b9a4e0;
    border-color: color-mix(in srgb, var(--brand-color, #7f4b9c) 45%, #fff);
    background: #f5f1fb;
    background: color-mix(in srgb, var(--brand-color, #7f4b9c) 7%, #fff);
}

/* Checkbox ocult — el label gestiona el toggle */
.wc-select-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Text */
.wc-select-item__label {
    flex: 1;
    font-size: var(--font-sz-md);
    color: var(--c-text);
    font-weight: 500;
    line-height: 1.3;
}
.wc-select-item__sublabel {
    display: block;
    font-size: var(--font-sz-xs);
    color: var(--c-text-sec);
    font-weight: 400;
    margin-top: 2px;
}

/* Cercle check */
.wc-select-item__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border-input);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;           /* icona invisible per defecte */
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Estat marcat — CSS pur, sense JS: cercle amb vora i check del color de marca */
.wc-select-item input[type="checkbox"]:checked ~ .wc-select-item__check {
    background: #fff;
    border-color: #b9a4e0;
    border-color: color-mix(in srgb, var(--brand-color, #7f4b9c) 45%, #fff);
    color: var(--brand-color, #7f4b9c);
}

/* Item de display (no seleccionable, llista de materials assignats) */
.wc-display-item {
    display: flex;
    align-items: center;
    padding: 15px var(--sp-md);
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    font-size: var(--font-sz-md);
    color: var(--c-text);
    font-weight: 500;
    line-height: 1.3;
}


/* ============================================================
   FOOTER AMB 2 BOTONS (materials, etc.)
   ============================================================ */
.wc-footer-btns {
    position: fixed;
    display: flex;
    width: 100%;
    flex-direction: column;
    bottom: var(--nav-h, 62px);          /* per sobre de la nav bar */
    left: 0;
    right: 0;
    padding: 10px var(--sp-lg) 10px;
    display: flex;
    gap: var(--sp-sm);
    z-index: 1001;                        /* per sobre nav bar (z-index:1000) */
}

/* Cada botó ocupa la meitat */
.wc-footer-btns > .wc-btn,
.wc-footer-btns > .wc-cta-btn {
    flex: 1;
    width: auto;
    justify-content: space-between;
    gap: var(--sp-sm);
}

/* Botó desactivat (sense materials per canviar) */
.wc-btn--disabled {
    opacity: 0.45;
    pointer-events: none;
}