/* ==========================================================================
   Piattaforma ALTRO — foglio di stile unico

   I colori sono quelli del marchio (gli stessi del sito), il carattere e'
   Poppins, il disegno e' suo: barra blu a sinistra, schede con il filo di
   colore in cima, numeri grossi, arancio solo dove conta. La dashboard di
   BradipAi resta un'altra cosa.

   1. Token  2. Base  3. Barra  4. Impianto  5. Numeri  6. Riquadri
   7. Tabelle  8. Grafici  9. Creative  10. CRO e registro  11. Moduli
   12. Accesso  13. Schermi stretti
   ========================================================================== */

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

@font-face { font-family: "Poppins"; src: url("/assets/poppins-400.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/poppins-500.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/poppins-600.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/poppins-700.woff2") format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* i colori del marchio, gli stessi del sito */
  --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: #B7AEE4;
  --line:       #EAE6F2;
  --line-forte: #D8D2E7;
  --line-dark:  rgba(255,255,255,.16);

  --verde:      #12A150;
  --verde-soft: #E6F8EE;
  --giallo:     #C88A00;
  --giallo-soft:#FDF4DD;
  --rosso:      #D9342B;
  --rosso-soft: #FDEAE8;
  --grigio:     #8B8798;
  --grigio-soft:#F1EFF6;

  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --raggio: 14px;
  --raggio-sm: 9px;
  --ombra: 0 1px 2px rgba(21,13,63,.03);
  --ombra-su: 0 2px 10px -4px rgba(21,13,63,.14);
  --barra-w: 232px;
  --largo: 1480px;
  --blu-barra: linear-gradient(176deg, #241A63 0%, #150D3F 48%, #0D0726 100%);
}

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

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

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

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
h1 { font-size: 27px; font-weight: 700; }
h2 { font-size: 16.5px; }
h3 { font-size: 15px; }

p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
a { color: var(--indigo); }
a.link { color: var(--indigo); text-decoration: none; font-weight: 500;
         border-bottom: 1px solid rgba(59,42,168,.28); }
a.link:hover { color: var(--accent-dark); border-color: currentColor; }

code { font-family: var(--mono); font-size: .9em; background: var(--grigio-soft);
       padding: 1px 6px; border-radius: 5px; }

.salta { position: absolute; left: -9999px; top: 0; background: var(--ink);
         color: #fff; padding: 10px 16px; z-index: 50; border-radius: 0 0 8px 0; }
.salta:focus { left: 0; top: 0; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.forte { font-weight: 600; }
.sotto { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.vuoto { color: var(--muted); padding: 26px 0; text-align: center; }
.occhiello { color: var(--muted); font-size: 13.5px; }

/* 3. BARRA E LASTRA ======================================================== */
/*
   L'impianto e' la differenza vera, non il colore: la pagina e' un campo blu
   ALTRO e il contenuto sta su una lastra bianca che ci galleggia sopra, con
   la barra che vive dentro il blu senza bordi. La dashboard di BradipAi e'
   l'opposto — foglio beige, barra scura attaccata al bordo, schedine ovunque.
   Qui dentro la lastra non ci sono schede che galleggiano: ci sono sezioni
   separate da una riga, come in un documento.
*/

body {
  background: var(--blu-barra);
  background-attachment: fixed;
}

.guscio {
  display: grid;
  grid-template-columns: var(--barra-w) 1fr;
  min-height: 100vh;
  gap: 0;
}

.barra {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  color: #fff; padding: 22px 0 18px;
  background: transparent;
}

.marchio {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 20px; margin: 0 0 18px;
  border-bottom: 1px solid var(--line-dark);
  color: #fff; text-decoration: none;
}
.marchio-segno {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 16px;
}
.marchio-testo {
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  display: flex; flex-direction: column; line-height: 1.1;
}
.marchio-testo em {
  font-style: normal; font-weight: 500; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted-dark);
}

.scelta-cliente { display: grid; gap: 5px; margin: 0 0 20px; padding: 0 16px; }
.scelta-cliente label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted-dark); font-weight: 600; padding-left: 4px;
}
.scelta-cliente select {
  width: 100%; font-family: var(--font); font-weight: 600; font-size: 14px;
  padding: 9px 11px; color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line-dark); border-radius: 10px;
}
.scelta-cliente select option { color: var(--text); }
.scelta-cliente.fissa strong { font-size: 15px; padding-left: 4px; }

nav.menu { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.voce {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--muted-dark); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
}
.voce svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
            stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.voce:hover { background: rgba(255,255,255,.08); color: #fff; }
.voce.attiva { background: var(--paper); color: var(--ink); font-weight: 600; }
.voce.attiva svg { stroke: var(--accent); }
.nav-sep {
  margin: 20px 0 8px; padding: 0 14px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(183,174,228,.6);
}

.barra-piede {
  margin-top: auto; padding: 16px 18px 0;
  border-top: 1px solid var(--line-dark);
  display: flex; align-items: center; gap: 10px;
}
.utente { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
}
.utente-testo { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.utente-testo strong { font-size: 12.5px; font-weight: 600; }
.utente-testo small { font-size: 11px; color: var(--muted-dark); }
.esci {
  margin-left: auto; color: var(--muted-dark); font-size: 11.5px;
  text-decoration: none; border: 1px solid var(--line-dark);
  border-radius: 8px; padding: 4px 9px;
}
.esci:hover { color: #fff; border-color: rgba(255,255,255,.45); }

/* 4. IMPIANTO ============================================================== */

main {
  background: var(--paper);
  border-radius: 20px 0 0 20px;
  margin: 14px 0 14px 0;
  padding: 34px clamp(22px, 3vw, 46px) 80px;
  min-width: 0;
  box-shadow: -18px 0 50px -30px rgba(0,0,0,.6);
}

/* l'intestazione: occhiello sopra, titolo grande, niente riga sotto */
.cima {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.cima h1 { font-size: 38px; letter-spacing: -.035em; line-height: 1; }
.cima-cliente {
  margin: 0 0 8px; color: var(--accent-dark); font-size: 11px;
  text-transform: uppercase; letter-spacing: .2em; font-weight: 600;
}

.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.in-riga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tre-numeri { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.tre-numeri strong { font-size: 19px; font-weight: 700; }

.periodi { display: flex; gap: 3px; }
.periodi a {
  padding: 5px 12px; font-size: 12.5px; color: var(--muted);
  text-decoration: none; border-radius: 8px; font-weight: 500;
}
.periodi a:hover { background: var(--paper-warm); color: var(--text); }
.periodi a.attivo { background: var(--ink); color: #fff; font-weight: 600; }

/* 5. NUMERI ================================================================ */
/* Una fascia sola, divisa da righe sottili: non sei schede che galleggiano. */

.griglia-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-forte);
  margin-bottom: 34px;
}
.kpi {
  position: relative;
  /* aria ai lati della riga divisoria, ma non tanta da far andare a capo i
     numeri: con sei schede in fila lo spazio vero e' poco */
  padding: 20px 24px 22px;
  border-right: 1px solid var(--line);
}
.kpi:first-child { padding-left: 0; }
.kpi:last-child { padding-right: 0; border-right: 0; }

/* il giudizio e' un pallino accanto all'etichetta, non una barretta
   attaccata al filo divisorio */
.kpi-titolo::before {
  content: ""; display: none;
  width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}
.kpi.verde .kpi-titolo::before,
.kpi.giallo .kpi-titolo::before,
.kpi.rosso .kpi-titolo::before { display: inline-block; }
.kpi.verde .kpi-titolo::before  { background: var(--verde); }
.kpi.giallo .kpi-titolo::before { background: var(--giallo); }
.kpi.rosso .kpi-titolo::before  { background: var(--rosso); }
.kpi-titolo {
  margin: 0 0 8px; color: var(--muted);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .15em;
}
.kpi-valore {
  margin: 0; font-weight: 700; font-size: 32px; line-height: 1;
  white-space: nowrap;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.kpi-sotto { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.griglia-kpi.stretta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.griglia-kpi.stretta .kpi-valore { font-size: 25px; }

.delta { font-size: 12px; font-weight: 600; white-space: nowrap; }
.delta.bene { color: var(--verde); }
.delta.male { color: var(--rosso); }
.delta.neutro { color: var(--muted); font-weight: 500; }

.stato {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--text);
}
.stato i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.stato-verde  i { background: var(--verde); }
.stato-giallo i { background: var(--giallo); }
.stato-rosso  i { background: var(--rosso); }
.stato-grigio i { background: var(--line-forte); }
.stato-rosso { color: var(--rosso); font-weight: 600; }

.tag {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: var(--grigio-soft); color: var(--muted);
  font-size: 11.5px; font-weight: 500; margin: 0;
}
.tag-vuoto { background: transparent; color: var(--muted); border: 1px dashed var(--line-forte); }

/* 6. SEZIONI =============================================================== */
/* Dentro la lastra non ci sono schede: ci sono sezioni, separate da una riga
   e da un po' di aria. Si legge come un documento, non come un cruscotto. */

.riquadro {
  background: transparent; border: 0; box-shadow: none;
  border-top: 1px solid var(--line);
  padding: 26px 0 0; margin: 0 0 34px;
}
.riquadro:first-of-type { border-top: 0; padding-top: 0; }
.due-colonne > .riquadro { margin-bottom: 0; }
.riquadro-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 0 0 18px;
}
.riquadro-testa h2 { font-size: 20px; letter-spacing: -.025em; }
.riquadro-testa h2::before { content: none; }
.riquadro-testa .sotto { display: inline; }

.avviso {
  display: block; padding: 12px 16px; margin-bottom: 9px;
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--line-forte);
  border-radius: 10px; font-size: 13.5px;
}
.avviso strong { font-weight: 600; }
.avviso-rosso  { border-left-color: var(--rosso); }
.avviso-rosso strong { color: var(--rosso); }
.avviso-giallo { border-left-color: var(--giallo); }
.avviso-giallo strong { color: #8A6100; }
.avviso-verde  { border-left-color: var(--verde); }
.avviso-grigio { border-left-color: var(--line-forte); }

.pieghevole { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; }
.pieghevole summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--indigo); }
.pieghevole[open] summary { margin-bottom: 14px; }
.pieghevole.piccolo { border: 0; margin: 0; padding: 0; }

.testo-lungo { max-width: 72ch; }
.testo-lungo h2 { margin: 26px 0 8px; font-size: 20px; }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo h3 { margin: 16px 0 6px; }
.testo-lungo ul { margin: 0 0 12px; padding-left: 20px; }
.testo-lungo li { margin-bottom: 5px; }

pre.da-copiare {
  background: var(--ink-deep); color: #E8E3FA;
  padding: 16px 18px; border-radius: 12px;
  overflow-x: auto; font-family: var(--mono); font-size: 12px;
  white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}

/* 7. TABELLE =============================================================== */

.scorri { overflow-x: auto; margin: 0; padding: 0; }
.tabella { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabella th {
  text-align: left; padding: 8px 16px 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line-forte); white-space: nowrap;
}
.tabella th.num { text-align: right; }
.tabella td { padding: 12px 16px; border-bottom: 1px solid var(--line);
              vertical-align: middle; }
.tabella th:first-child, .tabella td:first-child { padding-left: 0; }
.tabella th:last-child, .tabella td:last-child { padding-right: 0; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: var(--white); }
.tabella td.num { font-variant-numeric: tabular-nums; }

/* 8. GRAFICI =============================================================== */

.gr { margin: 0; }
.gr svg { width: 100%; height: auto; display: block; }
.griglia { stroke: var(--line); stroke-width: 1; }
.asse { font-size: 10px; fill: var(--muted); }
.barra-verde  { fill: var(--verde); }
.barra-giallo { fill: var(--giallo); }
.barra-rosso  { fill: var(--rosso); }
.barra-grigio { fill: var(--line-forte); }
.gr rect:hover { opacity: .82; }
.linea-cpl { fill: none; stroke: var(--ink); stroke-width: 2.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: 10.5px; fill: var(--accent-dark); font-weight: 600; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 11px;
           font-size: 11.5px; color: var(--muted); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i.q { width: 9px; height: 9px; border-radius: 3px; }
.legenda i.q.verde { background: var(--verde); }
.legenda i.q.giallo { background: var(--giallo); }
.legenda i.q.rosso { background: var(--rosso); }
.legenda i.l { width: 14px; height: 2px; background: var(--ink); }

.spark { display: inline-block; vertical-align: middle; }
.spark polyline { fill: none; stroke: var(--indigo); stroke-width: 1.6; }

.quote { display: grid; gap: 8px; }
.quota-riga {
  display: grid; grid-template-columns: minmax(104px, 1.1fr) 3fr auto auto;
  align-items: center; gap: 12px; font-size: 13px;
}
.quota-sbarra { display: block; height: 9px; background: var(--grigio-soft);
                border-radius: 999px; overflow: hidden; }
.quota-sbarra i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--indigo-soft);
}
.quota-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.quota-nota { color: var(--muted); font-size: 11.5px; white-space: nowrap;
              min-width: 76px; text-align: right; }

.imbuto { display: grid; gap: 10px; }
.imbuto-riga { display: grid; grid-template-columns: 86px 1fr auto auto;
               align-items: center; gap: 12px; font-size: 13px; }
.imbuto-nome { font-weight: 600; }
.imbuto-sbarra { display: block; height: 24px; background: var(--grigio-soft);
                 border-radius: 999px; overflow: hidden; }
.imbuto-sbarra i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--indigo);
}
.imbuto-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.imbuto-passo { color: var(--muted); font-size: 11.5px; min-width: 152px; text-align: right; }
.imbuto-passo.male { color: var(--rosso); font-weight: 600; }

/* 9. CREATIVE ============================================================== */

.galleria-creative { display: grid; gap: 16px;
                     grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.creativa-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--raggio);
  overflow: hidden;
}
.creativa-card:hover { border-color: var(--line-forte); }
.creativa-grafica { display: block; }
.mini-grafica {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 148px; max-height: 220px; overflow: hidden;
  background: var(--grigio-soft); color: var(--muted); font-size: 26px;
}
.mini-grafica img { width: 100%; height: auto; display: block; object-fit: cover; }
.senza-immagine { background: var(--grigio-soft); color: var(--line-forte); }
.creativa-grande .mini-grafica { max-height: 400px; border-radius: var(--raggio-sm); }
.creativa-corpo { padding: 13px 15px 15px; }
.creativa-corpo h3 { margin: 0 0 3px; font-size: 14px; line-height: 1.35; }
.creativa-corpo h3 a { border: 0; }
.creativa-meta { margin: 0; color: var(--muted); font-size: 12px; }
.creativa-stati { margin: 9px 0 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.creativa-numeri {
  margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.creativa-numeri dt { margin: 0; color: var(--muted); font-size: 10px;
                      text-transform: uppercase; letter-spacing: .1em; }
.creativa-numeri dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 500;
                      font-variant-numeric: tabular-nums; }
.creativa-numeri .forte { font-weight: 700; }
.creativa-quota { margin: 13px 0 10px; display: flex; align-items: center; gap: 8px; }
.creativa-quota small { color: var(--muted); white-space: nowrap; font-size: 11.5px; }
.creativa-testo { white-space: pre-wrap; max-width: 60ch; }
.creativa-dettaglio { align-items: start; }

/* 10. CRO E REGISTRO ======================================================= */

.proposte { display: grid; gap: 11px; }
.proposta {
  background: var(--white);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--raggio-sm); padding: 13px 16px;
}
.proposta-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proposta-testa h3 { margin: 0; }
.proposta p { margin: 7px 0 0; font-size: 13.5px; }
.proposta-euro { margin-left: auto; font-weight: 700;
                 font-variant-numeric: tabular-nums; color: var(--accent-dark); }

/* la matrice angolo × target */
.matrice { border-collapse: separate; border-spacing: 4px; font-size: 12.5px; }
.matrice th { font-size: 10.5px; }
.matrice .cella {
  border-radius: var(--raggio-sm); padding: 8px 10px; min-width: 96px;
  background: var(--grigio-soft); border: 1px dashed var(--line-forte);
}
.matrice .cella.piena { background: var(--white); border: 1px solid var(--line); }
.matrice .cella.verde  { border-left: 3px solid var(--verde); }
.matrice .cella.giallo { border-left: 3px solid var(--giallo); }
.matrice .cella.rosso  { border-left: 3px solid var(--rosso); }
.matrice .cella.da-provare {
  background: var(--accent-soft); border: 1px dashed var(--accent);
  color: var(--accent-dark); font-weight: 500;
}
.matrice .cella strong { display: block; font-size: 14px; }
.matrice .cella small { color: var(--muted); font-size: 11px; }
.matrice .riga-angolo { text-align: left; font-weight: 600; white-space: nowrap;
                        padding-right: 10px; }

.scheda-target {
  border: 1px solid var(--line); border-radius: var(--raggio);
  padding: 14px 16px; background: var(--white); margin-bottom: 12px;
}
.scheda-target > header { display: flex; align-items: baseline; gap: 10px;
                          flex-wrap: wrap; margin-bottom: 6px; }
.scheda-target h3 { margin: 0; }
.micro {
  margin: 12px 0 0; padding-left: 14px; border-left: 2px solid var(--line);
  display: grid; gap: 9px;
}
.micro-voce { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
              font-size: 13px; }
.micro-voce strong { font-weight: 600; }

/* 11. MODULI =============================================================== */

.modulo { display: grid; gap: 13px; }
.modulo label { display: grid; gap: 5px; font-size: 12px; font-weight: 600;
                color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.modulo .due-colonne { gap: 13px 16px; }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  font: inherit; font-size: 14px; color: var(--text); background: var(--white);
  border: 1px solid var(--line-forte); border-radius: var(--raggio-sm);
  padding: 8px 11px; width: 100%; text-transform: none; letter-spacing: 0;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(91,73,207,.22); outline-offset: 0;
  border-color: var(--indigo);
}
fieldset { border: 1px solid var(--line); border-radius: var(--raggio-sm);
           padding: 11px 13px; margin: 0; }
legend { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 0 6px;
         text-transform: uppercase; letter-spacing: .08em; }
.casella { display: flex; align-items: center; gap: 8px; font-weight: 500;
           color: var(--text); font-size: 13.5px; text-transform: none;
           letter-spacing: 0; }
.casella input { width: auto; }

.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  border-radius: 8px; padding: 9px 20px;
  font-family: var(--font); font-weight: 500; font-size: 14px;
  cursor: pointer; text-decoration: none; justify-self: start;
}
.bottone:hover { background: var(--indigo); border-color: var(--indigo); }
.mini-btn {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-forte); border-radius: 8px;
  padding: 6px 13px; font-family: var(--font); font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.mini-btn:hover { border-color: var(--ink); background: var(--paper); }

.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 15px; }
.filtri select { width: auto; min-width: 160px; }

.errore { background: var(--white); color: var(--rosso);
          border: 1px solid var(--line); border-left: 3px solid var(--rosso);
          padding: 10px 13px; border-radius: var(--raggio-sm); font-size: 13.5px; }
.nota { background: var(--grigio-soft); border: 1px solid var(--line);
        padding: 10px 13px; border-radius: var(--raggio-sm); font-size: 13.5px; }

/* 12. ACCESSO ============================================================== */

body.pagina-login {
  min-height: 100vh; margin: 0; display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--ink);
}
body.pagina-login::before {
  content: "";
  background: var(--blu-barra);
}
.riquadro-login {
  background: var(--paper); display: flex; flex-direction: column;
  justify-content: center; padding: 50px clamp(28px, 6vw, 88px);
}
.riquadro-login .marchio-segno {
  width: 46px; height: 46px; font-size: 24px; border-radius: 14px; margin-bottom: 20px;
}
.riquadro-login h1 { font-size: 36px; margin-bottom: 8px;
  color: var(--ink); }
.riquadro-login .occhiello { margin-bottom: 28px; max-width: 34ch; }
.riquadro-login .modulo { max-width: 370px; }
.riquadro-login .bottone { width: 100%; margin-top: 6px; }
.nota-login { margin-top: 18px; font-size: 13px; color: var(--muted); }
.nota-login a { color: var(--muted); }

/* 13. SCHERMI STRETTI ====================================================== */

@media (max-width: 1100px) { .due-colonne { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .guscio { grid-template-columns: 1fr; }
  main { border-radius: 18px; margin: 0 8px 8px; padding: 22px 18px 60px; }
  .cima h1 { font-size: 27px; }
  .barra { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
           align-items: center; gap: 10px; padding: 12px 16px; }
  .marchio { border: 0; padding: 0; margin: 0; }
  .scelta-cliente { margin: 0 0 0 auto; padding: 0; grid-template-columns: auto auto;
                    align-items: center; gap: 8px; }
  nav.menu { order: 3; width: 100%; flex-direction: row; overflow-x: auto;
             padding: 0; gap: 4px; }
  .voce.attiva::before { display: none; }
  .nav-sep { display: none; }
  .barra-piede { order: 2; margin: 0; padding: 0; border: 0; }
  .utente-testo { display: none; }
  main { padding: 18px 16px 60px; }
  h1 { font-size: 23px; }
  .quota-nota, .imbuto-passo { display: none; }
  .galleria-creative { grid-template-columns: 1fr; }
  body.pagina-login { grid-template-columns: 1fr; }
  body.pagina-login::before { display: none; }
}

/* il grafico della performance: colonne neutre, ritorno in arancio */
.colonna-spesa { fill: #DCD7EC; }
.gr rect.colonna-spesa:hover { fill: #C7BFE4; }
.linea-roas { fill: none; stroke: var(--accent); stroke-width: 2.2;
              stroke-linejoin: round; stroke-linecap: round; }
.velo-roas { fill: rgba(255,122,77,.10); stroke: none; }
.punto-roas { fill: var(--accent); }
.asse-dx { fill: var(--accent-dark); }
.legenda i.c { width: 9px; height: 12px; border-radius: 2px; background: #DCD7EC; }
.legenda i.l.arancio { background: var(--accent); }

/* 14. FABBRICA DEGLI HOOK ================================================== */

.lavagna-hook {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  align-items: start;
}
.colonna-hook {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px;
}
.colonna-hook > header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.colonna-hook h3 { margin: 0; font-size: 14px; }
.colonna-hook > header span {
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted);
}
.colonna-hook > .sotto { margin-bottom: 12px; font-size: 11.5px; }
.colonna-hook .colonna-corpo { display: grid; gap: 10px; }
.colonna-da_testare { border-top: 3px solid var(--line-forte); }
.colonna-in_test    { border-top: 3px solid var(--indigo-soft); }
.colonna-vinto      { border-top: 3px solid var(--verde); }
.colonna-perso      { border-top: 3px solid var(--rosso); }

.carta-hook {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px;
}
.hook-testo { margin: 0 0 8px; font-weight: 500; line-height: 1.4; }
.hook-meta { margin: 0; display: flex; gap: 5px; flex-wrap: wrap; }
.hook-numeri { margin: 9px 0 0; font-size: 12px; color: var(--muted);
               font-variant-numeric: tabular-nums; }
.hook-sugg { margin: 7px 0 0; font-size: 12px; color: var(--accent-dark);
             font-weight: 500; }
.carta-hook form { margin-top: 10px; }
.carta-hook select { font-size: 12px; padding: 4px 7px; }

/* 15. GENERATORE DI PROMPT ================================================= */

.prompts { display: grid; gap: 16px; }
.prompt-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 15px 17px;
}
.prompt-card .proposta-testa { margin-bottom: 10px; }
.prompt-traccia { margin: 0 0 11px; font-size: 13.5px; }
.prompt-card pre.da-copiare { margin: 0 0 11px; }

.sapere { display: grid; gap: 10px; }
.sapere-voce { border: 1px solid var(--line); border-radius: 10px;
               padding: 11px 13px; background: var(--white); }
.sapere-voce summary { display: flex; align-items: baseline; gap: 9px;
                       flex-wrap: wrap; color: var(--ink); }
.sapere-voce summary .sotto { display: inline; margin-left: auto; }
.sapere-voce h3 { margin: 0 0 4px; }

/* 16. ASSISTENTE =========================================================== */

.scorciatoie { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.scorciatoie form { margin: 0; }

.filo { display: grid; gap: 14px; margin-bottom: 18px; max-width: 900px; }
.bolla { max-width: 86%; }
.bolla.mia { justify-self: end; }
.bolla-chi { font-size: 11px; color: var(--muted); margin-bottom: 4px;
             display: flex; gap: 8px; }
.bolla.mia .bolla-chi { justify-content: flex-end; }
.bolla-ora { color: var(--line-forte); }
.bolla-testo {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 16px; font-size: 14px; line-height: 1.6;
}
.bolla.mia .bolla-testo {
  background: var(--ink); color: #fff; border-color: var(--ink);
  border-bottom-right-radius: 4px;
}
.bolla.sua .bolla-testo { border-bottom-left-radius: 4px; }
.bolla-testo h2 { font-size: 15px; margin: 14px 0 6px; }
.bolla-testo h2:first-child { margin-top: 0; }
.bolla-testo ul { margin: 6px 0; padding-left: 18px; }

.invia { display: flex; gap: 10px; align-items: flex-end; max-width: 900px; }
.invia textarea { flex: 1; border-radius: 12px; }
.invia .bottone { flex: none; }

.elenco-manca { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.elenco-manca li { margin-bottom: 4px; }

@media (max-width: 1100px) {
  .lavagna-hook { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 700px) {
  .lavagna-hook { grid-template-columns: 1fr; }
}

/* il trascinamento sulla lavagna degli hook */
.carta-hook[draggable="true"] { cursor: grab; }
.carta-hook.in-mano { opacity: .45; cursor: grabbing; }
.carta-hook.salvata { outline: 2px solid var(--verde); outline-offset: 2px; }
.colonna-hook.sopra { background: var(--accent-soft); border-color: var(--accent); }
.colonna-hook .colonna-corpo { min-height: 60px; }
.con-trascino .sposta-mano { display: none; }
@media (max-width: 860px) {
  .con-trascino .sposta-mano { display: flex; }
}

/* il sottomenu dentro Creative */
.sotto-voci {
  display: grid; gap: 1px; margin: 2px 0 4px 16px;
  padding-left: 11px; border-left: 1px solid var(--line-dark);
}
.voce-sotto { padding: 6px 10px; font-size: 12.5px; }
.voce-sotto span { opacity: .92; }
.voce.aperta { color: #fff; }

/* la domanda sotto il titolo */
.domanda {
  margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 58ch;
  line-height: 1.5;
}

/* i consigli dentro l'assistente */
.consigli { display: grid; gap: 11px; }
.consiglio {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--line-forte); border-radius: 10px;
  padding: 13px 16px;
}
.consiglio header { display: flex; align-items: baseline; gap: 10px;
                    flex-wrap: wrap; margin-bottom: 6px; }
.consiglio h3 { margin: 0; font-size: 14.5px; }
.consiglio p { margin: 0 0 6px; font-size: 13.5px; }
.consiglio-soldi { border-left-color: var(--rosso); }
.consiglio-soldi .tag { background: var(--rosso-soft); color: var(--rosso); }
.consiglio-sito { border-left-color: var(--accent); }
.consiglio-sito .tag { background: var(--accent-soft); color: var(--accent-dark); }
.consiglio-clienti { border-left-color: var(--indigo-soft); }
.consiglio-catalogo { border-left-color: var(--giallo); }
.consiglio-lavoro { border-left-color: var(--line-forte); }