/* Il sistema visivo di Argo — nato dal marchio, non da un modello preso altrove.
 *
 * L'idea: le schermate di Argo somigliano ai DISEGNI che i suoi utenti guardano
 * tutto il giorno. Filetti sottili, scritte tecniche in maiuscolo, valori in
 * carattere a larghezza fissa, e il CARTIGLIO — il riquadro che sta in basso a
 * destra su ogni tavola, con commessa, revisione e data. Non e' decorazione: e'
 * l'oggetto piu' familiare del loro mestiere.
 *
 * ⚠️ Due mondi, di proposito:
 *   - L'INGRESSO e' scuro, come il marchio: e' la soglia, e si ricorda.
 *   - Il LAVORO sara' chiaro: dentro ci vanno i disegni, che sono carta bianca.
 *     Un disegno su fondo nero non si legge come lo legge chi lo stampa.
 */

:root {
  /* Dal marchio, misurati: non ce n'e' uno scelto a occhio. */
  --fondo:       #10202B;   /* blu-nero marino, il fondo dell'icona */
  --fondo-alto:  #16303F;   /* la superficie sollevata */
  --carta:       #F2EFE9;   /* bianco caldo, il segno dell'icona */
  --tenue:       #90A6B6;   /* testo secondario */
  --fioco:       #64798A;   /* etichette, unita', note */
  --linea:       #2B4459;   /* i filetti del disegno */
  --reticolo-fine:    #16293607;  /* quasi invisibile: si sente, non si guarda */
  --reticolo-marcato: #1B33440F;
  --ossido:      #C4553F;   /* l'accento: la matita rossa sulle misure */
  --ossido-alto: #DC6E56;
  --verde:       #4E9A78;   /* fatto */
  --ambra:       #C79A3E;   /* da guardare */

  --tocco: 48px;            /* ⚠️ il bersaglio minimo: a bordo si tocca CON I GUANTI */
  --filetto: 1px;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--carta);
  font: 16px/1.6 "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Le tre voci della tipografia ─────────────────────────────────────────
 * Condensata maiuscola per le ETICHETTE: e' la scrittura dei cartigli.
 * Plex Sans per il testo. Plex Mono per i VALORI: sigle, revisioni, misure —
 * cose che si leggono in colonna e devono incolonnarsi.                    */
.etichetta {
  font-family: "Barlow Condensed", "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fioco);
}
.valore {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Il foglio: fondo a griglia da carta millimetrata, quasi invisibile ─── */
.foglio {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  /* Carta millimetrata: reticolo fine, e una linea marcata ogni cinque — come la
     carta vera. ⚠️ Al primo giro era un reticolo da 96px in tinta piena: sembrava
     una fantasia da fondale, non carta da disegno. Qui il fine e' quasi invisibile
     e il marcato appena percettibile: si sente, non si guarda. */
  background-image:
    linear-gradient(var(--reticolo-fine) var(--filetto), transparent var(--filetto)),
    linear-gradient(90deg, var(--reticolo-fine) var(--filetto), transparent var(--filetto)),
    linear-gradient(var(--reticolo-marcato) var(--filetto), transparent var(--filetto)),
    linear-gradient(90deg, var(--reticolo-marcato) var(--filetto), transparent var(--filetto));
  background-size: 18px 18px, 18px 18px, 90px 90px, 90px 90px;
  background-position: center;
}
.foglio > * { -webkit-mask-image: none; mask-image: none; }

/* ── La tavola: il riquadro dove si lavora ────────────────────────────── */
.tavola {
  width: 100%;
  max-width: 430px;
  background: var(--fondo-alto);
  border: var(--filetto) solid #34526B;
  box-shadow: 0 30px 70px -34px #000, 0 0 0 6px #0D1A23;
}

/* ── Il cartiglio: la striscia in basso, come su ogni tavola vera ─────── */
.tavola > .corpo { padding: 34px 34px 30px; }

.cartiglio {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  border-top: var(--filetto) solid var(--linea);
  padding: 12px 34px 14px;
}
.cartiglio .voce { display: flex; flex-direction: column; gap: 2px; }
.cartiglio .valore { font-size: 12px; color: var(--tenue); }

/* ── I campi ──────────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.campo input {
  min-height: var(--tocco);
  padding: 0 14px;
  background: var(--fondo);
  border: var(--filetto) solid var(--linea);
  color: var(--carta);
  font: 16px/1 "IBM Plex Sans", sans-serif;   /* 16px: sotto, iOS ingrandisce da solo */
  border-radius: 0;                            /* i disegni non hanno angoli tondi */
}
/* ⚠️ Il fuoco NON e' rosso: il rosso qui vuol dire «guarda questo, c'e' un
   problema». Un campo che si illumina di rosso appena apri la pagina sembra un
   errore prima ancora che tu abbia scritto qualcosa. */
.campo input:focus-visible {
  outline: 2px solid var(--carta);
  outline-offset: 1px;
  border-color: var(--carta);
}
.campo input::placeholder { color: var(--fioco); }

button.entra {
  width: 100%;
  min-height: var(--tocco);
  margin-top: 6px;
  background: var(--ossido);
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
button.entra:hover { background: var(--ossido-alto); }
button.entra:focus-visible { outline: 2px solid var(--carta); outline-offset: 2px; }

/* ── L'avviso d'errore: dice cosa è successo e cosa fare ──────────────── */
.avviso {
  border-left: 3px solid var(--ossido);
  background: color-mix(in srgb, var(--ossido) 12%, transparent);
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 14.5px;
}

/* ── Il segno in cima ─────────────────────────────────────────────────── */
.testata { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.testata svg { width: 46px; height: 46px; flex: none; }
.testata h1 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 34px;
  letter-spacing: .04em;
  line-height: 1;
}
.testata p { margin: 3px 0 0; font-size: 13.5px; color: var(--tenue); }

/* ── Il plotter: i filetti si disegnano, una volta sola, all'apertura ──── */
@media (prefers-reduced-motion: no-preference) {
  .tavola { animation: tira-il-filetto .45s ease-out both; }
  @keyframes tira-il-filetto {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * IL LAVORO — la superficie chiara
 *
 * L'ingresso qui sopra e' scuro perche' e' la soglia. Da qui in poi si sta su
 * CARTA: dentro ci vanno disegni, sigle, tabelle di targhette, cose che chi
 * lavora stampa e porta a bordo. Un disegno su fondo nero non si legge come lo
 * legge chi lo tiene in mano.
 *
 * ⚠️ Non e' un secondo sistema grafico: sono gli STESSI token con i ruoli
 * ribaltati. --carta resta «il segno», --fondo resta «il supporto». Cosi ogni
 * componente gia' scritto (campi, bottoni, cartiglio) funziona di la' e di qua
 * senza una riga in piu'.
 * ══════════════════════════════════════════════════════════════════════════ */
body.lavoro {
  --fondo:       #F2EFE9;
  --fondo-alto:  #FBFAF7;
  --carta:       #10202B;
  --tenue:       #45606F;
  --fioco:       #7A8C97;
  --linea:       #CBD5DA;
  --reticolo-fine:    #10202B08;
  --reticolo-marcato: #10202B12;
}

/* ── Il ponte: la barra in cima, sempre uguale, sempre nello stesso posto ── */
.ponte {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  min-height: 62px;
  border-bottom: var(--filetto) solid var(--linea);
  background: var(--fondo-alto);
}
.ponte svg { width: 30px; height: 30px; flex: none; }
.ponte .nome {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 25px; letter-spacing: .04em; line-height: 1;
}
.ponte .azienda {
  padding-left: 14px; margin-left: 4px;
  border-left: var(--filetto) solid var(--linea);
  font-size: 14px; color: var(--tenue);
}
.ponte .spinta { margin-left: auto; }
.ponte form { margin: 0; }
.ponte .esci {
  min-height: 40px; padding: 0 16px;
  background: none; border: var(--filetto) solid var(--linea); border-radius: 0;
  color: var(--tenue); cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
}
.ponte .esci:hover { border-color: var(--carta); color: var(--carta); }
.ponte .esci:focus-visible { outline: 2px solid var(--carta); outline-offset: 2px; }

/* ── Il banco: la colonna di lavoro sul reticolo ─────────────────────────── */
.banco {
  min-height: calc(100dvh - 62px);
  padding: 34px 20px 60px;
  background-image:
    linear-gradient(var(--reticolo-fine) var(--filetto), transparent var(--filetto)),
    linear-gradient(90deg, var(--reticolo-fine) var(--filetto), transparent var(--filetto)),
    linear-gradient(var(--reticolo-marcato) var(--filetto), transparent var(--filetto)),
    linear-gradient(90deg, var(--reticolo-marcato) var(--filetto), transparent var(--filetto));
  background-size: 18px 18px, 18px 18px, 90px 90px, 90px 90px;
}
.banco > * { max-width: 1080px; margin-inline: auto; }

.intestazione { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 22px; }
.intestazione h1 {
  margin: 4px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 32px; letter-spacing: .03em; line-height: 1;
}
.intestazione .conto { margin-left: auto; }

/* ── Il registro: l'elenco si legge come l'indice di una tavola ─────────────
 * ⚠️ Non schede affiancate. Chi fa questo mestiere legge elenchi incolonnati
 * tutto il giorno: matricole, sigle, revisioni. Le colonne si confrontano a
 * colpo d'occhio, i riquadri no.                                            */
.registro { background: var(--fondo-alto); border: var(--filetto) solid var(--linea); }
.registro a.riga {
  display: grid;
  grid-template-columns: 46px 1fr 190px 150px;
  gap: 0 18px;
  align-items: center;
  min-height: 64px;                    /* piu' del bersaglio minimo: si tocca coi guanti */
  padding: 10px 18px;
  border-top: var(--filetto) solid var(--linea);
  color: inherit; text-decoration: none;
}
.registro a.riga:first-child { border-top: none; }
.registro a.riga:hover { background: color-mix(in srgb, var(--ossido) 6%, transparent); }
.registro a.riga:focus-visible { outline: 2px solid var(--carta); outline-offset: -2px; }
.registro .indice { font-size: 13px; color: var(--fioco); }
.registro .capo { font-weight: 600; font-size: 17px; }
.registro .sotto { font-size: 13.5px; color: var(--tenue); }
.registro .colonna { display: flex; flex-direction: column; gap: 2px; }
.registro .colonna .valore { font-size: 14px; }

/* La pastiglia del conteggio: rossa SOLO quando c'e' lavoro aperto. */
.pastiglia {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
}
.pastiglia::before {
  content: ""; width: 8px; height: 8px; flex: none;
  background: var(--ossido);
}
.pastiglia.ferma { color: var(--fioco); }
.pastiglia.ferma::before { background: var(--linea); }

/* ── Il vuoto: un invito, non un vicolo cieco ───────────────────────────────
 * ⚠️ Ogni schermata vuota di Argo deve finire con UN gesto possibile. Una
 * pagina che dice «non c'e' niente» e si ferma li' e' il 404 travestito.     */
.vuoto {
  background: var(--fondo-alto);
  border: var(--filetto) dashed var(--linea);
  padding: 46px 30px;
  text-align: center;
}
.vuoto p { max-width: 46ch; margin: 0 auto 22px; color: var(--tenue); }
.vuoto .etichetta { display: block; margin-bottom: 10px; }

/* ── L'azione ───────────────────────────────────────────────────────────── */
.azione {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tocco); padding: 0 22px;
  background: var(--ossido); color: #fff;
  border: none; border-radius: 0; cursor: pointer; text-decoration: none;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
}
.azione:hover { background: var(--ossido-alto); }
.azione:focus-visible { outline: 2px solid var(--carta); outline-offset: 2px; }
.azione.quieta { background: none; color: var(--tenue); border: var(--filetto) solid var(--linea); }
.azione.quieta:hover { color: var(--carta); border-color: var(--carta); background: none; }

/* ── Il modulo di inserimento, sul foglio ──────────────────────────────── */
.modulo { background: var(--fondo-alto); border: var(--filetto) solid var(--linea); padding: 28px; }
.modulo .campo textarea, .modulo .campo select, .modulo .campo input {
  min-height: var(--tocco); padding: 12px 14px;
  background: var(--fondo); border: var(--filetto) solid var(--linea);
  color: var(--carta); border-radius: 0;
  font: 16px/1.4 "IBM Plex Sans", sans-serif;
}
.modulo .campo textarea { min-height: 96px; resize: vertical; }
.modulo .campo .aiuto { font-size: 13px; color: var(--fioco); }
.modulo .campo .sbaglio { font-size: 13.5px; color: var(--ossido); }
.modulo .campo input:focus-visible,
.modulo .campo textarea:focus-visible { outline: 2px solid var(--carta); outline-offset: 1px; }
.modulo .coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.modulo .bottoni { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

/* Il filo di Arianna: da dove sei arrivato, e la via indietro. */
.filo { margin-bottom: 14px; font-size: 14px; }
.filo a { color: var(--tenue); }
.filo a:hover { color: var(--ossido); }

/* Il cartiglio in fondo alla pagina di lavoro: la stessa firma dell'ingresso. */
.banco .cartiglio {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 34px; padding: 14px 0 0;
}

@media (max-width: 720px) {
  .registro a.riga { grid-template-columns: 34px 1fr; row-gap: 8px; }
  .registro .colonna { grid-column: 2; }
  .modulo .coppia { grid-template-columns: 1fr; }
  .banco .cartiglio { grid-template-columns: 1fr 1fr; }
  .intestazione { flex-wrap: wrap; }
}