/*
 * app.css — Strato sottile sopra Tailwind.
 *
 * Qui stanno le classi ripetute decine di volte (input, bottoni, celle, badge)
 * e tutto l'editor (`.ed-*`): tenerle come utility inline renderebbe il
 * markup illeggibile senza dare nulla in cambio, e il build Tailwind è PURGATO
 * — una classe costruita a runtime o non presente nei sorgenti non finisce
 * nel CSS, senza nessun errore. Palette identica all'Hub: slate + arancio,
 * solo tema chiaro.
 *
 * L'ACCENTO non e' cablato: si legge da `--brand-50…800`, e i valori qui sotto
 * sono esattamente l'arancio di sempre. Un clone che dichiara `BRAND_ACCENT`
 * riceve dal server un `<style>` che li riscrive (app/core.py::stile_brand),
 * e l'interfaccia lo segue — pagina di firma e di verifica comprese, che sono
 * quelle che vede il cliente DEL cliente. Senza, non cambia niente.
 *
 * 🔴 Questo NON e' il colore del DOCUMENTO: il PDF si tinge con
 * `emittente.colore_accento` (per-emittente, dal database). Due colori, due
 * padroni: qui la cornice del prodotto, li' il materiale del cliente.
 */
:root{
  --brand-50:255 247 237;
  --brand-100:255 237 213;
  --brand-200:254 215 170;
  --brand-300:253 186 116;
  --brand-400:251 146 60;
  --brand-500:249 115 22;
  --brand-600:234 88 12;
  --brand-700:194 65 12;
  --brand-800:154 52 18;
}

/* Il punto di montaggio del guscio (M6) non conta per il layout: `.min-h-screen` resta figlio del body. */
[data-vue="guscio"] { display: contents; }

/*
 * Shell: marchio + testata in alto, MENU ORIZZONTALE sotto, contenuto sotto.
 * Stesso schema di Social Studio (che ha spostato il menu dalla colonna di
 * sinistra a una barra in alto, come gli altri tool dell'Hub).
 * grid-template-areas non si esprime con le utility Tailwind → vive qui.
 */
.shell {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 4rem auto auto 1fr;
  grid-template-areas: "brand top" "lettura lettura" "nav nav" "main main";
  height: 100vh;
}
.shell > .brandcell { grid-area: brand; }
.shell > .topbar    { grid-area: top; }
.shell > .navbar {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.75rem;
  overflow-x: auto;          /* su schermi stretti la barra scorre, non va a capo */
  overflow-y: hidden;
}
/* min-width:0 = la colonna 1fr non si gonfia al contenuto (le tabelle larghe
   scrollano dentro <main>, non allargano la pagina). Vale anche per le due
   celle di testata: con un titolo lungo allargavano la PAGINA di un paio di
   pixel — il titolo ha già `truncate`, gli mancava solo il permesso di
   stringersi. */
.shell > .main { grid-area: main; min-width: 0; }
.shell > .brandcell,
.shell > .topbar { min-width: 0; }
/* L'avviso di sola visualizzazione ha una riga SUA fra testata e barra
   (`auto`: collassa a zero quando `x-show` lo nasconde). Senza un'area
   dichiarata finirebbe in una riga implicita, cioe' SOTTO il contenuto. */
.shell > .avviso-lettura { grid-area: lettura; }

/* Nell'editor il contenuto NON scorre: scorrono la tela e i due pannelli,
   ognuno per conto suo. Senza questa regola il foglio spingeva la pagina. */
.shell > .main.main-editor { overflow: hidden; padding: 0; display: flex; flex-direction: column; }

/* le voci nella barra orizzontale stanno sulla loro larghezza, non al 100% */
.navbar .nav-item { width: auto; white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 860px) {
  html, body { height: auto; }
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "brand" "top" "lettura" "nav" "main";
    height: auto;
  }
  .shell > .brandcell { height: 3.25rem; }
  .shell > .topbar    { height: 3.25rem; }
  .shell > .main      { overflow: visible; }
  /* L'editor ha bisogno di un'altezza sua: senza, la tela non scorre. */
  .shell > .main.main-editor { height: calc(100dvh - 7rem); min-height: 60vh; overflow: hidden; }
  .dentro-hub .shell > .main.main-editor { height: calc(100dvh - 3.5rem); }
}

.inp {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  background: #fff;
  color: #1e293b;
}
.inp:focus {
  outline: none;
  border-color: rgb(var(--brand-600));
  box-shadow: 0 0 0 3px rgb(var(--brand-600) / .12);
}
.inp:disabled { background: #f8fafc; color: #64748b; }

/* Campo "nudo" dentro le righe di prezzo: si comporta come una cella */
.inp-flat {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.875rem;
  background: transparent;
}
.inp-flat:hover:not(:disabled) { border-color: #e2e8f0; }
.inp-flat:focus { outline: none; border-color: rgb(var(--brand-600)); background: #fff; }
.inp-flat:disabled { color: #475569; }
.inp-flat.num { width: 100%; text-align: right; }

.lbl {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.25rem;
}
.lbl > .inp, .lbl > .ed-colore { margin-top: 0.2rem; }
.lbl + .lbl { margin-top: 0.55rem; }

.btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #1e293b;
  border-radius: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.btn:hover { background: #f8fafc; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.btn-on { border-color: rgb(var(--brand-600)); background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }

.btn-primary {
  background: rgb(var(--brand-600));
  color: #fff;
  border: 1px solid rgb(var(--brand-600));
  border-radius: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.btn-primary:hover { background: rgb(var(--brand-700)); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-mini {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #1e293b;
  border-radius: 0.375rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
.btn-mini:hover { background: #f8fafc; }
.btn-mini:disabled { opacity: .45; cursor: not-allowed; }
.btn-mini.btn-on { border-color: rgb(var(--brand-600)); background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); font-weight: 600; }

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  font-size: 0.875rem;
}
.card-title { font-weight: 600; font-size: 0.875rem; }

.th { padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; }
.td { padding: 0.5rem 0.75rem; vertical-align: top; }

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #475569;
  text-align: left;
}
.nav-item:hover { background: #f1f5f9; }
.nav-item-on { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-grigio { background: #f1f5f9; color: #475569; }
.badge-blu    { background: #eff6ff; color: #1d4ed8; }
.badge-ok     { background: #ecfdf5; color: #047857; }
.badge-ko     { background: #fef2f2; color: #b91c1c; }
.badge-off    { background: #f8fafc; color: #94a3b8; }

.opt {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.7rem;
  text-align: left;
  background: #fff;
}
.opt:hover { background: #f8fafc; }
.opt-on { border-color: rgb(var(--brand-600)); background: rgb(var(--brand-50)); }

/* Dropzone di caricamento immagine (drag&drop o click): stessa palette di
   .opt/.inp, bordo tratteggiato per segnalare "qui si rilascia qualcosa". */
.dropzone-img {
  border: 1.5px dashed #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.6rem;
  text-align: center;
  cursor: pointer;
  background: #f8fafc;
}
.dropzone-img:hover { border-color: rgb(var(--brand-300)); background: rgb(var(--brand-50)); }
.dropzone-img .dropzone-anteprima {
  max-width: 100%; max-height: 7rem; border-radius: 0.375rem; object-fit: contain;
  display: block; margin: 0 auto;
}

.anteprima-frame {
  width: 100%;
  height: 60vh;
  min-height: 22rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  display: block;
}

/* Chip di stato (i contatori in cima a Documenti, le tab di Widget e modelli,
   le categorie) e pill informativa. */
.ed-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  font-size: 0.78rem; font-weight: 500; white-space: nowrap;
}
.ed-chip:hover { background: #f8fafc; }
.ed-chip b { font-weight: 700; color: #0f172a; }
.ed-chip.on { border-color: rgb(var(--brand-600)); background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.ed-chip.on b { color: rgb(var(--brand-800)); }
.ed-chip .ed-x { margin-left: 0.1rem; }
.ed-pill {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.28rem 0.75rem; border-radius: 999px;
  background: #ecfdf5; color: #047857; font-size: 0.78rem; white-space: nowrap;
}
.ed-pill b { font-weight: 700; }

/* Una lista come tabella sul desktop e come card sul telefono. Niente
   `!important`: `x-show` deve poter nascondere entrambe. */
.solo-mobile { display: none; }

/* ══ L'EDITOR ═════════════════════════════════════════════════════════════
   Un documento aperto: barra in alto, palette a sinistra, il foglio al
   centro, il pannello a destra. Tutto in tema chiaro, palette dell'Hub. */
.ed-vista { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ed-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.ed-barra {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.45rem 0.75rem; background: #fff; border-bottom: 1px solid #e2e8f0;
  flex: 0 0 auto;
}
.ed-indietro { margin-right: 0.25rem; }
.ed-titolo {
  flex: 1 1 12rem; min-width: 8rem;
  border: 1px solid transparent; border-radius: 0.375rem; padding: 0.3rem 0.5rem;
  font-weight: 600; font-size: 0.95rem; background: transparent; color: #0f172a;
}
.ed-titolo:hover:not(:disabled) { border-color: #e2e8f0; }
.ed-titolo:focus { outline: none; border-color: rgb(var(--brand-600)); background: #fff; }
.ed-titolo:disabled { color: #0f172a; }
.ed-sporco { color: rgb(var(--brand-600)); font-size: 0.9rem; }
.ed-barra-dx { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.ed-barra-dx + .ed-barra-dx { margin-left: 0; }

.ed-menu { position: relative; }
.ed-menu-lista {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 13rem;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12); padding: 0.3rem;
}
.ed-menu-lista > button {
  display: block; width: 100%; text-align: left; padding: 0.45rem 0.7rem;
  border-radius: 0.375rem; font-size: 0.85rem; color: #1e293b;
}
.ed-menu-lista > button:hover { background: #f8fafc; }
.ed-menu-lista > button.pericolo { color: #b91c1c; }

.ed-corpo { display: flex; flex: 1 1 auto; min-height: 0; }
/* I punti di montaggio delle isole Vue (docs/vue-documenti.md, M5) non contano per il layout: la tela e le colonne restano figli diretti del flex. */
.ed-corpo > [data-vue], .ed-shell > [data-vue] { display: contents; }

/* I due pannelli laterali */
.ed-lato {
  display: flex; flex-direction: column; background: #fff; flex: 0 0 auto;
  min-height: 0;
}
.ed-lato-sx { width: 15.5rem; border-right: 1px solid #e2e8f0; }
.ed-lato-dx { width: 22rem; border-left: 1px solid #e2e8f0; }
.ed-lato-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.85rem; border-bottom: 1px solid #e2e8f0;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #334155;
  flex: 0 0 auto;
}
.ed-lato-corpo { flex: 1 1 auto; overflow: auto; padding: 0.6rem 0.85rem 2rem; }

.ed-gruppo { margin-bottom: 0.9rem; }
.ed-gruppo-tit {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #94a3b8; margin: 0.4rem 0 0.35rem;
}
.ed-voci { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.ed-voce {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  padding: 0.45rem 0.25rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff;
  font-size: 0.68rem; color: #334155; text-align: center; line-height: 1.15; cursor: pointer;
}
.ed-voce i { font-style: normal; font-size: 1rem; line-height: 1; color: rgb(var(--brand-600)); }
.ed-voce:hover { border-color: rgb(var(--brand-300)); background: rgb(var(--brand-50)); }
.ed-voce-mio i { color: #ca8a04; }
.ed-voce-mio { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; padding: 0.4rem 0.6rem; gap: 0.5rem; }
.ed-nota { font-size: 0.72rem; color: #64748b; line-height: 1.35; margin: 0.2rem 0; }
/* Una chiave che il CRM non conosce: non blocca, ma non deve nemmeno passare
   inosservata — alla firma quel valore verrebbe scartato in silenzio. */
.ed-nota-avviso { color: #b45309; }

.ed-pagine { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.ed-pagina-tab {
  display: inline-flex; align-items: center; gap: 0.15rem;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; overflow: hidden;
}
.ed-pagina-tab > button { padding: 0.2rem 0.6rem; font-size: 0.75rem; color: #475569; }
.ed-pagina-tab.on { border-color: rgb(var(--brand-600)); background: rgb(var(--brand-50)); }
.ed-pagina-tab.on > button { color: rgb(var(--brand-700)); font-weight: 600; }
.ed-pagina-cmd { display: inline-flex; border-left: 1px solid #fed7aa; }
.ed-pagina-cmd > button { padding: 0.2rem 0.35rem; font-size: 0.7rem; color: #64748b; }
.ed-pagina-cmd > button:hover { color: #0f172a; }
.ed-pagina-cmd > button:disabled { opacity: .35; }

.ed-file { display: inline-block; cursor: pointer; }
.ed-file input[type=file] { display: none; }
.ed-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: #334155; padding: 0.15rem 0; cursor: pointer; }
.ed-check input { accent-color: rgb(var(--brand-600)); }

/* ── La tela e il foglio ────────────────────────────────────────────────── */
.ed-tela {
  flex: 1 1 auto; min-width: 0; overflow: auto; background: #e2e8f0;
  padding: 1.5rem 1.5rem 4rem; position: relative;
}
/* Spazio riservato: L×f mm, con f lo zoom. Il foglio dentro resta 210mm veri e
   si scala con transform, così i mm del documento sono mm anche a schermo. */
.ed-foglio-scala { margin: 0 auto; position: relative; }
.ed-foglio {
  position: relative; width: 210mm; height: 297mm; transform-origin: 0 0;
  background: #fff; box-shadow: 0 6px 26px rgba(15, 23, 42, .18);
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
/* Il ricalco: la scansione sotto, sbiadita — nel PDF non c'è mai. */
.ed-foglio.con-ricalco::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--ed-sfondo) no-repeat center / 100% 100%;
  opacity: var(--ed-ricalco-opacita, .55);
}
/* La griglia: mai più fitta di 5mm a schermo, anche se lo snap è a 1mm. */
.ed-foglio.con-griglia::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .07) 1px, transparent 1px);
  background-size: max(var(--ed-passo, 5mm), 5mm) max(var(--ed-passo, 5mm), 5mm);
}
.ed-foglio-vuoto {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  font-size: 11pt; color: #94a3b8; text-align: center; pointer-events: none; z-index: 0;
}

/* Un widget: posizione e ingombro arrivano da :style (mm). */
.ed-widget {
  position: absolute; box-sizing: border-box; padding: 1.2mm;
  border: 1px dashed transparent; border-radius: 3px; cursor: move;
  touch-action: none; min-height: 3mm;
}
.ed-widget:hover { border-color: rgb(var(--brand-400) / .7); }
.ed-widget.selezionato { border-color: rgb(var(--brand-600)); box-shadow: 0 0 0 2px rgb(var(--brand-600) / .18); }
.ed-widget.selezionato, .ed-widget.in-movimento { z-index: 5000 !important; }
.ed-widget.in-movimento { box-shadow: 0 8px 22px rgb(var(--brand-600) / .22); opacity: .96; }
.ed-widget img { pointer-events: none; -webkit-user-drag: none; }
/* L'anteprima dentro il widget non intercetta il puntatore: il clic va al
   widget (seleziona/trascina). ⚠️ Solo le anteprime (`ed-w-*`), MAI un
   `> div` generico: il `<div>` che avvolge le otto maniglie e' anch'esso un
   figlio diretto, e `pointer-events` si EREDITA — le maniglie erano morte
   senza nessun errore (misurato con Playwright il 2026-09-06). */
.ed-widget > [class^="ed-w-"] { pointer-events: none; }
.ed-widget .ed-ridim, .ed-widget .ed-elimina { pointer-events: auto; }

.ed-elimina {
  position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: #ef4444; color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 11px; font-weight: 700; z-index: 6; line-height: 1;
}
/* Otto maniglie di ridimensionamento */
.ed-ridim {
  position: absolute; width: 10px; height: 10px; background: #fff;
  border: 2px solid rgb(var(--brand-600)); border-radius: 2px; z-index: 6; touch-action: none;
}
.ed-ridim.n  { top: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.ed-ridim.s  { bottom: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.ed-ridim.e  { right: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.ed-ridim.w  { left: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.ed-ridim.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.ed-ridim.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ed-ridim.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.ed-ridim.se { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* ── Anteprime in tela per famiglia (vicine alla stampa, non identiche) ── */
.ed-w-testo { font-size: 9.5pt; line-height: 1.4; white-space: pre-line; color: #1e293b; height: 100%; overflow: hidden; }
.ed-w-avviso { background: #fff7ed; border-left: 3px solid rgb(var(--brand-500)); padding: 1.5mm 2mm; }
.ed-w-titolo { font-weight: 700; margin-bottom: 0.5mm; }
.ed-w-immagine {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 4px; overflow: hidden;
  font-size: 8pt; color: #94a3b8; text-align: center;
}
.ed-w-immagine img { width: 100%; height: 100%; object-fit: contain; }
.ed-w-intestazione { display: flex; flex-direction: column; gap: 1mm; height: 100%; overflow: hidden; }
.ed-w-intestazione img { max-height: 16mm; max-width: 100%; object-fit: contain; align-self: flex-start; }
.ed-w-intestazione b { font-size: 13pt; color: #0f172a; }
.ed-w-intestazione small { font-size: 8.5pt; color: #64748b; }
.ed-w-riferimenti { display: flex; flex-direction: column; gap: 0.3mm; font-size: 8.6pt; color: #475569; height: 100%; overflow: hidden; }
.ed-w-riferimenti small { text-transform: uppercase; letter-spacing: .06em; font-size: 7pt; }
.ed-w-riferimenti b { font-size: 12pt; color: #0f172a; }
.ed-w-cliente { display: flex; flex-direction: column; gap: 0.4mm; font-size: 9pt; color: #1e293b; height: 100%; overflow: hidden; }
.ed-w-cliente b { font-size: 10pt; }
.ed-w-prezzi { font-size: 8.5pt; color: #1e293b; }
.ed-w-prezzi.compatto { font-size: 7.5pt; }
.ed-w-prezzi table { width: 100%; border-collapse: collapse; }
.ed-w-prezzi th { text-align: left; font-size: 7pt; text-transform: uppercase; letter-spacing: .05em; color: #64748b; padding: 1mm 1.5mm; border-bottom: 1px solid #cbd5e1; }
.ed-w-prezzi td { padding: 1.2mm 1.5mm; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.ed-w-prezzi .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ed-w-prezzi .vuoto { text-align: center; color: #94a3b8; font-style: italic; }
.ed-w-totali { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6mm; margin-top: 2mm; font-size: 8.5pt; }
.ed-w-totali span { display: flex; gap: 4mm; }
.ed-w-totali b { min-width: 24mm; text-align: right; font-variant-numeric: tabular-nums; }
.ed-w-totali .finale { border-top: 1.5px solid #0f172a; padding-top: 1mm; font-size: 10pt; font-weight: 700; }
.ed-w-totali .finale i { font-style: normal; }
.ed-w-firma { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ed-w-firma .riquadro {
  flex: 1 1 auto; min-height: 10mm; border: 1px dashed #94a3b8; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff;
  font-size: 7.5pt; color: #94a3b8;
}
.ed-w-firma .riquadro.azienda { border-style: solid; border-color: #cbd5e1; }
.ed-w-firma .riquadro img { max-height: 96%; max-width: 96%; object-fit: contain; }
.ed-w-firma .etichetta { font-size: 8pt; color: #475569; margin-top: 1mm; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-w-campo { display: flex; align-items: baseline; gap: 2mm; font-size: 9pt; }
.ed-w-campo .linea { flex: 1; border-bottom: 1px solid #64748b; min-height: 4.5mm; }
.ed-w-checkbox { display: flex; align-items: center; gap: 2mm; font-size: 9pt; }
.ed-w-checkbox.a-sinistra { flex-direction: row-reverse; justify-content: flex-end; }
.ed-w-checkbox .casella {
  width: 4mm; height: 4mm; border: 1.4px solid #334155; border-radius: 2px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 8pt; font-weight: 700;
}
.ed-w-checkbox .casella.tonda { border-radius: 50%; }
.ed-w-checkbox .casella.spuntata { background: #0f172a; border-color: #0f172a; color: #fff; }
.ed-w-si-no { display: flex; align-items: center; gap: 2.5mm; font-size: 9pt; font-weight: 600; }
.ed-w-si-no .scelta { padding: 0.5mm 2.5mm; border-radius: 999px; border: 1.4px solid #cbd5e1; opacity: .5; font-size: 8pt; }
.ed-w-si-no .scelta.on { opacity: 1; border-color: #0f172a; }
.ed-w-cornice { width: 100%; height: 100%; box-sizing: border-box; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8pt; color: #94a3b8; }
.ed-w-cerchio { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 8pt; }
.ed-w-pieno { width: 100%; height: 100%; border-radius: 2px; }
.ed-w-riga { width: 100%; }
.ed-w-legacy { display: flex; flex-direction: column; gap: 0.5mm; font-size: 8.5pt; color: #475569; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 3px; padding: 1.5mm 2mm; height: 100%; }
.ed-w-legacy small { font-size: 7pt; color: #94a3b8; }

/* Documento a impaginazione classica: al posto del foglio, l'anteprima. */
.ed-classico { max-width: 62rem; margin: 0 auto; }
.ed-classico-nota {
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 0.6rem;
  padding: 0.75rem 1rem; font-size: 0.8rem; color: #7c2d12; line-height: 1.45; margin-bottom: 0.75rem;
}
.ed-classico .anteprima-frame { height: calc(100dvh - 15rem); min-height: 30rem; }

.ed-mobile-cmd { display: none; }

/* ── Il pannello di destra ─────────────────────────────────────────────── */
.ed-sez { padding: 0.65rem 0; border-bottom: 1px solid #f1f5f9; }
.ed-sez:last-child { border-bottom: 0; }
.ed-sez-tit { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #475569; margin-bottom: 0.4rem; }
.ed-sez .lbl { margin-top: 0.45rem; }
.ed-lati-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ed-lati { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.ed-lati label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.65rem; color: #64748b; }
.ed-lati label i { font-style: normal; font-weight: 600; }
.ed-lati .inp { padding: 0.3rem 0.35rem; font-size: 0.78rem; }
.ed-riga-info { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; font-size: 0.8rem; padding: 0.2rem 0; }
.ed-riga-info > span:first-child { color: #64748b; flex: 0 0 auto; }
.ed-riga-info > b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ed-totale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.4rem; padding-top: 0.45rem; border-top: 2px solid #0f172a; font-size: 0.95rem; }
.ed-totale b { font-size: 1.1rem; font-weight: 700; }
.ed-cliente { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem; color: #334155; align-items: flex-start; }
.ed-cliente b { font-size: 0.9rem; color: #0f172a; }
.ed-risultati { border: 1px solid #e2e8f0; border-radius: 0.5rem; margin-top: 0.35rem; max-height: 14rem; overflow: auto; background: #fff; }
.ed-risultato { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid #f1f5f9; font-size: 0.8rem; }
.ed-risultato:hover { background: rgb(var(--brand-50)); }
.ed-risultato:last-child { border-bottom: 0; }
.ed-risultato span { color: #64748b; font-size: 0.72rem; }
.ed-risultato em { font-style: normal; font-size: 0.62rem; font-weight: 700; color: #0369a1; background: #e0f2fe; border-radius: 999px; padding: 0 0.4rem; margin-top: 0.15rem; }
.ed-link { color: rgb(var(--brand-700)); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; text-align: left; }
.ed-manuale { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.ed-righe { display: flex; flex-direction: column; gap: 0.4rem; }
.ed-rigaprezzo { border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.4rem 0.5rem; background: #fff; }
.ed-rigaprezzo.detrazione { background: #f0fdfa; border-color: #99f6e4; }
.ed-rigaprezzo-num { display: grid; grid-template-columns: 0.9fr 1.5fr 0.9fr 0.9fr auto; gap: 0.25rem; align-items: end; margin-top: 0.2rem; }
.ed-rigaprezzo-num .inp-flat { font-size: 0.8rem; padding: 0.2rem 0.25rem; }
.ed-rigaprezzo-num label { display: flex; flex-direction: column; font-size: 0.62rem; color: #64748b; }
.ed-x { color: #94a3b8; font-size: 0.8rem; padding: 0.1rem 0.35rem; border-radius: 0.3rem; line-height: 1; }
.ed-x:hover { color: #b91c1c; background: #fef2f2; }
.ed-promo { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; }
.ed-firmato { margin-top: 0.4rem; padding: 0.5rem 0.65rem; background: #ecfdf5; color: #065f46; border-radius: 0.5rem; font-size: 0.78rem; line-height: 1.4; }
.ed-colore { display: flex; align-items: center; gap: 0.35rem; }
.ed-colore input[type=color] { width: 2.4rem; height: 1.9rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; padding: 0.1rem; background: #fff; }

/* ══ RIGA MOBILE DENTRO L'HUB ══
   Sotto i 900px la testata dell'Hub sparisce e la fascia `.topbar` diventa
   l'UNICA riga in alto: il ☰ chiede all'Hub di aprire il menu principale, la
   ⚙ il foglio delle sezioni di questa app (che l'elenco ce l'ha gia',
   dichiarato). Fuori dall'Hub non esistono: li' la barra delle sezioni c'e'
   ancora, e non c'e' nessun Hub da aprire. */
.ek-mob { display: none; }
/* 🔴 FUORI da ogni @media, apposta: marchio, uscita e barra delle sezioni
   non devono comparire NEMMENO per un istante dentro l'Hub, a nessuna
   larghezza. Dentro una media query sarebbe la cura di un caso particolare.
   ⚠️ E si nasconde con una REGOLA, mai con `x-show`: quello e' inerte finche'
   Alpine non parte — cioe' e' esattamente il difetto da chiudere. La griglia
   a tre fasce si richiude da se': la colonna `auto` del marchio e la riga
   `auto` della barra collassano a zero. */
.dentro-hub .solo-fuori-hub { display: none !important; }
@media (max-width: 900px) {
  .dentro-hub .ek-mob {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
    border-radius: 0.5rem; border: 1px solid #e2e8f0;
    background: #fff; color: #475569;
  }
  .dentro-hub .shell > .topbar { gap: 0.5rem; padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* ── Riga di una voce (Widget e modelli) ─────────────────────────────────
   Testo a sinistra, comandi a destra: se i comandi (in spagnolo e russo
   «Nuevo documento desde esta» e' lungo) non stanno accanto al testo, la riga
   va a CAPO invece di schiacciare il testo in una colonna di due caratteri.
   La base di 10rem e' cio' che il testo pretende prima di far scendere i
   comandi; dove c'e' posto non cambia niente. */
.riga-voce { flex-wrap: wrap; }
.riga-voce > .riga-voce-testo { flex: 1 1 10rem; }

/* ── Telefono ────────────────────────────────────────────────────────────
   Pattern scritto a mano: il build Tailwind e' purgato e le varianti `sm:`
   non ci sono. Sotto i 700px la lista e' a card, l'editor e' una colonna:
   la tela adattata, palette e pannello come fogli dal basso. */
@media (max-width: 700px) {
  /* La testata puo' andare a CAPO quando titolo e pulsanti non ci stanno insieme: in spagnolo e russo «Widgets y plantillas» restava
     «Wid…» accanto a «+ Nuevo documento». Il titolo chiede la sua larghezza intera; se non ci sta accanto ai pulsanti scende su una riga SUA. Dove c'e'
     posto (l'italiano) la fascia resta alta 3.25rem, una riga sola, come prima. */
  .shell > .topbar { height: auto; min-height: 3.25rem; flex-wrap: wrap; align-content: center; row-gap: 0.15rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
  .shell > .topbar > h1 { flex: 1 1 auto; min-width: 0; }
  .th, .td { padding: 0.4rem 0.5rem; }
  .solo-desktop { display: none; }
  .solo-mobile { display: revert; }

  .ed-barra { padding: 0.4rem 0.5rem; gap: 0.35rem; }
  .ed-barra .btn, .ed-barra .btn-primary { padding: 0.35rem 0.6rem; font-size: 0.78rem; }
  .ed-tela { padding: 0.75rem 0.5rem 5rem; }
  .ed-lato {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 78vh; z-index: 70;
    border: 0; border-top: 1px solid #e2e8f0; border-radius: 0.9rem 0.9rem 0 0;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .18);
    transform: translateY(105%); transition: transform .2s ease;
  }
  .ed-lato.aperto { transform: none; }
  .ed-lato-corpo { padding-bottom: 3rem; }
  .ed-mobile-cmd {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 0.5rem; justify-content: center; padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, .92); border-top: 1px solid #e2e8f0; backdrop-filter: blur(6px);
  }
  .ed-lati { grid-template-columns: repeat(2, 1fr); }
  .ed-classico .anteprima-frame { height: 70vh; }
}

/* ── Sola visualizzazione ─────────────────────────────────────────────────
   I comandi che SCRIVONO spariscono. La difesa vera e' il 403 del servizio
   (`app/core.py::_principal_team`) — questo serve a non offrire una porta che
   poi non si apre, e a non far sembrare rotto cio' che e' solo ristretto.
   ⚠️ Sta qui e non nella pagina perche' `app.css` serve anche la pagina
   pubblica di firma: una copia per pagina divergerebbe al primo ritocco. */
body.doc-sola-lettura [data-scrittura] { display: none !important; }

/* ── L'ingresso dall'Hub (2026-10-06) ─────────────────────────────────────
   Le classi le mette `js/ingresso-hub.js` su <html> (copia del canonico
   dell'Hub): `ek-ingresso-attesa` mentre arriva il biglietto, `ek-ingresso-
   fuori` se l'Hub non riesce a far entrare. Qui solo cio' che si vede — il
   markup sta in `index.html`, senza Alpine. Fuori dall'Hub non compare mai. */
.ek-ingresso, .ek-ingresso-attesa-testo, .ek-ingresso-fuori-testo { display: none; }
html.ek-ingresso-attesa .ek-ingresso,
html.ek-ingresso-fuori .ek-ingresso {
  display: flex; position: fixed; inset: 0; z-index: 60;
  align-items: center; justify-content: center; padding: 1rem;
  background: #f8fafc;
}
html.ek-ingresso-attesa .ek-ingresso-attesa-testo { display: block; }
/* ⚠️ Il rifiuto vince sull'attesa: con tutte e due, conta il rifiuto. */
html.ek-ingresso-fuori .ek-ingresso-attesa-testo { display: none; }
html.ek-ingresso-fuori .ek-ingresso-fuori-testo { display: block; }
.ek-ingresso-scheda {
  width: 100%; max-width: 24rem; padding: 1.5rem; text-align: center;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  font-size: 0.875rem; color: #64748b;
}
.ek-ingresso-titolo { font-weight: 500; color: #334155; margin-bottom: 0.25rem; }
.ek-ingresso .btn-primary { display: block; margin-top: 1.25rem; text-decoration: none; }