/* =============================================================================
mobile-app.css — il portale da TELEFONO (≤768px), dal 04/10/2026
=============================================================================
Scelte di Gab sul mockup del 03-04/10/2026, poi passate per due review
avversariali del progetto prima di scrivere il codice:
- TESTATA: fascia bordeaux, gettoni a sinistra, «come si usa» e campanella a
destra, sotto il marchio grande col claim. Si RIDUCE gradualmente a una riga
(logo piccolo a sinistra): la guida è `--k`, da 0 (grande) a 1 (una riga),
scritta da app.js (initAppMobile). ⚠️ Dal 07/10/2026 è SEMPRE chiusa (Gab:
«comprimi la parte alta»): `_mobForzaChiusa` risponde sì su ogni telefono, e la
testata grande col claim non si vede più. La macchina di `--k` resta intera, e
togliere quella riga la riporta com'era (Elenco che la guida, tocco che la chiude).
- LA PAGINA NON SCORRE: testata, contatori, schede e filtri restano fermi;
scorre l'Elenco o si muove la mappa, nient'altro.
- BARRA IN BASSO: è `#main-nav` stessa (i tab Radar/Posizioni/Osservatorio),
non una copia. Così la voce accesa la decide `attivaVista` come sul desktop
(`.view-btn.active`), e i badge — contatore delle posizioni, «sblocca»
dell'Osservatorio — sono gli stessi. In fondo c'è il Profilo, che apre il
menu dell'avatar come pannello dal basso.
- Elenco = le CARD (con le foto), non la tabella del desktop: in Elenco la
mappa resta al suo posto, coperta dalle card, così Leaflet non la crede mai
0×0 e «la zona inquadrata» resta quella.
- Potenziali pignoramenti: una pillola sulla mappa, una cosa sola alla volta
col nastro verde; in Elenco il nastro resta in cima alle card.
STACKING. La barra e il pannello del Profilo vivono dentro `.topbar`, che ha
`z-index: 10` (style.css): sopra la mappa (`.map-section` è un contesto a
`z-index: 0`) e SOTTO scheda (1100), pannello Filtri (1200), modale della zona
(1300) e `.dd-modal` (2000). È voluto: la barra non deve mai coprire una
schermata aperta sopra. Per la stessa ragione su `.topbar` e sui suoi antenati
non va MAI messo un `transform` o un `filter`: farebbero della topbar il
riquadro dei suoi `position: fixed`, e la barra salirebbe in cima.
============================================================================= */
/* Le parti che esistono SOLO da telefono: sul desktop non si vedono e non si
leggono (display:none le toglie anche ai lettori di schermo). */
.vb-ico, .vb-lbl, .nav-ind, .nav-profilo, .brand-claim, .bell-ico, .sheet-testa { display: none; }
@media (max-width: 768px) {
/* ── La pagina: un guscio alto quanto lo schermo, che non scorre ─────────── */
html, body { overflow: hidden; overscroll-behavior: none; }
body { height: 100vh; height: 100dvh; min-height: 0; overflow-y: hidden; }
/* ── TESTATA ───────────────────────────────────────────────────────────────
Altezze: riga dei comandi 38 + marchio grande 78 (che sparisce con k) +
22 di fascia che le card coprono con gli angoli arrotondati. */
.topbar {
--k: 0;
display: block; position: relative;
height: calc(10px + 38px + 82px * (1 - var(--k)) + 30px);
z-index: 10;
min-height: 0;
padding: 10px 14px 0;
background: var(--brand, #6B2C39);
border-bottom: 0; box-shadow: none;
flex-wrap: nowrap;
}
/* Il brand è posato SOPRA la fascia, e `--k` lo porta dal centro della seconda
riga (grande) all'angolo della prima (piccolo): una sola trasformazione, così
il passaggio è continuo e non un salto fra due impaginazioni. */
.topbar .brand-link {
position: absolute; z-index: 1;
top: calc(56px * (1 - var(--k)) + 12px * var(--k));
left: calc(50% * (1 - var(--k)) + 12px * var(--k));
transform: translateX(calc(-50% * (1 - var(--k)))) scale(calc(1 - 0.42 * var(--k)));
transform-origin: 0 0;
margin: 0; padding: 2px 4px;
color: #F7F3EC;
}
.topbar .brand { flex-direction: column; align-items: center; gap: 0; }
.brand-link > .logo-mark { display: none; }
.brand-text { display: flex; flex-direction: column; align-items: center; }
.brand-text h1 {
display: flex; align-items: center; gap: 10px;
font-size: 36px; line-height: 1.05; letter-spacing: -0.01em;
color: #F7F3EC; white-space: nowrap;
}
/* Il marchio sta prima del nome, dentro l'h1 visivamente: è un'immagine di
sfondo, non un nodo in più (l'unico `` resta nascosto qui sopra). */
.brand-text h1::before {
content: ""; flex: none; width: 42px; height: 42px;
background: url("/radar-mark.svg") center / contain no-repeat;
filter: brightness(0) invert(1) sepia(.25);
}
.brand-text h1 .brand-accent { color: #D9BE85; font-style: normal; }
/* Testata chiusa su un telefono dove i comandi non ci stanno accanto al nome: resta il
marchio, il nome si toglie (Gab, 07/10/2026). La classe la mette `_mobImpostaK`
solo quando la misura lo chiede. `font-size: 0` toglie il testo e la sua larghezza;
il marchio è il `::before`, che ha dimensioni sue. */
.topbar.solo-marchio .brand-text h1 { font-size: 0; gap: 0; }
.brand-text .subtitle { display: none; }
/* Il claim sta FUORI dal flusso: largo com'è, allargava il link del logo anche a testata
chiusa (invisibile ma toccabile, fin sopra i gettoni). */
.brand-claim {
display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
margin-top: 4px;
font-size: 15px; line-height: 1.3; text-align: center; white-space: nowrap;
color: rgba(247, 243, 236, .9);
opacity: clamp(0, calc(1 - var(--k) * 2.2), 1);
}
.brand-claim em { font-family: var(--font-serif); font-style: italic; color: #E4CB93; }
/* Sotto i 360 px il claim intero non ci sta: si stringe invece di uscire. */
@media (max-width: 359px) { .brand-claim { font-size: 13px; } .brand-text h1 { font-size: 31px; } }
/* La riga dei comandi: gettoni a sinistra, il resto a destra. Coi gettoni
scivola a destra di quanto serve al logo piccolo (`--mini-w`, misurata da
app.js), proporzionalmente a k. */
.topbar-right {
display: flex; align-items: center; gap: 8px;
height: 38px; margin: 0;
flex-wrap: nowrap; justify-content: flex-start;
}
/* Il logo che scivola nell'angolo passerebbe SOPRA i gettoni: a metà corsa i gettoni
si dissolvono, cambiano posto mentre sono invisibili (`--saldo-sx`: 0 a sinistra,
poi accanto al logo piccolo) e riappaiono quando il logo è arrivato. app.js scrive
i due valori insieme a `--k`. */
.topbar-right { justify-content: flex-end; padding-left: var(--saldo-sx, 0px); }
.topbar-right > .saldo-token { opacity: var(--saldo-o, 1); }
.topbar.saldo-via .topbar-right > .saldo-token { pointer-events: none; }
/* I gettoni a sinistra, tutto il resto a destra; senza gettoni (lo staff non li
ha) i comandi restano comunque a destra. */
.topbar-right > .saldo-token { margin-right: auto !important; }
/* Con le chiavi (0033) le pillole sono due, una dopo l'altra: lo spazio libero va
DOPO la seconda, non fra le due. */
.topbar-right > .saldo-token:has(+ .saldo-chiavi:not(.hidden)) { margin-right: 0 !important; }
.topbar-right > * { flex: none; }
.topbar-right > .saldo-token,
#file-input-label, #btn-come-si-usa, .avvisi-bell {
height: 38px; border-radius: 19px;
background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
color: #F7F3EC; box-shadow: none;
}
.topbar-right > .saldo-token { padding: 0 12px; }
.topbar-right > .saldo-token, .topbar-right > .saldo-token * { color: #F7F3EC; }
#btn-come-si-usa, .avvisi-bell { width: 38px; padding: 0; justify-content: center; }
#btn-come-si-usa .ph { color: #fff; font-size: 19px; }
#file-input-label { padding: 0 12px; }
#file-input-label .excel-testo {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* La campanella: un'icona bianca a linea, non l'emoji dorata (Gab, 04/10/2026). */
.avvisi-bell .bell-emoji { display: none; }
.avvisi-bell .bell-ico { display: inline; font-size: 20px; color: #fff; }
.avvisi-menu { position: static; }
.avvisi-panel { position: fixed; top: 56px; right: 8px; left: 8px; width: auto; max-width: none; }
/* L'avatar non sta più in alto: è la voce Profilo della barra. Il contenitore
resta, perché dentro c'è il menu che diventa il pannello dal basso. */
.user-trigger { display: none; }
.user-menu { position: static; }
#nav-burger { display: none !important; }
/* Gli angoli arrotondati da cui «sale» il contenuto sono disegnati DENTRO la
testata (i suoi ultimi 22 px), non da un margine negativo di chi viene dopo:
la testata ha `z-index: 10` e coprirebbe qualunque cosa le salga sopra. */
.topbar::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
background: var(--bg-2); border-radius: 22px 22px 0 0;
}
.metrics-strip, .lists-bar, .banner-abbonamento, .banner-webinar, .banner-aste-metriche { flex-shrink: 0; }
/* La maniglia «+N» dei contatori sporge sotto il loro bordo, sulla colonna dei filtri
(che qui ha `z-index: 2` per stare sopra la mappa): la barra dei contatori le sta sopra. */
.metrics-strip { z-index: 3; margin-top: -6px; }
/* ── Il corpo: la vista Radar prende tutto lo spazio che resta ─────────── */
main.layout {
flex: 1 1 auto; min-height: 0; height: auto;
display: flex; flex-direction: column; gap: 0;
overflow: hidden; position: relative;
background: var(--bg);
}
main.layout.hidden { display: none; }
/* La colonna dei filtri: ferma, alta quanto il suo contenuto. È anche il
riquadro di riferimento delle card in Elenco e della pillola dei potenziali,
che si appendono al suo bordo inferiore (`top: 100%`): `container-type` sulla
sidebar (responsive.css) la rende il loro contenitore. */
main.layout > .sidebar {
flex: 0 0 auto; height: auto; max-height: none; min-height: 0;
overflow: visible; position: relative; z-index: 2;
border-radius: 0 0 14px 14px;
}
/* ⚠️ Lo `z-index: 2` qui sopra fa della colonna un contesto di impilamento, e il pannello
Filtri (`#pannello-filtri`, fixed a 1200) è suo FIGLIO: dentro la radice varrebbe 2, cioè
sotto testata (10), contatori (3) e barra — la X dei filtri apriva la campanella e «Vedi i
risultati» stava sotto la barra (review del 04/10/2026). A pannello aperto la colonna
sale sopra tutto, e barra e lampadina si tolgono di mezzo. */
/* ⚠️ E NON BASTA IN WEBKIT (Safari, e Chrome su iPhone — 06/10/2026, visto sul telefono
di Gab): lì l'`overflow: hidden` di `main.layout` tiene il pannello SOTTO testata, banner
e contatori anche con la colonna a 1250, e si vede solo la sua metà bassa. Riprodotto in
Safari coi CSS veri, una regola per volta: la colonna a 1250 da sola non cambia niente,
`overflow: visible` sì. Chrome non lo fa, ed è per questo che il collaudo era verde. A
pannello aperto il guscio smette di ritagliare: il pannello copre tutto lo schermo, non
c'è niente da tenere dentro. La classe la mettono e la tolgono `apriPannelloFiltri` e
`chiudiPannelloFiltri` (app.js): non dipende da quando WebKit rivaluta un `:has`. */
body.filtri-aperti main.layout { overflow: visible; }
body.filtri-aperti main.layout > .sidebar { z-index: 1250; }
body.filtri-aperti #main-nav,
body.filtri-aperti .fb-floating-btn { display: none; }
main.layout > .map-section {
flex: 1 1 auto; min-height: 0; height: auto;
border-radius: 0; border-top: 0;
}
#resize-sidebar, #list-expand-toggle, #segui-mappa-wrap { display: none !important; }
/* Vista MAPPA: sotto i filtri solo la mappa, fino al fondo dello schermo (la
barra le galleggia sopra: scelta di Gab). Le card non ci sono. */
main.layout:not(.mob-elenco) #list { display: none; }
/* Vista ELENCO: le card coprono la mappa, che resta lì sotto alla sua misura. */
main.layout.mob-elenco #list {
display: block;
position: absolute; left: 0; right: 0;
top: calc(100% + var(--mob-nastro, 0px));
height: calc(var(--mob-mappa-h, 400px) - var(--mob-nastro, 0px));
max-height: none; min-height: 0;
overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 96px;
background: var(--bg);
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
margin: 0;
}
main.layout.mob-elenco #list-table { display: none !important; }
/* In Elenco la mappa non si tocca: sta sotto le card solo per tenere la misura. */
main.layout.mob-elenco .map-section { pointer-events: none; }
/* …tranne ciò che le card lasciano scoperto in cima e che è un comando: il nastro dei
potenziali col suo «Chiudi» e la pillola della zona del Mercato libero. */
main.layout.mob-elenco .map-section #pot-nastro,
main.layout.mob-elenco .map-section #ml-zona { pointer-events: auto; }
main.layout.mob-elenco .map-section .leaflet-control-container,
main.layout.mob-elenco .map-legends { visibility: hidden; }
/* I comandi in fondo alla mappa salgono sopra la barra. Solo la mappa grande:
la piccola dentro la scheda (contesto zona) non ha la barra sotto. */
#map .leaflet-bottom { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
.map-section .map-legends { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
/* ── POTENZIALI PIGNORAMENTI: pillola sulla mappa, in alto a destra ─────── */
/* Il suo riquadro di riferimento è `.filters` (position: relative), non la colonna
intera: `--mob-sotto-filtri` (app.js) è la distanza fra la cima dei filtri e il
fondo della colonna, cioè l'inizio della mappa. */
main.layout:not(.mob-elenco) .sidebar #pot-controllo {
position: absolute; top: calc(var(--mob-sotto-filtri, 120px) + 12px); right: 12px;
width: auto; max-width: calc(100% - 76px); height: 40px; margin: 0;
padding: 0 4px 0 12px; border-radius: 20px;
box-shadow: 0 4px 14px rgba(60, 30, 20, .16);
}
main.layout:not(.mob-elenco) .sidebar #pot-controllo .pot-btn { height: 32px; border-radius: 16px; padding: 0 14px; font-size: 13px; }
/* Una cosa sola alla volta: acceso, parla il nastro verde (che ha il suo
«Chiudi»); in Elenco la pillola non c'è. */
main.layout .sidebar #pot-controllo.on,
main.layout.mob-elenco .sidebar #pot-controllo { display: none; }
/* Sul Mercato libero l'angolo è della pillola della zona: i potenziali scendono sotto. */
main.layout:has(#ml-zona:not([hidden])) .sidebar #pot-controllo { top: calc(var(--mob-sotto-filtri, 120px) + 60px); }
/* ── LA BARRA IN BASSO (#main-nav) ─────────────────────────────────────── */
#main-nav.view-switcher {
display: flex; flex-direction: row; align-items: stretch; gap: 0;
position: fixed; z-index: 20;
left: 14px; right: 14px; top: auto;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
padding: 5px; margin: 0;
background: rgba(255, 255, 255, .97);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(60, 30, 20, .06); border-radius: 30px;
box-shadow: 0 6px 22px rgba(60, 30, 20, .17), 0 1px 3px rgba(60, 30, 20, .08);
}
#main-nav .view-btn, #main-nav .nav-profilo {
flex: 1 1 0; min-width: 0; width: auto;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
height: 50px; padding: 0; margin: 0;
border: 0; border-radius: 25px; background: transparent; box-shadow: none;
color: #3A302A; font-family: var(--font-sans); font-size: 11px; font-weight: 600;
position: relative; z-index: 1; text-align: center;
transition: color .25s; -webkit-tap-highlight-color: transparent;
}
#main-nav .view-btn.active, #main-nav .view-btn.active:hover,
#main-nav .nav-profilo[aria-expanded="true"] {
background: transparent; box-shadow: none; filter: none; color: var(--brand, #6B2C39);
}
#main-nav .view-btn:hover:not(.active) { background: transparent; }
#main-nav .view-btn:focus-visible, #main-nav .nav-profilo:focus-visible {
outline: 2px solid var(--brand, #6B2C39); outline-offset: -2px;
}
#main-nav .view-btn.hidden { display: none; }
#main-nav .view-btn-testo { display: none; }
#main-nav .vb-lbl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#main-nav .vb-ico { display: block; font-size: 22px; line-height: 1; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
#main-nav .view-btn.active .vb-ico { transform: translateY(-1px) scale(1.08); }
#main-nav .view-btn:active .vb-ico { transform: scale(.9); }
/* La pillola chiara sotto la voce accesa: UN elemento che scivola (app.js la
sposta). Il bordo la tiene visibile anche dove il tono è vicino al bianco. */
#main-nav .nav-ind {
display: block; position: absolute; z-index: 0;
top: 5px; bottom: 5px; left: 0; width: 0;
border-radius: 25px; background: #F1E6E3; border: 1px solid rgba(107, 44, 57, .28);
transition: transform .36s cubic-bezier(.3, 1.25, .5, 1), width .36s cubic-bezier(.3, 1.25, .5, 1), opacity .2s;
opacity: 0;
}
#main-nav .nav-ind.pronta { opacity: 1; }
/* Il contatore delle posizioni: un tondino sull'icona; a zero non c'è. */
#main-nav .view-badge {
position: absolute; top: 3px; left: calc(50% + 6px);
min-width: 17px; height: 17px; padding: 0 4px;
background: var(--brand, #6B2C39); color: #fff; opacity: 1;
font-size: 10px; border: 2px solid #fff; border-radius: 9px;
}
#main-nav .view-badge:empty, #main-nav .view-badge[data-zero], #main-nav .view-badge.zero { display: none; }
/* «sblocca» / «in attivazione» dell'Osservatorio: da telefono resta l'icona
(fulmine o clessidra) in un tondino; la parola la dice il `title` del tab. */
#main-nav .tab-badge {
position: absolute; top: 3px; left: calc(50% + 6px); margin: 0;
width: 17px; height: 17px; padding: 0; gap: 0; justify-content: center;
font-size: 0; border: 2px solid #fff; border-radius: 50%;
}
#main-nav .tab-badge .ph { font-size: 9px; }
#main-nav .tab-badge .tbadge-dot { width: 5px; height: 5px; }
/* Il Profilo: l'avatar con le iniziali. */
#main-nav .nav-profilo { display: flex; cursor: pointer; }
.nav-profilo-av {
width: 23px; height: 23px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--pos, #2F4A2B); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
#main-nav .nav-profilo[aria-expanded="true"] .nav-profilo-av { transform: translateY(-1px) scale(1.08); }
/* La lampadina «Segnala»: sopra la barra e sopra i crediti della mappa. */
.fb-floating-btn { bottom: calc(106px + env(safe-area-inset-bottom, 0px)); right: 14px; }
/* ── IL PROFILO: il menu dell'avatar diventa un pannello dal basso ───────── */
.user-dropdown {
position: fixed; top: auto; left: 0; right: 0; bottom: 0;
width: auto; max-width: none; max-height: calc(100dvh - 40px);
border: 0; border-radius: 22px 22px 0 0;
box-shadow: 0 -8px 30px rgba(30, 15, 10, .2);
padding: 6px 14px calc(14px + env(safe-area-inset-bottom, 0px));
overflow-y: auto; overscroll-behavior: contain;
animation: rc-sheet-sale .32s cubic-bezier(.2, .9, .3, 1);
}
@keyframes rc-sheet-sale { from { transform: translateY(100%); } to { transform: none; } }
/* Il velo dietro il pannello: è il contenitore del menu che si stende su tutto
lo schermo (app.js chiude il pannello al tocco sul velo). */
.user-menu:has(> .user-dropdown:not(.hidden))::before {
content: ""; position: fixed; inset: 0; background: rgba(30, 15, 10, .38);
/* Sopra TUTTO ciò che sta nella testata (logo, gettoni, campanella, la barra): senza,
col pannello aperto quei comandi restavano toccabili attraverso il velo. Il pannello
sta un gradino più su (style.css, 2147483647). */
z-index: 2147483646;
}
.user-dropdown .sheet-testa { display: block; }
/* Col pannello aperto la lampadina (z 9000) non deve galleggiarci sopra. */
body:has(.user-dropdown:not(.hidden)) .fb-floating-btn { display: none; }
.sheet-maniglia { width: 40px; height: 4px; border-radius: 2px; background: #DDD3C5; margin: 4px auto 12px; }
.sheet-chi { display: flex; align-items: center; gap: 12px; padding: 0 4px 12px; }
.sheet-chi .nav-profilo-av { width: 44px; height: 44px; font-size: 15px; }
.sheet-chi b { display: block; font-size: 16px; color: var(--text, #2A211C); }
.sheet-chi small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.user-dropdown .user-scope {
flex: none; min-height: 0; margin: 0 4px 6px; padding: 10px 12px;
border: 0; border-radius: 12px; background: var(--bg, #F7F3EC); font-size: 11px;
}
.user-dropdown .user-dropdown-actions { border-top: 0; padding: 0; background: transparent; }
.user-dropdown .user-menu-item {
display: flex; align-items: center; gap: 10px;
min-height: 50px; padding: 0 10px; border-radius: 12px; font-size: 15.5px;
}
.user-dropdown .user-menu-item.hidden { display: none; }
.user-dropdown .user-menu-item.logout { border-top: 1px solid var(--border); border-radius: 0; margin-top: 6px; }
/* ── Le altre viste: prendono lo spazio fra il fermo in alto e il fondo ─── */
.posizioni-view:not(.hidden), .osservatorio-view:not(.hidden), .marketplace-view:not(.hidden) {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
overscroll-behavior: contain; scroll-padding-bottom: 96px;
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
/* ── MENTRE SI SCRIVE nella ricerca (tastiera aperta) ──────────────────────
Lo schermo utile si dimezza: via la barra in basso e i contatori, la
testata è già chiusa (app.js), e ai suggerimenti resta il posto. */
body.digita #main-nav, body.digita .fb-floating-btn { display: none; }
body.digita .metrics-strip, body.digita .banner-webinar { display: none; }
body.digita main.layout > .sidebar { z-index: 3; }
/* La tendina dei suggerimenti si ferma dove comincia la tastiera (app.js la misura con
`visualViewport`): sotto, le ultime voci non si raggiungevano nemmeno scorrendo. */
.search-suggest { max-height: var(--ss-max, 320px); }
/* ── I CAMPI A 16 PX (06/10/2026) ──────────────────────────────────────────
iOS ingrandisce la pagina quando si tocca un campo — input, select, textarea —
scritto sotto i 16 px, e non la rimpicciolisce più quando si esce. Vale per Safari
E per Chrome su iPhone, che è WebKit anche lui. Su un portale costruito per non
scorrere è il guasto peggiore: testata, barra e pannello Filtri escono di misura e
restano così. Misurato prima: la ricerca era a 13 px, Regione, Provincia e i prezzi
dei Filtri a 12, l'ordinamento a 11 — nessun campo si salvava.
`!important` perché le regole dei singoli campi arrivano a un id (`input#search`):
qui non si sceglie un aspetto, si scansa un comportamento del sistema. Il segnaposto
resta piccolo dove lo era: iOS guarda la misura del campo, non del segnaposto. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
select, textarea { font-size: 16px !important; }
/* Il Comune dei Filtri è un bottone (iOS non lo ingrandisce), ma sta in griglia con
Regione e Provincia: stessa misura, o sembra un campo di un'altra famiglia. */
.pannello-filtri .fc-btn { font-size: 16px; }
/* I controlli dei Filtri tutti ALTI UGUALI (Gab, 06/10/2026). Safari lascia una