/* La testata del sito (Mattia, 28/10): sta in un foglio suo perché la usano anche le pagine dell'app (accesso, pagine
   legali, errori…) per chi non ha fatto l'accesso. Caricato dopo app.css e prima di sito.css. Su una riga «Menù», il
   logo e «Area riservata»; «Menù» apre il pannello con «Chiedi una badante», «Collabora con noi» e le quattro schede. */
.testata{position:relative;z-index:60;background:var(--fondo);border-bottom:1px solid var(--line);--campo-fondo:var(--campo-su-bianco)}
.ts-riga{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:1160px;min-height:84px;margin:0 auto;padding:10px 40px}
.ts-logo{grid-column:2;display:inline-flex}
.ts-logo img{height:56px;width:auto;display:block}
.ts-logo .logo-scuro{display:none}
:root[data-theme="dark"] .ts-logo .logo-chiaro{display:none}
:root[data-theme="dark"] .ts-logo .logo-scuro{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ts-logo .logo-chiaro{display:none}
  :root:not([data-theme="light"]) .ts-logo .logo-scuro{display:block}}
.ts-ic{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* «Menù» / «Chiudi»: la casella nascosta tiene aperto il pannello, il fuoco va sul pulsante */
.ts-spia{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.testata .ts-btn{grid-column:1;grid-row:1;justify-self:start;display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;margin:0;padding:10px 20px 10px 16px;cursor:pointer;border:0;border-radius:var(--raggio-pillola);background:var(--btn3-fondo);color:var(--btn3-testo);font-size:var(--fs-testo);font-weight:600}
.testata .ts-btn:hover{background:var(--btn3-fondo-over)}
.ts-ic-chiudi,.ts-testo-chiudi,.ts-spia:checked~.ts-btn .ts-ic-apri,.ts-spia:checked~.ts-btn .ts-testo-apri{display:none}
.ts-spia:checked~.ts-btn .ts-ic-chiudi,.ts-spia:checked~.ts-btn .ts-testo-chiudi{display:inline}

.ts-destra{grid-column:3;justify-self:end;display:flex;align-items:center;gap:16px}
.testata-accesso{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-testo);font-weight:600;color:var(--ink2);text-decoration:none;white-space:nowrap}
.testata-accesso:hover{color:var(--accent-ink)}

/* il pannello, a tutta larghezza sotto la testata */
.ts-pannello{display:none;position:absolute;left:0;right:0;top:100%;background:var(--menu-fondo);border-top:3px solid var(--menu-bordo);border-bottom:1px solid var(--line);box-shadow:var(--ombra-2);--campo-fondo:var(--fondo)}   /* il pannello si stacca dalla pagina anche al computer (Mattia, 4/11), come sul telefono; prugna dal 5/11 */
.ts-spia:checked~.ts-pannello{display:block}
.menu-btn:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}   /* la casella nascosta è fuori dal giro del Tab (43666566) */
.ts-dentro{max-width:1160px;margin:0 auto;padding:24px 40px 32px}
.ts-azioni{display:flex;flex-wrap:wrap;gap:14px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--menu-riga)}
.ts-cta,.ts-cta2{display:inline-flex;align-items:center;padding:11px 22px;border-radius:var(--raggio-2);text-decoration:none;text-transform:uppercase;letter-spacing:.03em;font-size:var(--fs-testo)}
.ts-lingue{margin:0 0 0 auto;align-self:center;font-size:var(--fs-nota)}
.ts-lingue a{margin-left:8px;color:var(--menu-voce);font-weight:600}
/* sul prugna i pulsanti sono chiari: bianco con la scritta magenta, rosa con la scritta scura (Mattia, 5/11) */
.ts-cta{background:var(--ne-0);color:var(--mg-700);border:1px solid var(--ne-0)}
.ts-cta:hover{background:var(--mg-100);border-color:var(--mg-100);color:var(--mg-800)}
.ts-cta2{background:var(--mg-200);color:var(--mg-900);border:1px solid var(--mg-200)}
.ts-cta2:hover{background:var(--mg-100);border-color:var(--mg-100);color:var(--mg-900)}

/* le schede: a sinistra le quattro voci, a destra la parte della voce scelta */
.ts-schede{display:grid;grid-template-columns:260px 1fr;grid-template-rows:repeat(4,auto) 1fr;column-gap:36px;align-items:start}   /* la quinta riga prende lo spazio in più: le voci restano attaccate */
.ts-scheda{grid-column:1;display:flex;justify-content:space-between;align-items:center;width:100%;margin:0 0 4px;padding:14px 18px;border:0;border-radius:var(--raggio-3) 0 0 var(--raggio-3);background:none;font:inherit;font-size:var(--fs-grande);font-weight:600;color:var(--menu-voce);text-align:left;cursor:pointer}
.ts-scheda:hover{color:var(--menu-voce-over)}
#ts-s-collabora{margin-bottom:0}   /* l'ultima voce finisce dove finisce il fondo rosa */
.ts-scheda[aria-expanded="true"]{background:var(--tenue);color:var(--accent-ink)}
.ts-scheda:focus-visible{outline:2px solid var(--menu-voce);outline-offset:-2px}
.ts-scheda[aria-expanded="true"]:focus-visible{outline-color:var(--accent-ink)}
/* dentro le aree vale anche app.css, che dà ai pulsanti il fondo magenta al passaggio: sul telefono, dopo un tocco,
   restava sulla voce e la rendeva illeggibile (Mattia, 3/11). Qui le voci chiuse restano senza fondo. */
.testata .ts-scheda:not([aria-expanded="true"]):hover{background:transparent;color:var(--menu-voce-over)}
/* la parte della voce accesa prende il suo stesso rosa, così scheda e voci sono un pezzo solo (Mattia, 28/10); le
   voci stanno in un reticolo vero, celle alte uguali divise da righe bianche, come una tabella */
.ts-parte{grid-column:2;grid-row:1 / span 5;align-self:stretch;margin-left:-36px;padding:16px 20px 16px 56px;background:var(--tenue);border-radius:0 var(--raggio-3) var(--raggio-3) 0;--campo-fondo:var(--fondo)}
.ts-parte[hidden]{display:none}
.ts-parte ul{list-style:none;margin:0;padding:0}
.ts-col3{display:grid;grid-template-columns:repeat(3,1fr)}
.ts-parte li{display:flex;border-bottom:1px solid var(--fondo)}
.ts-col3 li:not(:nth-child(3n)){border-right:1px solid var(--fondo)}
.ts-parte li a{display:flex;align-items:center;width:100%;min-height:3.2em;padding:6px 14px;color:var(--ink);text-decoration:none;font-size:var(--fs-nota);line-height:1.3}
.ts-parte li a:hover{background:var(--fondo);color:var(--accent-ink)}
.ts-parte li a.corrente{color:var(--accent-ink);font-weight:600}
.ts-aree{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}
.ts-area{margin:0;padding:6px 14px;font-weight:700;color:var(--accent-ink);border-bottom:2px solid var(--fondo)}
.ts-carte{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ts-carta-famiglie{order:3;grid-column:1 / -1}   /* al computer: agenzia e badante in alto, la famiglia sotto a tutta larghezza (Mattia, 28/10) */
.ts-carta{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--fondo);border-radius:var(--raggio-3);text-decoration:none;color:var(--ink)}
.ts-carta b{font-family:var(--disp);font-size:var(--fs-grande);color:var(--titolo)}
.ts-carta em{font-style:normal;font-weight:700;color:var(--accent-ink)}
.ts-carta:hover b{color:var(--accent-ink)}

/* telefono: tondo del menu, logo al centro, la chiave; le schede diventano una lista che si apre sotto quella toccata */
@media (max-width:900px){
  .ts-col3{grid-template-columns:repeat(2,1fr)}
  .ts-carte{grid-template-columns:1fr}
  .ts-col3 li{border-right:0!important}
  .ts-col3 li:nth-child(odd){border-right:1px solid var(--fondo)!important}
  .ts-aree{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .ts-riga{min-height:64px;padding:8px 16px;gap:8px}
  .ts-logo img{height:44px}
  .testata .ts-btn{width:48px;height:48px;padding:0;justify-content:center;background:var(--btn-fondo);color:var(--btn-testo)}
  .ts-btn-testo,.testata-accesso span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .testata-accesso{width:48px;height:48px;justify-content:center;border:1px solid var(--line);border-radius:var(--raggio-cerchio)}
  .ts-dentro{padding:16px 16px 24px;max-height:calc(100vh - 72px);overflow:auto}
  .ts-azioni{flex-direction:column}
  .ts-cta,.ts-cta2{justify-content:center}
  .ts-schede{display:block}
  .ts-scheda{border-radius:var(--raggio-3);margin:0}
  .ts-scheda[aria-expanded="true"] .ts-freccia{transform:rotate(90deg)}
  .ts-scheda,.ts-scheda[aria-expanded="true"]{border-radius:0;box-shadow:none}   /* sul telefono niente riga scura e niente angoli tondi (Mattia, 28/10) */
  /* la voce aperta si stacca dal rosa delle sue righe col lilla chiaro, diverso dal lilla pieno del pulsante (Mattia, 28/10) */
  .ts-scheda[aria-expanded="true"]{background:var(--li-1);color:var(--li-3)}
  :root[data-theme="dark"] .ts-scheda[aria-expanded="true"]{background:var(--li-3);color:var(--li-1)}
  .ts-carta-famiglie{order:0}
  .ts-parte{margin:0 0 8px;padding:0 0 4px;border-radius:0}
  .ts-col3{grid-template-columns:1fr}
  .ts-col3 li:not(:nth-child(3n)){border-right:0}
  .ts-parte li{border-bottom:0}
  .ts-parte li:nth-child(odd){background:var(--fondo)}
  .ts-parte li a{min-height:44px}
  .ts-aree{grid-template-columns:1fr}
  /* Nord, Centro, Sud e Isole si staccano dalle righe alternate: fondo bianco e riga viola sotto (Mattia, 28/10) */
  .ts-area{margin-top:0;padding:22px 14px 6px;background:var(--fondo);color:var(--viola);border-bottom:2px solid var(--viola)}
  .ts-aree>div:first-child .ts-area{padding-top:10px}
  .ts-carte{grid-template-columns:1fr;gap:12px;padding:12px}
  .ts-carta{padding:16px;border:1px solid var(--line)}
  /* il pannello si stacca dalla pagina e la copre tutta; le voci divise da una riga (Mattia, 3/11: «tono su tono») */
  .ts-pannello{background:var(--menu-fondo);min-height:calc(100vh - 64px);border-top:3px solid var(--menu-bordo);box-shadow:var(--ombra-2)}
  .ts-scheda{border-bottom:1px solid var(--menu-riga)}
}
.ts-tema{margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--menu-riga)}.ts-tema p{margin:0 0 6px;font-weight:600;color:var(--menu-voce)}
.ts-tema ul{margin:0;padding:0;list-style:none}.ts-tema .tema-scelta{border-bottom:0;margin:0;max-width:360px;background:var(--fondo);border-radius:var(--raggio-3)}   /* sul prugna la scelta del tema sta in una striscia del fondo */
@media (max-width:760px){.testata-account .ta-nome{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:760px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ts-scheda[aria-expanded="true"]{background:var(--li-3);color:var(--li-1)}}

/* la tendina col nome di chi è dentro (sito/_account.html) */
.drop{position:relative}
.drop summary::-webkit-details-marker{display:none}
.drop summary::after{content:" ▾";font-size:var(--fs-nota)}
.drop ul{position:absolute;top:100%;left:0;z-index:10;background:var(--fondo);border:1px solid var(--line);box-shadow:var(--ombra-1);list-style:none;margin:6px 0 0;padding:8px 0;min-width:260px;max-height:70vh;overflow:auto;--campo-fondo:var(--campo-su-bianco)}
.testata-account{margin-left:auto;display:flex;align-items:center;gap:10px}
.ta-menu{position:relative}
.ta-menu summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-nota);color:var(--titolo)}
.ta-menu summary::-webkit-details-marker{display:none}
.ta-menu summary .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.ta-menu ul{right:0;left:auto;min-width:220px}
.ta-menu ul{position:absolute;top:calc(100% + 8px);z-index:50;margin:0;padding:6px;list-style:none;background:var(--fondo);border:1px solid var(--bordo);border-radius:var(--raggio-3);box-shadow:var(--ombra-1);--campo-fondo:var(--campo-su-bianco)}
.testata .ta-menu ul li a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--raggio-2);color:var(--testo);text-decoration:none;font-size:var(--fs-testo);white-space:nowrap}
.ta-menu li a:hover,.ta-menu li a[aria-current=page]{background:var(--superficie);color:var(--titolo);--campo-fondo:var(--fondo)}
.ta-menu li a .ic{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--testo-tenue)}
.ta-menu li.ta-sep{margin:6px 0 2px;padding:8px 12px 2px;border-top:1px solid var(--bordo);font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.09em;color:var(--testo-tenue)}
.ta-menu>ul{columns:auto;overflow-x:hidden;overflow-y:auto}
.ta-menu .etichetta-pro{display:inline-block;margin-left:-4px;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;text-transform:none}
.ta-menu .etichetta-basic{background:transparent;color:inherit;border:1px solid currentColor}
.ta-menu ul ul{position:static;box-shadow:none;border:0;min-width:0;padding:0 0 4px 14px;margin:0;background:transparent;top:auto;columns:auto;max-height:none;overflow:visible}
.ta-menu li.ramo-gruppo{border-top:1px solid var(--bordo);margin-top:4px;padding-top:4px}
.ta-menu details.sottoramo>summary{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--raggio-2);text-transform:none;letter-spacing:0;font-size:var(--fs-testo);color:var(--titolo);white-space:nowrap}
.ta-menu details.sottoramo>summary:hover{background:var(--superficie);--campo-fondo:var(--fondo)}
.ta-menu details.sottoramo>summary .ic{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ta-menu details.sottoramo>summary .freccia{margin-left:auto;transition:transform .15s}
.ta-menu details.sottoramo[open]>summary .freccia{transform:rotate(180deg)}
.ta-menu .pn-pro{display:inline-block;padding:1px 8px;border-radius:var(--raggio-pillola);font-size:var(--fs-nota);font-weight:700;background:var(--gr-referenze-fondo);color:var(--gr-referenze-testo);border:1px solid var(--gr-referenze-segno);--campo-fondo:var(--fondo)}
.ta-menu details.sottoramo>summary::after{content:none} /* la freccia della fisarmonica è già nel menu: niente seconda (21/10) */

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


/* campanella e percentuale del profilo nella tendina dell'account: qui e non in sito.css, perché dal 3/11 la testata
   del sito vale anche dentro le aree, che sito.css non lo caricano */
.ta-campanella{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--raggio-cerchio);border:1px solid var(--bordo);color:var(--testo-tenue)}
.ta-campanella .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ta-campanella:hover{color:var(--titolo);border-color:var(--titolo)}
.ta-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(--btn-fondo);color:var(--btn-testo);font-size:var(--fs-conta);line-height:1;font-weight:700;font-variant-numeric:tabular-nums}   /* nota 43750192: il numero al centro */
.ta-perc{font-size:var(--fs-nota);letter-spacing:0;padding:2px 7px;border-radius:var(--raggio-pillola);border:2px solid var(--progresso);color:var(--titolo)}
/* sul telefono non c'è posto per i crediti accanto al logo: restano nella tendina, alla voce dei crediti (3/11) */
@media (max-width:760px){.testata-account .crediti-testata{display:none}}
/* sugli schermi stretti (393 px) la testata della badante, con foto e percentuale, usciva di qualche pixel e trascinava
   tutta la pagina (Mattia, 3/11): logo e spazi un po' più piccoli */
@media (max-width:420px){.ts-riga{gap:6px;padding-left:12px;padding-right:12px}.ts-logo img{height:36px}.testata-account{gap:6px}}
/* Chi è entrato con un ruolo diverso dalla badante ha due carte (Mattia, 4/11): affiancate, la stessa larghezza */
.ts-carte-2 .ts-carta-famiglie{order:0;grid-column:auto}
.ts-carta-mia{border:2px solid var(--accent-ink)}