/* =====================================================================
   PROGETTI — Marketing Specialistico
   Design: sorella operativa del sito 2026 (dark premium, Sora, gradiente AI)
   Regole cromatiche: gli stati camminano il gradiente del brand e finiscono
   nel verde logo; l'ambra è riservata alle persone; il rosso alle scadenze.
   Font: Sora (interfaccia) + IBM Plex Mono (dati operativi).
   ===================================================================== */

:root{
  /* superfici */
  --bg:#070b16; --bg2:#0a1020; --bg3:#0c1424;
  --panel:rgba(255,255,255,.045);
  --panel2:rgba(255,255,255,.025);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.06);

  /* inchiostro */
  --ink:#e8eef9; --ink-soft:#cdd8ec; --muted:#93a4c0; --muted2:#6f7f9b;

  /* brand */
  --green:#6cf03e; --green-deep:#4fd21f; --green-soft:#a6f985;
  --cyan:#22d3ee; --blue:#7c9cff; --violet:#a78bfa;
  --amber:#f5b13d; --amber-soft:#ffd591;
  --rosso:#f87171;

  /* stati: il gradiente del brand, una tappa alla volta */
  --st-da-fare:#93a4c0;
  --st-in-corso:#22d3ee;
  --st-in-revisione:#a78bfa;
  --st-completato:#6cf03e;

  --grad:linear-gradient(95deg,#6cf03e 0%,#22d3ee 40%,#7c9cff 72%,#a78bfa 100%);
  --grad-ai:linear-gradient(95deg,#22d3ee 0%,#7c9cff 45%,#a78bfa 100%);

  --radius:18px; --radius-sm:12px;
  --font:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100dvh;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:1rem;color:var(--ink)}
a{color:inherit}
ul{list-style:none}
[hidden]{display:none !important}
.mono{font-family:var(--mono)}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}

/* ---------- sfondo (più quieto del sito: qui si lavora) ---------- */
.bgfx{position:fixed;inset:0;z-index:-3;background:
  radial-gradient(900px 600px at 85% -10%, rgba(124,156,255,.10), transparent 60%),
  radial-gradient(700px 500px at 0% 6%, rgba(34,211,238,.07), transparent 55%),
  radial-gradient(640px 520px at 8% 100%, rgba(108,240,62,.06), transparent 55%),
  var(--bg)}
.gridfx{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%)}

/* ---------- pezzi comuni ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink-soft);font-weight:600;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

.glass{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--grad);color:#06101f;font-weight:700;font-size:.95rem;
  padding:13px 24px;border-radius:999px;border:none;
  box-shadow:0 8px 24px rgba(76,210,31,.25);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(124,156,255,.4)}
.btn:disabled{opacity:.55;transform:none;cursor:wait}
.btn-sm{padding:9px 18px;font-size:.85rem}
.btn-testo{color:var(--muted);font-size:.88rem;font-weight:600;padding:8px 4px;text-align:left}
.btn-testo:hover{color:var(--ink)}
.btn-testo.pericolo{color:var(--rosso)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-bottom:14px}

.campo{display:block;margin-bottom:14px}
.campo-nome{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input[type="text"],input[type="email"],input[type="date"],input[type="url"],
input[type="search"],select,textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;color:var(--ink);transition:border-color .15s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
textarea{resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393a4c0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
input[type="date"]{color-scheme:dark}
.campi-riga{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- login ---------- */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:420px;padding:36px 32px 32px}
.login-titolo{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;
  margin:14px 0 6px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-sotto{color:var(--muted);margin-bottom:26px}
.login-step .btn{width:100%;margin-top:4px}
.login-nota{color:var(--ink-soft);font-size:.92rem;margin-bottom:16px}
.login-nota .mono{color:var(--cyan);font-size:.85rem}
.login-errore{color:var(--rosso);font-size:.88rem;margin-top:12px}
.input-codice{font-size:1.7rem;letter-spacing:.5em;text-align:center;font-weight:600}
#btn-cambia-email{width:100%;text-align:center;margin-top:10px}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:12px 20px;background:rgba(7,11,22,.82);border-bottom:1px solid var(--line2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topbar-brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em}
.brand-punto{width:11px;height:11px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(108,240,62,.6)}
.viste{display:flex;gap:2px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:3px}
.vista-btn{padding:7px 16px;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--muted)}
.vista-btn.attiva{background:rgba(255,255,255,.09);color:var(--ink)}
.topbar-azioni{display:flex;align-items:center;gap:10px;margin-left:auto}
.cerca{width:230px;padding:9px 13px;font-size:.88rem}
.utente-chip{width:38px;height:38px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--amber),#ff9d6c);color:#241200;
  font-weight:800;font-size:.82rem;display:flex;align-items:center;justify-content:center}

.banner-offline{background:rgba(245,177,61,.12);border-bottom:1px solid rgba(245,177,61,.3);
  color:var(--amber-soft);font-size:.85rem;text-align:center;padding:7px 16px}

/* ---------- contenuto ---------- */
.contenuto{max-width:1180px;margin:0 auto;padding:22px 20px 110px}
.contenuto.stretto{max-width:560px}
.sezione-titolo{font-size:1.3rem;font-weight:700;margin-bottom:16px}

/* filtri */
.filtri{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:.82rem;
  font-weight:600;color:var(--muted);background:var(--panel2);
  transition:all .15s var(--ease)}
.chip:hover{color:var(--ink)}
.chip.attiva{color:var(--ink);border-color:transparent;background:rgba(255,255,255,.10)}
.chip .pallino{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.filtro-select{width:auto;min-width:150px;padding:8px 32px 8px 12px;font-size:.85rem}

/* fasce di urgenza */
.fascia{margin-bottom:26px}
.fascia-testata{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;padding-left:2px}
.fascia-nome{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fascia.ritardo .fascia-nome{color:var(--rosso)}
.fascia.settimana .fascia-nome{color:var(--amber)}
.fascia-conto{font-family:var(--mono);font-size:.75rem;color:var(--muted2)}
.fascia-vuoto{border:1px dashed var(--line);border-radius:var(--radius);
  color:var(--muted2);font-size:.9rem;text-align:center;padding:34px 20px}

/* riga progetto */
.prog{display:grid;grid-template-columns:minmax(0,2.4fr) 138px 252px 108px 38px;
  gap:14px;align-items:center;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:8px;
  transition:transform .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)}
.prog:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.prog-principale{min-width:0}
.prog-nome{display:block;font-weight:700;font-size:.98rem;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.prog-cliente{display:block;color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog-riga2{display:flex;align-items:center;gap:14px;min-width:0}
.prog-tipo{font-family:var(--mono);font-size:.72rem;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px;
  justify-self:start;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.stato-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:.74rem;font-weight:600;white-space:nowrap;justify-self:start}
.stato-chip .pallino{width:8px;height:8px;border-radius:50%;flex:none}
.prog-scadenza{font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.prog-scadenza.in-ritardo{color:var(--rosso);font-weight:600}
.prog-scadenza.vicina{color:var(--amber)}
.prog-destra{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.avatar{width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(245,177,61,.16);border:1px solid rgba(245,177,61,.45);color:var(--amber-soft);
  font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  text-transform:uppercase}
.avatar.vuoto{background:var(--panel2);border-color:var(--line);color:var(--muted2)}
.prog-task{display:flex;align-items:center;gap:8px;min-width:0}
.prog-task .mono{font-size:.72rem;color:var(--muted)}
.mini-barra{flex:1;min-width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.mini-barra .pieno{height:100%;border-radius:99px;background:var(--grad);transition:width .3s var(--ease)}

/* stato → colore */
.st-da_fare{--cst:var(--st-da-fare)}
.st-in_corso{--cst:var(--st-in-corso)}
.st-in_revisione{--cst:var(--st-in-revisione)}
.st-completato{--cst:var(--st-completato)}
.stato-chip .pallino,.chip .pallino{background:var(--cst,var(--muted))}
.stato-chip{color:var(--cst,var(--muted))}

/* ---------- bacheca ---------- */
.bacheca{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;
  align-items:start}
.colonna{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius);
  padding:12px;min-height:220px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.colonna.sopra{border-color:var(--cst);background:rgba(255,255,255,.05)}
.colonna-testata{display:flex;align-items:center;gap:8px;margin:2px 4px 12px}
.colonna-testata .pallino{width:9px;height:9px;border-radius:50%;background:var(--cst)}
.colonna-nome{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.colonna-conto{font-family:var(--mono);font-size:.72rem;color:var(--muted2);margin-left:auto}
.tessera{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 14px;margin-bottom:8px;width:100%;text-align:left;display:block;
  transition:transform .15s var(--ease),border-color .15s var(--ease)}
.tessera:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.24)}
.tessera.trascinata{opacity:.35}
.tessera-nome{font-weight:600;font-size:.9rem;line-height:1.35;margin-bottom:6px}
.tessera-righe{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tessera-cliente{color:var(--muted);font-size:.78rem}
.tessera-fondo{display:flex;align-items:center;gap:8px;margin-top:9px}
.tessera-fondo .prog-scadenza{font-size:.72rem}
.tessera-fondo .avatar{width:24px;height:24px;font-size:.6rem;margin-left:auto}
.colonna-vuota{border:1px dashed var(--line);border-radius:var(--radius-sm);
  color:var(--muted2);font-size:.8rem;text-align:center;padding:22px 10px}

/* ---------- drawer ---------- */
.velo{position:fixed;inset:0;z-index:60;background:rgba(3,6,14,.6);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:velo-in .2s var(--ease)}
@keyframes velo-in{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(520px,100%);
  background:var(--bg2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  animation:drawer-in .28s var(--ease);
  box-shadow:-30px 0 80px rgba(3,7,18,.6)}
@keyframes drawer-in{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
.drawer-testata{display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;border-bottom:1px solid var(--line2)}
.drawer-testata h2{font-size:1.05rem;font-weight:700}
.chiudi{font-size:1.6rem;line-height:1;color:var(--muted);width:36px;height:36px;
  border-radius:50%;display:flex;align-items:center;justify-content:center}
.chiudi:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.drawer-corpo{flex:1;overflow-y:auto;padding:20px 22px;overscroll-behavior:contain}
.drawer-fondo{display:flex;align-items:center;gap:14px;padding:14px 22px calc(14px + var(--safe-b));
  border-top:1px solid var(--line2)}
.drawer-fondo .btn{margin-left:auto}
.firma-modifica{font-size:.68rem;color:var(--muted2);flex:1;text-align:right}

/* stato segmentato nel drawer */
.stati-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.seg{padding:9px 4px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--bg);font-size:.72rem;font-weight:600;color:var(--muted);
  font-family:var(--mono);transition:all .15s var(--ease)}
.seg.attiva{color:#06101f;background:var(--cst);border-color:var(--cst);font-weight:700}
.seg.st-da_fare.attiva{color:#0b1120}

/* task */
.sezione-task{margin-top:26px;border-top:1px solid var(--line2);padding-top:20px}
.task-testata{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.task-testata h3{font-size:.95rem;font-weight:700}
.task-conto{font-size:.75rem;color:var(--muted)}
.task-barra{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:14px}
.task-barra-pieno{height:100%;border-radius:99px;background:var(--grad);transition:width .3s var(--ease)}
.task-riga{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--line2)}
.task-spunta{width:21px;height:21px;border-radius:7px;border:1.5px solid var(--muted2);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#06101f;
  transition:all .15s var(--ease)}
.task-riga.fatta .task-spunta{background:var(--green);border-color:var(--green)}
.task-titolo{flex:1;font-size:.9rem;min-width:0;overflow-wrap:anywhere}
.task-riga.fatta .task-titolo{color:var(--muted2);text-decoration:line-through}
.task-meta{display:flex;align-items:center;gap:7px;flex:none}
.task-meta .prog-scadenza{font-size:.68rem}
.task-meta .avatar{width:22px;height:22px;font-size:.56rem}
.task-elimina{color:var(--muted2);font-size:1rem;padding:4px;flex:none}
.task-elimina:hover{color:var(--rosso)}
.task-nuova{display:flex;gap:8px;margin-top:12px}
.task-nuova input{flex:1}

/* AI */
.ai-box{margin-top:20px;border:1px solid rgba(124,156,255,.28);border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(34,211,238,.05),rgba(167,139,250,.06));padding:0}
.ai-box summary{cursor:pointer;list-style:none;padding:13px 15px;font-size:.88rem;font-weight:600;
  color:var(--ink-soft);display:flex;align-items:center;gap:9px}
.ai-box summary::-webkit-details-marker{display:none}
.ai-scintilla{background:var(--grad-ai);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1rem}
.ai-box[open]{padding-bottom:15px}
.ai-box textarea,.ai-box .btn,.ai-box #ai-proposte{margin:0 15px 10px;width:calc(100% - 30px)}
.ai-box #ai-proposte{margin-bottom:0}
.ai-lista{margin:8px 0 12px}
.ai-riga{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line2);
  font-size:.88rem}
.ai-riga input[type="checkbox"]{width:17px;height:17px;accent-color:#7c9cff;flex:none}
.ai-riga .prog-scadenza{margin-left:auto;flex:none}

/* ---------- tabbar + fab (mobile) ---------- */
.tabbar{display:none}
.fab{display:none}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(26px + var(--safe-b));transform:translateX(-50%);
  z-index:90;background:#141c30;border:1px solid var(--line);color:var(--ink);
  padding:12px 20px;border-radius:999px;font-size:.88rem;font-weight:600;
  box-shadow:0 16px 40px rgba(3,7,18,.6);max-width:min(92vw,480px);text-align:center;
  animation:toast-in .25s var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.toast.errore{border-color:rgba(248,113,113,.5)}

.nota-versione{font-size:.68rem;color:var(--muted2);margin-top:12px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .prog{grid-template-columns:minmax(0,1fr) 225px 38px}
  .prog-tipo,.prog-task{display:none}
}
@media(max-width:760px){
  .topbar{gap:10px;padding:10px 14px}
  .viste,.cerca,#btn-nuovo{display:none}
  .topbar-azioni{gap:8px}
  .contenuto{padding:16px 14px 120px}
  .filtri{gap:8px}
  .filtro-select{min-width:0;flex:1}

  .prog{grid-template-columns:minmax(0,1fr) 34px;gap:6px 10px;padding:14px 15px}
  .prog-nome{white-space:normal}
  .prog-riga2{grid-column:1 / -1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .prog > .avatar{grid-row:1;grid-column:2;justify-self:end}

  .bacheca{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;
    padding-bottom:8px;margin:0 -14px;padding-left:14px;padding-right:14px}
  .colonna{flex:0 0 82vw;scroll-snap-align:start}

  .drawer{width:100%;border-left:none;border-top:1px solid var(--line);
    top:auto;max-height:94dvh;border-radius:22px 22px 0 0;
    animation:sheet-in .3s var(--ease)}
  .campi-riga{grid-template-columns:1fr}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(7,11,22,.9);border-top:1px solid var(--line2);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    padding:6px 8px calc(6px + var(--safe-b))}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:.62rem;font-weight:600;color:var(--muted);padding:6px 0;border-radius:12px}
  .tab svg{width:22px;height:22px}
  .tab.attiva{color:var(--ink)}
  .tab.attiva svg{color:var(--green)}

  .fab{display:flex;position:fixed;right:18px;bottom:calc(78px + var(--safe-b));z-index:55;
    width:56px;height:56px;border-radius:50%;background:var(--grad);color:#06101f;
    font-size:1.9rem;font-weight:700;align-items:center;justify-content:center;
    box-shadow:0 12px 32px rgba(76,210,31,.35)}
}
@keyframes sheet-in{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}