@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   Criteri di questa interfaccia
   - testo grande (17px di base): si legge senza avvicinarsi allo schermo
   - contrasto alto sul testo, leggero su bordi e sfondi
   - i riquadri galleggiano con un'ombra morbida invece di essere incorniciati
   - un solo colore forte (il verde) per l'azione principale: il resto sta calmo
   - gli stati hanno un colore E una parola, mai solo il colore
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  --bg: #f7f5f0;
  --surface: #ffffff;
  --sunk: #f1ede5;
  --ink: #23201c;
  --ink-2: #57514a;
  --ink-3: #8b847b;
  --rule: #ebe6dc;
  --rule-2: #d8d1c4;
  --accent: #0f6b5c;
  --accent-chiaro: #e4f2ee;
  --blu: #1e5f9e;
  --blu-chiaro: #e8f0f9;
  --verde: #1f7a52;
  --verde-chiaro: #e4f3ea;
  --rosso: #b23f22;
  --rosso-chiaro: #fbeae3;
  --ambra: #8a6410;
  --ambra-chiaro: #fcf1da;
  --ombra: 0 1px 2px rgba(60, 50, 35, .05), 0 3px 10px rgba(60, 50, 35, .05);
  --ombra-alta: 0 2px 4px rgba(60, 50, 35, .06), 0 14px 32px rgba(60, 50, 35, .09);
  --raggio: 14px;
  --raggio-piccolo: 9px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #171512; --surface: #221f1a; --sunk: #2c2822;
    --ink: #f6f2ea; --ink-2: #c7c0b4; --ink-3: #978f84;
    --rule: #332e27; --rule-2: #474036;
    --accent: #4fc9ad; --accent-chiaro: #10332c;
    --blu: #84b6ef; --blu-chiaro: #152840;
    --verde: #5ac68b; --verde-chiaro: #133022;
    --rosso: #f1906f; --rosso-chiaro: #3a2019;
    --ambra: #e2b656; --ambra-chiaro: #332a14;
    --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .3);
    --ombra-alta: 0 2px 6px rgba(0, 0, 0, .4), 0 14px 32px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blu); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- barra in alto ---------- */
.barra {
  display: flex; align-items: center; gap: 28px;
  padding: 12px 28px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
.marchio { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.barra nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.barra nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-size: 16.5px; font-weight: 500;
}
.barra nav a:hover { background: var(--sunk); color: var(--ink); }
.barra nav a.attivo { background: var(--ink); color: var(--bg); font-weight: 600; }
.chi { font-size: 15px; color: var(--ink-3); }

main { max-width: 1240px; margin: 0 auto; padding: 32px 28px 90px; }
.respiro { color: var(--ink-3); font-size: 16px; margin: -8px 0 26px; }

/* ---------- riquadri dei numeri ---------- */
.numeri {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 14px; margin-bottom: 30px;
}
.n {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--raggio); padding: 17px 18px 18px;
  display: flex; flex-direction: column; box-shadow: var(--ombra);
}
.n[hidden] { display: none !important; }
.n-lab { font-size: 14.5px; color: var(--ink-3); font-weight: 500; }
/* Sei riquadri devono stare su una riga sola: il numero resta il pezzo grosso
   della casella, ma non tanto da mandare a capo l'ultima. */
.n-val {
  font-weight: 700; font-size: 34px; line-height: 1.05;
  margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.n-val.allarme { color: var(--rosso); }
.n-nota { font-size: 15px; color: var(--ink-3); margin-top: 6px; }

/* ---------- linguette ---------- */
.strumenti {
  display: flex; flex-wrap: wrap; gap: 18px;
  justify-content: space-between; align-items: center; margin-bottom: 22px;
}
.linguette { display: flex; flex-wrap: wrap; gap: 5px; background: var(--sunk); padding: 5px; border-radius: 999px; }
.linguette a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  font-size: 16px; color: var(--ink-2); font-weight: 500;
}
.linguette a:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.linguette a.attivo { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--ombra); }
.conta {
  font-size: 14.5px; background: color-mix(in srgb, var(--ink-3) 18%, transparent);
  color: var(--ink-2); padding: 1px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
}

/* Dentro la linguetta scelta il fondo diventa quasi nero, e un grigio pensato
   per il chiaro li' dentro sparisce. Si ribalta: chiaro su scuro. */
.barra nav a.attivo .conta {
  background: color-mix(in srgb, var(--bg) 28%, transparent);
  color: var(--bg);
}

/* ---------- campi e bottoni ---------- */
input, select, textarea, button {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--rule-2);
  border-radius: var(--raggio-piccolo); padding: 10px 13px;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { width: 100%; resize: vertical; line-height: 1.55; }
button { cursor: pointer; font-weight: 600; }
button:hover { background: var(--sunk); }
button:disabled { opacity: .5; cursor: wait; }

.cerca, .filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cerca input[type=search] { min-width: 280px; }
.cerca button, .filtri button {
  background: var(--ink); color: var(--bg); border-color: var(--ink); padding: 10px 22px;
}
.cerca button:hover, .filtri button:hover { background: var(--ink-2); border-color: var(--ink-2); }
.spunta { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-2); }
.spunta input { width: auto; transform: scale(1.3); }

/* ---------- avvisi ---------- */
.suggerimento {
  background: var(--blu-chiaro); border: 0; border-left: 4px solid var(--blu);
  border-radius: var(--raggio-piccolo); padding: 15px 20px; font-size: 16.5px;
  margin: 0 0 24px; line-height: 1.55; color: var(--ink-2);
}
.suggerimento a { color: var(--blu); font-weight: 600; }
.suggerimento button {
  background: none; border: 0; padding: 0; color: var(--blu);
  text-decoration: underline; font-size: inherit; font-weight: 600;
}
.suggerimento strong, .suggerimento b { color: var(--ink); }

.conteggio { font-size: 17px; color: var(--ink-2); margin: 0 0 18px; }
.spiega { color: var(--ink-2); max-width: 70ch; margin: -8px 0 20px; font-size: 16px; }

/* ---------- schede delle richieste ---------- */
.elenco { display: flex; flex-direction: column; gap: 10px; }
.vuoto {
  color: var(--ink-3); padding: 72px 20px; text-align: center; font-size: 18px;
  background: var(--surface); border: 1px dashed var(--rule-2); border-radius: var(--raggio);
}

.scheda {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--raggio); box-shadow: var(--ombra);
  transition: box-shadow .16s ease;
  position: relative; overflow: hidden;
}
.scheda:hover { box-shadow: var(--ombra-alta); }
/* filetto di stato: dentro il bordo arrotondato, non lo spezza */
.scheda::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--rule-2);
}
.scheda.stato-nuova::before { background: var(--blu); }
.scheda.stato-in_lavorazione::before { background: var(--ambra); }
.scheda.stato-preventivata::before { background: var(--accent); }
.scheda.stato-conclusa::before { background: var(--verde); }
.scheda.stato-persa { background: var(--sunk); box-shadow: none; }

.s-testa {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.s-tratta { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.s-tratta strong { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.s-quando { font-size: 15px; color: var(--ink-3); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.fonte { background: var(--sunk); padding: 3px 11px; border-radius: 999px; color: var(--ink-2); }
.id { opacity: .65; }

.bollo { font-size: 13.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.bollo.azienda { background: var(--blu); color: #fff; }
.bollo.ritardo { background: var(--rosso); color: #fff; }
.bollo.doppione { background: var(--sunk); color: var(--ink-2); }

.s-corpo { padding: 14px 18px 16px; }

.storico-tratta {
  margin: 0 0 12px; padding: 8px 14px; font-size: 15px; line-height: 1.45;
  background: var(--blu-chiaro); border-radius: var(--raggio-piccolo); color: var(--ink-2);
}
.storico-tratta b { color: var(--ink); font-weight: 600; }

/* Le tre domande di una richiesta.
 *
 * Cosa devo spostare, da dove a dove, con chi parlo. Prima erano una fila
 * sola di caselle e per rispondere a una bisognava leggerle tutte. In tre
 * colonne, coi campi uno sotto l'altro, l'occhio va dove serve senza cercare:
 * una colonna larga e mezza vuota si legge peggio di una stretta e piena.
 */
.s-dati { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 28px; }
.s-gruppo { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.s-titoletto {
  margin: 0 0 3px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 5px; border-bottom: 1px solid var(--rule);
}

@media (max-width: 860px) { .s-dati { grid-template-columns: 1fr 1fr; gap: 16px 22px; } }
@media (max-width: 560px) { .s-dati { grid-template-columns: 1fr; gap: 16px; } }
}
.d { display: flex; flex-direction: column; min-width: 0; }
.d-lab { font-size: 13.5px; color: var(--ink-3); line-height: 1.25; }
.d-val { font-size: 15.5px; overflow-wrap: anywhere; font-weight: 600; line-height: 1.3; }
.contatti { display: flex; flex-direction: column; gap: 3px; font-weight: 400; }
.contatti a { font-size: 15.5px; }
.wa { color: var(--verde); font-weight: 600; }
/* "copia numero": sta in mezzo ai recapiti, quindi somiglia a un link e non
   a un bottone — ma si capisce che si preme perché cambia parola. */
.copia-numero {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--verde); font-weight: 600; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.copia-numero:hover { color: var(--ink); }

.s-nota-cliente {
  margin: 12px 0 0; padding: 9px 14px; background: var(--sunk);
  border-radius: var(--raggio-piccolo); font-size: 16px; color: var(--ink-2);
}

.s-azioni {
  display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule);
}
.pulsanti { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-start; }
.btn { padding: 9px 16px; font-size: 15.5px; border-color: var(--rule-2); }
.btn-ok { background: var(--verde); color: #fff; border-color: var(--verde); }
.btn-ok:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-no { color: var(--ink-3); border-color: var(--rule); }

.soldi { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.soldi label { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--ink-3); }
.soldi input { width: 112px; font-variant-numeric: tabular-nums; font-size: 17px; }
.soldi input[type=text] { width: 140px; }
.margine { font-size: 17px; padding-bottom: 9px; white-space: nowrap; }
.margine b { color: var(--verde); font-weight: 700; }
.margine em { color: var(--ink-3); font-style: normal; }

.s-piu { margin-top: 12px; }
.s-piu summary { font-size: 16px; color: var(--blu); cursor: pointer; font-weight: 600; }
.s-piu textarea { margin-top: 13px; font-size: 16px; }
.storico { margin-top: 15px; display: flex; flex-direction: column; }
.ev {
  display: grid; grid-template-columns: 110px 130px 150px 1fr; gap: 14px;
  font-size: 15px; color: var(--ink-3); padding: 7px 0; border-bottom: 1px solid var(--rule);
}
.ev-a { color: var(--ink-2); font-weight: 600; }

.s-esito { display: flex; justify-content: flex-end; min-height: 0; margin-top: 4px; }
.etichetta-stato {
  font-size: 13.5px; font-weight: 600; padding: 3px 12px; border-radius: 999px;
  background: var(--sunk); color: var(--ink-2);
}
.stato-nuova .etichetta-stato { background: var(--blu-chiaro); color: var(--blu); }
.stato-in_lavorazione .etichetta-stato { background: var(--ambra-chiaro); color: var(--ambra); }
.stato-preventivata .etichetta-stato { background: var(--accent-chiaro); color: var(--accent); }
.stato-conclusa .etichetta-stato { background: var(--verde-chiaro); color: var(--verde); }
.motivo { font-size: 16px; color: var(--ink-2); }
.salvato { font-size: 16px; color: var(--verde); font-weight: 600; margin-left: auto; }
.salvato.in-errore { color: var(--rosso); }

/* ---------- tabelle ---------- */
.tbl-scorri { overflow-x: auto; border-radius: var(--raggio); box-shadow: var(--ombra); }
.tabellone {
  width: 100%; border-collapse: collapse; background: var(--surface);
  box-shadow: var(--ombra); border-radius: var(--raggio); overflow: hidden;
}
.tbl-scorri .tabellone { box-shadow: none; }
.tabellone th, .tabellone td {
  padding: 14px 18px; text-align: right; border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums; font-size: 16px;
}
.tabellone th:first-child, .tabellone td:first-child { text-align: left; }
.tabellone th {
  font-weight: 600; color: var(--ink-3); background: transparent;
  border-bottom: 1.5px solid var(--rule-2); font-size: 14.5px; white-space: nowrap;
}
.tabellone tbody tr:last-child td { border-bottom: 0; }
.tabellone tbody tr:hover { background: var(--sunk); }
.tabellone td:first-child { max-width: 340px; }
.elenco-fitto td { font-size: 16px; }
.minuto { font-size: 15px; color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.evidenza { color: var(--rosso); font-weight: 700; }

.etichetta-storico {
  font-size: 13.5px; background: var(--sunk); color: var(--ink-3);
  padding: 3px 11px; border-radius: 999px;
}

h2.sezione { font-size: 27px; font-weight: 700; margin: 46px 0 16px; letter-spacing: -.025em; }
h2.sezione:first-child { margin-top: 0; }
.barretta { display: inline-block; height: 12px; border-radius: 999px; background: var(--blu); min-width: 3px; }

.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

/* ---------- pagine ---------- */
.pagine { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.pagine a {
  padding: 9px 16px; border: 1px solid var(--rule-2); border-radius: var(--raggio-piccolo);
  text-decoration: none; color: var(--ink-2); font-size: 16px; background: var(--surface);
}
.pagine a:hover { border-color: var(--ink-3); }
.pagine a.attivo { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.pagine .tot { margin-left: 14px; font-size: 16px; color: var(--ink-3); }

/* ---------- finestra "persa" ---------- */
dialog {
  border: 0; border-radius: var(--raggio); padding: 0;
  background: var(--surface); color: var(--ink); max-width: 500px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
dialog::backdrop { background: rgba(35, 32, 28, .5); backdrop-filter: blur(3px); }
dialog form { padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 8px; }
dialog h2 { font-size: 23px; margin: 0; font-weight: 700; letter-spacing: -.02em; }
.dlg-nota { font-size: 16px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.55; }
dialog button {
  text-align: left; padding: 13px 17px; font-size: 16px; font-weight: 400;
  border-color: var(--rule); background: var(--surface);
}
dialog button:hover { background: var(--blu-chiaro); border-color: var(--blu); }
dialog .annulla { margin-top: 12px; color: var(--ink-3); text-align: center; border-color: transparent; }

/* ---------- accesso ---------- */
.schermo-accesso { display: grid; place-items: center; min-height: 100vh; }
.riquadro-accesso {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--raggio);
  box-shadow: var(--ombra-alta); padding: 40px 42px 42px; width: min(420px, 92vw);
  display: flex; flex-direction: column; gap: 16px;
}
.riquadro-accesso .marchio { color: var(--ink-3); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.riquadro-accesso h1 { font-size: 31px; margin: 0 0 8px; font-weight: 700; letter-spacing: -.03em; }
.riquadro-accesso label { display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; color: var(--ink-2); }
.riquadro-accesso input { padding: 13px 15px; font-size: 18px; }
.riquadro-accesso button {
  background: var(--accent); color: #fff; border-color: var(--accent);
  padding: 15px; font-size: 18px; margin-top: 10px;
}
.riquadro-accesso button:hover { background: var(--ink); border-color: var(--ink); }
.errore {
  background: var(--rosso-chiaro); color: var(--rosso); border: 0; border-left: 4px solid var(--rosso);
  padding: 13px 16px; border-radius: var(--raggio-piccolo); font-size: 16px; margin: 0; font-weight: 600;
}

@media (max-width: 900px) {
  body { font-size: 16px; }
  main { padding: 24px 18px 80px; }
  .due-colonne { grid-template-columns: 1fr; }
  .ev { grid-template-columns: 1fr; gap: 0; padding: 10px 0; }
  .n-val { font-size: 36px; }
  h2.sezione { font-size: 23px; }
  .linguette { border-radius: var(--raggio-piccolo); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- link per i dati di fatturazione ---------- */
.btn-fattura { border-color: var(--blu); color: var(--blu); }
.btn-fattura:hover { background: var(--blu); color: #fff; }

.riquadro-link {
  margin-top: 14px; padding: 13px 16px; background: var(--blu-chiaro);
  border-radius: var(--raggio-piccolo); font-size: 15.5px;
}
.riquadro-link b { display: block; margin-bottom: 8px; color: var(--ink); }
.link-riga { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 7px; }
.link-riga input {
  flex: 1; min-width: 240px; font-size: 14.5px; padding: 8px 11px;
  background: var(--surface); color: var(--ink-2);
}
.link-riga .btn { padding: 8px 15px; font-size: 15px; text-decoration: none; }
.link-riga a.btn { display: inline-flex; align-items: center; }

.dati-fattura {
  margin-top: 14px; padding: 13px 16px; background: var(--verde-chiaro);
  border-left: 4px solid var(--verde); border-radius: var(--raggio-piccolo); font-size: 15.5px;
}
.dati-fattura > b { color: var(--verde); }
.df-griglia {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--ink-2);
}
.df-griglia span { white-space: nowrap; }

/* ---------- storico del cliente ---------- */
.storico-cliente {
  margin: 0 0 8px; padding: 8px 14px; font-size: 15px; line-height: 1.45;
  background: var(--ambra-chiaro); border-radius: var(--raggio-piccolo); color: var(--ink-2);
}
.storico-cliente > b:first-child { color: var(--ambra); }
.storico-cliente b { color: var(--ink); }
.mai-chiuso { color: var(--rosso); font-weight: 600; }

/* ---------- fatture ---------- */
.bollo.pagata { background: var(--verde); color: #fff; }
.bollo.privato { background: var(--sunk); color: var(--ink-2); }
.bollo.estero { background: var(--blu-chiaro); color: var(--blu); }
/* Il cassetto per correggere i dati della fattura: chiuso, perché quasi
   sempre i dati vanno bene e una pagina di moduli aperti non si guarda. */
.modifica-fattura { margin-top: 12px; }
.modifica-fattura > summary {
  cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--blu);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0;
}
.modifica-fattura > summary::-webkit-details-marker { display: none; }
.modifica-fattura > summary::before { content: "✎"; opacity: .7; }
.modifica-fattura > summary:hover { text-decoration: underline; }
.modulo-fattura {
  margin-top: 10px; padding: 16px; background: var(--sunk);
  border-radius: var(--raggio-piccolo);
}
.modulo-fattura .aiuto { margin: 10px 0 0; }
.modulo-fattura .spunta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; }
.modulo-fattura .submit-riga { margin: 14px 0 0; }

.f-provvisorio {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ambra);
}

/* La scheda di chi fattura: in alto a sinistra l'intestazione, in alto a
   destra l'importo. Sono le due cose con cui si scrive una fattura; tutto il
   resto e' contorno e sta in una riga piccola sotto. */
.scheda.fattura { padding: 18px 22px; }
.f-testa {
  display: flex; gap: 20px 28px; align-items: flex-start; flex-wrap: wrap;
}
.f-chi { flex: 1 1 320px; min-width: 0; }
.f-nome {
  margin: 0; font-size: 23px; line-height: 1.2; font-weight: 700;
  letter-spacing: -.01em; overflow-wrap: anywhere;
}
.f-nome i { color: var(--rosso); font-weight: 600; font-size: 19px; }
.f-dati {
  display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 8px;
  font-size: 15px; color: var(--ink-3);
}
.f-dati b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.f-senza-dati { color: var(--ambra); font-weight: 600; }

.f-incasso {
  flex: 0 0 auto; margin-left: auto; text-align: right; max-width: 340px;
  padding: 10px 16px; border-radius: var(--raggio-piccolo);
  background: var(--verde-chiaro);
}
.f-cifra {
  display: block; font-size: 33px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.025em; color: var(--verde); font-variant-numeric: tabular-nums;
}
.f-voce { display: block; margin-top: 2px; font-size: 14.5px; color: var(--ink-2); }
.f-iva { display: block; margin-top: 7px; font-size: 15px; color: var(--ink-2); }
.f-iva b { font-variant-numeric: tabular-nums; }

/* Senza IVA non e' un dettaglio: e' una fattura diversa. Si vede da lontano. */
.f-incasso.senza-iva { background: var(--blu-chiaro); }
.f-incasso.senza-iva .f-cifra { color: var(--blu); }
.f-niente-iva { color: var(--blu); }
.f-niente-iva b {
  display: block; letter-spacing: .04em; font-size: 14px; margin-bottom: 1px;
}
.f-incasso.manca { background: var(--rosso-chiaro); }
.f-incasso.manca .f-cifra, .f-incasso.manca .f-voce { color: var(--rosso); }

.f-riga {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--rule);
  font-size: 14.5px; color: var(--ink-3);
}
.f-riga b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.f-conclusa { color: var(--ink-2); font-weight: 600; }
.f-tratta { color: var(--ink-2); }
.f-pulsanti {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px;
}

@media (max-width: 720px) {
  .scheda.fattura { padding: 15px 16px; }
  .f-incasso { margin-left: 0; max-width: none; width: 100%; text-align: left; }
  .f-nome { font-size: 21px; }
  .f-cifra { font-size: 29px; }
}
.dati-fattura.gia-noti { background: var(--blu-chiaro); border-left-color: var(--blu); }
.dati-fattura.gia-noti > b { color: var(--blu); }
.dati-fattura.gia-noti strong { color: var(--ink); }
.dati-fattura.gia-noti .btn { margin-top: 10px; }
.dati-fattura.mancanti { background: var(--ambra-chiaro); border-left-color: var(--ambra); }
.dati-fattura.mancanti > b { color: var(--ambra); }

/* ---------- il conto di ogni persona ---------- */
.persona-conto { margin-bottom: 30px; }
.pc-testa {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; flex-wrap: wrap; margin-bottom: 10px;
}
.pc-testa b { font-size: 20px; }
.pc-testa .minuto { display: block; }
.pc-saldo { font-size: 26px; font-weight: 700; text-align: right; line-height: 1.15; }
.pc-saldo.in-rosso { color: var(--rosso); }
.pc-saldo.in-verde { color: var(--verde); }
.pc-saldo .minuto { font-weight: 400; }
td.in-verde { color: var(--verde); }

/* ---------- la strada del mese ---------- */
.strada-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.strada-titolo { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 4px; }
.strada-sotto { color: var(--ink-3); font-size: 16.5px; margin: 0; max-width: 62ch; }
.strada-mesi { display: flex; gap: 8px; }
.strada-mesi .btn { text-decoration: none; }

.tappa {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--raggio); box-shadow: var(--ombra);
  padding: 24px 26px 26px; margin-bottom: 22px;
}
.t-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.t-nome { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.t-ruolo { font-size: 15.5px; color: var(--ink-3); }
.t-quota { font-size: 14.5px; font-weight: 600; padding: 4px 13px; border-radius: 999px; background: var(--blu-chiaro); color: var(--blu); white-space: nowrap; }

.strada { position: relative; height: 62px; margin: 26px 0 10px; background: #3d3a35; border-radius: 10px; overflow: hidden; }
.mezzeria { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%);
  background: repeating-linear-gradient(to right, #f2c14e 0 26px, transparent 26px 52px); opacity: .55; }
.percorso { position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--verde) 55%, transparent), color-mix(in srgb, var(--verde) 80%, transparent)); }
.camion { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 30px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.traguardo { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.pietre { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-3); }

.conto-strada { display: flex; gap: 26px; flex-wrap: wrap; align-items: baseline; margin-top: 16px; }
.conto-strada .grande { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.conto-strada .grande.fatto { color: var(--verde); }
.conto-strada .etichetta { font-size: 15.5px; color: var(--ink-3); }

.mancano { margin-top: 16px; padding: 14px 18px; border-radius: 10px; background: var(--sunk); font-size: 16.5px; line-height: 1.5; }
.mancano.arrivato { background: var(--verde-chiaro); color: var(--verde); font-weight: 600; }
.mancano b { color: var(--ink); }
.mancano.arrivato b { color: var(--verde); }

.storia { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.mese-piccolo { flex: 1; min-width: 74px; background: var(--sunk); border-radius: 8px; padding: 9px 10px;
  text-align: center; font-size: 14px; color: var(--ink-3); }
.mese-piccolo b { display: block; font-size: 15px; color: var(--ink-2); }
.mese-piccolo.adesso { background: var(--blu-chiaro); color: var(--blu); }
.mese-piccolo.adesso b { color: var(--blu); }

.nota-strada { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 16px; }
.nota-strada h2 { font-size: 20px; margin: 0 0 10px; color: var(--ink); letter-spacing: -.02em; }
.nota-strada b { color: var(--ink); }

/* ---------- i due traguardi ---------- */
.tappa.azienda { border-color: var(--rule-2); border-width: 2px; }

.binario { margin-top: 20px; }
.b-testa { display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; margin-bottom: 7px; }
.b-nome { font-size: 17.5px; font-weight: 700; letter-spacing: -.015em; }
.b-meta { font-size: 14.5px; color: var(--ink-3); }
.b-bollo { font-size: 13px; font-weight: 600; background: var(--verde-chiaro); color: var(--verde);
  padding: 2px 10px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; }
.b-esito { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.b-esito b { color: var(--ink); }
.b-esito.in-perdita b { color: var(--rosso); }
.b-esito.arrivato { color: var(--verde); font-weight: 600; }
.b-esito.arrivato b { color: var(--verde); }

.strada.bassa { height: 46px; margin: 0; }
.strada.bassa .camion { font-size: 24px; }
.strada.bassa .traguardo { font-size: 21px; right: 8px; }

.tratto { position: absolute; top: 0; bottom: 0; }
.tratto.prima  { left: 0; background: color-mix(in srgb, var(--verde) 26%, transparent); }
.tratto.adesso { background: linear-gradient(to right,
    color-mix(in srgb, var(--verde) 70%, transparent), var(--verde)); }

.conto-strada { margin-top: 24px; }
.conto-strada .separa {
  border-left: 1.5px solid var(--rule-2); padding-left: 26px; margin-left: 4px;
}
.conto-strada .grande.in-rosso { color: var(--rosso); }
.conto-strada .etichetta .minuto { display: block; font-size: 13.5px; margin-top: 2px; }

.t-quota.in-attivo { background: var(--verde-chiaro); color: var(--verde); }
.t-quota.in-perdita { background: var(--rosso-chiaro); color: var(--rosso); }
.mancano.in-perdita b { color: var(--rosso); }
.mancano.attesa { background: var(--ambra-chiaro); color: var(--ambra); }
.mancano.attesa b { color: var(--ambra); }

@media (max-width: 700px) {
  .conto-strada .separa { border-left: 0; padding-left: 0; margin-left: 0; }
}

/* ---------- il dettaglio di una persona ---------- */
.t-lato { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-lato .btn { text-decoration: none; white-space: nowrap; }

.tabellone th.grafico, .tabellone td.grafico { text-align: left; min-width: 180px; }
.rapporto {
  display: block; height: 10px; border-radius: 999px; background: var(--sunk);
  overflow: hidden; margin-bottom: 5px; max-width: 200px;
}
.rapporto span { display: block; height: 100%; background: var(--blu); border-radius: 999px; }
.rapporto.buona span { background: var(--verde); }
.rapporto.magra span { background: var(--ambra); }

/* ---------- moduli in colonna (accessi) ---------- */
.modulo {
  display: grid; gap: 18px; max-width: 560px; margin-top: 18px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--raggio); box-shadow: var(--ombra); padding: 24px 26px;
}
.modulo label { display: grid; gap: 6px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.modulo label.spunta { display: flex; font-weight: 400; }
.modulo input, .modulo select { width: 100%; font-weight: 400; }
/* Le caselle da spuntare no: se prendessero tutta la riga spingerebbero la
   scritta in un angolo, incolonnata parola per parola. */
/* Spunte e pallini non sono campi da riempire: se prendono tutta la riga
   come gli altri, spingono fuori la loro stessa etichetta. */
.modulo input[type="checkbox"],
.modulo input[type="radio"] { width: auto; flex: 0 0 auto; }
.modulo label.spunta { align-items: center; gap: 10px; }
.modulo label.spunta span { font-weight: 400; }
.modulo .minuto { font-weight: 400; }
.modulo .btn { text-decoration: none; }

/* ---------- le richieste aziendali si riconoscono a colpo d'occhio ---------- */
.scheda.da-azienda {
  border-color: color-mix(in srgb, var(--blu) 38%, var(--rule));
  background: color-mix(in srgb, var(--blu) 4%, var(--surface));
  box-shadow: var(--ombra-alta);
}
/* La striscia a sinistra resta quella dello stato: dice a che punto è la
   pratica, ed è un'informazione che non si può coprire. L'azienda si vede dal
   fondo appena tinto, dal bordo e dal bollo blu. */
.scheda.da-azienda .s-tratta strong { color: var(--blu-scuro, var(--blu)); }
.s-quando .ordine { color: var(--ink-3); font-size: 13.5px; }
.s-quando .ordine a { color: var(--ink-3); text-decoration: underline dotted; }
.s-quando .ordine a:hover { color: var(--blu); }

/* ---------- quanto c'è da fatturare ---------- */
.da-fatturare { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.da-fatturare .cifra { font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--verde); }
.da-fatturare .voce { font-size: 14.5px; color: var(--ink-3); }
.da-fatturare.manca .cifra { color: var(--rosso); }
.da-fatturare.manca .voce { color: var(--rosso); }
.soldi .margine { display: block; margin-top: 3px; font-size: 14.5px; color: var(--ink-3); }
.conto-iva { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.conto-iva .totale { color: var(--verde); }
.nota-iva { display: block; margin-top: 6px; }
.tempo-pagina { text-align: center; color: var(--ink-3); font-size: 13px; margin: 30px 0 16px; opacity: .7; }
.bollo.offerta { background: var(--accent-chiaro); color: var(--accent); font-variant-numeric: tabular-nums; }
#dlg-preventivo .prezzo-grande {
  width: 100%; font-size: 26px; font-weight: 700; padding: 14px; text-align: center;
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
#dlg-preventivo button { text-align: center; }
#dlg-preventivo .btn-ok { font-weight: 600; }

/* ---------- da quale sito arriva ---------- */
.fonte { font-weight: 600; }
.fonte-spediamoauto { background: var(--accent-chiaro); color: var(--accent); }
.fonte-trasportami  { background: var(--blu-chiaro);    color: var(--blu); }
.fonte-freightcare  { background: var(--ambra-chiaro);  color: var(--ambra); }

/* ---------- chi segue la richiesta ---------- */
.affida { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--ink-3); }
.affida select { padding: 7px 10px; font-size: 15px; }
.d-val.grave { color: var(--rosso); font-weight: 700; }

/* ---------------------------------------------------------------------------
 * Le giornate
 *
 * La coda si legge per giorni: quelli passati chiusi, oggi aperto. Chiuso
 * l'intestazione deve bastare da sola — quante ne sono arrivate e come sono
 * finite — perche' e' l'unica cosa che si vede.
 * ------------------------------------------------------------------------ */

.giornata { margin-bottom: 18px; }

.giornata > summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px;
  padding: 13px 16px; cursor: pointer; list-style: none;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--raggio); box-shadow: var(--ombra);
}
.giornata > summary::-webkit-details-marker { display: none; }
.giornata > summary::before {
  content: '▸'; color: var(--ink-3); font-size: 13px;
  transition: transform .15s ease; display: inline-block;
}
.giornata[open] > summary::before { transform: rotate(90deg); }
.giornata > summary:hover { border-color: var(--rule-2); }

.g-nome {
  font-weight: 700; font-size: 17px; color: var(--ink);
  text-transform: capitalize; margin-right: 2px;
}
.g-tot { color: var(--ink-2); font-size: 15px; }
.g-stati { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }

.g-s {
  font-size: 13px; padding: 3px 9px; border-radius: 99px;
  background: var(--sunk); color: var(--ink-2); white-space: nowrap;
}
.g-s.stato-nuova          { background: var(--blu-chiaro);    color: var(--blu); }
.g-s.stato-in_lavorazione { background: var(--ambra-chiaro);  color: var(--ambra); }
.g-s.stato-preventivata   { background: var(--accent-chiaro); color: var(--accent); }
.g-s.stato-conclusa       { background: var(--verde-chiaro);  color: var(--verde); }
.g-s.stato-persa          { background: var(--rosso-chiaro);  color: var(--rosso); }

/* Le schede di una giornata rientrano, così si vede a colpo d'occhio
   dove comincia un giorno e dove finisce. */
.giornata[open] > .scheda,
.giornata[open] > .suggerimento { margin-left: 14px; margin-top: 12px; }

@media (max-width: 720px) {
  .giornata > summary { padding: 11px 13px; }
  .g-stati { margin-left: 0; width: 100%; }
  .giornata[open] > .scheda,
  .giornata[open] > .suggerimento { margin-left: 0; }
}

.g-vale { font-size: 15px; color: var(--verde); white-space: nowrap; cursor: help; }
.g-vale b { font-weight: 700; }

/* Il riquadro del potenziale: ha un periodo suo, staccato dalle linguette. */
.n-potenziale .n-val { color: var(--verde); }
.n-periodi { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.n-periodi a {
  font-size: 11.5px; padding: 2px 7px; border-radius: 99px; text-decoration: none;
  color: var(--ink-3); background: var(--sunk); white-space: nowrap;
}
.n-periodi a:hover { color: var(--ink); }
.n-periodi a.attivo { background: var(--verde); color: #fff; }

/* Il potenziale ha la cifra più lunga di tutte — le migliaia con l'euro —
   quindi parte un filo più piccolo, se no allarga la casella e basta. */
.n-potenziale .n-val { font-size: 31px; }
.n-periodi { gap: 3px; margin-top: 8px; }

@media (max-width: 900px) {
  .numeri { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .n-val { font-size: 29px; }
  .n-potenziale .n-val { font-size: 27px; }
}

/* ---------------------------------------------------------------------------
 * Quando una scheda non c'entra più con la linguetta che stai guardando se ne
 * va: mezzo secondo perché si veda che è successo qualcosa. Sparire di colpo
 * sembra un errore della pagina, non una conseguenza di quello che hai fatto.
 * ------------------------------------------------------------------------ */
.scheda.se-ne-va {
  transition: opacity .42s ease, transform .42s ease, max-height .45s ease,
              margin .45s ease, border-width .45s ease;
  opacity: 0; transform: translateX(60px) scale(.97); max-height: 0; overflow: hidden;
  margin-top: 0; margin-bottom: 0; border-width: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .scheda.se-ne-va { transition: none; display: none; }
}

/* L'avviso delle richieste arrivate mentre leggevi: in basso, dove non copre
   niente, e sparisce solo quando lo premi. */
#nuove-arrivate {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 60; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg); font-size: 15.5px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; box-shadow: var(--ombra-alta);
}
#nuove-arrivate:hover { background: var(--accent); }

/* La riga che dice dove è finita una richiesta che hai appena segnato. Resta
   dov'è — ci devi ancora scrivere il prezzo — ma non finge di essere ancora
   al suo posto. */
.s-traslocata {
  margin: 0 0 10px; padding: 8px 14px; border-radius: var(--raggio-piccolo);
  background: var(--ambra-chiaro); color: var(--ambra);
  font-size: 14.5px; font-weight: 600;
}

/* Lo spazio per scrivere, fuori dal cassetto.
 *
 * Stava dentro "Note interne e storico", chiuso: chi prende una telefonata e
 * sente "guardi, ritira mio fratello e l'indirizzo e' cambiato" deve poterlo
 * scrivere subito, non aprire un pannello per cercarsi il foglio. Lo storico
 * invece resta chiuso, che quello si legge di rado. */
.s-note { margin-top: 14px; }
.s-note label {
  display: block; font-size: 13.5px; color: var(--ink-3); margin-bottom: 5px;
}
.s-note textarea {
  width: 100%; font-size: 15.5px; padding: 10px 13px; resize: vertical;
  background: var(--sunk); border: 1px solid var(--rule);
}
.s-note textarea:focus { background: var(--surface); }

/* La tratta si corregge sul posto: sembra il testo che era, finché non ci
   clicchi dentro. Un campo che si annuncia come campo, su una scheda piena di
   dati da leggere, invita a scriverci anche quando non serve. */
.d-luogo {
  font-size: 15.5px; font-weight: 600; line-height: 1.3;
  width: 100%; padding: 3px 7px; margin-left: -8px;
  border: 1px solid transparent; border-radius: var(--raggio-piccolo);
  background: transparent; color: inherit; font-family: inherit;
}
.d-luogo:hover { border-color: var(--rule-2); background: var(--surface); }
.d-luogo:focus { border-color: var(--accent); background: var(--surface); outline: none; }

/* ---------------------------------------------------------------------------
 * Dal telefono
 *
 * Il gestionale si guarda anche in piedi in mezzo a un piazzale, col telefono
 * in una mano. Lì lo spazio è tutto, e la cosa che ne rubava di più era la
 * barra in alto: otto voci che vanno a capo diventano tre righe appiccicate
 * sopra il contenuto, sempre lì, su uno schermo alto quindici centimetri.
 *
 * Quindi le voci restano su una riga sola e si scorrono col dito, come le
 * linguette di qualunque cosa sul telefono. Il resto è togliere fiato: meno
 * imbottitura, meno margini, gli stessi dati.
 * ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  .barra { gap: 12px; padding: 9px 14px; flex-wrap: nowrap; }
  .marchio { font-size: 16px; flex: 0 0 auto; }

  .barra nav {
    flex-wrap: nowrap; overflow-x: auto; gap: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a { padding: 7px 12px; font-size: 15px; white-space: nowrap; gap: 6px; }
  .chi { flex: 0 0 auto; font-size: 13.5px; }

  main { padding: 18px 14px 70px; }
  .scheda { border-radius: var(--raggio-piccolo); }
  .s-dati { gap: 14px; }

  /* Un campo di ricerca con una larghezza minima più larga dello schermo
     spinge fuori tutto il resto. */
  .cerca input[type=search] { min-width: 0; flex: 1 1 100%; }
  .cerca, .filtri { gap: 8px; }

  /* I numeri in cima: due per riga si leggono, cinque schiacciate no. */
  .numeri { grid-template-columns: 1fr 1fr; gap: 10px; }
  .n { padding: 13px 14px 14px; }
  .n-val { font-size: 26px; }
  .n-potenziale .n-val { font-size: 24px; }

  /* Gli importi stanno su una riga sola, non uno accanto all'altro stretti. */
  .soldi input, .soldi input[type=text] { width: 100%; }

  /* Un avviso fisso in fondo, su uno schermo corto, copre l'ultima scheda. */
  #nuove-arrivate { left: 12px; right: 12px; bottom: 12px; transform: none; font-size: 14.5px; }
}

/* ---------------------------------------------------------------------------
 * La riga di una richiesta
 *
 * Una coda si scorre con gli occhi, non si legge. Quello che serve per
 * decidere se una richiesta è roba tua sta in sei parole — dove va, che
 * mezzo è, se cammina — e sta su una riga. Tutto il resto, contatti, note,
 * prezzi, bottoni, sta sotto e si apre quando quella richiesta la prendi in
 * mano davvero.
 *
 * Venti richieste che occupano venti schermate non sono un elenco: sono venti
 * pagine da sfogliare.
 * ------------------------------------------------------------------------ */
.s-riga {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 13px 18px; cursor: pointer; list-style: none;
}
.s-riga::-webkit-details-marker { display: none; }
.s-riga::before {
  content: '▸'; color: var(--ink-3); font-size: 12px; flex: 0 0 auto;
  transition: transform .15s ease;
}
.s-tutto[open] > .s-riga::before { transform: rotate(90deg); }
.s-tutto[open] > .s-riga { border-bottom: 1px solid var(--rule); }
.s-riga:hover { background: var(--sunk); }

.r-tratta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.r-tratta strong { font-size: 16px; letter-spacing: -.01em; }
.r-freccia { color: var(--ink-3); }

.r-veicolo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.r-pezzo {
  font-size: 13.5px; color: var(--ink-2); background: var(--sunk);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.r-pezzo.r-grave { background: var(--rosso-chiaro); color: var(--rosso); font-weight: 600; }

.r-coda { display: flex; align-items: center; gap: 9px; margin-left: auto; flex: 0 0 auto; }

/* Chiusa, la scheda non ha bisogno di bordi interni né di imbottitura sotto. */
.s-tutto:not([open]) + *, .s-tutto:not([open]) { border: 0; }
.s-tutto > .s-testa { padding-top: 13px; }

@media (max-width: 700px) {
  .s-riga { padding: 11px 13px; gap: 8px 10px; }
  .r-coda { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
 * Una richiesta presa al telefono
 *
 * Mentre si compila c'è un cliente dall'altra parte che aspetta. Quindi campi
 * larghi, etichette chiare e niente da cercare: il modulo si riempie mentre
 * si parla, non dopo.
 * ------------------------------------------------------------------------ */
.modulo-telefono { max-width: 900px; }
.modulo-telefono .riquadro {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--raggio); box-shadow: var(--ombra);
  padding: 20px 22px 24px; margin-bottom: 18px;
}
.modulo-telefono .riquadro .sezione { margin-top: 0; }

.titolo-pagina { font-size: 30px; letter-spacing: -.03em; margin: 0 0 4px; }

.griglia-campi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px;
}
.modulo-telefono .campo { margin-bottom: 14px; }
.modulo-telefono .campo label { display: block; font-size: 14.5px; color: var(--ink-2); margin-bottom: 5px; }
.modulo-telefono .campo .aiuto { color: var(--ink-3); font-weight: 400; }
.modulo-telefono .campo input,
.modulo-telefono .campo textarea { width: 100%; font-size: 16px; padding: 10px 13px; }

.scelta-tipo { display: flex; gap: 18px; margin: 4px 0 16px; }
.scelta-tipo label { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.scelta-tipo input { width: auto; transform: scale(1.2); }

/* I clienti che somigliano a quello che stai scrivendo. */
.scelte {
  border: 1px solid var(--rule-2); border-radius: var(--raggio-piccolo);
  background: var(--surface); box-shadow: var(--ombra); margin-top: 6px; overflow: hidden;
}
.scelta-cliente {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--rule);
}
.scelta-cliente:last-child { border-bottom: 0; }
.scelta-cliente:hover { background: var(--sunk); }
.scelta-cliente b { display: block; font-size: 16px; }
.scelta-cliente span { font-size: 14px; color: var(--ink-3); }
.scelte .niente { margin: 0; padding: 11px 14px; font-size: 15px; color: var(--ink-3); }

.cliente-scelto {
  margin: 10px 0 0; padding: 11px 15px; border-radius: var(--raggio-piccolo);
  background: var(--verde-chiaro); color: var(--verde); font-weight: 600; font-size: 15.5px;
}

.avviso-errore {
  padding: 12px 16px; border-radius: var(--raggio-piccolo);
  background: var(--rosso-chiaro); color: var(--rosso); font-weight: 600;
}

.submit-riga { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.submit-riga .btn-si {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-size: 17px; padding: 12px 26px;
}
.submit-riga .btn-si:hover { background: var(--ink); border-color: var(--ink); }

.btn-telefono {
  background: var(--accent); color: #fff; border-color: var(--accent);
  text-decoration: none; white-space: nowrap; font-weight: 600;
}
.btn-telefono:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.pronta { color: var(--verde); font-weight: 600; }

/* Il bivio fra "l'ho già" e "è nuovo".
   Senza una riga che lo dica, i campi qui sotto sembrano una cosa da
   compilare comunque, e uno si chiede dove sia il modulo del cliente nuovo:
   e' questo, ma nessuno glielo aveva detto. */
.oppure {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 16px; color: var(--ink-3); font-size: 14px;
}
.oppure::before, .oppure::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}
.sotto-titolo { font-size: 19px; margin: 0 0 4px; letter-spacing: -.02em; }
.modulo-telefono .spiega { margin: 0 0 14px; font-size: 15px; color: var(--ink-3); }

.modulo-telefono .campo select { width: 100%; font-size: 16px; padding: 10px 13px; }

/* La scheda in volo verso la sua linguetta.
   Il transform non tocca lo spazio occupato, quindi l'altezza va chiusa a
   parte: se no la scheda vola via e il buco si richiude dopo, che si vede
   come uno scatto. */
.scheda.in-volo {
  transition: transform .55s cubic-bezier(.36, .07, .25, 1),
              opacity .5s ease .08s,
              height .42s ease .12s, margin .42s ease .12s;
  transform-origin: center;
  overflow: hidden; pointer-events: none;
  position: relative; z-index: 40;
  box-shadow: var(--ombra-alta);
}

/* Il saltello della linguetta quando la scheda ci finisce dentro: senza,
   il numero cambia e nessuno se ne accorge. */
@keyframes colpita {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.conta.conta-colpita { animation: colpita .4s ease; }
@media (prefers-reduced-motion: reduce) { .conta.conta-colpita { animation: none; } }

/* Un'auto elettrica pesa qualche quintale in più: chi carica lo deve sapere
   prima di dire un prezzo, non davanti al carrello. */
.r-pezzo.r-pesante { background: var(--ambra-chiaro); color: var(--ambra); font-weight: 600; }

/* Le richieste scritte da noi: si correggono e si tolgono, e i due bottoni
   stanno dove si vedono aprendo la scheda — non in fondo a un cassetto
   dentro un altro cassetto. */
.s-nostra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 11px 15px; border-radius: var(--raggio-piccolo);
  background: var(--sunk); font-size: 15px; color: var(--ink-2);
}
.s-nostra span { margin-right: auto; }

/* Un indirizzo intero non sta in una colonna stretta come un CAP. */
.campo-largo { grid-column: 1 / -1; }

/* Avere dei dati non vuol dire poter fatturare: senza indirizzo lo SDI la
   rifiuta. Meglio saperlo qui che davanti al gestionale del commercialista. */
.manca-per-fattura {
  margin: 11px 0 0; padding: 10px 14px; border-radius: var(--raggio-piccolo);
  background: var(--ambra-chiaro); color: var(--ambra); font-size: 15px;
}
.manca-per-fattura a { color: inherit; font-weight: 600; }

/* La riga per segnare com'è andata la telefonata: sta sotto i dati, larga,
   perché è l'unica cosa che si fa su questa pagina. */
.chiamata {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule);
}
.chiamata label { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.chiamata select { font-size: 15.5px; padding: 9px 12px; }
.chiamata input[name="nota"] { flex: 1 1 260px; font-size: 15.5px; padding: 9px 12px; }

/* Appena chiamata: resta lì ma si vede che è fatta. */
.scheda.gia-chiamata { opacity: .55; }
.scheda.gia-chiamata .chiamata { display: none; }
.d-val.fine { font-weight: 400; font-size: 15px; color: var(--ink-2); }

/* La sigla con cui una pratica viene passata ai richiami: si mostra perché
   chi guarda possa verificare che c'è, invece di fidarsi. */
.bollo.sigla { background: var(--sunk); color: var(--ink-2); text-transform: uppercase;
  letter-spacing: .04em; font-size: 12.5px; }

/* Il cliente ha detto sì al telefono: è la cosa più importante che possa
   comparire su una riga della coda, e si vede prima di aprirla. */
.bollo.confermato {
  background: var(--verde); color: #fff; font-weight: 700;
}

/* Il sito di provenienza sulla riga chiusa: più piccolo del resto, che è un
   contorno, non la notizia. */
.r-coda .fonte { font-size: 12.5px; padding: 2px 9px; }
.fonte-freightcareurope { background: var(--ambra-chiaro); color: var(--ambra); }
.fonte-sendyourauto { background: var(--rosso-chiaro); color: var(--rosso); }
.fonte-telefono { background: var(--ink-2); color: var(--bg); }
/* Il link che si manda su WhatsApp a chi telefona: è il cliente a scrivere,
   ma la richiesta nasce da una nostra telefonata. Verde, come il posto da cui
   arriva, e diversa da tutte le altre a colpo d'occhio. */
.fonte-whatsapp { background: var(--verde); color: #fff; }

/* La linguetta delle pratiche che il cliente ha confermato al telefono: è la
   prima della fila e si vede che è un'altra cosa. */
.linguette a[href*="stato=confermati"] .conta { background: var(--verde); color: #fff; }

/* Silvana ha convertito: la notizia migliore che il gestionale possa dare,
   e va data a chi sta guardando altro. */
.avviso-convertiti {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  margin-bottom: 18px; padding: 15px 20px; border-radius: var(--raggio);
  background: var(--verde-chiaro); border: 1px solid var(--verde);
  color: var(--verde); font-size: 16px;
}
.avviso-convertiti[hidden] { display: none; }
.avviso-convertiti .quanti {
  flex: 0 0 auto; min-width: 42px; height: 42px; border-radius: 50%;
  background: var(--verde); color: #fff; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.avviso-convertiti .vai { margin-left: auto; font-weight: 700; white-space: nowrap; }
.avviso-convertiti:hover { background: var(--verde); color: #fff; }
.avviso-convertiti:hover .quanti { background: #fff; color: var(--verde); }

@keyframes appare { from { transform: scale(.96); opacity: 0; } }
.avviso-convertiti.appena-arrivato { animation: appare .4s ease; }

@media (max-width: 700px) {
  .avviso-convertiti { font-size: 15px; gap: 12px; padding: 13px 15px; flex-wrap: wrap; }
  .avviso-convertiti .vai { margin-left: 0; }
}

/* Il guadagno vero di una giornata si distingue dalla stima: uno è un fatto,
   l'altra è un'ipotesi, e non devono somigliarsi. */
.g-vale.g-fatto { color: var(--ink); }
.g-vale.g-fatto b { color: var(--verde); }

/* La data di chiusura: il mese in cui cade decide in quale mese finisce il
   guadagno, quindi va scritta dove si scrivono i soldi. */
.quando-chiusa { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-3); }
.quando-chiusa input { font-size: 15px; padding: 8px 10px; width: auto; }

/* L'agenda si legge per giorni: una lista di telefonate senza i giorni è un
   elenco, non un'agenda. */
.giorno-agenda {
  margin: 24px 0 10px; font-size: 18px; letter-spacing: -.02em;
  text-transform: capitalize;
}
.giorno-agenda.in-ritardo { color: var(--rosso); }
.giorno-agenda.in-ritardo::before { content: '⚠ '; }

.quando-risentire { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.quando-risentire input { font-size: 15px; padding: 8px 10px; }

/* ---------------------------------------------------------------------------
 * La settimana delle telefonate
 *
 * La lista serve a lavorare, una chiamata dopo l'altra. Il calendario serve a
 * guardare: quanto è pieno giovedì, se la settimana regge, dove c'è spazio
 * per richiamare qualcuno in più. Due domande diverse, due viste.
 * ------------------------------------------------------------------------ */
.settimana-testa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.settimana-testa b { font-size: 17px; text-transform: capitalize; }
.settimana-testa .arretrati {
  margin-left: auto; background: var(--rosso); color: #fff; text-decoration: none;
  padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 14.5px;
}

.settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.settimana .giorno {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--raggio);
  padding: 10px; min-height: 130px; display: flex; flex-direction: column; gap: 7px;
}
.settimana .giorno.festivo { background: var(--sunk); }
.settimana .giorno.oggi { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.g-testa { display: flex; align-items: baseline; gap: 7px; }
.g-nome-breve { font-size: 12.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.g-numero { font-size: 19px; font-weight: 700; }
.g-quante {
  margin-left: auto; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 999px; display: flex;
  align-items: center; justify-content: center;
}

.appunto {
  display: block; text-decoration: none; color: inherit;
  background: var(--accent-chiaro); border-radius: var(--raggio-piccolo);
  padding: 7px 9px; font-size: 13px; line-height: 1.3;
}
.appunto:hover { background: var(--accent); color: #fff; }
.appunto b { display: block; font-size: 13px; }
.appunto span { color: var(--ink-3); font-size: 12px; }
.appunto:hover span { color: rgba(255,255,255,.85); }
.appunto-esito { display: block; font-style: italic; }

@media (max-width: 900px) {
  .settimana { grid-template-columns: 1fr; gap: 8px; }
  .settimana .giorno { min-height: 0; }
  .settimana .giorno:not(:has(.appunto)) { display: none; }
}