/* ==========================================================================
   Altro Agency — dashboard clienti
   1. Token   2. Base   3. Guscio   4. Componenti   5. Grafici
   6. Pipeline   7. Chat   8. Moduli   9. Login   10. Schermi stretti
   ========================================================================== */

/* 1. TOKEN ================================================================= */

:root {
  --ink:        #150D3F;
  --ink-deep:   #0D0726;
  --indigo:     #3B2AA8;
  --indigo-soft:#5B49CF;
  --accent:     #FF7A4D;
  --accent-dark:#E95F30;
  --accent-soft:#FFE7DC;
  --paper:      #FBF9F6;
  --paper-warm: #F3EFE9;
  --white:      #FFFFFF;
  --text:       #1A1723;
  --muted:      #67637A;
  --muted-dark: #B4ADD8;
  --line:       #E5E0EF;
  --line-dark:  rgba(255,255,255,.14);

  --verde:      #12A150;
  --verde-soft: #E4F7EC;
  --giallo:     #C88A00;
  --giallo-soft:#FDF3DC;
  --rosso:      #D9342B;
  --rosso-soft: #FDE8E6;
  --grigio:     #8B8798;
  --grigio-soft:#EFEDF3;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(21,13,63,.05), 0 14px 40px -26px rgba(21,13,63,.30);
  --shadow-lift: 0 2px 6px rgba(21,13,63,.07), 0 24px 50px -28px rgba(21,13,63,.40);
  --barra-w: 250px;
}

/* 2. BASE ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: .95rem; }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
small { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; }
code { font-family: var(--mono); font-size: .85em; background: var(--paper-warm);
       padding: .1em .35em; border-radius: 4px; }

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

.salta { position: absolute; left: -9999px; }
.salta:focus { left: 8px; top: 8px; background: var(--ink); color: #fff;
               padding: .6rem 1rem; border-radius: 8px; z-index: 99; }

.vuoto { color: var(--muted); font-size: .9rem; padding: 1.2rem 0; text-align: center; }
.vuoto.piccolo { padding: .4rem 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.forte { font-weight: 650; }
.link { color: var(--indigo); font-weight: 600; font-size: .85rem; }
.link:hover { text-decoration: underline; }
.occhiello { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
             color: var(--muted); font-weight: 650; margin-bottom: .3rem; }
.sotto { color: var(--muted); font-size: .85rem; max-width: 62ch; }
.scorri { overflow-x: auto; }

/* 3. GUSCIO ================================================================ */

.guscio { display: flex; min-height: 100vh; }

.barra {
  width: var(--barra-w);
  flex: 0 0 var(--barra-w);
  background: var(--ink);
  color: #fff;
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marchio { display: flex; align-items: center; gap: .6rem; padding: 0 .4rem; }
.marchio-segno {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.marchio-segno.grande { width: 48px; height: 48px; font-size: 1.5rem; margin-bottom: 1rem; }
.marchio-testo { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }
.marchio-testo em { font-style: normal; color: var(--muted-dark); font-weight: 500; }

.barra nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.voce {
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .7rem; border-radius: 10px;
  color: var(--muted-dark); font-weight: 550; font-size: .92rem;
  transition: background .15s, color .15s;
}
.voce svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
            stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.voce:hover { background: rgba(255,255,255,.07); color: #fff; }
.voce.attiva { background: var(--indigo); color: #fff; }
.nav-sep { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
           color: rgba(180,173,216,.6); padding: 1.1rem .7rem .35rem; font-weight: 700; }
.pallino { margin-left: auto; background: var(--accent); color: #fff;
           font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 99px; }

.barra-piede { border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.utente { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--indigo-soft);
          display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.utente-testo strong { display: block; font-size: .85rem; }
.utente-testo small { color: var(--muted-dark); font-size: .74rem; }
.esci { font-size: .82rem; color: var(--muted-dark); }
.esci:hover { color: #fff; text-decoration: underline; }

main {
  flex: 1;
  min-width: 0;
  padding: 1.6rem clamp(1rem, 2.6vw, 2.4rem) 4rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}

.cima { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
        flex-wrap: wrap; }
.cima-cliente { color: var(--muted); font-size: .9rem; margin-top: .15rem; }

.scelta-cliente { display: flex; align-items: center; gap: .5rem; }
.scelta-cliente label { font-size: .78rem; color: var(--muted); font-weight: 600; }

/* 4. COMPONENTI ============================================================ */

.periodi { display: inline-flex; background: var(--white); border: 1px solid var(--line);
           border-radius: 99px; padding: 3px; gap: 2px; align-self: flex-start; }
.periodi a { padding: .32rem .85rem; border-radius: 99px; font-size: .82rem;
             font-weight: 600; color: var(--muted); }
.periodi a:hover { color: var(--ink); }
.periodi a.attivo { background: var(--ink); color: #fff; }

.griglia-kpi { display: grid; gap: .9rem; grid-template-columns: repeat(4, 1fr); }
.kpi {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--line);
}
.kpi.bordo-verde  { border-top-color: var(--verde); }
.kpi.bordo-giallo { border-top-color: var(--giallo); }
.kpi.bordo-rosso  { border-top-color: var(--rosso); }
.kpi.bordo-grigio { border-top-color: var(--grigio); }
.kpi-titolo { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
              color: var(--muted); font-weight: 650; }
.kpi-valore { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700;
              letter-spacing: -.035em; margin: .25rem 0 .1rem; }
.kpi-sotto { font-size: .8rem; color: var(--muted); display: flex; align-items: center;
             gap: .45rem; flex-wrap: wrap; }

.delta { font-weight: 650; font-size: .78rem; padding: .05rem .4rem; border-radius: 99px; }
.delta.bene { color: var(--verde); background: var(--verde-soft); }
.delta.male { color: var(--rosso); background: var(--rosso-soft); }
.delta.neutro { color: var(--muted); background: var(--grigio-soft); }

.riquadro {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow);
}
.riquadro-cima { display: flex; justify-content: space-between; align-items: baseline;
                 gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.riquadro-cima h2 + .sotto { margin-top: .2rem; }
.riquadro-cima > div:first-child { min-width: 0; }
.riquadro-testa { display: flex; justify-content: space-between; align-items: center;
                  gap: 1rem; flex-wrap: wrap; }

.due-colonne { display: grid; gap: .9rem; grid-template-columns: 1.15fr 1fr; align-items: start; }
.due-mini { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }

.avvisi { display: flex; flex-direction: column; gap: .4rem; }
.avviso { font-size: .88rem; padding: .6rem .9rem; border-radius: var(--radius-sm);
          border-left: 3px solid; }
.avviso-rosso  { background: var(--rosso-soft);  border-color: var(--rosso);  color: #8f221c; }
.avviso-giallo { background: var(--giallo-soft); border-color: var(--giallo); color: #7a5500; }
.avviso-verde  { background: var(--verde-soft);  border-color: var(--verde);  color: #0a6b35; }
.avviso-grigio { background: var(--grigio-soft); border-color: var(--grigio); color: #55525e; }

.stato { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem;
         font-weight: 600; white-space: nowrap; }
.stato i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.stato-verde  { color: var(--verde); }  .stato-verde i  { background: var(--verde); }
.stato-giallo { color: var(--giallo); } .stato-giallo i { background: var(--giallo); }
.stato-rosso  { color: var(--rosso); }  .stato-rosso i  { background: var(--rosso); }
.stato-grigio { color: var(--grigio); } .stato-grigio i { background: var(--grigio); }

.tabella { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tabella th { text-align: left; font-size: .72rem; text-transform: uppercase;
              letter-spacing: .07em; color: var(--muted); font-weight: 650;
              padding: 0 .6rem .55rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabella th.num { text-align: right; }
.tabella td { padding: .62rem .6rem; border-bottom: 1px solid var(--paper-warm);
              vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: var(--paper); }
.tabella td.bene { color: var(--verde); font-weight: 650; }
.tabella td.male { color: var(--rosso); font-weight: 650; }
.tabella-campagne { min-width: 880px; }
.tabella-contatti { min-width: 820px; }
.tabella-campagne tr.riga-rosso td:first-child,
.tabella-campagne tr.riga-verde td:first-child { width: 26px; }

.tag { display: inline-block; font-size: .74rem; font-weight: 650; padding: .12rem .5rem;
       border-radius: 99px; background: var(--grigio-soft); color: var(--muted); }
.tag-nuovo { background: #E8ECFF; color: #3341A8; }
.tag-contattato { background: #E6F1FE; color: #1D5FA8; }
.tag-qualificato { background: #EDE7FE; color: #5B36B8; }
.tag-appuntamento { background: var(--accent-soft); color: var(--accent-dark); }
.tag-vinto { background: var(--verde-soft); color: #0a6b35; }
.tag-perso { background: var(--grigio-soft); color: var(--muted); }

.mini h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
           color: var(--muted); margin-bottom: .5rem; }
.mini-riga { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem;
             border-radius: var(--radius-sm); }
.mini-riga:hover { background: var(--paper); }
.mini-nome { flex: 1; min-width: 0; font-weight: 600; font-size: .88rem;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-num { text-align: right; font-weight: 650; font-size: .9rem;
            font-variant-numeric: tabular-nums; }
.mini-num small, .mini-nome small { font-weight: 400; }

.pipe-numeri { display: flex; gap: 1.4rem; margin-top: 1rem; padding-top: .9rem;
               border-top: 1px solid var(--paper-warm); flex-wrap: wrap; }
.pipe-numeri span { font-size: .78rem; color: var(--muted); }
.pipe-numeri strong { display: block; font-family: var(--font-display); font-size: 1.15rem;
                      color: var(--text); }

.nota { padding: .7rem 0; border-bottom: 1px solid var(--paper-warm); }
.nota:last-child { border-bottom: 0; }
.nota h3 { margin-bottom: .25rem; }
.nota p { font-size: .89rem; color: #3a3550; }
.firma { font-size: .76rem; color: var(--muted); margin-top: .35rem; }

.pallino-link { background: var(--accent); color: #fff; font-weight: 700; font-size: .74rem;
                padding: .1rem .45rem; border-radius: 99px; }

/* 5. GRAFICI =============================================================== */

.gr svg { width: 100%; height: auto; display: block; overflow: visible; }
.gr .griglia { stroke: var(--line); stroke-width: 1; }
.gr .asse { font-size: 10px; fill: var(--muted); font-family: var(--font-text); }
.gr rect { transition: opacity .12s; }
.gr rect:hover { opacity: .75; }
.barra-verde  { fill: #3FBF77; }
.barra-giallo { fill: #E9B93E; }
.barra-rosso  { fill: #E86A60; }
.barra-grigio { fill: #D6D2E0; }
.linea-cpl { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round;
             stroke-linecap: round; }
.punto-cpl { fill: var(--ink); }
.target { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.target-testo { font-size: 10px; fill: var(--accent-dark); font-weight: 650;
                font-family: var(--font-text); }
.legenda { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .78rem;
           color: var(--muted); margin: .7rem 0 0; }
.legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.legenda .q { width: 10px; height: 10px; border-radius: 3px; }
.legenda .q.verde { background: #3FBF77; }
.legenda .q.giallo { background: #E9B93E; }
.legenda .q.rosso { background: #E86A60; }
.legenda .l { width: 14px; height: 2px; background: var(--ink); }

.imbuto { display: flex; flex-direction: column; gap: .3rem; }
.imbuto-riga { display: flex; align-items: center; gap: .7rem; padding: .28rem .3rem;
               border-radius: 8px; }
.imbuto-riga:hover { background: var(--paper); }
.imbuto-nome { width: 108px; flex: 0 0 108px; font-size: .84rem; font-weight: 600; }
.imbuto-sbarra { flex: 1; background: var(--paper-warm); border-radius: 99px; height: 14px; }
.imbuto-sbarra i { display: block; height: 100%; border-radius: 99px;
                   background: linear-gradient(90deg, var(--indigo), var(--indigo-soft)); }
.imbuto-riga.vinto .imbuto-sbarra i { background: var(--verde); }
.imbuto-riga.perso .imbuto-sbarra i { background: var(--grigio); }
.imbuto-n { width: 44px; text-align: right; font-weight: 650; font-size: .88rem;
            font-variant-numeric: tabular-nums; }

/* 6. PIPELINE ============================================================== */

.filtri { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.filtri input[type="search"] { min-width: 240px; }
.lavagna { display: grid; grid-template-columns: repeat(6, minmax(178px, 1fr));
           gap: .7rem; overflow-x: auto; padding-bottom: .6rem; align-items: start; }
.colonna { background: var(--paper-warm); border-radius: var(--radius);
           padding: .7rem .6rem; min-height: 140px; border: 2px solid transparent; }
.colonna.sopra { border-color: var(--indigo); background: #EDEAFB; }
.colonna header { display: flex; justify-content: space-between; align-items: center;
                  margin-bottom: .6rem; padding: 0 .2rem; }
.colonna header h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
                     color: var(--muted); }
.colonna header span { font-size: .78rem; font-weight: 700; color: var(--muted);
                       background: var(--white); padding: .05rem .45rem; border-radius: 99px; }
.colonna-vinto { background: var(--verde-soft); }
.colonna-perso { background: var(--grigio-soft); }
.colonna-corpo { display: flex; flex-direction: column; gap: .45rem; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 12px;
        padding: .6rem .7rem; cursor: grab; box-shadow: 0 1px 2px rgba(21,13,63,.04); }
.card:hover { box-shadow: var(--shadow-lift); }
.card.trascino { opacity: .45; }
.card-nome { font-weight: 650; font-size: .87rem; }
.card-meta { font-size: .76rem; color: var(--muted); overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.card-piede { display: flex; justify-content: space-between; align-items: center;
              margin-top: .35rem; font-size: .72rem; color: var(--muted); gap: .4rem; }
.card-valore { color: var(--verde); font-weight: 700; }

.velo { position: fixed; inset: 0; background: rgba(21,13,63,.45); z-index: 50;
        display: grid; place-items: center; padding: 1rem; }
.velo[hidden] { display: none; }
.scheda { background: var(--white); border-radius: var(--radius); padding: 1.4rem;
          width: min(520px, 100%); max-height: 86vh; overflow: auto;
          box-shadow: var(--shadow-lift); }
.scheda h2 { margin-bottom: .2rem; }
.scheda .chiudi { float: right; background: none; border: 0; font-size: 1.4rem;
                  cursor: pointer; color: var(--muted); line-height: 1; }
.linea-storico { font-size: .82rem; color: var(--muted); padding: .3rem 0;
                 border-bottom: 1px solid var(--paper-warm); }

/* 7. CHAT ================================================================== */

.riquadro-chat { display: flex; flex-direction: column; }
.filo { display: flex; flex-direction: column; gap: .7rem; max-height: 56vh;
        overflow-y: auto; padding: .4rem .2rem 1rem; }
.bolla { max-width: 68%; padding: .6rem .85rem; border-radius: 14px; }
.bolla.sua { background: var(--paper-warm); border-bottom-left-radius: 4px; }
.bolla.mia { background: var(--indigo); color: #fff; align-self: flex-end;
             border-bottom-right-radius: 4px; }
.bolla-testa { font-size: .72rem; font-weight: 700; opacity: .8; margin-bottom: .15rem; }
.bolla-testa span { font-weight: 400; opacity: .75; margin-left: .35rem; }
.bolla-testo { font-size: .9rem; }
.invia { display: flex; gap: .6rem; align-items: flex-end;
         border-top: 1px solid var(--line); padding-top: .9rem; }
.invia textarea { flex: 1; resize: vertical; }

/* 8. MODULI ================================================================ */

input, select, textarea, button {
  font-family: inherit; font-size: .88rem; color: var(--text);
}
input, select, textarea {
  background: var(--white); border: 1px solid var(--line); border-radius: 9px;
  padding: .48rem .65rem; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--indigo); outline: none;
  box-shadow: 0 0 0 3px rgba(59,42,168,.12); }
select { cursor: pointer; }
label { display: block; font-size: .78rem; font-weight: 650; color: var(--muted); }
label input, label select, label textarea { margin-top: .25rem; font-weight: 400;
  color: var(--text); }

button, .bottone {
  background: var(--ink); color: #fff; border: 0; border-radius: 9px;
  padding: .52rem 1.1rem; font-weight: 650; cursor: pointer; white-space: nowrap;
  width: auto;
}
button:hover { background: var(--indigo); }
button[disabled] { background: var(--line); color: var(--muted); cursor: not-allowed; }
button[disabled]:hover { background: var(--line); }
.mini-btn { padding: .35rem .7rem; font-size: .8rem; }

.modulo { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.modulo .campi { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr);
                 width: 100%; }
.modulo fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm);
                   padding: .9rem; width: 100%; }
.modulo legend { font-size: .78rem; font-weight: 700; color: var(--muted);
                 padding: 0 .4rem; }
.modulo.in-linea { flex-direction: row; flex-wrap: wrap; align-items: center;
                   margin-top: 1rem; }
.modulo.in-linea input, .modulo.in-linea select { width: auto; min-width: 150px; }
.modulo.in-linea .stretto { min-width: 108px; width: 108px; }
.tabella-modifica input, .tabella-modifica select { min-width: 120px; }
.tabella-modifica .stretto { min-width: 92px; }
.incolla { margin-top: 1rem; }
.incolla summary { cursor: pointer; font-size: .85rem; font-weight: 650;
                   color: var(--indigo); }
.incolla .modulo { margin-top: .8rem; }
.incolla textarea { font-family: var(--mono); font-size: .8rem; }
.cambia-stato { min-width: 140px; font-weight: 650; border: 0; }
.cambia-stato.tag-nuovo { background: #E8ECFF; color: #3341A8; }
.cambia-stato.tag-contattato { background: #E6F1FE; color: #1D5FA8; }
.cambia-stato.tag-qualificato { background: #EDE7FE; color: #5B36B8; }
.cambia-stato.tag-appuntamento { background: var(--accent-soft); color: var(--accent-dark); }
.cambia-stato.tag-vinto { background: var(--verde-soft); color: #0a6b35; }
.cambia-stato.tag-perso { background: var(--grigio-soft); color: var(--muted); }

/* 8b. QUESTIONARIO, KNOWLEDGE, REGIA, CREATIVE ============================= */

.fascia { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--ink), var(--indigo)); color: #fff;
  padding: .8rem 1.1rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.fascia-testo { flex: 1; min-width: 240px; font-size: .87rem; color: rgba(255,255,255,.85); }
.fascia-testo strong { color: #fff; }
.fascia-barra { width: 130px; height: 8px; border-radius: 99px;
                background: rgba(255,255,255,.22); overflow: hidden; }
.fascia-barra i { display: block; height: 100%; background: var(--accent); }
.fascia-n { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.fascia-btn { background: var(--accent); color: #fff; font-weight: 650; font-size: .85rem;
              padding: .45rem 1rem; border-radius: 9px; white-space: nowrap; }
.fascia-btn:hover { background: var(--accent-dark); }

.passi { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.2rem;
         border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
.passo { font-size: .8rem; font-weight: 600; color: var(--muted); padding: .3rem .7rem;
         border-radius: 99px; background: var(--paper-warm); }
.passo:hover { color: var(--ink); }
.passo.attivo { background: var(--ink); color: #fff; }
.passo.fatto { background: var(--verde-soft); color: #0a6b35; }

.questionario { gap: 1.15rem; width: 100%; }
.domanda { width: 100%; }
.domanda label { font-size: .88rem; color: var(--text); font-weight: 650;
                 margin-bottom: .35rem; }
.obb { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
       color: var(--accent-dark); background: var(--accent-soft); padding: .05rem .4rem;
       border-radius: 99px; margin-left: .4rem; font-weight: 700; }
.caselle { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
           gap: .35rem; }
.casella { display: flex; align-items: center; gap: .45rem; background: var(--paper);
           border: 1px solid var(--line); border-radius: 9px; padding: .4rem .6rem;
           font-weight: 400; color: var(--text); font-size: .85rem; cursor: pointer; }
.casella input { width: auto; margin: 0; }
.casella:hover { border-color: var(--indigo); }

.voce-k { border: 1px solid var(--line); border-radius: var(--radius-sm);
          padding: .8rem .9rem; margin-bottom: .7rem; background: var(--paper); }
.voce-titolo { font-weight: 650; border: 0; background: transparent; padding: .1rem 0;
               font-size: .95rem; }
.voce-k textarea { margin-top: .3rem; }
.voce-piede { display: flex; justify-content: space-between; align-items: center;
              gap: .8rem; flex-wrap: wrap; margin-top: .5rem; font-size: .76rem;
              color: var(--muted); }
.voce-azioni { display: flex; align-items: center; gap: .5rem; }
.conteggio { font-size: .78rem; color: var(--muted); background: var(--paper-warm);
             padding: .15rem .6rem; border-radius: 99px; font-weight: 650; }
.in-riga { display: inline-flex; }

.tabella-regia { min-width: 940px; }
.tabella-regia .motivo { min-width: 300px; max-width: 380px; font-size: .85rem; }
.tabella-regia .motivo small { margin-top: .2rem; color: var(--indigo); font-weight: 550; }
.azione { display: inline-block; font-size: .76rem; font-weight: 700; padding: .2rem .6rem;
          border-radius: 99px; white-space: nowrap; }
.azione-spegni, .azione-affina { background: var(--rosso-soft); color: #8f221c; }
.azione-riduci, .azione-rinnova { background: var(--giallo-soft); color: #7a5500; }
.azione-scala, .azione-riaccendi { background: var(--verde-soft); color: #0a6b35; }
.azione-tieni, .azione-osserva { background: var(--grigio-soft); color: var(--muted); }
.mini-btn.chiaro { background: var(--paper-warm); color: var(--ink); }
.mini-btn.chiaro:hover { background: var(--line); }

.voti { display: inline-flex; align-items: center; gap: 3px; }
.voti-etichetta { font-size: .72rem; color: var(--muted); margin-right: .3rem;
                  font-weight: 600; }
.voti.larghi { display: flex; margin-bottom: .5rem; }
.voti.larghi .voti-etichetta { width: 190px; }
.voti.salvato { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 8px; }
.voto { width: 26px; height: 26px; padding: 0; border-radius: 7px; background: var(--paper-warm);
        color: var(--muted); font-weight: 700; font-size: .78rem; border: 1px solid transparent; }
.voto:hover { background: var(--line); color: var(--ink); }
.voto.attivo { color: #fff; }
.voto-1.attivo { background: #D9342B; }
.voto-2.attivo { background: #E8734A; }
.voto-3.attivo { background: #C88A00; }
.voto-4.attivo { background: #52B37A; }
.voto-5.attivo { background: #12A150; }
.blocco-voti { background: var(--paper); border: 1px solid var(--line);
               border-radius: var(--radius-sm); padding: .8rem; margin: .9rem 0; }

.voto-bollo { float: right; font-size: .72rem; font-weight: 700; padding: .05rem .4rem;
              border-radius: 99px; background: var(--grigio-soft); color: var(--muted); }
.voto-bollo.da-votare { background: var(--accent-soft); color: var(--accent-dark); }
.voto-bollo.voto-1, .voto-bollo.voto-2 { background: var(--rosso-soft); color: #8f221c; }
.voto-bollo.voto-3 { background: var(--giallo-soft); color: #7a5500; }
.voto-bollo.voto-4, .voto-bollo.voto-5 { background: var(--verde-soft); color: #0a6b35; }

.galleria { display: grid; gap: .9rem;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.creativa { background: var(--white); border: 1px solid var(--line);
            border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
            display: flex; flex-direction: column; }
.creativa.stato-approvata { border-color: var(--verde); }
.creativa.stato-scartata { opacity: .5; }
.creativa-visual { position: relative; aspect-ratio: 4/5; background: var(--ink);
                   overflow: hidden; }
.creativa-visual img { width: 100%; height: 100%; object-fit: cover; }
.senza-immagine { height: 100%; display: grid; place-items: center; padding: 1.2rem;
                  color: var(--muted-dark); font-size: .78rem; text-align: center;
                  background: linear-gradient(150deg, #241a5e, var(--ink-deep)); }
.creativa-testo { position: absolute; inset: auto 0 0 0; padding: 1rem;
                  background: linear-gradient(transparent, rgba(13,7,38,.88) 45%);
                  color: #fff; }
.creativa-titolo { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
                   letter-spacing: -.03em; line-height: 1.1; }
.creativa-sotto { font-size: .82rem; color: rgba(255,255,255,.82); margin-top: .25rem; }
.creativa-cta { display: inline-block; margin-top: .6rem; background: var(--accent);
                color: #fff; font-weight: 700; font-size: .78rem; padding: .35rem .8rem;
                border-radius: 8px; }
.creativa-corpo { padding: .9rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; }
.creativa-post { font-size: .84rem; color: #3a3550; margin: .3rem 0 .6rem; flex: 1; }

.avviso-riservato { background: var(--ink); color: rgba(255,255,255,.86);
  border-color: var(--accent); font-size: .85rem; padding: .7rem 1rem;
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }

.link-invito { background: var(--paper); border: 1px dashed var(--indigo);
  border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.link-invito .da-copiare { width: 100%; }
.da-copiare { font-family: var(--mono); font-size: .78rem; background: var(--white); }
.copiato { position: relative; }
.copiato::after { content: 'copiato'; position: absolute; top: -1.4rem; left: 0;
  background: var(--verde); color: #fff; font-size: .68rem; font-weight: 700;
  padding: .1rem .4rem; border-radius: 5px; }

.richiesta { border-left: 3px solid var(--line); padding-left: .9rem; }
.richiesta.urgenza-alta { border-color: var(--rosso); }
.richiesta.urgenza-media { border-color: var(--giallo); }
.richiesta.urgenza-bassa { border-color: var(--verde); }
.richiesta h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.richiesta .voce-azioni { margin-top: .6rem; }

.bottone { display: inline-block; background: var(--ink); color: #fff; font-weight: 650;
  padding: .6rem 1.2rem; border-radius: 9px; }
.bottone:hover { background: var(--indigo); }

/* 9. LOGIN ================================================================= */

.pagina-login { display: grid; place-items: center; min-height: 100vh;
  background: radial-gradient(120% 90% at 50% 0%, #241a5e 0%, var(--ink-deep) 70%); }
.riquadro-login { background: var(--white); border-radius: 22px; padding: 2.2rem;
  width: min(400px, calc(100vw - 2rem)); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
.riquadro-login h1 { font-size: 1.5rem; margin-bottom: .2rem; }
.riquadro-login .sottotitolo { color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }
.riquadro-login form { display: flex; flex-direction: column; gap: .3rem; }
.riquadro-login label { margin-top: .7rem; }
.riquadro-login button { margin-top: 1.2rem; width: 100%; padding: .7rem; }
.nota-login { margin-top: 1.2rem; font-size: .78rem; color: var(--muted); text-align: center; }
.errore { background: var(--rosso-soft); color: #8f221c; font-size: .85rem;
          padding: .55rem .8rem; border-radius: 9px; margin-bottom: .6rem; }

/* 10. SCHERMI STRETTI ====================================================== */

@media (max-width: 1150px) {
  .griglia-kpi { grid-template-columns: repeat(2, 1fr); }
  .due-colonne { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .guscio { flex-direction: column; }
  .barra { width: 100%; flex: none; height: auto; position: static;
           flex-direction: row; align-items: center; gap: 1rem; padding: .8rem 1rem;
           overflow-x: auto; }
  .barra nav { flex-direction: row; flex: 1; gap: .2rem; }
  .voce span { display: none; }
  .voce { padding: .6rem; }
  .nav-sep { display: none; }
  .barra-piede { border: 0; padding: 0; display: flex; align-items: center; gap: .8rem; }
  .utente { margin: 0; }
  .utente-testo { display: none; }
  .marchio-testo { display: none; }
  main { padding: 1rem; }
  .due-mini { grid-template-columns: 1fr; }
  .bolla { max-width: 88%; }
  .modulo .campi { grid-template-columns: 1fr; }
  .lavagna { grid-template-columns: repeat(6, 74vw); }
}

/* --- dati personali: il rosso serve a far fermare un attimo prima di premere */
.mini-btn.pericolo { border-color: var(--rosso); color: var(--rosso); }
.mini-btn.pericolo:hover { background: var(--rosso); color: #fff; }

/* l'informativa: righe corte, si legge invece di scorrere */
.testo-lungo { max-width: 60ch; margin: 1.4rem auto 0; text-align: left; }
.testo-lungo h2 { font-size: 1rem; margin: 1.4rem 0 .3rem; }
.testo-lungo p { color: var(--muted); line-height: 1.6; margin: 0; }