:root{
  --ink:#1B2846; --ink-2:#33456B; --mut:#68788F; --soft:#8DA0B8;
  --blue:#2E6BDA; --blue-d:#2453BD; --blue-l:#4F8CE6;
  --sky:#78AAEC; --sky-2:#BDD8F5; --chip:#EFF5FC;
  --paper:#FAFCFE; --line:#EAF0F6; --line-2:#D2E0EC; --dark:#101A2E;
  --hair:#B2BFCC;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
input,button,textarea{font-family:inherit}
::selection{background:var(--sky-2);color:var(--ink)}
.mono{font-family:'IBM Plex Mono',monospace}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
h1.page{margin:8px 0 8px;font-size:34px;font-weight:800;letter-spacing:-.03em}
.lead{margin:0 0 28px;font-size:16px;color:var(--mut);max-width:660px;line-height:1.55}
.vidph{background-image:repeating-linear-gradient(135deg,#1B2846 0 2px,transparent 2px 11px);background-color:#101A2E}

/* layout */
.app{display:flex;align-items:flex-start;min-height:100vh}
/* sidebar scura, in continuita' cromatica con il footer della home pubblica */
.sidebar{position:sticky;top:0;height:100vh;width:258px;flex:none;padding:26px 18px;border-right:1px solid rgba(120,170,236,.14);background:var(--dark);background-image:radial-gradient(120% 55% at 0% 0%,rgba(46,107,218,.28) 0%,rgba(46,107,218,0) 60%),linear-gradient(180deg,#12203A 0%,#0D1729 100%);color:var(--sky-2);display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px}
.brand b{font-weight:800;font-size:19px;letter-spacing:-.02em;color:#fff}
.brand .acad{font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--sky);margin-left:-5px}
.navsec{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(189,216,245,.45);padding:4px 12px 6px}
.navlink{cursor:pointer;font-size:14px;padding:10px 12px;border-radius:10px;color:var(--sky-2);font-weight:500;display:flex;align-items:center;gap:11px;transition:background .14s,color .14s}
.navlink:hover{background:rgba(120,170,236,.12);color:#fff}
.navlink .ic{flex:none;width:18px;height:18px;display:flex;color:rgba(189,216,245,.55);transition:color .14s}
.navlink:hover .ic{color:var(--sky)}
.navlink.active{background:var(--blue);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(46,107,218,.35)}
.navlink.active .ic{color:#fff}
.navlink .live{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.04em;background:var(--blue);color:#fff;padding:3px 6px;border-radius:5px;margin-left:auto}
.navlink.active .live{background:#fff;color:var(--blue)}
.subnav{display:flex;flex-direction:column;gap:2px;padding:2px 0 2px 30px}
.subnav a{cursor:pointer;font-size:13.5px;padding:8px 12px;border-radius:9px;color:rgba(189,216,245,.7);font-weight:500;border-left:2px solid rgba(120,170,236,.18)}
.subnav a:hover{background:rgba(120,170,236,.12);color:#fff}
.subnav a.active{background:rgba(46,107,218,.22);color:#fff;font-weight:700;border-left-color:var(--blue)}
.usercard{margin-top:auto;display:flex;align-items:center;gap:11px;padding:11px;background:rgba(120,170,236,.10);border:1px solid rgba(120,170,236,.18);border-radius:13px;color:#fff}
.usercard:hover{background:rgba(120,170,236,.16);border-color:rgba(120,170,236,.4)}
/* il profilo e' un link, il logout un secondo link accanto: non annidati */
.usercard-link{cursor:pointer;flex:1;min-width:0;display:flex;align-items:center;gap:11px;color:#fff}
.usercard-out{flex:none;color:rgba(189,216,245,.6);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;transition:background .14s,color .14s}
.usercard-out:hover{background:rgba(120,170,236,.18);color:#fff}
.avatar{border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.main{flex:1;min-width:0;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;background:rgba(250,252,254,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:13px 48px;display:flex;align-items:center;gap:20px}
.search{width:100%;max-width:440px;padding:11px 16px;font-size:14px;border:1px solid var(--line-2);border-radius:11px;color:var(--ink);outline:none;background:#fff}
.search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,107,218,.13)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.topbar-live{font-size:11px;letter-spacing:.08em;color:var(--sky);display:flex;align-items:center;gap:7px;white-space:nowrap}
.topbar-live .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);display:inline-block;flex:none}
/* hamburger + brand compatta: solo mobile (vedi @media in fondo) */
.navtoggle{display:none;flex:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;padding:0}
.navtoggle:hover{border-color:var(--blue);color:var(--blue)}
.topbar-brand{display:none;flex:none;align-items:center}
/* velo scuro dietro al menu a scomparsa */
.scrim{position:fixed;inset:0;background:rgba(16,26,46,.55);z-index:90;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s}
.scrim.open{opacity:1;visibility:visible}
.page-wrap{padding:36px 48px 40px}   /* piena larghezza: cap gestiti per componente */

/* striscia di chiusura dell'area riservata: privacy, cookie e supporto vivevano
   solo nel footer della home pubblica, irraggiungibili da dentro la piattaforma */
.app-foot{margin-top:auto;border-top:1px solid var(--line);padding:18px 48px;
          display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.app-foot .cpy{font-size:11px;letter-spacing:.06em;color:var(--mut);opacity:.7}
.app-foot-links{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.app-foot-links a{font-size:12px;color:var(--mut);opacity:.75;transition:color .14s,opacity .14s}
.app-foot-links a:hover{color:var(--blue);opacity:1}

/* components */
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.card.hov:hover{border-color:var(--sky-2);box-shadow:0 6px 18px rgba(27,40,70,.08)}
/* card tematiche della landing: gradazioni di blu, dal piu' chiaro al piu' carico */
/* blocchi pieni con icona, testo centrato: gradazioni di blu */
.card.tint{border:none;color:#fff;padding:30px 24px 28px;text-align:center;
           display:flex;flex-direction:column;align-items:center;gap:14px}
.card.tint .tile-ic{width:46px;height:46px;flex:none;display:block;
                    fill:none;stroke:currentColor;stroke-width:1.5;
                    stroke-linecap:round;stroke-linejoin:round}
.card.tint .kicker{color:#fff;margin:0}
.card.tint .tile-txt{font-size:15.5px;line-height:1.55;color:#fff}
.card.tint-1{background:#2E6BDA}
.card.tint-2{background:#2456B8}
.card.tint-3{background:#1B4494}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.g4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* g2s: coppia di valori compatti (es. statistiche) — resta a 2 colonne anche su mobile */
.g2s{grid-template-columns:1fr 1fr}
/* split asimmetrici: contenuto principale + colonna laterale */
.split-2-1{grid-template-columns:2fr 1fr}
.split-3-2{grid-template-columns:1.5fr 1fr}
.split-13-1{grid-template-columns:1.3fr 1fr}
.stat{font-size:32px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.stat-l{font-size:13px;color:var(--mut);margin-top:2px}
.badge{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;background:var(--chip);color:var(--blue);padding:4px 9px;border-radius:6px;display:inline-block}
.btn{cursor:pointer;font-weight:600;font-size:14px;padding:11px 20px;border-radius:11px;border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.btn:hover{border-color:var(--blue);color:var(--blue)}
/* usato anche da solo (senza .btn): serve un set di base completo */
.btn-primary{cursor:pointer;font-weight:600;font-size:14px;padding:11px 20px;border-radius:11px;background:var(--blue);color:#fff;border:none;display:inline-block}
.btn-primary:hover{background:var(--blue-d);color:#fff}
.dark{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.dark .blob{position:absolute;top:-90px;right:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(46,107,218,.5),rgba(46,107,218,0) 70%)}
.chip{cursor:pointer;font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;background:#fff;color:var(--ink-2);border:1px solid var(--line-2)}
.chip.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.row-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 24px;display:flex;align-items:center;gap:22px}
.row-item:hover{border-color:var(--sky-2)}
/* colonna data testuale ("14 GIU · 18:00"): a tutta larghezza su mobile */
.row-when{flex:none;width:110px}
/* riquadro giorno/mese compatto: resta in linea anche su mobile */
.row-daybox{flex:none;width:58px;text-align:center}
.row-body{flex:1;min-width:0}
.row-act{flex:none}
/* colonna laterale che segue lo scroll (torna statica quando impila) */
.side-sticky{position:sticky;top:90px}
.bar{height:8px;border-radius:999px;background:var(--chip);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--blue);border-radius:999px}
.pill-tabs{display:inline-flex;gap:4px;background:var(--chip);padding:5px;border-radius:13px}
.pill-tabs a{cursor:pointer;font-weight:600;font-size:13px;padding:9px 16px;border-radius:9px;color:var(--mut)}
.pill-tabs a.active{background:#fff;color:var(--blue)}

/* public landing */
/* barra fissa in cima: trasparente sull'hero, opaca dopo lo scroll */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;transition:background-color .22s ease,box-shadow .22s ease}
.site-header-inner{height:76px;display:flex;align-items:center;gap:20px}
.site-header.scrolled{background-color:rgba(11,13,18,.92);box-shadow:0 1px 0 rgba(255,255,255,.07),0 8px 28px rgba(0,0,0,.28)}
@supports (backdrop-filter:blur(10px)){.site-header.scrolled{background-color:rgba(11,13,18,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
/* le ancore non devono finire sotto la barra */
#formazione,#piattaforma,#eventi,#accedi{scroll-margin-top:92px}
.hero{background:#0B0D12;color:#fff;position:relative;overflow:hidden;isolation:isolate;min-height:86vh;min-height:86svh;display:flex;flex-direction:column}
.hero>.container{flex:1;display:flex;flex-direction:column;width:100%}
.hero-grid{flex:1;display:grid;grid-template-columns:1.05fr 410px;gap:48px;padding:132px 0 72px;align-items:center}
.hero-title{margin:0 0 20px;font-size:52px;font-weight:800;letter-spacing:-.035em;line-height:1.02;max-width:560px}
.hero-sub{margin:0;max-width:540px;font-size:15.5px;line-height:1.6;color:#BDD8F5}
/* firma sotto il sottotitolo dell'hero */
.hero-sign{margin-top:26px;padding-top:18px;border-top:1px solid rgba(189,216,245,.26);
           display:flex;flex-direction:column;gap:3px;max-width:440px}
.hero-sign b{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:#fff}
.hero-sign span{font-size:13.5px;line-height:1.45;color:#BDD8F5}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.site-nav a{color:#BDD8F5;font-size:14px;font-weight:600;padding:8px 14px;border-radius:9px}
.site-nav .btn-primary{color:#fff;padding:9px 18px;border-radius:10px}
/* hamburger + tendina della landing: nascosti su desktop (vedi @media 900) */
.site-menu-btn{display:none;flex:none;width:38px;height:38px;border-radius:10px;border:1px solid rgba(189,216,245,.35);background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer;padding:0}
.site-menu{display:none}
.site-header.menu-open{background-color:rgba(11,13,18,.96)}
/* sezioni della landing — .container.x: deve battere il padding di .container
   a prescindere dall'ordine nel file */
.container.sec-pad{padding:80px 32px}
.container.sec-pad-foot{padding:64px 32px 48px}
.sec-title{margin:0 0 18px;font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.08}
/* icone accanto ai titoli di sezione: scalano col testo */
.sec-ic{width:.85em;height:.85em;flex:none;color:var(--blue)}
.sec-lead{margin:0 0 18px;font-size:17px;line-height:1.7;color:var(--mut)}
/* titolo di sezione + contatore a destra: va a capo se non c'e' spazio */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:6px}
/* colonne del footer pubblico */
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.container.foot-cta{padding:48px 32px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-bottom{border-top:1px solid rgba(120,170,236,.2);padding-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* testo sopra la foto: ombra morbida per la leggibilita' */
.hero-copy{text-shadow:0 1px 14px rgba(8,14,28,.55)}
/* foto sala operatoria: nitida, colori spinti */
.hero::before{content:"";position:absolute;top:0;bottom:0;left:-6%;right:0;z-index:0;background:var(--hero-img) right center/cover no-repeat;filter:saturate(1.18) contrast(1.08);opacity:1}
/* velo neutro: piena leggibilita' a sinistra, dissolvenza verso i bordi */
.hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(103deg,rgba(8,10,14,.74) 0%,rgba(8,10,14,.42) 30%,rgba(8,10,14,.10) 60%,rgba(8,10,14,.04) 100%),linear-gradient(to bottom,rgba(8,10,14,.84) 0%,rgba(8,10,14,.48) 11%,rgba(8,10,14,0) 30%,rgba(8,10,14,0) 64%,rgba(8,10,14,.82) 100%)}
.hero .container{z-index:2}
.container{max-width:1180px;margin:0 auto;padding:0 32px}
/* vetro scuro: molto piu' trasparente del vetro chiaro a parita' di leggibilita',
   perche' il testo bianco guadagna contrasto man mano che il pannello si scurisce */
.loginbox{background:rgba(13,20,36,.62);-webkit-backdrop-filter:blur(26px) saturate(1.3);
          backdrop-filter:blur(26px) saturate(1.3);border:1px solid rgba(255,255,255,.16);
          color:#fff;border-radius:20px;padding:30px;box-shadow:0 24px 60px rgba(0,0,0,.42)}
.loginbox .lbl{color:#fff}
.loginbox .lb-muted{color:#BDD8F5}
.loginbox a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* campi in negativo: sfondo appena piu' chiaro del pannello, testo bianco */
.loginbox .field{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);color:#fff}
.loginbox .field::placeholder{color:rgba(255,255,255,.62)}
.loginbox .field:focus{background:rgba(255,255,255,.16);border-color:#78AAEC;
                       box-shadow:0 0 0 3px rgba(120,170,236,.28)}
/* senza backdrop-filter la trasparenza renderebbe il testo illeggibile */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .loginbox{background:rgba(13,20,36,.94)}
}
.field{width:100%;padding:12px 14px;font-size:14px;border:1px solid var(--line-2);border-radius:11px;outline:none;background:#fff}
.field:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,107,218,.13)}
.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px}

/* vetrina formazione (home pubblica) — ogni card prende l'accento della sua
   tipologia dalle variabili --svc-* impostate inline da $EVENT_TYPES */
.svc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;margin-bottom:14px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
.svc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.svc{position:relative;display:flex;background:#fff;border:1px solid var(--line);border-radius:20px;
     overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--svc-dot)}
.svc:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 14px 34px rgba(27,40,70,.11)}
.svc-ic{flex:none;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
        background:var(--svc-bg);color:var(--svc-col)}
.svc-ic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-ic-sm{width:40px;height:40px;border-radius:12px}
.svc-ic-sm svg{width:21px;height:21px}

/* foto di sfondo della card (voci di $SERVICES con 'img'): dissolta in
   diagonale e velata di bianco, cosi' la scena si vede ma il testo si legge */
.svc-photo{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;
           background-position:var(--svc-pos,center);opacity:1;transition:box-shadow .16s ease;
           /* velo bianco uguale per tutte le card: unico punto di regolazione */
           box-shadow:inset 0 0 0 999px rgba(255,255,255,var(--svc-veil,.5));
           /* la foto vive nell'angolo in basso a destra e sfuma verso il testo */
           -webkit-mask-image:radial-gradient(118% 118% at 100% 100%,#000 6%,rgba(0,0,0,.5) 42%,transparent 70%);
           mask-image:radial-gradient(118% 118% at 100% 100%,#000 6%,rgba(0,0,0,.5) 42%,transparent 70%)}
/* fascia chiara in basso: la riga con il contatore e "Accedi" resta netta */
.svc-photo::after{content:"";position:absolute;inset:0;
                  background:linear-gradient(to top,rgba(255,255,255,.92) 0%,rgba(255,255,255,.5) 22%,transparent 48%)}
.svc:hover .svc-photo{box-shadow:inset 0 0 0 999px rgba(255,255,255,calc(var(--svc-veil,.5) - .12))}
/* il contenuto della card resta sopra alla foto */
.svc>:not(.svc-photo){position:relative;z-index:1}
/* sopra una foto il grigio chiaro non basta: il testo scende di tono */
.svc-photo-on .svc-txt{color:var(--ink-2)}
.svc-photo-on .svc-sm-txt{color:var(--ink-2)}
/* card compatta: la foto entra come banda a destra, cosi' il soggetto si
   riconosce invece di essere un angolo scuro qualunque */
/* la sfumatura e' in px, non in %: l'immagine e' larga quanto la sua
   proporzione decide, quindi una dissolvenza a percentuale su card larghe
   (telefono) finiva oltre il bordo della foto e ne mostrava il taglio netto */
.svc-sm .svc-photo{background-size:auto 168%;background-position:var(--svc-pos,right 44%);
                   -webkit-mask-image:linear-gradient(to left,#000 0,rgba(0,0,0,.82) 45px,transparent 155px);
                   mask-image:linear-gradient(to left,#000 0,rgba(0,0,0,.82) 45px,transparent 155px)}
/* sulla card compatta il velo si stende da sinistra: la colonna del testo
   resta bianca e la foto respira solo nella parte destra */
.svc-sm .svc-photo::after{background:linear-gradient(to right,rgba(255,255,255,.95) 0%,rgba(255,255,255,.45) 32%,transparent 62%)}
/* il testo non entra nella zona della foto */
/* la colonna del testo si allarga quel tanto che basta a tenere contatore
   e "Accedi" sulla stessa riga, restando prima della foto */
.svc-sm.svc-photo-on .svc-sm-body{max-width:74%}
.svc-photo-on .svc-count{color:var(--ink)}

/* card grandi: i tre servizi principali */
.svc-lg{flex-direction:column;padding:28px 26px 22px}
.svc-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.svc-kick{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--svc-col)}
.svc-title{margin:6px 0 10px;font-size:23px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.svc-txt{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.svc-meta{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.svc-count{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.svc-go{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--blue);white-space:nowrap}
.svc:hover .svc-go{color:var(--blue-d)}

/* card compatte: i formati che completano l'offerta.
   Raggio minore delle card grandi: su un riquadro basso 20px sembrano bolle */
.svc-sm{align-items:flex-start;gap:14px;padding:20px 20px 18px;border-radius:16px}
.svc-sm-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.svc-sm-title{font-size:15.5px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.svc-sm-txt{font-size:12.5px;line-height:1.45;color:var(--mut)}
/* contatore e "Accedi" sulla stessa riga: la card resta bassa come prima */
.svc-sm-foot{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.svc-sm-meta{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;
             text-transform:uppercase;color:var(--svc-col)}
.svc-sm-go{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap;
           transition:color .13s}
.svc:hover .svc-sm-go{color:var(--blue-d)}

/* --- PROPOSTA: sezione formazione in versione scura, in eco all'hero ---
   Tutto e' agganciato alla classe .fm-dark sulla sezione: togliendola in
   app/layout/public.php la sezione torna chiara com'era. */
.fm-dark{background:#0B0D12;color:#fff;position:relative;overflow:hidden;isolation:isolate;
         border-top:1px solid rgba(120,170,236,.16)}
/* luci ferme: due aloni e un raggio diagonale che taglia la fascia */
.fm-dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
                 background:radial-gradient(85% 60% at 12% -10%,rgba(46,107,218,.34),rgba(46,107,218,0) 60%),
                            radial-gradient(70% 65% at 100% 110%,rgba(46,107,218,.26),rgba(46,107,218,0) 64%),
                            linear-gradient(104deg,transparent 34%,rgba(120,170,236,.10) 46%,transparent 58%),
                            linear-gradient(180deg,rgba(189,216,245,.10),transparent 12%)}
/* luce viva: un alone che deriva lentamente da un lato all'altro */
.fm-dark .fm-glow{position:absolute;z-index:0;pointer-events:none;left:-14%;top:-46%;
                  width:min(880px,72vw);aspect-ratio:1;border-radius:50%;
                  background:radial-gradient(circle,rgba(79,140,230,.30),rgba(46,107,218,0) 62%);
                  animation:fmDrift 26s ease-in-out infinite alternate}
.fm-dark .fm-glow.two{left:auto;right:-18%;top:auto;bottom:-52%;width:min(760px,64vw);
                      background:radial-gradient(circle,rgba(46,107,218,.26),rgba(46,107,218,0) 64%);
                      animation-duration:34s;animation-direction:alternate-reverse}
@keyframes fmDrift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(26vw,10%,0) scale(1.18)}
}
.fm-dark>.container{position:relative;z-index:1}
.fm-dark .sec-title{color:#fff}
.fm-dark .sec-lead{color:#BDD8F5}
.fm-dark .svc-head>a{color:var(--sky)}

/* le card diventano vetro scuro, come il box di login sull'hero */
.fm-dark .svc{background:rgba(15,23,40,.62);border-color:rgba(255,255,255,.13);
              -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}
/* bordo superiore illuminato, come vetro colpito dalla luce */
.fm-dark .svc{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.fm-dark .svc:hover{border-color:rgba(120,170,236,.45);
                    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 44px rgba(0,0,0,.55)}
/* il filo della tipologia diffonde il suo colore sul vetro */
.fm-dark .svc::before{box-shadow:0 0 18px 1px var(--svc-dot)}
/* riflesso che attraversa la card al passaggio del mouse */
.fm-dark .svc::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:42%;z-index:0;
                     pointer-events:none;transform:skewX(-14deg);
                     background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);
                     transition:left .6s cubic-bezier(.3,0,.2,1)}
.fm-dark .svc:hover::after{left:118%}
.fm-dark .svc-title,.fm-dark .svc-sm-title{color:#fff}
.fm-dark .svc-txt,.fm-dark .svc-sm-txt,
.fm-dark .svc-photo-on .svc-txt,.fm-dark .svc-photo-on .svc-sm-txt{color:#BDD8F5}
.fm-dark .svc-meta{border-top-color:rgba(120,170,236,.22)}
.fm-dark .svc-count,.fm-dark .svc-photo-on .svc-count{color:#fff}
.fm-dark .svc-go,.fm-dark .svc-sm-go{color:var(--sky)}
.fm-dark .svc:hover .svc-go,.fm-dark .svc:hover .svc-sm-go{color:#fff}
/* icona e occhiello prendono il colore acceso della tipologia, non quello scuro */
.fm-dark .svc-ic{background:radial-gradient(120% 120% at 30% 0%,rgba(255,255,255,.16),rgba(255,255,255,.05));
                  color:var(--svc-dot);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.fm-dark .svc:hover .svc-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 22px -6px var(--svc-dot)}
.fm-dark .svc-kick,.fm-dark .svc-sm-meta{color:var(--svc-dot)}
.fm-dark .fm-dark /* sul fondo scuro il velo bianco diventa un velo di notte */
.fm-dark .svc-photo{box-shadow:inset 0 0 0 999px rgba(9,14,26,.42)}
.fm-dark .svc:hover .svc-photo{box-shadow:inset 0 0 0 999px rgba(9,14,26,.28)}
.fm-dark .svc-photo::after{background:linear-gradient(to top,rgba(12,18,32,.94) 0%,rgba(12,18,32,.5) 22%,transparent 48%)}
.fm-dark .svc-sm .svc-photo::after{background:linear-gradient(to right,rgba(12,18,32,.96) 0%,rgba(12,18,32,.45) 32%,transparent 62%)}
@media (max-width:640px){
  .fm-dark .svc-photo{box-shadow:inset 0 0 0 999px rgba(9,14,26,.52)}
}

/* torna su: pastiglia in basso a destra, accesa solo a fondo pagina */
.totop{position:fixed;right:26px;bottom:26px;z-index:120;width:46px;height:46px;padding:0;
       border:none;border-radius:50%;background:var(--blue);color:#fff;cursor:pointer;
       display:flex;align-items:center;justify-content:center;
       box-shadow:0 10px 28px rgba(8,14,28,.45);
       opacity:0;visibility:hidden;transform:translateY(10px);
       transition:opacity .22s ease,transform .22s ease,visibility .22s,background .15s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--blue-d)}
.totop:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
@media (max-width:640px){.totop{right:16px;bottom:16px;width:44px;height:44px}}

/* filtri libreria on demand */
.od-filter{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.od-filter-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--hair);min-width:70px}
.od-chips{display:flex;flex-wrap:wrap;gap:9px}
.od-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:1px}

/* paginazione (libreria on demand, podcast) */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:36px;flex-wrap:wrap}
.pager a,.pager>span{min-width:38px;height:38px;padding:0 11px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);transition:border-color .12s,color .12s}
.pager a:hover{border-color:var(--blue);color:var(--blue)}
.pager .active{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .gap{border:none;background:none;color:var(--hair);min-width:auto;padding:0 2px;font-weight:600}
.pager .pg-arrow{padding:0}
.pager .pg-arrow svg{width:16px;height:16px}
.pager .nav-dis{opacity:.4}

/* comitato scientifico (home pubblica) — una scheda per membro.
   Sezione al momento non inclusa: vedi app/views/_comitato_home.php */
.cm-card{display:flex;flex-direction:column;gap:14px;padding:22px}
.cm-top{display:flex;align-items:center;gap:13px;min-width:0}
.cm-av{width:46px;height:46px;font-size:14.5px;background:var(--chip);color:var(--blue-d)}
.cm-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.cm-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.cm-role{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--blue)}
.cm-affil{font-size:13px;line-height:1.5;color:var(--mut);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}

/* colonne laterali della sezione eventi (podcast, comitato): stessa scocca */
.rail{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px}
.rail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rail-ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--chip);color:var(--blue);display:flex;align-items:center;justify-content:center}
.rail-lead{margin:0;font-size:13px;line-height:1.5;color:var(--mut)}
.rail-all{margin-top:auto;padding-top:4px;font-size:13px;font-weight:600;color:var(--blue)}

/* podcast — liste della pagina dedicata e del rail */
.pod-list{display:flex;flex-direction:column;gap:4px}
.pod-ep{display:flex;gap:12px;padding:10px;border-radius:13px;transition:background .12s}
.pod-ep:hover{background:var(--paper)}
.pod-cover{position:relative;flex:none;width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.pod-cover-n{font-size:11px;font-weight:700;letter-spacing:.04em}
.pod-play{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
.pod-ep-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pod-ep-meta{font-size:9.5px;letter-spacing:.08em;font-weight:700}
.pod-ep-title{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pod-ep-who{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* nella sezione eventi il calendario vive su 2/3: celle un filo piu' strette */
.split-2-1 .mc-large .mc-day{width:38px;height:38px;border-radius:10px;font-size:15px}
.split-2-1 .mc-large .mc-cal{padding:20px 18px}
.split-2-1 .mc-large .mc-list{padding:20px}
/* calendario e podcast: sempre pari altezza, la eccedenza si distribuisce
   dentro le due card invece di lasciare un vuoto (blu sotto il calendario
   o gap sopra "Tutti gli episodi") */
/* i wrapper (celle della griglia) hanno gia' pari altezza per align-items:stretch;
   come colonne flex fanno riempire quell'altezza alla card (flex:1, senza height:%
   che innescherebbe un loop di calcolo), cosi' i due riquadri bianchi combaciano
   in altezza senza fascia blu sotto il calendario */
.split-2-1>div{display:flex;flex-direction:column;min-width:0}
.split-2-1>div>.mc-wrap,
.split-2-1>div>.rail{flex:1;min-width:0}
/* la card podcast, piu' bassa, distribuisce gli episodi invece di ammassare
   tutto il vuoto sopra "Tutti gli episodi" */
.split-2-1 .rail .pod-list{flex:1;justify-content:space-between}

/* ============================================================
   RESPONSIVE — desktop-first: qui sotto solo gli scostamenti.
   Breakpoint: 1100 (tablet largo) · 900 (shell mobile) · 640 (telefono)
   ============================================================ */

/* --- Tablet largo: le griglie fitte scendono a 2 colonne --- */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .split-2-1,.split-3-2,.split-13-1{grid-template-columns:1fr}
  .side-sticky{position:static}
  .live-hero-media{min-height:230px}
  .live-hero-body{padding:28px}
  .page-wrap{padding:32px 30px 56px}
  .topbar{padding:12px 30px}
  .container{padding:0 24px}
  .container.sec-pad{padding:64px 24px}
  .container.sec-pad-foot{padding:56px 24px 40px}
  .foot-cols{grid-template-columns:1fr 1fr 1fr;gap:32px}
}

/* --- Shell mobile: la sidebar diventa un menu a scomparsa --- */
@media (max-width:900px){
  .app{display:block}
  .sidebar{position:fixed;z-index:100;top:0;left:0;height:100%;height:100dvh;width:286px;max-width:86vw;
           transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
           border-right:none;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
  .sidebar.open{transform:none;box-shadow:0 0 64px rgba(0,0,0,.55)}
  .navtoggle{display:flex}
  .topbar-brand{display:flex}
  .topbar{padding:9px 16px;gap:10px}
  .search{max-width:none;flex:1;min-width:0;font-size:16px;padding:10px 14px}
  .topbar-right{gap:10px}
  /* l'indicatore diretta si riduce al solo pallino */
  .topbar-live{width:38px;height:38px;justify-content:center;border:1px solid var(--line-2);border-radius:11px;background:#fff}
  .topbar-live .txt{display:none}
  .page-wrap{padding:24px 18px 32px}
  .app-foot{padding:16px 18px;gap:10px}
  .app-foot-links{margin-left:0;gap:14px}
  /* menu aperto: la pagina sotto non deve scorrere */
  body.nav-open{overflow:hidden}
  /* target touch piu' generosi nel menu */
  .navlink{padding:12px}
  .subnav a{padding:10px 12px}

  /* landing */
  .site-header-inner{height:62px;gap:10px}
  #formazione,#piattaforma,#eventi,#accedi{scroll-margin-top:70px}
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:30px;padding:104px 0 56px;align-items:stretch}
  .hero-title{font-size:clamp(31px,8.2vw,46px);max-width:none}
  .hero-sub{font-size:14.5px;max-width:none}
  .hero-sign{margin-top:20px;padding-top:14px;max-width:none}
  .hero-sign b{font-size:15.5px}
  .hero-sign span{font-size:13px}
  /* la foto non copre piu' meta' schermo: il velo diventa verticale */
  .hero::after{background:linear-gradient(to bottom,rgba(8,10,14,.86) 0%,rgba(8,10,14,.55) 22%,rgba(8,10,14,.28) 48%,rgba(8,10,14,.55) 78%,rgba(8,10,14,.88) 100%)}
  .site-nav .site-nav-link{display:none}
  .site-menu-btn{display:flex}
  .site-nav .btn-primary{font-size:13.5px;padding:9px 14px}
  /* tendina agganciata sotto la barra fissa (62px su mobile) */
  .site-menu{position:absolute;top:62px;left:0;right:0;flex-direction:column;gap:2px;
             padding:10px 14px 14px;background:rgba(11,13,18,.96);
             border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.35)}
  @supports (backdrop-filter:blur(10px)){.site-menu{background:rgba(11,13,18,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
  .site-menu.open{display:flex}
  .site-menu a{color:#E8F1FC;font-size:15px;font-weight:600;padding:13px 12px;border-radius:10px}
  .site-menu a:hover,.site-menu a:active{background:rgba(120,170,236,.14)}
  .container.sec-pad{padding:52px 18px}
  .container.sec-pad-foot{padding:44px 18px 36px}
  .sec-title{font-size:clamp(24px,6.2vw,30px)}
  .sec-lead{font-size:15.5px;line-height:1.62}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px;margin-bottom:40px}
  .foot-cols>:first-child{grid-column:1/-1}
  .container.foot-cta{padding:36px 18px}
}

/* --- Telefono: tutto su una colonna --- */
@media (max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr;gap:14px}
  /* su telefono il link della testata e' ridondante: ogni card ha il suo "Accedi" */
  .svc-head>a{display:none}
  .svc-row{grid-template-columns:1fr;gap:12px}
  .svc-lg{padding:22px 20px 18px}
  /* card a tutta larghezza: la foto copre piu' testo, quindi velo piu' fitto */
  .svc-photo{box-shadow:inset 0 0 0 999px rgba(255,255,255,calc(var(--svc-veil,.5) + .14))}
  .svc-title{font-size:21px}
  .g3.g-keep-2,.g4.g-keep-2,.g2s{grid-template-columns:1fr 1fr}
  .grid{gap:14px}
  .card{padding:20px;border-radius:16px}
  h1.page{font-size:clamp(25px,6.6vw,34px)}
  .lead{font-size:15px;margin-bottom:22px}
  .btn,.btn-primary{min-height:44px;padding:11px 18px}
  .field{font-size:16px}
  .loginbox{padding:22px;border-radius:18px}
  .container{padding:0 18px}
  .page-wrap{padding:20px 16px 48px}

  /* righe evento: data sopra, azione a tutta larghezza */
  .row-item{flex-wrap:wrap;gap:12px 14px;padding:16px 18px}
  .row-act{width:100%}
  .row-stack .row-when{width:100%}
  .row-stack .row-body{min-width:100%}

  /* tab a pillola: scorrimento orizzontale invece di andare a capo */
  .pill-tabs{display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pill-tabs::-webkit-scrollbar{display:none}
  .pill-tabs a{flex:none;white-space:nowrap}

  /* filtri on demand: etichetta sopra i chip */
  .od-filter{gap:8px}
  .od-filter-label{min-width:100%}
  .chip{padding:8px 14px}

  .live-hero-media{min-height:190px}
  .live-hero-body{padding:22px}
  /* email lunghe non devono sfondare la card */
  .profile-head{padding:22px;gap:16px;overflow-wrap:anywhere}
  .dark .blob{width:220px;height:220px;top:-70px;right:-50px}

  .foot-cols{gap:24px}
  .foot-bottom{gap:12px}
  .foot-bottom>div{margin-left:0!important;gap:14px!important}
}

/* --- Telefono stretto --- */
@media (max-width:400px){
  .topbar-brand{display:none}
  .foot-cols{grid-template-columns:1fr}
}

/* --- Chi preferisce meno animazioni --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sidebar,.scrim{transition:none}
  .totop{transition:none}
  .svc{transition:none}
  .svc:hover{transform:none}
  .fm-dark .fm-glow{animation:none}
  .fm-dark .svc::after{transition:none;display:none}
  .svc-photo{transition:none}
  }

/* ============================================================
   PLAYER DEI FORMAT — annuncio + teatro (video Vimeo + Q&A)
   Vedi app/views/_format_player.php
   ============================================================ */
/* [hidden] deve vincere anche su .grid/.card del blocco annuncio/teatro */
.fmt-announce[hidden],.fmt-theater[hidden]{display:none!important}
.fmt-theater{padding:20px;margin-bottom:28px}
.fmt-theater-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.fmt-live-badge{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;background:var(--blue);color:#fff;padding:6px 12px;border-radius:7px;display:inline-flex;align-items:center;gap:7px;flex:none}
.fmt-live-badge .dot{width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block;animation:fmtpulse 1.6s ease-in-out infinite}
@keyframes fmtpulse{0%,100%{opacity:1}50%{opacity:.25}}
.fmt-theater-title{font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.25}
.fmt-theater-meta{font-size:12.5px;color:#BDD8F5;margin-top:2px}
.fmt-theater-body{display:flex;gap:16px;align-items:stretch}
.fmt-stage{flex:1;min-width:0;position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.fmt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Striscia chiara sponsor + promemoria: tra il player e l'elenco, fuori dal
   riquadro scuro. Discreta, su fondo chiaro. Compare solo in diretta. */
.fmt-ticker{height:40px;margin:0 0 28px;display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.fmt-ticker[hidden]{display:none!important}
.fmt-ticker-label{flex:none;font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);padding:0 16px;border-right:1px solid var(--line);background:var(--paper);white-space:nowrap;align-self:stretch;display:flex;align-items:center}
.fmt-ticker-wrap{flex:1;overflow:hidden;mask-image:linear-gradient(to right,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%)}
.fmt-ticker-track{display:flex;align-items:center;gap:22px;padding:0 18px;width:max-content;animation:fmtTicker 45s linear infinite}
.fmt-ticker-track:hover{animation-play-state:paused}
.fmt-ticker-logo{flex:none;display:inline-flex;align-items:center;font-weight:700;color:var(--ink-2);text-decoration:none;transition:opacity .2s,filter .2s,color .2s}
.fmt-ticker-logo img{object-fit:contain;display:block}
.fmt-ticker-logo:hover{opacity:1;filter:none;color:var(--ink)}
/* Livelli: più in alto = più grande, più nitido, più opaco */
.fmt-tier-platinum{font-size:15px;opacity:1;filter:grayscale(0)}
.fmt-tier-platinum img{height:24px;max-width:130px}
.fmt-tier-gold{font-size:13px;opacity:.8;filter:grayscale(.5)}
.fmt-tier-gold img{height:19px;max-width:110px}
.fmt-tier-silver{font-size:11.5px;opacity:.6;filter:grayscale(1)}
.fmt-tier-silver img{height:16px;max-width:92px}
.fmt-tier-bronze{font-size:10.5px;opacity:.48;filter:grayscale(1)}
.fmt-tier-bronze img{height:14px;max-width:82px}
.fmt-ticker-rem{flex:none;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.03em;color:var(--mut);white-space:nowrap}
.fmt-ticker-sep{flex:none;width:3px;height:3px;border-radius:50%;background:var(--line-2)}
@keyframes fmtTicker{0%{transform:translateX(0)}100%{transform:translateX(calc(-100% / 3))}}
@media (prefers-reduced-motion:reduce){.fmt-ticker-track{animation:none}}

.fmt-chat{width:330px;flex:none;display:flex;flex-direction:column;background:rgba(255,255,255,.04);border:1px solid rgba(120,170,236,.16);border-radius:12px;overflow:hidden}
.fmt-chat-head{padding:13px 16px;font-weight:700;font-size:13.5px;border-bottom:1px solid rgba(120,170,236,.16);display:flex;align-items:center;gap:8px}
.fmt-chat-head .dot{width:7px;height:7px;border-radius:50%;background:#00E06A;display:inline-block}
.fmt-chat-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:15px;min-height:0}
.fmt-q-who{font-size:11.5px;font-weight:700;color:var(--sky)}
.fmt-q-txt{font-size:13px;line-height:1.5;color:#DCE8F7;margin-top:2px}
.fmt-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(120,170,236,.16)}
.fmt-chat-form input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(120,170,236,.2);color:#fff;border-radius:9px;padding:10px 12px;font-size:13px;font-family:inherit}
.fmt-chat-form input::placeholder{color:#7C9AC0}
.fmt-chat-form button{flex:none;border:none;cursor:pointer;background:var(--blue);color:#fff;border-radius:9px;padding:0 14px;font-weight:600;font-size:13px}
.fmt-chat-note{font-size:11px;color:#7C9AC0;padding:0 12px 12px;text-align:center}

@media (max-width:900px){
  .fmt-theater-body{flex-direction:column}
  .fmt-chat{width:auto;height:300px}
}

/* ============================================================
   PIENA LARGHEZZA PROTETTA
   .page-wrap riempie lo spazio dopo la sidebar; solo i blocchi
   "da leggere/guardare" restano entro una misura comoda, così
   il video non diventa gigante e nelle righe la data e il
   pulsante non si allontanano troppo. Griglie, calendario e
   filtri restano invece a piena larghezza.
   ============================================================ */
.fmt-player,.live-hero{max-width:1440px}
.row-item{max-width:1440px}

/* ============================================================
   PRESENZE — contatore in diretta e pannello di rilevazione
   Fonte del dato: la piattaforma, non il provider video (ADR-011).
   ============================================================ */
.fmt-online{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.03em;
  color:#BDD8F5;background:rgba(255,255,255,.07);border:1px solid rgba(189,216,245,.28);padding:6px 13px;border-radius:999px}
.fmt-online-n{color:#fff;font-weight:700;font-size:13px}

.pres-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:26px}
.pres-kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.pres-kpi.now{background:var(--dark);border-color:var(--dark)}
.pres-kpi .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--sky);margin-bottom:9px}
.pres-kpi .v{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pres-kpi .u{font-size:12.5px;color:var(--mut);margin-top:6px}
.pres-kpi.now .v,.pres-kpi.now .u{color:#fff}
.pres-kpi.now .u{color:#8FB4E6}

.pres-curve{display:flex;align-items:flex-end;gap:3px;height:110px;padding:14px 0 0;border-bottom:1px solid var(--line)}
.pres-curve i{flex:1;min-width:2px;background:var(--sky-2);border-radius:3px 3px 0 0;display:block}
.pres-curve i:hover{background:var(--blue)}

.pres-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.pres-tbl th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sky);font-weight:600;padding:0 12px 11px;border-bottom:1px solid var(--line)}
.pres-tbl td{padding:13px 12px;border-bottom:1px solid var(--line)}
.pres-tbl tr:last-child td{border-bottom:none}
.pres-tbl .num{font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.pres-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);display:inline-block;margin-right:7px}
.pres-no{color:var(--mut)}
.pres-note{background:var(--chip);border-radius:14px;padding:20px 22px;font-size:13px;color:var(--mut);line-height:1.6}
.pres-note b{color:var(--ink-2)}