/* ==================================================================================================
   LA RICERCA DIVISA PER TIPO (H324, 1/11/2026, docs/ideas/2026-11-01-la-home-centro-di-comando.md §3.4).
   In cima le pillole che filtrano per tipo, sotto una scheda per tipo. Una colonna sola, uguale su PC e
   telefono (regola 9): il PC usa lo spazio in più solo per mettere il dettaglio accanto al nome.
   I colori sono i gettoni di app.css: il blu del marchio per i collegamenti, il giallo dell'accento per la
   pillola attiva — un accento, non un allarme.
   ================================================================================================== */

.ricerca-casella .cerca { margin: 0; }
.ricerca-casella input[type="search"] { font-size: 1.05rem; }

.ricerca { display: grid; gap: .75rem; margin-top: .75rem; }
.ricerca:empty { display: none; }

/* LE PILLOLE: collegamenti, uno per tipo con il suo conto. Sul telefono vanno a capo invece di scorrere di
   lato: una riga che scorre nasconde proprio i tipi che uno non sa di dover cercare. */
.ricerca-pillole {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
}
.ricerca-pillole a {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .3rem .75rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--vetro);
  color: var(--marchio);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.3;
}
.ricerca-pillole a:hover { border-color: var(--marchio); }
.ricerca-pillole a:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; }
.ricerca-pillole a[aria-current="page"] {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--su-accento);
  font-weight: 600;
}
.ricerca-conto { font-variant-numeric: tabular-nums; color: var(--tenue); font-size: .82rem; }
.ricerca-pillole a[aria-current="page"] .ricerca-conto { color: var(--su-accento); }

/* LE SEZIONI: una .scheda per tipo (il vetro di app.css), più compatta, con il titolo e «altri N →» sulla
   stessa riga. La casella ha già il vetro: le sezioni prendono il fondo pieno della scheda, così si leggono
   come risultati e non come altri moduli. */
.ricerca-sezione.scheda {
  background: var(--scheda);
  border-radius: var(--raggio);
  padding: .75rem 1rem;
  margin: 0;
}
.ricerca-testata {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .25rem;
}
.ricerca-testata h2 { font-size: 1.05rem; margin: 0; }
.ricerca-altri { color: var(--marchio); font-size: .9rem; white-space: nowrap; text-decoration: none; }
.ricerca-altri:hover { text-decoration: underline; }

/* LE RIGHE: il nome in grassetto, il dettaglio sotto in tenue; tutta la riga è il collegamento, così sul
   telefono si tocca con il pollice e non si cerca la parola giusta. */
.ricerca-righe { list-style: none; margin: 0; padding: 0; }
.ricerca-righe li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--bordo);
}
.ricerca-righe li:last-child { border-bottom: 0; }
.ricerca-riga {
  flex: 1 1 14rem;
  min-width: 0;
  display: grid;
  gap: .1rem;
  color: var(--testo);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ricerca-riga strong { color: var(--marchio); font-weight: 600; }
.ricerca-riga:hover strong { text-decoration: underline; }
.ricerca-dettaglio { color: var(--tenue); font-size: .85rem; }

/* LE AZIONI DEL CLIENTE ESATTO: piccole, accanto alla riga; sul telefono vanno sotto. */
.ricerca-azioni { display: flex; flex-wrap: wrap; gap: .4rem; }
.ricerca-azioni .azione { font-size: .85rem; }

.ricerca-vuoto { margin: .25rem 0; }

@media (min-width: 40rem) {
  .ricerca-riga { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; column-gap: .75rem; }
}