/* =============================================================================
   STILE iOS DA TELEFONO, PEZZO 2: I CAMPI DEI MODULI
   MARCA_96523_STILE_IOS_MODULI  (reparto IOS2, 28/10/2026, D1720 = D1617/D1631 stile B)

   Come nell'app RegiaPro Photo e nei moduli dell'iPhone: il campo e' una casella su un
   fondo grigio leggero, angoli a 12, alta 44 (il dito), il filo diventa quasi invisibile
   e torna pieno col colore dello studio quando ci scrivi. L'etichetta sopra e' piu'
   piccola e meno pesante; le caselle da spuntare sono righe intere da toccare.

   SOLO TELEFONO (fino a 768 punti): sul computer non cambia niente.
   Usa le variabili della 96521 (--ios-fill, --ios-r, --ios-alto): VUOLE LA 96521 PRIMA.
   Stesso posto e stesso peso della 96521: dopo i fogli comuni, prima dei fogli delle
   pagine. I campi che una pagina disegna a modo suo restano come sono.
   La pagina di accesso (login.html) non usa base.html: la prende solo se la Regia
   applica anche la 96527 (fuori zona: e' la pagina del reparto ACCESSI).
   Si toglie con la 96524.
   ============================================================================= */

@media (max-width:768px){

  /* ------------------------------------------------------------ 1. le caselle */
  .form-input,
  .form-select,
  .form-textarea{
    min-height:var(--ios-alto,44px);padding:10px 14px;
    background-color:var(--ios-fill);border:1px solid var(--line);border-radius:var(--ios-r,12px);
    color:var(--ink-strong);font-size:17px;
    transition:background-color .13s,border-color .13s,box-shadow .13s;
  }
  .form-select{padding-right:34px}
  .form-textarea{min-height:96px;line-height:1.45}
  .form-input::placeholder,
  .form-textarea::placeholder{color:var(--ink-3);opacity:1}
  /* quando ci scrivi: fondo chiaro, filo e alone del colore dello studio */
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus{background-color:var(--surface);border-color:var(--accent);outline:none;
    box-shadow:0 0 0 3px var(--accent-soft)}
  .form-input:disabled,
  .form-select:disabled,
  .form-textarea:disabled,
  .form-input[readonly]{opacity:.6}

  /* ------------------------------------------------------------ 2. le etichette e gli spazi */
  .form-group{gap:6px;margin-bottom:14px}
  .form-label{font-size:14px;font-weight:600;color:var(--ink-2);padding-left:2px}
  .form-hint{padding-left:2px}
  .form-row{gap:12px}

  /* ------------------------------------------------ 3. le caselle da spuntare: righe intere */
  .form-check{min-height:var(--ios-alto,44px);border-color:transparent;border-radius:var(--ios-r,12px);
    background:var(--ios-fill)}
  .form-check input[type="checkbox"],
  .form-check input[type="radio"]{width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto}

  /* ------------------------------------------------ 4. la pagina di accesso (solo con la 96527) */
  body .accesso-scheda input:not([type="checkbox"]):not([type="radio"]){
    min-height:var(--ios-alto,44px);background-color:var(--ios-fill);border-color:var(--line);
    border-radius:var(--ios-r,12px);font-size:17px}
  body .accesso-scheda input:not([type="checkbox"]):not([type="radio"]):focus{
    background-color:var(--surface);border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
  body .accesso-scheda input[type="checkbox"]{accent-color:var(--accent)}
}

@media (max-width:768px) and (prefers-reduced-motion:reduce){
  .form-input,.form-select,.form-textarea{transition:none}
}