/* ArgoCoreAI — foglio di stile unico.
   Scritto per il telefono: prima la colonna singola, poi il monitor.
   Niente framework, niente build: si modifica questo file e basta. */

:root {
  --sfondo: #f4f5f7;
  --carta: #ffffff;
  --bordo: #d8dce2;
  --testo: #17202a;
  --tenue: #5c6774;
  --marchio: #12333f;
  --accento: #0a6f8a;
  --accento-tenue: #e2f1f6;
  --buono: #1c6b45;
  --buono-tenue: #e2f3ea;
  --brutto: #a32020;
  --brutto-tenue: #fbe6e6;
  --avviso: #8a5a00;
  --raggio: 12px;
  --spazio: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #12161a;
    --carta: #1b2127;
    --bordo: #303a44;
    --testo: #e8edf2;
    --tenue: #9aa7b4;
    --marchio: #0d2730;
    --accento: #4fb3cf;
    --accento-tenue: #17323b;
    --buono: #64c99a;
    --buono-tenue: #16332a;
    --brutto: #f08a8a;
    --brutto-tenue: #351d1d;
    --avviso: #e0b25e;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--sfondo);
  color: var(--testo);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------- testata */

.testata {
  display: flex;
  align-items: center;
  gap: var(--spazio);
  padding: calc(var(--spazio) * 0.75) var(--spazio);
  padding-top: max(calc(var(--spazio) * 0.75), env(safe-area-inset-top));
  background: var(--marchio);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.marchio {
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  white-space: nowrap;
}
.marchio span { font-weight: 300; opacity: .85; }

.scelta-azienda { display: flex; gap: 4px; margin-left: auto; }
.scelta-azienda button, .scelta-azienda .statica {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.scelta-azienda button.attiva, .scelta-azienda .statica {
  background: #fff;
  color: var(--marchio);
  font-weight: 700;
  border-color: #fff;
}

.uscita button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.8);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
}

/* ------------------------------------------------------------- menu

   Sei voci, e sotto ognuna le sue pagine. Due disposizioni, e nessuna
   delle due e' una barra orizzontale che scorre: quella andava bene con
   sei voci, non con diciannove, e sul telefono non andava bene affatto —
   in cantiere, con una mano, una barra che scorre e' una barra che non
   si usa.

   - **telefono**: un tasto che apre un pannello a colonna. Le voci sono
     bersagli grossi, come tutto il resto dell'applicazione.
   - **monitor**: le sei voci in fila, e il sotto-menu che scende
     passandoci sopra o arrivandoci col tasto di tabulazione.

   Il tasto e' una casella di spunta nascosta con la sua etichetta:
   niente JavaScript, quindi il menu si apre anche se lo script non
   parte. La casella si nasconde con `opacity`, non con `display:none`,
   se no non prenderebbe il fuoco da tastiera. */

.apri-menu { position: absolute; opacity: 0; width: 0; height: 0; }

.menu {
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  position: sticky;
  top: 58px;
  z-index: 9;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: block; color: var(--tenue); text-decoration: none; }

.tasto-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 var(--spazio);
  min-height: 52px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--testo);
  cursor: pointer;
}
.tasto-menu .tratti {
  width: 22px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -7px currentColor, 0 7px currentColor;
}
.apri-menu:focus-visible + .menu .tasto-menu {
  outline: 3px solid var(--accento);
  outline-offset: -3px;
}

/* --------------------------------------------------------- telefono */

@media (max-width: 699px) {
  .menu .voci {
    display: none;
    border-top: 1px solid var(--bordo);
    max-height: 72vh;
    overflow-y: auto;
  }
  .apri-menu:checked + .menu .voci { display: block; }

  .menu .voce { border-bottom: 1px solid var(--bordo); }
  .menu .voce:last-child { border-bottom: 0; }
  .menu .capo {
    padding: 14px var(--spazio) 6px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--tenue);
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .menu .voce.qui .capo { color: var(--accento); }
  .menu .sotto {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--spazio) 12px;
  }
  .menu .sotto a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    color: var(--testo);
    font-size: .95rem;
  }
  .menu .sotto a.qui {
    border-color: var(--accento);
    background: var(--accento-tenue);
    color: var(--accento);
    font-weight: 600;
  }
}

/* ---------------------------------------------------------- monitor */

@media (min-width: 700px) {
  .tasto-menu { display: none; }
  .menu .voci { display: flex; gap: 2px; }
  .menu .voce { position: relative; flex: 1 1 auto; }
  .menu .capo {
    text-align: center;
    padding: 14px 16px;
    font-size: .95rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
  }
  .menu .voce.qui > .capo {
    color: var(--accento);
    border-bottom-color: var(--accento);
    font-weight: 600;
  }
  .menu .sotto {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-top: 0;
    border-radius: 0 0 var(--raggio) var(--raggio);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    z-index: 20;
  }
  .menu .voce:hover > .sotto,
  .menu .voce:focus-within > .sotto { display: block; }
  .menu .sotto a { padding: 11px 14px; white-space: nowrap; }
  .menu .sotto a:hover { background: var(--accento-tenue); color: var(--accento); }
  .menu .sotto a.qui { color: var(--accento); font-weight: 600; }
  /* l'ultima voce apre verso sinistra, se no esce dallo schermo */
  .menu .voce:last-child > .sotto { left: auto; right: 0; }
}

/* ------------------------------------------------ barra della sezione

   Le pagine del gruppo in cui si e', sempre a vista. Il menu grande le
   ha gia', ma solo aprendolo o passandoci sopra col mouse: qui si vede
   dove si e' e dove si puo' andare senza scoprire niente. Scorre in
   orizzontale solo lei, che al massimo ha sette voci corte. */

.sottomenu {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px var(--spazio) 0;
}
.sottomenu .dove {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tenue);
  margin-right: 4px;
}
.sottomenu a {
  padding: 6px 12px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--carta);
  color: var(--tenue);
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.sottomenu a:hover { border-color: var(--accento); color: var(--accento); }
.sottomenu a.qui {
  background: var(--accento-tenue);
  border-color: var(--accento);
  color: var(--accento);
  font-weight: 600;
}

/* le pagine larghe hanno la barra larga come loro */
main.larga { max-width: 1800px; }
body:has(main.larga) .sottomenu { max-width: 1800px; }
body:has(main.caricamento) .sottomenu { max-width: none; }

/* ---------------------------------------------------------- pagina */

main {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spazio);
}

/* Tre larghezze, e la pagina sceglie la sua con una classe sola
   (`{% block classe_pagina %}` in `base.html`). La scelta si fa **qui**,
   una volta, e non pagina per pagina: una maschera nuova nasce gia'
   giusta se dichiara la sua classe, e chi se ne dimentica prende la
   larghezza da lettura, che e' quella che non fa danni.

   nessuna classe   900 px   si legge. Una riga di testo lunga quanto lo
                             schermo non si segue con l'occhio: e' il
                             motivo per cui i libri sono stretti.
   `larga`         1800 px   pagine di lavorazione con tabelle larghe.
   `caricamento`   tutta     **le maschere con una griglia di
                             caricamento**. Li' la larghezza non e' un
                             lusso: la griglia deve stare tutta dentro
                             senza scorrimento orizzontale, e ogni pixel
                             tolto ai lati e' un pixel che la descrizione
                             non ha. */
main.larga { max-width: 1800px; }
main.caricamento {
  max-width: none;
  padding: var(--spazio) calc(var(--spazio) * 1.5);
}

/* Il documento accanto alla tabella: si apre solo quando serve, e sotto
   i 1100 pixel si mette sotto invece che a fianco. */
.con-documento { display: block; }
.con-documento.aperto { display: grid; grid-template-columns: 1fr 45%; gap: var(--spazio); align-items: start; }
.parte-documento iframe { width: 100%; height: 80vh; border: 1px solid var(--bordo); border-radius: 8px; background: #fff; }
@media (max-width: 1100px) {
  .con-documento.aperto { grid-template-columns: 1fr; }
  .parte-documento iframe { height: 60vh; }
}

/* la casella delle commesse */
.cerca-commessa { position: relative; }
.esiti-commessa {
  position: absolute; z-index: 20; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: 8px;
  max-height: 280px; overflow-y: auto; min-width: 320px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.esiti-commessa[hidden] { display: none; }
.esito-commessa { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--bordo); }
.esito-commessa:last-child { border-bottom: 0; }
.esito-commessa.scelto, .esito-commessa:hover { background: var(--sfondo-scelto, #eef4ff); }

/* tabelle di lavorazione: piu' righe a schermo */
.tabella.compatta th, .tabella.compatta td { padding: 4px 6px; font-size: .92rem; }
.tabella.compatta input { padding: 3px 5px; }

h1 { font-size: 1.35rem; margin: .2rem 0 .8rem; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }

a { color: var(--accento); }

.tenue { color: var(--tenue); }
.piccolo { font-size: .85rem; }
.destra { text-align: right; }
.centro { text-align: center; }
.vuoto { color: var(--tenue); padding: 2rem 1rem; text-align: center; }

.carta {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: var(--spazio);
  margin-bottom: var(--spazio);
}

.riga-titolo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spazio);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------- avvisi */

.avvisi { margin-bottom: var(--spazio); }
.avviso {
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: var(--raggio);
  border: 1px solid;
}
.avviso.esito { background: var(--buono-tenue); border-color: var(--buono); color: var(--buono); }
.avviso.errore { background: var(--brutto-tenue); border-color: var(--brutto); color: var(--brutto); }
.avviso.nota { background: var(--accento-tenue); border-color: var(--accento); color: var(--accento); }

/* ----------------------------------------------------------- moduli */

form.modulo { display: flex; flex-direction: column; gap: 14px; }

label { display: block; font-size: .9rem; color: var(--tenue); margin-bottom: 4px; }
label .obbligatorio { color: var(--brutto); }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  color: var(--testo);
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--accento-tenue);
  border-color: var(--accento);
}

.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* spunte delle aziende di un'anagrafica condivisa: bersagli grossi,
   si usano dal telefono come tutto il resto */
.spunte { display: flex; flex-wrap: wrap; gap: 8px; }
.spunte .spunta {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--bordo); border-radius: 10px;
  font-weight: 500; cursor: pointer;
}
.spunte .spunta:has(input:checked) {
  border-color: var(--accento); background: var(--accento-tenue);
}
.spunte .spunta input { width: auto; margin: 0; }

fieldset { border: 0; padding: 0; margin: 0; }
fieldset legend { font-size: .9rem; color: var(--tenue); margin-bottom: 6px; padding: 0; }

/* scelte a bottone: piu' facili del menu a tendina con le dita */
.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelte label {
  margin: 0;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 11px 16px;
  background: var(--carta);
  color: var(--testo);
  cursor: pointer;
  font-size: .95rem;
}
.scelte input { position: absolute; opacity: 0; width: 0; height: 0; }
.scelte input:checked + span { font-weight: 700; }
.scelte label:has(input:checked) {
  background: var(--accento);
  border-color: var(--accento);
  color: #fff;
}
.scelte label:has(input:focus-visible) { outline: 3px solid var(--accento-tenue); }

.interruttore { display: flex; align-items: center; gap: 10px; }
.interruttore input { width: 22px; height: 22px; }
.interruttore label { margin: 0; color: var(--testo); font-size: 1rem; }

/* ---------------------------------------------------------- bottoni */

.bottone, button.bottone, a.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 20px;
  border: 1px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--accento);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bottone.largo { width: 100%; }
.bottone.secondario { background: var(--carta); color: var(--accento); }
.bottone.pericolo { background: var(--carta); color: var(--brutto); border-color: var(--brutto); }
.bottone.piccolo { min-height: 40px; padding: 6px 12px; font-size: .85rem; font-weight: 500; }
.bottone:disabled { opacity: .5; cursor: not-allowed; }

.azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.azioni form { display: inline; }

/* ---------------------------------------------------------- elenchi */

.filtri {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: var(--spazio);
}
.filtri .cresce { flex: 1 1 180px; }
.filtri select, .filtri input { min-height: 48px; }

.schede { display: flex; flex-direction: column; gap: 10px; }

.scheda {
  display: block;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 12px 14px;
  text-decoration: none;
  color: var(--testo);
}
.scheda:hover { border-color: var(--accento); }
.scheda .capo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.scheda .numero { font-weight: 700; font-variant-numeric: tabular-nums; }
.scheda .sotto { color: var(--tenue); font-size: .88rem; margin-top: 2px; }

.etichetta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 1px solid var(--bordo);
  color: var(--tenue);
  white-space: nowrap;
}
.etichetta.aperta { background: var(--buono-tenue); color: var(--buono); border-color: var(--buono); }
.etichetta.sospesa { background: var(--brutto-tenue); color: var(--avviso); border-color: var(--avviso); }
.etichetta.chiusa { background: transparent; }
.etichetta.fatturata { background: var(--accento-tenue); color: var(--accento); border-color: var(--accento); }
.etichetta.azienda { background: var(--accento-tenue); color: var(--accento); border-color: var(--accento); }
/* chi ha un accesso collegato e chi no: si legge di sfuggita, scorrendo
   l'elenco della squadra, senza aprire nessuna scheda */
.etichetta.collegato { background: var(--buono-tenue); color: var(--buono); border-color: var(--buono); }
.etichetta.scollegato { background: var(--brutto-tenue); color: var(--brutto); border-color: var(--brutto); }

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

.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella th {
  text-align: left;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tenue);
  border-bottom: 1px solid var(--bordo);
  padding: 8px 6px;
  font-weight: 600;
}
.tabella td { padding: 10px 6px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scorre { overflow-x: auto; }

/* -------------------------------------------------------- prospetti */

.dati { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .95rem; }
.dati dt { color: var(--tenue); }
.dati dd { margin: 0; }

.cifre { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cifra {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 12px;
}
.cifra .valore { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cifra .nome { font-size: .78rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.cifra.positivo .valore { color: var(--buono); }
.cifra.negativo .valore { color: var(--brutto); }
.cifra.larga { grid-column: 1 / -1; }

/* ------------------------------------------------------------ piede */

.piede {
  max-width: 900px;
  margin: 2rem auto 0;
  padding: 0 var(--spazio) 2rem;
  color: var(--tenue);
  font-size: .8rem;
  text-align: center;
}

/* ---------------------------------------------------------- accesso */

.accesso {
  max-width: 380px;
  margin: 8vh auto;
  padding: var(--spazio);
}
.accesso .marchio-grande {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--marchio);
}
@media (prefers-color-scheme: dark) {
  .accesso .marchio-grande { color: var(--accento); }
}

/* ---------------------------------------------------------- monitor */

@media (min-width: 700px) {
  body { padding-bottom: 0; }
  .cifre { grid-template-columns: repeat(4, 1fr); }
  .coppia.tre { grid-template-columns: repeat(3, 1fr); }
  main { padding: calc(var(--spazio) * 1.5); }
}

@media (prefers-reduced-motion: no-preference) {
  .scheda, .bottone { transition: border-color .12s ease, background .12s ease; }
}

/* ------------------------------------------- la pagina del tecnico (007)

   Regola unica: si usa con una mano, in cantiere, con i guanti. Quindi
   un bersaglio solo, grande, al centro dello schermo, e nessuna conferma
   da dare. Tutto il resto della pagina puo' essere piccolo, quello no. */

.timbro { margin: 0 0 var(--spazio); }

.tastone {
  width: 100%;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 20px;
  font: inherit;
  color: #fff;
  cursor: pointer;
  padding: 20px;
  -webkit-tap-highlight-color: transparent;
}
.tastone .verbo { font-size: 1.7rem; font-weight: 800; letter-spacing: .01em; }
.tastone .sotto-verbo { font-size: .95rem; opacity: .85; }
.tastone:active { filter: brightness(.9); }
.tastone.entra { background: #1c6b45; box-shadow: 0 4px 0 #145234; }
.tastone.esci  { background: #a32020; box-shadow: 0 4px 0 #7d1818; }
.tastone:focus-visible { outline: 4px solid var(--accento); outline-offset: 3px; }

/* tre numeri sempre in fila, anche sul telefono stretto: sono il punto
   di tutta la pagina e non devono andare a capo */
.cifre.tre-numeri { grid-template-columns: repeat(3, 1fr); }
.cifre.tre-numeri .valore { font-size: 1.2rem; }

/* gli orari di una timbratura, correggibili sul posto */
.orari { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.orari label { font-size: .78rem; }
.orari input { min-height: 44px; padding: 6px 8px; }

/* i moduli in linea della pagina delle ore mancanti: mettere le ore o la
   causale senza cambiare pagina */
.in-linea { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.in-linea form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.in-linea select, .in-linea input { min-height: 44px; width: auto; min-width: 130px; }
.in-linea select { max-width: 260px; }

details.carta > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accento);
  list-style-position: inside;
}

@media (min-width: 700px) {
  .cifre.tre-numeri { grid-template-columns: repeat(3, 1fr); }
  .cifre.tre-numeri .valore { font-size: 1.35rem; }
}

/* a schermo intero (aggiunto alla schermata iniziale) la testata deve
   stare sotto la tacca del telefono */
@media (display-mode: standalone) {
  .testata { padding-top: max(calc(var(--spazio) * 0.75), env(safe-area-inset-top)); }
  body { padding-bottom: max(3rem, env(safe-area-inset-bottom)); }
}

/* ------------------------------------ composizione preventivi (014)

   La casella di ricerca e' il punto della faccenda: mentre si sceglie un
   articolo bisogna vedere, senza cliccare niente, quanto lo si e' pagato
   le ultime tre volte, quanto costa a listino e che margine ne esce. */

.cerca { margin-bottom: 12px; }
.cerca .q { width: 100%; min-height: 52px; font-size: 1.05rem; }
.cerca .esiti { max-height: 460px; overflow-y: auto; margin-top: 8px; }

.esito {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--carta);
}
.esito:hover { border-color: var(--accento); }
.esito.scelto { border-color: var(--accento); background: var(--accento-tenue); }
.esito .capo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.esito .capo .prezzo { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.esito .colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.esito .colonne .nome {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue);
}
.esito ul { margin: 2px 0; padding-left: 18px; font-size: .85rem; }
.esito .margine { font-weight: 600; margin-top: 6px; }
.esito .positivo { color: var(--buono); }
.esito .negativo { color: var(--brutto); }

@media (max-width: 640px) {
  .esito .colonne { grid-template-columns: 1fr; }
}

/* le sezioni del preventivo */
.sezione { border-left: 4px solid var(--accento); }
.riga-testo td { background: var(--sfondo); }
.capitolato { white-space: pre-wrap; font-size: .9rem; line-height: 1.5; }
.capitolato-sommario { cursor: pointer; font-size: .88rem; color: var(--tenue); }

/* quello che non si stampa: costi e margini. Sfondo diverso perche' si
   veda a colpo d'occhio che e' roba nostra e non del cliente. */
.interno { background: var(--accento-tenue); }
td.interno, th.interno { background: var(--accento-tenue); }
.carta.interno { border-color: var(--accento); }

details.aggiungi > summary {
  cursor: pointer; font-weight: 600; color: var(--accento);
  padding: 8px 0; list-style-position: inside;
}


/* Una riga che il lettore non ha capito bene si vede subito: e' quella da
   guardare col documento aperto accanto. */
.riga-incerta { background: #fff6f5; }
.riga-incerta td { border-top: 1px solid var(--brutto); }


/* Il numero delle cose da sistemare, nel menu: si vede senza gridare. */
.pallino {
  display: inline-block; min-width: 1.15em; padding: 0 .35em;
  border-radius: 999px; background: var(--brutto); color: #fff;
  font-size: .78rem; font-weight: 700; line-height: 1.5; text-align: center;
}

/* ------------------------------------- la zona dove si lasciano i file

   In ufficio le bolle arrivano a mazzi: si trascinano dentro tutte
   insieme, PDF e XML mescolati, e che file sia lo decide il contenuto.
   Il campo `input` c'e' sotto e funziona da solo: se il JavaScript non
   parte, resta un campo file normale con `multiple`. */

.zona-file {
  display: block;
  margin: 0;
  padding: 28px var(--spazio);
  border: 2px dashed var(--bordo);
  border-radius: var(--raggio);
  background: var(--sfondo);
  text-align: center;
  cursor: pointer;
}
.zona-file input[type=file] {
  /* si nasconde ma resta raggiungibile da tastiera: e' l'etichetta che
     lo apre, e senza JavaScript e' l'unico modo di scegliere i file */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.zona-file .invito { display: block; color: var(--tenue); }
.zona-file .invito b { color: var(--testo); display: block; margin-bottom: 4px; }
.zona-file:hover, .zona-file.sopra {
  border-color: var(--accento);
  background: var(--accento-tenue);
}
.zona-file.con-file { border-style: solid; border-color: var(--accento); }
.zona-file:has(input:focus-visible) { outline: 3px solid var(--accento-tenue); }

.scelti { margin: 8px 0 0; padding-left: 20px; font-size: .88rem; color: var(--tenue); }
.scelti li { font-variant-numeric: tabular-nums; }

/* ------------------------------------------- griglia di caricamento

   Una voce = **una riga**, come un foglio di calcolo. Il vincolo che
   comanda su tutto: **tutto sta nella larghezza dello schermo**, senza
   scorrimento orizzontale. Da li' viene tutto il resto.

   `table-layout: fixed` non e' un dettaglio: senza, il browser allarga
   le colonne in base al contenuto e la riga piu' lunga spinge fuori
   tutte le altre. Con le larghezze dichiarate sulle intestazioni, la
   **descrizione** e' l'unica senza larghezza — e in una tabella fissa
   una colonna senza larghezza si prende quello che avanza.

   Le colonne che si nascondono spariscono con `display: none` su
   intestazione e celle insieme: la tabella si ricalcola da sola e la
   descrizione si riprende lo spazio. Nascondere il `<col>` invece non
   funziona dappertutto, e non si fa.

   I campi non hanno bordo e riempiono la cella: il bordo lo fa la
   griglia. Il fuoco pero' si deve vedere da lontano — chi carica una
   bolla guarda il foglio di carta, non lo schermo — e per questo la
   cella attiva prende un contorno pieno e un fondo diverso.

   Le righe sono **fitte ma leggibili**: 30 pixel di altezza e il corpo
   del testo appena sotto quello normale. Rimpicciolire il carattere per
   far tornare i conti e' il modo di ottenere una tabella che nessuno
   riesce a leggere per otto ore di seguito.                          */

.griglia { table-layout: fixed; font-size: .9rem; }

.griglia thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--carta);
  padding: 6px 6px;
  white-space: nowrap;
}

.griglia td { padding: 0; vertical-align: middle; height: 30px; }
.griglia td.testo { padding: 6px; }

.griglia input[type=text], .griglia select {
  width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 2px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: .9rem;
}
.griglia select { padding: 2px 2px; }
.griglia input:focus, .griglia select:focus {
  outline: 2px solid var(--accento);
  outline-offset: -2px;
  background: var(--carta);
  border-radius: 3px;
}
/* i numeri stanno a destra e incolonnati, i codici e le descrizioni a
   sinistra: e' la prima cosa che rende leggibile una colonna di cifre */
.griglia .num input, .griglia td.num, .griglia th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.griglia td.calcolata {
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--testo);
  background: var(--sfondo);
}
/* le due colonne interne restano tinte anche quando sono calcolate: e'
   il segno che quel numero non si stampa */
.griglia td.calcolata.interno { background: var(--accento-tenue); }

/* la descrizione e' l'unica elastica: si taglia con i puntini e non va
   mai a capo, altrimenti la riga cresce e la griglia non e' piu' una
   griglia. Per intero si legge passandoci sopra (`title`). */
.griglia .c-des input {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* `max-width: 0` sulle celle del corpo e del piede — **non** su quelle
   dell'intestazione, che in una tabella fissa sono quelle che decidono
   le larghezze. Serve a far funzionare i puntini: senza, la cella si
   allarga per contenere il testo e la colonna elastica non e' piu'
   elastica. */
.griglia tbody td.c-des,
.griglia tfoot th.c-des { max-width: 0; overflow: hidden; }
.griglia .c-des .testo-fermo {
  display: block;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* il totale di sezione sta su **una riga**, come tutte le altre: era
   incolonnato dentro una cella stretta e usciva su otto righe. Il testo
   per esteso resta nel `title`. */
.griglia tfoot th { font-weight: 600; white-space: nowrap; }
.griglia tfoot th.c-des { font-weight: 500; color: var(--tenue); }

/* le larghezze vere, tarate sul contenuto: un progressivo di tre cifre,
   un codice da quindici caratteri, una quantita' da sei. */
.griglia th.c-n   { width: 34px; }
.griglia th.c-cod { width: 106px; }
.griglia th.c-nat { width: 106px; }
.griglia th.c-qta { width: 76px; }
.griglia th.c-um  { width: 52px; }
.griglia th.c-prz { width: 92px; }
.griglia th.c-sc  { width: 58px; }
.griglia th.c-iva { width: 58px; }
.griglia th.c-cos { width: 92px; }
.griglia th.c-imp { width: 98px; }
.griglia th.c-mar { width: 98px; }
.griglia th.c-az  { width: 68px; }

/* le colonne che si aprono a comando. Il comando e' una spunta, e non
   ricarica niente: cambia una classe sulla tabella. */
.griglia:not(.con-iva) th.c-iva,
.griglia:not(.con-iva) td.c-iva { display: none; }
.griglia:not(.con-interno) th.c-cos,
.griglia:not(.con-interno) td.c-cos,
.griglia:not(.con-interno) th.c-mar,
.griglia:not(.con-interno) td.c-mar { display: none; }

.griglia tr.nuova td { background: var(--accento-tenue); }
.griglia tr.nuova input::placeholder { color: var(--tenue); }

.griglia .azioni-riga { display: flex; gap: 2px; padding: 0 4px; }
.griglia .azioni-riga button {
  min-height: 26px;
  padding: 2px 6px;
  font-size: .85rem;
  line-height: 1;
}

.colonne-in-piu {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--tenue);
  margin: 0 0 6px;
}
.colonne-in-piu label { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.colonne-in-piu input { width: auto; min-height: 0; }

@media (max-width: 900px) {
  /* sotto questa larghezza una griglia di dodici colonne non ci sta
     comunque: si torna alla lettura per blocchi, che sul telefono e'
     l'unica cosa usabile. La pagina resta, la griglia no. */
  .griglia thead { display: none; }
  .griglia, .griglia tbody, .griglia tr, .griglia td { display: block; width: auto; }
  .griglia tr { border-bottom: 1px solid var(--bordo); padding: 6px 0; }
  .griglia td { height: auto; }
  .griglia td.c-des input { text-overflow: clip; }
}

/* --------------------------------------- la striscia della manodopera

   Sta al piede della sezione, **fuori** dalla griglia e sotto di essa:
   le ore non sono una colonna, sono un modo diverso di scrivere le
   stesse righe. Una riga sola — non un riquadro — perche' lo spazio
   verticale in una maschera di caricamento e' quello che manca sempre.

   Si battono **solo le ore**: prezzo e costo dell'ora sono anagrafica e
   stanno scritti accanto al nome, in piccolo, cosi' si vede cosa si sta
   per mettere in offerta senza aprire niente.                        */

.manodopera {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--sfondo);
  font-size: .85rem;
}
.manodopera .dove {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tenue);
}
.manodopera .figura {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--carta);
}
.manodopera .figura .nome { font-weight: 600; color: var(--testo); }
.manodopera .figura .tariffa { color: var(--tenue); font-size: .78rem; white-space: nowrap; }
/* una figura a cui manca il prezzo o il costo si vede prima di batterci
   dentro le ore, non dopo aver guardato il margine */
.manodopera .figura.incompleta { border-color: var(--avviso); }
.manodopera .figura.incompleta .tariffa b { color: var(--avviso); }
.manodopera .figura input {
  width: 68px;
  min-height: 30px;
  padding: 2px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.manodopera .totali-manodopera {
  margin-left: auto;
  display: flex;
  gap: 14px;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.manodopera .totali-manodopera b { color: var(--testo); }

/* ------------------------------- testata di una scheda-documento

   **Una riga, non un terzo di schermo.** Un preventivo o una fattura
   hanno tre numeri che servono mentre si lavora — quanto si offre,
   quanto costa, quanto ci si guadagna — e venti che servono una volta
   sola, alla fine. I venti stanno in un pannello che si apre a
   richiesta; i tre stanno qui, e **restano fermi mentre si scorre**,
   cosi' si vede come si sta andando riga dopo riga invece di scorrere
   in cima ogni volta.

   E' l'impostazione delle schede-documento, non una scelta di questa
   pagina: la testata e' una riga, il dettaglio si apre a richiesta.  */

.testata-documento {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.testata-documento .numero { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.testata-documento .cliente {
  color: var(--tenue);
  min-width: 0;
  flex: 1 1 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testata-documento .numeri { display: flex; gap: 16px; align-items: baseline; }
.testata-documento .dato { display: flex; flex-direction: column; line-height: 1.15; }
.testata-documento .dato .nome {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tenue);
}
.testata-documento .dato .valore {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* il dato interno si vede che e' interno: non si stampa, e chi guarda lo
   schermo insieme al cliente deve accorgersene senza leggere */
.testata-documento .dato.interno {
  padding: 0 6px;
  border-left: 2px solid var(--accento);
  background: var(--accento-tenue);
  border-radius: 4px;
}
.testata-documento .dato.positivo .valore { color: var(--buono); }
.testata-documento .dato.negativo .valore { color: var(--brutto); }

.dettaglio-documento { margin-left: auto; }
.dettaglio-documento > summary {
  cursor: pointer;
  font-size: .8rem;
  color: var(--accento);
  padding: 4px 10px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  white-space: nowrap;
  list-style: none;
}
.dettaglio-documento > summary::-webkit-details-marker { display: none; }
.dettaglio-documento > summary::after { content: " ▾"; }
.dettaglio-documento[open] > summary::after { content: " ▴"; }
.dettaglio-documento .pannello {
  position: absolute;
  right: var(--spazio);
  z-index: 6;
  margin-top: 8px;
  padding: 12px;
  min-width: 380px;
  max-width: min(560px, 92vw);
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.dettaglio-documento .pannello .dati { margin-bottom: 10px; }

/* le azioni di stato: in fondo alla pagina, piccole, in fila. Non un
   riquadro loro: si usano una volta sola nella vita del documento. */
.azioni-documento {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordo);
}
.azioni-documento form { display: flex; gap: 6px; align-items: center; }
.azioni-documento input[type=text] { min-height: 36px; }

/* la testata ferma e l'intestazione della griglia ferma non si devono
   coprire: la griglia si ferma sotto la testata */
.testata-documento ~ * .griglia thead th { top: 52px; }

/* quello che c'e' gia' a scaffale, dentro un esito di ricerca */
.esito .a-scaffale {
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--buono-tenue);
  color: var(--buono);
  font-size: .82rem;
  display: inline-block;
}