/* ======================================================================
   RVIURE Platform — Styles
   Extret de index.html — no editar directament el HTML per a estils
   ====================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--cream:#F3ECD8;--copper:#C4864A;--copper-dark:#A56930;--dark:#3D3530;--teal:#2D4A4A;
--copper-light:#D4A373;--cream-dark:#E8E0D2;--teal-light:#3D6363;
--success:#487856;--warning:#D4A017;--danger:#B85C38;--sage:#8BAE83;
--bg:#F3ECD8;--card:#FFFFFF;--border:#E8E0D4;--text:#3D3530;--text-light:#6F6A64;

/* Coure per a TEXT. El --copper de marca (#C4864A) es queda intacte per a
   fons, vores i titulars grans; aquest nomes s'usa on el coure es lletra.
   Sobre el crema del fons, el de marca dona 2,60:1 --per sota fins i tot
   del minim per a text gran-- i sobre blanc, 3,06:1. Aquest dona 4,62:1 i
   5,44:1: compleix el nivell AA.
   No hi ha terme mitja: el coure mes clar que arriba a 4,5:1 sobre crema es
   #926030, practicament igual de fosc. Per passar de 2,60 a 4,50 cal reduir
   la lluminositat a la meitat, i aixo es aritmetica.
   NO el facis servir sobre fons foscos: sobre --dark dona 2,20:1 i sobre
   --teal, 1,76:1. Alla hi va text blanc, com fins ara. */
--copper-text:#8D6035;
--radius:12px;--radius-sm:8px;--radius-lg:16px;
--shadow:0 2px 8px rgba(61,53,48,.08);--shadow-lg:0 8px 32px rgba(61,53,48,.12);
--sidebar-w:280px;--header-h:64px;
--font-display:'Playfair Display',Georgia,serif;--font-body:'DM Sans','Segoe UI',sans-serif;
}
/* La base de tota la interficie: TOTES les mides van en rem, o sigui que
   aquesta linia les escala alhora i manté les proporcions.

   Eren 15px, i amb aixo el 68% de les 1.596 declaracions de mida quedaven per
   sota dels 14px -la mes petita, 0,65rem, feia 9,8px-. En un producte per a
   gent de mes de vuitanta anys, aixo era el segon blocant de l'auditoria d'UX
   del 03/09/2026.

   16px es el valor per defecte dels navegadors: qui s'hagi apujat la lletra al
   sistema operatiu espera que una web hi comenci. Es va mesurar a les 33
   pagines abans de canviar-ho, i de 15 a 17px no apareix ni un sol element
   vessat de nou; a 18 se'n va un de sol -page-reports, que te un defecte de
   maquetat propi-. Per aixo es puja a 16 i no mes amunt d'una tacada.

   El control de mida del resident (--escala-text) es multiplica aqui: vegeu
   .text-gran i .text-molt-gran mes avall. */
html{font-size:calc(16px * var(--escala-text, 1));scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.6;min-height:100vh}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.3}

/* ---- P1: Reduced motion per a gent gran / sensibilitat visual ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ai-avatar-stage{animation:none!important}
  .ai-aura,.ai-ring-outer,.ai-ring-inner,.ai-ring-data,.ai-particle,.ai-eyelid-l,.ai-eyelid-r,.ai-speak-halo{animation:none!important;opacity:.3!important}
  .ai-particles{display:none!important}
  .ai-status-dot{animation:none!important}
  .inbox-badge{animation:none!important}
  .voice-btn.recording{animation:none!important}
}
/* Mode calmat manual (classe afegida via JS) */
body.calm-mode .ai-avatar-stage{animation:none!important}
body.calm-mode .ai-aura{animation:none!important;opacity:.15!important}
body.calm-mode .ai-ring-outer,body.calm-mode .ai-ring-inner,body.calm-mode .ai-ring-data{animation:none!important;border-color:transparent!important}
body.calm-mode .ai-particles{display:none!important}
body.calm-mode .ai-eyelid-l,body.calm-mode .ai-eyelid-r{animation:none!important}
body.calm-mode .ai-speak-halo{animation:none!important}
body.calm-mode .ai-status-dot{animation:none!important}

/* ---- P1: PIN Login per a gent gran ---- */
.pin-login-section{display:none;text-align:center;margin-top:1rem}
.pin-login-section.active{display:block}
.pin-display{display:flex;justify-content:center;gap:12px;margin:1.2rem 0}
.pin-dot{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--copper);background:transparent;transition:background .2s}
.pin-dot.filled{background:var(--copper)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto}
.pin-key{width:100%;aspect-ratio:1;border-radius:50%;background:var(--card);border:2px solid var(--border);font-size:1.8rem;font-weight:700;font-family:var(--font-display);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;min-height:68px;user-select:none;-webkit-tap-highlight-color:transparent}
.pin-key:hover,.pin-key:active{background:var(--copper);color:#fff;border-color:var(--copper)}
.pin-key:active{transform:scale(.93)}
.pin-key.pin-key-back{font-size:1.2rem;background:transparent;border-color:transparent}
.pin-key.pin-key-back:hover{background:rgba(196,134,74,.1);border-color:var(--copper-light)}
.pin-error-msg{color:var(--danger);font-size:.9rem;margin-top:.8rem;min-height:1.4rem}

/* ---- P1: Botó de reintent universal ---- */
.retry-block{text-align:center;margin-top:1rem;padding:1rem;background:rgba(184,92,56,.06);border-radius:var(--radius);display:none}
.retry-block.visible{display:block}
.retry-block .retry-msg{font-size:1rem;color:var(--text);margin-bottom:.8rem}
.retry-block .btn-retry{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.6rem;border-radius:var(--radius-lg);background:var(--copper);color:#fff;font-size:1.1rem;font-weight:600;border:none;cursor:pointer;min-height:52px;transition:background .2s}
.retry-block .btn-retry:hover{background:var(--copper-dark)}
a{color:var(--copper-text);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:var(--font-body);cursor:pointer;border:none;background:none;font-size:.9rem}
input,select,textarea{font-family:var(--font-body);font-size:.9rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .85rem;background:var(--card);color:var(--text);width:100%;outline:none;transition:border .2s}
input:focus,select:focus,textarea:focus{border-color:var(--copper)}

/* ---- Anell de focus (WCAG 2.4.7, nivell AA) ----
   La regla d'aqui sobre treu el contorn dels camps de formulari i el
   substitueix per un canvi de color de la vora. El coure sobre blanc dona
   3,06:1, just al limit del minim per a un component d'interficie, i un
   canvi de vora sol es un indicador feble: qui navega amb teclat, amb
   commutador o amb control per veu queda cec dins del formulari.

   Els botons i els enllacos SI que conservaven l'anell del navegador
   (aqui no hi ha cap reset global d'outline), aixi que aixo no els el
   posa: els el unifica i els el fa mes visible entre navegadors.

   Es fa servir :focus-visible i no :focus a proposit: el navegador nomes
   l'aplica quan el focus ve del teclat, no d'un clic de ratoli.

   El --dark sobre el crema del fons dona gairebe 10:1, i amb
   outline-offset el contorn cau sobre el fons de la pagina i no sobre el
   boto, de manera que tambe es veu sobre els botons de coure.

   [tabindex] hi es perque el dia que els 59 <div onclick> passin a ser
   enfocables, ja tinguin l'anell sense tocar aquesta regla. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible{
  outline:3px solid var(--dark);
  outline-offset:2px;
}
/* L'input del commutador fa 0x0 px i es transparent: el seu anell el pinta
   .toggle input:focus+.slider, mes avall. Sense aixo hi sortiria un punt. */
.toggle input:focus-visible{outline:none}
/* ---- Utility ---- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.badge{display:inline-block;padding:.15rem .55rem;border-radius:20px;font-size:.75rem;font-weight:600}
.badge-copper{background:var(--copper);color:#fff}
.badge-teal{background:var(--teal);color:#fff}
.badge-success{background:#E8F5E9;color:var(--success)}
.badge-warning{background:#FFF8E1;color:#936B09}
.badge-danger{background:#FFEBEE;color:var(--danger)}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:var(--radius-sm);font-weight:600;transition:all .2s;min-height:44px}
.btn-primary{background:var(--copper);color:#fff}
.btn-primary:hover{background:#B37A42}
.btn-outline{border:1.5px solid var(--copper);color:var(--copper-text)}
.btn-outline:hover{background:var(--copper);color:#fff}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-light)}
.btn-sm{padding:.35rem .7rem;font-size:.8rem;min-height:32px}
.btn-lg{padding:.7rem 1.6rem;font-size:1rem}
.card{background:var(--card);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);border:1px solid var(--border)}
.text-light{color:var(--text-light)}
.text-copper{color:var(--copper-text)}
.text-teal{color:var(--teal)}
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
/* ---- LOGIN ---- */
#login-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.landing-hero{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.landing-hero-left{flex:1;min-width:320px}
.landing-hero-right{flex:0 0 380px;max-width:420px}
@media(max-width:860px){.landing-hero{gap:24px}.landing-hero-right{flex:1 1 100%;max-width:100%}}
/* v2: stale login-left/hero CSS removed */
.logout-btn{display:inline-flex;align-items:center;gap:8px;padding:.55rem 1.1rem;background:linear-gradient(135deg,var(--copper),var(--copper-light));color:#fff;border:none;border-radius:999px;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 3px 10px rgba(196,134,74,.3)}
.logout-btn svg{transition:transform .25s ease}
.logout-btn:hover{background:linear-gradient(135deg,var(--danger),#C16B4A);box-shadow:0 6px 18px rgba(184,92,56,.4);transform:translateY(-1px)}
.logout-btn:hover svg{transform:translateX(2px)}
.logout-btn:active{transform:translateY(0)}
.login-box{width:100%;max-width:380px}
.login-box h2{font-size:1.4rem;margin-bottom:.3rem}
.login-box .subtitle{color:var(--text-light);margin-bottom:1.5rem;font-size:.9rem}
.login-form label{display:block;font-weight:500;margin-bottom:.3rem;font-size:.85rem}
.login-form .field{margin-bottom:1rem}
.login-form .btn{width:100%;justify-content:center;margin-top:.5rem}
/* ---- APP SHELL ---- */
#app-shell{display:none;min-height:100vh}
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--dark);color:#fff;display:flex;flex-direction:column;z-index:100;transition:transform .3s}
.sidebar-header{padding:1rem 1.2rem;display:flex;align-items:center;gap:.7rem;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-header svg{width:36px;height:43px}
.sidebar-header .brand{font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:.5px}
.sidebar-nav{flex:1;padding:.15rem 0;overflow-y:auto}
.nav-section{padding:.15rem 1rem .05rem;font-size:.65rem;text-transform:uppercase;letter-spacing:1.1px;color:rgba(255,255,255,.65);font-weight:700;margin-top:.2rem}
.nav-section:first-child{margin-top:.05rem}
.nav-item{display:flex;align-items:center;gap:.55rem;padding:.25rem 1rem;color:#fff;font-size:.88rem;font-weight:500;transition:all .18s;cursor:pointer;border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-item.active{background:rgba(196,134,74,.25);color:#fff;border-left-color:var(--copper);font-weight:600}
.nav-item .nav-icon{font-size:1.3rem;width:1.7rem;text-align:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.nav-item .nav-badge{margin-left:auto;background:var(--copper);color:#fff;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:10px}
[data-role="usuari"] .nav-item{font-size:1.15rem;padding:.55rem 1.2rem}
[data-role="usuari"] .nav-item .nav-icon{font-size:1.6rem;width:2rem}
[data-role="usuari"] .nav-section{font-size:.85rem;padding:.6rem 1.2rem}
[data-role="usuari"] .nav-badge{font-size:.85rem;padding:.2rem .6rem}
.sidebar-footer{padding:.55rem 1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.72rem;color:rgba(255,255,255,.55);line-height:1.35}
.sidebar-footer .user-name{color:#fff;font-weight:500;font-size:.8rem}
.main-area{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.top-bar{height:var(--header-h);background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;position:sticky;top:0;z-index:50}
.top-bar h1{font-size:1.15rem}
.top-bar-actions{display:flex;align-items:center;gap:.8rem}
.hamburger{display:none;font-size:1.4rem;cursor:pointer}
.content{flex:1;padding:1.5rem}
/* ---- PAGE VIEWS ---- */
.page-view{display:none}
.page-view.active{display:block}
/* ---- DASHBOARD CARDS ---- */
.stat-card{text-align:center;padding:1.2rem}
.stat-card .stat-icon{font-size:1.8rem;margin-bottom:.3rem}
/* === TIPOGRAFIA GRAN PER AL PERFIL RESIDENT — accessibilitat gent gran === */
#page-user-home .stat-card .stat-icon{font-size:3.5rem;margin-bottom:.6rem;line-height:1}
#page-user-home .card[style*="linear-gradient"] .btn{font-size:1.3rem;padding:1rem 2rem}
#page-user-home .card h3{font-size:1.4rem}
#page-user-home p,#page-user-home span{font-size:1.1rem}
#page-user-profile{font-size:1.15rem}
#page-user-profile h2{font-size:1.6rem;margin-bottom:.2rem}
#page-user-profile h3{font-size:1.25rem;margin-bottom:.3rem}
#page-user-profile .card{padding:.8rem 1rem !important;margin-bottom:.5rem !important}
#page-user-profile .grid-2{gap:.6rem !important}
#page-user-profile .mb-2{margin-bottom:.5rem !important}
#page-user-profile .mt-2{margin-top:.5rem !important}
#page-user-profile p,#page-user-profile span,#page-user-profile label,#page-user-profile input,#page-user-profile select{font-size:1.15rem}
#page-user-profile .text-light{font-size:1.05rem !important}
#page-user-profile strong{font-size:1.2rem}
#page-user-profile .flex.justify-between{padding:.8rem 0 !important}
#page-user-profile .badge{font-size:1rem;padding:.4rem .85rem}
#page-user-profile .btn{font-size:1.15rem;padding:.7rem 1.3rem}
.profile-lang-option.active{border-color:var(--copper) !important;background:rgba(196,134,74,.08) !important;box-shadow:0 0 0 3px rgba(196,134,74,.15)}
input[name="profile-lang"]:checked + .profile-lang-option{border-color:var(--copper) !important;background:rgba(196,134,74,.08) !important;box-shadow:0 0 0 3px rgba(196,134,74,.15)}
#page-user-memories{font-size:1.1rem}
#page-user-memories h2,#page-user-memories h3{font-size:1.5rem}
#page-user-memories p,#page-user-memories span{font-size:1.1rem}
#page-user-memories .btn{font-size:1.1rem;padding:.65rem 1.2rem}
#page-user-recordings{font-size:1.1rem}
#page-user-recordings>p{font-size:1.15rem}
#page-user-recordings .card>div{font-size:1.15rem !important}
#page-user-recordings strong{font-size:1.3rem;color:var(--dark);line-height:1.3}
#page-user-recordings .text-light{font-size:1.05rem !important}
#page-user-recordings .flex.justify-between{padding:1.1rem 0 !important}
#page-user-recordings .btn-primary[style*="border-radius:50%"]{width:56px !important;height:56px !important;font-size:1.4rem}
#page-user-recordings .btn-outline{font-size:1.3rem;padding:.5rem .8rem}
#page-user-recordings .badge{font-size:1rem;padding:.4rem .85rem}
#page-user-inbox{font-size:1.1rem}
#page-user-inbox h2,#page-user-inbox h3{font-size:1.5rem}
#page-user-inbox p,#page-user-inbox span{font-size:1.1rem}
#page-user-inbox .btn{font-size:1.15rem;padding:.7rem 1.3rem}
#page-user-inbox .inbox-msg{background:var(--card);border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:1rem;transition:all .3s}
#page-user-inbox .inbox-msg.unread{border-left:5px solid var(--copper)}
#page-user-inbox .inbox-msg .msg-sender{font-size:1.3rem;font-weight:700;color:var(--dark);font-family:var(--font-display)}
#page-user-inbox .inbox-msg .msg-date{font-size:1rem;color:var(--text-light)}
#page-user-inbox .inbox-msg .msg-topic{font-size:1.05rem;color:var(--copper-text);font-weight:500;margin-top:.3rem}
#page-user-inbox .inbox-msg audio{width:100%;margin-top:.6rem;border-radius:8px}
#page-user-inbox .inbox-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--danger);color:#fff;border-radius:50%;width:26px;height:26px;font-size:.85rem;font-weight:700;margin-left:.4rem;animation:inbox-pulse 2s ease-in-out infinite}
/* ---- Missatges família (IDÈNTIC a bústia resident .inbox-msg) ---- */
.fam-msg{background:var(--card);border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:1rem;transition:all .3s}
.fam-msg.fam-unread{border-left:5px solid var(--copper);background:rgba(196,134,74,.06)}
.fam-msg .msg-sender{font-size:1.3rem;font-weight:700;color:var(--dark);font-family:var(--font-display)}
.fam-msg .msg-date{font-size:1rem;color:var(--text-light)}
.fam-msg .msg-topic{font-size:1.05rem;color:var(--copper-text);font-weight:500;margin-top:.3rem}
.fam-msg audio{width:100%;margin-top:.6rem;border-radius:8px}
/* inbox-msg reutilitzat a la pàgina de missatges família */
#page-fam-messages .inbox-msg{background:var(--card);border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:1rem;transition:all .3s}
#page-fam-messages .inbox-msg.unread{border-left:5px solid var(--copper);background:rgba(196,134,74,.06)}
#page-fam-messages .inbox-msg .msg-sender{font-size:1.3rem;font-weight:700;color:var(--dark);font-family:var(--font-display)}
#page-fam-messages .inbox-msg .msg-date{font-size:1rem;color:var(--text-light)}
#page-fam-messages .inbox-msg .msg-topic{font-size:1.05rem;color:var(--copper-text);font-weight:500;margin-top:.3rem}
#page-fam-messages .inbox-msg audio{width:100%;margin-top:.6rem;border-radius:8px}
@keyframes inbox-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
#inbox-photo-lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;animation:lbFadeIn .25s ease}
#inbox-photo-lightbox.active{display:flex}
#inbox-photo-lightbox img{max-width:92vw;max-height:80vh;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.5);object-fit:contain;animation:lbZoomIn .3s ease}
#inbox-photo-lightbox .lb-caption{color:#fff;font-size:1.1rem;margin-top:1rem;text-align:center;max-width:80vw;font-family:var(--font-display);opacity:.9}
#inbox-photo-lightbox .lb-close{position:absolute;top:1.2rem;right:1.5rem;color:#fff;font-size:2.2rem;cursor:pointer;opacity:.8;transition:opacity .2s;background:none;border:none;line-height:1}
#inbox-photo-lightbox .lb-close:hover{opacity:1}
#inbox-photo-lightbox .lb-hint{color:rgba(255,255,255,.5);font-size:.85rem;margin-top:.6rem}
@keyframes lbFadeIn{from{opacity:0}to{opacity:1}}
@keyframes lbZoomIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
#inbox-text-lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:9999;align-items:center;justify-content:center;cursor:pointer;animation:lbFadeIn .25s ease}
#inbox-text-lightbox.active{display:flex}
#inbox-text-lightbox .lb-card{background:#fff;border-radius:20px;padding:2rem 2.2rem;max-width:520px;width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.4);cursor:default;animation:lbZoomIn .3s ease;position:relative}
#inbox-text-lightbox .lb-card .lb-sender{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:.3rem}
#inbox-text-lightbox .lb-card .lb-date{font-size:.9rem;color:var(--text-light);margin-bottom:1rem}
#inbox-text-lightbox .lb-card .lb-body{font-size:1.15rem;line-height:1.7;color:var(--dark)}
#inbox-text-lightbox .lb-card .lb-close-btn{position:absolute;top:1rem;right:1.2rem;background:none;border:none;font-size:1.6rem;color:var(--text-light);cursor:pointer;line-height:1}
#inbox-text-lightbox .lb-card .lb-close-btn:hover{color:var(--dark)}
#page-live-conversation{font-size:1.15rem}
#page-live-conversation h2,#page-live-conversation h3{font-size:1.5rem}
#page-live-conversation p,#page-live-conversation span{font-size:1.1rem}
#page-live-conversation .btn{font-size:1.15rem;padding:.7rem 1.3rem}
.stat-card .stat-value{font-size:1.8rem;font-weight:700;font-family:var(--font-display);color:var(--teal)}
.stat-card .stat-label{font-size:.8rem;color:var(--text-light);margin-top:.1rem}
.stat-card .stat-trend{font-size:.75rem;margin-top:.3rem}
.stat-card .stat-trend.up{color:var(--success)}
.stat-card .stat-trend.down{color:var(--danger)}
/* ---- RESIDENT LIST ---- */
.resident-row{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border-radius:var(--radius-sm);transition:background .15s;cursor:pointer}
.resident-row:hover{background:var(--cream)}
.resident-avatar{width:44px;height:44px;border-radius:50%;background:var(--copper-light);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;flex-shrink:0}
.resident-info{flex:1;min-width:0}
.resident-info .name{font-weight:600;font-size:.92rem}
.resident-info .meta{font-size:.78rem;color:var(--text-light)}
/* ---- TABS ---- */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:1.2rem}
.tab-btn{padding:.6rem 1.1rem;font-weight:600;font-size:.88rem;color:var(--text-light);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;cursor:pointer}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--copper-text);border-bottom-color:var(--copper)}
.tab-panel{display:none}
.tab-panel.active{display:block}
/* ---- CHAT ---- */
.chat-container{display:flex;height:calc(100vh - var(--header-h) - 3rem);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--card)}
.chat-main{flex:1;display:flex;flex-direction:column}
.chat-header{padding:.8rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.8rem}
.chat-avatar{width:40px;height:40px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center}
.chat-avatar svg{width:24px;height:29px}
.chat-messages{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem}
.message{max-width:75%;padding:.7rem 1rem;border-radius:var(--radius);font-size:.9rem;line-height:1.55}
.message-system{align-self:center;background:var(--cream);color:var(--text-light);font-size:.8rem;border-radius:20px;padding:.35rem .9rem;max-width:90%;text-align:center}
.message-ai{align-self:flex-start;background:var(--cream);border-bottom-left-radius:4px}
.message-user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:4px}
.message-time{font-size:.7rem;color:var(--text-light);margin-top:.2rem}
.message-user .message-time{color:rgba(255,255,255,.6)}
.chat-input-area{padding:.8rem 1rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.6rem}
.chat-input-area input{flex:1;border-radius:20px;padding:.6rem 1rem}
.voice-btn{width:40px;height:40px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .2s}
.voice-btn.recording{background:var(--danger);color:#fff;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.send-btn{width:40px;height:40px;border-radius:50%;background:var(--copper);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.send-btn:hover{background:#B37A42}
.chat-sidebar{width:280px;border-left:1px solid var(--border);overflow-y:auto;padding:1rem;background:var(--bg)}
.chat-sidebar h4{font-size:.85rem;margin-bottom:.5rem;color:var(--text-light)}
.chat-sidebar .insight-tag{display:inline-block;padding:.2rem .5rem;background:var(--cream);border-radius:20px;font-size:.75rem;margin:.15rem}
/* ---- EMOTION BAR ---- */
.emotion-bar{display:flex;align-items:center;gap:.7rem;margin:.55rem 0;font-size:.88rem}
.emotion-bar .bar-track{flex:1;height:18px;background:#EFE6D2;border-radius:10px;overflow:hidden;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.emotion-bar .bar-fill{height:100%;border-radius:10px;transition:width .6s cubic-bezier(.4,.2,.2,1);position:relative;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.emotion-bar .bar-fill::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));border-radius:10px 10px 0 0}
.bar-fill.joy{background:linear-gradient(90deg,#F4CB5E,#E8A521)}
.bar-fill.calm{background:linear-gradient(90deg,#7EC49F,#4D9472)}
.bar-fill.nostalgia{background:linear-gradient(90deg,#D89A63,var(--copper))}
.bar-fill.sadness{background:linear-gradient(90deg,#97B7D9,#5E87B3)}
.bar-fill.anxiety{background:linear-gradient(90deg,#E08566,#C0392B)}
.emotion-bar .bar-label{width:170px;flex-shrink:0;font-weight:500;color:var(--dark)}
.emotion-bar .bar-value{width:48px;text-align:right;font-weight:700;flex-shrink:0;font-family:var(--font-display);font-size:.95rem;color:var(--dark)}

/* Stat big (KPI inside reports) */
.stat-big{text-align:center;padding:1rem .6rem;background:linear-gradient(135deg,#FFFDF8,#F6EEDC);border-radius:12px;border:1px solid var(--border);position:relative;overflow:hidden}
.stat-big .val{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--dark);line-height:1;margin-bottom:.2rem}
.stat-big .lbl{font-size:.78rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.6px}
.stat-big .trend{display:inline-block;margin-top:.4rem;font-size:.78rem;font-weight:600;padding:.15rem .5rem;border-radius:999px}
.stat-big .trend.up{background:rgba(74,124,89,.12);color:#2D7D47}
.stat-big .trend.down{background:rgba(192,57,43,.12);color:#C0392B}
.stat-big .trend.flat{background:rgba(61,53,48,.08);color:var(--dark)}
.stat-big .spark{height:28px;margin-top:.5rem}

/* Donut chart (CSS conic) */
.donut{width:120px;height:120px;border-radius:50%;position:relative;display:inline-block;margin:.3rem}
.donut::after{content:'';position:absolute;inset:18%;background:#FFFDF8;border-radius:50%;box-shadow:inset 0 1px 3px rgba(0,0,0,.05)}
.donut .donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;font-family:var(--font-display)}
.donut .donut-center .dv{font-size:1.5rem;font-weight:700;color:var(--dark);line-height:1}
.donut .donut-center .dl{font-size:.7rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin-top:.1rem}

/* Column chart */
.col-chart{display:flex;align-items:flex-end;gap:6px;height:140px;padding:.6rem 0;border-bottom:1px solid var(--border)}
.col-chart .col{flex:1;background:linear-gradient(180deg,var(--copper),#A66A33);border-radius:6px 6px 0 0;position:relative;min-height:4px;transition:all .4s;cursor:pointer}
.col-chart .col.alt{background:linear-gradient(180deg,var(--teal),#1E3636)}
.col-chart .col.accent{background:linear-gradient(180deg,#E8A521,#C48010)}
.col-chart .col:hover{filter:brightness(1.08)}
.col-chart .col .col-val{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:700;color:var(--dark)}
.col-labels{display:flex;gap:6px;margin-top:.3rem}
.col-labels span{flex:1;text-align:center;font-size:.72rem;color:var(--text-light)}

/* Indicator pill */
.ind-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600}
.ind-pill.good{background:rgba(74,124,89,.15);color:#2D7D47}
.ind-pill.warn{background:rgba(212,160,23,.18);color:#8A6A1E}
.ind-pill.alert{background:rgba(192,57,43,.12);color:#C0392B}

/* Edit mode */
.fitxa-resident.editing{outline:2px dashed var(--copper);background:#FFFDF4 !important}
.fitxa-resident.editing [contenteditable="true"]{background:#FFF8E5;border-radius:4px;padding:2px 4px}

/* Print fitxa-preview */
body.printing-fitxa > *:not(.fitxa-preview){display:none !important}
.fitxa-preview{position:fixed;inset:0;background:#fff;z-index:9999;overflow:auto;padding:2rem;display:none}
.fitxa-preview.show{display:block}
.fitxa-preview .preview-bar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);padding:.6rem 0 1rem;margin-bottom:1rem;display:flex;gap:.5rem;justify-content:flex-end;z-index:10}
.fitxa-preview .preview-content{max-width:800px;margin:0 auto}
@media print{body.printing-fitxa .fitxa-preview{position:static !important;padding:0 !important}.fitxa-preview .preview-bar{display:none !important}}
/* ---- SAFEGUARD: PERFILS PROVA vs DEMO ---- */
/* Contingut marcat com a .demo-only s'amaga automàticament per perfils de prova.
   Quan el JS reemplaça innerHTML, el wrapper .demo-only desapareix i el contingut
   real de l'API es mostra sense problemes. Si el JS falla, el CSS amaga el demo. */
body[data-profile-type="prova"] .demo-only { display: none !important; }
body[data-profile-type="demo"] #avatar-text-overlay [data-i18n="avatar_title"],
body[data-profile-type="demo"] #avatar-text-overlay [data-i18n="avatar_desc"] { transform: translateY(-30px); }

/* ---- TOGGLE SWITCH ---- */
.toggle{position:relative;width:48px;height:26px;flex-shrink:0;display:inline-block}
.toggle input{opacity:0;width:0;height:0}
.toggle .slider{position:absolute;inset:0;background:#C98A82;border:1px solid #A7766F;border-radius:13px;cursor:pointer;transition:.3s;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
.toggle .slider::before{content:'';position:absolute;width:20px;height:20px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked+.slider{background:#8BAE83;border-color:#6E8F68}
.toggle input:checked+.slider::before{transform:translateX(22px)}
.toggle:hover .slider{filter:brightness(1.05)}
.toggle input:focus+.slider{outline:2px solid var(--copper);outline-offset:2px}
/* Privacitat: el mateix interruptor, pero es un <button> que obre una finestra.
   Mai no canvia sol: un consentiment es registra amb el paper signat davant. */
.priv-sw{position:relative;display:inline-block;width:48px;height:26px;padding:0;border:1px solid;border-radius:13px;cursor:pointer;vertical-align:middle;transition:filter .2s;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
.priv-sw::before{content:'';position:absolute;width:20px;height:20px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.priv-sw.priv-on::before{transform:translateX(22px)}
.priv-sw.priv-mig::before{transform:translateX(11px)}
.priv-si{background:#8BAE83;border-color:#6E8F68}
.priv-no{background:#C98A82;border-color:#A7766F}
.priv-pendent{background:#E7E1D6;border-color:#CFC6B6}
.priv-sense{background:#E5B567;border-color:#C9963F}
button.priv-sw:hover{filter:brightness(1.05)}
button.priv-sw:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
button.priv-sw:disabled{opacity:.4;cursor:not-allowed;filter:none}
.priv-sw.priv-mini{width:28px;height:16px;border-radius:8px;cursor:default}
.priv-sw.priv-mini::before{width:12px;height:12px;left:1px;top:1px}
.priv-sw.priv-mini.priv-on::before{transform:translateX(12px)}
.priv-sw.priv-mini.priv-mig::before{transform:translateX(6px)}
.priv-llegenda{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0 0 .6rem;font-size:.8rem;color:var(--text-light)}
.priv-llegenda span.priv-llegenda-item{display:inline-flex;align-items:center;gap:.4rem}
.priv-taula th:not(:first-child),.priv-taula td:not(:first-child){text-align:center}
.priv-taula td{vertical-align:middle}
.priv-enllac{background:none;border:none;padding:0;margin-top:.25rem;font:inherit;font-size:.74rem;color:var(--text-light);text-decoration:underline;cursor:pointer}
.priv-enllac:hover{color:var(--copper-dark,#A56930)}
/* ---- PROGRESS RING ---- */
.progress-circle{width:80px;height:80px;position:relative}
.progress-circle svg{transform:rotate(-90deg)}
.progress-circle .track{fill:none;stroke:var(--cream-dark);stroke-width:6}
.progress-circle .fill{fill:none;stroke:var(--copper);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .6s}
.progress-circle .value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}
/* ---- LIFEBOOK ---- */
.chapter{margin-bottom:1.5rem}
.chapter-header{display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.5rem 0}
.chapter-header h3{font-size:1rem}
.chapter-entries{padding-left:1.5rem;border-left:2px solid var(--cream-dark)}
.entry{padding:.6rem 0;border-bottom:1px solid var(--border)}
.entry:last-child{border-bottom:none}
.entry .entry-date{font-size:.75rem;color:var(--text-light)}
.entry .entry-text{font-size:.88rem;margin-top:.2rem}
.entry .entry-source{font-size:.72rem;color:var(--copper-text);margin-top:.15rem}
/* ---- ALERTS ---- */
.alert-item{display:flex;gap:.8rem;padding:.8rem;border-radius:var(--radius-sm);margin-bottom:.6rem;align-items:flex-start}
.alert-item.alert-high{background:#FFEBEE;border-left:3px solid var(--danger)}
.alert-item.alert-medium{background:#FFF8E1;border-left:3px solid var(--warning)}
.alert-item.alert-low{background:#E8F5E9;border-left:3px solid var(--success)}
.alert-icon{font-size:1.3rem;flex-shrink:0}
.alert-content{flex:1}
.alert-content .alert-title{font-weight:600;font-size:.9rem}
.alert-content .alert-desc{font-size:.82rem;color:var(--text-light);margin-top:.15rem}
.alert-content .alert-meta{font-size:.75rem;color:var(--text-light);margin-top:.3rem}
/* ---- FAMILY ---- */
.memory-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--card)}
.memory-card .memory-img{width:100%;height:160px;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.memory-card .memory-body{padding:1rem}
.memory-card .memory-body h4{font-size:.95rem;margin-bottom:.3rem}
.memory-card .memory-body p{font-size:.82rem;color:var(--text-light)}
/* ---- KPI CARD ---- */
.kpi-card{text-align:center;padding:1.5rem}
.kpi-card .kpi-value{font-size:2.2rem;font-weight:700;font-family:var(--font-display);color:var(--teal)}
.kpi-card .kpi-label{font-size:.82rem;color:var(--text-light);margin-top:.2rem}
.kpi-card .kpi-sub{font-size:.75rem;color:var(--success);margin-top:.3rem}
/* ---- TABLE ---- */
/* Contenidor de desplacament per a les taules.
   Sense aixo, una taula mes ampla que la pantalla EMPENY LA PAGINA SENCERA
   cap a fora: la de privadesa arribava a 692 px dins d'una finestra de 375.
   Amb el contenidor, qui es desplaça es la taula i la pagina es queda quieta.

   Va en un <div> a part i no directament a .data-table a proposit: posar-hi
   display:block a la taula la faria scrollar, pero l'width:100% deixaria
   d'estirar-la i a l'escriptori es veurien mes estretes que ara. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th{text-align:left;padding:.6rem .8rem;border-bottom:2px solid var(--border);font-weight:600;font-size:.8rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px}
.data-table td{padding:.6rem .8rem;border-bottom:1px solid var(--border)}
.data-table tr:hover{background:var(--cream)}
/* ---- RECORDING ANIMATION ---- */
@keyframes pulse-rec{0%,100%{opacity:1}50%{opacity:.3}}
#ptt-btn-live:active{transform:scale(1.15)!important;background:#E53935!important;box-shadow:0 4px 30px rgba(229,57,53,.5)!important}
/* ---- LLIBRE DE VIDA ---- */
.lifebook{background:#FFFDF8;color:#2a2520;max-width:780px;margin:0 auto;padding:2.5rem 3rem;border-radius:8px;box-shadow:0 4px 24px rgba(61,53,48,.08);font-family:var(--font-body);line-height:1.7}
.lifebook section{margin-bottom:2.8rem}
.lb-cover{text-align:center;padding:3rem 1rem 2.5rem;border-bottom:1px solid #E0D4C4}
.lb-cover-ornament{font-size:1.6rem;color:var(--copper-text);margin:.4rem 0}
.lb-cover-kicker{font-family:var(--font-body);text-transform:uppercase;letter-spacing:4px;font-size:.85rem;color:var(--copper-text);font-weight:600;margin:.8rem 0 .3rem}
.lb-cover-title{font-family:var(--font-display);font-size:3rem;color:var(--dark);margin:.2rem 0 .4rem;line-height:1.1}
.lb-cover-subtitle{font-style:italic;color:var(--text-light);font-size:1.1rem;margin:0 0 2rem}
.lb-cover-meta{margin:1.8rem 0 1rem;color:var(--text-light);font-size:.92rem}
.lb-cover-meta p{margin:.2rem 0}
.lb-toc{padding:1.5rem 0;border-bottom:1px solid #E0D4C4}
.lb-toc-list{list-style:none;padding:0;margin:1rem 0 0;counter-reset:toc}
.lb-toc-list li{display:flex;align-items:baseline;gap:.6rem;padding:.5rem 0;font-size:.98rem}
.lb-toc-list li span:first-child{color:var(--dark);font-weight:500}
.lb-toc-list li span:last-child{color:var(--copper-text);font-weight:600;font-variant-numeric:tabular-nums}
.lb-dots{flex:1;border-bottom:1.5px dotted #C9C1B0;transform:translateY(-4px)}
.lb-chapter{padding:1.8rem 0;border-bottom:1px solid #E0D4C4}
.lb-chapter:last-of-type{border-bottom:none}
.lb-chapter-num{text-transform:uppercase;letter-spacing:3px;font-size:.78rem;color:var(--copper-text);font-weight:700;margin:0 0 .2rem}
.lb-chapter-title{font-family:var(--font-display);font-size:2rem;color:var(--dark);margin:0 0 1rem;line-height:1.2;border-bottom:2px solid var(--copper);padding-bottom:.4rem;display:inline-block}
.lb-chapter-intro{font-style:italic;font-size:1.05rem;color:var(--teal);margin:0 0 1.8rem;padding-left:1rem;border-left:3px solid var(--copper);line-height:1.6}
.lb-entry{margin:0 0 1.8rem;page-break-inside:avoid;break-inside:avoid}
.lb-entry-title{font-family:var(--font-display);font-size:1.25rem;color:var(--dark);margin:0 0 .5rem;font-weight:600}
.lb-entry-body{font-size:1rem;color:#3a3530;line-height:1.75;margin:0 0 .4rem;text-align:justify;hyphens:auto}
.lb-entry-meta{font-size:.78rem;color:var(--text-light);font-style:italic;margin:.3rem 0 0;letter-spacing:.3px}
.lb-colophon{text-align:center;padding:1.5rem 1rem 0;border-top:1px solid #E0D4C4;color:var(--text-light);font-size:.85rem;font-style:italic}
.lb-colophon p{margin:.4rem 0}
.lb-colophon-brand{letter-spacing:3px;text-transform:uppercase;font-style:normal;color:var(--copper-text);font-weight:600;margin-top:.8rem !important}

/* ---- PRINT ---- */
@media print{
body *{visibility:hidden}
#lifebook-print,#lifebook-print *{visibility:visible}
#lifebook-print{position:absolute;left:0;top:0;width:100%;box-shadow:none;padding:0;background:#fff}
.lb-cover,.lb-toc,.lb-chapter{page-break-after:always;break-after:page}
.lb-chapter:last-of-type,.lb-colophon{page-break-after:auto;break-after:auto}
.lb-entry{page-break-inside:avoid;break-inside:avoid}
@page{size:A4;margin:2cm}
}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
.chat-sidebar{display:none}
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.main-area{margin-left:0}
.hamburger{display:block}
.grid-2,.grid-3{grid-template-columns:1fr}
.chat-container{height:calc(100vh - var(--header-h) - 2rem)}
#login-page section[style*="grid-template-columns"]{grid-template-columns:1fr!important;padding:24px 20px!important}
#login-page .landing-hero{padding:16px 20px!important}
}

/* ==== MODE TABLET / MÒBIL PER A RESIDENT ==== */
/* Tablet (fins a 1024px) — pàgines del resident */
@media(max-width:1024px){
  #page-user-home .grid-2,#page-user-home .grid-3,#page-user-home .grid-4{grid-template-columns:1fr !important}
  #page-user-profile .grid-2{grid-template-columns:1fr !important}
  #page-user-memories .grid-2,#page-user-memories .grid-3{grid-template-columns:1fr !important}
  #page-user-recordings .grid-2{grid-template-columns:1fr !important}
  #page-user-inbox .inbox-msg{padding:1rem 1.1rem}
  #page-fam-messages .inbox-msg{padding:1rem 1.1rem}
  .fam-msg{padding:1rem 1.1rem}
  #page-live-conversation .content{padding:1rem !important}
  .ai-avatar-stage{width:100% !important;height:100% !important}
  .ai-avatar-face{width:100% !important;height:100% !important}
}

/* Mòbil (fins a 600px) — tot el perfil resident optimitzat per pantalla petita */
@media(max-width:600px){
  /* Tipografia mòbil resident — encara més gran en mòbil */
  #page-user-home,#page-user-profile,#page-user-memories,#page-user-recordings,#page-user-inbox,#page-live-conversation{font-size:1.2rem !important}
  #page-user-home h2,#page-user-home h3,
  #page-user-profile h2,#page-user-profile h3,
  #page-user-memories h2,#page-user-memories h3,
  #page-user-recordings h2,#page-user-recordings h3,
  #page-user-inbox h2,#page-user-inbox h3,
  #page-live-conversation h2,#page-live-conversation h3{font-size:1.6rem !important}

  #page-user-home p,#page-user-home span,
  #page-user-profile p,#page-user-profile span,#page-user-profile label,#page-user-profile input,#page-user-profile select,
  #page-user-memories p,#page-user-memories span,
  #page-user-recordings p,#page-user-recordings span,
  #page-user-inbox p,#page-user-inbox span,
  #page-live-conversation p,#page-live-conversation span{font-size:1.15rem !important}

  /* Botons grans i tàctils (44px mínim per a accessibilitat tàctil) */
  #page-user-home .btn,#page-user-profile .btn,#page-user-memories .btn,
  #page-user-recordings .btn,#page-user-inbox .btn,#page-live-conversation .btn{
    font-size:1.15rem !important;padding:.85rem 1.4rem !important;min-height:48px;border-radius:14px !important
  }

  /* Cards a amplada completa amb més padding */
  #page-user-home .card,#page-user-profile .card,#page-user-memories .card,
  #page-user-recordings .card,#page-user-inbox .card,#page-live-conversation .card{padding:1.2rem !important;border-radius:16px !important}

  /* Grids a 1 columna */
  #page-user-home .grid-2,#page-user-home .grid-3,#page-user-home .grid-4,
  #page-user-profile .grid-2,#page-user-memories .grid-2,
  #page-user-recordings .grid-2{grid-template-columns:1fr !important;gap:.8rem !important}

  /* Avatar a pantalla completa en mòbil */
  .ai-avatar-stage{width:100% !important;height:100% !important}
  .ai-avatar-face{width:100% !important;height:100% !important}

  /* Barra de controls avatar en columna */
  #page-avatar-view [style*="flex-shrink"]{
    flex-direction:column !important;gap:8px !important;padding:12px !important
  }
  #page-avatar-view [style*="flex-shrink"] .btn{width:100% !important;text-align:center !important}
  #page-avatar-view [style*="flex-shrink"] label{width:100%}
  #page-avatar-view [style*="flex-shrink"] label select{width:100% !important;max-width:100% !important}

  /* Sidebar navegació — icones més grans */
  .sidebar .nav-link{font-size:1.1rem !important;padding:.8rem 1rem !important}

  /* Top bar */
  .top-bar h1{font-size:1.1rem !important}
  .content{padding:1rem !important}

  /* Subtítol avatar */
  #ai-avatar-subtitle{font-size:1.1rem !important;padding:14px !important}

  /* Playback box */
  #ai-playback-box{margin:0 12px 10px !important}
  #ai-playback-box audio{width:100% !important}

  /* PTT i record buttons encara més grans */
  #ai-speak-btn{font-size:1.2rem !important;padding:1rem 1.6rem !important}
  #ai-record-btn{font-size:1.1rem !important;padding:.8rem 1.2rem !important}
}

/* ══════════════════════════════════════════════════════════════
   UX ADAPTADA GENT GRAN — ROL USUARI
   Font base 18px, botons enormes, interfície simplificada,
   alt contrast, suggeriments tàctils
   ══════════════════════════════════════════════════════════════ */

/* --- Text base més gran per a rol resident --- */
[data-role="usuari"] .content{font-size:1.2rem !important;line-height:1.7}
[data-role="usuari"] .content h2{font-size:1.8rem !important}
[data-role="usuari"] .content h3{font-size:1.4rem !important}
[data-role="usuari"] .content p,
[data-role="usuari"] .content span,
[data-role="usuari"] .content label{font-size:1.15rem !important}

/* --- Botó PARLAR super gran i centrat --- */
[data-role="usuari"] #ai-speak-btn{
  font-size:1.5rem !important;
  padding:1.2rem 3rem !important;
  min-height:72px !important;
  min-width:280px;
  border-radius:999px !important;
  box-shadow:0 6px 24px rgba(196,134,74,.35);
  letter-spacing:.5px;
  text-transform:uppercase;
  animation:ai-ptt-pulse 3s ease-in-out infinite;
}
@keyframes ai-ptt-pulse{
  0%,100%{box-shadow:0 6px 24px rgba(196,134,74,.35)}
  50%{box-shadow:0 6px 32px rgba(196,134,74,.55)}
}
[data-role="usuari"] #ai-speak-btn:active{transform:scale(.96)}

/* --- Subtítol de l'avatar més gran i llegible --- */
[data-role="usuari"] #ai-avatar-subtitle{
  font-size:1.25rem !important;
  line-height:1.6 !important;
  padding:16px 24px !important;
  max-width:640px !important;
  border-radius:18px !important;
  border:2px solid rgba(196,134,74,.15);
}

/* --- Amagar controls tècnics per a residents --- */
[data-role="usuari"] #ai-record-btn,
[data-role="usuari"] #ai-record-timer,
[data-role="usuari"] #calm-mode-btn,
[data-role="usuari"] [for="ai-voice-select"],
[data-role="usuari"] #ai-playback-box,
[data-role="usuari"] .ai-avatar-face button[title="Ajustar posició dels ulls i boca"]{
  display:none !important;
}
/* El botó "Prova la veu" també l'amaguem — no cal per l'usuari final */
[data-role="usuari"] .btn-outline.btn-sm[onclick="aiAvatarSaySample()"]{display:none !important}
/* Toggle mode contínua i selector de veu: ocults per a residents (sempre actiu per defecte) */
[data-role="usuari"] #ai-continuous-wrap,
[data-role="usuari"] #ai-voice-select{display:none !important}

/* --- Barra de controls simplificada --- */
[data-role="usuari"] #page-avatar-view [style*="flex-shrink"]{
  justify-content:center !important;
  padding:14px 20px !important;
  gap:16px !important;
}

/* --- Suggeriments tàctils (chips) --- */
.ai-suggestions{
  display:none;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:12px auto 0;max-width:600px;padding:0 12px;
}
[data-role="usuari"] .ai-suggestions{display:flex}
.ai-suggestion-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 20px;
  background:rgba(255,255,255,.92);
  border:2px solid var(--copper-light);
  border-radius:999px;
  font-size:1.05rem;
  font-weight:500;
  color:var(--dark);
  cursor:pointer;
  transition:all .2s;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  min-height:52px;
  box-shadow:0 2px 8px rgba(61,53,48,.08);
}
.ai-suggestion-chip:hover,.ai-suggestion-chip:active{
  background:var(--copper);color:#fff;border-color:var(--copper);
  transform:scale(1.03);
}
.ai-suggestion-chip:active{transform:scale(.97)}

/* --- Amagar chips quan l'avatar està escoltant o parlant --- */
.ai-state-listening .ai-suggestions,
.ai-state-speaking .ai-suggestions{opacity:.3;pointer-events:none;transition:opacity .3s}

/* --- Estat visual: escoltant --- */
[data-role="usuari"] .ai-state-listening #ai-speak-btn{
  background:#E53935 !important;
  animation:none !important;
  font-size:1.4rem !important;
}

/* --- PIN login: tecles més grans per a dits grans --- */
[data-role="usuari"] .pin-key{min-height:76px;font-size:2rem}
[data-role="usuari"] .pin-dot{width:26px;height:26px}

/* --- Contrast millorat per a text secundari --- */
[data-role="usuari"] .text-light,
[data-role="usuari"] [style*="color:var(--text-light)"]{
  color:#5A5450 !important; /* més fosc que el default #7A746E */
}

/* --- Navegació lateral: ítems encara més grans --- */
[data-role="usuari"] .nav-item{
  padding:.7rem 1.3rem !important;
  font-size:1.2rem !important;
  min-height:52px;
}
[data-role="usuari"] .nav-item .nav-icon{
  font-size:1.8rem !important;
  width:2.2rem !important;
}

/* ── Landing sidebar nav links ── */
.landing-nav-link{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:10px;
  color:var(--dark);font-size:.88rem;font-weight:600;
  text-decoration:none;transition:all .2s;font-family:var(--font-body);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(196,134,74,.2);
  box-shadow:0 1px 3px rgba(61,53,48,.06);
}
.landing-nav-link:hover{
  background:#fff;color:var(--dark);
  border-color:var(--copper);
  box-shadow:0 2px 8px rgba(196,134,74,.18);
  transform:translateX(3px);
}
.landing-nav-link:active{
  background:var(--copper);color:#fff;
  border-color:var(--copper);
  transform:translateX(3px) scale(.98);
}
.landing-nav-link::before{
  content:'';display:block;width:8px;height:8px;border-radius:50%;
  background:var(--copper);flex-shrink:0;transition:all .2s;
}
.landing-nav-link:hover::before{
  transform:scale(1.3);box-shadow:0 0 6px rgba(196,134,74,.5);
}
.landing-nav-link:active::before{background:#fff}

/* Responsive: sidebar col·lapsa en mòbil */
@media(max-width:768px){
  #landing-page{flex-direction:column !important}
  #landing-sidebar{
    width:100% !important;min-width:100% !important;
    flex-direction:row !important;padding:10px 12px !important;
    overflow-x:auto;gap:0;border-right:none !important;border-bottom:1px solid var(--border) !important;
  }
  #landing-sidebar>div:first-child{display:none !important}
  #landing-sidebar>div:nth-child(2){
    flex-direction:row !important;gap:4px !important;
    padding:0 !important;flex-wrap:nowrap;
  }
  #landing-sidebar>div:last-child{display:none !important}
  .landing-nav-link{
    padding:8px 12px;font-size:.8rem;white-space:nowrap;
  }
}

/* ---- Pàgina pública Contractació ---- */
.hire-pla{background:var(--card);border-radius:var(--radius-lg);padding:28px 26px;border:1px solid var(--border);display:flex;flex-direction:column}
.hire-pla-tag{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hire-pla-nom{font-family:var(--font-display);font-size:1.8rem;color:var(--dark);margin:10px 0 2px;line-height:1.2}
.hire-pla-sub{font-size:.85rem;color:var(--text-light)}
.hire-pla ul{list-style:none;margin:16px 0 22px;padding:0;flex:1}
.hire-pla li{font-size:.9rem;line-height:1.5;padding:6px 0 6px 26px;position:relative;color:var(--text)}
.hire-pla li::before{content:'';position:absolute;left:2px;top:11px;width:12px;height:7px;border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg)}
.hire-btn{display:block;text-align:center;padding:.75rem;border-radius:var(--radius);font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid var(--copper);color:var(--copper-text);transition:all .2s}
.hire-btn:hover{background:rgba(196,134,74,.1)}
.hire-btn-ple{background:var(--copper);color:#fff}
.hire-btn-ple:hover{background:var(--copper-dark)}
.hire-form{position:relative}
.hire-form label[for]{font-size:.85rem;color:var(--text-light);display:block;margin-bottom:4px}
.hire-form input:not([type=checkbox]),.hire-form select,.hire-form textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:.95rem;background:var(--card);color:var(--text)}
@media(max-width:768px){
  .hire-wrap{padding:10px 16px 48px !important}
  .hire-grid3,.hire-grid2{grid-template-columns:1fr !important}
  .hire-grid3{row-gap:26px !important}
  .hire-fgrid3{grid-template-columns:1fr !important}
  .hire-form{padding:26px 20px !important}
}

/* ---- NFC Login button hover ---- */
            #nfc-login-btn:hover,#nfc-login-btn:focus,#nfc-login-btn:active{background:#B37A42 !important;color:#fff !important}
            #nfc-login-btn:hover span,#nfc-login-btn:focus span,#nfc-login-btn:active span{color:#fff !important}

/* ======================================================================
   AVATAR IA — Animacions i estats visuals
   ====================================================================== */
      /* ===== AVATAR IA ANIMACIONS ===== */
      @keyframes ai-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
      @keyframes ai-aura-pulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:.15}}
      @keyframes ai-ring-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
      @keyframes ai-ring-rotate-rev{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
      @keyframes ai-particle-float{0%{transform:translate(0,0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(var(--tx,40px),var(--ty,-80px));opacity:0}}
      @keyframes ai-blink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.05)}}
      @keyframes ai-sway{0%,100%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(3px) rotate(.6deg)}}
      @keyframes ai-eye-look{0%,20%,80%,100%{transform:translate(0,0)}40%{transform:translate(2px,-1px)}60%{transform:translate(-2px,1px)}}
      @keyframes ai-mouth-talk{0%,100%{transform:scaleY(1)}25%{transform:scaleY(1.8)}50%{transform:scaleY(.6)}75%{transform:scaleY(1.5)}}
      @keyframes ai-neural{0%,100%{stroke-dashoffset:0;opacity:.2}50%{stroke-dashoffset:-20;opacity:.55}}

      .ai-avatar-stage{position:relative;width:100%;max-width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
      .ai-state-speaking .ai-avatar-stage{animation:ai-breathe 4s ease-in-out infinite}
      .ai-aura{position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,rgba(196,134,74,.4) 0%,rgba(196,134,74,0) 70%);animation:ai-aura-pulse 3s ease-in-out infinite;pointer-events:none}
      .ai-ring-outer{position:absolute;inset:-20px;border-radius:50%;border:2px dashed rgba(196,134,74,.5);animation:ai-ring-rotate 24s linear infinite;pointer-events:none}
      .ai-ring-inner{position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(212,164,23,.45);animation:ai-ring-rotate-rev 18s linear infinite;pointer-events:none}
      .ai-ring-data{position:absolute;inset:-28px;border-radius:50%;border:1px solid transparent;border-top-color:rgba(232,165,33,.7);border-right-color:rgba(232,165,33,.4);animation:ai-ring-rotate 8s linear infinite;pointer-events:none}

      /* Avatar humà: imatge real a pantalla completa rectangular */
      .ai-avatar-face{width:100%;height:100%;border-radius:var(--radius-lg);overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(61,53,48,.35);background:#F3ECD8}
      /* ===== CANVAS AVATAR — imatge amb deformació facial en temps real ===== */
      #ai-avatar-canvas{width:100%;height:100%;display:block;border-radius:0;object-fit:contain}
      .ai-avatar-img{display:none!important} /* imatge font oculta, usada pel canvas */

      /* ===== Chips de suggerències ràpides ===== */
      .ai-chip{background:rgba(255,255,255,.9);border:1.5px solid var(--copper);color:var(--copper-text);padding:8px 14px;border-radius:20px;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
      .ai-chip:hover{background:var(--copper);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(196,134,74,.3)}
      .ai-avatar-face{cursor:pointer}
      .ai-avatar-face:hover::after{content:'Clica per parlar';position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:6px 14px;border-radius:20px;font-size:.85rem;white-space:nowrap;pointer-events:none;z-index:5}

      /* Partícules IA */
      .ai-particles{position:absolute;inset:0;pointer-events:none}
      .ai-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--copper);box-shadow:0 0 8px var(--copper);opacity:0;animation:ai-particle-float 4s linear infinite}

      /* Estat */
      .ai-status-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:20px;font-size:.82rem;font-weight:600;backdrop-filter:blur(6px);transition:all .3s}
      .ai-status-dot{width:8px;height:8px;border-radius:50%;animation:pulse-rec 1.4s infinite}

      /* Estats visuals diferents */
      .ai-state-listening .ai-aura{background:radial-gradient(circle,rgba(45,74,74,.5) 0%,rgba(45,74,74,0) 70%)}
      .ai-state-listening .ai-ring-data{border-top-color:#4FB5B5}
      .ai-state-thinking .ai-aura{background:radial-gradient(circle,rgba(212,164,23,.5) 0%,rgba(212,164,23,0) 70%);animation-duration:1.5s}
      .ai-state-thinking .ai-ring-data{border-top-color:#E8A521;animation-duration:3s}
      .ai-state-speaking .ai-aura{animation-duration:1.2s}