/* TomCRM — portale di gestione. Stessa palette della landing. */
:root {
  --night:#0C1024; --violet:#6B5CFF; --violet-soft:#EEEBFF; --mint:#00D3A7;
  --ink:#131826; --ink-soft:#5A6478; --line:#E4E8F0; --bg:#FBFCFE; --bianco:#fff;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
       color:var(--ink); background:var(--bg); min-height:100vh; }
main { flex:1; width:min(100% - 2rem, 940px); margin:0 auto; padding:1.4rem 0 2.5rem; }

.testa { background:var(--night); color:#fff; display:flex; flex-wrap:wrap; gap:.6rem;
         align-items:center; justify-content:space-between; padding:.7rem 1rem; }
.marchio { display:flex; align-items:center; gap:.55rem; text-decoration:none;
           color:inherit; cursor:default; }
/* il logo porta a Oggi ma resta PULITO: nessun effetto da link */
.marchio b { font-size:1.05rem; }
.marchio small { color:#9AA3BE; }
.onda { width:18px; height:18px; border-radius:4px; flex:none;
        background: linear-gradient(180deg, var(--mint), var(--violet)); }
.testa nav { display:flex; gap:1rem; align-items:center; font-size:.9rem; }
.testa nav span { color:#9AA3BE; }
.testa nav a { color:#C9D0E4; text-decoration:none; }
.testa nav a:hover { color:#fff; }

h1 { font-size:1.5rem; letter-spacing:-.02em; margin:.4rem 0 .6rem; }
h2 { font-size:1.05rem; margin:0 0 .6rem; }
.riga-titolo { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.provenienza { color:var(--ink-soft); font-style:italic; }
.nastro-impersona { background:#fff3cd; border-bottom:1px solid #e6d9a8; color:#5c4a00;
  padding:.55rem 1.2rem; font-size:.92rem; }
.nastro-impersona a { font-weight:700; margin-left:.6rem; }
/* riunione: la tabella degli appunti */
.scorri { overflow-x:auto; }
.griglia { border-collapse:collapse; width:100%; background:var(--bianco);
  border:1px solid var(--line); border-radius:12px; }
.griglia th, .griglia td { text-align:left; padding:.5rem .7rem;
  border-bottom:1px solid var(--line); vertical-align:top; font-size:.92rem; }
.griglia th { font-size:.8rem; color:var(--ink-soft); text-transform:uppercase; }
/* pipeline a colonne */
.colonne-pipeline { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr);
  gap:.8rem; overflow-x:auto; padding-bottom:.5rem; }
.colonna { background:var(--line); border-radius:14px; padding:.6rem; }
.colonna-testa { display:flex; justify-content:space-between; align-items:baseline;
  padding:.2rem .3rem .6rem; }
.scheda-opp { background:var(--bianco); border-radius:10px; padding:.55rem .7rem;
  margin-bottom:.55rem; display:flex; flex-direction:column; gap:.15rem;
  border:1px solid transparent; }
.scheda-opp small { color:var(--ink-soft); }
.scheda-opp.ferma { border-color:#e3b04b; }
.scheda-opp .allerta { color:#a15c00; font-weight:600; }
.bottone.grigio { background:var(--line); color:var(--ink); }
.sotto { color:var(--ink-soft); font-size:.92rem; }
code { background:var(--violet-soft); padding:.1rem .45rem; border-radius:6px;
       font-size:1.02em; user-select:all; }

.errore { background:#FDECEC; color:#8C2B2B; border:1px solid #F2C4C4;
          border-radius:10px; padding:.65rem .9rem; }
.avviso { background:#E1FAF4; color:#00563F; border:1px solid #A8EBD9;
          border-radius:10px; padding:.65rem .9rem; }

.bottone, button { display:inline-block; border:0; cursor:pointer; font:inherit;
  font-weight:600; color:#fff; background:var(--violet); text-decoration:none;
  padding:.6rem 1.2rem; border-radius:999px; }
.bottone:hover, button:hover { filter:brightness(1.08); }
.bottone.piccolo { padding:.4rem .9rem; font-size:.85rem; }
.bottone.pericolo, button.pericolo { background:#C0392B; }

/* ---- elenco utenze ---- */
.tabella { display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
.utenza { background:var(--bianco); border:1px solid var(--line); border-radius:14px;
          padding: .85rem 1rem; display:grid; gap:.35rem .9rem;
          grid-template-columns: 1.2fr auto; align-items:center; }
.utenza.spenta { opacity:.55; }
.chi b { display:block; }
.chi small { color:var(--ink-soft); }
.livello { font-size:.82rem; font-weight:600; color:var(--violet);
           background:var(--violet-soft); border-radius:999px; padding:.25rem .7rem;
           justify-self:start; }
.liv-1, .liv-2 { color:#00563F; background:#E1FAF4; }
.stati { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.4rem; }
.stato { font-size:.76rem; color:var(--ink-soft); border:1px solid var(--line);
         border-radius:999px; padding:.15rem .6rem; background:var(--bg); }
.stato.si { color:#00563F; border-color:#A8EBD9; background:#EDFBF7; }
.stato.no { color:#8C2B2B; border-color:#F2C4C4; background:#FDECEC; }
.stato.minimo { color:#7A4E00; border-color:#F2DFB9; background:#FBF3DF; }
.azioni { grid-column:1 / -1; }

/* ---- schede e moduli ---- */
.scheda { background:var(--bianco); border:1px solid var(--line); border-radius:16px;
          padding:1.3rem 1.4rem; margin:1rem 0; }
.scheda label { display:block; font-size:.86rem; font-weight:600; margin:.7rem 0 .2rem; }
.scheda input:not([type=checkbox]), .scheda select { width:100%; font:inherit;
  padding:.55rem .8rem; border:1px solid var(--line); border-radius:9px;
  background:var(--bg); }
.scheda input:focus, .scheda select:focus { outline:none; border-color:var(--violet); }
.due { display:grid; grid-template-columns:1fr 1fr; gap: 0 1rem; }
.spunta { display:flex; gap:.55rem; align-items:center; font-weight:500 !important; }
.spunta input { width:auto; }
.scheda button[type=submit] { margin-top:1rem; }
.in-riga { display:flex; flex-wrap:wrap; gap:.5rem; }
.strumenti { border-top:3px solid var(--mint); }

.accesso { max-width:400px; margin:8vh auto; }
.accesso button { width:100%; margin-top:1rem; }

.legenda { margin-top:1.6rem; color:var(--ink-soft); font-size:.9rem; }
.legenda summary { cursor:pointer; font-weight:600; color:var(--ink); }
.legenda p { margin:.5rem 0; }

footer { text-align:center; color:#9AA3BE; font-size:.8rem; padding:1rem; }

@media (max-width:640px) {
  .due { grid-template-columns:1fr; }
  .utenza { grid-template-columns:1fr; }
  .livello { justify-self:start; }
}

/* ---- ricerca clienti ---- */
.cerca-riga { display:flex; gap:.5rem; margin:1rem 0; }
.cerca-riga input { flex:1; font:inherit; padding:.55rem .9rem;
  border:1px solid var(--line); border-radius:999px; background:var(--bianco); }
.cerca-riga input:focus { outline:none; border-color:var(--violet); }

/* ================= impianto: menu verticale a sinistra ==================== */
.impianto { display:flex; min-height:100vh; align-items:stretch; }
.colonna-principale { flex:1; min-width:0; display:flex; flex-direction:column; }

.fianco { width:216px; flex:none; background:var(--night); color:#C9D0E4;
  display:flex; flex-direction:column; padding:1rem .7rem;
  position:sticky; top:0; height:100vh; overflow-y:auto; }
.fianco .marchio { padding:.2rem .5rem .9rem; }
.fianco .marchio small { display:block; }
.fianco nav { display:flex; flex-direction:column; gap:.15rem; flex:1; }
.fianco nav a { color:#C9D0E4; text-decoration:none; display:flex; gap:.6rem;
  align-items:center; padding:.55rem .7rem; border-radius:10px;
  border-left:3px solid transparent; font-size:.95rem; }
.fianco nav a span { width:1.3em; text-align:center; }
.fianco nav a:hover { background:#1a2140; color:#fff; }
.fianco nav a.attiva { background:#1a2140; color:#fff; font-weight:700;
  border-left-color:var(--mint); }
.installa { background:#1a2140; color:var(--mint); border:1px dashed #2c3560;
  border-radius:10px; padding:.55rem .7rem; font-size:.85rem; font-weight:600;
  text-align:left; margin-top:.5rem; }
.installa:hover { filter:none; background:#232c52; }
/* la zona amministrazione: separata, in fondo al fianco */
.fianco-admin { border-top:1px solid #1a2140; margin-top:.7rem; padding-top:.6rem;
  display:flex; flex-direction:column; gap:.15rem; }
.fianco-admin .admin-titolo { font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#5a6488; padding:0 .7rem .2rem; }
.fianco-admin a { color:#9AA3BE; text-decoration:none; display:flex; gap:.6rem;
  align-items:center; padding:.45rem .7rem; border-radius:10px;
  border-left:3px solid transparent; font-size:.9rem; }
.fianco-admin a span { width:1.3em; text-align:center; }
.fianco-admin a:hover { background:#1a2140; color:#fff; }
.fianco-admin a.attiva { background:#1a2140; color:#fff; font-weight:700;
  border-left-color:#e3b04b; }
.fianco-admin .admin-nota { font-size:.72rem; color:#5a6488; padding:.25rem .7rem 0; }
.fianco-fondo { border-top:1px solid #1a2140; padding-top:.7rem; margin-top:.7rem;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.fianco-fondo .io { color:#9AA3BE; font-size:.82rem; flex:1; }
.fianco-fondo a { color:#C9D0E4; font-size:.9rem; }

/* la testata sopra il contenuto: le SEZIONI della pagina corrente */
.testa { background:var(--bianco); color:var(--ink); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:.7rem; padding:.45rem 1rem;
  position:sticky; top:0; z-index:25; }
.sezioni { display:flex; gap:.4rem; overflow-x:auto; flex:1; scrollbar-width:none; }
.sezioni:empty { visibility:hidden; }
.sezioni a { flex:none; font-size:.85rem; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:.28rem .8rem;
  background:var(--bg); }
.sezioni a:hover { border-color:var(--violet); color:var(--violet); }

.panino-spunta, .velo { display:none; }
.panino { display:none; flex-direction:column; justify-content:center; gap:4px;
  width:40px; height:36px; padding:0 9px; border-radius:8px; cursor:pointer; flex:none; }
.panino span { display:block; height:2px; background:var(--ink); border-radius:2px; }
.panino:hover { background:var(--line); }
.solo-mobile { display:none !important; }

@media (max-width:860px) {
  .panino { display:flex; }
  .solo-mobile { display:flex !important; }
  .testa .marchio b { color:var(--ink); }
  .fianco { position:fixed; left:0; top:0; bottom:0; z-index:60;
    transform:translateX(-105%); transition:transform .2s ease; height:100dvh; }
  .panino-spunta:checked ~ .fianco { transform:none; box-shadow:14px 0 40px rgba(12,16,36,.35); }
  .velo { display:block; position:fixed; inset:0; z-index:55; background:rgba(12,16,36,.45);
    opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .panino-spunta:checked ~ .velo { opacity:1; pointer-events:auto; }
  .sezioni { order:5; flex-basis:100%; }
  .testa { flex-wrap:wrap; }
}
h2[id] { scroll-margin-top:64px; }

/* ================= aiuti: i testi «?» accendibili ========================= */
.aiuto-bottone { width:30px; height:30px; padding:0; border-radius:50%;
  background:var(--mint); color:var(--night); font-weight:800; }
.aiuto { display:none; background:var(--violet-soft); color:#3d3670;
  border-left:4px solid var(--violet); border-radius:0 10px 10px 0;
  padding:.6rem .9rem; margin:.5rem 0 .8rem; font-size:.9rem; }
body.con-aiuti .aiuto { display:block; }
.collegamento { background:none; color:#9AA3BE; padding:0; font-weight:400;
  font-size:.8rem; text-decoration:underline; }
.collegamento:hover { color:var(--ink-soft); filter:none; }

/* ================= menu a puntini sulle righe ============================= */
.puntini { position:relative; }
.puntini > summary { list-style:none; cursor:pointer; width:34px; height:34px;
  border-radius:9px; display:grid; place-items:center; color:var(--ink-soft);
  font-weight:800; font-size:1.15rem; letter-spacing:.05em; user-select:none; }
.puntini > summary::-webkit-details-marker { display:none; }
.puntini > summary:hover, .puntini[open] > summary { background:var(--line); }
.puntini .voci { position:absolute; right:0; top:38px; z-index:30;
  background:var(--bianco); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 28px rgba(12,16,36,.14); min-width:190px; padding:.35rem;
  display:flex; flex-direction:column; }
.puntini .voci a, .puntini .voci button { background:none; color:var(--ink);
  padding:.5rem .75rem; border-radius:8px; text-align:left; font-weight:500;
  font-size:.9rem; text-decoration:none; }
.puntini .voci a:hover, .puntini .voci button:hover { background:var(--violet-soft); filter:none; }
.puntini .voci form { display:contents; }
.riga-azioni { display:flex; gap:.4rem; align-items:center; justify-content:flex-end; }

/* ================= la plancia di Oggi ==================================== */
.numeri { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:.7rem; margin:1rem 0 1.3rem; }
.numero { background:var(--bianco); border:1px solid var(--line); border-radius:14px;
  padding:.8rem 1rem; text-decoration:none; color:var(--ink); display:block; }
.numero b { display:block; font-size:1.6rem; letter-spacing:-.02em; }
.numero small { color:var(--ink-soft); }
.numero.caldo { border-color:var(--violet); background:var(--violet-soft); }
.numero:hover { border-color:var(--violet); }
.due-colonne { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:760px) { .due-colonne { grid-template-columns:1fr; } }
.guida { border-left:4px solid var(--mint); }
.guida ol { margin:.4rem 0 0; padding-left:1.3rem; }
.guida li { margin:.45rem 0; }
.guida li b { color:var(--violet); }
/* la pagina REC */
.rec-bottone { width:150px; height:150px; border-radius:50%; font-size:1.5rem;
  font-weight:800; background:#C0392B; color:#fff; margin:1.2rem auto .6rem;
  display:block; box-shadow:0 10px 30px rgba(192,57,43,.35); }
.rec-bottone.acceso { background:var(--night); animation:batte 1.2s infinite; }
@keyframes batte { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
.rec-tempo { font-size:2rem; font-weight:800; letter-spacing:.06em; }
.rec-bottone.nota { width:120px; height:120px; font-size:1.1rem;
  background:var(--violet); box-shadow:0 10px 30px rgba(107,92,255,.35); }
.rec-bottone.nota.acceso { background:var(--night); }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.chips button { background:var(--bg); color:var(--ink-soft); font-weight:600;
  font-size:.85rem; border:1px solid var(--line); border-radius:999px;
  padding:.35rem .8rem; }
.chips button:hover { filter:none; border-color:var(--violet); color:var(--violet); }
.chips button.acceso { background:var(--violet-soft); color:var(--violet);
  border-color:var(--violet); }
/* agenda a griglia: 7 colonne su desktop, elenco su mobile */
.agenda-griglia { display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem;
  margin-top:1rem; }
.agenda-giorno { background:var(--bianco); border:1px solid var(--line);
  border-radius:12px; padding:.5rem .6rem; min-height:86px; }
.agenda-giorno.oggi { border-color:var(--violet); background:var(--violet-soft); }
.agenda-giorno.vuoto { opacity:.6; }
.agenda-testa { font-size:.78rem; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; margin-bottom:.35rem; }
.agenda-giorno.oggi .agenda-testa { color:var(--violet); }
.agenda-voce { font-size:.85rem; margin:.2rem 0; line-height:1.35; }
.agenda-voce b { color:var(--violet); }
.agenda-voce.scad { color:#7A4E00; }
.agenda-voce.niente { color:var(--line); }
@media (max-width:860px) {
  .agenda-griglia { grid-template-columns:1fr; }
  .agenda-giorno { min-height:0; }
  .agenda-giorno.vuoto { display:none; }
}

/* ================= la guida a pillole ===================================== */
/* Una tacca piccola accanto alla cosa da spiegare: presente ma zitta, e
   sparisce per sempre quando l'utente dice «ho capito». */
.tacca { display:inline-grid; place-items:center; width:18px; height:18px;
  padding:0; margin-left:.4rem; vertical-align:middle; flex:none;
  border-radius:50%; background:var(--violet-soft); color:var(--violet);
  font-size:.72rem; font-weight:800; line-height:1; cursor:help;
  transition:transform .15s, opacity .2s; }
.tacca:hover { background:var(--violet); color:#fff; filter:none; transform:scale(1.12); }
.tacca.sparisce { opacity:0; transform:scale(.4); }

.pillola { position:fixed; z-index:70; width:min(320px, calc(100vw - 16px));
  background:var(--bianco); color:var(--ink); border:1px solid var(--line);
  border-left:4px solid var(--violet); border-radius:0 12px 12px 0;
  box-shadow:0 12px 34px rgba(12,16,36,.18); padding:.75rem .9rem; }
.pillola b { display:block; font-size:.95rem; margin-bottom:.25rem; }
.pillola p { margin:0 0 .6rem; font-size:.88rem; line-height:1.5; color:var(--ink-soft); }
.pillola-fondo { display:flex; align-items:center; gap:.8rem; }
.in-riga-fondo { display:inline; margin-left:.5rem; }