/* ==========================================================================
   LA CAPSULA DI RICERCA - mappa, Immobili, Professionisti
   ==========================================================================
   Voce 187 di Gabriele (24/9/2026): «la barra di ricerca per immobili e
   professionisti deve essere uguale, con le stesse funzioni a quella che si
   vede sulla mappa». Decisione del capo, giro 8: stesso markup e stesse
   regole, riusate, non una copia che le somiglia.

   Queste regole stavano in `mappa.css` (§9 e §16.2) scritte per `.mappa`
   soltanto. Sono state SPOSTATE qui, senza cambiare una proprieta':
   `:is(.mappa, .barra-elenco)` ha la stessa specificita' di `.mappa`
   (0,1,0), quindi sulla mappa vincono e perdono contro le stesse regole di
   prima. Prova: `_prove/barra-unica/giro8/mappa-impronta.py`, tutte le
   proprieta' calcolate di ogni elemento della barra della mappa prima e
   dopo lo spostamento, a 1440/768/375.

   Sulla mappa questo foglio si accoda subito dopo `mappa.css`
   (`inc/mappa.php`); su Immobili e Professionisti dopo `mappa-nuova.css`
   (`radar_barra_capsula_accoda()`, sempre in `inc/mappa.php`).
   `.barra-elenco` e' il `<form class="filtri barra-elenco">` delle due
   pagine.
   ========================================================================== */

.mn-barra-riga {
	display: flex;
	align-items: center;
	gap: .5rem;
}

:is(.mappa, .barra-elenco) .mn-barra-riga--campo .mn-campo-ricerca.mappa__campo-dove {
	flex: 1 1 auto;
	min-width: 0;
}

.mn-barra-tasto-filtri { flex: 0 0 auto; }

/* La barra è la capsula (non più il solo campo): dentro, la lente, il testo
   e — a destra — il tondo scuro dei filtri, come il template (54px, tondo da
   40px con 4px di margine). */
:is(.mappa, .barra-elenco) .mn-barra-riga--campo {
	gap: 0;
	min-height: 54px;
	padding: 0 7px 0 18px;
	border-radius: 999px;
	background: var(--vetro-forte);
	-webkit-backdrop-filter: var(--vetro-sfocatura);
	backdrop-filter: var(--vetro-sfocatura);
	border: 1px solid var(--vetro-bordo);
	box-shadow: var(--vetro-ombra);
}

/* A fuoco: niente riquadro verde dentro il campo, niente anello nero intorno
   (voce 103, «questo schifo di effetto»). La capsula resta la stessa e si
   stacca appena di più: ombra un filo più piena e bordo leggermente più
   scuro — si vede che è attiva, senza disegnarci sopra. */
:is(.mappa, .barra-elenco) .mn-barra-riga--campo:focus-within {
	outline: none;
	border-color: color-mix(in srgb, var(--testo) 18%, transparent);
	box-shadow: var(--vetro-ombra), 0 0 0 4px color-mix(in srgb, var(--testo) 6%, transparent);
}

:is(.mappa, .barra-elenco) .mn-barra-riga--campo .mn-campo-ricerca,
:is(.mappa, .barra-elenco) .mn-barra-riga--campo .mn-campo-ricerca:focus-within,
:is(.mappa, .barra-elenco) .mn-barra-riga--campo input,
:is(.mappa, .barra-elenco) .mn-barra-riga--campo input:focus,
:is(.mappa, .barra-elenco) .mn-barra-riga--campo input:focus-visible {
	outline: none !important;
	box-shadow: none;
}

:is(.mappa, .barra-elenco) .mn-barra-riga--campo .mn-campo-ricerca.mappa__campo-dove {
	padding: 0 12px 0 0;
	min-height: 52px;
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
}

:is(.mappa, .barra-elenco) .mn-barra-riga--campo .mn-campo-ricerca .mappa__valore-dove {
	font-size: 1rem;
	font-weight: 500;
}

:is(.mappa, .barra-elenco) .mn-barra-riga--campo .mn-tasto-rotondo {
	order: 2;
	width: 40px;
	height: 40px;
	box-shadow: none;
}