/* ============================================================================
   ZONAR · SFONDO CHIARO ANCHE SU MOBILE / PWA
   Da caricare DOPO zonar-theme.css (vince per cascata).
   - Toglie il "faro" scuro dietro il contenuto e mette fondo bianco.
   - NON tocca la barra superiore (.zonar-tb*) né il menu inferiore (.zonar-tab*):
     restano con il loro sfondo e testo scuri/chiari originali.
   - Riporta il testo del contenuto a colori scuri leggibili.
   ============================================================================ */

@media (max-width: 1024px) {

  /* 1) via il faro: fondo chiaro uniforme come nella versione web */
  html { background: #f4f6fb !important; }
  body::before,
  body::after { display: none !important; content: none !important; }

  main#content { background: transparent !important; }

  /* 2) intestazione della schermata "Esplora" (erano bianche → riga 85 del tema) */
  .zonar-esplora-title { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
  .zonar-esplora-sub   { color: #64748b !important; }
  .zonar-esplora-sec   { color: #94a3b8 !important; }

  /* 3) etichette dei moduli (La Mia Tessera, Chi Siamo, …) = .zonar-mod-lbl */
  .zonar-mod           { color: #0f172a !important; }
  .zonar-mod-lbl       { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }

  /* 4) icone dei moduli: versione chiara (come fa il tema in desktop) */
  .zonar-mod-ico {
    background: #fff !important; border: 1px solid rgba(46,123,255,.16) !important;
    color: #2E7BFF !important; box-shadow: 0 6px 18px -12px rgba(15,23,42,.35) !important;
  }
  .zonar-mod:hover .zonar-mod-ico {
    background: #2E7BFF !important; border-color: #2E7BFF !important; color: #fff !important;
  }

  /* 5) testo generico del contenuto fuori dalle card (titoli/paragrafi delle pagine) */
  main#content > *:not(.kt-card):not(.zonar-tb):not(.zonar-tabbar) {
    color: #0f172a;
  }
  main#content .text-secondary-foreground { color: #64748b !important; }
  main#content .text-muted-foreground     { color: #94a3b8 !important; }

  /* ── NON TOCCATE (restano come nel tema): ──────────────────────────────────
     .zonar-tb, .zonar-tb-name, .zonar-tb-bell  → barra superiore
     .zonar-tab*, .zonar-tab-center             → menu inferiore
     .wbc-grad, .kt-btn-primary                 → bottoni pieni (testo bianco ok)
     .ag-hero *                                 → hero scuri con testo bianco     */
}