/* Circuito Studio · pannello e modalità TV.
   Base della famiglia Circuito (rosso aranciato, Sora per i titoli, DM Sans per il testo), chiaro e scuro.
   L'editor ha il suo tema da regia in editor.css. */
:root{
  --bg:#f3f1ef; --surface:#ffffff; --sunk:#f6f4f2; --line:#ebe7e4; --line2:#ddd8d4; --fg:#1c1917; --fg2:#57534e; --muted:#78716c; --faint:#a8a29e;
  /* il colore del marchio per azioni e titoletti; gli STATI invece seguono il semaforo (verde in onda, giallo da
     fare, rosso problema), così un'etichetta di stato non sembra mai un allarme quando va tutto bene. */
  --accent:#d6432a; --accent-hover:#bf3820; --accent-soft:#fdeee9; --accent-fg:#ffffff; --brand:#d6432a; --live:#2563eb;
  --side:#161312; --side2:#211c1a; --side-fg:#f5f2f0; --side-muted:#9b928d;
  --shadow:0 1px 2px rgba(28,25,23,.05),0 1px 1px rgba(28,25,23,.03); --shadow2:0 10px 30px -12px rgba(28,25,23,.25); --pop:0 24px 60px -12px rgba(0,0,0,.35);
  --f-head:"Sora",system-ui,sans-serif; --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#110f0e; --surface:#1a1716; --sunk:#221e1c; --line:#2a2523; --line2:#38312e; --fg:#f5f2f0; --fg2:#d6d0cc; --muted:#a8a09b; --faint:#78716c;
  --accent:#ff6a4d; --accent-hover:#ff8166; --accent-soft:#3a1d15; --accent-fg:#ffffff; --live:#60a5fa; --side:#0b0a09; --side2:#1a1615;
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow2:0 10px 30px -12px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#110f0e; --surface:#1a1716; --sunk:#221e1c; --line:#2a2523; --line2:#38312e; --fg:#f5f2f0; --fg2:#d6d0cc; --muted:#a8a09b; --faint:#78716c;
  --accent:#ff6a4d; --accent-hover:#ff8166; --accent-soft:#3a1d15; --accent-fg:#ffffff; --live:#60a5fa; --side:#0b0a09; --side2:#1a1615;
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow2:0 10px 30px -12px rgba(0,0,0,.7); color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.45 var(--f-body);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.sp{flex:1}
.hint{font-size:13px;color:var(--muted)}
.err{color:#b42318;font-size:13px}
svg.i{width:17px;height:17px;flex:none}
/* elementi di base */
.brand{display:flex;align-items:center;gap:10px;font:700 16px var(--f-head);letter-spacing:-.02em;white-space:nowrap}
.brand i{width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,#ff7a52,var(--brand,#d6432a));display:grid;place-items:center;box-shadow:0 4px 14px -4px rgba(214,67,42,.6)}
.brand i::after{content:"";width:12px;height:9px;border:2px solid #fff;border-radius:2px}
.brand-t{display:grid;line-height:1.1}
.brand-t small{font:500 11.5px var(--f-body,inherit);letter-spacing:0;color:var(--muted);margin-top:2px}
.st-side .brand-t small{color:var(--side-muted,#9b918c)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line2);background:var(--surface);border-radius:10px;padding:8px 14px;font-weight:600;font-size:13.5px;white-space:nowrap;box-shadow:var(--shadow);transition:background .15s,border-color .15s,transform .05s}
.btn:hover{border-color:var(--faint)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);box-shadow:0 6px 16px -8px rgba(214,67,42,.8)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--sunk)}
.btn.small{padding:6px 10px;font-size:13px;border-radius:9px}
.btn.danger{color:#b42318}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn svg{width:16px;height:16px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:10px;padding:2px;gap:2px;background:var(--sunk)}
.seg button{border:0;background:transparent;padding:5px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--fg2);display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.ori{display:inline-block;border:1.6px solid currentColor;border-radius:2px;width:14px;height:9px;flex:none}
.ori.v{width:9px;height:14px}
.field{display:grid;gap:6px}
.field>label,.flabel{font-size:12.5px;font-weight:700;color:var(--fg2)}
.field input[type=text]{border:1px solid var(--line2);background:var(--surface);border-radius:10px;padding:9px 11px;width:100%}
.field input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.toasts{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:90;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{background:#1c1917;color:#fff;border-radius:12px;padding:10px 16px;font-size:13.5px;box-shadow:var(--pop);border:1px solid rgba(255,255,255,.08);animation:tin .25s ease-out}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
/* struttura del pannello: barra laterale scura e area di lavoro */
.st{height:100%;display:grid;grid-template-columns:232px minmax(0,1fr)}
.st-side{background:var(--side);color:var(--side-fg);display:flex;flex-direction:column;gap:6px;padding:18px 14px calc(16px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));min-height:0}
.st-side .brand{padding:2px 6px 16px}
.st-side .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--side-muted);padding:10px 8px 4px}
.st-nav{display:grid;gap:2px}
.st-nav button{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:9px 10px;border-radius:9px;font-weight:600;color:#cfc7c2;text-align:left}
.st-nav button:hover{background:var(--side2);color:#fff}
.st-nav button[aria-current="page"]{background:var(--side2);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.st-nav button svg{width:18px;height:18px;opacity:.85}
.st-nav .n{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--side-muted);background:rgba(255,255,255,.06);border-radius:99px;padding:1px 8px}
.st-side .grow{flex:1}
.st-arch{font-size:12px;color:var(--side-muted);display:flex;align-items:flex-start;gap:8px;padding:10px 8px;line-height:1.4}
.st-arch::before{content:"";width:8px;height:8px;border-radius:50%;background:#5c5450;flex:none;margin-top:4px}
.st-arch.ok::before{background:#3ccf7c;box-shadow:0 0 0 3px rgba(60,207,124,.18)}
.st-arch.local::before{background:#f2b23e;box-shadow:0 0 0 3px rgba(242,178,62,.18)}
.st-side .btn{background:var(--side2);border-color:#3a3330;color:#fff;box-shadow:none;justify-content:flex-start}
.st-side .btn:hover{border-color:#5a504b}
.st-side .row{display:flex;gap:8px}
.st-side .row .btn{flex:1}
.st-side .btn.tema{flex:none;width:36px;padding:0;justify-content:center}
/* i pulsanti in fondo alla barra (Il sito, Esci): sempre visibili e leggibili, anche con un menu lungo */
.st-side .row .btn{justify-content:center;font-weight:600;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
.st-side .row .btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.st-side .row .btn svg{opacity:.9}
@media (min-width:901px){
  .st-side{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3a3330 transparent}
  .st-side .row{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom,0px));margin:0 -14px calc(-16px - env(safe-area-inset-bottom,0px));padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));background:var(--side);border-top:1px solid rgba(255,255,255,.08);flex:none}
}
.st-main{overflow-y:auto;padding:28px max(28px,env(safe-area-inset-right,0px)) 48px 28px;min-width:0}
.st-wrap{max-width:1240px;margin:0 auto;display:grid;gap:22px}
.st-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.st-head h1{font:700 30px/1.1 var(--f-head);letter-spacing:-.03em;margin:2px 0 0}
.st-head .sub{color:var(--muted);font-size:14px;margin-top:6px}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.card.pad{padding:18px 20px}
/* numeri in evidenza */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{padding:16px 18px;display:grid;gap:4px}
.kpi b{font:700 30px/1 var(--f-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:var(--muted)}
.kpi.live b{color:var(--live)}
.kpi.warn b{color:#b07a00}
/* come funziona */
.howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:n}
.howto div{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;row-gap:2px;counter-increment:n;font-size:13.5px;color:var(--fg2);align-content:start}
.howto div::before{content:counter(n);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--f-head);color:var(--accent);background:var(--accent-soft)}
.howto b{color:var(--fg);font-size:14px}
/* schede degli schermi */
.grid-s{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.scard{display:grid;gap:12px;padding:12px;transition:box-shadow .2s,transform .2s}
.scard:hover{box-shadow:var(--shadow2)}
.scard .pv{position:relative}
.scard .badges{position:absolute;inset:10px 10px auto 10px;display:flex;gap:6px;pointer-events:none;z-index:2}
.live-b{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);color:#fff;font:700 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:4px 8px}
.live-b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
.live-b.off::before{background:#8a817c;animation:none}
.live-b.ori-b::before{display:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,45,.7)}70%{box-shadow:0 0 0 7px rgba(229,72,45,0)}100%{box-shadow:0 0 0 0 rgba(229,72,45,0)}}
.scard h3{font:600 17px var(--f-head);letter-spacing:-.01em;margin:0}
.scard .body{display:grid;gap:8px;padding:0 4px}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap;background:var(--sunk);color:var(--fg2);border:1px solid var(--line)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.onair{background:#e8f7ee;color:#15803d;border-color:#bfe8cf}   /* in onda = verde, come il semaforo: va tutto bene */
.pill.warn{background:#fff6db;color:#8a6100;border-color:#f6e2a4}
.pill.flat::before{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.onair{background:#10291a;color:#4ade80;border-color:#1c4a2d}:root:not([data-theme="light"]) .pill.warn{background:#33290f;color:#f2c14e;border-color:#4d3e14}}
:root[data-theme="dark"] .pill.onair{background:#10291a;color:#4ade80;border-color:#1c4a2d}
:root[data-theme="dark"] .pill.warn{background:#33290f;color:#f2c14e;border-color:#4d3e14}
.rowb{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.scard .rowb{padding:0 4px 4px}
/* riproduttore (miniature e TV) */
.pl-box{position:relative;background:#0c0a09;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.pl-box.h{aspect-ratio:16/9}
.pl-box.vbox{aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#1a1716 0 10px,#151211 10px 20px)}
.pl-root{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.pl-box.vbox .pl-root{width:auto;aspect-ratio:9/16;height:100%;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.pl-slot{position:absolute;inset:0}
.pl-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#a8a09b;font-size:13px;padding:10px;background:radial-gradient(circle at 50% 40%,#2a2422,#141110)}
.pl-empty b{display:block;color:#fff;font:600 15px var(--f-head);margin-bottom:4px}
.pl-box.vbox .pl-empty{font-size:10px;padding:6px}
.pl-box.vbox .pl-empty b{font-size:12px}
/* dettaglio schermo */
.det{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.det .card>b,.det .card .rowb>b{font:600 15px var(--f-head)}
.prog{display:grid;gap:8px;counter-reset:p}
.pitem{display:grid;grid-template-columns:24px 104px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--sunk)}
.pitem .n{font:700 13px var(--f-head);color:var(--muted);text-align:center}
.pitem .th{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.pitem b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitem small{color:var(--muted)}
.ctl{display:flex;gap:4px}
.ctl button{border:1px solid var(--line2);background:var(--surface);border-radius:8px;width:30px;height:30px;font-size:14px;display:grid;place-items:center}
.ctl button:hover:not(:disabled){border-color:var(--faint)}
.ctl button:disabled{opacity:.3}
/* contenuti */
.grid-c{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.ccard{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:10px;transition:box-shadow .2s}
.ccard:hover{box-shadow:var(--shadow2)}
.ccard .th{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;cursor:pointer;position:relative}
.ccard .th::after{content:"Apri nell’editor";position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,10,9,.55);color:#fff;font-weight:700;font-size:13px;opacity:0;transition:opacity .15s}
.ccard .th:hover::after{opacity:1}
.ccard b{font-size:14.5px;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard .meta{padding:0 2px}
.empty-big{padding:36px 28px;text-align:center;display:grid;gap:10px;justify-items:center;color:var(--fg2)}
.empty-big b{font:700 19px var(--f-head);color:var(--fg)}
.empty-big span{max-width:520px}
/* finestre del pannello */
.st-scrim{position:fixed;inset:0;background:rgba(10,8,8,.5);backdrop-filter:blur(3px);z-index:40;display:grid;place-items:center;padding:16px;animation:fin .15s}
@keyframes fin{from{opacity:0}}
.st-modal{background:var(--surface);border-radius:18px;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--pop);display:flex;flex-direction:column;border:1px solid var(--line)}
.st-modal header,.st-modal footer{padding:16px 20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.st-modal header{border-bottom:1px solid var(--line);font:600 17px var(--f-head)}
.st-modal footer{border-top:1px solid var(--line);justify-content:flex-end;background:var(--sunk)}
.st-modal .body2{padding:18px 20px;display:grid;gap:12px;overflow:auto;min-height:0;flex:1 1 auto}
.st-modal header,.st-modal footer{flex:none}
.check{display:flex;gap:10px;align-items:center;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:var(--surface);text-align:left;width:100%}
.check[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.check i{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--faint);flex:none;display:grid;place-items:center}
.check[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent)}
.check[aria-pressed="true"] i::after{content:"";width:8px;height:4px;border:2px solid var(--accent-fg,#fff);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
/* editor dentro il pannello */
#view-editor{position:fixed;inset:0;z-index:20;background:var(--bg)}
/* modalità TV */
.tvmode{position:fixed;inset:0;background:#000;z-index:30;display:grid;place-items:center;cursor:none;color:#fff}
.tvmode.ui-on{cursor:default}
.tv-stage{position:relative}
/* sulla TV vera nessun angolo arrotondato né ombra: lo schermo è tutto immagine, bordo a bordo */
.tvmode .pl-box,.tvmode .pl-root,.tvmode .pl-slot{border-radius:0!important;box-shadow:none!important}
.tv-ui{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.tvmode.ui-on .tv-ui{opacity:1}
.tv-ui .top{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));display:flex;gap:10px;align-items:center;pointer-events:auto;font-size:13px}
.tv-ui .btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff;box-shadow:none}
.tv-badge{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.7);border-radius:10px;padding:8px 12px;font-size:13px;opacity:0;transition:opacity .4s;pointer-events:none}
.tv-badge.on{opacity:1}
.tv-pick{position:fixed;inset:0;background:radial-gradient(circle at 30% 20%,#2a1a14,#0d0b0a 60%);z-index:31;display:grid;place-items:center;padding:16px;cursor:default}
.tv-pick .in{width:min(560px,100%);display:grid;gap:12px;color:#f5f2f0}
.tv-pick h2{font:700 28px var(--f-head);letter-spacing:-.02em;margin:0}
.tv-pick p{color:#a8a09b;margin:0}
.tv-pick button.s{display:flex;justify-content:space-between;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid #36302d;color:#fff;border-radius:14px;padding:16px 18px;font-size:16px;font-weight:600;text-align:left}
.tv-pick button.s:hover{border-color:#ff6a4d;background:rgba(255,106,77,.08)}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  body{overflow:auto}
  .st{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:auto;min-height:100%}
  .st-side{flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));gap:8px}
  .st-side .brand{padding:0}
  .st-side .lbl,.st-side .grow{display:none}
  .st-nav{display:flex;margin-left:auto}
  .st-nav .n{display:none}
  .st-arch{order:5;width:100%;padding:2px 0}
  .st-side .row{order:6}
  .st-main{padding:20px 16px 40px;overflow:visible}
  .det,.howto{grid-template-columns:minmax(0,1fr)}
  .grid-s{grid-template-columns:minmax(0,1fr)}
  .st-head h1{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* calendario della programmazione */
.cal-sel{display:grid;gap:4px}
.cal-sel select,.q-row input{border:1px solid var(--line2);background-color:var(--surface);border-radius:10px;padding:8px 10px;min-width:0}
.cal-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cal-nav b{font:600 16px var(--f-head);letter-spacing:-.01em}
.cal-nav .seg button{min-width:34px;justify-content:center}
.cal{overflow:hidden}
.cal-head{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--sunk)}
.cal-head span{padding:10px 8px;font-size:12.5px;font-weight:600;color:var(--muted);text-align:center}
.cal-head span b{font:700 15px var(--f-head);color:var(--fg);margin-left:2px}
.cal-head span.oggi,.cal-head span.oggi b{color:var(--accent)}
.cal-scroll{height:min(560px,62vh);overflow-y:auto;overscroll-behavior:contain}
.cal-body{position:relative;display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));background-image:repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 30px)}
.cal-ore{position:relative}
.cal-ore span{position:absolute;right:8px;transform:translateY(-50%);font:600 11px var(--f-body);color:var(--faint);font-variant-numeric:tabular-nums}
.cal-ore span:first-child{transform:none}
.cal-col{position:relative;border-left:1px solid var(--line)}
.cal-col.we{background:rgba(120,113,108,.04)}
.cal-col.oggi{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.cal-b{position:absolute;border:0;border-radius:7px;padding:4px 6px;text-align:left;overflow:hidden;display:flex;flex-direction:column;gap:1px;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));color:var(--fg);box-shadow:inset 3px 0 0 var(--c);font-size:11.5px;line-height:1.25;min-height:16px;transition:background .15s}
.cal-b:hover{background:color-mix(in srgb,var(--c) 28%,var(--surface))}
.cal-b b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-b small{color:var(--fg2);font-size:11px}
.cal-ora{position:absolute;left:-1px;right:0;height:2px;background:var(--live);z-index:2;pointer-events:none}
.cal-ora::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--live)}
.cal-vuoto{position:absolute;top:calc(7 * 30px + 8px);left:0;right:0;text-align:center;font-size:11.5px;color:var(--faint)}
.cal-avviso{background:#fff6db;color:#6b4c00;border:1px solid #f6e2a4;border-radius:12px;padding:10px 14px;font-size:13.5px}
:root[data-theme="dark"] .cal-avviso{background:#33290f;color:#f2c14e;border-color:#4d3e14}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cal-avviso{background:#33290f;color:#f2c14e;border-color:#4d3e14}}
.cal-leg{display:grid;gap:10px}
.cal-leg>.rowb b{font:600 15px var(--f-head)}
.cal-li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--sunk)}
.cal-li>i{width:12px;height:12px;border-radius:4px;flex:none}
.cal-li .btn svg,.cal-nav svg,.st-head .btn svg{width:15px;height:15px}
/* programma dello schermo: la regola sotto il nome */
.qchip{display:inline-flex;align-items:center;gap:5px;margin-top:4px;border:1px dashed var(--line2);background:transparent;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:600;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qchip svg{width:13px;height:13px;flex:none}
.qchip.on{border-style:solid;border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent);background:var(--accent-soft)}
.qchip:hover{border-color:var(--faint)}
.pitem>div:nth-child(3){display:grid;justify-items:start}
.pitem.scaduto{opacity:.55}
/* finestra «quando» */
.q-seg{display:flex}.q-seg button{flex:1;justify-content:center}
.q-row{display:flex;gap:10px;flex-wrap:wrap}
.q-row label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg2);flex:1;min-width:150px}
.q-row input{flex:1}
.q-chips{display:flex;gap:6px;flex-wrap:wrap}
.q-chip{border:1px solid var(--line2);background:var(--surface);border-radius:99px;padding:4px 10px;font-size:12.5px;font-weight:600;color:var(--fg2)}
.q-chip:hover{border-color:var(--accent);color:var(--accent)}
.q-giorni{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.q-giorni button{border:1px solid var(--line2);background:var(--surface);border-radius:10px;padding:8px 0;font-weight:700;font-size:13px;color:var(--fg2)}
.q-giorni button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.q-ries{display:flex;gap:10px;align-items:flex-start;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px}
.q-ries svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:1px}
@media (max-width:900px){
  .cal-head,.cal-body{grid-template-columns:40px repeat(7,minmax(0,1fr))}
  .cal-head span{padding:8px 2px;font-size:11px}
  .cal-b{padding:3px;font-size:10.5px}
  .cal-b small{display:none}
}
.cal-tutto{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line2);background:var(--surface)}
.cal-tutto>span{font:600 10.5px/1.2 var(--f-body);color:var(--faint);text-align:right;padding:8px 8px 0 0}
.cal-tutto>div{display:grid;gap:3px;padding:5px 3px;border-left:1px solid var(--line);align-content:start;min-height:34px}
.cal-b.cal-bt{position:static;min-height:22px;padding:3px 7px}
@media (max-width:900px){.cal-tutto{grid-template-columns:40px repeat(7,minmax(0,1fr))}.cal-tutto>span{font-size:9px;padding-right:4px}}
/* collaboratori */
.col-filtri{flex-wrap:wrap;width:max-content;max-width:100%}
.grid-col{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.colcard{display:grid;gap:12px;padding:16px;justify-items:center;text-align:center}
.colcard .rowb{width:100%}
.col-foto{width:96px;height:96px;border-radius:50%;background:var(--sunk) center/cover no-repeat;border:1px solid var(--line);display:grid;place-items:center;font:700 26px var(--f-head);color:var(--muted);flex:none}
.col-foto.big{width:104px;height:104px;font-size:14px;cursor:pointer}
.col-txt{display:grid;gap:4px;justify-items:center}
.col-txt b{font:600 16px var(--f-head)}
.col-edit{display:flex;gap:16px;align-items:center}
.col-edit .hint{display:grid;gap:8px;justify-items:start}
.st-modal .field input[type=text]{width:100%}
.st-side .pn-vai{justify-content:center;text-decoration:none;margin:0 2px}
/* promemoria «da pubblicare» nella barra nera: lo spazio c'è sempre, si accende quando serve */
.pn-pub{min-height:64px;display:flex;align-items:flex-end;margin:0 0 10px}
.pn-pub.ok span{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:12.5px;color:var(--side-muted)}
.pn-pub.ok i{width:7px;height:7px;border-radius:50%;background:#16a34a}
.pn-pub button{display:grid;grid-template-columns:22px 1fr;gap:4px 10px;align-items:start;width:100%;text-align:left;border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.14);color:#fde68a;border-radius:12px;padding:11px 12px;font:inherit;cursor:pointer;animation:pn-pub-entra .35s ease-out}
.pn-pub button:hover{background:rgba(245,158,11,.22)}
.pn-pub button svg{width:20px;height:20px;color:#f59e0b;grid-row:span 2}
.pn-pub button b{display:block;font-size:13px;color:#fff}
.pn-pub button > span{min-width:0}
.pn-pub button small{display:block;font-size:12px;line-height:1.4;color:#fcd34d;opacity:.9;overflow-wrap:anywhere}
.pn-pub button em{grid-column:2;font-style:normal;font-weight:700;font-size:12.5px;color:#1c1917;background:#f59e0b;border-radius:8px;padding:6px 10px;justify-self:start;margin-top:6px}
.pn-pub button:disabled{opacity:.7;cursor:wait}
@keyframes pn-pub-entra{from{opacity:0;transform:translateY(6px)}}
.st-nav button.da-pub::after{content:"";width:8px;height:8px;border-radius:50%;background:#f59e0b;margin-left:auto;box-shadow:0 0 0 3px rgba(245,158,11,.2)}
@media (max-width:900px){.pn-pub{min-height:0;margin:0;order:9;width:100%}.pn-pub.ok{display:none}.pn-pub button{grid-template-columns:20px 1fr auto;align-items:center;padding:8px 10px}.pn-pub button svg{grid-row:auto}.pn-pub button small{display:none}.pn-pub button em{grid-column:auto;margin:0}}
/* contenuto con modifiche non ancora sulle TV: un avviso che spiega, e un tasto giallo che dice cosa fa */
.co-avviso{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;margin:8px 0 4px;padding:10px 12px;border-radius:12px;background:#fff7e0;border:1px solid #f6dc8f;color:#6b4e00;font-size:13px;line-height:1.45}
.co-avviso svg{width:19px;height:19px;color:#d97706;margin-top:1px}
.co-avviso p{margin:0}.co-avviso p + p{margin-top:6px}
.co-avviso b{display:block;color:#3d2c00;font-size:13.5px}
.btn.warn{background:#f59e0b;border-color:#f59e0b;color:#1c1917;font-weight:700}
.btn.warn:hover{background:#e08e06;border-color:#e08e06}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .co-avviso{background:#2b2210;border-color:#4d3e14;color:#f2d38a}:root:not([data-theme="light"]) .co-avviso b{color:#fde68a}}
:root[data-theme="dark"] .co-avviso{background:#2b2210;border-color:#4d3e14;color:#f2d38a}:root[data-theme="dark"] .co-avviso b{color:#fde68a}

.st-nav .n:empty{display:none}   /* niente trattino grigio quando non ci sono notifiche nuove */
.co-dove .pill{max-width:100%;overflow-wrap:anywhere}
.co-avviso > div{min-width:0;overflow-wrap:anywhere}
/* schede dei contenuti uniformi: stessa altezza, pulsanti allineati in fondo, etichette che non si gonfiano */
.ccard{display:flex;flex-direction:column;gap:10px}
.ccard > .rowb:last-child{margin-top:auto}
.co-dove{align-items:flex-start}
.co-dove .pill{align-self:flex-start}
.co-avviso b{white-space:normal}
/* avviso con un tasto (es. «Annulla» dopo una pubblicazione) */
.toast.con-azione{display:flex;align-items:center;gap:14px;pointer-events:auto}
.toast-az{border:0;background:transparent;color:#fdba74;font:inherit;font-weight:700;padding:4px 2px;cursor:pointer;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.toast-az:hover{color:#fff}