:root {
  --bg: #0e1013;
  --bg-2: #14171c;
  --bg-3: #1b1f26;
  --bg-4: #232830;
  --linea: #2b313b;
  --testo: #e8eaed;
  --testo-2: #a3abb8;
  --testo-3: #6f7887;
  --oro: #f57c1f;
  --oro-scuro: #b3550c;
  --giorno: #e0b344;
  --notte: #6b8cc4;
  --magic: #c47ba0;
  --rosso: #d05b57;
  --verde: #5fa877;
  --raggio: 8px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--oro); }

/* ---------- struttura ---------- */

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

.laterale {
  width: 232px;
  flex: 0 0 232px;
  background: var(--bg-2);
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marchio {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--linea);
}
.marchio .logo-app { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.marchio h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--testo);
}
.marchio h1 b { color: var(--oro); font-weight: 700; }
.marchio .logo-app img { display: block; color: var(--testo); }
.marchio p { margin: 3px 0 0; font-size: 11px; color: var(--testo-3); letter-spacing: 0.04em; }

.menu { padding: 8px 0; flex: 1; }
.menu-gruppo { padding: 12px 16px 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--testo-3); }
.voce {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 16px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  color: var(--testo-2);
  text-align: left;
  font-size: 13px;
}
.voce:hover { background: var(--bg-3); color: var(--testo); }
.voce.attiva { background: var(--bg-3); color: var(--oro); border-left-color: var(--oro); }
.voce .conta { margin-left: auto; font-size: 11px; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.voce:disabled { opacity: 0.35; cursor: default; }

.principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.testata {
  padding: 16px 26px;
  border-bottom: 1px solid var(--linea);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
.testata h2 { margin: 0; font-size: 17px; font-weight: 600; }
.testata .sub { color: var(--testo-3); font-size: 12px; }
.testata .spinta { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.contenuto { padding: 22px 26px 60px; flex: 1; }

/* ---------- controlli ---------- */

.btn {
  padding: 7px 13px;
  border-radius: var(--raggio);
  border: 1px solid var(--linea);
  background: var(--bg-3);
  color: var(--testo);
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--bg-4); border-color: #3a424f; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.oro { background: var(--oro); border-color: var(--oro); color: #16181c; font-weight: 600; }
.btn.oro:hover:not(:disabled) { background: #ff8f3a; }
.btn.piccolo { padding: 4px 9px; font-size: 12px; }

/* Tutti i tipi di campo che usiamo davvero. Bastava dimenticarne uno — la
   ricerca degli elementi era "search" — perché quel campo restasse bianco col
   testo bianco dentro, cioè invisibile. */
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="email"], input[type="date"], select, textarea {
  background: var(--bg-3);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 7px 10px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--oro-scuro); }
input[type="number"] { width: 66px; }

.campo { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--testo-2); }

/* ---------- schede dati ---------- */

.griglia-stat { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 11px; margin-bottom: 22px; }
.stat { background: var(--bg-2); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 13px 15px; }
.stat .val { font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .eti { font-size: 11px; color: var(--testo-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.stat .nota { font-size: 11px; color: var(--testo-2); margin-top: 5px; }
.stat.oro .val { color: var(--oro); }

.pannello {
  background: var(--bg-2);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  margin-bottom: 18px;
  overflow: hidden;
}
.pannello > h3 {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--linea);
  background: var(--bg-3);
  display: flex;
  align-items: center;
  gap: 9px;
}
.pannello > h3 .conta { margin-left: auto; font-size: 11px; color: var(--testo-3); font-weight: 400; }
.pannello .corpo { padding: 14px 16px; }

/* ---------- tabelle ---------- */

.tabella-wrap { overflow-x: auto; }
table.dati { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dati th {
  text-align: left;
  padding: 9px 11px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--linea);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--testo-3);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.dati td { padding: 8px 11px; border-bottom: 1px solid var(--bg-3); vertical-align: top; }
table.dati tr:hover td { background: var(--bg-3); }
table.dati td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dati .slug { font-family: var(--mono); font-size: 12px; }

/* ---------- etichette ---------- */

.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 11px;
  border: 1px solid var(--linea);
  background: var(--bg-3);
  color: var(--testo-2);
  white-space: nowrap;
}
.tag.giorno { color: var(--giorno); border-color: rgba(224, 179, 68, 0.35); background: rgba(224, 179, 68, 0.08); }
.tag.notte { color: var(--notte); border-color: rgba(107, 140, 196, 0.35); background: rgba(107, 140, 196, 0.1); }
.tag.magic { color: var(--magic); border-color: rgba(196, 123, 160, 0.35); background: rgba(196, 123, 160, 0.1); }
.tag.int { color: #8fb3a5; }
.tag.est { color: #c9a37e; }
.tag.alto { color: var(--rosso); border-color: rgba(208, 91, 87, 0.4); background: rgba(208, 91, 87, 0.1); }
.tag.medio { color: var(--giorno); }
.tag.basso { color: var(--verde); }

.pallini { display: inline-flex; gap: 2px; }
.pallino { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-4); }
.pallino.on { background: var(--oro); }
.pallino.on.c4 { background: #d98341; }
.pallino.on.c5 { background: var(--rosso); }

/* ---------- caricamento ---------- */

.avvio { max-width: 620px; margin: 8vh auto; text-align: center; }
.avvio h2 { font-size: 26px; margin: 0 0 8px; }
.avvio p { color: var(--testo-2); margin: 0 0 26px; }

.dropzone {
  border: 2px dashed var(--linea);
  border-radius: 14px;
  padding: 46px 26px;
  cursor: pointer;
  background: var(--bg-2);
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.sopra { border-color: var(--oro); background: var(--bg-3); }
.dropzone .icona { font-size: 40px; }
.dropzone .grande { font-size: 16px; margin-top: 10px; }
.dropzone .piccolo { color: var(--testo-3); font-size: 12px; margin-top: 5px; }

.barra { height: 4px; background: var(--bg-4); border-radius: 4px; overflow: hidden; margin-top: 14px; }
.barra > div { height: 100%; background: var(--oro); transition: width 0.25s; }

.avviso {
  padding: 11px 14px;
  border-radius: var(--raggio);
  border: 1px solid rgba(208, 91, 87, 0.4);
  background: rgba(208, 91, 87, 0.09);
  color: #ecb3b0;
  margin-bottom: 16px;
  font-size: 13px;
}
.avviso.info { border-color: rgba(245, 124, 31, 0.35); background: rgba(245, 124, 31, 0.07); color: #e8cf9d; }

.vuoto { color: var(--testo-3); text-align: center; padding: 40px 20px; font-size: 13px; }

/* ---------- stripboard ---------- */

.strip {
  display: grid;
  grid-template-columns: 46px 62px 1fr 116px 78px 60px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-left: 3px solid var(--linea);
  background: var(--bg-2);
  border-bottom: 1px solid var(--bg-3);
  font-size: 13px;
}
.strip.g { border-left-color: var(--giorno); }
.strip.n { border-left-color: var(--notte); }
.strip.m { border-left-color: var(--magic); }
.strip.esclusa { opacity: 0.35; }
.strip .titolo { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip input[type="number"] { width: 54px; padding: 3px 6px; }

.gruppo-giorno {
  padding: 7px 12px;
  background: var(--bg-4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--testo-2);
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--linea);
}

/* ---------- matrice ---------- */

.matrice { overflow: auto; max-height: 74vh; }
.matrice table { border-collapse: separate; border-spacing: 0; font-size: 11px; }
.matrice th.ruota {
  height: 118px;
  white-space: nowrap;
  padding: 0;
  vertical-align: bottom;
  background: var(--bg-3);
  position: sticky;
  top: 0;
  z-index: 2;
}
.matrice th.ruota > div { transform: rotate(-60deg); transform-origin: left bottom; width: 22px; padding: 0 0 6px 4px; font-size: 11px; }
.matrice td.nome, .matrice th.nome {
  position: sticky;
  left: 0;
  background: var(--bg-2);
  z-index: 3;
  padding: 3px 10px;
  white-space: nowrap;
  border-right: 1px solid var(--linea);
  font-size: 12px;
}
.matrice th.nome { z-index: 4; top: 0; background: var(--bg-3); }
.matrice td.cella { width: 22px; height: 22px; text-align: center; border-bottom: 1px solid var(--bg-3); }
.matrice td.cella.p1 { background: rgba(245, 124, 31, 0.22); }
.matrice td.cella.p2 { background: var(--oro); color: #16181c; font-weight: 700; }

/* ---------- scheda scena ---------- */

.scene-lista { display: grid; gap: 12px; }
.scheda-scena { background: var(--bg-2); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; }
.scheda-scena > .testa {
  padding: 10px 14px;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
}
.scheda-scena .n {
  font-family: var(--mono);
  background: var(--bg-4);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--oro);
}
.scheda-scena .slug { font-family: var(--mono); font-size: 12.5px; flex: 1; min-width: 200px; }
.scheda-scena .corpo { padding: 14px; display: none; }
.scheda-scena.aperta .corpo { display: block; }
.reparti-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.reparto-box { background: var(--bg-3); border-radius: var(--raggio); padding: 10px 12px; }
.reparto-box h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--testo-3); }
.reparto-box ul { margin: 0; padding-left: 16px; }
.reparto-box li { margin-bottom: 3px; font-size: 12.5px; }
.reparto-box li .nota { color: var(--testo-3); font-size: 11.5px; }

.sinossi { color: var(--testo-2); font-style: italic; margin-bottom: 12px; }

.testo-scena {
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  background: var(--bg);
  padding: 12px;
  border-radius: var(--raggio);
  max-height: 320px;
  overflow-y: auto;
  color: var(--testo-2);
  margin-top: 12px;
}

/* ---------- interruttore della spesa ---------- */

.riga-tetto { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.riga-tetto label { font-size: 17px; color: var(--testo-3); }
.riga-tetto input { width: 110px; font-size: 15px; font-variant-numeric: tabular-nums; }
.riga-tetto .nota { font-size: 12px; color: var(--testo-3); }


/* Spegne i soldi: deve leggersi per quello che è, non sembrare un pulsante
   qualsiasi accanto agli altri. */
.btn.interruttore {
  font-weight: 600;
  padding: 9px 16px;
  border-width: 1px;
}
.btn.interruttore.spento {
  border-color: var(--rosso);
  color: var(--rosso);
  background: rgba(208, 91, 87, 0.08);
}
.btn.interruttore.spento:hover:not(:disabled) { background: rgba(208, 91, 87, 0.16); }
.btn.interruttore.acceso {
  border-color: var(--verde);
  color: #0e1013;
  background: var(--verde);
}
.btn.interruttore.acceso:hover:not(:disabled) { background: #6fbf88; }

/* ---------- segnalazioni e prove ---------- */

.pannello.segnalazioni { border-color: var(--oro-scuro); }
.segnalazione { padding: 10px 0; border-bottom: 1px solid var(--bg-3); }
.segnalazione:last-of-type { border-bottom: 0; }
.segnalazione .capo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.segnalazione .n {
  font-family: var(--mono);
  color: var(--oro);
  background: var(--bg-4);
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.segnalazione .slug { font-family: var(--mono); font-size: 12px; color: var(--testo-2); flex: 1; min-width: 160px; }
/* La prova è una citazione dal copione: va letta come tale. */
.segnalazione blockquote {
  margin: 4px 0 0;
  padding: 6px 0 6px 13px;
  border-left: 2px solid var(--linea);
  color: var(--testo);
  font-size: 13px;
  font-style: italic;
}

.evidenziati { display: flex; flex-wrap: wrap; gap: 6px; }
.evidenziati .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 12px;
  font-family: var(--mono);
}
.evidenziati .chip i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--testo-3);
  background: var(--bg);
  border-radius: 3px;
  padding: 0 5px;
}

/* ---------- anteprima di ciò che l'AI aggiunge ---------- */

.anteprima-ai {
  border: 1px dashed var(--oro-scuro);
  border-radius: var(--raggio);
  background: rgba(245, 124, 31, 0.04);
  padding: 14px 16px;
}
.anteprima-ai .capo { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.anteprima-ai .capo .lucchetto { font-size: 14px; }
.anteprima-ai .prova { font-size: 12.5px; color: var(--testo-2); margin: 0 0 11px; }
.anteprima-ai .riga-prova { display: flex; gap: 9px; align-items: baseline; margin-bottom: 5px; }
.anteprima-ai .riga-prova .tag { flex: 0 0 auto; }
.anteprima-ai .riga-prova blockquote {
  margin: 0;
  font-style: italic;
  color: var(--testo);
  font-size: 12.5px;
  border-left: 2px solid var(--linea);
  padding-left: 10px;
}
.anteprima-ai .slot-griglia { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }
.anteprima-ai .slot {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px dashed var(--linea);
  color: var(--testo-3);
  background: var(--bg-3);
}
/* Il reparto che l'analisi riempirà quasi certamente si distingue dagli altri. */
.anteprima-ai .slot.probabile {
  border-style: solid;
  border-color: var(--oro-scuro);
  color: var(--oro);
  background: rgba(245, 124, 31, 0.09);
}
.anteprima-ai .azioni { display: flex; gap: 7px; flex-wrap: wrap; }

.banner-ai {
  border: 1px dashed var(--oro-scuro);
  background: rgba(245, 124, 31, 0.05);
  border-radius: var(--raggio);
  padding: 13px 16px;
  margin-bottom: 18px;
  font-size: 13px;
}
.banner-ai strong { color: var(--oro); }
.banner-ai ul { margin: 8px 0 10px; padding-left: 19px; color: var(--testo-2); }
.banner-ai li { margin-bottom: 3px; }

.resa-crediti { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.resa-crediti > div { background: var(--bg-3); border-radius: var(--raggio); padding: 12px 14px; }
.resa-crediti strong { display: block; font-size: 21px; color: var(--oro); font-variant-numeric: tabular-nums; }
.resa-crediti span { display: block; font-size: 12px; color: var(--testo-2); }
.resa-crediti .nota { font-size: 11px; color: var(--testo-3); margin-top: 3px; }

/* ---------- listino ---------- */

.listino { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 14px; align-items: start; }
.piano {
  background: var(--bg-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 20px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.piano.consigliato { border-color: var(--oro); box-shadow: 0 0 0 1px rgba(245, 124, 31, 0.25); }
.piano.corrente { border-color: var(--verde); }
.piano .nastro {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--oro);
  color: #16181c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.piano h3 { margin: 0 0 6px; font-size: 15px; }
.piano .prezzo { font-size: 32px; font-weight: 600; line-height: 1.1; }
.piano .prezzo span { font-size: 13px; color: var(--testo-3); font-weight: 400; }
.piano .iva { font-size: 11.5px; color: var(--testo-3); margin-top: 3px; }
.nota-iva { font-size: 12.5px; color: var(--testo-3); max-width: 700px; margin: 18px auto 0; text-align: center; line-height: 1.55; }
.piano .sommario { color: var(--testo-2); font-size: 12.5px; margin: 8px 0 14px; min-height: 34px; }
.piano ul.incluso { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; }
.piano ul.incluso li { font-size: 12.5px; padding: 4px 0 4px 19px; position: relative; color: var(--testo); }
.piano ul.incluso li::before { content: '✓'; position: absolute; left: 0; color: var(--verde); }
.piano ul.incluso li.escluso { color: var(--testo-3); }
.piano ul.incluso li.escluso::before { content: '✕'; color: var(--testo-3); }
.piano ul.incluso li.in-arrivo { color: var(--testo-3); font-style: italic; }
.piano ul.incluso li.in-arrivo::before { content: '◷'; color: var(--oro-scuro); }

.paywall {
  text-align: center;
  padding: 54px 26px;
  background: var(--bg-2);
  border: 1px dashed var(--linea);
  border-radius: 12px;
}
.paywall .lucchetto { font-size: 34px; margin-bottom: 10px; }
.paywall h3 { margin: 0 0 6px; font-size: 17px; }
.paywall p { color: var(--testo-2); margin: 0 0 18px; font-size: 13px; }

.campo-form { display: block; margin-bottom: 12px; }
.campo-form span { display: block; font-size: 12px; color: var(--testo-2); margin-bottom: 4px; }
.campo-form input { width: 100%; }
.aiuto { font-size: 11.5px; color: var(--testo-3); }

/* ---------- archivio e stesure ---------- */

.pannello.progetto.corrente { border-color: var(--oro-scuro); }
.pannello.progetto .corpo .btn { margin-right: 5px; margin-bottom: 4px; }
.confronto-scelta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; }
.menu-export {
  display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 5px 9px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--bg-3);
}
/* Gli export stanno sulla seconda riga della barra, sotto al bottone arancione
   dell'analisi: senza un contorno sembravano una didascalia, e più d'uno ha
   creduto che comparissero solo dopo aver speso crediti. Non è così — si
   esporta anche senza AI — e ora si vede. */
.menu-export .btn { padding: 5px 11px; font-size: 12.5px; }

/* ---------- confronto ---------- */

.impatto { padding: 8px 11px; border-radius: var(--raggio); margin-bottom: 7px; font-size: 13px; border-left: 3px solid var(--linea); background: var(--bg-3); }
.impatto.alto { border-left-color: var(--rosso); }
.impatto.basso { border-left-color: var(--verde); }

.scena-cambiata { background: var(--bg-3); border-radius: var(--raggio); padding: 10px 12px; margin-bottom: 9px; }
.scena-cambiata .capo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.scena-cambiata .capo .n { font-family: var(--mono); color: var(--oro); background: var(--bg-4); padding: 1px 7px; border-radius: 4px; font-size: 12px; }
.scena-cambiata .capo .slug { font-family: var(--mono); font-size: 12px; flex: 1; min-width: 180px; }
.cambio { font-size: 12.5px; padding: 3px 0 3px 10px; border-left: 2px solid var(--linea); color: var(--testo-2); }
.cambio.alto { border-left-color: var(--rosso); }
.cambio.medio { border-left-color: var(--giorno); }
.cambio .campo { color: var(--testo-3); display: inline-block; min-width: 152px; }

/* ---------- editing dello spoglio ---------- */

.reparto-box h4 { display: flex; align-items: center; gap: 6px; }
.reparto-box .strumenti { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.reparto-box .strumenti .tag { cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 10px; padding: 1px 6px; }
.reparto-box .modifica { background: none; border: 0; color: var(--testo-3); cursor: pointer; font-size: 12px; padding: 0 3px; }
.reparto-box .modifica:hover { color: var(--oro); }
.reparto-box.in-modifica { outline: 1px solid var(--oro-scuro); }
.reparto-box .nota { color: var(--testo-3); font-size: 11.5px; }
textarea.edit-reparto {
  width: 100%;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  resize: vertical;
  line-height: 1.5;
}
.reparto-box .aiuto { font-size: 11px; color: var(--testo-3); margin: 5px 0 7px; }
.azioni-edit { display: flex; gap: 6px; }

/* ---------- nota di produzione ---------- */

.nota-blocco { margin-bottom: 18px; }
.nota-blocco h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--oro); }
.rischio { background: var(--bg-3); border-radius: var(--raggio); padding: 11px 13px; margin-bottom: 9px; border-left: 3px solid var(--linea); }
.rischio.alto { border-left-color: var(--rosso); }
.rischio.medio { border-left-color: var(--giorno); }
.rischio.basso { border-left-color: var(--verde); }
.rischio .t { font-weight: 600; margin-bottom: 3px; }
.rischio .m { color: var(--testo-2); font-size: 12.5px; margin-top: 5px; }

/* ---------- modale ---------- */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modale {
  background: var(--bg-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 24px;
  max-width: 430px;
  width: 100%;
}
.modale h3 { margin: 0 0 8px; font-size: 16px; }
.modale p { color: var(--testo-2); font-size: 13px; margin: 0 0 16px; }
.modale input { width: 100%; margin-bottom: 14px; }

/* ---------- stampa ---------- */

@media print {
  .laterale, .testata .spinta, .btn, .strip input { display: none !important; }
  .app { display: block; }
  .testata { position: static; border: 0; background: #fff; }
  html, body { background: #fff; color: #000; }
  .pannello, .stat, .scheda-scena, .strip { background: #fff; border-color: #ccc; break-inside: avoid; }
  .pannello > h3, table.dati th, .reparto-box { background: #f2f2f2; color: #000; }
  table.dati td, .stat .val, .stat .eti, .strip .titolo { color: #000; }
  .tag { background: #fff; border-color: #999; color: #333; }
  .tag.notte { background: #e8edf6; }
  .tag.magic { background: #f6eaf0; }
  .tag.giorno { background: #fbf3df; }
  .matrice td.cella.p2 { background: #f57c1f; color: #000; }
  .matrice td.cella.p1 { background: #f2e3c2; }
  .matrice td.nome, .matrice th.nome, .matrice th.ruota { background: #f2f2f2; color: #000; }
  .scheda-scena .corpo { display: block !important; }
  .testo-scena { display: none; }
  .matrice { max-height: none; }
}

@media (max-width: 860px) {
  .laterale { position: static; width: 100%; flex: none; height: auto; }
  .app { flex-direction: column; }
  .strip { grid-template-columns: 40px 1fr 70px; }
  .strip > :nth-child(4), .strip > :nth-child(5) { display: none; }
}

/* ---------- sceneggiatura marcata ---------- */
/* Colore per reparto. Sono gli stessi in tutta la vista: pallino nell'elenco,
   evidenziazione nel testo, chip nella legenda. */
:root {
  --c-cast: #d8a319;
  --c-props: #8b6cf0;
  --c-scenografia: #2ba3a3;
  --c-costumi: #e2569c;
  --c-trucco_parrucco: #c04ad0;
  --c-comparse: #4f9d4f;
  --c-veicoli: #e2761b;
  --c-animali: #a3703c;
  --c-armi: #cf3b3b;
  --c-effetti_speciali: #e0553b;
  --c-effetti_visivi: #3b7fe0;
  --c-stunt: #d06a10;
  --c-musica_suono: #7a5ad0;
  --c-attrezzatura: #5b7285;
  --c-note_produzione: #8a929e;
}

.mc-legenda { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip-cat {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid currentColor; opacity: .85;
}
.chip-cat.ev-cast { color: var(--c-cast); }
.chip-cat.ev-props { color: var(--c-props); }
.chip-cat.ev-scenografia { color: var(--c-scenografia); }
.chip-cat.ev-costumi { color: var(--c-costumi); }
.chip-cat.ev-trucco_parrucco { color: var(--c-trucco_parrucco); }
.chip-cat.ev-comparse { color: var(--c-comparse); }
.chip-cat.ev-veicoli { color: var(--c-veicoli); }
.chip-cat.ev-animali { color: var(--c-animali); }
.chip-cat.ev-armi { color: var(--c-armi); }
.chip-cat.ev-effetti_speciali { color: var(--c-effetti_speciali); }
.chip-cat.ev-effetti_visivi { color: var(--c-effetti_visivi); }
.chip-cat.ev-stunt { color: var(--c-stunt); }
.chip-cat.ev-musica_suono { color: var(--c-musica_suono); }
.chip-cat.ev-attrezzatura { color: var(--c-attrezzatura); }

.marcatura {
  display: grid;
  grid-template-columns: minmax(280px, 350px) 1fr;
  gap: 14px;
  /* Sopra ci sono testata, barra azioni, legenda dei reparti e livelli delle
     note: se non se ne tiene conto, la pagina scorre e le due barre finiscono
     fuori schermo proprio mentre servono. */
  height: calc(100vh - 300px);
  min-height: 380px;
}
@media (max-width: 900px) { .marcatura { grid-template-columns: 1fr; height: auto; } }

.mc-albero, .mc-script { overflow: auto; border: 1px solid var(--linea); border-radius: var(--raggio); }
.mc-albero { background: var(--bg-2); }

.mc-scena {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--linea);
  padding: 8px 10px; text-align: left; cursor: pointer; color: var(--testo-2);
}
.mc-scena:hover { background: var(--bg-3); color: var(--testo); }
.mc-scena.aperta { background: var(--bg-4); color: var(--testo); font-weight: 600; }
.mc-num { font-variant-numeric: tabular-nums; color: var(--testo-3); min-width: 26px; }
.mc-slug { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mc-conta { font-size: 11px; color: var(--testo-3); font-variant-numeric: tabular-nums; }

.mc-dettaglio { background: var(--bg); border-bottom: 1px solid var(--linea); padding: 6px 0 2px; }
.mc-gruppo { padding: 4px 10px 8px; }
.mc-cat {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-3);
  margin-bottom: 4px;
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--testo-3); }
.punto.ev-cast { background: var(--c-cast); }
.punto.ev-props { background: var(--c-props); }
.punto.ev-scenografia { background: var(--c-scenografia); }
.punto.ev-costumi { background: var(--c-costumi); }
.punto.ev-trucco_parrucco { background: var(--c-trucco_parrucco); }
.punto.ev-comparse { background: var(--c-comparse); }
.punto.ev-veicoli { background: var(--c-veicoli); }
.punto.ev-animali { background: var(--c-animali); }
.punto.ev-armi { background: var(--c-armi); }
.punto.ev-effetti_speciali { background: var(--c-effetti_speciali); }
.punto.ev-effetti_visivi { background: var(--c-effetti_visivi); }
.punto.ev-stunt { background: var(--c-stunt); }
.punto.ev-musica_suono { background: var(--c-musica_suono); }
.punto.ev-attrezzatura { background: var(--c-attrezzatura); }
.punto.ev-note_produzione { background: var(--c-note_produzione); }

.mc-voce {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-3); border: 1px solid transparent; border-radius: 6px;
  padding: 4px 8px; margin-bottom: 3px; font-size: 12.5px; color: var(--testo);
}
.mc-voce:hover { border-color: var(--linea); }
.mc-voce.accesa { border-color: var(--oro); background: var(--bg-4); }
/* Voce che nel testo non si ritrova: non è un errore, ma va detto. */
.mc-voce.assente { color: var(--testo-3); border-style: dashed; border-color: var(--linea); background: none; }
.mc-voce.assente::after { content: ' ·not in text'; font-size: 10px; color: var(--testo-3); }
.mc-copertura { font-size: 11px; color: var(--testo-3); padding: 2px 12px 8px; }

/* La pagina: bianca e in monospazio come una sceneggiatura vera, anche col tema
   scuro. È la parte che l'utente confronta con il PDF che ha sulla scrivania. */
.mc-script { background: #f3f1ec; color: #14171c; padding: 18px 22px 60px; }
.mc-sc { border-top: 1px dashed #cfcabd; padding: 14px 0 6px; scroll-margin-top: 8px; }
.mc-sc:first-child { border-top: 0; }
.mc-sc.attiva { background: #fffdf6; box-shadow: 0 0 0 10px #fffdf6; border-radius: 2px; }
.mc-slugline {
  font-family: var(--mono); font-size: 13px; font-weight: 700; text-transform: uppercase;
  margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; color: #14171c;
}
.mc-n { color: #8a8271; min-width: 24px; }
.mc-ott { margin-left: auto; color: #8a8271; font-weight: 400; }
.mc-script p { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; margin: 0; white-space: pre-wrap; }
.mc-script .r-azione { margin-bottom: 4px; }
.mc-script .r-cue { margin: 8px 0 0 22%; font-weight: 700; }
.mc-script .r-dialogo { margin: 0 18% 0 12%; }

/* L'evidenziazione tinge lo sfondo e sottolinea: il testo resta nero e
   leggibile, ed è il colore a dire di che reparto si tratta. */
.ev {
  --c: var(--c-note_produzione);
  background: color-mix(in srgb, var(--c) 26%, transparent);
  box-shadow: inset 0 -2px 0 var(--c);
  border-radius: 2px; padding: 0 1px; color: inherit; cursor: pointer;
}
.ev:hover { background: color-mix(in srgb, var(--c) 45%, transparent); }
.ev.accesa { background: color-mix(in srgb, var(--c) 60%, transparent); outline: 2px solid #14171c; outline-offset: 1px; }
.ev-cast { --c: var(--c-cast); }
.ev-props { --c: var(--c-props); }
.ev-scenografia { --c: var(--c-scenografia); }
.ev-costumi { --c: var(--c-costumi); }
.ev-trucco_parrucco { --c: var(--c-trucco_parrucco); }
.ev-comparse { --c: var(--c-comparse); }
.ev-veicoli { --c: var(--c-veicoli); }
.ev-animali { --c: var(--c-animali); }
.ev-armi { --c: var(--c-armi); }
.ev-effetti_speciali { --c: var(--c-effetti_speciali); }
.ev-effetti_visivi { --c: var(--c-effetti_visivi); }
.ev-stunt { --c: var(--c-stunt); }
.ev-musica_suono { --c: var(--c-musica_suono); }
.ev-attrezzatura { --c: var(--c-attrezzatura); }
.ev-note_produzione { --c: var(--c-note_produzione); }

/* ---------- stripboard: trascinamento e numeri di cast ---------- */

.strip { cursor: grab; }
.strip:active { cursor: grabbing; }
.strip input[type="number"] { cursor: auto; }
.strip .cast-id {
  font-family: var(--mono); font-size: 11.5px; color: var(--testo-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La striscia in volo resta visibile ma smorzata: si deve capire da dove viene. */
.strip.in-volo { opacity: .4; }
/* La linea d'inserimento dice esattamente dove finirà, sopra o sotto. */
.strip.sopra { box-shadow: inset 0 3px 0 var(--oro); }
.strip.sopra-sotto { box-shadow: inset 0 -3px 0 var(--oro); }
.gruppo-giorno.sopra { box-shadow: inset 0 0 0 2px var(--oro); }
.id-cast {
  display: inline-block; min-width: 20px; margin-right: 7px;
  font-family: var(--mono); font-size: 11px; color: var(--oro);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ---------- annotazioni sul copione ---------- */

.mc-livelli { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.mc-livelli .eti { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-3); margin-right: 2px; }
.mc-livelli .nota { font-size: 11.5px; color: var(--testo-3); margin-left: 6px; }
.chip-liv {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--liv) 22%, transparent);
  border: 1px solid var(--liv); color: var(--testo);
}
.chip-liv b { font-variant-numeric: tabular-nums; }
/* Livello spento: resta leggibile, ma non colora più il copione. */
.chip-liv.spento { background: none; border-color: var(--linea); color: var(--testo-3); text-decoration: line-through; }

.mc-note-conta { font-size: 11px; color: var(--oro); }

.mc-nota {
  display: flex; align-items: flex-start; gap: 4px;
  border-left: 3px solid var(--liv); background: var(--bg-3);
  border-radius: 0 6px 6px 0; margin-bottom: 4px;
}
.mc-nota.accesa { background: var(--bg-4); outline: 1px solid var(--oro); }
.mc-nota.orfana { opacity: .65; }
.mc-nota-vai { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; color: var(--testo); padding: 5px 8px; }
.mc-nota-vai .liv { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--liv); }
.mc-nota-vai .cit { display: block; font-family: var(--mono); font-size: 11px; color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-nota-vai .txt { display: block; font-size: 12.5px; margin-top: 2px; }
.mc-nota-x { background: none; border: 0; color: var(--testo-3); cursor: pointer; padding: 5px 7px; }
.mc-nota-x:hover { color: var(--rosso); }

/* Nel copione l'annotazione è una sottolineatura ondulata: si sovrappone alle
   evidenziazioni di reparto senza coprirle. */
.nota-testo {
  --liv: #f57c1f;
  text-decoration: underline wavy var(--liv);
  text-underline-offset: 3px;
  cursor: pointer;
}
.nota-testo.accesa { background: color-mix(in srgb, var(--liv) 35%, transparent); border-radius: 2px; }
.nota-testo.liv-generale { --liv: #f57c1f; }
.nota-testo.liv-regia { --liv: #e2569c; }
.nota-testo.liv-fotografia { --liv: #3b7fe0; }
.nota-testo.liv-produzione { --liv: #4f9d4f; }
.nota-testo.liv-scenografia { --liv: #2ba3a3; }
.nota-testo.liv-costumi { --liv: #c04ad0; }
.nota-testo.liv-effetti { --liv: #cf3b3b; }
.nota-testo.liv-legale { --liv: #a3703c; }

#popup-nota {
  position: fixed; z-index: 60; width: 300px;
  background: var(--bg-3); border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 9px;
}
#popup-nota .riga { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
#popup-nota select { flex: 1; }
#popup-nota .cit { font-family: var(--mono); font-size: 11px; color: var(--testo-3); margin-bottom: 6px; }
#popup-nota textarea { width: 100%; margin-bottom: 6px; }

/* ---------- preventivo ---------- */

table.dati.preventivo td { vertical-align: middle; }
table.dati.preventivo .origine { font-size: 11px; color: var(--testo-3); margin-top: 1px; }
table.dati.preventivo input[type="number"] { width: 88px; padding: 3px 6px; text-align: right; }
table.dati.preventivo td.unita { font-size: 11.5px; color: var(--testo-3); }
table.dati.preventivo td.tot { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Riga corretta a mano: si deve vedere che quel numero l'ha deciso una persona. */
table.dati.preventivo tr.modificata td.tot { color: var(--oro); }
table.dati.preventivo tr.modificata td:nth-child(2)::after { content: ' ✎'; color: var(--oro); font-size: 11px; }
table.dati.preventivo tr.esclusa { opacity: .4; }
table.dati.preventivo tr.totale td { border-top: 2px solid var(--linea); font-size: 15px; }

/* ---------- listino: cadenza, sconto, calcolatrice ---------- */

.interruttore-cadenza {
  display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; gap: 3px;
  background: var(--bg-2);
}
.interruttore-cadenza button {
  border: 0; background: none; color: var(--testo-2); cursor: pointer;
  padding: 5px 16px; border-radius: 999px; font-size: 13px;
}
.interruttore-cadenza button.attivo { background: var(--oro); color: #17130d; font-weight: 600; }
.interruttore-cadenza b { color: var(--verde); font-weight: 700; }
.interruttore-cadenza button.attivo b { color: #17130d; }

.piano .sconto {
  position: absolute; top: 10px; right: 10px;
  background: var(--verde); color: #0d1a11; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.piano .prezzo s { color: var(--testo-3); font-size: 0.55em; font-weight: 400; margin-right: 8px; }
.piano .prezzo em { font-style: normal; font-size: 0.42em; color: var(--testo-3); font-weight: 400; }

.calcolatrice .corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 780px) { .calcolatrice .corpo { grid-template-columns: 1fr; } }
.cursori { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.cursore span { display: flex; justify-content: space-between; font-size: 13px; color: var(--testo-2); margin-bottom: 6px; }
.cursore b { color: var(--oro); font-variant-numeric: tabular-nums; }
.cursore input[type="range"] { width: 100%; accent-color: var(--oro); }
.calcolatrice .conto .origine { font-size: 11.5px; color: var(--testo-3); }
.calcolatrice .conto tr.totale td { border-top: 2px solid var(--linea); font-size: 16px; }
.calcolatrice .conto .btn { margin-top: 10px; }

/* ---------- correzione della scena ---------- */

.correggi {
  margin-top: 12px; padding: 12px 14px;
  background: var(--bg-3); border: 1px solid var(--oro-scuro); border-radius: var(--raggio);
}
.correggi h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--oro); }
.griglia-correggi { display: grid; grid-template-columns: 1fr 90px 130px 110px; gap: 10px; margin-bottom: 10px; }
@media (max-width: 820px) { .griglia-correggi { grid-template-columns: 1fr 1fr; } }
.griglia-correggi label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--testo-3); }
.griglia-correggi input, .griglia-correggi select { width: 100%; }
.azioni-correggi { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.azioni-correggi .separa { width: 1px; height: 20px; background: var(--linea); margin: 0 3px; }
.azioni-correggi select { max-width: 260px; font-size: 12px; }
.correggi .nota { font-size: 11.5px; color: var(--testo-3); margin: 9px 0 0; }

.menu-export .eti-export {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--oro); font-weight: 600; align-self: center; margin: 0 3px 0 2px;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- centro export ---------- */

.scelta-formato { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.carta-formato {
  text-align: left; cursor: pointer; padding: 11px 13px; border-radius: var(--raggio);
  border: 1px solid var(--linea); background: var(--bg-3); color: var(--testo);
}
.carta-formato:hover { border-color: var(--testo-3); }
.carta-formato.attiva { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 12%, var(--bg-3)); }
.carta-formato strong { display: block; font-size: 14px; margin-bottom: 3px; }
.carta-formato span { font-size: 11.5px; color: var(--testo-3); line-height: 1.4; }

.riga-comandi { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.riga-comandi .nota { margin-left: auto; font-size: 12px; color: var(--testo-3); }

.elenco-export { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 5px; }
.riga-export {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--linea);
  background: var(--bg-3); color: var(--testo); text-align: left; font-size: 13px;
}
.riga-export:hover:not(.vuota) { border-color: var(--testo-3); }
.riga-export.scelta { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 10%, var(--bg-3)); }
.riga-export.vuota { opacity: .45; cursor: default; background: none; }
.riga-export .segno { width: 14px; color: var(--oro); font-weight: 700; }
.riga-export .icona { width: 18px; text-align: center; }
.riga-export .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-export .conta { font-size: 11.5px; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.riga-export .motivo { font-size: 11px; color: var(--testo-3); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.griglia-doc { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.carta-doc { border: 1px solid var(--linea); border-radius: var(--raggio); padding: 13px 15px; background: var(--bg-3); }
.carta-doc h4 { margin: 0 0 6px; font-size: 13.5px; }
.carta-doc p { margin: 0 0 10px; font-size: 12px; color: var(--testo-2); line-height: 1.45; }
.carta-doc.spenta { opacity: .55; }

/* Con il formato Final Draft la scelta dei report non c'entra: resta visibile
   ma spenta, così non sembra che il pulsante ignori quello che hai spuntato. */
.elenco-export.inattiva { opacity: .4; pointer-events: none; }

/* ---------- filtri e doppioni della vista Elements ---------- */

.filtri-elementi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.filtri-elementi input[type="search"] { margin-left: auto; min-width: 190px; }

/* Senza questa regola le chip erano bottoni di sistema: fondo bianco e testo
   chiaro ereditato, cioè bianco su bianco. */
.chip-filtro {
  font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--linea); color: var(--testo-2);
}
.chip-filtro:hover { border-color: var(--testo-3); color: var(--testo); }
.chip-filtro.attivo { background: var(--oro); border-color: var(--oro); color: #17130d; font-weight: 600; }
.chip-filtro b { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 3px; }
.chip-filtro.attivo b { opacity: .85; }

.doppione {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--raggio);
  background: var(--bg-3); margin-bottom: 6px; font-size: 13px;
}
.doppione .mid {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--testo-3); padding: 0 6px;
}
.doppione .nota { color: var(--testo-3); font-size: 11.5px; }
.doppione .btn { margin-left: auto; }
.doppione .btn + .btn { margin-left: 0; }