/* MedioPat — fondamenta dei temi touch (tablet e telefono) e componenti nuovi.
   ---------------------------------------------------------------------------
   Qui non si corregge il tema computer: si riparte da capo. Ogni misura è un
   token (spazi, corpi, bersagli, raggi) dichiarato in html.touch e ridefinito
   dai due temi veri, che caricano dopo. Chi vuole ritoccare "le scritte troppo
   grandi sul tablet" cambia tre numeri in tema-tablet.css, non trenta regole.

   Specificità: html.touch vale (0,1,1) e batte le regole di pagina scritte con
   una classe sola, quindi queste regole vincono senza !important e senza
   dipendere dall'ordine dei fogli.

   I componenti nuovi (barra in basso, pannello, selettore delle viste) stanno
   qui senza prefisso perché il selettore delle viste serve anche sul computer. */

/* =========================================================================
   1. Token
   ========================================================================= */
html.touch {
  /* palette: intestazione scura, fondo neutro, schede bianche, accento per sezione */
  --top:     #0e2233;
  --top-b:   rgba(255,255,255,.12);
  --carta:   #ffffff;
  --sfondo:  #eef1f5;
  --bordo:   #dde3ea;
  --bordo-f: #c6d0da;          /* bordo forte: campi da riempire */
  --testo:   #1b2b3a;
  --grigio:  #667a8c;
  --acc:     #1976d2;          /* lo scrive tema.js secondo la sezione */
  --acc-tenue: rgba(25,118,210,.18);                        /* per i browser vecchi */
  --acc-tenue: color-mix(in srgb, var(--acc) 22%, #fff);

  --fs-base: 16px;
  --fs-pic:  14px;             /* testo secondario */
  --fs-min:  12.5px;           /* etichette, mai sotto questo */
  --fs-tit:  16.5px;           /* titoli di scheda */
  --fs-big:  27px;             /* numeroni */
  --fs-btn:  15.5px;

  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 18px;
  --gutter: 10px;              /* margine laterale del contenuto */
  --tap: 46px;                 /* bersaglio minimo per il dito */
  --rad: 14px;                 /* schede */
  --rad-s: 11px;               /* campi e bottoni */
  --top-h: 54px;
  --nav-h: 62px;

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

/* =========================================================================
   2. Impianto della pagina
   ========================================================================= */
html.touch body {
  background: var(--sfondo); color: var(--testo);
  font: var(--fs-base)/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

html.touch main {
  max-width: none;
  padding: var(--gutter);
  /* la barra in basso non deve coprire l'ultima riga */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 18px);
}

/* --- intestazione: solo dove sono e come torno indietro --- */
html.touch header.top {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--top-h); padding: 0 var(--sp3);
  background: var(--top); color: #fff;
  display: flex; align-items: center; gap: var(--sp2); flex-wrap: nowrap;
  border-bottom: 0; box-shadow: 0 1px 0 var(--top-b), 0 2px 10px rgba(10,25,40,.18);
  padding-top: env(safe-area-inset-top, 0px);
}
html.touch header.top::after {          /* filo di accento della sezione */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--acc);
}
html.touch header.top h1 {
  font-size: var(--fs-tit); font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* i link di navigazione dell'intestazione vivono nella barra in basso */
html.touch header.top a:not(.indietro) { display: none; }
html.touch .indietro {
  width: 40px; height: 40px; font-size: 24px; border-radius: 50%;
  background: rgba(255,255,255,.14); flex: none;
}
html.touch .indietro:active { background: rgba(255,255,255,.3); }

/* --- schede --- */
html.touch .card {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--rad); padding: var(--sp3) var(--sp3) var(--sp4);
  margin-bottom: var(--sp2);
  box-shadow: 0 1px 2px rgba(20,40,60,.05);
}
html.touch .card h2 {
  display: flex; align-items: center; gap: var(--sp2);
  font-size: var(--fs-tit); font-weight: 700; color: var(--testo);
  margin: 0 0 var(--sp3);
}
html.touch .card h2::before {           /* stanghetta colorata della sezione */
  content: ''; flex: none; width: 4px; height: 1.05em;
  background: var(--acc); border-radius: 3px;
}
html.touch .card h2 .muto { font-size: var(--fs-pic); }

/* =========================================================================
   3. Testo, campi, bottoni
   ========================================================================= */
html.touch .muto  { color: var(--grigio); font-size: var(--fs-pic); }
html.touch .vuoto { color: var(--grigio); }
html.touch label {
  display: block; font-size: var(--fs-min); font-weight: 700; color: var(--grigio);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px;
}
html.touch .campo { margin-bottom: var(--sp3); }
/* un'etichetta con dentro una casella da spuntare non è il nome di un campo:
   è una riga da toccare, e va scritta come si legge */
html.touch label:has(input[type=checkbox]),
html.touch label:has(input[type=radio]) {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap);
  font-size: var(--fs-base); font-weight: 600; color: var(--testo);
  text-transform: none; letter-spacing: 0; margin: 0;
}

html.touch input, html.touch select, html.touch textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px;
  border: 1.5px solid var(--bordo-f); border-radius: var(--rad-s);
  font-size: 16px;                     /* sotto i 16 il telefono ingrandisce da solo */
  font-family: inherit; background: #fff; color: var(--testo);
}
html.touch textarea { min-height: 0; }
html.touch select {
  appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667a8c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 17px;
}
html.touch input:focus, html.touch select:focus, html.touch textarea:focus {
  outline: 0; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-tenue);
}
html.touch input[type=checkbox], html.touch input[type=radio] {
  width: 24px; height: 24px; min-height: 0; accent-color: var(--acc);
}
html.touch input[type=range] { min-height: 0; border: 0; padding: 0; accent-color: var(--acc); }
html.touch input[type=color]  { padding: 2px; }

html.touch button, html.touch .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap); padding: 0 var(--sp4);
  border: 0; border-radius: var(--rad-s); background: var(--acc); color: #fff;
  font: 700 var(--fs-btn)/1.2 inherit; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
html.touch button:active, html.touch .btn:active { filter: brightness(.9); transform: scale(.985); }
html.touch button:hover, html.touch .btn:hover { background: var(--acc); }
html.touch button.chiaro {
  background: #eef2f6; color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--bordo);
}
html.touch button.chiaro:hover { background: #eef2f6; }

/* I bottoni che non sono "un bottone" ma un interruttore — gli stati dell'appello,
   i modificatori di una serie — devono restare spenti finché non si accendono:
   la regola qui sopra li tingerebbe tutti del colore della sezione. */
html.touch .stati button {
  background: #fff; color: var(--grigio); border: 2px solid var(--bordo);
}
/* acceso: il colore di fondo lo scrive la pagina nel tag (arriva dalle impostazioni) */
html.touch .stati button.on { color: #fff; box-shadow: none; }
html.touch .mods button { background: #fff; }

html.touch .badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-min); font-weight: 700; line-height: 1.5;
}
html.touch .avviso {
  padding: var(--sp3); border-radius: var(--rad-s); font-size: var(--fs-pic);
  margin-bottom: var(--sp3); border: 1px solid transparent;
}
html.touch .avviso.err  { background: #ffeceb; border-color: #ffc9c4; color: #b3261e; }
html.touch .avviso.ok   { background: #e7f6ea; border-color: #b6e0bf; color: #1e6b2a; }
html.touch .avviso.info { background: #e7f1fd; border-color: #bcd7f7; color: #10457f; }

/* =========================================================================
   4. Tabelle (impianto comune; il telefono le trasforma in schede)
   ========================================================================= */
html.touch table { width: 100%; border-collapse: collapse; }
html.touch th {
  font-size: var(--fs-min); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--grigio); text-align: left;
}
html.touch th, html.touch td {
  padding: 10px var(--sp2); border-bottom: 1px solid var(--bordo);
}
html.touch tbody tr:last-child td { border-bottom: 0; }
html.touch tr.tot td { background: #f2f5f9; font-weight: 700; }
html.touch .tabella-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--sp3) * -1); padding: 0 var(--sp3);
}
html.touch th[data-dir]::after { font-size: 11px; }

/* La tendina «Ordina» che sostituisce il clic sull'intestazione */
html.touch .ordina-mob {
  display: flex; align-items: center; gap: var(--sp2); margin-bottom: var(--sp3);
  font-size: var(--fs-min); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--grigio);
}
html.touch .ordina-mob select { flex: 1; min-width: 0; }
html.touch .ordina-mob button { min-width: var(--tap); padding: 0 var(--sp3); }

/* =========================================================================
   5. Finestre (dialog): dal basso, come le schede di sistema
   ========================================================================= */
html.touch dialog {
  border: 0; padding: 0; width: 100%; max-width: none; max-height: 92vh;
  margin: auto auto 0; border-radius: var(--rad) var(--rad) 0 0;
  background: var(--carta); color: var(--testo);
}
html.touch dialog::backdrop { background: rgba(8,20,32,.5); }
html.touch .dlg-testa {
  padding: var(--sp4) var(--sp3) var(--sp3); border-bottom: 1px solid var(--bordo);
  font-size: var(--fs-tit); font-weight: 700; color: var(--testo);
}
html.touch .dlg-corpo { padding: var(--sp3); max-height: 62vh; overflow: auto; }
html.touch .dlg-piede {
  padding: var(--sp3); border-top: 1px solid var(--bordo);
  display: flex; gap: var(--sp2); padding-bottom: calc(var(--sp3) + env(safe-area-inset-bottom, 0px));
}
html.touch .dlg-piede > * { flex: 1; }

/* =========================================================================
   6. Barra di navigazione in basso  (la costruisce tema.js)
   ========================================================================= */
.ml-nav, .ml-sheet, .ml-piu { display: none; }

html.touch .ml-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: stretch;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255,255,255,.97); border-top: 1px solid var(--bordo);
  box-shadow: 0 -2px 16px rgba(15,35,55,.10);
}
html.touch .ml-nav > * {
  flex: 1; min-width: 0; background: none; border: 0; padding: 6px 2px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--grigio); font: 600 var(--fs-min)/1.15 inherit; text-decoration: none;
  min-height: 0; border-radius: 0; cursor: pointer;
}
html.touch .ml-nav > *:active { background: #f1f4f8; }
html.touch .ml-nav > *.on { color: var(--acc); }
html.touch .ml-nav > * span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.touch .ml-nav > *.on::before {
  content: ''; position: absolute; top: 0; width: 34px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--acc);
}
html.touch .ml-nav > * { position: relative; }

/* --- il pannello «Altro» --- */
html.touch .ml-sheet { display: block; position: fixed; inset: 0; z-index: 70; pointer-events: none; }
html.touch .ml-velo {
  position: absolute; inset: 0; background: rgba(8,20,32,.45);
  opacity: 0; transition: opacity .18s ease;
}
html.touch .ml-sheet-corpo {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--carta); border-radius: 20px 20px 0 0;
  padding: var(--sp2) var(--sp3) calc(var(--sp4) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(8,20,32,.28);
  transform: translateY(102%); transition: transform .22s cubic-bezier(.3,.8,.4,1);
}
html.touch .ml-presa {
  width: 42px; height: 4px; border-radius: 2px; background: #cdd6df; margin: 4px auto 12px;
}
html.touch body.sheet-aperto .ml-sheet { pointer-events: auto; }
html.touch body.sheet-aperto .ml-velo { opacity: 1; }
html.touch body.sheet-aperto .ml-sheet-corpo { transform: none; }

html.touch .ml-sheet-voci { display: grid; gap: var(--sp2); }
html.touch .ml-sheet-voci a {
  display: flex; align-items: center; gap: var(--sp3); min-height: var(--tap);
  padding: 0 var(--sp3); border-radius: var(--rad-s); background: #f4f7fa;
  color: var(--testo); text-decoration: none; font-weight: 600; font-size: var(--fs-base);
}
html.touch .ml-sheet-voci a svg { color: var(--grigio); flex: none; }
html.touch .ml-sheet-voci a.esci { background: #fdeeee; color: #b3261e; }
html.touch .ml-sheet-voci a.esci svg { color: #b3261e; }

/* =========================================================================
   7. Selettore delle viste
   ========================================================================= */
/* Nell'intestazione del tema computer: tre bottoncini in alto a destra. */
.ml-temi { display: flex; align-items: center; gap: 4px; }
.ml-temi .et {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  opacity: .6; margin-right: 2px;
}
.ml-temi button {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 8px;
  padding: 6px 8px; cursor: pointer; font: 600 12px/1 inherit;
}
.ml-temi button span { display: none; }
.ml-temi button:hover { background: rgba(255,255,255,.28); }
.ml-temi button.on { background: #fff; color: var(--blu, #1976d2); }
.ml-temi-sheet { display: none; }

/* Nel pannello: tre bottoni larghi con l'etichetta scritta. */
html.touch .ml-temi-top { display: none; }
html.touch .ml-temi-sheet {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2);
  margin-bottom: var(--sp3);
}
html.touch .ml-temi-sheet .et {
  grid-column: 1 / -1; margin: 0 0 2px 2px; opacity: 1;
  color: var(--grigio); font-size: var(--fs-min); font-weight: 700;
}
html.touch .ml-temi-sheet button {
  flex-direction: column; gap: 5px; padding: 11px 4px; border-radius: var(--rad-s);
  background: #f4f7fa; color: var(--grigio); font-size: var(--fs-min); font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--bordo);
}
html.touch .ml-temi-sheet button span { display: block; }
html.touch .ml-temi-sheet button.on {
  background: var(--acc); color: #fff; box-shadow: none;
}

/* il ⋮ nell'intestazione apre il pannello anche senza scendere in fondo */
html.touch .ml-piu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-height: 0; flex: none; margin-left: auto;
  padding: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
}
html.touch header.top .spazio { flex: 1; }

/* =========================================================================
   8. Decorazioni (fondo per intensità e stelle)
   ========================================================================= */
/* Col dito non esiste il passaggio del mouse: quello che sul computer si accende
   avvicinandosi, qui deve essere già acceso — ma un po' più tenue, perché sotto
   ci si legge il testo. */
html.touch .filigrana.filigrana { opacity: .16; }
html.touch .mix-fondo { opacity: .42; height: 46%; }
html.touch .stelle svg { width: 19px; height: 19px; }