/* ═══ PIANO EDITORIALE (prefisso pi): il calendario dei contenuti ══════════
   Colori dalle variabili del tema; la tipologia colora il bordo delle voci. */
/* Il sesto colore degli stati (17/09): serviva per "Da editare" e non c'era
   nel tema. Sta qui e non nel guscio perche' lo usa solo il Piano. */
:root { --viola: #a87ad0; --storia: #e0569f; }
html.light { --viola: #6f4a9c; --storia: #b02a74; }
/* ── la barra di navigazione (Logan 13/09 sera: "accattivante come il pop-up") ── */
.pi-barra { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; margin-bottom:10px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface2)); }
.pi-nav, .pi-viste { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pi-freccia { width:32px; height:32px; border-radius:50%; border:1px solid var(--accent); background:var(--surface); color:var(--accent); font-size:20px; line-height:1; cursor:pointer; padding:0 0 3px; transition:background .15s, transform .15s, box-shadow .15s; }
.pi-freccia:hover { background:var(--accent); color:var(--bg); transform:scale(1.06); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.pi-titolo { min-width:220px; text-align:center; display:flex; flex-direction:column; line-height:1.15; }
.pi-titolo b { font-family:var(--font-display); font-size:14px; letter-spacing:.5px; color:var(--text); }
.pi-titolo span { font-size:11.5px; color:var(--muted); margin-top:3px; }
.pi-pillola { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s, transform .15s; }
.pi-pillola:hover { border-color:var(--accent); transform:translateY(-1px); }
.pi-pillola-oro { border-color:var(--accent); color:var(--accent); background:var(--chip-bg-gold); }
.pi-pillola-oro:hover { background:var(--accent); color:var(--bg); }
.pi-pillola-oro i { width:9px; height:9px; border-radius:2px; background:currentColor; display:inline-block; }
.pi-pillola:disabled { opacity:.6; cursor:default; transform:none; }
/* l'interruttore Mese / Settimana */
.pi-switch { display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--border); background:var(--surface); }
.pi-switch button { border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:600; padding:5px 14px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s; }
.pi-switch button.on { background:var(--accent); color:var(--bg); box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.pi-switch button:not(.on):hover { color:var(--text); }
/* la legenda coi conteggi a tessera */
.pi-legenda { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:10px; padding:0 6px; }
.pi-leg { display:inline-flex; align-items:center; }
.pi-legenda .pi-conta { margin-left:auto; display:inline-flex; gap:8px; }
.pi-conta-n { display:inline-flex; align-items:baseline; gap:5px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--muted); }
.pi-conta-n b { font-family:var(--font-display); font-size:13px; color:var(--text); }
.pi-conta-n.pi-st-pubblicato { border-color:var(--green); color:var(--green); background:var(--chip-bg-green); }
.pi-conta-n.pi-st-pubblicato b { color:var(--green); }
.pi-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pi-dot.tip-contenuti { background:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.pi-dot.tip-vendita { background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }

.pi-intest { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; padding:0 4px 4px; }
.pi-griglia { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.pi-cella { min-height:112px; border:1px solid var(--border); border-radius:12px; padding:6px; background:var(--surface); display:flex; flex-direction:column; gap:4px; transition:border-color .15s, box-shadow .15s; }
.pi-cella:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pi-cella:nth-child(7n), .pi-cella:nth-child(7n-1) { background:color-mix(in srgb, var(--surface2) 60%, var(--surface)); }
.pi-griglia.pi-sett .pi-cella { min-height:260px; }
.pi-cella.pi-fuori { opacity:.45; }
.pi-cella.pi-passato:not(.pi-oggi) .pi-n { opacity:.6; }
.pi-cella.pi-oggi { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); }
/* il bordo del giorno nel colore dello stato (Logan 14/09), con lo stesso
   bagliore dei LED; oggi tiene in piu' il suo anello oro */
.pi-cella-da_scrivere, .pi-cella-bozza_pronta, .pi-cella-da_editare, .pi-cella-da_caricare, .pi-cella-programmato, .pi-cella-pubblicato { --st:var(--border); border-color:var(--st) !important; box-shadow:0 0 0 1px color-mix(in srgb, var(--st) 55%, transparent), 0 0 18px color-mix(in srgb, var(--st) 55%, transparent), inset 0 0 14px color-mix(in srgb, var(--st) 12%, transparent); }
.pi-cella-da_scrivere { --st:var(--red); }
.pi-cella-bozza_pronta { --st:var(--orange); }
.pi-cella-da_editare { --st:var(--viola); }
.pi-cella-da_caricare { --st:var(--yellow); }
.pi-cella-programmato { --st:var(--blue); }
.pi-cella-pubblicato { --st:var(--green); }
.pi-cella.pi-oggi.pi-cella-da_scrivere, .pi-cella.pi-oggi.pi-cella-bozza_pronta, .pi-cella.pi-oggi.pi-cella-da_editare, .pi-cella.pi-oggi.pi-cella-da_caricare, .pi-cella.pi-oggi.pi-cella-programmato, .pi-cella.pi-oggi.pi-cella-pubblicato { box-shadow:0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--st) 55%, transparent); }
.pi-cella-da_scrivere:hover, .pi-cella-bozza_pronta:hover, .pi-cella-da_editare:hover, .pi-cella-da_caricare:hover, .pi-cella-programmato:hover, .pi-cella-pubblicato:hover { box-shadow:0 0 0 1px var(--st), 0 0 26px color-mix(in srgb, var(--st) 70%, transparent); }
.pi-testa { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:2px; }
/* i LED di stato sulla cella (Logan 14/09): un pallino acceso per contenuto,
   stesso semaforo con bagliore dei tag del modulo KPI */
.pi-led-row { display:inline-flex; gap:5px; align-items:center; flex:1; }
.pi-led { --led:var(--muted); display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--led); box-shadow:0 0 0 1px color-mix(in srgb, var(--led) 45%, transparent), 0 0 8px color-mix(in srgb, var(--led) 70%, transparent); }
.pi-led-da_scrivere { --led:var(--red); }
.pi-led-bozza_pronta { --led:var(--orange); }
.pi-led-da_editare { --led:var(--viola); }
/* PRONTA PER STANOTTE (17/09): non e' uno stato a se', e' la casella Da
   scrivere che ha gia' la scelta dentro. Anello attorno al LED. */
.pi-led-pronta { box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--led), 0 0 8px color-mix(in srgb, var(--led) 70%, transparent); }
.pi-led-da_caricare { --led:var(--yellow); }   /* giallo: il rosso e l'arancione erano troppo simili (Logan 14/09) */
.pi-led-programmato { --led:var(--blue); }
.pi-led-pubblicato { --led:var(--green); }
.pi-griglia.pi-sett .pi-led { width:11px; height:11px; }
.pi-leg .pi-led { margin-right:6px; }
/* la legenda in pop-up (Logan 14/09): quattro tessere, una per stato, nel
   suo colore; in testa la striscia dei LED nell'ordine del percorso */
.pi-modal-legenda { --pi-col:var(--accent); }
.pi-leg-striscia { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 20px 4px; }
.pi-leg-striscia .pi-led { width:14px; height:14px; }
.pi-leg-freccia { color:var(--muted); font-size:18px; line-height:1; }
.pi-leg-tessere { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; padding:14px 20px 0; }
.pi-leg-tessera { --col:var(--muted); position:relative; border:1px solid color-mix(in srgb, var(--col) 55%, var(--border)); border-radius:12px; padding:12px 14px 12px 16px; background:linear-gradient(180deg, color-mix(in srgb, var(--col) 12%, var(--surface)), var(--surface)); overflow:hidden; }
.pi-leg-tessera::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--col); }
.pi-leg-da_scrivere { --col:var(--red); }
.pi-leg-bozza_pronta { --col:var(--orange); }
.pi-leg-da_editare { --col:var(--viola); }
.pi-leg-da_caricare { --col:var(--yellow); }
.pi-leg-programmato { --col:var(--blue); }
.pi-leg-pubblicato { --col:var(--green); }
.pi-leg-tessera-testa { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.pi-leg-tessera .pi-led { width:12px; height:12px; }
.pi-leg-n { font-family:var(--font-display); font-size:12px; color:var(--col); opacity:.9; }
.pi-leg-nome { font-family:var(--font-display); font-size:14px; color:var(--col); letter-spacing:.3px; }
.pi-leg-sotto { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:3px 0 6px; }
.pi-leg-testo { font-size:12.5px; line-height:1.5; color:var(--text); }
.pi-leg-nota { margin:14px 20px 0; padding:10px 14px; border-radius:10px; background:var(--surface2); border:1px dashed var(--yellow); font-size:12px; color:var(--muted); line-height:1.5; }
@media (max-width: 640px) { .pi-leg-tessere { grid-template-columns:1fr; } }
.pi-n { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pi-griglia.pi-sett .pi-n { font-size:13px; font-weight:600; color:var(--text); }
.pi-oggi .pi-n { color:var(--bg); background:var(--accent); font-weight:700; border-radius:999px; padding:1px 8px; }
.pi-add { border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:50%; width:22px; height:22px; line-height:18px; font-size:15px; cursor:pointer; padding:0; opacity:.5; transition:all .15s; }
.pi-cella:hover .pi-add { opacity:1; }
.pi-add:hover { color:var(--bg); background:var(--accent); border-color:var(--accent); transform:scale(1.1); }

.pi-chip { display:block; border-radius:8px; padding:5px 7px; font-size:11.5px; line-height:1.3; border:1px solid var(--accent); text-decoration:none; color:var(--text); cursor:pointer; }
.pi-chip .pi-tit { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pi-chip .pi-sub { display:block; font-size:10.5px; color:var(--muted); margin-top:2px; }
.pi-chip .pi-num { display:block; font-size:11px; color:var(--text); margin-top:2px; font-variant-numeric:tabular-nums; }
.pi-chip.tip-contenuti { border-color:var(--blue); }
.pi-chip.tip-vendita { border-color:var(--green); }
.pi-pub { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.pi-pub.tip-contenuti { background:color-mix(in srgb, var(--blue) 12%, transparent); }
.pi-pub.tip-vendita { background:color-mix(in srgb, var(--green) 12%, transparent); }
.pi-plan { border-style:dashed; background:transparent; }
.pi-plan[draggable="true"] { cursor:grab; }
.pi-plan.pi-dragging { opacity:.35; }
.pi-cella.pi-drop { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pi-plan.pi-fatto { opacity:.5; }
/* gli stati: Da scrivere (puntinato, arancio), Da caricare (tratteggiato, oro),
   Programmato (tratteggiato, testo pieno), Pubblicato (chip piena) */
.pi-plan.pi-st-da_scrivere { border-style:dotted; }
.pi-plan.pi-st-da_scrivere .pi-sub { color:var(--red); }
.pi-plan.pi-st-bozza_pronta { border-style:solid; border-color:var(--orange); }
.pi-plan.pi-st-bozza_pronta .pi-sub { color:var(--orange); }
.pi-plan.pi-st-da_editare { border-style:solid; border-color:var(--viola); }
.pi-plan.pi-st-da_editare .pi-sub { color:var(--viola); }
.pi-coda { display:block; font-size:10px; color:var(--accent); margin-top:3px; font-style:italic; }
.pi-plan.pi-pronta { border-style:dashed; background:color-mix(in srgb, var(--accent) 6%, transparent); }
.pi-plan.pi-st-da_caricare .pi-sub { color:var(--accent); }
.pi-plan.pi-st-programmato { border-style:solid; }
.pi-plan.pi-st-programmato .pi-sub { color:var(--text); }
.pi-chip { position:relative; }
/* la tendina dello stato sulla chip (al posto della matita e dell'editor) */
.pi-stato { display:block; width:100%; margin-top:4px; font-size:10.5px; padding:2px 4px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); cursor:pointer; }
.pi-st-da_scrivere .pi-stato { color:var(--red); }
.pi-st-bozza_pronta .pi-stato { color:var(--orange); }
.pi-st-da_editare .pi-stato { color:var(--viola); }
.pi-st-da_caricare .pi-stato { color:var(--accent); }
.pi-st-programmato .pi-stato { color:var(--blue); }
.pi-griglia.pi-sett .pi-stato { font-size:12px; padding:4px 6px; }
.pi-stato-popup { font-size:12px; padding:4px 8px; }
.pi-modal-azioni { display:flex; gap:6px; align-items:center; }
/* ── le PROPOSTE del motore (13/09 sera): chip a se', giallo del tema ──── */
.pi-dot-prop { background:var(--yellow); box-shadow:0 0 0 3px color-mix(in srgb, var(--yellow) 18%, transparent); }
.pi-plan.pi-proposta { border-style:dashed; border-color:var(--yellow); background:color-mix(in srgb, var(--yellow) 7%, var(--surface)); padding-top:18px; }
.pi-prop-tag { position:absolute; top:-1px; left:-1px; font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--bg); background:var(--yellow); padding:2px 7px; border-radius:8px 0 8px 0; }
.pi-arg { display:block; font-size:10.5px; color:var(--text); margin-top:3px; font-style:italic; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pi-prop-azioni { display:flex; gap:4px; margin-top:6px; }
.pi-prop-azioni button { border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:10.5px; padding:3px 7px; border-radius:6px; cursor:pointer; }
.pi-prop-azioni .pi-ok { flex:1; border-color:var(--green); color:var(--green); }
.pi-prop-azioni .pi-ok:hover { background:var(--green); color:var(--bg); }
.pi-prop-azioni .pi-no { color:var(--muted); }
.pi-prop-azioni .pi-no:hover { border-color:var(--red); color:var(--red); }
.pi-griglia.pi-sett .pi-arg { font-size:12px; }
.pi-pill.pi-pill-prop { color:var(--yellow); background:color-mix(in srgb, var(--yellow) 14%, transparent); }
.pi-pillola-ok { border-color:var(--green); color:var(--green); background:var(--chip-bg-green); }
.pi-pillola-ok:hover { background:var(--green); color:var(--bg); }
.pi-argomento { font-size:14px; font-weight:600; color:var(--text); }
.pi-motivo { border-left-color:var(--yellow); background:color-mix(in srgb, var(--yellow) 8%, var(--surface)); }
/* i segnali sopra il calendario */
.pi-segnali { margin-bottom:12px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface2); }
.pi-segnali-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:8px; }
.pi-segnali-k span { text-transform:none; letter-spacing:0; }
.pi-segnali-lista { display:flex; flex-wrap:wrap; gap:6px; }
.pi-segnale { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.pi-segnale i { font-style:normal; font-size:11px; }
.pi-segnale.pi-seg-spingi { border-color:var(--green); } .pi-segnale.pi-seg-spingi i { color:var(--green); }
.pi-segnale.pi-seg-frena { border-color:var(--red); } .pi-segnale.pi-seg-frena i { color:var(--red); }
.pi-segnale.pi-seg-rifai { border-color:var(--accent); } .pi-segnale.pi-seg-rifai i { color:var(--accent); }
.pi-segnale.pi-seg-prova { border-color:var(--blue); } .pi-segnale.pi-seg-prova i { color:var(--blue); }
/* aggancio di un reel salvato (pop-up Da scrivere) */
.pi-aggancia { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pi-aggancia select { max-width:100%; flex:1; min-width:220px; }
/* il giorno di uscita nel pannello del reel, dopo il salvataggio su Drive */
.reel-giorno { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px; border:1px solid var(--accent); border-radius:10px; background:var(--chip-bg-gold); }
.reel-giorno-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--accent); font-weight:600; }
.reel-giorno-v { font-size:13px; color:var(--text); }
.reel-giorno-v b { font-family:var(--font-display); }
.reel-giorno input[type="date"] { font-size:12.5px; padding:5px 8px; margin-left:auto; }
/* la tendina del "+" nella cella: scegli il tipo e la riga nasce */
.pi-nuovo { display:block; width:100%; margin-top:4px; font-size:11px; padding:3px 4px; border:1px dashed var(--accent); border-radius:8px; background:var(--surface); color:var(--text); }

/* ── il pop-up dei dettagli ─────────────────────────────────────────────────
   Il colore della tipologia entra dal bordo alto (oro traffico, blu contenuto,
   verde vendita); lo stato e' una pillola col suo colore; la data una tessera;
   i link sono bottoni distinti per destinazione; tra le metriche l'obiettivo
   e' la tessera grande. Tutto dalle variabili del tema, niente hex fissi. */
.pi-modal { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.72); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; padding:24px; }
.pi-modal-box { --pi-col:var(--accent); --pi-chip:var(--chip-bg-gold); background:var(--surface); border:1px solid var(--border); border-top:4px solid var(--pi-col); border-radius:14px; width:100%; max-width:660px; max-height:90vh; overflow:auto; padding:0 0 18px; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.pi-modal-box.tip-contenuti { --pi-col:var(--blue); --pi-chip:var(--chip-bg-blue); }
.pi-modal-box.tip-vendita { --pi-col:var(--green); --pi-chip:var(--chip-bg-green); }
.pi-modal-testa { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 20px 12px; background:linear-gradient(180deg, color-mix(in srgb, var(--pi-col) 10%, var(--surface)), var(--surface)); }
.pi-modal-tipo { display:flex; align-items:center; gap:6px; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--pi-col); font-weight:600; margin-bottom:6px; }
.pi-modal-tipo span { color:var(--muted); font-weight:400; letter-spacing:.3px; text-transform:none; font-size:12px; }
.pi-modal-tipo .pi-dot { background:var(--pi-col); margin:0; }
.pi-modal-titolo { font-family:var(--font-display); font-size:15px; line-height:1.35; color:var(--text); }
.pi-modal-chiudi { border:1px solid var(--border); background:transparent; color:var(--muted); width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:12px; flex:none; }
.pi-modal-chiudi:hover { color:var(--text); border-color:var(--pi-col); }
.pi-modal-barra { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 20px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface2); }
.pi-modal-azioni { display:flex; gap:6px; align-items:center; margin-left:auto; }
.pi-pill { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid currentColor; }
.pi-pill.pi-st-da_scrivere { color:var(--red); background:var(--chip-bg-red); }
.pi-pill.pi-st-bozza_pronta { color:var(--orange); background:var(--chip-bg-orange); }
.pi-pill.pi-st-da_editare { color:var(--viola); background:color-mix(in srgb, var(--viola) 14%, transparent); }
.pi-pill.pi-st-da_caricare { color:var(--accent); background:var(--chip-bg-gold); }
.pi-pill.pi-st-programmato { color:var(--blue); background:var(--chip-bg-blue); }
.pi-pill.pi-st-pubblicato { color:var(--green); background:var(--chip-bg-green); }
.pi-data { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.pi-data b { font-family:var(--font-display); font-size:18px; color:var(--text); line-height:1; }
.pi-data span { color:var(--text); }
.pi-data em { font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; }
.pi-sezione { padding:14px 20px 0; }
.pi-sezione-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:8px; }
.pi-riassunto { margin:0; padding:10px 14px; border-left:3px solid var(--pi-col); background:var(--pi-chip); border-radius:0 10px 10px 0; font-size:13.5px; line-height:1.55; color:var(--text); }
.pi-links { display:flex; flex-wrap:wrap; gap:8px; }
.pi-link { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:10px; border:1px solid var(--border); font-size:12.5px; text-decoration:none; color:var(--text); background:var(--surface2); transition:border-color .15s, transform .15s; }
.pi-link:hover { transform:translateY(-1px); }
.pi-link i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.pi-link-ig i { background:linear-gradient(45deg, #f09433, #dc2743, #bc1888); border-radius:50%; }
.pi-link-ig:hover { border-color:#dc2743; }
.pi-link-scrivi { cursor:pointer; font-family:inherit; border-color:var(--orange); color:var(--orange); background:var(--chip-bg-orange); }
.pi-link-scrivi i { background:var(--orange); }
.pi-link-scrivi:hover { background:var(--orange); color:var(--bg); }
.pi-link-doc i { background:var(--accent); }
.pi-link-doc:hover { border-color:var(--accent); }
.pi-link-mc i { background:var(--blue); transform:rotate(45deg); }
.pi-link-mc:hover { border-color:var(--blue); }
.pi-metriche { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.pi-m { border:1px solid var(--border); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; background:var(--surface2); }
.pi-m-k { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.pi-m-v { font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.pi-m.pi-m-obiettivo { grid-column:1 / -1; flex-direction:row; align-items:baseline; justify-content:space-between; border-color:var(--pi-col); background:var(--pi-chip); padding:12px 14px; }
.pi-m.pi-m-obiettivo .pi-m-k { color:var(--pi-col); font-weight:600; }
.pi-m.pi-m-obiettivo .pi-m-v { font-family:var(--font-display); font-size:26px; color:var(--pi-col); }
@media (max-width: 640px) { .pi-metriche { grid-template-columns:repeat(2, 1fr); } .pi-modal-box { max-width:100%; } }
.pi-plan.pi-fatto .pi-tit { text-decoration:line-through; }
.pi-griglia.pi-sett .pi-chip { font-size:13px; padding:8px 10px; }
.pi-griglia.pi-sett .pi-chip .pi-sub { font-size:11.5px; }

@media (max-width: 900px) { .pi-cella { min-height:80px; } }

/* ── PREPARAZIONE PER LA NOTTE (Logan 17/09) ────────────────────────────────
   La rosa da cui scegliere (notizie, commenti, ricerca, idee) e i campi da
   riempire. Sta nel pop-up della casella Da scrivere. */
.pi-prepara .pi-fonti { display:flex; flex-direction:column; gap:4px; max-height:240px; overflow:auto; margin-bottom:12px;
  border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--surface2); }
.pi-fonti-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:4px; }
.pi-fonte { display:block; padding:7px 10px; border:1px solid transparent; border-radius:8px; cursor:pointer; transition:background .12s, border-color .12s; }
.pi-fonte:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.pi-fonte.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.pi-fonte input { margin-right:8px; vertical-align:top; margin-top:3px; }
.pi-fonte-testo { display:inline-block; width:calc(100% - 52px); font-size:12.5px; line-height:1.45; color:var(--text); }
.pi-fonte-nota { display:block; margin-left:26px; font-size:11px; color:var(--muted); }
/* la x "gia' fatta": si vede quando passi sulla riga, non affolla la lista */
.pi-fonte { position:relative; }
.pi-fonte-x { position:absolute; top:5px; right:6px; width:20px; height:20px; padding:0; line-height:18px;
              border:1px solid transparent; border-radius:6px; background:transparent; cursor:pointer;
              color:var(--muted); font-size:11px; opacity:0; transition:opacity .12s, color .12s, border-color .12s; }
.pi-fonte:hover .pi-fonte-x { opacity:1; }
.pi-fonte-x:hover { color:var(--red); border-color:color-mix(in srgb, var(--red) 45%, transparent); }
.pi-fonte-x:focus-visible { opacity:1; outline:none; color:var(--red); border-color:var(--red); }
.pi-campo { display:block; margin-bottom:10px; }
.pi-campo-k { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:4px; }
.pi-campo-k b { color:var(--red); }
.pi-campo textarea, .pi-campo input { width:100%; border:1px solid var(--border); border-radius:8px; padding:8px 10px;
  font-size:13px; line-height:1.55; color:var(--text); background:var(--surface2); font-family:inherit; resize:vertical; }
.pi-campo textarea:focus, .pi-campo input:focus { outline:none; border-color:var(--accent); }
.pi-prepara-azioni { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
/* il TASTO che mette in coda: dorato come gli altri tasti del calendario
   (Logan 24/09: "troppo evidente, basta farlo dorato come gli altri, non
   serviva strafare"). Resta squadrato per non sembrare un'etichetta. */
.pi-tasto { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:9px; border:1px solid var(--border);
            font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.pi-tasto i { width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; display:inline-block; }
.pi-tasto-ok { border-color:var(--accent); color:var(--accent); background:var(--chip-bg-gold); }
.pi-tasto-ok:hover { background:var(--accent); color:var(--bg); }
.pi-tasto-ghost { background:transparent; color:var(--muted); }
.pi-tasto-ghost:hover { border-color:var(--red); color:var(--red); }
.pi-tasto:disabled { opacity:.6; cursor:default; transform:none; box-shadow:none; }
.pi-esito { font-size:12px; color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent);
  border:1px solid var(--red); border-radius:8px; padding:7px 10px; margin-bottom:10px; }
/* il copy scritto stanotte, in sola lettura nel pop-up */
.pi-bozza-headline { font-family:var(--font-display); font-size:14px; color:var(--accent); margin-bottom:6px; }
.pi-bozza { max-height:220px; overflow:auto; white-space:pre-wrap; font-size:12.5px; line-height:1.6; color:var(--text);
  border-left:3px solid var(--orange); background:color-mix(in srgb, var(--orange) 8%, var(--surface)); border-radius:0 10px 10px 0; padding:10px 14px; margin-bottom:10px; }
/* il tasto "Espandi" dei campi grandi della preparazione (Logan 17/09) */
.pi-campo-k { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pi-espandi { border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:10px;
  text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:999px; cursor:pointer; }
.pi-espandi:hover { color:var(--accent); border-color:var(--accent); }
/* L'editor "Espandi" del guscio nasce con z-index 1000 in stile inline, come i
   pop-up del Piano: aprendolo da dentro un pop-up finirebbe sotto. Sopra tutto. */
#gm-editor { z-index:1100 !important; }
/* "ho ripreso quello che avevi scritto": la copia locale del browser */
.pi-ripreso { font-size:12px; color:var(--accent); background:var(--chip-bg-gold);
  border:1px solid var(--accent); border-radius:8px; padding:7px 10px; margin-bottom:10px; }

/* il "+" a due tendine (23/09): tipologia, poi tipo di reel */
.pi-nuovo-box { display:flex; flex-direction:column; gap:5px; margin-top:6px; position:relative; }
.pi-nuovo-box .pi-nuovo { width:100%; }
.pi-nuovo-x { position:absolute; top:-22px; right:0; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; }
.pi-nuovo-x:hover { color:var(--red); }

/* il video di vendita da cui nasce la proposta (24/09): Interesse, Friendzone, Riconquista */
.pi-vsl { display:inline-block; margin-left:26px; margin-top:3px; padding:1px 8px; border-radius:999px; border:1px solid var(--green); color:var(--green);
          font-size:10px; letter-spacing:.5px; text-transform:uppercase; background:var(--chip-bg-green); }

/* sulla casella di vendita: il video a cui porta (25/09) */
.pi-vsl-chip { display:inline-block; align-self:flex-start; margin:3px 0 2px; padding:1px 8px; border-radius:999px; border:1px solid var(--green);
               color:var(--green); background:var(--chip-bg-green); font-size:9.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }

/* ═══ PERIODI A TEMA (08/10/2026) ═══ una fascia in testa ai giorni del periodo,
   col nome del lead magnet sul primo giorno e sui lunedi' */
/* PERIODI A TEMA (11/10/2026): ogni periodo ha il suo colore di sfondo,
   quattro tinte diverse da quelle degli stati */
/* dall'11/10/2026 il colore e' del LEAD MAGNET: sette tinte, una per lead magnet */
:root { --pi-lm-1:#3fa7a0; --pi-lm-2:#6f82dc; --pi-lm-3:#c9719c; --pi-lm-4:#a9a24c; --pi-lm-5:#e3946b; --pi-lm-6:#8f9bb0; --pi-lm-7:#86b394; --pi-lm-8:#4fb3e0; }
html.light { --pi-lm-1:#2b8a83; --pi-lm-2:#4a5cb3; --pi-lm-3:#a24d77; --pi-lm-4:#7d7726; --pi-lm-5:#b7643a; --pi-lm-6:#5d6a80; --pi-lm-7:#4f7a5c; --pi-lm-8:#2a7fa8; }
.pi-cella.pi-in-periodo:not(.pi-oggi) { background:color-mix(in srgb, var(--pi-per) 16%, var(--surface)); }
.pi-cella.pi-in-periodo.pi-oggi { background:linear-gradient(180deg, color-mix(in srgb, var(--pi-per) 22%, var(--surface)), color-mix(in srgb, var(--pi-per) 12%, var(--surface))); }
.pi-per-chip { border-color:color-mix(in srgb, var(--pi-per) 70%, transparent); background:color-mix(in srgb, var(--pi-per) 16%, var(--surface)); }
.pi-per-chip i { width:10px; height:10px; border-radius:50%; background:var(--pi-per); flex:none; }
.pi-per-chip span { color:var(--muted); font-weight:500; }
.pi-periodo-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 12px; }
.pi-periodo-nota { font-size:12.5px; line-height:1.55; color:var(--muted); margin:0 0 16px; }
.pi-periodo-form label { display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; }
.pi-periodo-form .pi-per-lm { grid-column:1 / -1; position:relative; display:flex; flex-direction:column; gap:6px; }
.pi-per-lm-k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
/* il menu dei lead magnet col pallino del colore (11/10/2026) */
.pi-lm-sel { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 12px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--text); font-size:13px; font-family:inherit; cursor:pointer; }
.pi-lm-sel::after { content:''; margin-left:auto; border:5px solid transparent; border-top-color:var(--muted); transform:translateY(3px); }
.pi-lm-sel i, .pi-lm-voce i { width:11px; height:11px; border-radius:50%; background:var(--pi-per); flex:none; }
.pi-lm-sel span, .pi-lm-voce span { color:var(--muted); }
.pi-lm-vuoto { color:var(--muted); }
.pi-lm-lista { margin-top:2px; padding:6px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.28); max-height:340px; overflow:auto; }
.pi-lm-gruppo { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; padding:8px 10px 4px; }
.pi-lm-voce { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border:0; border-radius:7px; background:transparent;
  color:var(--text); font-size:13px; font-family:inherit; cursor:pointer; }
.pi-lm-voce:hover { background:color-mix(in srgb, var(--pi-per) 16%, var(--surface)); }
.pi-periodo-form input, .pi-periodo-form select { padding:9px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--text); font-size:13px; font-family:inherit; text-transform:none; }
.pi-periodo-azioni { display:flex; gap:10px; flex-wrap:wrap; }
/* il nome lungo del lead magnet non deve allargare la colonna della griglia */
.pi-griglia > .pi-cella { min-width:0; }

/* Bozza di una casella aperta in Contenuti: si vede solo lei (11/10/2026) */
#content.pi-solo-bozza > :not(#pi-bozza-wrap) { display: none !important; }

/* La tipologia STORIA (11/10/2026): il suo colore in un posto solo */
.pi-dot.tip-storia { background:var(--storia); box-shadow:0 0 0 3px color-mix(in srgb, var(--storia) 18%, transparent); }
.pi-chip.tip-storia { border-color:var(--storia); }
.pi-pub.tip-storia { background:color-mix(in srgb, var(--storia) 12%, transparent); }
.pi-modal-box.tip-storia { --pi-col:var(--storia); --pi-chip:color-mix(in srgb, var(--storia) 14%, transparent); }

/* Le storie nel pop-up (12/10/2026): un blocco per storia, il testo intero nel pop-up sopra */
.pi-storie { display:grid; gap:8px; }
.pi-storia-blocco { display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer; padding:10px 14px; border:1px solid var(--border); border-left:3px solid var(--storia); border-radius:10px; background:var(--surface2); color:var(--text); font:inherit; transition:border-color .15s, background .15s; }
.pi-storia-blocco:hover, .pi-storia-blocco:focus-visible { border-color:var(--storia); background:color-mix(in srgb, var(--storia) 8%, var(--surface2)); outline:none; }
.pi-storia-blocco b { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--storia); }
.pi-storia-blocco span { font-size:13px; }
.pi-storia-blocco em { font-style:normal; font-size:12px; color:var(--muted); }
.pi-storia-pop { z-index:1001; }
.pi-storia-ta { width:100%; min-height:220px; resize:vertical; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); font:inherit; font-size:13.5px; line-height:1.7; }
.pi-storia-ta:focus { outline:none; border-color:var(--storia); }

/* Gli elementi di una storia (12/10/2026): una scheda per storia, un campo per elemento */
.pi-st-schede { display:grid; gap:12px; margin-bottom:6px; }
.pi-st-scheda { border:1px solid var(--border); border-left:3px solid var(--storia); border-radius:10px; padding:12px 14px; background:var(--surface); display:grid; gap:10px; }
.pi-st-scheda-testa { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pi-st-scheda-testa b { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--storia); }
.pi-st-scheda-testa span { font-size:12.5px; color:var(--muted); }
#pi-storia-campi { display:grid; gap:10px; }
.pi-st-campo { display:grid; gap:5px; }
.pi-st-lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); }
.pi-st-in { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; font-size:13.5px; line-height:1.6; }
.pi-st-in:focus { outline:none; border-color:var(--storia); }
.pi-st-ta { resize:vertical; }
.pi-st-head { font-weight:600; color:var(--accent); }
.pi-st-risposte { display:grid; gap:6px; }
.pi-st-risposta { display:flex; align-items:center; gap:8px; }
.pi-st-risposta > span { color:var(--storia); }
/* Il selettore delle emoji dello slider (12/10/2026) */
.pi-st-emoji { display:flex; }
.pi-st-emoji-btn { min-width:64px; height:42px; padding:0 14px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:22px; cursor:pointer; }
.pi-st-emoji-btn:hover, .pi-st-emoji-btn:focus-visible { border-color:var(--storia); outline:none; }
.pi-emoji-pop { position:absolute; z-index:1002; width:300px; padding:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.35); display:grid; gap:8px; }
.pi-emoji-griglia { display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; }
.pi-emoji-griglia button { height:32px; border:0; border-radius:6px; background:transparent; font-size:20px; cursor:pointer; }
.pi-emoji-griglia button:hover, .pi-emoji-griglia button:focus-visible { background:color-mix(in srgb, var(--storia) 14%, transparent); outline:none; }
.pi-st-riga { display:flex; gap:8px; align-items:center; }
.pi-st-riga .pi-st-in { flex:1; }

/* Il lavoro nel pop-up (12/10/2026): il pannello Contenuti dentro la casella */
.pi-modal-box.pi-modal-largo { max-width:1100px; }
#content.pi-in-popup { display:block !important; }
#content.pi-in-popup #reel-tipo-wrap, #content.pi-in-popup #reel-source-wrap { display:none !important; }
.pi-lavoro #content { margin-top:4px; }
#content.pi-in-popup .pi-bozza-chiudi { display:none; }

/* Uno stato per storia (12/10/2026) */
.pi-st-leds { display:flex; gap:4px; margin-top:4px; }
.pi-storia-blocco-testa { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pi-st-stato { font:inherit; font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
.pi-st-stato.pi-st-programmato { border-color:var(--blue); color:var(--blue); }
.pi-st-stato.pi-st-da_scrivere { border-color:var(--red); color:var(--red); }
.pi-st-stato.pi-st-bozza_pronta { border-color:var(--orange); color:var(--orange); }
.pi-st-stato.pi-st-da_editare { border-color:var(--viola); color:var(--viola); }
.pi-st-stato.pi-st-da_caricare { border-color:var(--yellow); color:var(--yellow); }

/* La testimonianza in tre pezzi (12/10/2026) */
#pi-tm-campi { display:grid; gap:10px; margin-bottom:4px; }

.pi-st-lab-riga { display:flex; justify-content:space-between; align-items:center; gap:8px; }
/* la rotella dentro al tasto oro mentre la storia si salva (19/10/2026): l'oro del
   bordo dello spinner sparirebbe sull'oro del tasto, quindi prende il colore del testo */
.pi-storia-pop .btn-primary .spinner { width:12px; height:12px; border-color:color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor; }
.pi-storia-pop .btn-primary:disabled { opacity:1; cursor:wait; }
/* il link del Video YouTube che mancava, incollato dal pop-up (19/10/2026) */
.pi-yt-link { display:flex; gap:8px; flex:1 1 100%; align-items:center; }
.pi-yt-link .pi-st-in { flex:1; min-width:0; }
.pi-yt-link .pi-st-in:focus { border-color:var(--accent); }