/* =========================================================
   Congresso Nazionale SIMG — programma interattivo
   Un solo foglio per tutte le viste. Tipografia: Archivo con l'asse
   della larghezza (125% per il lockup, 75% per orari ed etichette).
   ========================================================= */

:root {
  color-scheme: light;

  --navy: #142C66;
  --navy-scuro: #0E2152;
  --teal: #0A7480;
  --teal-scuro: #0A5C66;
  --acqua: #7FE3E8;
  --acqua-chiaro: #A9E9EC;
  --bordo-acqua: #36C3CB;
  --arancio: #F39200;
  --arancio-chiaro: #F7B347;
  --arancio-testo: #8A4B00;
  --arancio-tenue: #FFF1DC;
  --ghiaccio: #EDF7F7;
  --ghiaccio-chiaro: #F7FBFB;
  --bianco: #FFFFFF;
  --testo: #1B2B45;
  --testo-forte: #14254A;
  --secondario: #56677A;
  --linea: #CFE3E6;
  --linea-tenue: #DCEAEC;
  --chip: #E3F1F2;

  /* Ruoli dei colori: cambiano col tema (vedi :root[data-tema="scuro"]) */
  --sfondo: #EDF7F7;            /* fondo della pagina */
  --sfondo-tenue: #F7FBFB;
  --superficie: #FFFFFF;        /* schede, fogli, liste */
  --titolo: #142C66;            /* titoli, orari, testo forte navy */
  --pieno: #142C66;             /* elementi scelti e pulsanti principali */
  --pieno-hover: #0E2152;
  --su-pieno: #FFFFFF;
  --su-pieno-secondario: #7FE3E8;
  --marchio: #142C66;           /* superfici di marca: testata, pannello Adesso, avvisi */
  --stella-vuota: #64758A;
  --stella-piena: #E08600;
  --evidenzia: #FFE2B3;
  --testo-box: #33445C;
  --bordo-tratteggio: #B9D3D7;
  --bordo-ondemand: #8FB9BF;
  --bordo-hover: #9CC4CA;

  --p-plenaria: #142C66;
  --p-discute: #0A7480;
  --p-academy: #3F7A22;
  --p-caselab: #2A63BD;
  --p-village: #8A5A00;
  --p-elearning: #56677A;
  --p-videopillole: #56677A;
  /* Gli stessi percorsi sul fondo navy del pannello Adesso */
  --s-plenaria: #FFFFFF;
  --s-discute: #7FE3E8;
  --s-academy: #B5E39C;
  --s-caselab: #A9C6F7;
  --s-village: #F2CF8C;
  /* Tinte dei blocchi della griglia */
  --t-plenaria: #E4EAF5;
  --t-discute: #DDF0F1;
  --t-academy: #EBF5E5;
  --t-caselab: #E2EBFA;
  --t-village: #F4EBDA;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ombra-pannello: 0 0 0 5px rgba(95, 224, 230, 0.14), 0 16px 34px rgba(20, 44, 102, 0.28);
  --ombra-foglio: 0 -8px 30px rgba(11, 26, 61, 0.25);
  --t-veloce: 160ms;
  --larghezza-max: 1320px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 150px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}

body.bloccato { overflow: hidden; }

h1, h2, h3, h4, p, dl, dd, ol, ul, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--teal); }
a:hover { color: var(--titolo); }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.su-scuro :focus-visible, .adesso :focus-visible { outline-color: var(--acqua); }

.visivamente-nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 22px;
  background: var(--marchio); color: var(--bianco); font-weight: 600; text-decoration: none;
}
.salta:focus { top: 12px; color: var(--bianco); }

.stretto { font-stretch: 75%; }
.largo { font-stretch: 125%; }

/* ---------- Testata ---------- */
/* Le fasce (testata, link rapidi, giorni, Seguici, informazioni) vanno a tutta larghezza;
   ricerca e programma restano nella colonna centrale (vedi "Schermi larghi" in fondo). */
.pagina { width: 100%; }
.strumenti, .corpo { max-width: var(--larghezza-max); margin-left: auto; margin-right: auto; }

/* Panoramica 3:1 su telefono e tablet (si vede intera); sul desktop 5:1 (vedi media query da 1100px) */
.testata__foto img { width: 100%; height: auto; aspect-ratio: 3 / 1; max-height: 360px; object-fit: cover; object-position: 50% 30%; }
.modo-app .testata__foto { display: none; }

.testata__fascia {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 16px;
  background: var(--marchio); color: var(--bianco);
}
.testata__logo { display: none; width: 40px; height: 38px; border-radius: 50%; background: var(--bianco); }
.testata__numero {
  font-stretch: 125%; font-weight: 900; font-size: 44px; line-height: 0.9;
  letter-spacing: -0.02em; color: var(--acqua);
}
.testata__titoli { flex: 1; min-width: 0; }
.testata__nome {
  font-stretch: 125%; font-weight: 800; font-size: 15px; line-height: 1.1;
  text-transform: uppercase; color: var(--bianco);
}
.testata__sede { margin-top: 5px; font-stretch: 75%; font-weight: 500; font-size: 14px; color: var(--acqua-chiaro); }

.pulsante-salvati {
  position: relative; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(127, 227, 232, 0.5); background: transparent; color: var(--bianco);
}
.pulsante-salvati[aria-pressed="true"] { background: var(--acqua); color: var(--navy); }
.pulsante-salvati__conteggio {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--arancio); color: var(--navy); font-size: 11px; font-weight: 800;
}

/* ---------- Striscia dei giorni ---------- */
.fissi { position: sticky; top: 0; z-index: 20; }
.giorni {
  background: var(--superficie); border-bottom: 1px solid var(--linea);
  padding: 10px 12px 12px;
}
.giorni__fila { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.giorni__fila::-webkit-scrollbar { display: none; }
.giorni__gruppo { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.giorni__etichetta { font-stretch: 75%; font-size: 12px; font-weight: 600; color: var(--secondario); padding-left: 2px; white-space: nowrap; }
.giorni__pulsanti { display: flex; gap: 4px; }
.giorni__divisore { width: 1px; height: 54px; background: var(--linea); margin: 0 2px; flex-shrink: 0; }

.giorno {
  width: 48px; height: 54px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); color: var(--titolo);
}
.giorno__sett { font-stretch: 75%; font-size: 12px; font-weight: 500; color: var(--secondario); }
.giorno__num { font-stretch: 125%; font-size: 19px; font-weight: 800; line-height: 1; }
.giorno[aria-pressed="true"] { background: var(--pieno); border-color: var(--pieno); color: var(--su-pieno); }
.giorno[aria-pressed="true"] .giorno__sett { color: var(--su-pieno-secondario); font-weight: 600; }
.giorno--oggi .giorno__sett { color: var(--teal); font-weight: 700; }

.giorno--ondemand {
  width: auto; min-width: 66px; margin-left: auto; padding: 0 8px; gap: 3px;
  border-style: dashed; border-color: var(--bordo-ondemand); background: var(--sfondo-tenue); color: var(--teal-scuro);
}
.giorno--ondemand .giorno__sett { font-weight: 600; color: inherit; font-size: 12px; line-height: 1.05; text-align: center; }

/* ---------- Ricerca, filtri, percorsi ---------- */
.strumenti { padding: 12px 12px 0; }
.barra { display: flex; gap: 8px; }
.campo-cerca {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 22px; border: 1px solid var(--linea); background: var(--superficie);
  color: var(--secondario); font-size: 15px; text-align: left;
}
.campo-cerca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulsante-filtri {
  position: relative; height: 44px; padding: 0 14px;
  display: flex; align-items: center; gap: 6px;
  border-radius: 22px; border: 1px solid var(--titolo); background: var(--superficie);
  color: var(--titolo); font-size: 15px; font-weight: 600;
}
.pulsante-filtri__conteggio {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pieno); color: var(--su-pieno); font-size: 12px; font-weight: 800;
}

.chip-fila { display: flex; gap: 6px; padding-top: 10px; overflow-x: auto; scrollbar-width: none; }
.chip-fila::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 18px; border: 1px solid var(--linea); background: var(--superficie);
  color: var(--testo); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.edizioni .chip[aria-current="true"] { background: var(--pieno); border-color: var(--pieno); color: var(--su-pieno); font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--pieno); border-color: var(--pieno); color: var(--su-pieno); font-weight: 600; }
.chip--piccolo { height: 34px; font-size: 13px; }
.quadretto { width: 9px; height: 9px; border-radius: 2px; background: var(--c, var(--titolo)); flex-shrink: 0; }
.chip[aria-pressed="true"] .quadretto { box-shadow: 0 0 0 1.5px var(--su-pieno); }

.filtro-persona {
  margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--testo-forte);
}
.filtro-persona button { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--titolo); background: var(--superficie); color: var(--titolo); font-weight: 600; }

/* ---------- Corpo ---------- */
.corpo { display: block; }
.lato:empty { display: none; }

/* ---------- Pannello Adesso ---------- */
.adesso {
  margin: 16px 12px 0;
  border-radius: 22px; border: 1px solid var(--bordo-acqua); box-shadow: var(--ombra-pannello);
  background: var(--marchio); color: var(--bianco); overflow: hidden;
}
.adesso__testa { padding: 16px 16px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.adesso__titolo {
  display: flex; align-items: center; gap: 8px;
  font-stretch: 75%; font-size: 17px; font-weight: 700; color: var(--acqua-chiaro);
}
.punto-vivo {
  width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0;
  background: var(--arancio); box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  .punto-vivo { animation: pulsa 2.4s ease-in-out infinite; }
  @keyframes pulsa { 50% { box-shadow: 0 0 0 7px rgba(243, 146, 0, 0.08); } }
}
.adesso__orologio { font-stretch: 125%; font-size: 30px; font-weight: 900; line-height: 0.9; letter-spacing: -0.02em; }

.adesso__principale { display: block; padding: 10px 16px 16px; color: inherit; text-decoration: none; }
.adesso__principale:hover { color: inherit; }
.adesso__tag { font-size: 13px; font-weight: 600; color: var(--acqua-chiaro); }
.adesso__nome { margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.22; letter-spacing: -0.005em; }
.adesso__sotto { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.adesso__chi { margin-top: 8px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.avanzamento { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-stretch: 75%; font-size: 15px; font-weight: 700; }
.avanzamento__barra { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.avanzamento__pieno { height: 100%; border-radius: 3px; background: var(--arancio); }
.adesso__resta { margin-top: 6px; font-size: 13px; color: var(--arancio-chiaro); text-align: right; }

.adesso__sezione { border-top: 1px solid rgba(127, 227, 232, 0.22); padding: 12px 16px 6px; }
.adesso__sezione h3, .adesso__seguito h3 { margin-bottom: 4px; font-stretch: 75%; font-size: 14px; font-weight: 600; color: var(--acqua-chiaro); }
.adesso__riga {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--bianco); text-decoration: none; width: 100%; text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0;
}
.adesso__riga:last-child { border-bottom: 0; }
.adesso__riga:hover { color: var(--bianco); }
.adesso__riga-tag { font-size: 12px; font-weight: 600; color: var(--sc, var(--acqua)); }
.adesso__riga-nome { font-size: 15px; font-weight: 600; line-height: 1.3; }
.adesso__riga-fino { grid-row: span 2; align-self: center; font-stretch: 75%; font-size: 13px; color: rgba(255, 255, 255, 0.72); text-align: right; white-space: nowrap; }
.adesso__riga-fino b { display: block; font-size: 15px; color: var(--bianco); }

.adesso__seguito { background: var(--navy-scuro); padding: 14px 16px 16px; }
.adesso__seguito .adesso__riga { grid-template-columns: 54px 1fr; border-bottom: 0; padding: 8px 0; }
.adesso__seguito-ora { font-stretch: 75%; font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--arancio-chiaro); }
.adesso__vuoto { padding: 10px 16px 16px; font-size: 15px; color: rgba(255, 255, 255, 0.85); }

.annuncio {
  margin: 16px 12px 0; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  border-radius: 18px; background: var(--marchio); color: var(--bianco);
}
.annuncio__numero { font-stretch: 125%; font-weight: 900; font-size: 34px; line-height: 1; color: var(--acqua); }
.annuncio p { font-size: 15px; line-height: 1.35; }
.annuncio a, .annuncio button { color: var(--acqua); font-weight: 600; background: none; border: 0; padding: 0; text-decoration: underline; }
/* Conto alla rovescia: la mascotte esce dal bordo inferiore del riquadro */
.annuncio--mascotte { position: relative; padding-right: 104px; min-height: 104px; overflow: visible; }
.annuncio--mascotte .mascotte { position: absolute; right: 8px; bottom: 0; width: 92px; }

/* ---------- Giornata (lista) ---------- */
.giornata {
  margin-top: 22px; padding: 20px 16px 28px;
  border-radius: 24px 24px 0 0; border-top: 1px solid var(--linea);
  background: var(--superficie);
}
.giornata__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.giornata__titolo { font-stretch: 112%; font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--titolo); }
.giornata__luogo { display: block; margin-top: 2px; font-stretch: 75%; font-size: 14px; font-weight: 500; color: var(--secondario); }

.interruttore { display: flex; padding: 3px; border-radius: 10px; background: var(--sfondo); }
.interruttore button {
  height: 34px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--secondario); font-size: 14px; font-weight: 500;
}
.interruttore button[aria-pressed="true"] { background: var(--superficie); color: var(--titolo); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 44, 102, 0.12); }

.mostra-concluse {
  margin-top: 14px; width: 100%; min-height: 44px; padding: 8px 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; border: 1px dashed var(--bordo-tratteggio); background: var(--sfondo-tenue);
  color: var(--teal-scuro); font-size: 14px; font-weight: 600;
}

.lista { margin-top: 6px; }
.riga {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 0 10px;
  padding: 16px 0; border-bottom: 1px solid var(--linea-tenue);
}
.riga:last-child { border-bottom: 0; }
.riga__inizio { font-stretch: 75%; font-size: 21px; font-weight: 700; line-height: 1; color: var(--titolo); }
.riga__fine { margin-top: 4px; font-stretch: 75%; font-size: 14px; color: var(--secondario); }
.riga__corpo { display: block; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; text-decoration: none; }
.riga__corpo:hover { color: inherit; }
.riga__corpo:hover .riga__titolo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.riga__tag { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; font-size: 13px; font-weight: 600; color: var(--c, var(--titolo)); }
.riga__titolo { display: block; margin-top: 5px; font-size: 16px; font-weight: 600; line-height: 1.32; color: var(--testo-forte); }
.riga__sotto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--secondario);
}
.riga__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.riga--conclusa .riga__inizio, .riga--conclusa .riga__titolo { color: var(--secondario); }
.riga--ondemand { grid-template-columns: minmax(0, 1fr) 44px; }

.etichetta-incorso {
  padding: 2px 8px; border-radius: 10px;
  background: var(--arancio-tenue); color: var(--arancio-testo); font-size: 12px; font-weight: 700;
}
.etichetta-noecm { padding: 2px 8px; border-radius: 10px; background: var(--sfondo); color: var(--secondario); font-size: 12px; font-weight: 600; }
.chip-area { padding: 3px 9px; border-radius: 10px; background: var(--chip); color: var(--teal-scuro); font-size: 12px; font-weight: 600; }
.modo { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--secondario); }

.stella {
  width: 44px; height: 44px; padding: 2px 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  border: 0; background: transparent; color: var(--stella-vuota);
}
.stella[aria-pressed="true"] { color: var(--stella-piena); }
.stella[aria-pressed="true"] svg { fill: var(--arancio); }

.vuoto { padding: 28px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--secondario); }
.mascotte { width: 115px; height: auto; }
.errore .mascotte { margin: 0 auto 12px; }
.vuoto p { max-width: 32ch; font-size: 15px; }
.vuoto button { height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--titolo); background: var(--superficie); color: var(--titolo); font-weight: 600; }

.caricamento { padding: 48px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--secondario); }
.caricamento__punto { width: 10px; height: 10px; border-radius: 5px; background: var(--teal); }
.errore { margin: 24px 12px; padding: 24px 16px; border-radius: 20px; background: var(--superficie); text-align: center; }
.errore h2 { font-size: 19px; color: var(--titolo); }
.errore p { margin-top: 8px; color: var(--secondario); }
.errore button { margin-top: 16px; height: 48px; padding: 0 24px; border-radius: 24px; border: 0; background: var(--pieno); color: var(--su-pieno); font-weight: 700; }

/* ---------- Griglia (quadro sinottico) ---------- */
.griglia {
  margin: 14px -16px 0; overflow: auto; overscroll-behavior: contain;
  max-height: calc(100vh - 176px); max-height: calc(100dvh - 176px);
  border-top: 1px solid var(--linea-tenue); border-bottom: 1px solid var(--linea-tenue);
}
.griglia__interno { position: relative; min-width: max-content; padding-bottom: 12px; }
.griglia__testa { display: flex; position: sticky; top: 0; z-index: 5; background: var(--superficie); padding: 6px 0 8px; box-shadow: 0 1px 0 var(--linea-tenue); }
.griglia__testa .griglia__orari { position: sticky; left: 0; z-index: 6; }
.griglia__corpo { display: flex; position: relative; }
.griglia__orari { position: sticky; left: 0; z-index: 2; width: 50px; flex-shrink: 0; background: var(--superficie); }
.griglia__orario { position: absolute; left: 8px; transform: translateY(-50%); font-stretch: 75%; font-size: 13px; font-weight: 600; color: var(--secondario); }
.griglia__intestazione { width: 166px; margin-right: 6px; flex-shrink: 0; border-top: 4px solid var(--c); padding-top: 6px; }
.griglia__intestazione p { font-size: 14px; font-weight: 700; color: var(--testo-forte); }
.griglia__intestazione span { font-stretch: 75%; font-size: 13px; color: var(--secondario); }
.griglia__colonna {
  position: relative; width: 166px; margin-right: 6px; flex-shrink: 0;
  background-image: repeating-linear-gradient(to bottom, var(--linea) 0, var(--linea) 1px, transparent 1px, transparent 72px);
}
.blocco {
  position: absolute; left: 0; right: 0; overflow: hidden;
  padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(20, 44, 102, 0.06);
  background: var(--t, var(--t-plenaria)); color: inherit; text-align: left; text-decoration: none;
}
.blocco__ora { display: block; font-stretch: 75%; font-size: 13px; font-weight: 700; color: var(--c); }
.blocco__titolo { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.27; color: var(--testo-forte); }
.blocco--incorso { border: 2px solid var(--arancio); }
.blocco--incorso .blocco__ora { color: var(--arancio-testo); }
.blocco--conclusa { opacity: 0.55; }
.blocco--escluso { opacity: 0.25; pointer-events: none; }
.linea-ora { position: absolute; left: 0; right: 0; height: 0; z-index: 2; pointer-events: none; }
.linea-ora::after { content: ""; position: absolute; left: 50px; right: 0; top: -1px; height: 2px; background: var(--arancio); }
.linea-ora__etichetta {
  position: sticky; left: 2px; display: inline-block; transform: translateY(-50%); margin-left: 2px;
  padding: 2px 5px; border-radius: 8px; background: var(--arancio); color: var(--navy);
  font-stretch: 75%; font-size: 13px; font-weight: 800; z-index: 4;
}
.griglia__nota { margin-top: 10px; font-size: 13px; color: var(--secondario); }

/* ---------- On demand ---------- */
.ondemand__intro { margin-top: 8px; font-size: 15px; color: var(--secondario); }
.ondemand__sezione { margin-top: 22px; }
.ondemand__sezione h3 { font-stretch: 112%; font-size: 17px; font-weight: 800; color: var(--titolo); }
.collegamento-forte {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 44px; padding: 0 18px;
  border-radius: 22px; background: var(--pieno); color: var(--su-pieno); font-weight: 700; text-decoration: none;
}
.collegamento-forte:hover { color: var(--su-pieno); background: var(--pieno-hover); }

/* ---------- Informazioni ---------- */
.informazioni { background: var(--superficie); border-top: 1px solid var(--linea); padding: 8px 16px 40px; }
.informazioni:empty { display: none; }
.informazioni details { border-bottom: 1px solid var(--linea-tenue); }
.informazioni summary {
  min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; color: var(--titolo);
}
.informazioni summary::-webkit-details-marker { display: none; }
.informazioni summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--teal); }
.informazioni details[open] summary::after { content: "–"; }
.informazioni__testo { padding-bottom: 18px; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--testo); }
.informazioni__testo p + p, .informazioni__testo ul { margin-top: 10px; }
.informazioni__testo ul { padding-left: 1.2em; list-style: disc; }
.informazioni__piede { margin-top: 18px; font-size: 13px; color: var(--secondario); }
.informazioni__pdf { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-weight: 600; }

/* ---------- Sovrapposti: ricerca, filtri, dettaglio ---------- */
.schermo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: var(--sfondo); overflow: hidden;
}
.schermo__testa { background: var(--superficie); border-bottom: 1px solid var(--linea); padding: 14px 12px 12px; padding-top: max(14px, env(safe-area-inset-top)); }
.schermo__corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.cerca-campo {
  flex: 1; min-width: 0; height: 44px; padding: 0 6px 0 14px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 22px; border: 2px solid var(--teal); background: var(--superficie); color: var(--teal);
}
.cerca-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--testo-forte); }
.cerca-campo input::-webkit-search-cancel-button { display: none; }
.cerca-campo:focus-within { box-shadow: 0 0 0 3px rgba(10, 116, 128, 0.2); }
.tondo {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 16px; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--teal-scuro);
}
.pulsante-testo { min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--titolo); font-size: 15px; font-weight: 600; }

.risultati { padding: 14px 12px 32px; }
.risultati h2 { margin: 18px 0 8px; font-stretch: 75%; font-size: 15px; font-weight: 600; color: var(--secondario); }
.risultati h2:first-child { margin-top: 0; }
.scheda-persona {
  width: 100%; margin-bottom: 8px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px; border: 1px solid var(--linea); background: var(--superficie); text-align: left;
}
.iniziali {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--marchio); color: var(--acqua); font-stretch: 125%; font-size: 15px; font-weight: 800;
}
.iniziali--chiaro { width: 40px; height: 40px; background: var(--chip); color: var(--teal-scuro); font-size: 13px; }
.scheda-persona__nome { display: block; font-size: 16px; font-weight: 700; color: var(--testo-forte); }
.scheda-persona__dati { display: block; margin-top: 2px; font-size: 14px; color: var(--secondario); }
.gruppo-giorno { margin-top: 14px; }
.gruppo-giorno h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-stretch: 112%; font-size: 16px; font-weight: 800; color: var(--titolo); }
.gruppo-giorno h3 span { font-stretch: 75%; font-size: 13px; font-weight: 500; color: var(--secondario); }
.scatola { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 0 14px; }
.risultato {
  width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 10px;
  padding: 13px 0; border: 0; border-bottom: 1px solid var(--linea-tenue); background: none; text-align: left;
  color: inherit; text-decoration: none;
}
.scatola > .risultato:last-child { border-bottom: 0; }
.risultato--senza-ora { grid-template-columns: minmax(0, 1fr); }
.risultato__ora { font-stretch: 75%; font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--titolo); }
.risultato__motivo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 5px; font-size: 13px; color: var(--secondario);
}
mark { background: var(--evidenzia); color: inherit; border-radius: 3px; padding: 0 2px; }

.velo { position: fixed; inset: 0; z-index: 50; background: rgba(11, 26, 61, 0.55); cursor: pointer; }
.foglio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: calc(100% - 48px); display: flex; flex-direction: column;
  border-radius: 24px 24px 0 0; background: var(--superficie); box-shadow: var(--ombra-foglio);
}
.foglio__maniglia { display: flex; justify-content: center; padding-top: 8px; }
.foglio__maniglia span { width: 40px; height: 5px; border-radius: 3px; background: var(--linea); }
.foglio__testa { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; }
.foglio__testa h2 { font-stretch: 112%; font-size: 20px; font-weight: 800; color: var(--titolo); }
.foglio__corpo { flex: 1; overflow-y: auto; padding: 0 16px 16px; overscroll-behavior: contain; }
.foglio__piede { padding: 12px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea-tenue); }
.foglio fieldset { border: 0; padding: 18px 0 0; min-width: 0; }
.foglio legend { padding: 0; font-size: 15px; font-weight: 700; color: var(--testo-forte); }
.foglio .chip-gruppo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.modi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.modo-scelta {
  min-height: 64px; padding: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 14px; border: 1px solid var(--linea); background: var(--superficie);
  color: var(--testo); font-size: 13px; font-weight: 600; text-align: center;
}
.modo-scelta[aria-pressed="true"] { border: 2px solid var(--teal); background: var(--chip); color: var(--teal-scuro); font-weight: 700; }
.interruttore-ecm { margin-top: 20px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.interruttore-ecm strong { display: block; font-size: 15px; color: var(--testo-forte); }
.interruttore-ecm small { display: block; margin-top: 2px; font-size: 13px; color: var(--secondario); }
.interruttore-ecm input { width: 50px; height: 30px; flex-shrink: 0; accent-color: var(--teal); }
.pulsante-pieno {
  width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 26px;
  background: var(--pieno); color: var(--su-pieno); font-size: 16px; font-weight: 700;
}
.pulsante-pieno:hover { background: var(--pieno-hover); }

/* Dettaglio */
.dettaglio { background: var(--superficie); }
.dettaglio__barra { display: flex; align-items: center; justify-content: space-between; padding: 8px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--linea-tenue); background: var(--superficie); }
.dettaglio__indietro { min-height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 8px; border: 0; background: none; color: var(--titolo); font-size: 15px; font-weight: 600; }
.icona-pulsante { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--titolo); }
.banda-incorso { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--marchio); color: var(--bianco); font-size: 14px; font-weight: 600; }
.banda-incorso .avanzamento__barra { flex: 0 0 96px; }
.dettaglio__contenuto { padding: 20px 16px 40px; max-width: 760px; }
.dettaglio__tag { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--c); }
.dettaglio__titolo { margin-top: 8px; font-size: 26px; font-weight: 800; line-height: 1.18; letter-spacing: -0.01em; color: var(--titolo); }
.dettaglio__sottotitolo { margin-top: 8px; font-size: 17px; line-height: 1.4; color: var(--testo); }
.dettaglio__punti { margin-top: 12px; display: grid; gap: 6px; font-size: 15px; color: var(--testo); }
.dettaglio__punti li { position: relative; padding-left: 16px; }
.dettaglio__punti li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 2px; background: var(--teal); }
.fatti { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.fatti dt { font-stretch: 75%; font-size: 13px; font-weight: 600; color: var(--secondario); }
.fatti dd { margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.fatti dd .chip-area { display: inline-block; margin: 2px 4px 0 0; }
.edizioni { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.edizioni button { min-height: 36px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--linea); background: var(--superficie); font-size: 13px; font-weight: 600; text-align: left; }
.edizioni button[aria-pressed="true"] { border-color: var(--pieno); background: var(--pieno); color: var(--su-pieno); }
.azioni { display: flex; gap: 8px; margin-top: 20px; }
.azioni .pulsante-pieno { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; }
.azioni .pulsante-pieno[aria-pressed="true"] { background: var(--arancio-tenue); color: var(--arancio-testo); }
.pulsante-tondo {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--titolo); background: var(--superficie); color: var(--titolo);
}
.blocco-dettaglio { margin-top: 26px; }
.blocco-dettaglio h2 { font-stretch: 112%; font-size: 17px; font-weight: 800; color: var(--titolo); }
.persone { margin-top: 8px; display: grid; gap: 2px; }
.persone__ruolo { margin-top: 12px; font-stretch: 75%; font-size: 13px; font-weight: 600; color: var(--secondario); }
.persona {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px;
  padding: 4px 0; border: 0; background: none; text-align: left;
}
.persona__nome { flex: 1; font-size: 16px; font-weight: 600; color: var(--testo-forte); }
.persona__vai { font-size: 13px; color: var(--teal); font-weight: 600; }
.scaletta { margin-top: 12px; }
.scaletta li { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); gap: 0 8px; min-height: 52px; }
.scaletta__ora { font-stretch: 75%; font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--secondario); }
.scaletta__binario { display: flex; flex-direction: column; align-items: center; }
.scaletta__punto { width: 12px; height: 12px; margin-top: 4px; border-radius: 6px; border: 2px solid var(--teal); background: var(--superficie); }
.scaletta__linea { flex: 1; width: 2px; margin: 3px 0; background: var(--linea-tenue); }
.scaletta li:last-child .scaletta__linea { display: none; }
.scaletta__testo { padding-bottom: 16px; }
.scaletta__titolo { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--testo-forte); }
.scaletta__relatori { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--teal); }
.scaletta li.fatto .scaletta__punto { background: var(--teal); }
.scaletta li.fatto .scaletta__linea { background: var(--teal); }
.scaletta li.ora .scaletta__punto { border-color: var(--arancio); background: var(--arancio); }
.scaletta li.ora .scaletta__ora { color: var(--arancio-testo); }
.approfondimento { margin-top: 22px; border-radius: 16px; border: 1px solid var(--linea); }
.approfondimento summary { min-height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-weight: 700; color: var(--titolo); }
.approfondimento summary::-webkit-details-marker { display: none; }
.approfondimento summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--teal); }
.approfondimento[open] summary::after { content: "–"; }
.approfondimento__testo { padding: 0 16px 16px; font-size: 15px; line-height: 1.55; }
.approfondimento__testo p + p, .approfondimento__testo h3 { margin-top: 10px; }
.approfondimento__testo h3 { font-size: 15px; color: var(--titolo); }
.approfondimento__testo ul { margin-top: 6px; padding-left: 1.2em; list-style: disc; display: grid; gap: 4px; }
.box-ecm { margin-top: 22px; padding: 16px; border-radius: 16px; background: var(--sfondo); border: 1px solid var(--linea); }
.box-ecm h2 { font-size: 15px; font-weight: 700; color: var(--titolo); }
.box-ecm p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--testo-box); }

.stanze { margin-top: 10px; }

/* Colonna sinistra su desktop: Il mio programma */
.solo-desktop { display: none; }
.salvati-lato { margin-top: 22px; padding: 18px 16px; border-radius: 22px; border: 1px solid var(--linea); background: var(--superficie); }
.salvati-lato h2 { display: flex; align-items: center; gap: 8px; font-stretch: 112%; font-size: 17px; font-weight: 800; color: var(--titolo); }
.salvati-lato h2 svg { color: var(--arancio); }
.salvati-lato__voce { display: block; padding: 10px 0; border-bottom: 1px solid var(--linea-tenue); color: inherit; text-decoration: none; }
.salvati-lato__voce:hover .salvati-lato__titolo { text-decoration: underline; }
.salvati-lato__quando { display: block; font-stretch: 75%; font-size: 14px; font-weight: 700; color: var(--c, var(--titolo)); }
.salvati-lato__titolo { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--testo-forte); }
.salvati-lato__vuoto { margin-top: 10px; font-size: 15px; color: var(--secondario); }

/* Bersagli tocco di almeno 44px anche dove il disegno è più basso */
.chip, .interruttore button, .tondo, .filtro-persona button, .edizioni .chip { position: relative; }
.chip::after, .interruttore button::after, .tondo::after, .filtro-persona button::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
.tondo::after { left: 50%; width: 44px; transform: translate(-50%, -50%); }
.chip-fila { padding-bottom: 4px; }

/* Avviso (toast) */
.avviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 80;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 22px; background: var(--marchio); color: var(--bianco);
  font-size: 15px; font-weight: 600; box-shadow: 0 8px 24px rgba(11, 26, 61, 0.3);
  transition: opacity var(--t-veloce) ease, transform var(--t-veloce) ease;
}
.avviso.visibile { opacity: 1; transform: translate(-50%, 0); }

.torna-adesso {
  position: fixed; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30;
  min-height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 8px;
  border-radius: 22px; border: 1px solid var(--bordo-acqua); background: var(--marchio); color: var(--bianco);
  font-size: 14px; font-weight: 700; box-shadow: 0 8px 24px rgba(11, 26, 61, 0.3);
}
.torna-adesso:not(.visibile) { opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.96); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .testata__logo { display: block; }
  .strumenti { padding: 14px 16px 0; }
  .giorni { padding: 10px 16px 12px; }
  .adesso { margin: 18px 16px 0; }
  .annuncio { margin: 18px 16px 0; }
  .giornata { margin: 22px 16px 0; padding: 22px 24px 32px; border-radius: 24px; border: 1px solid var(--linea); }
  .griglia { margin: 14px -24px 0; padding: 0 24px; }
  .foglio { left: auto; top: 0; width: 400px; max-height: none; border-radius: 0; box-shadow: -8px 0 30px rgba(11, 26, 61, 0.25); }
  .foglio__maniglia { display: none; }
  .schermo .risultati { max-width: 760px; margin: 0 auto; }
  .schermo .schermo__testa > * { max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* ---------- Desktop: due colonne ---------- */
@media (min-width: 1100px) {
  .testata__foto img { aspect-ratio: 5 / 1; object-position: 50% 80%; }
  .testata__fascia { padding: 16px 24px; }
  .giorni, .strumenti { padding-left: 24px; padding-right: 24px; }
  .corpo { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0 24px; padding: 0 24px; align-items: start; }
  .lato { position: sticky; top: 150px; max-height: calc(100vh - 164px); overflow-y: auto; padding-bottom: 24px; }
  .lato:empty { display: block; }
  .lato .adesso, .lato .annuncio { margin: 22px 0 0; }
  .solo-desktop { display: block; }
  .principale .giornata { margin: 22px 0 32px; }
  .griglia__interno { min-width: 100%; }
  .griglia__intestazione, .griglia__colonna { flex: 1 1 0; width: auto; min-width: 132px; }
  .dettaglio-pannello { left: auto; width: 520px; box-shadow: -8px 0 30px rgba(11, 26, 61, 0.25); }
  .informazioni { padding: 8px 24px 48px; }
}

/* =========================================================
   Movimento: micro-animazioni brevi e morbide.
   Solo opacità e trasformazioni; tutto si spegne con "Riduci movimento"
   (regola prefers-reduced-motion più sopra e controlli in app.js).
   ========================================================= */
:root {
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);           /* parte svelta, arriva morbida */
  --curva-pagina: cubic-bezier(0.32, 0.72, 0, 1);    /* come le pagine di iOS */
  --curva-uscita: cubic-bezier(0.4, 0, 1, 1);
  --t-tocco: 140ms;
  --t-breve: 220ms;
  --t-pagina: 320ms;
}

/* Al tocco: leggero abbassamento e ritorno */
.chip, .giorno, .pulsante-filtri, .campo-cerca, .stella, .pulsante-salvati, .pulsante-pieno, .pulsante-tondo,
.modo-scelta, .interruttore button, .mostra-concluse, .icona-pulsante, .dettaglio__indietro, .persona,
.scheda-persona, .tondo, .collegamento-forte, .errore button, .vuoto button, .pulsante-testo,
.riga__corpo, .risultato, .adesso__riga, .adesso__principale, .blocco, .salvati-lato__voce, .annuncio button,
.barra-link__iscriviti, .barra-link__social, .seguici__iscriviti, .seguici__social {
  transition: transform var(--t-tocco) var(--curva), background-color var(--t-breve) var(--curva),
    color var(--t-breve) var(--curva), border-color var(--t-breve) var(--curva), box-shadow var(--t-breve) var(--curva),
    opacity var(--t-breve) var(--curva);
}
.chip:active, .giorno:active, .pulsante-filtri:active, .campo-cerca:active, .stella:active, .pulsante-salvati:active,
.pulsante-pieno:active, .pulsante-tondo:active, .modo-scelta:active, .interruttore button:active, .mostra-concluse:active,
.icona-pulsante:active, .dettaglio__indietro:active, .tondo:active, .collegamento-forte:active, .errore button:active,
.vuoto button:active, .pulsante-testo:active, .annuncio button:active, .persona:active, .scheda-persona:active,
.barra-link__iscriviti:active, .barra-link__social:active, .seguici__iscriviti:active, .seguici__social:active {
  transform: scale(0.96);
  transition-duration: 60ms;
}
.riga__corpo:active, .risultato:active, .adesso__riga:active, .adesso__principale:active, .salvati-lato__voce:active {
  transform: scale(0.985);
  transition-duration: 60ms;
}
.blocco:active { transform: scale(0.97); transition-duration: 60ms; }
.giorno:hover:not([aria-pressed="true"]), .chip:hover:not([aria-pressed="true"]) { border-color: var(--bordo-hover); }

@keyframes salta { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 65% { transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes svuota { 0% { transform: scale(1); } 40% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes scelta { from { transform: scale(0.93); } to { transform: scale(1); } }
@keyframes sali { from { opacity: 0; transform: translateY(8px); } }
@keyframes dissolvi-in { from { opacity: 0; } }
@keyframes dissolvi-out { to { opacity: 0; } }
@keyframes da-destra { from { opacity: 0; transform: translateX(22px); } }
@keyframes da-sinistra { from { opacity: 0; transform: translateX(-22px); } }
@keyframes entra-destra { from { transform: translateX(100%); } }
@keyframes esci-destra { to { transform: translateX(100%); } }
@keyframes entra-alto { from { opacity: 0; transform: translateY(-14px); } }
@keyframes esci-alto { to { opacity: 0; transform: translateY(-10px); } }
@keyframes entra-basso { from { transform: translateY(100%); } }
@keyframes esci-basso { to { transform: translateY(100%); } }

/* Stellina e numerino della testata */
.salta-icona svg { animation: salta 420ms var(--curva); }
.svuota-icona svg { animation: svuota 260ms var(--curva); }
.pulsante-salvati__conteggio.pop { animation: pop 380ms var(--curva); }
.chip--scelta, .modo-scelta.chip--scelta { animation: scelta var(--t-breve) var(--curva); }

/* Cambio giorno, cambio vista e filtri */
.giornata.entra-avanti > :not(.giornata__testa) { animation: da-destra var(--t-pagina) var(--curva) both; }
.giornata.entra-indietro > :not(.giornata__testa) { animation: da-sinistra var(--t-pagina) var(--curva) both; }
.giornata.entra-avanti .giornata__titolo, .giornata.entra-indietro .giornata__titolo { animation: dissolvi-in var(--t-breve) var(--curva); }
.giornata.entra-vista > :not(.giornata__testa) { animation: dissolvi-in var(--t-breve) var(--curva) both; }
.riga.entra-riga { animation: sali var(--t-breve) var(--curva) both; animation-delay: calc(var(--i, 0) * 22ms); }

/* Righe che entrano nello schermo la prima volta */
.riga.rivela { opacity: 0; transform: translateY(10px); transition: opacity 280ms var(--curva), transform 280ms var(--curva); }
.riga.rivela.rivelata { opacity: 1; transform: none; }

/* Striscia dei giorni fissa in alto: ombra leggera */
.fissi { transition: box-shadow var(--t-breve) var(--curva); }
.fissi--attiva { box-shadow: 0 6px 18px rgba(20, 44, 102, 0.1); }
.testata__foto { display: block; overflow: hidden; }
.testata__foto img { will-change: transform; }

/* Pannello Adesso: cambio della sessione principale */
.adesso__principale.cambio { animation: dissolvi-in 420ms var(--curva); }

/* Strati sovrapposti: entrata e uscita */
[data-tipo="dettaglio"].entra, [data-tipo="salvati"].entra { animation: entra-destra var(--t-pagina) var(--curva-pagina) both; }
[data-tipo="dettaglio"].esce, [data-tipo="salvati"].esce { animation: esci-destra 260ms var(--curva-uscita) both; }
[data-tipo="ricerca"].entra { animation: entra-alto var(--t-breve) var(--curva) both; }
[data-tipo="ricerca"].esce { animation: esci-alto 180ms var(--curva-uscita) both; }
[data-tipo="velo"].entra, [data-tipo="velo-pannello"].entra { animation: dissolvi-in 260ms var(--curva) both; }
[data-tipo="velo"].esce, [data-tipo="velo-pannello"].esce { animation: dissolvi-out 220ms var(--curva-uscita) both; }
[data-tipo="filtri"].entra { animation: entra-basso var(--t-pagina) var(--curva-pagina) both; }
[data-tipo="filtri"].esce { animation: esci-basso 240ms var(--curva-uscita) both; }
#uscite > * { pointer-events: none; }

/* Risultati di ricerca in cascata quando compaiono */
.cascata .scheda-persona, .cascata .gruppo-giorno, .cascata > h2 { animation: sali var(--t-breve) var(--curva) both; animation-delay: calc(var(--i, 6) * 30ms); }

/* Toast e "Torna ad adesso" */
.torna-adesso { transition: opacity var(--t-breve) var(--curva), transform var(--t-breve) var(--curva), visibility 0s linear 0s; }
.torna-adesso:not(.visibile) { transition: opacity var(--t-breve) var(--curva), transform var(--t-breve) var(--curva), visibility 0s linear var(--t-breve); }
.torna-adesso.visibile:active { transform: scale(0.96); }

@media (min-width: 768px) {
  [data-tipo="filtri"].entra { animation-name: entra-destra; }
  [data-tipo="filtri"].esce { animation-name: esci-destra; }
}

/* =========================================================
   Tema scuro: stessi ruoli, colori notturni.
   data-tema sul <html> lo imposta lo script nella <head> (prima del primo disegno)
   e poi app.js: "dispositivo" segue prefers-color-scheme.
   ========================================================= */
:root[data-tema="scuro"] {
  color-scheme: dark;

  --sfondo: #0A1430;
  --sfondo-tenue: #0E1A3A;
  --superficie: #111D3D;
  --titolo: #E6EEF9;
  --testo: #D3DDEA;
  --testo-forte: #EEF3FA;
  --secondario: #9AAABD;
  --linea: #263661;
  --linea-tenue: #1C2A50;
  --chip: #12384A;
  --teal: #5CCAD2;
  --teal-scuro: #8FE0E5;
  --pieno: #7FE3E8;
  --pieno-hover: #A9E9EC;
  --su-pieno: #0A1430;
  --su-pieno-secondario: #1E4A78;
  --marchio: #142C66;
  --arancio-tenue: #4A3412;
  --arancio-testo: #F7C46B;
  --stella-vuota: #8C9DB3;
  --stella-piena: #F39200;
  --evidenzia: #6B4A12;
  --testo-box: #C3CFDF;
  --bordo-tratteggio: #2F4470;
  --bordo-ondemand: #3A5A80;
  --bordo-hover: #3F5C88;

  --p-plenaria: #9DB4F0;
  --p-discute: #6FD3DA;
  --p-academy: #9BD67C;
  --p-caselab: #93B6F7;
  --p-village: #E4BC6E;
  --p-elearning: #A4B3C6;
  --p-videopillole: #A4B3C6;
  --t-plenaria: #1B2B58;
  --t-discute: #0F3440;
  --t-academy: #1A3423;
  --t-caselab: #172D58;
  --t-village: #392E17;

  --ombra-pannello: 0 0 0 5px rgba(95, 224, 230, 0.12), 0 16px 34px rgba(0, 0, 0, 0.45);
  --ombra-foglio: 0 -8px 30px rgba(0, 0, 0, 0.5);
}
:root[data-tema="scuro"] .testata__foto img { filter: brightness(0.82) saturate(0.95); }
:root[data-tema="scuro"] .fissi--attiva { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
:root[data-tema="scuro"] .blocco { border-color: rgba(255, 255, 255, 0.06); }
:root[data-tema="scuro"] .interruttore button[aria-pressed="true"] { background: var(--linea); }

/* Passaggio morbido tra i temi (solo durante il cambio) */
.cambio-tema, .cambio-tema *, .cambio-tema *::before, .cambio-tema *::after {
  transition: background-color 320ms var(--curva), color 320ms var(--curva), border-color 320ms var(--curva), fill 320ms var(--curva) !important;
}

/* Selettore del tema nella testata */
.testata__azioni { position: relative; z-index: 30; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pulsante-tema {
  width: 44px; height: 44px; border-radius: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(127, 227, 232, 0.5); background: transparent; color: var(--bianco);
  transition: transform var(--t-tocco) var(--curva), background-color var(--t-breve) var(--curva);
}
.pulsante-tema[aria-expanded="true"] { background: rgba(127, 227, 232, 0.16); }
.pulsante-tema:active { transform: scale(0.96); transition-duration: 60ms; }
.menu-tema {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 232px; padding: 6px;
  border-radius: 16px; border: 1px solid var(--linea); background: var(--superficie);
  box-shadow: 0 14px 34px rgba(11, 26, 61, 0.22);
  animation: entra-alto var(--t-breve) var(--curva);
  transform-origin: top right;
}
:root[data-tema="scuro"] .menu-tema { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.menu-tema__titolo { padding: 8px 10px 6px; font-stretch: 75%; font-size: 13px; font-weight: 600; color: var(--secondario); }
.menu-tema button {
  width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  background: transparent; color: var(--testo-forte); font-size: 15px; font-weight: 500; text-align: left;
  transition: background-color var(--t-breve) var(--curva);
}
.menu-tema button:hover { background: var(--sfondo); }
.menu-tema button[aria-checked="true"] { background: var(--chip); color: var(--teal-scuro); font-weight: 700; }
.menu-tema button span { flex: 1; }

@media (max-width: 400px) {
  .testata__fascia { gap: 10px; }
  .testata__numero { font-size: 36px; }
  .testata__nome { font-size: 13px; }
}

/* =========================================================
   Link rapidi: riga sotto la testata (resta fissa con i giorni) e blocco "Seguici"
   ========================================================= */
.barra-link {
  display: flex; align-items: center; gap: 8px;
  min-height: 63px; padding: 9px 16px; background: var(--marchio);
  border-top: 1px solid rgba(127, 227, 232, 0.22);
}
.barra-link:empty { display: none; }
.barra-link__marchio { display: none; flex: 1; min-width: 0; align-items: center; gap: 10px; color: var(--bianco); }
.barra-link__numero { font-stretch: 125%; font-weight: 900; font-size: 22px; line-height: 1; color: var(--acqua); }
.barra-link__nome { font-stretch: 125%; font-weight: 800; font-size: 10px; line-height: 1.15; text-transform: uppercase; }
.barra-link__iscriviti {
  flex: 1; height: 44px; padding: 0 18px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--acqua); color: var(--navy); font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.barra-link__iscriviti:hover { color: var(--navy); background: var(--acqua-chiaro); }
.barra-link__social {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(127, 227, 232, 0.5); color: var(--bianco);
}
.barra-link__social:hover { color: var(--bianco); background: rgba(127, 227, 232, 0.16); }
.barra-link :focus-visible { outline-color: var(--acqua); }

/* Quando la testata esce dallo schermo la riga diventa compatta, con il marchio a sinistra */
/* Stessa altezza nei due stati: il contenuto sotto non salta quando la riga diventa compatta */
.fissi--attiva .barra-link { padding-left: 14px; padding-right: 12px; border-top-color: transparent; }
.fissi--attiva .barra-link__marchio { display: flex; animation: dissolvi-in var(--t-breve) var(--curva); }
.fissi--attiva .barra-link__iscriviti { flex: 0 0 auto; padding: 0 16px; }
.fissi--attiva .barra-link__esteso { display: none; }

.seguici { background: var(--marchio); color: var(--bianco); padding: 22px 16px 24px; }
.seguici:empty { display: none; }
.seguici__titolo { font-stretch: 112%; font-size: 19px; font-weight: 800; }
.seguici__testo { margin-top: 6px; max-width: 60ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.seguici__link { display: grid; gap: 10px; margin-top: 16px; max-width: 520px; }
.seguici__iscriviti {
  min-height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--acqua); color: var(--navy); font-size: 16px; font-weight: 800; text-decoration: none;
}
.seguici__iscriviti:hover { color: var(--navy); background: var(--acqua-chiaro); }
.seguici__social {
  min-height: 52px; padding: 0 16px; border-radius: 26px; display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(127, 227, 232, 0.5); color: var(--bianco); text-decoration: none;
}
.seguici__social:hover { color: var(--bianco); background: rgba(127, 227, 232, 0.12); }
.seguici__voce { flex: 1; }
.seguici__nome { display: block; font-size: 15px; font-weight: 700; }
.seguici__profilo { display: block; font-size: 13px; color: var(--acqua-chiaro); }
.seguici :focus-visible { outline-color: var(--acqua); }

@media (min-width: 768px) {
  .barra-link { padding-left: 16px; padding-right: 16px; }
  .barra-link__iscriviti { flex: 0 0 auto; margin-left: auto; }
  .seguici { padding: 26px 24px 28px; }
  .seguici__link { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 760px; }
}
@media (min-width: 1100px) {
  .barra-link { padding-left: 24px; padding-right: 24px; }
  .fissi--attiva .barra-link { padding-left: 24px; padding-right: 24px; }
}

/* =========================================================
   Schermi larghi (oltre la colonna di 1320px): sfondi delle fasce a tutta larghezza,
   contenuto allineato alla colonna centrale.
   ========================================================= */
@media (min-width: 1320px) {
  :root { --rientro-colonna: calc((100% - var(--larghezza-max)) / 2 + 24px); }
  .testata__fascia, .barra-link, .fissi--attiva .barra-link, .giorni, .seguici, .informazioni {
    padding-left: var(--rientro-colonna);
    padding-right: var(--rientro-colonna);
  }
  /* Sugli schermi molto larghi la testata può crescere fino a 480px (resta 5:1 fino a 2400px) */
  .testata__foto img { max-height: min(33.34vw, 480px); }
}