@import url('/css/fonts.css');

/* ══ Token — colori campionati dalla locandina ══════════════════════════ */
:root{
  --verde:#BFED33;          /* fondo locandina, blocchi grafici */
  --verde-scuro:#A5D019;
  --verde-tenue:#EEF9C8;
  --magenta:#EC2894;        /* «Silenzio, si va in scena!», CTA */
  --magenta-scuro:#C71778;
  --magenta-tenue:#FDE4F1;
  --nero:#000000;
  --inchiostro:#14161A;
  --grigio-600:#5B6068;
  --grigio-400:#8E949C;
  --grigio-300:#C9CDD3;
  --grigio-200:#E4E7EA;
  --grigio-100:#F2F3F5;
  --bianco:#FFFFFF;
  --ok:#1F9D55; --ok-tenue:#E4F5EA;
  --warn:#B87503; --warn-tenue:#FDF1DC;
  --err:#C5221F; --err-tenue:#FBE4E3;

  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mano:'Gochi Hand','Poppins',cursive;

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;
  --ombra:0 1px 2px rgba(20,22,26,.06),0 8px 24px -12px rgba(20,22,26,.18);
  --ombra-alta:0 2px 4px rgba(20,22,26,.06),0 20px 48px -20px rgba(20,22,26,.28);
  --bordo:1px solid var(--grigio-200);
  --largh:1160px;
  --nav-h:64px;
}

/* ══ Reset ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); font-size:16px; line-height:1.6; color:var(--inchiostro);
  background:var(--grigio-100); -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; flex-direction:column;
}
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--magenta-scuro); text-underline-offset:3px}
a:hover{color:var(--magenta)}
h1,h2,h3,h4{line-height:1.12; font-weight:800; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(2rem,6vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.2rem)}
h3{font-size:1.2rem; font-weight:700; letter-spacing:-.01em}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--magenta); outline-offset:2px; border-radius:4px}
::selection{background:var(--verde); color:var(--nero)}

.contenitore{width:100%; max-width:var(--largh); margin-inline:auto; padding-inline:20px}
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.salta:focus{position:fixed;top:8px;left:8px;z-index:99;background:var(--nero);color:#fff;padding:10px 16px;border-radius:8px;clip-path:none;width:auto;height:auto}

/* ══ Logo ═══════════════════════════════════════════════════════════════
   L'SVG è applicato come maschera: il colore è quello di `currentColor`,
   quindi basta cambiare `color` per ricolorare il logo.                    */
.logo{display:inline-block; background-color:currentColor; flex-shrink:0;
  -webkit-mask:var(--src) no-repeat center/contain; mask:var(--src) no-repeat center/contain;
  aspect-ratio:2560/3895}
.logo--completo{--src:url('/img/logo.svg')}
.logo--simbolo {--src:url('/img/logo-simbolo.svg')}
.logo--nero{color:var(--nero)} .logo--bianco{color:var(--bianco)}
.logo--verde{color:var(--verde)} .logo--magenta{color:var(--magenta)}

/* ══ Bottoni ════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:700; font-size:1rem; line-height:1; text-decoration:none; cursor:pointer;
  padding:.92em 1.6em; border-radius:999px; border:2px solid transparent;
  transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--magenta); color:#fff}
.btn--primario:hover{background:var(--magenta-scuro); color:#fff}
.btn--nero{background:var(--nero); color:#fff}
.btn--nero:hover{background:var(--inchiostro); color:var(--verde)}
.btn--verde{background:var(--verde); color:var(--nero)}
.btn--verde:hover{background:var(--verde-scuro); color:var(--nero)}
.btn--contorno{background:transparent; border-color:currentColor; color:var(--inchiostro)}
.btn--contorno:hover{background:var(--nero); border-color:var(--nero); color:#fff}
.btn--chiaro{background:var(--bianco); color:var(--inchiostro); border-color:var(--grigio-300)}
.btn--chiaro:hover{border-color:var(--nero)}
.btn--pericolo{background:var(--err-tenue); color:var(--err); border-color:transparent}
.btn--pericolo:hover{background:var(--err); color:#fff}
.btn--piccolo{padding:.6em 1.1em; font-size:.875rem}
.btn--mini{padding:.42em .8em; font-size:.8rem; border-radius:8px}
.btn--pieno{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45; pointer-events:none}

/* ══ Intestazione pubblica ══════════════════════════════════════════════ */
.testata{background:var(--nero); color:#fff; position:sticky; top:0; z-index:40}
.testata__riga{display:flex; align-items:center; gap:16px; height:var(--nav-h)}
.testata__marchio{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; margin-right:auto}
.testata__marchio .logo{height:40px}
.testata__nome{font-weight:800; font-size:.98rem; line-height:1.05; letter-spacing:-.01em}
.testata__nome span{display:block; font-weight:500; font-size:.68rem; color:var(--verde);
  letter-spacing:.16em; text-transform:uppercase}
.testata nav{display:flex; align-items:center; gap:6px}
.testata nav a{color:#fff; text-decoration:none; font-weight:600; font-size:.93rem;
  padding:.5em .9em; border-radius:999px}
.testata nav a:hover{background:rgba(255,255,255,.12)}
.testata nav a.attivo{background:var(--verde); color:var(--nero)}
@media (max-width:720px){
  .testata__nome span{display:none}
  .testata nav a.solo-largo{display:none}
}

/* ══ Hero ═══════════════════════════════════════════════════════════════ */
.hero{background:var(--verde); color:var(--nero); position:relative; overflow:hidden}
.hero__dentro{padding:clamp(40px,7vw,76px) 0 clamp(44px,7vw,80px); position:relative; z-index:1}
.hero__occhiello{font-weight:700; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase}
.hero__mano{font-family:var(--font-mano); color:var(--magenta); font-weight:400;
  font-size:clamp(2.6rem,9vw,5.2rem); line-height:.95; letter-spacing:.01em; margin:.16em 0 .1em}
.hero h1{font-size:clamp(1.9rem,5.4vw,3.3rem); font-weight:800; text-transform:uppercase; margin-bottom:.35em}
.hero h1 em{font-style:normal; color:var(--magenta)}
.hero__testo{font-size:clamp(1rem,2vw,1.15rem); max-width:52ch; font-weight:500}
.hero__azioni{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero__meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; font-weight:600; font-size:.92rem}
.hero__meta span{display:flex; align-items:center; gap:8px}
.stella{position:absolute; right:-60px; top:-40px; width:min(46vw,380px); color:var(--nero);
  opacity:.07; pointer-events:none; z-index:0}
@media (max-width:720px){.stella{right:-90px; top:auto; bottom:-70px; width:70vw}}

/* ══ Sezioni ════════════════════════════════════════════════════════════ */
.sezione{padding:clamp(36px,5.5vw,68px) 0}
.sezione--bianca{background:var(--bianco)}
.sezione--nera{background:var(--nero); color:#fff}
.sezione--nera h2{color:#fff}
.sezione__titolo{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px}
.sezione__titolo h2{text-transform:uppercase}
.sezione__intro{color:var(--grigio-600); max-width:62ch; margin-bottom:28px; font-size:1.02rem}
.sezione--nera .sezione__intro{color:var(--grigio-300)}

/* ══ Griglie ════════════════════════════════════════════════════════════ */
.griglia{display:grid; gap:20px}
.griglia--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.griglia--3{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.griglia--4{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* ══ Schede ═════════════════════════════════════════════════════════════ */
.scheda{background:var(--bianco); border-radius:var(--r-l); padding:24px; box-shadow:var(--ombra);
  border:var(--bordo); display:flex; flex-direction:column; gap:14px}
.scheda--piatta{box-shadow:none}
.scheda__testa{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.scheda h3 a{color:inherit; text-decoration:none}
.scheda h3 a:hover{color:var(--magenta)}

/* Scheda corso, ispirata ai blocchi della locandina */
.corso-card{position:relative; overflow:hidden; padding:0}
.corso-card__testa{background:var(--verde); padding:22px 24px 18px; color:var(--nero)}
.corso-card__testa .fascia{font-weight:700; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:6px}
.corso-card__testa h3{font-size:1.45rem; font-weight:800; text-transform:uppercase; letter-spacing:-.02em}
.corso-card__corpo{padding:20px 24px 24px; display:flex; flex-direction:column; gap:14px; flex:1}
.corso-card__dati{display:flex; flex-direction:column; gap:9px; font-size:.94rem}
.corso-card__dati div{display:flex; gap:10px; align-items:flex-start}
.corso-card__dati dt{font-weight:600; color:var(--grigio-600); min-width:78px; flex-shrink:0}
.corso-card__dati dd{font-weight:600}
.corso-card__piede{margin-top:auto; padding-top:6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ══ Etichette ══════════════════════════════════════════════════════════ */
.tag{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700;
  padding:.34em .8em; border-radius:999px; letter-spacing:.02em; white-space:nowrap}
.tag--ok{background:var(--ok-tenue); color:var(--ok)}
.tag--attesa{background:var(--warn-tenue); color:var(--warn)}
.tag--lista{background:var(--grigio-200); color:var(--grigio-600)}
.tag--annullata{background:var(--err-tenue); color:var(--err)}
.tag--verde{background:var(--verde); color:var(--nero)}
.tag--magenta{background:var(--magenta); color:#fff}
.tag--nero{background:var(--nero); color:#fff}
.tag--neutro{background:var(--grigio-200); color:var(--grigio-600)}

/* ══ Moduli ═════════════════════════════════════════════════════════════ */
.campo{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.campo label,.legenda{font-weight:600; font-size:.92rem}
.campo .aiuto{font-size:.83rem; color:var(--grigio-600); font-weight:400}
.campo input,.campo select,.campo textarea{
  width:100%; padding:.78em .95em; border:2px solid var(--grigio-300); border-radius:var(--r-s);
  background:var(--bianco); font-size:1rem; transition:border-color .15s ease;
}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--grigio-400)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--nero); outline:none;
  box-shadow:0 0 0 4px var(--verde-tenue)}
.campo textarea{min-height:130px; resize:vertical; line-height:1.6}
.campo--errore input,.campo--errore select,.campo--errore textarea{border-color:var(--err)}
fieldset{border:none; padding:0; margin:0 0 20px}
legend{font-weight:800; font-size:1.05rem; padding:0; margin-bottom:14px; text-transform:uppercase;
  letter-spacing:-.01em}
.riga-campi{display:grid; gap:0 18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.spunta{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:2px solid var(--grigio-200);
  border-radius:var(--r-m); cursor:pointer; background:var(--bianco); transition:border-color .15s ease,background .15s ease}
.spunta:hover{border-color:var(--grigio-400)}
.spunta:has(input:checked){border-color:var(--nero); background:var(--verde-tenue)}
.spunta input{width:22px; height:22px; margin-top:1px; flex-shrink:0; accent-color:var(--magenta); cursor:pointer}
.spunta__testo{font-size:.94rem; line-height:1.5}
.spunta__testo strong{display:block; font-weight:700; font-size:1rem}
.spunta__testo span{color:var(--grigio-600); font-size:.88rem}
.spunte{display:flex; flex-direction:column; gap:10px}

/* ══ Avvisi ═════════════════════════════════════════════════════════════ */
.avviso{padding:14px 18px; border-radius:var(--r-m); font-weight:500; display:flex; gap:12px;
  align-items:flex-start; margin-bottom:20px; border-left:5px solid; font-size:.95rem}
.avviso--ok{background:var(--ok-tenue); border-color:var(--ok); color:#14532d}
.avviso--errore{background:var(--err-tenue); border-color:var(--err); color:#7f1d1d}
.avviso--info{background:var(--verde-tenue); border-color:var(--verde-scuro); color:var(--inchiostro)}
.avviso--attenzione{background:var(--warn-tenue); border-color:var(--warn); color:#7c4a03}
.avviso ul{margin:6px 0 0 18px}
.avviso__coda{margin:8px 0 0; font-weight:600}
.avviso__coda a{color:inherit}

/* ══ Impaginazione app (area + admin) ═══════════════════════════════════ */
.app{display:flex; flex:1; min-height:0}
.laterale{width:250px; flex-shrink:0; background:var(--nero); color:#fff; padding:20px 14px;
  display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100dvh; overflow-y:auto}
.laterale__marchio{display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none;
  padding:6px 8px 18px}
.laterale__marchio .logo{height:42px}
.laterale__marchio b{font-size:.92rem; font-weight:800; line-height:1.15; display:block}
.laterale__marchio span{font-size:.66rem; color:var(--verde); letter-spacing:.14em; text-transform:uppercase}
.laterale__gruppo{font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grigio-400); padding:16px 12px 6px}
.laterale a.voce{display:flex; align-items:center; gap:11px; padding:.68em .8em; border-radius:12px;
  color:#D6D9DD; text-decoration:none; font-weight:600; font-size:.93rem}
.laterale a.voce:hover{background:rgba(255,255,255,.1); color:#fff}
.laterale a.voce.attivo{background:var(--verde); color:var(--nero)}
.laterale a.voce .num{margin-left:auto; background:var(--magenta); color:#fff; font-size:.72rem;
  font-weight:700; padding:.1em .5em; border-radius:999px; min-width:20px; text-align:center}
.laterale a.voce.attivo .num{background:var(--nero); color:#fff}
.laterale__piede{margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-size:.82rem}
.laterale__piede .chi{color:var(--grigio-400); padding:0 8px 8px; line-height:1.4}
.laterale__piede .chi b{color:#fff; display:block; font-size:.9rem}

.principale{flex:1; min-width:0; padding:26px 24px 60px}
.principale__testa{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  flex-wrap:wrap; margin-bottom:24px}
.principale__testa h1{font-size:clamp(1.6rem,3.4vw,2.2rem); text-transform:uppercase}
.principale__testa .sotto{color:var(--grigio-600); font-size:.95rem; margin-top:2px}
.azioni-testa{display:flex; gap:10px; flex-wrap:wrap}

/* Barra inferiore su mobile */
.barra-mobile{display:none}
@media (max-width:900px){
  .app{flex-direction:column}
  .laterale{display:none}
  .principale{padding:20px 16px calc(78px + env(safe-area-inset-bottom))}
  .barra-mobile{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50; background:var(--nero);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content:space-around;
    box-shadow:0 -6px 24px rgba(0,0,0,.3);
  }
  .barra-mobile a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    color:#B9BEC4; text-decoration:none; font-size:.66rem; font-weight:700; padding:6px 2px;
    border-radius:12px; position:relative; letter-spacing:.01em}
  .barra-mobile a.attivo{color:var(--verde)}
  .barra-mobile a svg{width:22px; height:22px}
  .barra-mobile a .pallino{position:absolute; top:3px; right:calc(50% - 18px); width:8px; height:8px;
    background:var(--magenta); border-radius:50%}
  .testata-mobile{display:flex; align-items:center; gap:12px; background:var(--nero); color:#fff;
    padding:12px 16px; position:sticky; top:0; z-index:40}
  .testata-mobile .logo{height:34px}
  .testata-mobile b{font-size:.9rem; font-weight:800}
  .testata-mobile .esci{margin-left:auto; color:var(--grigio-400); text-decoration:none; font-size:.82rem; font-weight:600}
}
@media (min-width:901px){.testata-mobile{display:none}}

/* ══ Statistiche ════════════════════════════════════════════════════════ */
.stat{background:var(--bianco); border:var(--bordo); border-radius:var(--r-l); padding:20px 22px;
  display:flex; flex-direction:column; gap:2px; box-shadow:var(--ombra); position:relative; overflow:hidden}
.stat__num{font-size:2.4rem; font-weight:800; line-height:1.05; letter-spacing:-.03em}
.stat__eti{font-size:.82rem; font-weight:600; color:var(--grigio-600); text-transform:uppercase; letter-spacing:.06em}
.stat__extra{font-size:.84rem; color:var(--grigio-600); margin-top:4px}
.stat--verde{background:var(--verde); border-color:var(--verde)}
.stat--verde .stat__eti,.stat--verde .stat__extra{color:rgba(0,0,0,.62)}
.stat--nera{background:var(--nero); border-color:var(--nero); color:#fff}
.stat--nera .stat__num{color:var(--verde)}
.stat--nera .stat__eti,.stat--nera .stat__extra{color:var(--grigio-400)}
.stat--magenta{background:var(--magenta); border-color:var(--magenta); color:#fff}
.stat--magenta .stat__eti,.stat--magenta .stat__extra{color:rgba(255,255,255,.8)}

/* barra di riempimento posti */
.riempimento{height:8px; background:var(--grigio-200); border-radius:999px; overflow:hidden; margin-top:10px}
.riempimento i{display:block; height:100%; background:var(--nero); border-radius:999px}
.riempimento--pieno i{background:var(--magenta)}

/* ══ Tabelle → schede su mobile ═════════════════════════════════════════ */
.tabella-wrap{background:var(--bianco); border:var(--bordo); border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--ombra)}
table.tabella{width:100%; border-collapse:collapse; font-size:.93rem}
.tabella th{text-align:left; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--grigio-600); padding:13px 16px; background:var(--grigio-100);
  border-bottom:var(--bordo); white-space:nowrap}
.tabella td{padding:13px 16px; border-bottom:1px solid var(--grigio-200); vertical-align:middle}
.tabella tr:last-child td{border-bottom:none}
.tabella tbody tr:hover{background:var(--verde-tenue)}
.tabella a{font-weight:600; text-decoration:none; color:var(--inchiostro)}
.tabella a:hover{color:var(--magenta); text-decoration:underline}
.tabella .num{text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .tabella thead{display:none}
  .tabella,.tabella tbody,.tabella tr,.tabella td{display:block; width:100%}
  .tabella tr{border-bottom:8px solid var(--grigio-100); padding:6px 0}
  .tabella td{border:none; padding:7px 16px; display:flex; gap:14px; justify-content:space-between;
    align-items:center; text-align:right}
  .tabella td::before{content:attr(data-eti); font-weight:700; font-size:.74rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--grigio-600); text-align:left; flex-shrink:0}
  .tabella td:first-child{font-size:1.05rem; font-weight:700; padding-top:12px}
  .tabella td:first-child::before{display:none}
  .tabella td:first-child{justify-content:flex-start; text-align:left}
}

/* ══ Filtri ═════════════════════════════════════════════════════════════ */
.filtri{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; background:var(--bianco);
  border:var(--bordo); border-radius:var(--r-l); padding:16px 18px; margin-bottom:20px; box-shadow:var(--ombra)}
.filtri .campo{margin:0; min-width:150px; flex:1}
.filtri .campo input,.filtri .campo select{padding:.6em .8em}

/* ══ Comunicazioni ══════════════════════════════════════════════════════ */
.com{display:flex; gap:16px; padding:18px 20px; background:var(--bianco); border:var(--bordo);
  border-radius:var(--r-m); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .12s ease}
.com:hover{border-color:var(--nero); color:inherit; transform:translateY(-1px)}
.com__icona{width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  font-size:1.25rem; flex-shrink:0; background:var(--grigio-100)}
.com--alert .com__icona{background:var(--err-tenue)}
.com--avviso .com__icona{background:var(--verde)}
.com--approfondimento .com__icona{background:var(--magenta-tenue)}
.com__corpo{min-width:0; flex:1}
.com__titolo{font-weight:700; font-size:1.03rem; line-height:1.3; margin-bottom:3px}
.com__meta{font-size:.8rem; color:var(--grigio-600); display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.com__sommario{font-size:.92rem; color:var(--grigio-600); margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.com--nuova{border-left:5px solid var(--magenta)}
.com__nuovo{background:var(--magenta); color:#fff; font-size:.64rem; font-weight:700; padding:.15em .5em;
  border-radius:999px; text-transform:uppercase; letter-spacing:.06em}

/* Testo lungo (articoli, descrizioni) */
.prosa{font-size:1.03rem; line-height:1.75; max-width:68ch}
.prosa p{margin-bottom:1em}
.prosa p:last-child{margin-bottom:0}
.prosa strong{font-weight:700}
.prosa ul,.prosa ol{margin:0 0 1em 1.3em}
.prosa li{margin-bottom:.35em}

/* ══ Elenchi descrittivi ════════════════════════════════════════════════ */
.dati{display:grid; grid-template-columns:auto 1fr; gap:11px 20px; font-size:.95rem; align-items:baseline}
.dati dt{font-weight:600; color:var(--grigio-600); white-space:nowrap}
.dati dd{font-weight:600; word-break:break-word}
@media (max-width:520px){.dati{grid-template-columns:1fr; gap:2px 0}
  .dati dd{margin-bottom:10px}}

/* ══ Piede pubblico ═════════════════════════════════════════════════════ */
.piede{background:var(--nero); color:var(--grigio-300); padding:44px 0 32px; margin-top:auto; font-size:.92rem}
.piede a{color:var(--verde); text-decoration:none}
.piede a:hover{text-decoration:underline}
.piede__griglia{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:28px}
.piede h4{color:#fff; font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:12px}
.piede__logo{height:70px; margin-bottom:14px}
.piede__basso{border-top:1px solid rgba(255,255,255,.14); padding-top:18px; display:flex;
  justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.84rem; color:var(--grigio-400)}
.piede__firma{color:#fff; opacity:.62}

/* ══ Vuoto ══════════════════════════════════════════════════════════════ */
.vuoto{text-align:center; padding:52px 24px; background:var(--bianco); border:2px dashed var(--grigio-300);
  border-radius:var(--r-l); color:var(--grigio-600)}
.vuoto__icona{font-size:2.4rem; margin-bottom:10px}
.vuoto strong{display:block; color:var(--inchiostro); font-size:1.1rem; margin-bottom:6px; font-weight:700}

/* ══ Copia link ═════════════════════════════════════════════════════════ */
.copia{display:flex; gap:8px; align-items:stretch}
.copia input{flex:1; font-size:.85rem; font-family:ui-monospace,'SF Mono',Menlo,monospace;
  padding:.6em .8em; border:2px solid var(--grigio-300); border-radius:var(--r-s); background:var(--grigio-100)}

/* ══ Pagine di accesso ══════════════════════════════════════════════════ */
.accesso{flex:1; display:grid; place-items:center; padding:32px 20px; background:var(--verde); position:relative}
.accesso__scheda{background:var(--bianco); border-radius:var(--r-xl); padding:clamp(28px,5vw,44px);
  width:100%; max-width:440px; box-shadow:var(--ombra-alta); position:relative; z-index:1}
.accesso__scheda .logo{height:74px; margin:0 auto 20px}
.accesso__scheda h1{font-size:1.65rem; text-align:center; text-transform:uppercase; margin-bottom:8px}
.accesso__scheda .intro{text-align:center; color:var(--grigio-600); margin-bottom:26px; font-size:.95rem}

@media print{.laterale,.barra-mobile,.testata,.piede,.azioni-testa{display:none!important}
  body{background:#fff} .principale{padding:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ── Passaggi guidati (pagina «Collegamento email») ────────────────────── */
.aiuto{font-size:.83rem; color:var(--grigio-600); font-weight:400}
.passi{list-style:none; counter-reset:passo; margin:18px 0 20px; padding:0}
.passi li{counter-increment:passo; position:relative; padding:0 0 18px 46px; line-height:1.6}
.passi li::before{content:counter(passo); position:absolute; left:0; top:-1px;
  width:30px; height:30px; border-radius:50%; background:var(--verde); color:#000;
  font-weight:800; font-size:.95rem; display:grid; place-items:center}
.passi li:not(:last-child)::after{content:""; position:absolute; left:14.5px; top:32px; bottom:4px;
  width:2px; background:var(--grigio-300)}
.passi li b{display:block}
.passi li a{color:var(--magenta); font-weight:600; word-break:break-all}
.passi li code{background:var(--grigio-100); padding:1px 6px; border-radius:5px; font-size:.9em}
@media (max-width:520px){.passi li{padding-left:40px} .passi li::before{width:26px;height:26px;font-size:.85rem}
  .passi li:not(:last-child)::after{left:12.5px; top:28px}}

/* ── Pagina di accesso: una sola azione, gestione in secondo piano ─────── */
.accesso__scheda .intro{margin-bottom:24px}
.accesso__coda{text-align:center; margin:20px 0 0; font-size:.9rem; color:var(--grigio-600)}
.accesso__coda a{color:var(--magenta); font-weight:600}

/* «Non ricordo la password»: è un bottone (invia il modulo), ma si legge come
   un collegamento, perché non deve competere con l'azione principale. */
.scorciatoia{display:block; margin:14px auto 0; background:none; border:0; padding:4px;
  font:inherit; font-size:.87rem; color:var(--grigio-600); text-decoration:underline;
  text-underline-offset:3px; cursor:pointer}
.scorciatoia:hover{color:var(--magenta)}
.scorciatoia:focus-visible{outline:3px solid var(--magenta); outline-offset:2px; border-radius:4px}

/* Il pannello degli insegnanti: presente, ma chiaramente secondario. */
.staff{margin-top:26px; border-top:1px dashed var(--grigio-300); padding-top:16px}
.staff summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  font-size:.87rem; color:var(--grigio-600); padding:5px 2px; border-radius:var(--r-s);
  user-select:none}
.staff summary::-webkit-details-marker{display:none}
.staff summary b{font-weight:600; color:var(--nero)}
.staff summary:hover b{color:var(--magenta)}
.staff summary:focus-visible{outline:3px solid var(--magenta); outline-offset:3px}
.staff__freccia{width:0; height:0; flex:none;
  border-left:6px solid var(--grigio-600); border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent; transition:transform .18s ease}
.staff[open] .staff__freccia{transform:rotate(90deg) translateX(1px)}
.staff__dentro{padding-top:18px}
.staff__dentro .campo{margin-bottom:14px}
.staff__dentro .avviso{margin-bottom:16px}

@media (max-width:760px){
  .staff{margin-top:22px}
}

/* ══ Respiro laterale ════════════════════════════════════════════════════
   Un'unica misura per tutti i margini laterali, così non si disallineano
   fra pagine pubbliche e gestione. Su schermo piccolo si ALLARGA (prima si
   stringeva: 16px nella gestione contro i 24 del desktop) e tiene conto
   della tacca dei telefoni, che in orizzontale mangia il bordo.
   Le regole stanno in `screen` per non toccare la stampa.             */
:root{ --lato:20px }
@media (max-width:720px){ :root{ --lato:26px } }

@media screen{
  .contenitore{
    padding-left:calc(var(--lato) + env(safe-area-inset-left));
    padding-right:calc(var(--lato) + env(safe-area-inset-right));
  }
}

@media screen and (max-width:900px){
  .principale{
    padding-left:calc(var(--lato) + env(safe-area-inset-left));
    padding-right:calc(var(--lato) + env(safe-area-inset-right));
  }
  .testata-mobile{
    padding-left:calc(var(--lato) + env(safe-area-inset-left));
    padding-right:calc(var(--lato) + env(safe-area-inset-right));
  }
  .barra-mobile{
    padding-left:calc(6px + env(safe-area-inset-left));
    padding-right:calc(6px + env(safe-area-inset-right));
  }
  .accesso{
    padding-left:calc(var(--lato) + env(safe-area-inset-left));
    padding-right:calc(var(--lato) + env(safe-area-inset-right));
  }
}

/* Guadagnata aria fuori, se ne restituisce un po' dentro: sui telefoni
   stretti il bordo della scheda si allontana dallo schermo senza che la
   riga di testo si accorci. */
@media screen and (max-width:520px){
  .scheda{ padding:20px }
  .accesso__scheda{ padding:26px 22px }
  .corso-card__testa{ padding:20px 20px 16px }
  .corso-card__corpo{ padding:18px 20px 20px }
  .stat{ padding:18px }
  .avviso{ padding:13px 15px }
  .vuoto{ padding:44px 20px }
  .tabella td{ padding-left:18px; padding-right:18px }
}

/* ── Avvisi su WhatsApp (/admin/corsi/:id/whatsapp) ─────────────────────── */
.wa-bolla{background:#dcf8c6; color:#111; border-radius:12px 12px 12px 4px; padding:12px 14px;
  white-space:pre-wrap; overflow-wrap:anywhere; font-size:.93rem; line-height:1.5; max-width:46ch}
.wa-elenco{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.wa-riga{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-bottom:var(--bordo)}
.wa-riga:last-child{border-bottom:0}
.wa-riga__chi{display:flex; flex-direction:column; gap:2px; min-width:0}
.wa-riga__chi span{font-size:.85rem; color:var(--grigio-600)}
.wa-riga__stato:empty{display:none}
.wa-riga--fatta .wa-riga__stato{color:var(--ok); font-weight:600}
.wa-riga--fatta .wa-riga__chi strong{color:var(--grigio-600)}
.wa-riga--vuota .wa-riga__chi span{color:var(--warn)}
.wa-riga__azioni{display:flex; gap:6px; align-items:center}
.wa-riga--fatta .btn--verde{background:var(--bianco); border-color:var(--grigio-300)}