:root {
  --scuro: #222423;
  --scuro-2: #2e312f;
  --carta: #ffffff;
  --sfondo: #f4f5f3;
  --bordo: #dfe1dd;
  --testo: #1b1d1b;
  --tenue: #6b706a;
  --accento: #d98324;
  --accento-scuro: #b96c17;
  --ok: #2f7d4f;
  --ko: #b3392f;
  --info: #2c6b9e;
  --raggio: 10px;
  --ombra: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  font-synthesis-weight: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---------- attesa ---------- */
.schermata-attesa {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--tenue);
}
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--bordo);
  border-top-color: var(--accento);
  border-radius: 50%;
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ---------- accesso ---------- */
.schermata-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scuro);
}
.riquadro-login {
  width: min(400px, 100%);
  background: var(--carta);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
}
.marchio {
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--accento);
}
.riquadro-login h1 { margin: 6px 0 4px; font-size: 26px; }
.sottotitolo { margin: 0 0 22px; color: var(--tenue); font-size: 14px; }
.nota { color: var(--tenue); font-weight: 400; font-size: 12px; }

label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin: 14px 0 5px;
}
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
}

button { font: inherit; cursor: pointer; }
.primario {
  width: 100%;
  margin-top: 20px;
  padding: 11px 18px;
  background: var(--scuro);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
}
.primario:hover { background: var(--scuro-2); }
.primario:disabled { opacity: .55; cursor: progress; }
.secondario {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-weight: 600;
}
.secondario:hover { border-color: var(--tenue); }
.collegamento {
  background: none;
  border: 0;
  color: inherit;
  text-decoration: underline;
  padding: 4px;
}
.errore {
  margin: 14px 0 0;
  padding: 9px 12px;
  background: #fdecea;
  border-left: 3px solid var(--ko);
  border-radius: 4px;
  color: #7d211a;
  font-size: 14px;
}

/* ---------- barra ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  background: var(--scuro);
  color: #fff;
  min-height: 56px;
  flex-wrap: wrap;
}
.barra-marchio { font-weight: 800; letter-spacing: .04em; }
.barra-marchio span { font-weight: 400; opacity: .65; margin-left: 6px; }
.barra-nav { display: flex; gap: 4px; margin-right: auto; }
.barra-nav button {
  background: none;
  border: 0;
  color: rgba(255,255,255,.72);
  padding: 8px 13px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 14px;
}
.barra-nav button:hover { background: rgba(255,255,255,.09); color: #fff; }
.barra-nav button.attivo { background: rgba(255,255,255,.15); color: #fff; }
.barra-utente {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.8);
}

/* ---------- pagine ---------- */
.pagina { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
.intestazione-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.intestazione-pagina h2 { margin: 0; font-size: 21px; }
.intestazione-pagina .primario { width: auto; margin: 0; }

.riepilogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.scheda-dato {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 14px 16px;
}
.scheda-dato .etichetta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tenue);
  font-weight: 600;
}
.scheda-dato .valore { font-size: 24px; font-weight: 700; margin-top: 3px; }

.filtri { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filtri input { flex: 1 1 240px; }
.filtri select { flex: 0 0 200px; }

table { width: 100%; border-collapse: collapse; background: var(--carta); border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--bordo); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); background: #fafbf9; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbf9; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.pill-bozza     { background: #eef0ec; color: #55594f; }
.pill-inviato   { background: #e7f0f8; color: var(--info); }
.pill-visto     { background: #e7f0f8; color: var(--info); }
.pill-accettato { background: #e4f2e9; color: var(--ok); }
.pill-rifiutato { background: #fdecea; color: var(--ko); }
.pill-scaduto   { background: #f6efe3; color: #8a6415; }

.vuoto, .cartello {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 34px;
  text-align: center;
  color: var(--tenue);
}
.cartello h2 { margin-top: 0; color: var(--testo); }
.cartello { text-align: left; }

/* ---------- finestra modale ---------- */
.finestra {
  position: fixed;
  inset: 0;
  background: rgba(20,22,20,.55);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}
.finestra-contenuto {
  background: var(--carta);
  border-radius: 14px;
  padding: 26px;
  width: min(520px, 100%);
  max-height: 86dvh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.finestra-contenuto h2 { margin-top: 0; }
/* Il dettaglio del preventivo ha tante sezioni: gli si dà più respiro,
   gli altri dialoghi (utenti, installatori, credenziali) restano stretti. */
.finestra-contenuto.finestra-larga {
  width: min(1100px, 100%);
  max-height: 92dvh;
  padding: 28px 32px;
}
/* Dentro, DUE COLONNE CSS che si riempiono da sole ad altezza pari:
   niente colonna chilometrica accanto a una vuota. Sotto i 900px in fila. */
.dettaglio-colonne {
  columns: 2;
  column-gap: 26px;
}
.dettaglio-colonne > * {
  break-inside: avoid;
  display: block;
  width: 100%;
}
@media (max-width: 900px) {
  .dettaglio-colonne { columns: 1; }
}
.azioni-finestra { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.azioni-finestra .primario { width: auto; margin: 0; }

.credenziale {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: #f6f7f4;
  border: 1px dashed var(--bordo);
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  word-break: break-all;
  user-select: all;
}

/* ---------- avviso ---------- */
.avviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--scuro);
  color: #fff;
  padding: 11px 20px;
  border-radius: 100px;
  box-shadow: var(--ombra);
  z-index: 60;
  max-width: 90vw;
}
.avviso.ko { background: var(--ko); }

@media (max-width: 640px) {
  .barra { gap: 12px; padding: 10px 14px; }
  .barra-nav { order: 3; width: 100%; overflow-x: auto; }
  .pagina { padding: 18px 14px 50px; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tbody tr { border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: 10px; background: var(--carta); }
  td { border: 0; padding: 6px 14px; }
  td:first-child { padding-top: 12px; font-weight: 700; }
  td:last-child { padding-bottom: 12px; }
  td.num { text-align: left; }
  td::before { content: attr(data-et) " "; color: var(--tenue); font-size: 12px; }
  td:first-child::before { content: ""; }
}

/* ---------- "Da fare": gli appunti personali sotto le tessere ---------- */
.da-fare {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.da-fare-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.da-fare-testa strong { font-size: 16px; }
.da-fare-stato { font-size: 12px; color: var(--tenue); }
.da-fare-stato.ko { color: #b42318; }
.da-fare textarea {
  width: 100%; min-height: 120px; resize: vertical; margin: 0;
  font: inherit; line-height: 1.5; padding: 10px 12px;
  border: 1px solid var(--bordo); border-radius: 8px; background: #fff;
}
.da-fare textarea:focus { outline: 2px solid var(--accento); outline-offset: 1px; border-color: transparent; }

/* ---------- scelta del configuratore ---------- */
.titolo-scelta { margin: 4px 0 4px; font-size: 22px; }
.sub-scelta { margin: 0 0 22px; color: var(--tenue); }

.scelta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.tessera {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas: "icona testo" "vai vai";
  gap: 14px;
  align-items: start;
  padding: 20px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, transform .12s;
}
.tessera:hover { border-color: var(--accento); transform: translateY(-2px); }
.tessera:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.tessera-icona { grid-area: icona; color: var(--accento); }
.tessera-icona svg { width: 44px; height: 44px; }
.tessera-testo { grid-area: testo; display: block; }
.tessera-testo strong { display: block; font-size: 17px; margin-bottom: 4px; }
.tessera-testo span { color: var(--tenue); font-size: 14px; }
.tessera-vai {
  grid-area: vai;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bordo);
  font-weight: 600;
  color: var(--accento);
  font-size: 14px;
}

/* Provenienza del preventivo: piccola, grigia, non deve rubare la scena. */
.tag-origine {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: #eef0ec;
  color: #6b6f64;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/* Righe dell'archivio: tutta la riga apre il dettaglio. */
.riga-apribile { cursor: pointer; }
.riga-apribile:hover { background: #faf9f6; }
.riga-apribile:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }

/* Come sta messo un preventivo accettato verso Odoo. */
.tag-odoo {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.tag-odoo-ok     { background: #e4f2e9; color: var(--ok); }
.tag-odoo-ko     { background: #fbe6e6; color: #a52121; }
.tag-odoo-attesa { background: #f3efe4; color: #8a6d2f; }

/* Le spunte non sono campi di testo: larghezza naturale, allineate al testo. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  margin: 0;
  vertical-align: middle;
}
label.spunta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin: 10px 18px 10px 0;
}
.riga-spunte { display: flex; flex-wrap: wrap; align-items: center; }

/* Form "comodo" nei dialoghi larghi: etichette a sinistra, campi a destra. */
.finestra-larga .form-comodo {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2px 20px;
  align-items: center;
}
.finestra-larga .form-comodo > h2,
.finestra-larga .form-comodo > .errore,
.finestra-larga .form-comodo > .riga-intera,
.finestra-larga .form-comodo > .azioni-finestra { grid-column: 1 / -1; }
.finestra-larga .form-comodo > label:not(.spunta) { margin: 10px 0; }
.form-comodo .riga-intera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.form-comodo .riga-intera .secondario { width: auto; margin: 0; }
@media (max-width: 700px) {
  .finestra-larga .form-comodo { grid-template-columns: 1fr; gap: 0; }
}

/* Sconto di chiusura nel dettaglio e riga di pagamento commissioni. */
.riga-sconto, .riga-paga {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.riga-sconto input[type="number"] { width: 120px; }
.riga-paga input[type="date"] { width: 160px; }
.riga-sconto .primario, .riga-sconto .secondario,
.riga-paga .primario, .riga-paga .secondario { width: auto; margin: 0; }
.riga-sconto .aiuto { flex-basis: 100%; }
.etichetta-sconto { font-weight: 600; font-size: 13px; }

/* Report commissioni */
.gruppo-commissioni {
  background: var(--carta, #fff);
  border: 1px solid var(--bordo, #ddd);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.gruppo-commissioni h3 { margin: 0 0 10px; }
.gruppo-commissioni table { margin-bottom: 8px; }

/* Riquadro Analisi (FV) nel dettaglio preventivo */
.riquadro-analisi {
  background: var(--carta, #fff);
  border: 1px solid var(--bordo, #ddd);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}
.riquadro-analisi h3 { margin: 0 0 8px; font-size: 15px; }
.riquadro-analisi p { margin: 0 0 8px; font-size: 13px; }
.form-analisi {
  display: grid;
  grid-template-columns: auto 110px;
  gap: 6px 10px;
  align-items: center;
  margin: 8px 0 10px;
}
.form-analisi label { font-size: 13px; }
.form-analisi input[type="number"] { width: 110px; padding: 5px 7px; }
.form-analisi label.spunta,
.form-analisi button { grid-column: 1 / -1; justify-self: start; }
.avviso-analisi { color: #8a5a00; }

/* Anagrafica clienti */
.scheda-cliente h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scheda-cliente .aiuto { margin: 0 0 8px; }
.scheda-cliente .azioni-linea { margin-bottom: 10px; }

/* Coppie di pulsanti a metà colonna nel riquadro Installazione. */
.azioni-mezze {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.azioni-mezze > * {
  width: 100%;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}
/* riga con un solo elemento (pagina non ancora nata): tiene tutta la riga */
.azioni-mezze > :only-child { grid-column: 1 / -1; }

/* Colonna "Lavoro": avanzamento del piano di attività su Odoo. */
.lavoro {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  background: #e9eef6;
  color: #2d4a75;
}
.lavoro-fatto   { background: #e4f2e9; color: var(--ok); }
.lavoro-ritardo { background: #fbe6e6; color: #a52121; }
.lavoro-passo {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 12px;
  color: #666;
}

/* Dettaglio del preventivo */
.riga-stato { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.dettaglio {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 14px;
  font-size: 14px;
}
.dettaglio dt { color: #6b6f64; }
.dettaglio dd { margin: 0; }
.riga-breve { font-size: 14px; color: #55594f; margin: 0 0 12px; }
.nota-interna {
  font-size: 13px;
  background: #f3efe4;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 12px;
}
.riquadro-odoo {
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 14px;
  font-size: 14px;
}
.riquadro-odoo-ok     { background: #e4f2e9; }
.riquadro-odoo-ko     { background: #fbe6e6; }
.riquadro-odoo-attesa { background: #f3efe4; }
.riquadro-testo { margin-bottom: 8px; }
.azioni-linea { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.storico { margin: 8px 0 14px; padding-left: 18px; font-size: 13px; color: #55594f; }
.storico li { margin-bottom: 3px; }

/* Avanzamento del lavoro: le fasi vengono dal piano di attività su Odoo. */
.riquadro-fasi {
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.riquadro-fasi h3 { font-size: 14px; margin: 0 0 8px; }
.conta-fasi { font-size: 14px; margin: 0 0 8px; }
.in-ritardo { color: #a52121; }
/* Barra di avanzamento delle fasi. Si chiamava `.barra` come l'intestazione
   in cima alla pagina: essendo piu' in basso nel foglio vinceva lei, e la
   testata diventava una striscia chiara con sopra il testo bianco, cioe'
   illeggibile. Due componenti diversi non possono avere lo stesso nome. */
.barra-avanzamento {
  height: 6px;
  border-radius: 3px;
  background: #eef0ec;
  overflow: hidden;
  margin-bottom: 10px;
}
.barra-avanzamento-piena { height: 100%; background: var(--ok, #3f7d55); }
.passi { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.passi li { display: flex; gap: 10px; padding: 3px 0; }
.passi .quando { color: #6b6f64; white-space: nowrap; min-width: 92px; }
.aiuto { font-size: 13px; color: #6b6f64; margin: 6px 0 0; }
.attesa-fasi { font-size: 13px; color: #6b6f64; margin: 0; }

/* Link alla pagina del cliente, nel dettaglio del preventivo. */
.riga-link { display: flex; gap: 14px; align-items: center; margin: 0 0 12px; font-size: 14px; }

/* ---------- analisi del tetto e invio ---------- */
.bottone-link { display: inline-block; text-decoration: none; text-align: center; }
a.primario.bottone-link { width: auto; margin-top: 4px; padding: 9px 16px; }
a.secondario.bottone-link { padding: 8px 14px; }
.riga-invio { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; }
.riga-invio .primario { width: auto; margin-top: 0; }

/* --- installazione: allegati tecnici e stato --- */
.riga-allegati { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.lista-allegati { display: flex; flex-wrap: wrap; gap: 6px; }
.allegato { background: #f1f1f3; border: 1px solid #e0e0e3; border-radius: 999px; padding: 3px 10px; font-size: .85rem; white-space: nowrap; }
.allegato a { color: inherit; }
.nota-tecnico { width: 100%; margin: 8px 0 4px; padding: 8px 10px; border: 1px solid #d9d9dd; border-radius: 8px; font: inherit; resize: vertical; }
.esito-ok { color: #1a7f37; font-weight: 600; }
.esito-ko { color: #c62828; font-weight: 600; }
.sezione-installatori { margin-top: 34px; }
.sezione-installatori h2 { margin-bottom: 10px; }

/* ---------- listino fornitori (solo admin) ---------- */
.blocco-fornitore {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 16px 18px;
  margin: 0 0 18px;
}
.blocco-fornitore h3 { margin: 0 0 8px; font-size: 16px; }
.tabella-listino { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella-listino td { padding: 4px 8px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella-listino .listino-categoria {
  font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em;
  font-size: 11.5px; padding-top: 14px; border-bottom: none;
}
.tabella-listino .listino-nota { color: var(--tenue); font-size: 12px; width: 32%; }
.tabella-listino .listino-prezzo { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Bottone "pericoloso" (eliminazione bozze): rosso tenue finche' non lo si arma. */
button.pericolo { color: var(--ko); border-color: color-mix(in srgb, var(--ko) 45%, transparent); }
button.pericolo:hover { background: color-mix(in srgb, var(--ko) 8%, transparent); }

/* ---------- dettaglio preventivo a schede ---------- */
/* Colonna sinistra e destra con lo stesso vestito: bordo, angoli, titoletto. */
.scheda-dettaglio {
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.scheda-dettaglio > h3 {
  font-size: 14px;
  margin: 0 0 10px;
}
.scheda-dettaglio .dettaglio { margin: 0 0 4px; }
.scheda-dettaglio .riga-sconto { margin-top: 10px; }
.scheda-dettaglio .riga-link,
.scheda-dettaglio .riga-invio { margin: 0 0 10px; }
.scheda-dettaglio .riga-invio:last-child,
.scheda-dettaglio .riga-link:last-child,
.scheda-dettaglio p:last-child { margin-bottom: 0; }
.scheda-dettaglio .riquadro-odoo { margin: 0 0 10px; }

/* La data in archivio non va a capo ("28 ago 2026" su una riga sola). */
#elenco-preventivi td[data-et="Creato"] { white-space: nowrap; }

/* "Reimposta password" e simili non vanno a capo dentro le tabelle. */
#elenco-utenti td:last-child { white-space: nowrap; }

/* Fisarmoniche del listino fornitori: chiuse in partenza, pagina corta. */
.fisarmonica-listino { border-top: 1px solid var(--bordo); }
.fisarmonica-listino:last-child { border-bottom: none; }
.fisarmonica-listino > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
}
.fisarmonica-listino > summary::-webkit-details-marker { display: none; }
.fisarmonica-listino > summary::before {
  content: '▸';
  color: var(--tenue);
  font-size: 11px;
  margin-right: 2px;
}
.fisarmonica-listino[open] > summary::before { content: '▾'; }
.fisarmonica-listino > summary:hover { color: var(--accento-scuro); }
.fisarmonica-conta {
  margin-left: auto;
  font-weight: 400;
  font-size: 12px;
  color: var(--tenue);
  white-space: nowrap;
}
.fisarmonica-listino > .tabella-listino { margin: 2px 0 10px; }

/* Sottotitoli dentro "Analisi del tetto e consumi" (Tetto / Consumi). */
.sottotitolo-analisi {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tenue);
}
.riquadro-tetto .sottotitolo-analisi:first-child { margin-top: 0; }
.sezione-consumi { margin-top: 4px; }

/* ---------- unione bozze (preventivo unificato) ---------- */
.lista-unione { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.riga-unione {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--bordo); border-radius: 8px;
  cursor: pointer; font-size: 14px; margin: 0; font-weight: 400;
}
.riga-unione:hover { border-color: var(--tenue); }
.riga-unione input { width: auto; }
.riga-unione .pill { margin-left: auto; }

/* La riga unica dei bottoni documento nel dettaglio: compatti, per stare
   tutti e quattro su una riga nella colonna. */
.azioni-compatte { gap: 6px; }
.azioni-compatte .secondario {
  padding: 6px 9px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* ---------- miniature foto/video nel riquadro Installazione ---------- */
.lista-allegati { display: flex; flex-wrap: wrap; gap: 8px; }
.miniatura-allegato {
  position: relative;
  width: 86px; height: 86px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bordo);
  cursor: zoom-in;
  background: #14161a;
  flex: 0 0 auto;
}
.miniatura-allegato img, .miniatura-allegato video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.miniatura-allegato:hover { border-color: var(--tenue); }
.miniatura-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
  pointer-events: none;
}
.miniatura-togli {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: rgba(15,16,15,.72); color: #fff;
  font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.miniatura-togli:hover { background: var(--ko); }

/* "Fatto" sulle fasi (solo admin) e la sua nota inline. */
button.fase-fatta {
  border: 1px solid var(--bordo);
  background: #fff;
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ok);
  margin-left: 6px;
}
button.fase-fatta:hover { border-color: var(--ok); background: #e4f2e9; }
.fase-nota {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 4px 0 2px 6px;
  max-width: 100%;
}
.fase-nota input { flex: 1 1 90px; min-width: 0; width: auto; padding: 3px 8px; font-size: 12px; }
.fase-nota button { flex: 0 0 auto; }

/* ---------- BOTTONI UNIFORMI (richiesta Marco, 28/08) ----------
   Dentro l'app tutti i bottoni hanno la stessa taglia dei compatti di
   "Documenti e invii": testo 12.5px, tasto stretto. Colori solo bianco
   e nero: primario = fondo nero testo bianco, secondario = fondo bianco
   testo nero. Le schermate di accesso restano come sono. */
#vista-app button.primario, #vista-app a.primario,
.finestra button.primario, .finestra a.primario {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 7px;
  background: var(--scuro);
  color: #fff;
  white-space: nowrap;
}
#vista-app button.primario:hover, .finestra button.primario:hover,
#vista-app a.primario:hover, .finestra a.primario:hover { background: var(--scuro-2); }
#vista-app button.secondario, #vista-app a.secondario,
.finestra button.secondario, .finestra a.secondario {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 7px;
  background: #fff;
  color: var(--testo);
  white-space: nowrap;
}
/* I collegamenti vestiti da bottone non devono piu' essere blu. */
#vista-app a.bottone-link, .finestra a.bottone-link {
  color: var(--testo);
  text-decoration: none;
}
#vista-app a.primario.bottone-link, .finestra a.primario.bottone-link { color: #fff; }
/* Anche il bottone "pericoloso" rientra nel bianco e nero: resta il
   doppio clic di conferma a proteggere. */
button.pericolo { color: var(--testo); border-color: var(--bordo); }
button.pericolo:hover { border-color: var(--ko); background: #fff; }
button.fase-fatta { color: var(--testo); }
button.fase-fatta:hover { border-color: var(--tenue); background: #fff; }

/* La riga compatta di "Documenti e invii" resta un filo piu' stretta,
   cosi' i quattro bottoni stanno su una riga sola. */
#vista-app .azioni-compatte .secondario, .finestra .azioni-compatte .secondario {
  padding: 6px 9px;
}

/* Commissioni: il menu del tipo di cliente (autogenerato/lead/retail) con
   l'importo gia' calcolato, e l'etichetta del tipo sulle righe pagate. */
.scelta-tipo-commissione {
  font-size: 12.5px;
  padding: 5px 6px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: #fff;
  max-width: 100%;
}
.nota-tipo-commissione { color: var(--tenue); font-size: 12px; white-space: nowrap; }

/* Il form dei dati cliente (assets/cliente-form.js) usa le classi dei
   configuratori (.field, .inline, .option): qui prendono il vestito
   dell'archivio. Scoperto sotto .fc per non toccare il resto. */
.fc { width: 100%; }
.fc .field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.fc .field label { font-weight: 600; font-size: 13px; margin: 0; }
.fc .field input, .fc .field select { width: 100%; margin: 0; }
.fc .inline { display: flex; gap: 10px; flex-wrap: wrap; }
.fc .inline > * { flex: 1; min-width: 130px; }
.fc .inline > .fc-cap { flex: 0 0 110px; min-width: 90px; }
.fc .inline > .fc-prov { flex: 0 0 220px; min-width: 160px; }
.fc .hint { font-size: 12px; color: var(--tenue); margin: -4px 0 10px; }
.fc .fc-errori { color: var(--ko); font-weight: 500; }
.fc .fc-sezione { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); margin: 12px 0 8px; }
.fc .options { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.fc .options.cols-2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fc .option { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border: 1.5px solid var(--bordo); border-radius: 12px; background: var(--carta); cursor: pointer; font-weight: 400; margin: 0; }
.fc .option input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.fc .option .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bordo); flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; background: #fff; }
.fc .option input[type=checkbox] ~ .dot { border-radius: 6px; }
.fc .option input:checked ~ .dot { border-color: var(--accento); background: var(--accento); }
.fc .option input:checked ~ .dot::after { content: ""; width: 8px; height: 8px; background: #fff; border-radius: inherit; }
.fc .option input[type=checkbox]:checked ~ .dot::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; background: none; width: auto; height: auto; }
.fc .option:has(input:checked) { border-color: var(--accento); background: #fff8f0; }
.fc .option .body { flex: 1; min-width: 0; }
.fc .option .opt-title { font-weight: 700; font-size: 14px; }
.fc .option .opt-sub { color: var(--tenue); font-size: 12px; margin-top: 2px; }
.form-cliente > .riga-intera { display: block; }
.avviso-inline { color: var(--ko); }

/* ---------- telefono: la finestra prende tutto lo schermo, i dati vanno a capo ---------- */
@media (max-width: 640px) {
  .finestra { padding: 0; place-items: stretch; }
  .finestra-contenuto, .finestra-contenuto.finestra-larga {
    width: 100%; max-height: 100dvh; border-radius: 0; padding: 18px 16px 40px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  .finestra-contenuto h2 { font-size: 20px; padding-right: 8px; }
  .dettaglio { grid-template-columns: 1fr; gap: 2px 0; }
  .dettaglio dt { font-size: 12px; margin-top: 8px; }
  .dettaglio dd { word-break: break-word; overflow-wrap: anywhere; }
  .azioni-linea { gap: 6px; }
  .azioni-linea .secondario, .azioni-linea .primario, .azioni-compatte .secondario { flex: 1 1 auto; text-align: center; }
  .riga-breve, .nota-interna { overflow-wrap: anywhere; }
  .barra-nav button { white-space: nowrap; }
  .intestazione-pagina { flex-wrap: wrap; gap: 8px; }
  .intestazione-pagina .nota { flex-basis: 100%; }
  .fc .inline > .fc-cap, .fc .inline > .fc-prov { flex: 1 1 45%; }
  .filtri { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filtri input[type="search"] { grid-column: 1 / -1; }
}

/* Chiusura della finestra: discreta sul desktop, indispensabile sul telefono. */
.finestra-contenuto { position: relative; }
.chiudi-finestra {
  position: sticky; top: 0; float: right; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bordo);
  background: var(--carta); color: var(--tenue); font-size: 15px; line-height: 1; padding: 0;
  margin: -6px -8px 0 8px;
}
.chiudi-finestra:hover { background: var(--sfondo); color: var(--testo); }

/* Riquadro Installazione: tutti i bottoni con lo stesso vestito, su righe
   a due colonne; "Carica foto o video" tiene tutta la riga come gli altri. */
.riga-allegati { flex-direction: column; align-items: stretch; }
.riga-allegati > .secondario { width: 100%; margin: 0; text-align: center; }
.riga-allegati > .lista-allegati { margin-top: 4px; }