/* I colori non stanno più qui: la palette è in tema.css, caricato prima di questo foglio. */
*{box-sizing:border-box}body{margin:0;font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
h1{font-family:var(--disp)}a{color:var(--blue)}
[hidden]{display:none!important}
.form fieldset.volo{border:1px solid var(--line);border-radius:var(--raggio-2);padding:12px 16px;margin:0 0 4px;background:var(--bg2);--campo-fondo:var(--fondo)}.form fieldset.volo legend{font-weight:600;padding:0 6px;font-size:var(--fs-nota)}
.form .scelte{border:0;padding:0;margin:0;display:grid;gap:10px}.form .scelte-mobilita{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.wz-prog{margin:0 0 18px}.wz-bar{height:6px;background:var(--line);border-radius:var(--raggio-pillola);overflow:hidden}.wz-bar span{display:block;height:100%;width:0;background:var(--accent-ink);transition:width .25s}
.wz-conta{font-size:var(--fs-nota);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:8px 0 0}.wz-titolo{font-size:var(--fs-grande);font-weight:700;margin:2px 0 0;color:var(--ink)}
.wz-nav{display:flex;gap:10px;justify-content:space-between;margin-top:6px}.wz-nav button{min-width:120px}
.riepilogo{display:grid;gap:10px;margin:6px 0 4px}
.rp-riga{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--raggio-3);padding:12px 16px;background:var(--bg2);--campo-fondo:var(--fondo)}
.rp-riga .rp-et{display:block;font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}.rp-riga .rp-val{display:block;font-weight:600;color:var(--ink)}
.rp-mod{white-space:nowrap;padding:6px 12px;font-size:var(--fs-nota)}
@media (prefers-reduced-motion:reduce){.wz-bar span{transition:none}}
.geo-campo{position:relative}.form fieldset{position:relative}.form fieldset:focus-within{z-index:5}
.mappa{position:relative;z-index:0;height:240px;border-radius:var(--raggio-3);overflow:hidden;margin-top:10px;border:1px solid var(--line)}
.geo-sugg{position:absolute;top:100%;left:0;right:0;z-index:1000;list-style:none;margin:2px 0 0;padding:4px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-2);box-shadow:var(--ombra-1);max-height:260px;overflow:auto;--campo-fondo:var(--fondo)}
.geo-sugg li{padding:8px 10px;border-radius:var(--raggio-2);font-size:var(--fs-nota);cursor:pointer}.geo-sugg li[aria-selected="true"],.geo-sugg li:hover{background:var(--blue-soft);--campo-fondo:var(--fondo)}
/* landing agenti */
.ag-hero{background:linear-gradient(135deg,var(--blue-soft),var(--bg2));border:1px solid var(--line);border-radius:var(--raggio-4);padding:30px 32px;margin:6px 0 28px}
.ag-occhiello{text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-nota);font-weight:700;color:var(--accent-ink);margin:0 0 8px}
.ag-hero h1{margin:0 0 10px}.ag-cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.ag-chiudi{margin-top:24px}
.ag-faq{border:1px solid var(--line);border-radius:var(--raggio-2);padding:10px 14px;margin:8px 0;background:var(--bg2);--campo-fondo:var(--fondo)}.ag-faq summary{font-weight:600;cursor:pointer}.ag-faq p{margin:8px 0 2px;color:var(--ink2)}
.scelta{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--raggio-3);background:var(--bg2);cursor:pointer;margin:0;--campo-fondo:var(--fondo)}
.scelta:hover{border-color:var(--blue)}.scelta:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--blue-soft);--campo-fondo:var(--fondo)}
.scelta:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.scelta input{position:absolute;width:1px;height:1px;opacity:0;margin:-1px}
.scelta .ic{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--blue)}
.scelta span{font-size:var(--fs-nota)}.scelta strong{display:block;color:var(--ink)}.scelta small{color:var(--ink3)}
.top{background:var(--bg2);border-bottom:3px solid var(--accent);--campo-fondo:var(--fondo)}
.top-in{max-width:1160px;margin:0 auto;padding:8px 40px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}.top-in{justify-content:space-between;min-height:64px}
.brand{display:inline-flex;align-items:center;text-decoration:none}.brand img{height:48px;width:auto;display:block}
@media (max-width:760px){.brand img{height:38px}}
@media (max-width:340px){.brand img{height:30px}.top-in{padding:8px 14px;flex-wrap:nowrap}}   /* telefoni molto stretti: logo più piccolo, menu sulla stessa riga */
/* Menù a scomparsa sotto i 760px, con lo stesso meccanismo della testata del sito pubblico: una casella di spunta
   nascosta (non alla tastiera) più l'etichetta che fa da pulsante, così apre e chiude anche senza JavaScript.
   La campanella degli avvisi sta fuori dal menu e resta in vista anche a menu chiuso: un avviso dentro un cassetto
   chiuso non avvisa nessuno. */
.menu-spia{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* I due pulsanti tondi della testata, campanella e menu: stessa misura, così stanno in riga senza sembrare due
   cose di peso diverso. L'icona è centrata e non ha etichetta accanto: le tre righe sono già la parola «menù». */
.tondo{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;padding:0;border:1px solid var(--line);border-radius:var(--raggio-cerchio);background:var(--bg2);color:var(--ink2);cursor:pointer;text-decoration:none;--campo-fondo:var(--fondo)}
.tondo:hover{color:var(--accent-ink);border-color:var(--accent-ink);background:var(--bg2);--campo-fondo:var(--fondo)}
.tondo .ic{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:currentColor}
.menu-btn{display:none}
.menu-btn:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.top .campanella{margin-left:auto}   /* con la campanella fuori dal menu, è lei a spingere tutto il resto a destra */
/* Anello di completamento del profilo: il cerchio si riempie quanto è pieno il profilo. `pathLength=100` fa sì che
   il tratteggio sia già una percentuale; la rotazione di -90° fa partire il riempimento dall'alto. */
.anello{position:absolute;inset:-5px;pointer-events:none}
.anello svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.anello circle{fill:none;stroke-width:3}
.an-traccia{stroke:var(--line)}
.an-valore{stroke:var(--accent);stroke-linecap:round}
/* La stessa cosa in riga, col numero dentro, accanto alla voce «Profilo»: sul desktop il pulsante tondo non c'è,
   e la percentuale deve vedersi lo stesso. */
.anello-num{position:relative;inset:auto;display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;flex:0 0 27px;margin-left:7px}
.anello-num svg{position:absolute;inset:0}
.anello-num .an-num{position:relative;font-size:var(--fs-nota);font-weight:700;line-height:1;color:var(--ink2)}
.menu details.ramo[data-attivo] .an-num,.menu summary:hover .an-num{color:var(--accent-ink)}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  .top nav.menu{display:none}
  .menu-spia:checked~nav.menu{display:flex;flex:1 0 100%;flex-direction:column;align-items:stretch;gap:2px;padding:10px 0 6px;border-top:1px solid var(--line);margin-top:8px}
  .menu-spia:checked~nav.menu details.ramo{width:100%}
  .menu-spia:checked~nav.menu a.voce,.menu-spia:checked~nav.menu summary{padding:10px 8px;font-size:var(--fs-testo)}
  .top nav.menu .sep{display:none}
}
.sep{margin-left:14px;color:var(--ink3)}
.wrap{max-width:1160px;margin:0 auto;padding:28px 40px 60px}   /* la misura del sito pubblico (28/09: prima 1040 e 24) */
@media (max-width:760px){.top-in{padding:8px 22px}.wrap{padding:22px 22px 48px}}.foot{text-align:center;font-size:var(--fs-nota);color:var(--ink3);padding:20px}
h1{margin:0 0 12px}h2{margin:28px 0 8px}h3{margin:0 0 8px}.lede{color:var(--ink2)}   /* a tutta larghezza (titolare, 5/10): il limite di 68 caratteri tagliava a metà la testata di ogni pagina */
.form{display:grid;gap:12px;margin:12px 0}   /* R-15 (14/10): nessun limite sul modulo, il limite va sui campi; stretti solo i moduli d'accesso (.pagina-accesso) */.form.inline{grid-auto-flow:column;align-items:end;max-width:none}
/* R-15: il limite sta sul campo, quando il campo è corto per natura (codici, CAP, numeri) */
.campo-corto{max-width:14rem}
/* un campo e il suo pulsante sulla stessa riga: il campo prende lo spazio, il pulsante la sua misura (14/10) */
.form.campo-pulsante{grid-template-columns:minmax(0,1fr) auto;align-items:end}   /* il pulsante alto come il campo, non come etichetta + campo (Mattia, 4/11) */
label{display:grid;gap:4px;font-size:var(--fs-nota);color:var(--ink2)}label.check{grid-auto-flow:column;justify-content:start;align-items:center;gap:8px}
/* i campi sono bianchi col bordo dei campi, anche dentro le schede grigie (regola grafica del titolare, 12/10: grigio su grigio non si vede) */
input,select,textarea{font:inherit;max-width:100%;min-width:0;padding:8px 10px;border:1px solid var(--campo-bordo);border-radius:var(--raggio-1);background:var(--campo-fondo);color:var(--ink)}
button,.btn{font:inherit;font-weight:500;padding:9px 16px;border:0;border-radius:var(--raggio-2);background:var(--btn-fondo);color:var(--btn-testo);cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--btn-fondo-over);color:var(--btn-testo-over)}
button:disabled{opacity:.5;cursor:not-allowed}button.danger{background:var(--bad);color:var(--pericolo-testo)}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-3);padding:16px 20px;margin:12px 0;--campo-fondo:var(--fondo)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.card ul{padding-left:18px;font-size:var(--fs-nota);margin:6px 0}.hint{font-size:var(--fs-nota);color:var(--ink3)}small.hint{font-size:var(--fs-suggerimento);line-height:1.4}.muted{color:var(--ink3)}.big{font-size:var(--fs-titolo-1);font-weight:700;margin:6px 0}
.flashes{margin-bottom:16px}.flash{padding:10px 14px;border-left:4px solid var(--ok);background:var(--ok-soft);margin-bottom:8px;font-size:var(--fs-nota);--campo-fondo:var(--fondo)}.flash-error{border-color:var(--bad);background:var(--bad-soft);--campo-fondo:var(--fondo)}
.tbl{overflow-x:auto;background:var(--bg2);border:1px solid var(--line);margin:10px 0;--campo-fondo:var(--fondo)}table{border-collapse:collapse;width:100%;font-size:var(--fs-nota);min-width:560px}
th{text-align:left;font-size:var(--fs-nota);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:8px 12px;border-bottom:1px solid var(--line)}td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.neg{color:var(--bad)}.pos{color:var(--ok)}.trunc{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{display:inline-block;font-size:var(--fs-nota);padding:2px 8px;border-radius:var(--raggio-1);background:var(--blue-soft);color:var(--blue);white-space:nowrap;--campo-fondo:var(--fondo)}
.pill-pagato,.pill-chiuso{background:var(--ok-soft);color:var(--ok);--campo-fondo:var(--fondo)}.pill-in_attesa,.pill-nuovo,.pill-in_lavorazione{background:var(--warn-soft);color:var(--warn);--campo-fondo:var(--fondo)}.pill-annullato,.pill-rimborsato,.pill-scartato{background:var(--bad-soft);color:var(--bad);--campo-fondo:var(--fondo)}.pill-autorizzato{background:var(--blue-soft);color:var(--blue);--campo-fondo:var(--fondo)}
.timeline{padding-left:18px}.timeline li{margin-bottom:6px;font-size:var(--fs-nota)}.timeline time{font-family:ui-monospace,monospace;font-size:var(--fs-nota);color:var(--ink3);margin-right:6px}
.azioni{display:flex;gap:6px;flex-wrap:wrap}.azioni form{display:inline}.azioni button,.azioni .btn{padding:4px 10px;font-size:var(--fs-nota)}
.social-login{max-width:520px;margin:10px 0}.or-sep{text-align:center;color:var(--ink3);font-size:var(--fs-nota);margin:8px 0}
.apple-login,.apple-login:hover,.apple-login:focus{display:flex;align-items:center;justify-content:center;gap:8px;max-width:400px;height:40px;margin:0 0 10px;border:1px solid var(--kit-grigio-0);border-radius:var(--raggio-1);background:var(--kit-grigio-0);color:var(--ne-0);font:500 var(--fs-testo) -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;text-decoration:none}.apple-login:hover{opacity:.88}.apple-login svg{width:15px;height:18px;fill:currentColor}
:root[data-theme="dark"] .apple-login{background:var(--ne-0);color:var(--kit-grigio-0);border-color:var(--ne-0)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .apple-login{background:var(--ne-0);color:var(--kit-grigio-0);border-color:var(--ne-0)}}
/* Facebook: il suo blu del 2023 (var(--kit-blu-52)), 4,8:1 con il bianco, uguale nei due temi come chiede il marchio. */
.facebook-login,.facebook-login:hover,.facebook-login:focus{display:flex;align-items:center;justify-content:center;gap:8px;max-width:400px;height:40px;margin:0 0 10px;border:1px solid var(--kit-blu-52);border-radius:var(--raggio-1);background:var(--kit-blu-52);color:var(--ne-0);font:500 var(--fs-testo) -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;text-decoration:none}.facebook-login:hover{opacity:.9}.facebook-login svg{width:18px;height:18px;fill:currentColor}
.lead header{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.lead .testo{white-space:pre-wrap;background:var(--bg);padding:10px;border-radius:var(--raggio-1);font-size:var(--fs-nota);--campo-fondo:var(--campo-su-bianco)}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:180px 1fr;gap:4px 12px;font-size:var(--fs-nota);margin:10px 0}.kv dt{color:var(--ink3)}.kv dd{margin:0}
.htmx-indicator{display:none;color:var(--ink3);font-size:var(--fs-nota)}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline}
code{font-family:ui-monospace,monospace;font-size:var(--fs-nota);background:var(--bg);padding:1px 5px;border-radius:var(--raggio-1);--campo-fondo:var(--campo-su-bianco)}
/* nel modulo in riga l'errore sta sotto il campo senza spingerlo: i pulsanti restano allineati al campo (Mattia, 26/10) */
@media (min-width:761px){.form.inline label{position:relative}.form.inline label.hp-sito{position:absolute}.form.inline .errore-campo{position:absolute;left:0;top:100%;white-space:nowrap}.form.inline:has(.errore-campo:not(:empty)){margin-bottom:28px}}
@media (max-width:760px){.form.inline{grid-auto-flow:row}.form.campo-pulsante{grid-template-columns:minmax(0,1fr)}.kv{grid-template-columns:1fr}}
/* area partner e scadenzario */
.form.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:none}.form .span{grid-column:1/-1}
/* moduli a tutta larghezza (modifica pagina): l'editor del testo ha bisogno di tutto lo spazio */
.form.piena{max-width:none}
.form.piena>button,.form.piena>.azioni{justify-self:start}
.form fieldset{border:1px solid var(--line);padding:10px 14px;margin:0;display:grid;gap:6px}.form legend{font-size:var(--fs-nota);color:var(--ink2);padding:0 4px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:4px 12px}.checks label.check{font-size:var(--fs-nota)}
.qualifica{grid-auto-flow:column;justify-content:start;align-items:center;gap:8px}.qualifica input[type=date]{padding:4px 8px}
.flash-warn{border-color:var(--warn);background:var(--warn-soft);--campo-fondo:var(--fondo)}
/* I tre gradi della badante hanno pastiglie loro: prima riusavano pill-pagato e pill-in_attesa, cioè i colori
   degli incassi, su una scala che invece è gratuita e non c'entra niente col denaro. Stessa scala del sito
   pubblico: neutro «è iscritta», lavanda «verificata da noi», verde «confermata da una famiglia». */
/* Il grado della badante ha gli stessi tre colori del sito pubblico (tavola in tema.css): grigio, violetto, oro.
   Prima erano il blu e il verde di servizio, quindi il backoffice raccontava una scala diversa da quella che vede
   la famiglia. */
.pill-liv-base{background:var(--gr-iscritta-fondo);color:var(--gr-iscritta-testo);--campo-fondo:var(--fondo)}
.pill-liv-verificata{background:var(--gr-verificata-fondo);color:var(--gr-verificata-testo);--campo-fondo:var(--fondo)}
.pill-liv-referenze{background:var(--gr-referenze-fondo);color:var(--gr-referenze-testo);--campo-fondo:var(--fondo)}
.pill-ok,.pill-approvato,.pill-attivo{background:var(--ok-soft);color:var(--ok);--campo-fondo:var(--fondo)}.pill-richiesto,.pill-in_scadenza{background:var(--warn-soft);color:var(--warn);--campo-fondo:var(--fondo)}
.pill-sospeso,.pill-rifiutato,.pill-scaduta{background:var(--bad-soft);color:var(--bad);--campo-fondo:var(--fondo)}
/* Documenti dell'organizzazione (titolare, 6/10): «obbligatorio» in rosso, «mancante» in celeste. */
.pill-obbligatorio{background:var(--bad-soft);color:var(--bad);--campo-fondo:var(--fondo)}.pill-mancante{background:var(--ce-100);color:var(--ce-700);--campo-fondo:var(--fondo)}
:root[data-theme="dark"] .pill-mancante{background:var(--ce-900);color:var(--ce-300)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill-mancante{background:var(--ce-900);color:var(--ce-300)}}
/* «Richiesta badante specifica» (8/10): magenta, per riconoscerla a colpo d'occhio nell'elenco delle richieste */
.pill-specifica{background:var(--mg-100);color:var(--mg-800);font-weight:700;text-transform:uppercase;letter-spacing:.04em;--campo-fondo:var(--fondo)}
:root[data-theme="dark"] .pill-specifica{background:var(--mg-900);color:var(--mg-200)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill-specifica{background:var(--mg-900);color:var(--mg-200)}}
table.listino{min-width:0}table.listino td.n input{width:110px;text-align:right}
@media (max-width:760px){.form.cols{grid-template-columns:minmax(0,1fr)}}
.form input[type=file]{max-width:100%;min-width:0}
/* Colonne e riquadri si stringono con lo schermo: «1fr» e i fieldset tengono per default la larghezza del loro
   contenuto, e sotto i 360 px il profilo usciva dallo schermo, «Torna su» compreso (titolare, 29/09). */
.form fieldset{min-inline-size:0;min-width:0;grid-template-columns:minmax(0,1fr)}
.dp-campi,.pf-documenti,.pf-doc{grid-template-columns:minmax(0,1fr)}.dp-email{overflow-wrap:anywhere}   /* un indirizzo lungo va a capo invece di allargare il riquadro */.pf-stato-testa>*{min-width:0;max-width:100%}
/* accessibilità: fuoco visibile, link «vai al contenuto», testo solo per gli screen reader, tabelle scorrevoli raggiungibili da tastiera */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--bg2);color:var(--ink);padding:8px 12px;border:2px solid var(--blue);z-index:1000;--campo-fondo:var(--fondo)}.skip:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tbl:focus-visible{outline:3px solid var(--blue)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* menu: voci e rami a tendina */
.menu{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.menu a.voce,.menu summary{margin:0;padding:6px 10px;border-radius:var(--raggio-2);color:var(--ink2);font-size:var(--fs-nota);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;list-style:none;white-space:nowrap}
.menu summary::-webkit-details-marker{display:none}
.menu a.voce:hover,.menu summary:hover{background:var(--bg);color:var(--accent-ink);--campo-fondo:var(--campo-su-bianco)}
.menu a.voce[aria-current="page"],.menu details[data-attivo] summary{font-weight:600;color:var(--accent-ink)}
.menu .ic{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink3)}
.menu a.voce:hover .ic,.menu summary:hover .ic,.menu a.voce[aria-current="page"] .ic,.menu details[data-attivo] summary .ic{color:currentColor}
.menu .freccia{font-size:var(--fs-nota);margin-left:2px;color:var(--ink3)}
.menu details.ramo{position:relative}
.menu details.ramo[open]>summary{background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.menu details.ramo ul{position:absolute;left:0;top:calc(100% + 4px);z-index:50;min-width:220px;margin:0;padding:6px;list-style:none;background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-2);box-shadow:var(--ombra-1);--campo-fondo:var(--fondo)}
.menu details.ramo li a.voce{display:flex;padding:8px 10px;width:100%}
.menu .sep{margin:0 4px;color:var(--ink3)}
@media (max-width:760px){.menu details.ramo ul{position:static;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0}}

/* barra di sviluppo flottante (solo in locale) */
.backdoor{position:fixed;right:12px;bottom:12px;z-index:2000;display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--kit-blu-14);color:var(--ne-0);border-radius:var(--raggio-2);box-shadow:var(--ombra-2);font-size:var(--fs-nota)}
/* Lo scambio del tema dentro la barra DEV: stessa forma degli altri pulsanti, non quella del piè di pagina. */
.backdoor .bd-tema{font:inherit;font-size:var(--fs-nota);padding:5px 9px;border:1px solid var(--kit-blu-30);border-radius:var(--raggio-1);background:var(--kit-blu-20);color:var(--ne-0);cursor:pointer;margin-left:2px}
.backdoor .bd-tema:hover{background:var(--kit-blu-28)}
.backdoor .etichetta{font-weight:700;letter-spacing:.08em;color:var(--kit-arancio-68);margin-right:4px}
.backdoor form{margin:0}
.backdoor button,.backdoor a.bd-voce{font:inherit;font-size:var(--fs-nota);padding:5px 9px;border:1px solid var(--kit-blu-30);border-radius:var(--raggio-1);background:var(--kit-blu-20);color:var(--ne-0);cursor:pointer;text-decoration:none;display:inline-block}
.backdoor button:hover,.backdoor a.bd-voce:hover{background:var(--kit-blu-28)}
.backdoor button.attivo{background:var(--mg-600);border-color:var(--mg-600)}
.backdoor button.esci{background:transparent;color:var(--kit-blu-83)}

/* tema scuro: solo i token cambiano; la scelta esplicita (data-theme) vince sul sistema */
:root{color-scheme:light}
/* logo: nel tema scuro la versione con lavanda e magenta schiariti (brand/logo-badante-scuro.png), senza riquadro bianco */
.brand .logo-scuro{display:none}
:root[data-theme="dark"] .brand .logo-chiaro{display:none}:root[data-theme="dark"] .brand .logo-scuro{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-chiaro{display:none}:root:not([data-theme="light"]) .brand .logo-scuro{display:block}}
/* I pulsanti prendono i colori solo dai ruoli --btn-* e --btn2-* di tema.css, misurati nei due temi: niente bianco
   scritto a mano, che in tema scuro finiva sul rosa (24/09). */
.btn-secondario{background:var(--btn2-fondo);color:var(--btn2-testo)!important;border:1px solid var(--btn2-bordo)}
.btn-secondario:hover{background:var(--btn2-fondo-over);color:var(--btn2-testo-over)!important}
.btn-muto{background:var(--btn4-fondo);color:var(--btn4-testo)!important;border:1px solid var(--btn4-fondo)}.btn-muto:hover{background:var(--btn4-fondo-over);color:var(--btn4-testo-over)!important}   /* R-50: le azioni minori */
.tema{font:inherit;font-size:var(--fs-nota);padding:4px 10px;border:1px solid var(--line);border-radius:var(--raggio-pillola);background:var(--bg2);color:var(--ink2)!important;cursor:pointer;margin-left:8px;--campo-fondo:var(--fondo)}
/* toast: i messaggi si chiudono da soli (non gli errori) e al clic */
.flash{transition:opacity .4s,transform .4s}.flashes .flash{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}   /* solo i messaggi con la X: gli avvisi fissi nelle pagine restano testo normale */.flash.via{opacity:0;transform:translateY(-6px)}
.flash-chiudi{flex:none;min-width:32px;min-height:32px;padding:0 6px;border:0;border-radius:var(--raggio-2);background:transparent;color:var(--testo);font-size:var(--fs-titolo-3);line-height:1;cursor:pointer}
.flash-chiudi:hover,.flash-chiudi:focus-visible{background:var(--superficie);--campo-fondo:var(--fondo)}
/* tabelle: sotto i 600px ogni riga diventa una scheda con le etichette dell'intestazione (base.html le copia in data-label) */
@media (max-width:600px){
  .tbl:not(.fisso) table{min-width:0}.tbl:not(.fisso) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tbl:not(.fisso) tr{display:block;border-bottom:6px solid var(--bg);padding:6px 0}.tbl:not(.fisso) td{display:flex;gap:10px;justify-content:space-between;border:0;padding:4px 12px;text-align:right}
  .tbl:not(.fisso) td::before{content:attr(data-label);color:var(--ink3);font-size:var(--fs-nota);letter-spacing:.06em;text-transform:uppercase;text-align:left;flex:0 0 38%}
  .tbl:not(.fisso) td.n{text-align:right}.tbl:not(.fisso) td.azioni{justify-content:flex-start}.tbl:not(.fisso) td[colspan]{display:block;text-align:left}
}
/* stato vuoto di pagina o sezione */
.vuoto{text-align:center;padding:36px 20px;border:1px dashed var(--line);border-radius:var(--raggio-2);color:var(--ink2);margin:12px 0}
.vuoto .ic{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--ink3);margin-bottom:6px}
.vuoto strong{display:block;font-size:var(--fs-testo);color:var(--ink);margin-bottom:4px}.vuoto p{margin:0 0 12px;font-size:var(--fs-nota)}
/* paginazione e filtri */
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0;font-size:var(--fs-nota)}.pager a,.pager strong{padding:4px 9px;border:1px solid var(--line);border-radius:var(--raggio-1);text-decoration:none;color:var(--ink2)}.pager strong{background:var(--btn-fondo);color:var(--btn-testo);border-color:var(--btn-fondo)}
.filtri{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 14px}.conteggio{font-size:var(--fs-nota);color:var(--ink3);margin:0 0 8px}
.htmx-request#risultati,#risultati.htmx-request{opacity:.45;transition:opacity .2s}
/* copia negli appunti e condividi */
.copiabile{cursor:pointer;position:relative}.copiabile.copiato::after{content:"✓ Copiato";position:absolute;left:0;top:-1.6em;font-size:var(--fs-nota);background:var(--ink);color:var(--bg2);padding:2px 6px;border-radius:var(--raggio-1);white-space:nowrap}
[data-condividi]{display:none}[data-condividi].pronto{display:inline-block}
/* validazione inline */
.field-err{color:var(--bad);font-size:var(--fs-nota)}input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--bad)}
/* campanella, barre di stato, banner cookie */
/* il numero nel pallino (nota 43750192, 13/10): 12 px in un pallino di 18, al centro, uguale in aree e sito */
.campanella .conta{position:absolute;top:-4px;right:-4px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 4px;border-radius:var(--raggio-2);background:var(--bad);color:var(--pericolo-testo);font-size:var(--fs-conta);line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.barra{padding:8px 24px;font-size:var(--fs-nota);text-align:center}.barra-rossa{background:var(--bad);color:var(--ne-0)}.barra-gialla{background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--line);--campo-fondo:var(--fondo)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:1500;background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-2);box-shadow:var(--ombra-2);padding:14px 18px;font-size:var(--fs-nota);max-width:720px;margin:0 auto;--campo-fondo:var(--fondo)}
.cookie p{margin:4px 0 8px}.cookie-azioni{display:flex;gap:8px;flex-wrap:wrap}.cookie-pref{margin:6px 0 10px}.cookie-pref label{font-size:var(--fs-nota);margin:4px 0}
body.con-cookie{padding-bottom:140px}body.con-cookie .backdoor{bottom:150px}
/* La barra DEV è fissata in basso a destra e copriva il piè di pagina: finché c'è, la pagina si allunga di quel
   tanto, così il piede si legge e si clicca. `:has()` la riconosce da sola, senza toccare i template, e in
   produzione la barra non esiste quindi la regola non si applica mai. Col banner dei cookie aperto la barra sale
   sopra di lui, quindi lì lo spazio è la somma dei due. */
body:has(.backdoor){padding-bottom:64px}
body.con-cookie:has(.backdoor){padding-bottom:204px}
/* thread dei ticket */
.thread{display:grid;gap:8px;margin:14px 0}.bolla{padding:10px 14px;border-radius:var(--raggio-2);background:var(--bg2);border:1px solid var(--line);max-width:80ch;--campo-fondo:var(--fondo)}.bolla-ops{border-left:4px solid var(--accent)}.bolla-utente{border-left:4px solid var(--blue)}.bolla-interna{background:var(--warn-soft);border-color:var(--warn);--campo-fondo:var(--fondo)}.bolla-testa{font-size:var(--fs-nota)}
.pill-aperto,.pill-in_attesa_utente{background:var(--warn-soft);color:var(--warn);--campo-fondo:var(--fondo)}.pill-risolto{background:var(--ok-soft);color:var(--ok);--campo-fondo:var(--fondo)}
/* proposta di installazione della PWA */
.pwa{position:fixed;left:12px;right:12px;bottom:12px;z-index:1400;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-2);box-shadow:var(--ombra-2);padding:12px 16px;font-size:var(--fs-nota);max-width:720px;margin:0 auto;--campo-fondo:var(--fondo)}
.prova{font-size:var(--fs-nota);color:var(--ink2)}
/* perimetro emergenza: avviso, modale bloccante, pagina 112 */
.avviso-112{border:2px solid var(--bad);border-left-width:8px;background:var(--bad-soft);color:var(--ink);padding:12px 16px;margin:0 0 16px;font-size:var(--fs-testo);--campo-fondo:var(--fondo)}.avviso-112 p{margin:8px 0 0}
.btn-112{background:var(--bad)!important;color:var(--ne-0)!important;font-weight:700}.btn-112.grande{font-size:var(--fs-titolo-3);padding:16px 28px}
.modale-112{border:0;border-top:8px solid var(--bad);border-radius:var(--raggio-2);padding:22px 26px;max-width:34rem;background:var(--bg2);color:var(--ink);box-shadow:var(--ombra-3);--campo-fondo:var(--fondo)}.modale-112::backdrop{background:var(--nero-a60)}.modale-112 h2{margin:0 0 8px}
.emergenza{background:var(--bad);color:var(--ne-0);padding:28px 32px;border-radius:var(--raggio-2);text-align:center}.emergenza h1{color:var(--ne-0);margin:0 0 12px}.emergenza a{color:var(--ne-0)}.emergenza .hint{color:var(--kit-rosso-93)}
fieldset.triage{border-color:var(--bad)}
/* mappa dal vivo */
.mappa-live{height:28rem;border:1px solid var(--line);border-radius:var(--raggio-2);margin:10px 0}.riep{font-size:var(--fs-nota);color:var(--ink2);margin:6px 0}.riep strong{color:var(--ink);font-size:var(--fs-grande)}
.legenda{display:inline-block;width:12px;height:12px;border-radius:var(--raggio-cerchio);vertical-align:middle;margin-right:4px}.legenda.fresco{background:var(--kit-verde-26)}.legenda.recente{background:var(--kit-arancio-31)}.legenda.vecchio{background:var(--kit-blu-62)}
/* onboarding: checklist che sparisce */
.onboarding .passi{list-style:none;padding:0;margin:8px 0 0}.onboarding .passi li{padding:6px 0;font-size:var(--fs-nota)}.onboarding .passi li.fatto{color:var(--ink3)}.onboarding .segno{display:inline-block;width:1.2em;font-weight:700}.onboarding .passi li.fatto .segno{color:var(--ok)}.onboarding .passi li.da-fare .segno{color:var(--warn)}
/* barra fissa in cassa su mobile (M1) */
.co-mbar{display:none}
@media (max-width:600px){.co-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1300;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg2);border-top:1px solid var(--line);box-shadow:var(--ombra-su);--campo-fondo:var(--fondo)}.co-mbar .tot{font-size:var(--fs-grande);font-weight:700}.co-mbar button,.co-mbar .btn{width:auto;margin:0;white-space:nowrap}body:has(.co-mbar) .backdoor{bottom:76px}main:has(.co-mbar){padding-bottom:80px}}
/* tooltip sul gergo (C2), click-based per il touch */
.gloss{border-bottom:1px dotted var(--ink3);cursor:help;position:relative}.gloss:focus{outline:2px solid var(--blue);outline-offset:2px}
.gloss .spiega{display:none;position:absolute;left:0;bottom:1.6em;z-index:20;width:min(18rem,80vw);background:var(--ink);color:var(--bg2);padding:8px 10px;border-radius:var(--raggio-2);font-size:var(--fs-nota);font-weight:400;line-height:1.4;box-shadow:var(--ombra-2)}
.gloss[aria-expanded="true"] .spiega,.gloss:hover .spiega{display:block}
/* cruscotto struttura */
.crus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin:14px 0}
.crus .st{background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-3);padding:14px 16px;--campo-fondo:var(--fondo)}
.crus .st .et{font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.crus .st .n{font-size:var(--fs-titolo-2);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
.crus .st.acc .n{color:var(--accent-ink)}.crus .st .sub{font-size:var(--fs-nota);color:var(--ink3)}
.trend{background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-3);padding:14px 16px;margin:14px 0;--campo-fondo:var(--fondo)}
.trend .bars{display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:12px}
.trend .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0}
.trend .b .bar{width:100%;max-width:46px;background:var(--blue-soft);border:1px solid var(--blue);border-radius:var(--raggio-2) var(--raggio-2) 0 0;min-height:3px;--campo-fondo:var(--fondo)}
.trend .b .bar.now{background:var(--accent-ink);border-color:var(--accent-ink)}
.trend .b .lab{font-size:var(--fs-nota);color:var(--ink3);text-transform:uppercase;letter-spacing:.03em}
.trend .b .val{font-size:var(--fs-nota);color:var(--ink2);font-variant-numeric:tabular-nums}
/* area badante: completamento e riquadri */
.progresso{display:block;width:100%;height:10px;background:var(--line);border:0;border-radius:var(--raggio-2);overflow:hidden;margin:8px 0;-webkit-appearance:none;appearance:none}
.progresso::-webkit-progress-bar{background:var(--line);border-radius:var(--raggio-2)}.progresso::-webkit-progress-value{background:var(--progresso)}.progresso::-moz-progress-bar{background:var(--progresso)}
.griglia-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin:12px 0}.griglia-card a.card{display:block;color:inherit;text-decoration:none}
/* banner cookie (partials/cookie.html): lo stesso del sito pubblico */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:flex;justify-content:center;padding:16px}
.ck-card{background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:var(--raggio-4);box-shadow:var(--ombra-3);max-width:920px;width:100%;padding:20px 22px;--campo-fondo:var(--fondo)}
.ck-head strong{font-family:var(--disp);font-size:var(--fs-testo);display:block;margin-bottom:6px;color:var(--ink)}
.ck-head p{font-size:var(--fs-nota);color:var(--ink2);margin:0;line-height:1.5}.ck-head a{color:var(--accent-ink);font-weight:600}
.ck-prefs{display:flex;flex-direction:column;gap:10px;margin:14px 0 2px;border-top:1px solid var(--line);padding-top:14px}
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:var(--fs-nota)}.ck-row span{display:flex;flex-direction:column;gap:1px}
.ck-row b{font-weight:600;color:var(--ink)}.ck-row small{color:var(--ink3);font-size:var(--fs-nota)}.ck-row input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent-ink)}
.ck-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ck-btn{font:inherit;font-weight:700;font-size:var(--fs-nota);padding:11px 20px;border-radius:var(--raggio-2);border:1.5px solid transparent;cursor:pointer}
.ck-pri{background:var(--accent-ink)}.ck-pri:hover{background:var(--accent)}
.ck-ghost{background:transparent;color:var(--ink)!important;border-color:var(--line)}.ck-ghost:hover{border-color:var(--ink2)}
@media (max-width:600px){.ck-actions .ck-btn{flex:1 1 auto}}
/* area riservata: l'accesso in alto e sotto le tre registrazioni, ognuna verso la sua pagina */
.pagina-accesso{max-width:760px;margin:0 auto;text-align:center}.pagina-accesso .form,.pagina-accesso .social-login{max-width:420px;margin-left:auto;margin-right:auto;text-align:left}
.top-in.solo-logo{justify-content:center}
.iscrizioni{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}.iscrizioni h2{margin-top:0}
.iscrizioni-scelte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:600px){.iscrizioni-scelte{grid-template-columns:minmax(0,1fr)}}   /* sul telefono una scheda per riga, a tutta larghezza (titolare, 29/09): a due colonne la terza restava sola */
.iscrizione{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 16px;border:1px solid var(--line);border-radius:var(--raggio-4);background:var(--bg2);color:var(--ink);text-decoration:none;--campo-fondo:var(--fondo)}
.iscrizione:hover{border-color:var(--accent);box-shadow:var(--ombra-1)}.iscrizione:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.iscrizione .ic{width:28px;height:28px;padding:12px;box-sizing:content-box;border-radius:var(--raggio-cerchio);background:var(--blue-soft);color:var(--accent-ink);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;--campo-fondo:var(--fondo)}
.iscrizione strong{font-size:var(--fs-testo);color:var(--accent-ink)}.iscrizione span{font-size:var(--fs-nota);color:var(--ink3)}
/* la richiesta completa, per la famiglia a cui appartiene (lead/affidamento.html) */
.dati-richiesta{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px;margin:8px 0 4px}
.dati-richiesta dt{color:var(--ink3);font-size:var(--fs-nota)}.dati-richiesta dd{margin:0;font-weight:500;color:var(--ink)}
@media (max-width:600px){.dati-richiesta{grid-template-columns:1fr;gap:0}.dati-richiesta dd{margin-bottom:8px}}
/* la voce dell'account col nome: piccola, in minuscolo come si scrive (titolare, 12/10: in maiuscolo era grande e
   pesante, nota 43790178); i nomi lunghi finiscono coi puntini (il nome intero nel title) */
.menu details.ramo-utente summary{font-size:var(--fs-nota);font-weight:500}
.menu details.ramo-utente .ramo-testo{display:inline-block;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.pagina-accesso .lede{margin-left:auto;margin-right:auto}

/* ==================== Campi obbligatori, iscrizione e schede (2026-09-22) ====================
   Questo è il foglio delle pagine che estendono `base.html`: il modulo unico di richiesta, le registrazioni e la
   pagina «Iscrizione al portale». Il modulo dentro le pagine dei comuni ha le stesse regole in `sito.css`, perché
   quelle pagine estendono `sito/base.html` e caricano solo quello. */
/* L'asterisco è solo visivo: agli screen reader l'obbligo lo dice `required` sul campo. Ha un token suo per stare
   sopra il 4,5:1 anche in tema scuro. */
.req{color:var(--req);font-weight:700}
.obbligatori{margin:-4px 0 16px;font-size:var(--fs-nota);color:var(--ink2)}
.obbligatori span{color:var(--req);font-weight:700}
/* La spunta dell'iscrizione non è un consenso obbligatorio ma un'offerta: si stacca dalle due spunte di legge. */
label.check.iscrizione{align-items:start;margin:6px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--raggio-3);background:var(--bg);--campo-fondo:var(--campo-su-bianco)}

/* ---- Schede della pagina «Iscrizione al portale» ----
   Niente JavaScript: le etichette sono link veri e la scheda aperta è quella puntata dall'indirizzo (`:target`);
   senza indirizzo si vede la prima. Così /iscrizione/#famiglia si può mandare a qualcuno, ed è lì che punta la
   spunta dentro il modulo di richiesta. Lo `scroll-margin-top` tiene le etichette in vista dopo il salto all'ancora.
   La scheda aperta scrive col colore del fondo, non con il bianco: in tema scuro `--accent-ink` è rosa chiaro e il
   bianco sopra non si leggerebbe. */
.tabs{margin:22px 0 0}
.tabs-nav{display:flex;flex-wrap:wrap;gap:4px;margin:0;border-bottom:2px solid var(--accent-ink)}
.tabs-nav a{padding:12px 20px;border:1px solid var(--line);border-bottom:0;border-radius:var(--raggio-2) var(--raggio-2) 0 0;background:var(--bg);color:var(--ink2);font-size:var(--fs-testo);font-weight:600;line-height:1.3;text-decoration:none;--campo-fondo:var(--campo-su-bianco)}
.tabs-nav a:hover{background:var(--bg2);color:var(--accent-ink);--campo-fondo:var(--fondo)}
.tabs-nav a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.pannello{display:none;scroll-margin-top:110px;padding:24px 26px 28px;border:1px solid var(--line);border-top:0;background:var(--bg2);--campo-fondo:var(--fondo)}
.pannello:target{display:block}
.tabs:not(:has(.pannello:target)) #badante{display:block}
/* Solo la scheda aperta scavalca la barra e si attacca al pannello: le altre restano sopra la barra, che le
   taglia fuori. Con il margine negativo su tutte e tre sembravano aperte tutte. */
.tabs:has(#badante:target) .tabs-nav a[href="#badante"],
.tabs:not(:has(.pannello:target)) .tabs-nav a[href="#badante"],
.tabs:has(#famiglia:target) .tabs-nav a[href="#famiglia"],
.tabs:has(#organizzazione:target) .tabs-nav a[href="#organizzazione"],
/* le schede dei percorsi (Sviluppo → Percorsi, 5/10): aperta anche quella che contiene il percorso puntato */
.ptabs:has(#famiglia:target) .tabs-nav a[href="#famiglia"],.ptabs:has(#famiglia :target) .tabs-nav a[href="#famiglia"],
.ptabs:not(:has(.ptab:target)):not(:has(.ptab :target)) .tabs-nav a[href="#famiglia"],
.ptabs:has(#badante:target) .tabs-nav a[href="#badante"],.ptabs:has(#badante :target) .tabs-nav a[href="#badante"],
.ptabs:has(#organizzazione:target) .tabs-nav a[href="#organizzazione"],.ptabs:has(#organizzazione :target) .tabs-nav a[href="#organizzazione"]{margin-bottom:-2px;padding-bottom:14px;background:var(--accent-ink);border-color:var(--accent-ink);color:var(--bg)}
.pannello>h2:first-of-type{margin-top:0}
.pannello ul{padding-left:20px}.pannello li{margin:6px 0}
.pannello .btn+.btn{margin-left:8px}
@media (max-width:760px){.tabs-nav{border-bottom:0;gap:6px}.tabs-nav a{flex:1 1 100%;text-align:center;border-radius:var(--raggio-2);border-bottom:1px solid var(--line);margin-bottom:0!important;padding-bottom:12px!important}.pannello{margin-top:6px;border-top:1px solid var(--line);padding:20px 18px 22px}}

/* ==================== Changelog di servizio (/novita/, 2026-09-22) ====================
   Elenco asciutto: una giornata, le sue righe, e per ognuna il link alla pagina dove la modifica si vede. */
.cl{margin:26px 0 0}
.cl h2{font-size:var(--fs-testo);letter-spacing:.04em;color:var(--ink3);margin:0 0 8px;padding:0 0 6px;border-bottom:1px solid var(--line);font-family:inherit;font-weight:700}
.cl ul{margin:0;padding-left:20px}
.cl li{margin:7px 0;line-height:1.5}
.cl li a{white-space:nowrap;font-weight:600}

/* Pagina DEV della palette (il catalogo, /dev/componenti): una macchia di colore accanto a ogni nome, in tutti e due i temi. */
.colori td{vertical-align:middle}
.colori .macchia-cella{width:34px;padding-right:0}
.colori .macchia{display:block;width:26px;height:26px;border-radius:var(--raggio-2);border:1px solid var(--line)}
.colori .valore{white-space:nowrap}

/* Il divisorio dentro una tendina del menu: dice dove finiscono le pagine del profilo e cominciano quelle
   dell'account, senza aprire una seconda tendina per la stessa persona. */
.menu details.ramo li.ramo-chi{display:grid;gap:2px;padding:4px 10px 8px;border-bottom:1px solid var(--line);font-size:var(--fs-nota);color:var(--ink3);overflow-wrap:anywhere}   /* chi è entrato: l'email intera e il ruolo, scritti normali (12/10) */
.menu details.ramo li.ramo-sep{margin:6px 0 2px;padding:6px 10px 0;border-top:1px solid var(--line);font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.09em;color:var(--ink3)}

/* I dati personali della badante: la foto a sinistra, i campi a destra. È una scheda come le altre, ma dentro ha
   moduli separati (la foto si carica, il nome si salva, il cellulare si verifica), perché un modulo dentro un
   altro modulo non esiste. */
.dati-personali h2{margin:0 0 14px;font-size:var(--fs-grande)}
.dp-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}   /* due metà, come gli altri gruppi della pagina */
@media (max-width:760px){.dp-griglia{grid-template-columns:minmax(0,1fr)}}
.dp-foto img,.dp-vuota{width:150px;height:150px;border-radius:var(--raggio-cerchio);object-fit:cover;display:block;border:1px solid var(--line)}
.dp-vuota{display:grid;place-items:center;background:var(--bg2);color:var(--ink3);font-family:var(--disp);font-size:var(--fs-vetrina);--campo-fondo:var(--fondo)}
.dp-foto .form{gap:8px;margin:12px 0 0;max-width:none}
.dp-foto .hint{margin:8px 0 0}
.dp-scegli-titolo{display:block;margin-top:18px;font-size:var(--fs-nota);font-weight:600}
.dp-scegli{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dp-scegli .btn{position:relative;flex:1 1 auto;text-align:center;cursor:pointer}
.dp-scegli .btn[hidden]{display:none}
.dp-file{position:absolute;opacity:0;width:1px;height:1px;inset:0}
.dp-scegli .btn:focus-within{outline:2px solid var(--titolo);outline-offset:3px}
.dp-campi{display:grid;gap:10px}
/* Un avviso che non si può ignorare: il cellulare non verificato tiene la badante fuori da tutto. */
.avviso-forte{border:1px solid var(--warn);background:var(--warn-soft);border-radius:var(--raggio-3);padding:14px 18px;margin:14px 0;--campo-fondo:var(--fondo)}
.avviso-forte h2{margin:0 0 4px;font-size:var(--fs-grande);color:var(--warn)}
.avviso-forte p{margin:0 0 10px}
/* I pulsanti delle due azioni stanno dentro la scheda, accanto al dato che cambiano: nel documento appartengono
   a un altro modulo (attributo `form`), ma per chi guarda sono lì dove servono. */
.dp-azioni{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.dp-azioni button{font-size:var(--fs-nota);padding:7px 12px}
/* I campi che non si toccano — l'email e il numero — hanno la scritta più chiara: si vede che sono lì per essere
   letti, non compilati. (Un campo disattivato è fuori dal minimo di contrasto, WCAG 1.4.3, ma resta leggibile.) */
.form input:disabled{color:var(--ink3);-webkit-text-fill-color:var(--ink3);opacity:1;background:var(--superficie)}   /* spento: grigio, si distingue dai campi bianchi */
/* Il numero e il pulsante che lo cambia stanno sulla stessa riga; il pannello si apre sotto, sovrapposto, così
   non sposta in basso tutto il resto della scheda. */
/* La nota («verificato il…») sta sulla riga sotto, non dentro l'etichetta: dentro, allungava la colonna del
   campo e il pulsante accanto finiva più in basso del campo a cui si riferisce. */
.dp-cellulare{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:end;position:relative}
.dp-cellulare>label{margin:0}
.dp-cell-nota{grid-column:1/-1;margin:0}
/* «Cambia numero» era un link lungo quanto la riga: lo si prendeva per sbaglio mirando al campo sotto. È un
   pulsante, largo quanto la sua scritta. */
.dp-cambio{margin:0}
.dp-cambio summary{display:inline-flex;align-items:center;gap:6px;width:auto;font-size:var(--fs-nota);font-weight:600;padding:6px 12px;border:1px solid var(--line);border-radius:var(--raggio-2);background:var(--bg2);color:var(--accent-ink);cursor:pointer;list-style:none;--campo-fondo:var(--fondo)}
.dp-cambio summary::-webkit-details-marker{display:none}
.dp-cambio summary::before{content:"✎";font-size:var(--fs-nota)}
.dp-cambio summary:hover{border-color:var(--accent-ink)}
.dp-cambio[open] summary{border-color:var(--accent-ink)}
.dp-pannello{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:min(340px,100%);display:grid;gap:8px;padding:14px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-3);box-shadow:var(--ombra-1);--campo-fondo:var(--fondo)}
.dp-pannello .hint{margin:0}
.dp-pannello button{justify-self:start}
.dp-cambio .hint{margin:6px 0}

/* Il profilo della badante: in cima come sta e cosa manca, poi le sezioni da compilare. Le cose da fare sono
   collegamenti al punto giusto della pagina, non un elenco di parole. */
.pf-stato{margin:0 0 6px;border-color:var(--riquadro-bordo);border-radius:var(--raggio-3)}
/* Percentuale e livelli metà e metà; quando non ci stanno vanno uno sotto l'altro, tutti e due a tutta larghezza,
   barra compresa (titolare, 29/09). */
.pf-stato-testa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(450px,100%),1fr));gap:14px 24px;align-items:center}
.pf-manca{margin:12px 0 4px;font-weight:600}
.pf-da-fare{margin:0 0 8px;padding-left:20px}
.pf-da-fare li{margin:2px 0}
.pf-sezione{margin:28px 0 0}
.pf-sezione>h2{font-size:var(--fs-grande);margin:0 0 6px}
/* Le schede ripetibili del profilo della badante (lingue, esperienze, corsi): ogni scheda è un riquadro con i suoi
   campi in griglia, e quella vuota in fondo è pronta per la prossima. */
.schede{display:grid;gap:10px}
.scheda{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:8px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--raggio-3);background:var(--bg2);--campo-fondo:var(--fondo)}
.scheda .sc-largo{grid-column:1/-1}
.scheda .checks{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
/* La X in alto a destra toglie la scheda. Con JavaScript la scheda sparisce subito; senza, la X è una casella
   nascosta che la segna come da togliere e la scheda si spegne finché non si salva. */
.scheda{position:relative;padding-right:48px;border-color:var(--riquadro-bordo)}
.sc-x{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;gap:0;width:32px;height:32px;padding:0;border-radius:var(--raggio-cerchio);cursor:pointer;color:var(--titolo)}
.sc-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;display:block}
.sc-x:hover,.sc-x:focus-within{background:var(--tenue);outline:2px solid var(--titolo);outline-offset:0;--campo-fondo:var(--fondo)}
.sc-x input{position:absolute;opacity:0;width:1px;height:1px}
.scheda:has(.sc-x input:checked){opacity:.45}
.sc-aggiungi{justify-self:start;font-size:var(--fs-nota);padding:7px 12px}
.bd-riepilogo{display:grid;gap:4px;margin:8px 0;font-size:var(--fs-nota)}
.bd-riepilogo>div{display:grid;grid-template-columns:170px 1fr;gap:10px}
.bd-riepilogo dt{color:var(--ink2);font-weight:600}.bd-riepilogo dd{margin:0}.bd-riepilogo ul{margin:0;padding-left:18px}
@media (max-width:760px){.bd-riepilogo>div{grid-template-columns:1fr;gap:0}}

/* Caselle e pallini col colore del marchio, non col blu del browser. */
input[type=checkbox],input[type=radio]{accent-color:var(--spunta)}
/* Il profilo della badante: gruppi con un filo rosa e il titolo del gruppo nel colore dei titoli. */
.form.profilo fieldset{border-color:var(--riquadro-bordo);border-radius:var(--raggio-3);padding:14px 18px;align-content:start}
.form.profilo legend{color:var(--titolo);font-size:var(--fs-testo);font-weight:700;padding:0 6px}
/* La scala dei gradi nel riquadro in cima al profilo: il grado raggiunto pieno, quelli da ottenere tratteggiati. */
.pf-gradi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,150px));column-gap:26px;align-items:start}
.pf-gradi li{display:grid;justify-items:center;gap:4px;text-align:center}
/* colonne uguali: la freccia sta a metà dello spazio fra due colonne, all'altezza del centro delle pastiglie */
.pf-gradi li+li::before{content:"›";position:absolute;left:-13px;top:14px;transform:translate(-50%,-50%);font-size:var(--fs-grande);line-height:1;color:var(--testo-tenue)}
.pf-gradi li{position:relative}
.pf-gradi .pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-nota);padding:4px 11px}
.pf-gradi small{font-size:var(--fs-nota);color:var(--testo-tenue);line-height:1.25}
.pf-gradi .attuale .pill{outline:2px solid var(--titolo);outline-offset:2px}
.pf-gradi .attuale small{color:var(--titolo);font-weight:600}
/* Da ottenere: i colori del proprio grado, col bordo tratteggiato che dice «non ancora» */
.pf-gradi .futuro .pill{border:1.5px dashed currentColor}
.pf-ic{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pill-liv-referenze .pf-ic{fill:var(--gr-referenze-segno);stroke:var(--gr-referenze-segno);stroke-width:1.5}
.pf-gradi .futuro .pill-liv-referenze .pf-ic{fill:none;stroke:var(--gr-referenze-segno)}

/* Nelle schede grigie i campi stanno su fondo bianco, altrimenti si confondono con la scheda. E ogni etichetta
   parte dall'alto: una nota sotto un campo non deve spingere su o giù i campi accanto. */
.scheda{align-items:start}
.scheda>*{min-width:0}
.scheda label{align-content:start}
.scheda input:not([type=checkbox]):not([type=radio]),.scheda select{background:var(--fondo);width:100%;min-width:0;box-sizing:border-box}
/* Email e cellulare: testo, non campi. Si leggono, non si compilano. */
.dp-fisso{display:grid;gap:2px;font-size:var(--fs-nota)}
.dp-fisso .dp-etichetta{color:var(--ink2)}
.dp-fisso strong{font-size:var(--fs-testo);font-weight:600;color:var(--testo);padding:4px 0}
.dp-cellulare .dp-fisso{align-self:end}
/* I livelli in un riquadro interno, col titolo centrato sopra la scala */
.pf-livelli{display:grid;gap:10px;justify-items:center;padding:12px 18px 14px;border:1px solid var(--riquadro-bordo);border-radius:var(--raggio-3);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.pf-livelli-titolo{margin:0;font-size:var(--fs-nota);color:var(--testo-tenue);text-align:center}.pf-livelli-titolo strong{color:var(--titolo)}
/* La disponibilità a griglia: una riga per giorno, una colonna per fascia. */
table.dispo{border-collapse:collapse;width:auto;margin:0 0 6px}
table.dispo caption{text-align:left;margin:0 0 6px}
table.dispo th,table.dispo td{padding:6px 14px;text-align:center;border-bottom:1px solid var(--bordo);text-transform:none;letter-spacing:0;background:transparent}
table.dispo th[scope=row]{text-align:left;font-weight:600;font-size:var(--fs-nota)}
table.dispo thead th{font-size:var(--fs-nota);color:var(--testo-tenue);font-weight:600}
table.dispo input{width:20px;height:20px;cursor:pointer}
table.dispo tbody tr:hover{background:var(--tenue);--campo-fondo:var(--fondo)}
/* Convivenza: le tre domande una accanto all'altra invece che in colonna. */
#convivenza{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}#convivenza .hint,#convivenza>label{grid-column:1/-1}
#convivenza [role=radiogroup]{display:grid;gap:4px}
.tbl table.dispo th,.tbl table.dispo td{text-transform:none;letter-spacing:0;background:transparent}
#convivenza [role=radiogroup]{align-content:start}
#quando input[type=date]{max-width:260px}
/* Campi data sul telefono a tutta larghezza (titolare, 29/09): iPhone e Android ignorano width:100% sui campi data
   finché hanno l'aspetto nativo, e restavano a metà. Il calendario del telefono si apre lo stesso. */
@media (pointer:coarse),(max-width:760px){.form input[type=date],.form input[type=month]{display:block;width:100%;max-width:none;min-width:0;-webkit-appearance:none;appearance:none;min-height:44px;text-align:left}#quando input[type=date]{max-width:none}}
/* La griglia della disponibilità a tutta larghezza, su un fondo che la stacca dal riquadro (richiesta del 24/09). */
.dispo-box{background:var(--superficie);border:1px solid var(--riquadro-bordo);border-radius:var(--raggio-3);padding:6px 14px 10px;overflow-x:auto;--campo-fondo:var(--fondo)}
table.dispo{width:100%;margin:0}
.dispo-giorno{display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap}
table.dispo td input{background:var(--fondo)}
table.dispo .dispo-riga{font-size:var(--fs-nota);font-weight:600;padding:3px 9px;border-radius:var(--raggio-pillola);border:1px solid var(--btn2-bordo);background:var(--fondo);color:var(--btn2-testo);cursor:pointer;--campo-fondo:var(--campo-su-bianco)}
table.dispo .dispo-riga:hover,table.dispo .dispo-riga[aria-pressed=true]{background:var(--btn2-fondo-over);color:var(--btn2-testo-over);border-color:var(--btn2-fondo-over)}
table.dispo .dispo-tutti{font-size:var(--fs-nota);padding:5px 12px}
table.dispo thead th:first-child{text-align:right}
.pf-pubblica{display:grid;justify-items:start;gap:6px;margin:14px 0 0}
.pf-pubblica .btn{padding:12px 22px;text-align:center}
@media (max-width:600px){.pf-pubblica{justify-items:stretch}}
.pf-saluto{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pf-grado-h1{display:inline-flex;align-items:center;gap:6px;font-family:"Source Sans 3",system-ui,sans-serif;font-size:var(--fs-testo);font-weight:600;padding:5px 13px;letter-spacing:0}
/* L'interruttore «visibile alle famiglie» in cima ai dati della badante (25/09). */
.pf-v-riquadro{display:grid;gap:14px;margin:0 0 16px;padding:14px 18px;border:2px solid var(--bordo);border-radius:var(--raggio-3);background:var(--superficie);--campo-fondo:var(--fondo)}
.pf-v-riquadro:has(.pf-visibile.acceso){border-color:var(--progresso)}
.pf-visibile{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"titolo titolo" "interruttore stato" "spiega spiega" "manca manca";align-items:center;gap:14px;margin:0;cursor:pointer}
.pf-visibile input{position:absolute;opacity:0;width:1px;height:1px}
.pf-v-interruttore{position:relative;width:52px;height:30px;border-radius:var(--raggio-4);background:var(--campo-bordo);transition:background .15s}
.pf-v-interruttore::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:var(--raggio-cerchio);background:var(--fondo);transition:left .15s;--campo-fondo:var(--campo-su-bianco)}
.pf-visibile input:checked+.pf-v-interruttore{background:var(--progresso)}
.pf-visibile input:checked+.pf-v-interruttore::after{left:25px}
.pf-visibile input:focus-visible+.pf-v-interruttore{outline:2px solid var(--titolo);outline-offset:3px}
/* Titolo in alto, sotto l'interruttore con lo stato accanto, poi la spiegazione (titolare, 29/09). */
.pf-v-testo{display:contents}.pf-v-testo strong{grid-area:titolo}.pf-v-interruttore{grid-area:interruttore}.pf-v-stato{grid-area:stato}.pf-v-testo small{grid-area:spiega}.pf-v-testo strong{font-size:var(--fs-testo);color:var(--testo)}.pf-v-testo small{color:var(--testo-tenue)}
.pf-v-stato{justify-self:start;align-self:center;margin:0;padding:3px 11px;border-radius:var(--raggio-pillola);font-size:var(--fs-nota);font-weight:700;background:var(--superficie);color:var(--testo-tenue);border:1px solid var(--bordo);--campo-fondo:var(--fondo)}
.pf-visibile.acceso .pf-v-stato{background:var(--btn-fondo);color:var(--btn-testo);border-color:var(--btn-fondo)}
.sc-attestato{margin:0}
/* I documenti dentro il profilo (25/09): una riga per documento, con lo stato e il campo per caricarlo. */
.pf-documenti{display:grid;gap:10px;margin:14px 0 0}
.pf-doc{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--riquadro-bordo);border-radius:var(--raggio-3);background:var(--superficie);--campo-fondo:var(--fondo)}
.pf-doc-testa{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pf-doc-campi{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
.pf-doc-campi label{flex:1 1 240px}
.pf-doc input[type=file],.pf-doc input[type=date]{background:var(--fondo)}
/* La stessa corona della scheda pubblica sulla foto del profilo, quando la lettera di referenze è verificata. */
.dp-foto.con-lettera img,.dp-foto.con-lettera .dp-vuota{border:4px solid var(--fondo);box-shadow:0 0 0 4px var(--kit-oro-46),0 0 0 6px var(--oro-2)}
/* Il profilo in cinque blocchi (25/09): menu delle sezioni fisso in alto mentre si scorre, titoli dei blocchi
   numerati, «Torna su», e la barra di salvataggio sempre in vista in basso. */
.pf-indice{position:sticky;top:0;z-index:40;display:flex;gap:6px;overflow-x:auto;padding:10px 0;margin:6px 0 4px;background:var(--fondo);border-bottom:1px solid var(--bordo);--campo-fondo:var(--campo-su-bianco)}
.pf-indice a{flex:0 0 auto;white-space:nowrap;padding:7px 14px;border-radius:var(--raggio-pillola);border:1px solid var(--riquadro-bordo);text-decoration:none;color:var(--titolo);font-weight:600;font-size:var(--fs-nota)}
.pf-indice a:hover,.pf-indice a:focus-visible{background:var(--tenue);--campo-fondo:var(--fondo)}
.pf-indice a[aria-current]{background:var(--btn-fondo);border-color:var(--btn-fondo);color:var(--btn-testo)}
.pf-blocco{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:28px 0 0;font-size:var(--fs-titolo-3);color:var(--titolo);scroll-margin-top:76px}
.pf-blocco:first-of-type{margin-top:8px}
.pf-num{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--raggio-cerchio);background:var(--btn-fondo);color:var(--btn-testo);font-size:var(--fs-testo);font-family:"Source Sans 3",system-ui,sans-serif}
.pf-blocco small{font-size:var(--fs-testo);color:var(--testo-tenue);font-weight:400}
.form.profilo fieldset{scroll-margin-top:76px}
.form.profilo :is(input,select,textarea){scroll-margin-top:96px}   /* il campo da correggere non finisce sotto la barra delle sezioni */
.pf-su{margin:0;text-align:right;font-size:var(--fs-nota)}.pf-su a{color:var(--link)}
.pf-salva{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin:12px 0 0;background:var(--fondo);border:1px solid var(--riquadro-bordo);border-radius:var(--raggio-3) var(--raggio-3) 0 0;box-shadow:var(--ombra-su);--campo-fondo:var(--campo-su-bianco)}
.pf-salva strong{color:var(--titolo)}

/* La barra DEV si richiude di lato: resta la sola linguetta «DEV ‹». */
.backdoor .bd-voci{display:flex;align-items:center;gap:6px}
.backdoor.chiusa .bd-voci{display:none}

/* Barra DEV sul telefono (titolare, 29/09): era schiacciata, con le voci su tre righe. Occupa la larghezza dello
   schermo, le voci restano su una riga e scorrono di lato col dito. */
@media (max-width:760px){.backdoor{left:8px;right:8px;bottom:8px}.backdoor:not(.chiusa) .bd-voci{flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.backdoor .bd-voci>*{flex:0 0 auto}.backdoor .bd-voci button{white-space:nowrap}.backdoor.chiusa{left:auto}}
.backdoor button.etichetta{background:transparent;border:0;color:var(--kit-arancio-68);font-weight:700;letter-spacing:.08em;padding:5px 6px}
.backdoor.chiusa button.etichetta span{display:inline-block;transform:rotate(180deg)}
/* «Tema scuro» nella barra DEV: la regola generale di .tema (scritta tenue, !important) la rendeva illeggibile. */
.backdoor .bd-tema{background:var(--kit-blu-20)!important;color:var(--ne-0)!important;border-color:var(--kit-blu-30)!important}
.backdoor .bd-tema:hover{background:var(--kit-blu-28)!important}
/* Mostra/nascondi la password (25/09): il pulsante dentro il campo, a destra. */
.pw-campo{position:relative;display:block}
.pw-campo input{width:100%;padding-right:96px!important;box-sizing:border-box}
.pw-campo .pw-mostra{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:var(--fs-nota);font-weight:600;padding:5px 10px;border-radius:var(--raggio-2);border:1px solid var(--btn2-bordo);background:var(--btn2-fondo);color:var(--btn2-testo);cursor:pointer}
.pw-campo .pw-mostra:hover{background:var(--btn2-fondo-over);color:var(--btn2-testo-over)}
.pw-dimenticata{margin:-4px 0 4px;text-align:right;font-size:var(--fs-nota)}
.nt-corpo summary{cursor:pointer;list-style:none}.nt-corpo summary::-webkit-details-marker{display:none}
.nt-corpo .nt-apri{color:var(--link);text-decoration:underline}.nt-corpo[open] summary small{display:none}
/* «Installa l'app» (audit, task 43666562): un riquadro piccolo nell'angolo in basso a sinistra, non una barra larga
   quanto la finestra che copriva i campi e la barra «Salva il profilo»; si chiude con la X. */
.pwa{left:12px!important;right:auto!important;max-width:min(320px,calc(100% - 24px));padding:10px 12px!important;gap:8px!important;font-size:var(--fs-nota);flex-wrap:wrap}
.pwa span{flex:1 1 100%}
.pwa button{font-size:var(--fs-nota);padding:6px 12px}
body:has(.pf-salva) .pwa{bottom:84px!important}   /* nel profilo sta sopra la barra «Salva il profilo» */

/* Collaudo del 28/09 (task 43666566): campi a 16 px sul telefono (sotto l'iPhone ingrandisce la pagina a ogni tocco)
   e pulsanti col carattere del sito. */
@media (max-width:760px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:var(--fs-testo)!important}}
button,input,select,textarea{font-family:inherit}

/* Sul telefono (titolare, 29/09): il riquadro dei livelli a tutta larghezza, tutto allineato a sinistra, i tre gradi
   uno sotto l'altro con la spiegazione accanto; sotto i 380 px la spiegazione va sotto la pastiglia. Una regola sola. */
@media (max-width:600px){.pf-livelli{justify-items:stretch;padding:12px 14px}.pf-gradi{justify-self:stretch;width:100%}.pf-livelli-titolo{text-align:left}
  .pf-gradi{grid-template-columns:minmax(0,1fr);row-gap:10px;column-gap:0}
  .pf-gradi li{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:10px;text-align:left}.pf-gradi li+li::before{content:none}}
@media (max-width:380px){.pf-gradi li{grid-template-columns:minmax(0,1fr);gap:4px}.pf-gradi .pill{white-space:normal}}

/* Comune con i suggerimenti nel profilo della badante (titolare, 29/09): lo stesso componente del modulo della home
   (comune.js, data-comuni), coi colori della palette perché qui c'è anche il tema scuro. */
.cm-ancora{position:relative}
.cm-lista{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--fondo);border:1px solid var(--campo-bordo);border-radius:var(--raggio-3);box-shadow:var(--ombra-vetrina);max-height:300px;overflow:auto;text-align:left;--campo-fondo:var(--campo-su-bianco)}
.cm-lista li{padding:9px 12px;border-radius:var(--raggio-2);cursor:pointer;color:var(--testo);font-size:var(--fs-testo);font-weight:400}
.cm-lista li[role=option][aria-selected="true"],.cm-lista li[role=option]:hover{background:var(--tenue);--campo-fondo:var(--fondo)}
.cm-lista li.cm-titolo{cursor:default;padding:6px 12px 2px;font-size:var(--fs-nota);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--testo-tenue)}
.cm-lista li span.cm-sigla{display:inline;margin:0 0 0 8px;font-size:var(--fs-nota);font-weight:600;color:var(--testo-tenue)}
.cm-intendevi{margin:6px 0 0;font-size:var(--fs-nota);line-height:1.5;color:var(--errore);font-weight:400}
.cm-proposta{font:inherit;font-weight:700;color:var(--link);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* Pannello del backoffice (titolare, 29/09): cosa c'è da fare, poi le sezioni raggruppate come nel menu. */
/* Pannello del backoffice (titolare, 30/09): tutti i riquadri della stessa misura, quattro per riga su computer, due sul
   tablet, uno sul telefono; ogni sezione è una fascia, e le fasce alternano due fondi. */
.pn-gruppo{margin:0 0 18px;padding:18px 20px 20px;border-radius:var(--raggio-4)}
.pn-fascia-0{background:var(--superficie);--campo-fondo:var(--fondo)}
.pn-fascia-1{background:var(--tenue);--campo-fondo:var(--fondo)}
.pn-gruppo h2{display:flex;align-items:center;gap:8px;font-size:var(--fs-grande);margin:0 0 12px}
.pn-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:12px}
@media (max-width:1100px){.pn-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pn-griglia{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(120px,auto)}}
.pn-griglia li{display:flex}
.pn-voce{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--fondo);color:var(--testo);text-decoration:none;overflow:hidden;--campo-fondo:var(--campo-su-bianco)}
.pn-voce:hover,.pn-voce:focus-visible{border-color:var(--titolo)}
.pn-voce strong{display:flex;align-items:center;gap:8px;font-size:var(--fs-grande);color:var(--titolo)}
.pn-voce span{font-size:var(--fs-nota);line-height:1.4;color:var(--testo-tenue)}
.pn-conta{align-items:center;justify-content:center;text-align:center;gap:14px}
.pn-conta strong{justify-content:center;font-size:var(--fs-titolo-1);line-height:1}
.pn-conta.pn-zero strong{color:var(--testo-tenue)}
.pn-gruppo .ic,.pn-voce .ic{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Scheda della badante nel backoffice: le azioni della redazione sopra il profilo (titolare, 29/09). */
.ops-azioni{margin:0 0 20px;border-color:var(--titolo)}
.ops-azioni h2{margin:0 0 12px}.ops-azioni h3{margin:14px 0 6px;font-size:var(--fs-testo)}

.ops-azioni-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:6px 24px}
.ops-doc{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:10px 0;border-top:1px solid var(--bordo)}
.ops-doc>div{min-width:0;overflow-wrap:anywhere}
.pf-v-manca{grid-area:manca;font-size:var(--fs-nota);font-weight:600;color:var(--errore)}
/* i dati che mancano per comparire, evidenziati nel modulo; l'avviso li linka (Mattia, 26/10) */
.pf-v-manca a{color:inherit;text-decoration:underline}
div.pf-v-manca{grid-column:1/-1;margin:4px 0 0;padding:10px 14px;border-left:4px solid var(--errore);background:var(--errore-fondo);border-radius:var(--raggio-2);--campo-fondo:var(--fondo)}
div.pf-v-manca p{margin:0}div.pf-v-manca ul{margin:6px 0;padding-left:22px}div.pf-v-manca li{margin:2px 0}
.pf-essenziale{display:inline-flex;width:auto;justify-self:start;align-items:center;margin-left:6px;padding:1px 10px;border-radius:var(--raggio-pillola);background:var(--errore);color:var(--fondo);font-size:var(--fs-nota);font-weight:700;white-space:nowrap;vertical-align:middle;--campo-fondo:var(--errore)}
.pf-campo-manca input,.pf-campo-manca select{border-color:var(--warn);box-shadow:0 0 0 2px var(--warn-soft)}
.pf-visibile.bloccato{cursor:not-allowed}.pf-visibile input:disabled+.pf-v-interruttore{opacity:.45}
/* Nel backoffice la pagina del profilo parla della badante, non a lei (titolare, 29/09): titoli ed etichette in terza
   persona; le spiegazioni scritte per lei ("compari", "carica la tua foto") non servono alla redazione. */
.form.profilo.da-admin .hint,.form.profilo.da-admin .pf-v-testo small{display:none}
/* Disponibilità per nuovi lavori (titolare, 29/09): due scelte a sinistra, la data a destra; sul telefono una sotto l'altra. */
.pf-disp-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px 24px;align-items:start}
.pf-disp-scelte{display:grid;gap:10px}
.pf-disp-scelta{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--fondo);cursor:pointer;--campo-fondo:var(--campo-su-bianco)}
.pf-disp-scelta:has(input:checked){border-color:var(--titolo);box-shadow:inset 3px 0 0 var(--titolo)}
.pf-disp-scelta input{margin-top:3px}
.pf-disp-scelta span{display:grid;gap:3px}.pf-disp-scelta small{font-size:var(--fs-nota)}
.pf-disp-data{display:grid;gap:4px}
.pf-v-disp{justify-self:start;text-align:center}
.pf-v-disp-nota{margin-top:-8px;color:var(--testo-tenue)}
@media (max-width:600px){.pf-v-disp{justify-self:stretch}}


/* I comuni dove lavora la badante (titolare, 29/09): pannello nella pagina, fasce di distanza richiudibili, ogni
   comune con i suoi km. Le colonne si stringono da sole: sul telefono una per riga. */
.zn-sintesi{margin:0 0 6px;font-size:var(--fs-testo);line-height:1.5}
.zn-apri{justify-self:start;margin:4px 0}
.zn-pannello{display:grid;gap:10px;margin-top:8px;padding:14px;border:1px solid var(--line);border-radius:var(--raggio-3);background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.zn-pannello[hidden]{display:none}
.zn-aggiungi{max-width:420px}
.zn-fasce{display:grid;gap:8px}
.zn-fascia{border:1px solid var(--line);border-radius:var(--raggio-2);background:var(--bg2);--campo-fondo:var(--fondo)}
.zn-fascia>summary{padding:10px 12px;font-weight:600;cursor:pointer;color:var(--ink)}
.zn-conta{font-weight:400;color:var(--ink3);margin-left:6px}
.zn-tutti{display:flex;gap:8px;padding:0 12px 8px}
.zn-tutti .btn-secondario{padding:4px 12px;font-size:var(--fs-nota)}
.zn-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:2px 12px;padding:0 12px 12px}
label.check.zn-comune{font-size:var(--fs-nota);grid-template-columns:auto 1fr auto;grid-auto-flow:row}
.zn-km{color:var(--ink3);font-size:var(--fs-nota);white-space:nowrap}
/* Anteprima di un messaggio in /ops/notifiche/{id} (30/09): l'email a larghezza di computer e di telefono, l'SMS come fumetto. */
.nt-dati{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 20px}.nt-dati dt{color:var(--testo-tenue)}.nt-dati dd{margin:0}
.nt-anteprime{display:grid;grid-template-columns:minmax(0,680px) 390px;gap:24px;align-items:start}
.nt-anteprime h2{margin:0 0 8px}
.nt-anteprime iframe{display:block;width:100%;height:760px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--ne-0);--campo-fondo:var(--campo-rosa)}
.nt-anteprime .nt-tel{width:390px;max-width:100%;border-radius:var(--raggio-5);border-width:10px;border-color:var(--ne-800)}
@media (max-width:1100px){.nt-anteprime{grid-template-columns:minmax(0,1fr)}}
.nt-testo{margin:20px 0}
.nt-sms{max-width:340px;padding:12px 16px;border-radius:var(--raggio-4) var(--raggio-4) var(--raggio-4) var(--raggio-1);background:var(--superficie);border:1px solid var(--bordo);--campo-fondo:var(--fondo)}
.nt-sms p{margin:4px 0 0}.nt-sms-da{color:var(--testo-tenue);font-size:var(--fs-nota)}
/* Nome e cognome sotto la foto (30/09), con lo stesso passo fra i campi della colonna di destra. */
.dp-nome{display:grid;gap:10px;margin-top:18px}
/* Registro delle notifiche (30/09): la tabella sta nella pagina, senza scorrimento di lato; sotto i 760 px ogni riga
   diventa una scheda. Il tipo (email o telefonino) sta accanto alla data. */
.nt-tabella{border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--superficie);margin:10px 0;--campo-fondo:var(--fondo)}
.nt-tabella table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse}
.nt-tabella th,.nt-tabella td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bordo);overflow-wrap:anywhere}
.nt-c-data{width:130px}.nt-c-dest{width:22%}.nt-c-stato{width:16%}.nt-c-az{width:132px}
.nt-azioni{display:flex;flex-direction:column;gap:6px}.nt-azioni .btn,.nt-azioni button{width:100%;text-align:center;white-space:nowrap}.nt-azioni form{margin:0}
.nt-tipo{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 6px;border-radius:var(--raggio-pillola);font-size:var(--fs-nota);font-weight:700;border:1px solid}
.nt-tipo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nt-email{color:var(--titolo);border-color:var(--titolo)}
.nt-sms{color:var(--ok);border-color:var(--ok)}
@media (max-width:760px){.nt-tabella thead{display:none}.nt-tabella table,.nt-tabella tbody,.nt-tabella tr,.nt-tabella td{display:block;width:auto}
  .nt-tabella tr{border-bottom:1px solid var(--bordo);padding:6px 0}.nt-tabella td{border:0;padding:4px 12px}.nt-azioni{flex-direction:row}}
/* La scheda della famiglia (30/09): gli stessi blocchi numerati del profilo della badante. */
.fm-chi{max-width:none}
.fm-richiesta{margin:0 0 12px}
.fm-link{list-style:none;display:grid;gap:10px;margin:0}
.fm-conferma{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.fm-conferma p{margin:0}.fm-conferma form{margin:0}
.menu details.ramo-utente .ramo-testo{font-size:var(--fs-nota);max-width:18ch}
.pn-in-arrivo{opacity:.7;border-style:dashed}
/* I servizi Pro della famiglia (30/09): si vedono già, con l'etichetta «Pro» e «in arrivo». */
.pn-etichette{display:flex;gap:6px}
.pn-pro,.pn-arriva{display:inline-block;padding:1px 10px;border-radius:var(--raggio-pillola);font-size:var(--fs-nota);font-weight:700}
.pn-pro,.pn-voce .pn-etichette .pn-pro{background:var(--gr-referenze-fondo);color:var(--gr-referenze-testo);border:1px solid var(--gr-referenze-segno);--campo-fondo:var(--fondo)}
.pn-arriva{border:1px dashed var(--bordo);color:var(--testo-tenue)}
.pn-in-arrivo{opacity:1}
/* I servizi Pro per chi non è Pro (titolare, 30/09): in grigio, non si scelgono; «Scopri il piano Pro» resta vivo. */
.pn-bloccato{background:var(--superficie);border-style:dashed;cursor:not-allowed;--campo-fondo:var(--fondo)}
.pn-bloccato strong{color:var(--testo-tenue)}
.pn-bloccato .ic{opacity:.7}
/* I livelli della famiglia (30/09): tre carte affiancate, quella dove sei è piena, le altre tratteggiate. */
.lv-area{margin:0 0 18px;padding:18px 20px 20px;border-radius:var(--raggio-4);background:var(--superficie);--campo-fondo:var(--fondo)}
.lv-area h2{margin:0 0 12px;font-size:var(--fs-grande)}
.lv-carte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.lv-carte{grid-template-columns:minmax(0,1fr)}}
.lv-carta{padding:16px 18px;border:2px dashed var(--bordo);border-radius:var(--raggio-3);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.lv-carta.lv-qui{border:2px solid var(--progresso)}
.lv-carta.lv-pro{border-color:var(--gr-referenze-segno)}
.lv-testa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.lv-nome{font-size:var(--fs-grande);font-weight:700;color:var(--titolo)}
.lv-sei-qui{padding:1px 10px;border-radius:var(--raggio-pillola);background:var(--btn-fondo);color:var(--btn-testo);font-size:var(--fs-nota);font-weight:700}
.lv-prezzo{margin:4px 0 10px;color:var(--testo-tenue);font-size:var(--fs-nota)}
.lv-carta ul{margin:0;padding-left:20px;display:grid;gap:4px}
.lv-prossimo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.lv-prossimo p{margin:0;flex:1 1 320px}.lv-prossimo form{margin:0}

/* Il cuore delle badanti preferite (1/10): contorno, pieno quando è salvata. */
.cuore-form{display:inline-block;margin:0}
.cuore{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--raggio-pillola);border:1.5px solid var(--btn2-bordo);background:var(--btn2-fondo);color:var(--btn2-testo);font:inherit;font-weight:700;cursor:pointer}
.cuore svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.cuore.salvata svg{fill:currentColor}
.cuore:hover,.cuore:focus-visible{background:var(--btn2-fondo-over);color:var(--btn2-testo-over)}
.pf-elenco{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.pf-badante-testa{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.pf-badante-testa h2{margin:0;font-size:var(--fs-grande)}
.pf-badante-azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pf-salvata-da{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;color:var(--titolo);font-weight:700}
.pf-salvata-da svg{width:18px;height:18px;fill:currentColor}
/* La X per togliere la foto, in alto a destra sul ritratto (titolare, 2/10): prende il posto del pulsante «Rimuovi foto». */
.dp-ritratto{position:relative;width:max-content}
.dp-foto-x{position:absolute;top:0;right:-6px;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:var(--raggio-cerchio);
  border:2px solid var(--campo-bordo);background:var(--fondo);color:var(--testo);cursor:pointer;--campo-fondo:var(--campo-su-bianco)}
.dp-foto-x .ic{width:20px;height:20px;stroke:currentColor;stroke-width:2.5;fill:none}
.dp-foto-x:hover,.dp-foto-x:focus-visible{background:var(--btn-fondo);border-color:var(--btn-fondo);color:var(--btn-testo)}
.dp-foto-x:focus-visible{outline:2px solid var(--titolo);outline-offset:2px}
/* L'ingresso della badante (titolare, 2/10): il profilo in breve sopra la griglia, le richieste col suo nome sotto. */
.bi-testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 32px;align-items:center}
.bi-testa h1{margin:0}
.bi-completo p{margin:0;font-size:var(--fs-grande)}
.bi-completo .progresso{margin:8px 0 0}
@media (max-width:760px){.bi-testa{grid-template-columns:minmax(0,1fr)}}
.bi-richieste{margin:0 0 18px;padding:18px 20px 20px;border-radius:var(--raggio-4);background:var(--superficie);--campo-fondo:var(--fondo)}
.bi-richieste h2{font-size:var(--fs-grande);margin:0 0 6px}
.bi-richieste p{margin:8px 0 12px}
.bi-elenco{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bi-elenco li{padding:10px 14px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.bi-data{color:var(--testo-tenue);font-variant-numeric:tabular-nums;margin-right:6px}
/* Profilo della badante, la testa del riquadro (titolare, 2/10): «Vedi la tua scheda pubblica» sotto la barra, largo
   quanto la percentuale. */
.pf-completo .pf-pubblica{justify-items:stretch;margin:18px 0 0}
.pf-completo .pf-pubblica .btn{width:100%}
/* «Utile per la visibilità» accanto ai dati che fanno la percentuale del profilo (titolare, 2/10). */
.pf-utile{display:inline-flex;align-items:center;margin-left:6px;padding:1px 10px;border-radius:var(--raggio-pillola);background:var(--tenue);
  color:var(--titolo);font-size:var(--fs-nota);font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;vertical-align:middle;--campo-fondo:var(--fondo)}
/* Il compositore di ruoli (titolare, 5/10): la griglia dei ruoli e quella della persona. Righe delicate in rosa,
   eccezioni in lilla; caselle grandi da toccare anche sul telefono; la tabella scorre di lato se non ci sta. */
.rg-form{min-width:0;max-width:100%}
.rg-scorre{overflow-x:auto;max-width:100%;border:1px solid var(--bordo);border-radius:var(--raggio-4);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.rg-griglia{width:100%;min-width:720px;border-collapse:collapse}
.rg-griglia th,.rg-griglia td{padding:8px 14px;border-top:1px solid var(--bordo);text-align:left;vertical-align:middle}
.rg-griglia thead th{background:var(--superficie);border-top:0;position:sticky;top:0;--campo-fondo:var(--fondo)}
.rg-griglia .rg-cap{font-weight:400;min-width:260px}
.rg-griglia thead .rg-cap{font-weight:700}
.rg-ruolo{text-align:center!important;min-width:140px}
.rg-ruolo strong,.rg-ruolo small{display:block}
.rg-ruolo small{font-weight:400;color:var(--testo-tenue)}
.rg-nome input{width:100%;text-align:center;font-weight:700}
.rg-gruppo th{background:var(--superficie);color:var(--titolo);font-size:var(--fs-nota);font-weight:800;letter-spacing:.08em;text-transform:uppercase;--campo-fondo:var(--fondo)}
.rg-delicata{background:var(--tenue);--campo-fondo:var(--fondo)}
.rg-eccezione{background:var(--li-1);--campo-fondo:var(--fondo)}
.rg-cella,.rg-centro{text-align:center!important}
.rg-casella{display:inline-grid;place-items:center;width:44px;height:44px;cursor:pointer}
.rg-casella input{width:24px;height:24px;margin:0;accent-color:var(--btn-fondo);cursor:pointer}
.rg-bloccata,.rg-bloccata input{cursor:not-allowed}
.rg-tre{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;border:0;margin:0;padding:0}
.rg-opz{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px;border:2px solid var(--bordo);border-radius:var(--raggio-pillola);cursor:pointer;background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.rg-opz.rg-scelta{border-color:var(--titolo);font-weight:700}
.rg-tre[disabled] .rg-opz{cursor:not-allowed;opacity:.7}
.rg-esito{font-weight:700}
.rg-si{color:var(--ok)}.rg-no{color:var(--errore)}
.rg-azioni{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:12px 0;background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.rg-elimina{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rg-griglia textarea{width:100%;min-width:120px}
/* Sul telefono la griglia sta nello schermo: una tabella più larga dentro il suo contenitore allargava comunque la
   pagina (come per le .tbl, riga 176). Colonne strette, testo a capo, caselle più piccole ma sempre da 40 px. */
@media (max-width:600px){
  .rg-griglia{min-width:0;table-layout:fixed}
  .rg-griglia th,.rg-griglia td{padding:6px 4px;overflow-wrap:anywhere}
  .rg-griglia .rg-cap{min-width:0;width:38%}
  .rg-ruolo{min-width:0}
  .rg-nome input{padding:4px;font-size:var(--fs-nota)}
  .rg-casella{width:40px;height:40px}
  .rg-persona .rg-cap{width:34%}
  .rg-tre{flex-direction:column;align-items:stretch}
  .rg-opz{justify-content:center;padding:4px 8px}
  .rg-griglia textarea{min-width:0}
}
.rg-griglia th{text-transform:none;letter-spacing:0;color:var(--testo);font-size:var(--fs-testo)}
.rg-griglia thead th,.rg-griglia thead .rg-ruolo strong{font-size:var(--fs-nota)}
.rg-griglia thead .rg-cap{text-transform:uppercase;letter-spacing:.08em;color:var(--testo-tenue)}
.rg-griglia .rg-gruppo th{text-transform:uppercase;letter-spacing:.08em;color:var(--titolo);font-size:var(--fs-nota)}
.rg-ruolo strong{color:var(--titolo)}
@media (max-width:600px){
  .rg-ruolo small{display:none}
  .rg-griglia th,.rg-griglia td{font-size:var(--fs-nota)}
  .rg-griglia thead .rg-cap{letter-spacing:0}
}
/* Ruoli (titolare, 5/10): testata allineata in alto; nome come il super admin con una matita discreta su grigio;
   aperta, la matita diventa viola e sopra compare «SALVA»; la descrizione a 13 px sotto il nome; in modifica, la sua
   casella in una riga a tutta larghezza sotto i nomi. */
.rg-griglia thead th{vertical-align:top}
.rg-ruolo>*{margin-left:auto;margin-right:auto}
.rg-modifica summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none}
.rg-modifica summary::-webkit-details-marker{display:none}
.rg-nome-testo{color:var(--titolo)}
.rg-matita{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--raggio-2);background:var(--superficie);border:1px solid var(--bordo);color:var(--testo-tenue);--campo-fondo:var(--fondo)}
.rg-matita .ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.rg-modifica summary:hover .rg-matita,.rg-modifica summary:focus-visible .rg-matita{color:var(--titolo);border-color:var(--titolo)}
.rg-modifica[open] summary{display:none}   /* in modifica la matita sparisce: si chiude salvando */
.rg-modifica[open]{display:grid;gap:6px;justify-items:center}
.rg-modifica[open] .rg-nome{width:100%}
.rg-mod-azioni{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px}   /* pulsanti più piccoli e staccati dal nome (Mattia, 4/11) */
.rg-salva{min-height:30px;padding:2px 10px;border:0;border-radius:var(--raggio-2);background:var(--btn-fondo);color:var(--btn-testo);font-size:var(--fs-nota);font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rg-annulla{min-height:30px;padding:2px 10px;font-size:var(--fs-nota);font-weight:700;letter-spacing:.06em;text-transform:uppercase}   /* accanto a «Salva», grigio: chiude senza salvare (4/11) */
.rg-cestino{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--raggio-2);background:var(--errore);color:var(--btn-testo);cursor:pointer}
.rg-cestino .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.rg-salva:focus-visible,.rg-cestino:focus-visible{outline:2px solid var(--titolo);outline-offset:2px}
.rg-descrizione{display:block;margin-top:4px;font-size:var(--fs-descrizione);line-height:1.35;font-weight:400;color:var(--testo-tenue)}
.rg-persone{display:block;margin-top:6px;font-size:var(--fs-nota);font-weight:400;color:var(--link)}
.rg-descr-riga td{background:var(--superficie);border-top:0;padding:0 14px;--campo-fondo:var(--fondo)}
.rg-descr-riga:not(:has(.rg-descr-box:not([hidden]))){display:none}
.rg-descr-box{display:grid;gap:4px;padding:10px 0;font-weight:700}
.rg-descr-box[hidden]{display:none}
.rg-descr-box textarea{width:100%;font-weight:400;background:var(--fondo);border:2px solid var(--titolo);border-radius:var(--raggio-2)}   /* bianca e bordata: si vede che è in modifica */
/* «Nuovo ruolo»: fascia bordeaux con caselle bianche, uguale nei due temi (titolare, 5/10). Bianco su var(--mg-800): 11:1. */
.rg-fascia-nuovo{margin:0 0 14px;padding:14px 18px;border-radius:var(--raggio-3);background:var(--mg-800);color:var(--ne-0)}
.rg-fascia-nuovo label{color:var(--ne-0);font-weight:600}
.rg-fascia-nuovo input,.rg-fascia-nuovo select{background:var(--ne-0);color:var(--ne-800);border:1px solid var(--ne-0);font-weight:400}
.rg-fascia-nuovo button{min-height:44px;padding:8px 20px;border:2px solid var(--ne-0);border-radius:var(--raggio-2);background:var(--ne-0);color:var(--mg-800);font-weight:700;cursor:pointer;--campo-fondo:var(--campo-rosa)}
.rg-fascia-nuovo button:hover,.rg-fascia-nuovo button:focus-visible{background:var(--mg-200);border-color:var(--mg-200);color:var(--mg-800)}
.rg-fascia-nuovo button:focus-visible{outline:2px solid var(--ne-0);outline-offset:2px}
.rg-nuovo{max-width:none}
.rg-nuovo-riga{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) auto;gap:12px;align-items:end}
@media (max-width:600px){.rg-nuovo-riga{grid-template-columns:minmax(0,1fr)}}
.rg-modifica[open] .rg-nome{width:100%}
/* Sviluppo → Percorsi (titolare, 5/10): ogni percorso è una linea verticale, un passo sotto l'altro, col link alla
   pagina dove succede. */
.pc-salti{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pc-salti a{padding:6px 14px;border:1px solid var(--bordo);border-radius:var(--raggio-pillola);text-decoration:none;color:var(--titolo);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.pc-attore{margin:0 0 32px;padding:18px 20px;border-radius:var(--raggio-4);background:var(--superficie);--campo-fondo:var(--fondo)}
.pc-attore>h2{margin:0 0 6px}
.pc-stati{margin:10px 0 14px}
.pc-stati summary{cursor:pointer;font-weight:700;color:var(--titolo)}
.pc-indice{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:6px 18px;margin:0 0 18px;padding-left:20px}
.pc-indice a{color:var(--testo);text-decoration:none}
.pc-indice a:hover,.pc-indice a:focus-visible{color:var(--titolo);text-decoration:underline}
.pc-percorso{margin:0 0 14px;padding:16px 18px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--fondo);scroll-margin-top:90px;--campo-fondo:var(--campo-su-bianco)}
.pc-percorso header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px}
.pc-percorso h3{margin:0}
.pc-num{display:inline-grid;place-items:center;min-width:40px;height:32px;padding:0 8px;border-radius:var(--raggio-pillola);background:var(--btn-fondo);color:var(--btn-testo);font-weight:800}
.pc-stato{padding:2px 10px;border-radius:var(--raggio-pillola);font-size:var(--fs-nota);font-weight:700;border:1px solid var(--bordo)}
.pc-fatto{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok);--campo-fondo:var(--fondo)}
.pc-meta{background:var(--avviso-fondo);color:var(--avviso);border-color:var(--avviso);--campo-fondo:var(--fondo)}
.pc-arrivo{background:var(--li-1);color:var(--li-3);border-color:var(--li-3);--campo-fondo:var(--fondo)}
.pc-nuovo{background:var(--superficie);color:var(--testo-tenue);--campo-fondo:var(--fondo)}
.pc-linea{list-style:none;margin:0;padding:0 0 0 22px;border-left:3px solid var(--marchio);counter-reset:passo}
.pc-linea li{position:relative;padding:8px 0 8px 14px}
.pc-passo{counter-increment:passo;display:grid;gap:2px}
.pc-passo::before{content:counter(passo);position:absolute;left:-36px;top:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--raggio-cerchio);background:var(--fondo);border:2px solid var(--marchio);color:var(--titolo);font-size:var(--fs-nota);font-weight:800;--campo-fondo:var(--campo-su-bianco)}
.pc-capo{color:var(--testo-tenue)}
.pc-capo::before{content:"";position:absolute;left:-30px;top:16px;width:14px;height:14px;border-radius:var(--raggio-cerchio);background:var(--marchio)}
.pc-dove{font-size:var(--fs-nota);color:var(--testo-tenue)}
.pc-dove a{color:var(--link)}
.pc-canale{font-style:italic}
.pc-nota,.pc-mcp{margin:8px 0 0;font-size:var(--fs-nota)}
.pc-nota span,.pc-mcp span{display:inline-block;min-width:96px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--testo-tenue)}
.pc-nota-non_puo span{color:var(--errore)}.pc-nota-arrivo span{color:var(--blue)}.pc-nota-dopo span{color:var(--ok)}
.pc-indice{list-style:none;padding-left:0}
.pc-stato{white-space:nowrap}
.pc-passo,.pc-testo,.pc-dove{min-width:0;overflow-wrap:anywhere}
.pc-percorso{min-width:0;overflow-wrap:anywhere}
@media (max-width:600px){.pc-attore{padding:14px 12px}.pc-percorso{padding:12px}.pc-linea{padding-left:18px}.pc-passo::before{left:-32px}.pc-capo::before{left:-27px}}
/* Percorsi a schede, con l'aspetto di /iscrizione/ (titolare, 5/10). Aperta la scheda puntata o quella che contiene
   il percorso puntato (#O6); senza indirizzo, la famiglia. */
.ptabs .pc-attore{display:none;margin:0;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--raggio-4) var(--raggio-4)}
.ptabs .ptab:target,.ptabs .ptab:has(:target){display:block}
.ptabs:not(:has(.ptab:target)):not(:has(.ptab :target)) #famiglia{display:block}
.ptabs .tabs-nav small{font-weight:400}
@media (max-width:760px){.ptabs .pc-attore{border-top:1px solid var(--line);border-radius:var(--raggio-4);margin-top:6px}}

/* Organizzazioni nel backoffice (titolare, 6/10): una riga cliccabile per organizzazione; la scheda a schede (tab). */
.og-elenco{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.og-riga{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:10px 18px;align-items:center;padding:14px 18px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--superficie);color:inherit;text-decoration:none;--campo-fondo:var(--fondo)}
.og-riga:hover{border-color:var(--titolo)}
.og-riga:focus-visible{outline:2px solid var(--titolo);outline-offset:2px}
.og-chi{display:grid;gap:2px}
.og-nome{font-weight:700;font-size:var(--fs-testo);color:var(--titolo)}
.og-dove{color:var(--testo-tenue);font-size:var(--fs-nota)}
.og-situazione{display:flex;flex-wrap:wrap;gap:6px}
.og-apri{font-size:var(--fs-titolo-3);color:var(--titolo);line-height:1}
.og-vuoto{color:var(--testo-tenue)}
@media (max-width:760px){.og-riga{grid-template-columns:minmax(0,1fr) auto}.og-situazione{grid-column:1/-1;grid-row:2}}
.og-testa{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
.og-testa h1{margin:0}
.og-esito{padding:12px 16px;border-radius:var(--raggio-3);margin:0 0 18px;font-size:var(--fs-testo)}
.og-esito.si{background:var(--ok-soft);color:var(--ok);--campo-fondo:var(--fondo)}
.og-esito.no{background:var(--bad-soft);color:var(--bad);--campo-fondo:var(--fondo)}
.og-esito a{color:inherit;font-weight:700}
/* la scheda: il menu del profilo della badante (.pf-indice) in alto; sul telefono una tendina che resta in alto */
.og-blocco{margin:18px 0 0;scroll-margin-top:76px}
.og-blocco>h2{margin-top:0}
.og-tendina{display:none}
@media (max-width:760px){
  .og-indice{display:none}
  .og-tendina{display:block;position:sticky;top:0;z-index:40;padding:8px 0;background:var(--fondo);border-bottom:1px solid var(--bordo);--campo-fondo:var(--campo-su-bianco)}
  .og-tendina select{width:100%;font:inherit;font-weight:600;padding:10px 12px;border:1.5px solid var(--titolo);border-radius:var(--raggio-3);background:var(--fondo);color:var(--titolo)}
}
.og-doc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:start;padding:14px 0;border-top:1px solid var(--bordo)}
.og-doc:first-of-type{border-top:0}
.og-doc-nome{font-weight:700}
.og-doc-azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.og-doc-azioni input{min-width:14em}
@media (max-width:760px){.og-doc{grid-template-columns:minmax(0,1fr)}.og-doc-azioni{justify-content:flex-start}}
.og-decidi{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.og-elimina{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--bordo)}
/* Il ruolo di chi è entrato nel backoffice, accanto al nome in alto (titolare, 5/10). */
/* sul computer la tendina col nome sta nella riga del logo, prima della campanella; sul telefono nel menu */
.top-ops .campanella+.menu-utente{margin-left:0}   /* nel backoffice la campanella spinge a destra, il nome la segue */
@media (min-width:761px){.menu details.solo-telefono{display:none}
  .top nav.menu-largo{flex:1 0 100%;justify-content:flex-start;column-gap:4px}}   /* le voci vicine, da sinistra (titolare, 12/10: con poche voci erano lontanissime, nota 43790415) */
@media (min-width:761px){.top nav.menu-largo>details.ramo:has(+ details.solo-telefono) ul,.menu-utente details.ramo ul{left:auto;right:0}}   /* le tendine sul bordo destro si aprono verso sinistra */
@media (min-width:761px) and (max-width:1100px){.top nav.menu-largo>a.voce .ic,.top nav.menu-largo>details>summary .ic{display:none}}   /* schermi medi: senza icone le voci stanno su una riga */
@media (max-width:760px){.menu-utente.solo-desktop{display:none}}
}
.ruolo-pill{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:var(--raggio-pillola);border:1px solid var(--titolo);color:var(--titolo);text-transform:none;letter-spacing:0;font-size:var(--fs-nota);font-weight:600;white-space:nowrap}

/* La scheda della richiesta (titolare, 7/10): la richiesta a sinistra, cosa fare a destra; sul telefono una sotto l'altra. */
.og-cosa{color:var(--testo);font-size:var(--fs-nota);flex-basis:100%}
.rq-due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.rq-richiesta,.rq-azioni{display:grid;gap:18px}
.rq-richiesta .card,.rq-azioni .card{margin:0}
.rq-richiesta h2,.rq-azioni h2{margin-top:0}
.rq-testo{white-space:pre-wrap;margin:0}
.rq-zona{padding:10px 14px;border-radius:var(--raggio-3);margin:0 0 12px}
.rq-zona.si{background:var(--ok-soft);color:var(--ok);--campo-fondo:var(--fondo)}
.rq-zona.no{background:var(--bad-soft);color:var(--bad);--campo-fondo:var(--fondo)}
@media (max-width:900px){.rq-due{grid-template-columns:minmax(0,1fr)}}
/* Il pannello dei filtri del backoffice, quello di «Ricerca badante» (titolare, 7/10): magenta scuro, etichette rosa
   sopra le tendine bianche, tutti i filtri visibili; non cambia col tema. Si usa con class="filtro-pannello". */
.filtro-pannello{display:grid;gap:12px;margin:0 0 18px;padding:14px 18px;border-radius:var(--raggio-4);background:var(--mg-900)}
.fp-tendine{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 14px}
.filtro-pannello label{display:grid;gap:4px;font-size:var(--fs-nota);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mg-200)}
.filtro-pannello select,.filtro-pannello input{width:100%;min-width:0;font:inherit;font-size:var(--fs-nota);font-weight:400;letter-spacing:0;text-transform:none;padding:8px 10px;border:1px solid var(--ne-0);border-radius:var(--raggio-2);background:var(--ne-0);color:var(--ne-900)}
.filtro-pannello input::placeholder{color:var(--ne-600)}
.fp-fondo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:12px;border-top:1px solid var(--mg-700)}
.fp-conta{margin:0 auto 0 0;font-weight:700;color:var(--ne-0)}
.fp-azzera{color:var(--mg-200);font-size:var(--fs-nota)}
.filtro-pannello .fp-vai{margin:0;padding:8px 22px;border:1px solid var(--mg-200);border-radius:var(--raggio-pillola);background:var(--mg-200);color:var(--mg-900);font-weight:700;font-size:var(--fs-nota)}
.filtro-pannello .fp-vai:hover{background:var(--ne-0);border-color:var(--ne-0);--campo-fondo:var(--campo-su-bianco)}
.filtro-pannello :focus-visible{outline:2px solid var(--mg-200);outline-offset:2px}
.rq-riga{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto auto}
.rq-numeri{display:grid;gap:2px;min-width:8.5em;text-align:right;font-size:var(--fs-nota);color:var(--testo-tenue);white-space:nowrap}
.rq-numeri strong{color:var(--testo);font-size:var(--fs-testo)}
@media (max-width:760px){.rq-riga{grid-template-columns:minmax(0,1fr) auto}.rq-numeri{grid-column:1/-1;grid-row:3;display:flex;gap:16px;text-align:left;min-width:0}}
/* sul telefono i filtri si aprono a richiesta (titolare, 7/10); sul computer sempre aperti, senza pulsante */
.fp-apri{display:none}
@media (max-width:760px){
  .fp-apri:not([hidden]){display:inline-flex;align-items:center;gap:8px;justify-self:start;margin:0;padding:8px 18px;border:1px solid var(--mg-200);border-radius:var(--raggio-pillola);background:var(--mg-200);color:var(--mg-900);font-weight:700;font-size:var(--fs-nota)}
  .fp-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--raggio-pillola);background:var(--mg-900);color:var(--ne-0)}
  .fp-n[hidden]{display:none}
  .filtro-pannello.chiuso .fp-tendine,.filtro-pannello.chiuso .fp-fondo{display:none}
  .filtro-pannello.chiuso{padding:0;background:none}
  .filtro-pannello.chiuso .fp-apri{background:var(--mg-900);border-color:var(--mg-900);color:var(--ne-0)}
}
/* filtri chiusi anche sul computer, si aprono col pulsante (Mattia, 29/10, rapporti di lavoro): la classe fp-sempre */
.filtro-pannello.fp-sempre .fp-apri:not([hidden]){display:inline-flex;align-items:center;gap:8px;justify-self:start;margin:0;padding:8px 18px;border-radius:var(--raggio-pillola);font-weight:700;cursor:pointer}
.filtro-pannello.fp-sempre .fp-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--raggio-pillola);background:var(--mg-900);color:var(--ne-0)}
.filtro-pannello.fp-sempre .fp-n[hidden]{display:none}
.filtro-pannello.fp-sempre:not(.chiuso) .fp-apri{border:1px solid var(--mg-200);background:var(--mg-200);color:var(--mg-900)}
.filtro-pannello.fp-sempre.chiuso .fp-tendine,.filtro-pannello.fp-sempre.chiuso .fp-fondo{display:none}
.filtro-pannello.fp-sempre.chiuso{padding:0;background:none}
.filtro-pannello.fp-sempre.chiuso .fp-apri{border:1px solid var(--mg-900);background:var(--mg-900);color:var(--ne-0)}
/* Il piano Pro nell'area della famiglia (decisione 45, 8/10): la stessa scheda della badante di «Richiesta ricevuta». */
.pro-richiesta{margin:18px 0 0}
.pro-richiesta h2{margin-top:0}
.pro-richiesta ul{margin:0;padding-left:22px}
.sc-riga{display:grid;gap:18px 28px;margin:18px 0 0;padding:22px 24px;border:1px solid var(--bordo);border-radius:var(--raggio-4);background:var(--superficie);--campo-fondo:var(--fondo)}
.sc-pro{grid-template-columns:minmax(0,2fr) minmax(0,3fr);border-color:var(--titolo);border-width:2px}
.sc-riga h2{margin:0 0 10px;font-size:var(--fs-titolo-3)}
.sc-riga p{margin:0 0 12px}
.sc-badante{display:flex;gap:18px;align-items:flex-start}
.sc-foto{width:120px;height:120px;flex:0 0 120px;border-radius:var(--raggio-cerchio);object-fit:cover;border:2px solid var(--bordo)}
.sc-foto-vuota{display:flex;align-items:center;justify-content:center;background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.sc-foto-vuota svg{width:56px;height:56px;fill:none;stroke:var(--testo-tenue);stroke-width:1.5}
.sc-nome{font-size:var(--fs-titolo-3);font-weight:700;color:var(--titolo);margin:0 0 6px}
.sc-dati{color:var(--testo-tenue);font-size:var(--fs-nota);margin:0 0 4px}
.sc-vantaggi{margin:0 0 16px;padding-left:22px}
.sc-vantaggi li{margin:0 0 6px}
@media (max-width:760px){.sc-pro{grid-template-columns:minmax(0,1fr)}.sc-foto{width:88px;height:88px;flex-basis:88px}}
/* I colloqui del piano Pro (decisione 50, 8/10), per la famiglia e per la badante */
.cl-elenco{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.cl-riga{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:start;margin:0}
.cl-riga p{margin:0 0 6px}
.cl-azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;justify-content:flex-end}
.cl-azioni form{margin:0}
@media (max-width:760px){.cl-riga{grid-template-columns:minmax(0,1fr)}.cl-azioni{justify-content:flex-start}}
/* Il confronto delle preferite (piano Pro, 8/10) */
.cf-tabella th[scope=row]{text-align:left;white-space:nowrap}
.cf-tabella thead th{vertical-align:bottom}
.cf-foto{width:64px;height:64px;border-radius:var(--raggio-cerchio);object-fit:cover}
/* Area della famiglia (titolare, 8/10): il benvenuto e, accanto, il riquadro dello status a un quarto della riga */
.ar-testa{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:18px 28px;align-items:start;margin:0 0 18px}
.ar-status{padding:16px 18px;border:2px solid var(--titolo);border-radius:var(--raggio-4);background:var(--superficie);--campo-fondo:var(--fondo)}
.ar-status p{margin:0 0 8px}
.ar-status form{margin:0 0 8px}
.ar-status-et{font-size:var(--fs-nota);color:var(--testo-tenue);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.ar-status-nome{font-size:var(--fs-titolo-3);font-weight:700;color:var(--titolo)}
/* La pagina del Pro: a sinistra la domanda, al centro in altezza; a destra la richiesta, metà riga */
.pro-testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 28px;align-items:start}   /* il titolo parte in cima, alla stessa altezza del riquadro della richiesta (Teamwork 43780571, 4/11) */
.pro-testa .pro-richiesta{margin:0}.pro-testa h1{margin-top:0}
@media (max-width:760px){.ar-testa,.pro-testa{grid-template-columns:minmax(0,1fr)}}
/* Senza password, entrati da un link dell'email (decisione 55) */
.avviso-password{margin:0 0 16px;padding:12px 16px;border-left:4px solid var(--titolo);border-radius:var(--raggio-2);background:var(--superficie);--campo-fondo:var(--fondo)}
.avviso-password a{font-weight:700}

/* Il percorso «Home › Sezione › Pagina» (decisione 54): una riga sua sotto la testata, bianca fra due righe di
   separazione, come sul sito (titolare, 9/10) */
.percorso-fascia{background:var(--fondo);border-bottom:1px solid var(--bordo);--campo-fondo:var(--campo-su-bianco)}
.percorso{padding-top:12px;padding-bottom:12px}.percorso .briciole ol{margin:0;color:var(--testo)}.percorso .briciole a{color:var(--link)}
.briciole ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px;font-size:var(--fs-nota);color:var(--ink3)}.briciole li+li::before{content:"›";margin-right:6px}

/* Colloqui nel backoffice (titolare, 9/10): il riassunto in cima e le righe a colori alterni */
.cl-numeri{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.cl-numeri li{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio-3);padding:12px 14px;font-size:var(--fs-nota);color:var(--testo);--campo-fondo:var(--fondo)}
.cl-numeri strong{display:block;font-size:var(--fs-titolo-3);color:var(--titolo)}
table.righe-alterne tbody tr:nth-child(odd) td{background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}table.righe-alterne tbody tr:nth-child(even) td{background:var(--superficie);--campo-fondo:var(--fondo)}

/* I crediti dell'organizzazione nella testata (titolare, 9/10): sempre in vista, un clic porta ai pacchetti */
.crediti-testata{display:inline-flex;align-items:center;min-height:32px;padding:2px 12px;border-radius:var(--raggio-pillola);border:1px solid var(--bordo);background:var(--superficie);color:var(--testo);font-size:var(--fs-nota);font-weight:600;text-decoration:none;white-space:nowrap;--campo-fondo:var(--fondo)}
.crediti-testata:hover{border-color:var(--link)}.crediti-testata.crediti-zero{border-color:var(--bad);color:var(--testo)}

/* Le azioni di una richiesta della famiglia: pulsanti in riga (titolare, 12/10) */
.fm-azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.fm-azioni .btn{margin:0}
/* «Pro» accanto al nome della famiglia nella testata (titolare, 12/10): piccola, sovrapposta alla fine del nome */
.etichetta-pro{display:inline-block;margin-left:-6px;transform:translateY(-9px);padding:1px 5px;border-radius:var(--raggio-pillola);background:var(--btn-fondo);color:var(--btn-testo);font-size:var(--fs-etichetta);font-weight:400;letter-spacing:.06em;line-height:1.2}   /* peso normale: a 200 non cambiava (titolare, 12/10) */
/* «Basic» accanto al nome della famiglia senza Pro (Mattia, 14/10): stessa forma, solo il contorno, nel colore del testo
   della testata (il contrasto è quello del nome) */
.etichetta-basic{background:transparent;color:inherit;border:1px solid currentColor}

/* Pagina campione del rifacimento (12/10): lo status della famiglia in una riga, «Da fare adesso» come elenco a righe */
.ar-status-fascia{background:var(--tenue);border-bottom:1px solid var(--bordo);--campo-fondo:var(--fondo)}
.ar-status-riga{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:12px;padding-bottom:12px;color:var(--testo)}
.ar-status-riga form.inline{margin:0}
.pro-azioni{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}.pro-recesso{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:22px 0}
.df{margin:0 0 22px}.df h2{font-size:var(--fs-grande);margin:0 0 10px}
.df-riga{grid-template-columns:auto minmax(0,1fr) auto}
.df-n{min-width:40px;text-align:center;font-size:var(--fs-titolo-3);font-weight:700;color:var(--titolo)}
/* «Da fare adesso» è un avviso, non una scheda come le altre (Mattia, 3/11: «deve colpire l'occhio»): fondo giallo
   dell'attenzione e filo a sinistra, in famiglia, organizzazione e badante. Catalogo, punto 9. */
.df .og-riga,.df-avvisi .pn-voce,.c-avviso{background:var(--avviso-fondo);border-color:var(--avviso);border-left:6px solid var(--avviso);color:var(--testo)}
.df .og-riga:hover,.df-avvisi .pn-voce:hover,.df-avvisi .pn-voce:focus-visible{border-color:var(--avviso);box-shadow:0 0 0 2px var(--avviso)}
.df .df-n,.df .og-apri,.c-avviso .df-n,.df-avvisi .pn-voce strong{color:var(--avviso)}
.ar-status-fascia.ar-status-avviso{background:var(--avviso-fondo);border-bottom-color:var(--avviso);color:var(--testo)}.ar-status-avviso strong{color:var(--avviso)}
.df-testo{color:var(--testo)}
.btn-piccolo{padding:4px 12px;font-size:var(--fs-nota)}

/* Testata, ordine e colori uguali per tutti (titolare, 12/10). Le voci del menu sono tutte del colore dei titoli,
   come quelle di famiglia e badante; la pagina in cui si è ha in più una riga sotto. La campanella sta prima del nome:
   sul computer dentro il menu, sul telefono accanto al pulsante del menu. */
.menu a.voce,.menu summary{color:var(--accent-ink);font-weight:600}
.menu details ul a.voce{font-weight:500}
.menu>a.voce[aria-current="page"],.menu>details[data-attivo]:not(.ramo-utente)>summary{box-shadow:inset 0 -2px 0 currentColor;border-radius:var(--raggio-2) var(--raggio-2) 0 0}
@media (min-width:761px){.top .campanella-fuori{display:none}}
@media (max-width:760px){.top nav.menu a.campanella-dentro{display:none!important}}
.menu .campanella-dentro{margin-left:0}
/* Il backoffice ha la testata più intensa (titolare, 12/10): voci bianche, logo per i fondi scuri. Le tendine aperte
   restano come le altre, chiare. */
.top-ops{background:var(--ops-fondo);border-bottom-color:var(--ops-bordo)}
.top-ops .brand .logo-chiaro{display:none}.top-ops .brand .logo-scuro{display:block}
.top-ops .menu>a.voce,.top-ops .menu>details>summary,.top-ops .menu-utente>details>summary,.top-ops .campanella,.top-ops .menu-btn{color:var(--ops-testo)}
.top-ops .menu>details>summary .freccia,.top-ops .menu-utente>details>summary .freccia{color:var(--ops-testo)}
/* mouse sopra e tendina aperta (titolare, 13/10): fondo chiaro e scritta scura, mai la sottolineatura */
.top-ops .menu>a.voce:hover,.top-ops .menu>details>summary:hover,.top-ops .menu-utente>details>summary:hover,
.top-ops .menu>details[open]>summary,.top-ops .menu-utente>details[open]>summary{background:var(--fondo);color:var(--titolo);text-decoration:none;--campo-fondo:var(--campo-su-bianco)}
.top-ops .menu>details>summary:hover .freccia,.top-ops .menu-utente>details>summary:hover .freccia,
.top-ops .menu>details[open]>summary .freccia,.top-ops .menu-utente>details[open]>summary .freccia,
.top-ops .menu-utente>details>summary:hover .ruolo-pill,.top-ops .menu-utente>details[open]>summary .ruolo-pill{color:var(--titolo);border-color:var(--titolo)}
.top-ops .menu>a.voce .ic,.top-ops .menu>details>summary .ic,.top-ops .menu-utente>details>summary .ic{color:currentColor}
.top-ops .ruolo-pill{border-color:var(--ops-testo);color:var(--ops-testo)}
.top-ops .campanella,.top-ops .menu-btn{border-color:var(--ops-bordo);background:transparent}
@media (min-width:761px){.top nav.menu:not(.menu-largo){margin-left:auto}}   /* senza la campanella fuori, è il menu a stare a destra */
/* Backoffice (titolare, 12/10): la voce con la tendina aperta resta sul fondo scuro e bianca, non diventa un riquadro
   bianco con la scritta che sparisce; anche le frecce sono bianche. */
/* Il pulsante del menu sul telefono è un tondo pieno col colore del pulsante principale, come sul sito (12/10). */
.menu-btn.tondo{background:var(--btn-fondo);color:var(--btn-testo);border-color:var(--btn-fondo)}
.top-ops .menu-btn.tondo{background:var(--btn-fondo);color:var(--btn-testo);border-color:var(--ops-testo)}
/* chi è entrato, nella tendina: l'email va a capo dopo la chiocciola, mai a metà parola */
.menu details.ramo li.ramo-chi{overflow-wrap:normal}
/* Bozza della presentazione di un'organizzazione (13/10, /bozze/organizzazione/) */
.pz-bozza{margin-bottom:18px}
.pz-testa{margin:0 0 12px}
.pz-img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--raggio-3);background:var(--superficie);--campo-fondo:var(--fondo)}
.pz-img-vuota{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed var(--bordo);color:var(--testo-tenue);text-align:center;padding:12px}
.pz-img-vuota .ic{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5}.pz-img-vuota small{font-size:var(--fs-nota)}
.pz-copertina{aspect-ratio:3/1;max-height:360px;border-radius:var(--raggio-3) var(--raggio-3) 0 0}
.pz-scheda{display:grid;gap:16px;padding:20px 24px;background:var(--superficie);border:1px solid var(--bordo);border-top:0;border-radius:0 0 var(--raggio-3) var(--raggio-3);--campo-fondo:var(--fondo)}
.pz-chi{display:flex;gap:20px;align-items:center}.pz-chi h1{margin:0 0 6px}.pz-chi .lede{margin:0 0 6px}
.pz-logo{width:120px;height:120px;flex:0 0 120px;border-radius:var(--raggio-cerchio);aspect-ratio:1;object-fit:contain;background:var(--fondo);border:1px solid var(--bordo);--campo-fondo:var(--campo-su-bianco)}
.pz-tondo{width:110px;height:110px;border-radius:var(--raggio-cerchio);aspect-ratio:1;margin:0 auto 8px}
.pz-dati{margin:4px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pz-azioni{display:flex;flex-wrap:wrap;gap:10px}
.pz-blocco{padding:28px 0;border-bottom:1px solid var(--bordo);scroll-margin-top:76px}.pz-blocco h2{margin:0 0 12px;font-family:var(--disp);font-weight:600}   /* il carattere dei titoli, come il nome in testa (Mattia, 28/10) */
/* niente riquadri (Mattia, 28/10: lo stile scarno delle landing): ogni voce ha solo una riga sottile sopra */
.pz-numeri,.pz-servizi,.pz-badanti,.pz-perche,.pz-galleria,.pz-recensioni{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:24px 32px}
.pz-numeri{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.pz-numeri li{padding:14px 0 0;border-top:2px solid var(--marchio)}.pz-numeri strong{display:block;font-family:var(--disp);font-size:var(--fs-titolo-1);line-height:1.1;color:var(--titolo)}
.pz-servizi,.pz-perche,.pz-recensioni{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pz-servizi li,.pz-perche li,.pz-recensioni li,.pz-badanti li{padding:16px 0 0;border-top:1px solid var(--bordo);display:grid;gap:6px;align-content:start}
.pz-servizi strong{display:flex;align-items:center;gap:8px;color:var(--titolo)}.pz-servizi .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.pz-badanti{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));text-align:center}.pz-badanti .pill{justify-self:center}
.pz-badante{display:grid;gap:6px;color:inherit;text-decoration:none}.pz-badanti li:has(.pz-badante:hover){border-top-color:var(--titolo)}.pz-vedi{color:var(--titolo);font-weight:600}
.pz-zona{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.pz-galleria{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.pz-galleria .pz-img{aspect-ratio:4/3}.pz-galleria li span{display:block;margin-top:6px;color:var(--testo-tenue);font-size:var(--fs-nota)}
.pz-recensioni p{margin:0}.pz-recensioni li>span{color:var(--testo-tenue);font-size:var(--fs-nota)}
/* Cosa facciamo e Perché sceglierci a contrasto: fascia bordeaux a tutta larghezza, scritte bianche (Mattia, 28/10) */
.pz-fascia{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);background:var(--mg-900);color:var(--ne-0);border-bottom:0;--campo-fondo:var(--fondo)}
.pz-fascia h2,.pz-fascia strong,.pz-servizi .ic{color:var(--ne-0)}
.pz-fascia .pz-servizi strong,.pz-fascia .pz-servizi .ic{color:var(--rosa)}
.pz-fascia li{border-top-color:var(--bianco-a25)}
.pz-fascia li span{color:var(--ne-200)}
.pz-chi-siamo{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:start;margin-bottom:8px}.pz-chi-siamo p{margin:0}   /* la foto più piccola, a corredo (Mattia, 28/10) */
.pz-foto-chi{aspect-ratio:4/3}
@media (max-width:760px){.pz-chi-siamo{grid-template-columns:1fr;gap:16px}}
a.pz-comune{text-decoration:none}a.pz-comune:hover{background:var(--btn3-fondo);color:var(--btn3-testo)}
/* le badanti: il fondo solo al passaggio; le valutazioni, ognuna nella sua cornice */
.pz-badanti li{border-top:0;border-radius:var(--raggio-3);padding:16px 12px}.pz-badanti li:has(.pz-badante:hover){background:var(--tenue);--campo-fondo:var(--fondo)}
/* il voto in stelle, col numero accanto (Mattia, 28/10) */
.pz-recensioni .stelle{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;color:var(--accent-ink)}.pz-recensioni .stelle span{color:var(--testo)}
.pz-recensioni .stelle-dis{width:86.4px;height:16px;flex:0 0 auto}
.pz-recensioni li{padding:20px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--fondo);box-shadow:var(--ombra-1)}
.pz-contatti{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px;margin:12px 0}.pz-contatti dt{color:var(--testo-tenue)}.pz-contatti dd{margin:0;font-weight:600}
@media (max-width:760px){.pz-chi{flex-direction:column;align-items:flex-start}.pz-copertina{aspect-ratio:2/1}.pz-scheda{padding:16px}}
.menu a.voce.campanella{border-radius:var(--raggio-cerchio)}   /* la campanella è tonda anche dentro il menu, come sul sito (13/10) */
.og-salva{margin:18px 0 0}   /* il pulsante del modulo delle impostazioni, sotto le schede (13/10) */
/* La barra di salvataggio fissa (Mattia, 2/11): resta in fondo allo schermo finché si è dentro il modulo lungo; quando
   un campo cambia si accende «Modifiche non salvate». Catalogo, punto 8. */
.salva-fisso{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;padding:12px 16px;background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio-4);box-shadow:var(--ombra-1);--campo-fondo:var(--fondo)}
.salva-fisso .salva-stato{margin-right:auto;color:var(--testo-tenue)}
.salva-fisso.sporco{border-color:var(--marchio)}.salva-fisso.sporco .salva-stato{color:var(--marchio);font-weight:600}
.salva-fisso button{height:44px;margin:0}
/* il pulsante di un'azione che toglie qualcosa (recedere dal Pro): rosso, la scritta del pulsante principale (13/10) */
.btn-pericolo{font:inherit;font-weight:500;padding:9px 16px;border:0;border-radius:var(--raggio-2);background:var(--errore);color:var(--pericolo-testo);cursor:pointer}
.btn-pericolo:hover,.btn-pericolo:focus-visible{filter:brightness(.9)}
.cl-elenco+form.pf-confronta{margin:14px 0 18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}   /* «Recedi» staccato dal pagamento sopra (13/10) */
.form label .et .pill{padding:0 8px;line-height:inherit;vertical-align:baseline}   /* una pillola accanto all'etichetta non alza la riga: il campo resta allineato a quelli accanto (13/10) */
/* Novità: il riassunto in cima a ogni giorno (Mattia, 14/10) */
.cl-riassunto{font-weight:600;color:var(--testo)}

/* Al posto degli stili scritti dentro le pagine (R-10, 19/10): una classe per uso, mai style="…" nei template */
.a-capo{white-space:pre-wrap}.testo-nota{font-size:var(--fs-nota)}.testo-normale{font-size:var(--fs-testo)}.maiuscolo{text-transform:uppercase}
.spazio-su-4{margin:4px 0 0}.spazio-su-8{margin:8px 0 0}.spazio-giu-10{margin-bottom:10px}
.largo-20{min-width:20rem}.largo-24{min-width:24rem}
.filo-errore{border-left:4px solid var(--bad)}.filo-accento{border-left:4px solid var(--accent)}.filo-ok{border-left:4px solid var(--ok)}
.riquadro-scorre{max-height:24rem;overflow:auto;border:1px solid var(--line);padding:12px 16px;margin:10px 0}

/* il campo trappola per lo spam (app/core/protezione.py): fuori dallo schermo e nascosto al lettore di schermo */
.hp-sito{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.errore-campo{display:block;margin:4px 0 0;color:var(--bad);font-size:var(--fs-nota);font-weight:600}   /* R-14: l'errore sotto il campo, letto dal lettore di schermo */

/* Rapporti di lavoro (decisione 86) e l'avviso di disponibilità della badante, che non si chiude (decisione 88) */
.rl-avviso{padding:12px 16px;border-left:4px solid var(--warn);background:var(--warn-soft);margin:0 0 16px;--campo-fondo:var(--fondo)}
.rl-avviso p{margin:0}.rl-avviso a{font-weight:700}
.rl-elenco .rl-riga{padding:10px 0;border-top:1px solid var(--line)}.rl-elenco .rl-riga:first-of-type{border-top:0}
.rl-riga p{margin:0 0 6px}
.rl-in-riga{display:inline-block;margin-left:10px}.rl-elenco h3{margin:20px 0 8px}.rl-invita{margin-top:16px}.rl-invita summary{cursor:pointer;font-weight:700;color:var(--link)}   /* collaborazioni (decisione 72) */
.fm-azioni-staccate{margin-top:24px}   /* «Nuova richiesta» non attaccato all'elenco (Mattia, 20/10) */
.rl-conosciute{margin-top:48px;padding:20px 24px;background:var(--fi-fondo);border:1px solid var(--fi-bordo);border-radius:var(--raggio-4);--campo-fondo:var(--fondo)}   /* separate dalle richieste a vista, coi colori della scheda della badante (Mattia, 20/10) */
.rl-conosciute h2{color:var(--titolo)}.rl-conosciute .rl-riga{border-color:var(--fi-bordo)}

/* La barra delle statistiche della badante (Mattia, 21/10, versione «1a»): piccola, sotto il saluto; sezioni da visitare, non cose da fare */
.st-barra[open]{display:flex;flex-wrap:wrap;align-items:center}.st-barra{gap:6px 18px;margin:8px 0 20px;padding:10px 16px;font-size:var(--fs-nota);background:var(--tenue);border-radius:var(--raggio-pillola)}
.st-barra ul{display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:0;padding:0}
.st-barra li{margin-right:18px}.st-barra li+li::before{content:"·";margin-right:18px;color:var(--testo-tenue)}
.st-barra a{color:inherit;text-decoration:none}.st-barra a:hover,.st-barra a:focus-visible{text-decoration:underline}
.st-titolo{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--titolo)}
.st-barra .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-barra small{color:var(--testo-tenue);font-size:inherit}
@media (max-width:760px){.st-barra{border-radius:var(--raggio-4)}.st-barra li+li::before{display:none}}
.rl-chiusi{margin:16px 0}.rl-chiusi>summary{cursor:pointer;font-weight:700;color:var(--link);padding:8px 0}   /* i finiti in fondo, da aprire (Mattia, 21/10) */
.pn-voce .pn-quanti{display:block;margin-top:6px;font-style:normal;font-weight:700;font-size:var(--fs-nota);color:var(--titolo)}   /* il numero nei riquadri delle righe (Mattia, 21/10) */
/* Il menu a tendina della badante a fisarmonica (Mattia, 21/10): le quattro parti del pannello, una aperta alla volta se si vuole */
.menu details.ramo li.ramo-gruppo{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.menu details.sottoramo>summary{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;list-style:none;font-weight:700;color:var(--titolo);border-radius:var(--raggio-2)}
.menu details.sottoramo>summary::-webkit-details-marker{display:none}
.menu details.sottoramo>summary:hover{background:var(--bg)}
.menu details.sottoramo>summary .freccia{margin-left:auto;transition:transform .15s}.menu details.sottoramo[open]>summary .freccia{transform:rotate(180deg)}
.menu details.ramo details.sottoramo ul{position:static;box-shadow:none;border:0;min-width:0;padding:0 0 4px 14px;background:transparent}
.st-barra>summary{cursor:pointer;list-style:none}.st-barra>summary::-webkit-details-marker{display:none}
.st-barra .freccia{margin-left:4px;font-weight:400;transition:transform .15s}.st-barra[open] .freccia{transform:rotate(180deg)}
@media (min-width:761px){.st-barra .freccia{display:none}.st-barra>summary{cursor:default;pointer-events:none}}   /* sul computer è sempre aperta */
@media (max-width:760px){.st-barra[open]{display:block}.st-barra[open] ul{display:grid;margin-top:8px}}
.rl-chiudibile{position:relative;padding-right:48px}
.rl-x{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;border-radius:var(--raggio-cerchio);background:transparent;color:inherit;font-size:var(--fs-grande);line-height:1;cursor:pointer}
.rl-x:hover,.rl-x:focus-visible{background:var(--fondo)}
.pf-indice-telefono{display:none}
@media (max-width:760px){.pf-indice-telefono{display:flex}}
.pn-ancora{scroll-margin-top:64px}
/* L'esito di una richiesta presa (Mattia, 21/10): select, nota e pulsante su una riga, tutti della stessa altezza */
.pa-esito{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px 16px;align-items:end;margin:12px 0}
.pa-esito label{display:grid;gap:6px}
.pa-esito select,.pa-esito input,.pa-esito button{height:48px;box-sizing:border-box;margin:0}
.pa-esito button{padding:0 20px}
.pa-segnato{margin:0 0 8px;font-size:var(--fs-nota)}
@media (max-width:760px){.pa-esito{grid-template-columns:minmax(0,1fr)}}
/* Badanti per una richiesta, dentro la scheda (Mattia, 21/10) */
.vuoto-filtri{padding:14px 18px;border:1px dashed var(--bordo);border-radius:var(--raggio-3)}
.bd-r-elenco{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.bd-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:start;margin:0;background:var(--fondo)}
.bd-r-nome{margin:0;font-weight:700;font-size:var(--fs-grande)}.bd-r-nome .pill{font-size:var(--fs-nota);font-weight:600;vertical-align:middle}
.bd-r-dove{margin:2px 0 0;color:var(--testo-tenue);font-size:var(--fs-nota)}
.bd-r .kv{margin:8px 0 0}
.bd-r-azioni form{margin:0}
.bd-r-conta{margin:12px 0 0}
@media (max-width:760px){.bd-r{grid-template-columns:minmax(0,1fr)}}
.bd-r-fondo{justify-content:flex-end;gap:12px}.bd-r-fondo .btn{text-transform:uppercase;letter-spacing:.04em}   /* i due pulsanti dei filtri a destra, come «Azzera i filtri» della ricerca (21/10) */
.card.sc-fascia-0{background:var(--superficie);--campo-fondo:var(--fondo)}.card.sc-fascia-1{background:var(--tenue);--campo-fondo:var(--fondo)}   /* la scheda della richiesta: due fondi che si alternano, niente bordini (21/10) */
.fp-aiuto{display:block;margin-top:4px;font-size:var(--fs-suggerimento);font-weight:400;text-transform:none;letter-spacing:0}   /* «Utile per allargare la ricerca» (21/10) */
/* I filtri allineati in alto (Mattia, 21/10): ogni campo ha la stessa altezza e, sotto, lo stesso spazio per la riga
   d'aiuto, anche quando è vuoto: le righe restano equidistanti */
.fp-tendine{align-items:start}
.fp-tendine>label{grid-template-rows:auto 44px minmax(18px,auto);align-content:start}
.fp-tendine>label>select,.fp-tendine>label>input{height:44px;box-sizing:border-box}
.fp-tendine .fp-aiuto{margin:0}
/* I pulsanti d'accesso con Apple e Facebook (21/10): mancava lo stile e sulla demo il logo di Facebook riempiva la pagina */
.social-login .or-sep{text-align:center;color:var(--testo-tenue);font-size:var(--fs-nota);margin:12px 0 8px}
.facebook-login,.apple-login{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;box-sizing:border-box;margin:8px 0;padding:10px 16px;border:1px solid var(--campo-bordo);border-radius:var(--raggio-2);background:var(--fondo);color:var(--testo);font-weight:600;text-decoration:none;--campo-fondo:var(--campo-su-bianco)}
.facebook-login:hover,.apple-login:hover,.facebook-login:focus-visible,.apple-login:focus-visible{background:var(--superficie);--campo-fondo:var(--fondo)}
.facebook-login svg,.apple-login svg{width:20px;height:20px;flex:0 0 20px}
.facebook-login svg{fill:var(--facebook)}.apple-login svg{fill:currentColor}
.social-nota{margin:-2px 0 8px;font-size:var(--fs-suggerimento);color:var(--testo-tenue);text-align:center}   /* Facebook in prova (21/10) */

/* Rapporti di lavoro come «Le mie richieste» (Mattia, 29/10): un record per riga, tutta la riga apre la scheda; in corso sul rosa, passati
   sul grigio delle righe */
.rl-sezione{margin:28px 0 0}.rl-sezione h2{margin:0 0 12px}
.og-riga.rl-record{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.og-riga.rl-attivo:hover{border-color:var(--titolo)}
.og-riga.rl-attivo{background:var(--tenue);border-color:var(--fi-bordo);--campo-fondo:var(--fondo)}
.rl-nota{display:block;margin-top:4px;font-size:var(--fs-nota);color:var(--testo-tenue)}
@media (max-width:760px){.og-riga.rl-record{grid-template-columns:minmax(0,1fr) auto}}

/* Il riquadro di una scheda (regola R-49, Mattia 28/10; preso da cafpatronato): una cosa sola sta in un riquadro che
   si stacca dalla pagina; in testa, su fondo tenue, chi è, lo stato e i pulsanti; nel corpo dati e storia affiancati */
.riquadro{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio-4);box-shadow:var(--ombra-1);overflow:hidden;margin:0 0 24px;--campo-fondo:var(--fondo)}
.riquadro__testa{padding:24px;background:var(--tenue);border-bottom:1px solid var(--bordo)}
.riquadro__testa h1{margin:0 0 8px}.riquadro__testa .lede{margin:8px 0 16px}
.riquadro-riga{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.riquadro__corpo{padding:24px}.riquadro h2{margin-top:0}
.riquadro__colonne{display:grid;gap:24px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:stretch}
.riquadro__colonne>section+section{border-left:1px solid var(--bordo);padding-left:24px}
/* sotto i dati, le sezioni dove si agisce, divise da una riga sottile (catalogo, punto 7; 2/11) */
.riquadro__sezione{border-top:1px solid var(--bordo);margin-top:24px;padding-top:24px}
.riquadro__corpo>.riquadro__sezione:first-child{border-top:0;margin-top:0;padding-top:0}
.azioni{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.azioni form{margin:0}
/* nella scheda la data e i pulsanti stanno su una riga, tutti alti uguali (Mattia, 29/10) */
.azioni--scheda form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.azioni--scheda label{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.azioni--scheda input[type=date],.azioni--scheda button{height:44px;box-sizing:border-box;margin:0}
.azioni--scheda input[type=date]{width:auto;padding:0 10px}
.azioni--scheda button,.azioni--scheda .btn{display:inline-flex;align-items:center;height:44px;padding:0 18px;font-size:var(--fs-testo)}
.rs-dati{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:0}.rs-dati dt{color:var(--testo-tenue)}.rs-dati dd{margin:0;font-weight:600}
.storia{list-style:none;margin:0;padding:0 0 0 16px;border-left:2px solid var(--bordo);display:grid;gap:12px}
.storia li{position:relative}
.storia li::before{content:"";position:absolute;left:-22px;top:8px;width:10px;height:10px;border-radius:var(--raggio-cerchio);background:var(--bordo)}
.storia li:last-child::before{background:var(--marchio)}
.storia time{display:block;font-size:var(--fs-nota);color:var(--testo-tenue)}
@media (max-width:760px){.riquadro__colonne{grid-template-columns:1fr}.riquadro__colonne>section+section{border-left:0;padding-left:0;border-top:1px solid var(--bordo);padding-top:20px}
  .riquadro__testa,.riquadro__corpo{padding:16px}.azioni--scheda{flex-direction:column;align-items:stretch}.azioni--scheda form,.azioni--scheda button{width:100%}.azioni--scheda button{justify-content:center}}

/* la foto della badante nella tendina col nome (Mattia, 29/10) */
.avatar{width:32px;height:32px;flex:0 0 32px;border-radius:var(--raggio-cerchio);object-fit:cover;display:inline-block;vertical-align:middle}

/* i tre pulsanti del tema in cima alla tendina col nome (Mattia, 29/10) */
.tema-scelta{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;margin:0 0 6px;border-bottom:1px solid var(--bordo);list-style:none}
.tema-scelta button{display:flex;align-items:center;justify-content:center;height:40px;margin:0;padding:0;border:0;border-radius:var(--raggio-2);background:transparent;color:var(--testo-tenue);cursor:pointer}
.tema-scelta button:hover{background:var(--superficie);color:var(--titolo);--campo-fondo:var(--fondo)}
.tema-scelta button[aria-pressed="true"]{background:var(--tenue);color:var(--accent-ink);--campo-fondo:var(--fondo)}
.tema-scelta button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
.tema-scelta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* il catalogo dei componenti (/dev/componenti, 29/10): il titolo d'esempio della scheda (la pagina ha già il suo H1),
   il pulsante lilla e la fascia rosa per provare i pulsanti */
.titolo-esempio{margin:0 0 8px;font-family:var(--disp);font-size:var(--fs-titolo-2);color:var(--titolo)}
a.btn.c-terzo{background:var(--btn3-fondo);color:var(--btn3-testo);text-decoration:none}a.btn.c-terzo:hover{background:var(--btn3-fondo-over)}
.c-pulsanti{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.c-su-tenue{margin-top:16px;padding:16px;border-radius:var(--raggio-3);background:var(--tenue);--campo-fondo:var(--fondo)}

/* Le linguette con i pannelli (Mattia, 29/10, come cafpatronato): la linguetta scelta scende sopra la riga di base e si
   unisce al pannello; la scelta si vede anche senza colore (bordo pieno e grassetto). */
.schede__linguette{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--bordo)}
.schede__linguetta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--bordo);border-bottom:0;background:var(--tenue);border-radius:var(--raggio-2) var(--raggio-2) 0 0;color:var(--testo-tenue);text-decoration:none;white-space:nowrap;--campo-fondo:var(--fondo)}
.schede__linguetta[aria-selected="true"]{background:var(--superficie);position:relative;z-index:1;top:2px;color:var(--titolo);font-weight:600;--campo-fondo:var(--fondo)}
.schede__linguetta:hover{color:var(--titolo)}
.schede__linguetta:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.schede-una .schede__pannello{border:0;padding:0;background:none}
.schede__pannello{padding:20px;border:2px solid var(--bordo);border-top:0;background:var(--superficie);border-radius:0 0 var(--raggio-3) var(--raggio-3);--campo-fondo:var(--fondo)}
/* La fisarmonica del catalogo: ogni componente si apre e si chiude, tutti chiusi all'inizio */
.fisarmonica{display:grid;gap:8px}
.sezione{border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.sezione>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;cursor:pointer;list-style:none;font-weight:600;color:var(--titolo)}
.sezione>summary::-webkit-details-marker{display:none}
.sezione>summary::before{content:"▸";color:var(--testo-tenue)}.sezione[open]>summary::before{content:"▾"}
.sezione>summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.sezione__corpo{padding:0 16px 16px}
/* pulsanti e link-pulsante della stessa altezza (Mattia, 29/10: «le dimensioni non ci sono») */
button,.btn{line-height:1.25;font-size:var(--fs-testo)}

/* le macchie della scala dei colori nel catalogo (prima in proposta.css, 29/10) */
.pv-scale{display:grid;gap:18px;margin:18px 0 34px}
.pv-fam h3{margin:0 0 8px;font-size:var(--fs-testo)}
.pv-riga{display:flex;flex-wrap:wrap;gap:10px}
.pv-passo{width:132px}
.pv-macchia{height:56px;border-radius:var(--raggio-2);border:1px solid var(--nero-a12)}
.pv-passo code{display:block;font-size:var(--fs-nota);margin-top:4px}
.pv-passo small{display:block;font-size:var(--fs-nota);line-height:1.3;color:var(--ink3)}
.pv-riga-pezzi{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}

/* le parole della famiglia in cima al corpo della scheda (recensione, 30/10) */
.rc-parole{margin:0 0 20px;padding:12px 16px;border-left:4px solid var(--marchio);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}.rc-parole p{margin:0}
.og-situazione .stelle{display:inline-flex;align-items:center;gap:6px;margin:0 0 0 8px;font-weight:600;color:var(--accent-ink)}.og-situazione .stelle span{color:var(--testo)}
.og-situazione .stelle-dis,.riquadro .stelle-dis{width:86.4px;height:16px;flex:0 0 auto}.riquadro .stelle{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--accent-ink)}

/* una riga dell'elenco che non apre niente (il titolare fra i collaboratori, 30/10) */
.og-riga.og-riga-ferma{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}

/* Le righe dentro un riquadro (Mattia, 30/10, i token MCP): niente scatola per ogni riga, una riga sottile le divide;
   la riga accesa resta sul rosa. Catalogo, punto 6. */
.og-elenco.og-elenco-righe{gap:0}
.og-elenco-righe .og-riga{border:0;border-radius:0;border-top:1px solid var(--bordo);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}   /* un fondo suo, mai quello del riquadro (Mattia, 30/10) */
.og-elenco-righe li:first-child .og-riga{border-top:0}
.og-elenco-righe .og-riga.rl-attivo{background:var(--tenue);--campo-fondo:var(--fondo)}
.og-elenco-righe .og-riga:hover{box-shadow:inset 3px 0 0 var(--titolo)}
/* due colonne divise da una riga (Crea un token) */
.mc-due{display:grid;grid-template-columns:1fr 1fr;gap:32px}.mc-due>div+div{border-left:1px solid var(--bordo);padding-left:32px}.mc-due h3{margin-top:0}
@media (max-width:760px){.mc-due{grid-template-columns:1fr}.mc-due>div+div{border-left:0;padding-left:0;border-top:1px solid var(--bordo);padding-top:20px}}
.rs-spiega{margin:12px 0 0}

/* la scheda di un colloquio (30/10): le azioni una sotto l'altra, a tutta larghezza del corpo */
.cl-testa p{margin:4px 0}
.cl-azioni.cl-azioni-scheda{display:grid;gap:16px;justify-content:stretch;justify-items:start}.cl-azioni-scheda form{margin:0}
.cl-azioni-scheda>p{margin:0}
.cl-azioni-scheda .campo-pulsante{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.cl-azioni-scheda .campo-pulsante label{margin:0}
.cl-azioni-scheda .campo-pulsante input[type=date],.cl-azioni-scheda .campo-pulsante button{height:44px;box-sizing:border-box}
.cl-azioni-scheda>details,.cl-azioni-scheda>form.campo-pulsante,.cl-azioni-scheda>.rl-nuovo{width:100%}

/* la scheda della badante nel backoffice (30/10): stato a sinistra (più stretto), documenti a destra */
.ops-stato-riga{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;max-width:none}.ops-stato-riga>button{margin-top:calc(var(--fs-testo) * 1.6 + 6px)}.ops-stato-riga label{flex:1 1 220px;margin:0}.ops-stato-riga select,.ops-stato-riga input,.ops-stato-riga button{height:44px;box-sizing:border-box}   /* lo stato su una riga (30/10) */
.riquadro__piede{padding:12px 24px;border-top:1px solid var(--bordo)}

/* «Avete cominciato a lavorare?»: la data stretta e il pulsante alto quanto il campo, sulla stessa riga (Mattia, 2/11) */
.form.rl-nuovo{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.rl-nuovo label{margin:0}
.rl-nuovo input[type=date]{display:block;width:auto;margin-top:6px}
.rl-nuovo input[type=date],.rl-nuovo button{height:44px;box-sizing:border-box;margin:0}.rl-nuovo button{display:inline-flex;align-items:center;padding:0 18px}

/* la durata delle prove gratuite: il numero stretto e l'unità accanto, la spiegazione sotto (Mattia, 14/10 e 2/11) */
.form fieldset.prova-durata{grid-template-columns:7rem minmax(0,1fr);align-items:end;gap:6px 12px}.prova-durata>small{grid-column:1/-1}
.prova-durata input,.prova-durata select{height:44px;box-sizing:border-box}

.salva-fisso.c-esempio-fermo{position:static}   /* nel catalogo l'esempio sta fermo al suo posto */

/* «Avanzamento» (Sviluppo, 4/11): la barra della percentuale accanto al nome dell'area */
.av-area summary{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}.av-titolo{flex:1 1 220px}.av-barra{flex:0 0 160px}
.og-riga.av-riga{grid-template-columns:minmax(0,1fr) auto}
.av-barra{display:block;height:8px;border:0;border-radius:var(--raggio-cerchio);background:var(--bordo);overflow:hidden;appearance:none}.av-barra::-webkit-progress-bar{background:var(--bordo)}.av-barra::-webkit-progress-value{background:var(--marchio)}.av-barra::-moz-progress-bar{background:var(--marchio)}
.av-n{font-weight:700;text-align:right}
@media (max-width:760px){.av-barra{flex:1 1 100%;order:5}}