/* ============================================================================
   mobile.css — Correzioni per schermo di telefono.

   Sta in un file suo, caricato DOPO gli stili delle singole viste, perché è
   l'unico modo perché vinca: ogni pagina porta il proprio blocco <style> nella
   testa, e a parità di specificità comanda l'ultimo che arriva. Senza questo
   file servirebbe rincorrere le stesse correzioni dentro dodici template.

   Ogni regola qui dentro nasce da una misura di `audit_mobile.py` a 390 e
   320 px, non da un'impressione: nessun bersaglio sotto i 44 px, nessun testo
   sotto gli 11 px, nessuno sforo orizzontale.
   ============================================================================ */

@media (max-width: 820px){

  /* ── Testo: le etichette tecniche del sistema, che da desktop stanno a
        9-10 px, sul telefono vanno alzate o si legge a fatica. ───────────── */
  .eyebrow,
  .sez > h2, .blocco > h2,          /* intestazioni di sezione */
  .kpi .et, .stat .et, .cifre .et, .cifre .tre .et,
  .campo label, .riga-v .et,
  .prod .cat, .voce .nota, .passi-storia,
  .cp .e, .cp .segno, .doc .cima b,
  .logo small, .avanz-testo, .foto-doc .et,
  .carica .nomefile, .salvataggio{
    font-size:11px !important;
    letter-spacing:.12em;
  }
  .kpi .et, .stat .et, .cifre .et{letter-spacing:.14em}
  thead th{font-size:11px !important; letter-spacing:.1em}
  .aiuto, .msg-errore, .didascalia, .fine, .legale, .nota-finale{font-size:12.5px !important}

  /* ── Bersagli: tutto ciò che si preme sta almeno in un polpastrello. ──── */
  .btn, .chip, .mini,
  .filtri input, .filtri select, .filtri .chip,
  .durate button, .seg button,
  .barra nav a, aside nav a{
    min-height:46px !important;
  }
  .btn.piccolo, .mini{min-height:44px !important; padding:11px 18px !important;
                      font-size:13px !important}
  .barra nav a, aside nav a{display:flex !important; align-items:center;
                            font-size:14px !important}
  .barra .chi{font-size:13px}
  .barra .chi a{display:inline-flex; align-items:center; min-height:44px;
                padding:0 8px}
  .sub a, .htop .sub a{display:inline-flex; align-items:center; min-height:44px}

  /* Quadretti del colore: quattro per riga invece di otto, ma afferrabili. */
  .colori{gap:12px}
  .colori button{width:46px !important; height:46px !important}

  /* La ✕ per togliere una foto resta a 40 px: su una miniatura di 96 px un
     bersaglio da 44 coprirebbe metà dell'immagine e nasconderebbe ciò che si
     sta decidendo di rimuovere. È l'unica eccezione consapevole. */
  .foto-item button{width:40px !important; height:40px !important; font-size:16px}

  /* Le caselle di spunta sono piccole per natura: quello che si preme è
     l'etichetta intera, che è già alta abbastanza. */
  .consenso{min-height:52px; align-items:center}

  /* ── Niente pannelli appiccicati su schermo corto: su telefono lo spazio
        verticale è tutto, e un blocco sticky alto mezza pagina copre il
        contenuto invece di aiutare. ───────────────────────────────────────── */
  .esito, .anteprima, .telaio{position:static !important}
  .esito{margin-top:18px}

  /* ── Form: 16 px evita che Safari ingrandisca da solo al primo tocco. ─── */
  .campo input, .campo select, .campo textarea,
  .riga-v input, .filtri input, .filtri select{
    font-size:16px !important; min-height:48px !important;
  }

  /* ── Contenuti larghi: scorre il riquadro, mai la pagina. ─────────────── */
  .scroll-x, .card > table{overflow-x:auto; -webkit-overflow-scrolling:touch}
  pre{font-size:11px !important}
  .riga-v .basso{grid-template-columns:1fr 1fr !important; gap:11px}
  .riga-v .tot{grid-column:1 / -1; text-align:right; padding-bottom:0}
}

@media (max-width: 380px){
  .kpi, .stat, .cifre, .cifre .tre, .griglia.due, .griglia.tre,
  .coppia, .terzine{grid-template-columns:1fr !important}
  .htop .btn{width:100%}
}

/* ── Correzioni mirate emerse dal secondo giro di misure ────────────────── */
@media (max-width: 820px){
  /* Bottoni durata: il numero grande e la scritta sotto stanno in 48 px. */
  .durate button, .seg button{min-height:52px !important}
  .durate button small, .seg button small,
  .rchip span, .rata-riep .cif small{font-size:11px !important}

  /* Righe copiabili della console: si premono una per una mentre si compila
     la mascherina, quindi devono essere comode quanto un bottone. */
  .cp{min-height:48px !important}

  /* Etichette rimaste indietro */
  .rata-box .et, .rata-riep .sot, .foglio .righe,
  #salvato, .fondo .msg, footer .ml, .ml{font-size:11px !important}
  .htop .sub, .sub{font-size:12.5px}
}

/* ── Ultimo giro: quello che le misure hanno scovato per ultimo ─────────── */
@media (max-width: 820px){
  /* I due tab del builder (Compila / Anteprima): sono la navigazione
     principale della pagina su telefono, non un dettaglio. */
  .tabs button{min-height:48px !important; font-size:14px !important}

  /* La ✕ sulle foto va a 44 come tutto il resto: nessuna eccezione. */
  .foto-item button{width:44px !important; height:44px !important}

  /* Testi minuti rimasti: calcolatore della landing, titoli dei piani,
     riga della data in fondo all'avanzamento. */
  .calc .fl, .calc .ol span, .calc .ccard .row1 span,
  .plan h5, footer .mono, .foglio .fine{font-size:11.5px !important}

  /* Link del piè di pagina pubblico */
  footer a, .fcol a, nav.top .links a{min-height:44px !important;
                                      display:inline-flex; align-items:center}
}

@media (max-width: 820px){
  /* Ultimi minuti della landing: etichetta «2 mesi inclusi» sul piano
     annuale, pill dell'hero, etichette del calcolatore. */
  .save, .pill, .pill b, .calc .seg button, .calc .out span,
  .step .n, .bcell h3 small, .marq span{font-size:11.5px !important}
  .save{padding:5px 11px}
}

@media (max-width: 820px){
  /* Intestazioni delle colonne nel piè di pagina */
  .cols b, footer b{font-size:11.5px !important}
}

@media (max-width: 820px){
  /* Righe della mascherina: da telefono l'etichetta va SOPRA il valore.
     Affiancate, l'etichetta si prende 150 px dei 390 disponibili e il dato
     si spezza a metà — «1985-08-» a capo «01», il codice fiscale su due
     righe. Le misure erano a posto, la leggibilità no. */
  .cp{flex-direction:column; align-items:flex-start; gap:3px;
      padding:11px 13px; position:relative}
  .cp .e{min-width:0; width:100%}
  .cp .v{font-size:15px; width:100%; word-break:normal; overflow-wrap:anywhere}
  .cp .segno{position:absolute; top:11px; right:13px; opacity:.55}

  /* Stessa logica sulle righe dato della scheda cliente */
  .dato{flex-direction:column; align-items:flex-start; gap:2px; padding:10px 0}
  .dato .v{text-align:left; font-size:14px}
  .dato .e{font-size:11px}
}

/* ── Aurora: regole rientrate dopo il rifacimento del foglio principale ── */
@media (max-width: 820px){
  /* Il marchio in barra è anche il link alla panoramica. */
  .logo{min-height:44px; align-items:center}
  /* Etichetta con casella di spunta: si preme l'etichetta, quindi è lei che
     deve essere alta abbastanza. */
  label.riga{min-height:44px; align-items:center}
}

@media (max-width: 820px){
  /* Etichette dentro il documento illustrativo e sui bottoni durata */
  .doc .rate .et, .doc .rate .tre small, .calc .seg button small,
  .rchip span{font-size:11px !important}
}

/* ── Console negozi: pannello «Nuovo negozio» e credenziali per riga ────── */
@media (max-width: 820px){
  /* Il riepilogo apre il pannello: è un bersaglio, non un titolo. */
  details.pannello > summary{min-height:44px !important}
  /* I due campi della credenziale stanno dentro la tabella: 16 px perché
     Safari non ingrandisca da solo al primo tocco, 44 px per il polpastrello. */
  .modcred input{font-size:16px !important; min-height:44px !important}
  /* «ultimo accesso …» sotto l'email dell'esercente */
  .accessi .dim{font-size:11px !important}
}