/* =============================================================================
   STILE iOS DA TELEFONO, PEZZO 1: VARIABILI E PULSANTI
   MARCA_96521_STILE_IOS_PULSANTI  (reparto IOS2, 28/10/2026, D1720 = D1617/D1631 stile B)

   Giovanni (D1617): «questi pulsanti stondati ... son vecchi? Meglio qualcosa come hai
   fatto per l'app in stile iOS piu' moderno? Occupano spazio e non mi convincono».
   D1631: «per le icone usa come l'app iOS ... lo stile il B». D1720: «da mobile vedo
   sempre ancora i vecchi pulsanti».
   Il modello e' la proposta B (lavori/61-direttive-25-ottobre/proposte-d1617/
   pulsanti-stile-ios.html), presa dall'app RegiaPro Photo:
     - angoli a 12 (non piu' la pillola), NESSUN filo attorno;
     - il principale pieno col colore dello studio, gli altri su un fondo grigio leggero;
     - «elimina» rosso tenue (fondo rosa, scritta rossa), non piu' il blocco rosso pieno;
     - le file di scelta (Elenco/Calendario, linguette) come il selettore dell'iPhone:
       un fondo grigio, e la scelta accesa e' una tessera chiara con l'ombra;
     - al tocco il pulsante si stringe appena (come su iPhone).

   SOLO TELEFONO (fino a 768 punti). Sul computer non cambia NIENTE: tutto il foglio sta
   dentro @media (max-width:768px), tranne le variabili, che da sole non disegnano nulla.
   Solo variabili del tema: tema scuro (data-theme) e i quattro colori del CRM seguono
   da soli, perche' il fondo grigio e' fatto mescolando il colore del testo.

   PESO DELLE REGOLE. Questo foglio si carica in base.html SUBITO DOPO pulsanti-stondati.css
   e PRIMA dei fogli delle singole pagine (il blocco extra_css), con lo stesso peso delle
   regole che sostituisce: vince sul tema e sulla pillola perche' viene dopo, e PERDE contro
   ogni foglio di pagina. E' voluto: nel CRM 156 pulsanti hanno una classe loro che decide
   colore o forma (il verde di WhatsApp, i tondi a icona, i «togli» rossi...); con un peso
   maggiore li avremmo spenti tutti. Le pagine curate a mano restano come sono (anche le
   pagine interne delle gallerie del reparto G2).
   Si toglie con la 96522.
   ============================================================================= */

:root{
  /* il fondo grigio dei pulsanti secondari e delle file di scelta: il testo al 9% e al 15% */
  --ios-fill:rgba(120,90,60,.10);
  --ios-fill-2:rgba(120,90,60,.16);
  --ios-r:12px;            /* angoli dei pulsanti */
  --ios-r-dentro:9px;      /* angoli delle tessere dentro un selettore */
  --ios-alto:44px;         /* altezza al telefono: il dito */
  --ios-ombra-scelta:0 1px 3px rgba(0,0,0,.14);
}
:root[data-theme="dark"]{--ios-fill:rgba(255,236,212,.08);--ios-fill-2:rgba(255,236,212,.14);--ios-ombra-scelta:0 1px 3px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ios-fill:rgba(255,236,212,.08);--ios-fill-2:rgba(255,236,212,.14);--ios-ombra-scelta:0 1px 3px rgba(0,0,0,.5)}}
@supports (color:color-mix(in srgb,red 50%,blue)){
  :root,:root[data-theme="dark"]{
    --ios-fill:color-mix(in srgb,var(--ink) 9%,transparent);
    --ios-fill-2:color-mix(in srgb,var(--ink) 15%,transparent);
  }
}

@media (max-width:768px){

  /* ---------------------------------------------------------- 1. i pulsanti */
  .btn,
  .btn.btn-secondary,
  .btn.btn-outline,
  .btn.btn-ghost{
    min-height:var(--ios-alto);padding:8px 15px;gap:7px;
    border-color:transparent;border-radius:var(--ios-r);
    background:var(--ios-fill);color:var(--ink-strong);
    font-weight:600;box-shadow:none;
    transition:background .13s,transform .13s;
  }
  .btn:hover,
  .btn.btn-secondary:hover,
  .btn.btn-outline:hover,
  .btn.btn-ghost:hover{background:var(--ios-fill-2);border-color:transparent;color:var(--ink-strong)}
  .btn:active:not(:disabled){transform:scale(.97)}

  /* il principale: pieno, col colore dello studio */
  .btn.btn-primary{background:var(--logo-gradient);border-color:transparent;color:var(--on-accent);
    font-weight:700;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
  .btn.btn-primary:hover{background:var(--accent-ink);color:var(--on-accent)}
  /* eliminare: rosso tenue */
  .btn.btn-danger{background:var(--bad-bg);border-color:transparent;color:var(--bad-ink);font-weight:700}
  .btn.btn-danger:hover{background:var(--bad-bg);color:var(--bad-ink);filter:brightness(.96)}
  /* confermare: resta verde pieno, solo la forma nuova */
  .btn.btn-success,
  .btn.btn-success:hover{border-color:transparent}

  /* piccoli: al telefono restano alti 44 (regola del tema), angoli un filo piu' stretti */
  .btn.btn-sm{min-height:var(--ios-alto);border-radius:11px;padding:6px 13px}
  .btn.btn-lg{border-radius:14px}

  /* il segno del tasto Tab resta sempre */
  .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

  /* le icone nei pulsanti: tratto un po' piu' deciso, come i simboli dell'iPhone. Peso zero
     (:where): le icone che hanno gia' un tratto o una misura loro (il «+» a 2,3, le frecce
     a 16 punti di componenti-comuni.css) restano come sono. */
  :where(.btn) > svg.ico:where(:not(.ico-piu)){stroke-width:1.9}

  /* spento e col mouse sopra: resta com'e' (componenti-comuni.css rimetteva i colori vecchi) */
  .btn.btn-primary:disabled:hover{background:var(--logo-gradient);border-color:transparent;color:var(--on-accent)}
  .btn.btn-danger:disabled:hover{background:var(--bad-bg);border-color:transparent;color:var(--bad-ink);filter:none}
  .btn.btn-success:disabled:hover{border-color:transparent}
  .btn.btn-outline:disabled:hover,
  .btn.btn-ghost:disabled:hover,
  .btn.btn-secondary:disabled:hover{background:var(--ios-fill);border-color:transparent}
  .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-outline):not(.btn-ghost):disabled:hover{
    background:var(--ios-fill);border-color:transparent}

  /* i pulsantini di contorno: stessa famiglia */
  .btn-riga,
  .cal-oggi{border-color:transparent;border-radius:10px;background:var(--ios-fill);color:var(--ink-strong)}
  .btn-riga:hover,
  .cal-oggi:hover{background:var(--ios-fill-2)}
  .cal-freccia{border-color:transparent;border-radius:11px;background:var(--ios-fill);color:var(--ink-strong)}
  body .cal-muoviti .cal-freccia{width:40px;height:40px}

  /* ------------------------------------------- 2. le file di scelta (selettore iPhone)
     .seg-group (viste di Social, Attivita', Documenti, lead), le viste del Calendario,
     le file di linguette (Impostazioni, Chatbot, Social, Gallerie, Portfolio, Corsi).
     Contenitore: fondo grigio, niente filo, niente ombra. Dentro: trasparenti.
     Accesa: tessera chiara con l'ombra, scritta piena. */
  body .seg-group,
  body .cal-viste,
  body .cal-barra .cal-viste,
  body .imp-schede,
  body .cb-schede:not(#cb-schede),
  body .soc-schede,
  body .gal-schede,
  body .pfsv-sotto-schede{
    background:var(--ios-fill);border:0;border-radius:var(--ios-r);box-shadow:none;padding:3px;gap:2px;
  }
  body .seg-group .btn,
  body .cal-viste button,
  body .cal-barra .cal-viste button,
  body .imp-scheda,
  body .cb-schede:not(#cb-schede) .cb-scheda,
  body .soc-scheda,
  body .gal-scheda,
  body .pfsv-sotto-scheda{
    border:0;border-radius:var(--ios-r-dentro);background:transparent;box-shadow:none;
    color:var(--ink-2);font-weight:500;transform:none;
  }
  body .seg-group .btn,
  body .cal-viste button,
  body .cal-barra .cal-viste button{min-height:38px}
  body .seg-group .btn:hover,
  body .cal-viste button:hover,
  body .imp-scheda:hover,
  body .cb-schede:not(#cb-schede) .cb-scheda:hover,
  body .soc-scheda:hover,
  body .gal-scheda:hover,
  body .pfsv-sotto-scheda:hover{background:var(--ios-fill);color:var(--ink-strong)}
  /* la scelta accesa: TUTTI i nomi in uso (memoria crm-foglio-comune-marcatore-diverso) */
  body .seg-group .btn.btn-primary,
  body .seg-group .btn.btn-primary:hover,
  body .cal-viste button.attiva,
  body .cal-barra .cal-viste button.attiva,
  body .imp-scheda.attiva,
  body .cb-schede:not(#cb-schede) .cb-scheda.attiva,
  body .cb-schede:not(#cb-schede) .cb-scheda.cb-scheda-attiva,
  body .soc-scheda.soc-scheda-qui,
  body .gal-scheda.gal-scheda-scelta,
  body .pfsv-sotto-scheda.attiva{
    background:var(--surface);background-image:none;border:0;color:var(--ink-strong);
    font-weight:650;box-shadow:var(--ios-ombra-scelta);
  }
  body .imp-scheda.attiva .imp-scheda-nome,
  body .cb-schede:not(#cb-schede) .cb-scheda.attiva .cb-scheda-nome,
  body .soc-scheda.soc-scheda-qui .soc-scheda-nome{font-weight:700}
  body .seg-group .btn:focus-visible,
  body .cal-viste button:focus-visible,
  body .imp-scheda:focus-visible,
  body .soc-scheda:focus-visible,
  body .gal-scheda:focus-visible,
  body .pfsv-sotto-scheda:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* Foto / Video dentro la galleria: le due scelte sciolte */
  body .gal-media-tab button{border-radius:var(--ios-r-dentro)}
  body .gal-media-tab .gal-media-tab-attiva{background:var(--surface);border-color:transparent;
    color:var(--ink-strong);font-weight:650;box-shadow:var(--ios-ombra-scelta)}

  /* gli interruttori e l'anno accanto alle viste del Calendario: angoli come i pulsanti */
  body .cal-scelte > .cal-anno,
  body .cal-barra .cal-scelte .cal-cmd-menu,
  body .cal-barra .cal-scelte .cal-cmd-filtro{border-radius:var(--ios-r)}
}

@media (max-width:768px) and (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:active:not(:disabled){transform:none}
}