/* IL VOCABOLARIO VISIVO DEL CRM — si scrive qui, non nelle singole schermate.
 *
 * Uso: ogni pagina carica prima base.css, poi il proprio foglio. Chi scrive una
 * schermata nuova usa queste classi e non inventa colori, spaziature o dimensioni.
 *
 * ATTENZIONE
 *   QUESTO E' L'UNICO :root DEL PROGRAMMA. stile.css ne aveva un secondo che
 *   ridefiniva --bordo, --raggio, --ombra e --attesa: quest'ultimo passava da #8a6413
 *   (4,78:1, passa WCAG) a #8a6d1f (4,37:1, non passa) senza che nessuno l'avesse
 *   deciso. Due posti con lo stesso nome divergono sempre, e il giorno che divergono
 *   nessuno se ne accorge. Se serve un valore nuovo, si aggiunge qui.
 *   NESSUN COLORE VA SCRITTO A MANO NELLE ALTRE PARTI. Se serve una tinta che qui non
 *   c'e', si aggiunge qui con un nome che dica il SIGNIFICATO (--in-ritardo), non
 *   l'aspetto (--rosso): il giorno che si cambia la scala di colore, si cambia in un
 *   posto solo.
 *   LE MISURE VANNO A PASSI DI 4px (--s1 = 4, --s2 = 8, --s3 = 12...). Le spaziature
 *   inventate a occhio sono la ragione per cui un'interfaccia sembra sciatta anche
 *   quando ogni singolo pezzo e' curato.
 *   I BERSAGLI DA TOCCARE NON SCENDONO SOTTO 44px. E' la misura di un polpastrello:
 *   sotto quella, sul telefono si sbaglia bottone.
 *   IL SIGNIFICATO DEI COLORI E' FISSO OVUNQUE: verde fatto, ambra in attesa, rosso in
 *   ritardo, blu informazione. Un pallino ambra deve voler dire la stessa cosa nella
 *   scheda di una pratica e nell'elenco delle scadenze.
 */

/* ---------------------------------------------------------------- i valori */

:root {
  /* Superfici e testo — tinte fredde e desaturate: e' uno strumento di lavoro. */
  --fondo:        #f5f6f7;
  --superficie:   #ffffff;
  --superficie-2: #eef0f2;   /* righe alternate, sezioni rientrate */
  --bordo:        #dfe3e6;
  --bordo-forte:  #c3cad0;
  --testo:        #16191c;
  --testo-2:      #5b656e;   /* etichette, note */
  /* Segnaposto, .minuta, .facoltativo, lo stato spento. Era #8d979f: 2,97:1 sul bianco
     e 2,75:1 sul fondo, sotto il minimo di 4,5. E' testo vero — «(3 di franchising)»,
     «su 649», i passi di una pratica — non decorazione: adesso fa 5,27:1. */
  --testo-3:      #646d75;

  /* Il colore del programma */
  --marchio:      #1f4d5c;
  --marchio-2:    #2c6c80;
  --marchio-velo: #e7eff1;
  /* Il testo che sta SOPRA il marchio e sopra gli allarmi (barra rete, tasti pieni).
     Nel tema scuro il marchio, l'ambra e il rosso si schiariscono: un bianco scritto
     a mano ci restava sopra, illeggibile. Si cambia qui, e cambia insieme al fondo. */
  --su-marchio:   #fff;
  --su-allarme:   #fff;
  /* Il bordo che stacca un segno dalla tessera della mappa. Uguale nei due temi: le
     tessere di OpenStreetMap sono chiare sempre, anche col pannello al buio. */
  --contorno-segno: #fff;

  /* I COLORI DELLA MAPPA. Stanno sulle tessere di OpenStreetMap, che sono chiare
     sempre: non cambiano col tema, o al buio sparirebbero dentro la cartina. Sono
     tinte lontane fra loro perche' devono distinguersi a 16px, non piacere. */
  --segno-nuova:       #4c6ef5;   /* da contattare: non l'ha ancora sentita nessuno */
  --segno-contattata:  #f0a132;   /* sentita, in attesa di una risposta */
  --segno-appuntamento:#b57f00;   /* appuntamento fissato */
  --segno-attiva:      #2f9e44;   /* collabora */
  --segno-spenta:      #909296;   /* non interessata, o chiusa */
  /* Colorando per CHI la segue il colore cambia mestiere: tre tinte lontane dalle
     cinque degli stati, cosi' non si crede di guardare la stessa cosa. */
  --segno-libera:      #12b886;
  --segno-mia:         #4263eb;
  --segno-altrui:      #e8590c;
  --partenza:          #e03131;
  --partenza-alone:    rgba(224,49,49,.35);
  --ombra-segno:       0 1px 3px rgba(0,0,0,.5);
  /* L'attribuzione di OpenStreetMap: sta sulla cartina, non sul pannello. */
  --fondo-attribuzione: rgba(255,255,255,.8);
  --testo-attribuzione: #333;

  /* Il velo scuro dietro una finestra modale: uguale nei due temi, e' un'ombra. */
  --velo-modale: rgba(0,0,0,.45);

  /* Significati: sempre questi, ovunque */
  --fatto:        #2f6b3a;   --fatto-velo:      #e6f2e9;
  --attesa:       #8a6413;   --attesa-velo:     #fbf1dc;
  --ritardo:      #9b2c2c;   --ritardo-velo:    #fbe9e9;
  --informazione: #1f4d5c;   --informazione-velo:#e7eff1;

  /* Spaziature: multipli di 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Testo */
  --carattere: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --cifre: "SF Mono", "Cascadia Mono", Consolas, monospace;  /* importi e date */
  --t-titolo:  20px;
  --t-sezione: 16px;
  --t-corpo:   15px;
  --t-nota:    13px;
  --t-minuta:  12px;

  --raggio:   10px;
  --raggio-2: 6px;
  --tocco:    44px;          /* misura minima di ogni bersaglio */
  --ombra:    0 1px 2px rgba(16,24,32,.06), 0 4px 12px rgba(16,24,32,.05);
  --ombra-alta: 0 8px 30px rgba(16,24,32,.18);
  --colonna:  1100px;        /* larghezza massima del contenuto */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:        #131619;
    --superficie:   #1b1f23;
    --superficie-2: #23282d;
    --bordo:        #2e343a;
    --bordo-forte:  #414951;
    --testo:        #e8eaec;
    --testo-2:      #a2acb4;
    --testo-3:      #858f97;   /* era #737d85: 3,95:1 sulla superficie, adesso 5,03 */
    --marchio:      #7fc4d8;
    --marchio-2:    #a3d7e6;
    --marchio-velo: #14313b;
    --su-marchio:   #0f1417;
    --su-allarme:   #0f1417;
    --fatto:        #8fd3a0;   --fatto-velo:      #1a2f21;
    --attesa:       #e2c268;   --attesa-velo:     #302a17;
    --ritardo:      #f08a8a;   --ritardo-velo:    #351e1e;
    --informazione: #7fc4d8;   --informazione-velo:#14313b;
    --ombra: none;
    --ombra-alta: 0 8px 30px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--t-corpo)/1.5 var(--carattere);
  background: var(--fondo);
  color: var(--testo);
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- impianto */

.pagina { max-width: var(--colonna); margin: 0 auto; padding: var(--s4); }
.pila   { display: flex; flex-direction: column; gap: var(--s3); }
.fila   { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.spinge { margin-left: auto; }               /* spinge a destra il resto della fila */
.griglia-2 { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .griglia-2 { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- testo */

h1, .titolo   { font-size: var(--t-titolo);  font-weight: 650; margin: 0 0 var(--s2); letter-spacing: -.01em; }
h2, .sezione  { font-size: var(--t-sezione); font-weight: 650; margin: var(--s5) 0 var(--s2); }
h3            { font-size: var(--t-corpo);   font-weight: 650; margin: 0 0 var(--s1); }
.nota    { font-size: var(--t-nota); color: var(--testo-2); margin: var(--s1) 0; }
.minuta  { font-size: var(--t-minuta); color: var(--testo-3); }
.numero  { font-family: var(--cifre); font-variant-numeric: tabular-nums; }
.importo { font-family: var(--cifre); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------------------------------------------------------------- superfici */

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: var(--s4);
  box-shadow: var(--ombra);
}

/* ---------------------------------------------------------------- stati */

.stato {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--t-minuta); font-weight: 600; white-space: nowrap;
  padding: 3px var(--s2); border-radius: 20px;
  background: var(--marchio-velo); color: var(--marchio);
}
.stato.fatto   { background: var(--fatto-velo);   color: var(--fatto); }
.stato.attesa  { background: var(--attesa-velo);  color: var(--attesa); }
.stato.ritardo { background: var(--ritardo-velo); color: var(--ritardo); }
.stato.spento  { background: var(--superficie-2); color: var(--testo-3); }
.stato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- comandi */

.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tocco); padding: 0 var(--s4);
  font: 600 var(--t-corpo)/1 var(--carattere);
  color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-2);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .12s, border-color .12s;
}
.tasto:hover { background: var(--superficie-2); }
.tasto:active { transform: translateY(1px); }
.tasto:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; }
.tasto[disabled], .tasto.spento { opacity: .5; cursor: not-allowed; }

.tasto.primario { background: var(--marchio); border-color: var(--marchio); color: var(--su-marchio); }
.tasto.primario:hover { background: var(--marchio-2); border-color: var(--marchio-2); }
.tasto.piatto { border-color: transparent; background: transparent; }
.tasto.piatto:hover { background: var(--superficie-2); }
.tasto.grave { color: var(--ritardo); border-color: var(--ritardo); background: transparent; }
.tasto.minuto { min-height: 34px; padding: 0 var(--s3); font-size: var(--t-nota); }

/* La barra delle azioni: sul telefono si incolla in basso, dove arriva il pollice. */
.azioni { display: flex; gap: var(--s2); flex-wrap: wrap; }
.azioni > * { flex: 1 1 auto; min-width: 120px; }
@media (max-width: 640px) {
  .azioni.principali {
    position: sticky; bottom: 0; z-index: 4;
    padding: var(--s2) 0 calc(var(--s2) + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--fondo) 70%, transparent);
  }
}

/* ---------------------------------------------------------------- campi */

.campo { display: block; margin-bottom: var(--s3); }
.campo > label { display: block; font-size: var(--t-nota); font-weight: 600; color: var(--testo-2); margin-bottom: var(--s1); }

input, select, textarea {
  width: 100%; min-height: var(--tocco);
  padding: var(--s2) var(--s3);
  font: var(--t-corpo)/1.4 var(--carattere);
  color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-2);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marchio); outline-offset: -1px; border-color: var(--marchio);
}
input::placeholder { color: var(--testo-3); }
textarea { min-height: 90px; resize: vertical; }
input[inputmode="decimal"], input[type="number"], .campo.cifra input {
  font-family: var(--cifre); font-variant-numeric: tabular-nums;
}

/* L'indicazione operativa sotto il campo: dice COSA ci va, non cos'e' un TAEG. */
.indicazione { display: block; font-size: var(--t-minuta); color: var(--testo-2); margin-top: var(--s1); }

/* L'errore spiega, non sgrida. */
.campo.sbagliato input, .campo.sbagliato select, .campo.sbagliato textarea { border-color: var(--ritardo); }
.errore-campo { display: block; font-size: var(--t-minuta); color: var(--ritardo); margin-top: var(--s1); font-weight: 600; }

/* ---------------------------------------------------------------- righe di dati */

.riga-dato {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: var(--s2) 0; border-bottom: 1px solid var(--bordo);
}
.riga-dato:last-child { border-bottom: 0; }
.riga-dato > .etichetta { flex: 0 0 42%; max-width: 200px; font-size: var(--t-nota); color: var(--testo-2); }
.riga-dato > .valore { flex: 1; min-width: 0; word-break: break-word; }

/* ---------------------------------------------------------------- vuoti */

/* Una schermata vuota non dice "nessun risultato": dice come riempirla. */
.vuoto { text-align: center; padding: var(--s7) var(--s4); color: var(--testo-2); }
.vuoto .titolo-vuoto { font-weight: 650; color: var(--testo); margin-bottom: var(--s1); }
.vuoto p { margin: 0 0 var(--s4); font-size: var(--t-nota); }

/* ---------------------------------------------------------------- attesa */

/* «Sto caricando…»: senza, una vista che arriva in un secondo e mezzo e' una schermata
   bianca, e chi guarda tocca di nuovo credendo che il tocco non sia passato. Non e'
   un'animazione da guardare: e' una frase che dice che il programma sta lavorando. */
.caricamento {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s5) var(--s4); color: var(--testo-2); font-size: var(--t-nota);
}
.caricamento::before {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--bordo-forte); border-top-color: var(--marchio);
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- avanzamento */

.avanzamento { display: flex; gap: 3px; margin: var(--s2) 0; }
.avanzamento > span { flex: 1; height: 4px; border-radius: 2px; background: var(--bordo); }
.avanzamento > span.fatto { background: var(--fatto); }
.avanzamento > span.corrente { background: var(--marchio); }

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

.avviso {
  display: flex; gap: var(--s3); padding: var(--s3);
  border-radius: var(--raggio-2); border-left: 3px solid var(--informazione);
  background: var(--informazione-velo); font-size: var(--t-nota);
}
.avviso.attesa  { border-color: var(--attesa);  background: var(--attesa-velo); }
.avviso.ritardo { border-color: var(--ritardo); background: var(--ritardo-velo); }
.avviso.fatto   { border-color: var(--fatto);   background: var(--fatto-velo); }

/* Il messaggio che appare dopo un'azione, con dentro "annulla".
   E' il solo messaggio volante del programma: prima ce n'era un secondo, .avviso in
   stile.css, che portava lo stesso nome del riquadro d'avviso qui sopra e ne ereditava
   il bordo a sinistra. Un nome, una cosa. */
.brindisi {
  position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s3); z-index: 60;
  background: var(--testo); color: var(--fondo);
  padding: var(--s2) var(--s3) var(--s2) var(--s4); border-radius: 24px;
  box-shadow: var(--ombra-alta);
  font-size: var(--t-nota); max-width: calc(100vw - var(--s5));
}
/* Un salvataggio fallito non somiglia a uno riuscito, e non se ne va da solo: resta
   finche' non lo si chiude. Sparire dopo 2,6 secondi voleva dire che chi stava
   guardando la tastiera non sapeva nemmeno che qualcosa era andato storto. */
.brindisi.ritardo { background: var(--ritardo); color: var(--su-allarme); }
.brindisi button {
  background: none; border: 0; color: inherit; padding: 0 var(--s2);
  min-height: var(--tocco); font: 600 var(--t-nota) var(--carattere);
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}

/* ---------------------------------------------------------------- stampa */

/* Quello che esce di qui lo legge il cliente o la banca: deve essere ordinato. */
@media print {
  :root { --fondo: #fff; --superficie: #fff; --testo: #000; --testo-2: #333; }
  body { font-size: 11pt; }
  nav, .azioni, .brindisi { display: none !important; }
  .scheda { border: 0; box-shadow: none; padding: 0; }
  .pagina { max-width: none; padding: 0; }
  .foglio { page-break-after: always; }
  .foglio:last-child { page-break-after: auto; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border-bottom: .5pt solid #999; padding: 4pt 6pt; text-align: left; }
  th { background: #f0f0f0; }
  td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
}
/* ---------------------------------------------------------------- rispetto */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}