/* ===========================================================================
   VISTA CAMPO — intensita' MINIMA.
   Si attiva con `<body class="campo">` quando la sezione aperta e' di campo
   (ronde, timbratura, incasso sul campo).

   La regola, da `06-viste-e-ruoli.md` e `08-prototipo-interfaccia.md`:
   contrasto e dimensione prima di tutto, si lavora al buio, nessun nucleo
   animato, bersagli oltre 78px. Un'interfaccia che impressiona ma fa sbagliare
   una guardia alle tre di notte e' un fallimento, per quanto bella sia.

   ⚠️ 78px vale ANCHE per la casella del codice: si scrive con i guanti.
   =========================================================================== */

body.campo{ --scala:1.16 }

/* Nessun nucleo sul campo: ogni pixel e' un bersaglio. */
body.campo .palco,
body.campo .palco-chat{display:none}

/* Niente animazioni: distraggono, e di notte abbagliano. */
body.campo *,
body.campo *::before,
body.campo *::after{
  animation-duration:0s !important;
  animation-iteration-count:1 !important;
  transition-duration:0s !important;
}

body.campo .main{gap:14px}

/* Bersagli grandi. */
body.campo button.agisci,
body.campo .schede button,
body.campo form.campi input,
body.campo form.campi select,
body.campo form.campi textarea{
  min-height:78px;
  font-size:calc(16px * var(--scala));
}
body.campo button.agisci{
  letter-spacing:.14em;
  width:100%;
  padding:0 18px;
}
body.campo .azioni{flex-direction:column;gap:12px}
body.campo .schede{gap:10px}
body.campo .schede button{flex:1 1 150px}
body.campo form.campi{grid-template-columns:minmax(0,1fr);gap:14px}

/* ⭐ Il bersaglio piu' importante di tutti: il campo del codice del punto.
   Testo grande, monospazio, tutto maiuscolo: si confronta con un'etichetta
   stampata, al buio, con i guanti. */
body.campo input.codice{
  min-height:78px;
  font:600 calc(20px * var(--scala))/1.2 var(--f-mono);
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}

/* Le righe di elenco sul campo diventano bersagli, non testo. */
body.campo .righe li{padding:14px 0;font-size:calc(15px * var(--scala))}
body.campo button.bersaglio{
  display:block;width:100%;min-height:78px;text-align:left;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--fg);
  padding:12px 14px;border-radius:3px;margin-bottom:10px;
  font-size:calc(15px * var(--scala));line-height:1.4;
}
body.campo button.bersaglio:hover{border-color:var(--state)}
body.campo button.bersaglio small{display:block;color:var(--muted);font-size:calc(12.5px * var(--scala))}

/* Lo stato di una riga in coda: si vede da lontano, e si legge senza colore
   (chi non distingue il verde dal rosso deve capire lo stesso). */
.coda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.coda li{
  border:1px solid var(--line-2);background:var(--panel);padding:10px 12px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  font-size:13.5px;
}
.coda li .motivo{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.coda li.in-attesa{border-left:3px solid var(--warn)}
.coda li.inviata{border-left:3px solid var(--talk)}
.coda li.rifiutata{border-left:3px solid var(--think)}

/* L'avvertenza su HTTPS: fotocamera e GPS funzionano solo su `https://` o
   `localhost`. Su `http://10.0.0.x` il browser non li chiede nemmeno — e la
   pagina lo scrive, invece di sembrare rotta. */
.avvertenza-contesto{
  margin:0;padding:11px 13px;border:1px dashed var(--warn);color:var(--warn);
  font:12px/1.55 var(--f-body);
}

@media (max-width:860px){
  body.campo .main{padding:12px}
  body.campo .chat{display:none}  /* sul campo tre azioni e basta: la chat non serve */
}

/* ===================== LE PAGINE CHE SI USANO IN GIRO (2026-11-07) =====================
   Presenze e Ronde non sono di campo (`nucleo: "ridotto"`, il menu resta), ma il capo
   servizio le apre col telefono in mano durante il giro. Le loro schede portano
   `.pagina-giro`, e sul telefono — o dove si tocca col dito — diventano una colonna sola
   con bersagli da 48px e caselle a 16px.

   ⚠️ Perche' 16px: sotto, Safari su iPhone ingrandisce la pagina al tocco di una casella e
   non la rimette a posto — la guardia si ritrova a scorrere di lato una pagina che prima
   stava nello schermo. Misurato prima di questa regola: le date e le tendine dei filtri
   erano a 10px. */
@media (pointer:coarse), (max-width:860px){
  .pagina-giro form.campi{grid-template-columns:minmax(0,1fr);gap:12px}
  .pagina-giro form.campi label{font-size:11px}
  .pagina-giro form.campi input,
  .pagina-giro form.campi select,
  .pagina-giro form.campi textarea,
  .pagina-giro select,
  .pagina-giro input:not([type="checkbox"]):not([type="radio"]){min-height:48px;font-size:16px}
  .pagina-giro button.agisci{min-height:48px}
  .pagina-giro form.campi button.agisci{width:100%}
  .pagina-giro input[type="checkbox"]{width:22px;height:22px}
  .pagina-giro table.tabella{font-size:13.5px}
  .pagina-giro table.tabella td{padding-top:10px;padding-bottom:10px}
  /* le ore e i conteggi non si spezzano: «8 h 00» su tre righe non si legge; se la tabella
     non ci sta, scorre dentro il suo riquadro (`.tabella-involucro`), non la pagina */
  .pagina-giro table.tabella td.num{white-space:nowrap}
}

/* ======================= LA DASHBOARD SUL TELEFONO (2026-11-07) =======================
   Elisa: *«ottimizzazione visiva per mobile»*. Le colonne della Dashboard le decidono gia'
   le container query di `base.css` (una sotto i 400px); qui sta cio' che serve AL DITO, e
   sta in questo foglio perche' `base.css` e' della parte comune.

   Due condizioni, e non una: `pointer:coarse` e' lo schermo a dito anche quando e' largo
   (un tablet in orizzontale), `max-width:860px` e' la pagina impilata del telefono anche
   quando il browser non dichiara il dito. Sopra gli 860px col mouse NON CAMBIA NIENTE.

   ⚠️ 16px nelle tendine non e' gusto: sotto i 16px Safari su iPhone ingrandisce la pagina
   al tocco, e poi non la rimette a posto. */
@media (pointer:coarse), (max-width:860px){
  .periodo button{min-height:44px;padding:0 14px}
  .periodo-scelta{min-height:44px;font-size:16px}
  /* il bersaglio cresce verso l'alto: la sottolineatura resta sotto l'importo */
  .grafico-totali .totale.ricavi{padding-top:12px;margin-top:-8px}
  .costi-testa{min-height:44px}
  .costi-barra button.agisci.piccolo{min-height:44px;padding:0 14px}
  /* l'interruttore «nel margine»: la casella resta piccola, il bersaglio e' l'etichetta */
  .nel-margine{min-height:44px;padding:0 4px;font-size:11px}
  .nel-margine input{width:20px;height:20px}
  .maniglia{display:none}   /* col dito non si trascina: ci sono «su» e «giu'» */
}
/* «su» e «giu'» del badge: nascosti col mouse su schermo largo, dove si trascina.
   ⚠️ La regola che li accende sta DOPO questa, non prima: a pari specificita' vince
   l'ultima, e scritta sopra non li mostrava mai (misurato: `display:none` a 360px). */
.badge-sposta{display:none;gap:8px;justify-content:flex-end}
@media (pointer:coarse), (max-width:860px){
  .badge-sposta{display:flex}
}
.badge-sposta .sposta{
  min-width:44px;min-height:44px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--muted);
  font:600 14px/1 var(--f-mono);border-radius:3px;
}
.badge-sposta .sposta:disabled{opacity:.3;cursor:default}
.badge-sposta .sposta:focus-visible{outline:1px solid var(--state)}

/* La testa stretta: titolo e «i» su una riga, i tre bottoni del periodo a tutta larghezza
   sotto, poi le tendine, poi le date. */
@container cruscotto (max-width:520px){
  .cruscotto-testa .spazio{flex-basis:100%;height:0}
  .periodo{flex:1 1 100%}
  .periodo button{flex:1 1 0}
  .periodo-scelta{flex:1 1 120px}
  .periodo-testo{flex:1 1 100%;white-space:normal}
  .grafico-tela,.grafici.uno .grafico-tela{height:240px}
  .grafico{padding:10px 10px 11px}
  .costi-testa{flex:1 1 0}   /* la «i» resta accanto, non va a capo da sola */
  .costi-barra .spazio{display:none}
  .costi-barra button.agisci.piccolo{flex:1 1 100%}
  .mezzaluna-disegno{max-width:260px}
}

/* La finestra del dettaglio sul telefono: mai piu' alta dello schermo, e le righe lunghe
   vanno a capo invece di spingere. */
@media (max-width:480px){
  .finestra-dettaglio{max-height:calc(100dvh - 16px)}
  .finestra-dettaglio .righe .x{min-width:0;overflow-wrap:anywhere}
}