/*
 * Le forme del tema 0.4 (19/10/2026), ispirate a Rapport. Si carica DOPO `vetro.css`.
 *
 * ⚠️ Ispirazione, non copia (decisione del committente): si prende l'aria — fondo
 * crema con aloni caldi, lastre bianche molto tonde, capsule al posto dei
 * rettangoli, l'inchiostro pieno per quello che si sceglie —, non i disegni, i
 * colori o i testi del template. Solo aspetto: struttura, voci e flussi restano.
 *
 * Come il vetro, sta tutto qui: si confronta togliendo una riga da `index.html`.
 * Il vetro sotto resta il motore (lastre, sfocature); questo foglio cambia raggi,
 * fondo, capsule e la barra a sinistra. I colori sono solo nomi di `scelte.css`.
 */

/* ---- i raggi: grandi fuori, concentrici dentro ---- */
:root {
  --af-raggio-piccolo: 6px;
  --af-raggio: 12px;
  --af-raggio-grande: 16px;
  --af-raggio-vetro: 22px;
  --af-raggio-vetro-interno: 14px;
  --af-altezza-controllo: 2.5rem;
  --af-testo-display: 2rem;
}

/* ---- il fondo: tre aloni fermi, caldi ---- */
html {
  background:
    radial-gradient(48rem 30rem at 4% -6%, var(--af-alone-1), transparent 70%),
    radial-gradient(44rem 26rem at 52% -14%, var(--af-alone-2), transparent 70%),
    radial-gradient(52rem 40rem at 104% 64%, var(--af-alone-3), transparent 70%),
    var(--af-fondo);
  background-attachment: fixed;
}

/* ---- i titoli: grandi, stretti, di peso medio ---- */
h1 { font-size: var(--af-testo-display); font-weight: var(--af-peso-medio); letter-spacing: -0.025em; line-height: 1.1; }
h2 { letter-spacing: -0.01em; }

/* ---- le lastre: bianche, l'orlo appena, l'ombra lunga e morbida ---- */
.af-pannello,
.af-testa-azienda,
.af-tabella-contenitore,
.af-pannello-vista,
.af-riquadri > div,
.af-colonna,
.af-dialogo {
  border-color: var(--af-vetro-filo);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 1px 2px var(--af-vetro-buio),
    0 24px 48px -28px var(--af-vetro-buio);
}

/* ---- i bottoni: capsule. Il principale è inchiostro pieno, il secondario una capsula bianca ---- */
.af-bottone { border-radius: var(--af-raggio-tondo); padding-inline: var(--af-spazio-5); }
.af-bottone--primario {
  background-image: none;
  box-shadow: 0 1px 2px var(--af-vetro-buio), 0 10px 20px -12px var(--af-vetro-buio);
}
.af-bottone--secondario {
  background-color: var(--af-vetro-lente);
  border-color: var(--af-vetro-filo);
  box-shadow: 0 1px 2px var(--af-vetro-buio);
}
.af-bottone--secondario:hover:not(:disabled) { background-color: var(--af-carta); border-color: var(--af-bordo-campo); }
.af-bottone--quieto { border-radius: var(--af-raggio-tondo); }

/* ---- i campi: non più pozzetti, ma superfici bianche con l'orlo che si vede ---- */
.af-controllo,
.af-scelta {
  background-color: var(--af-campo-fondo);
  border-radius: var(--af-raggio-vetro-interno);
  box-shadow: 0 1px 2px var(--af-vetro-buio);
}
.af-controllo:focus-visible,
.af-scelta:focus-visible,
.af-controllo:focus,
.af-scelta:focus {
  background-color: var(--af-campo-fondo);
  box-shadow: 0 0 0 1px var(--af-fuoco), 0 0 0 5px color-mix(in srgb, var(--af-fuoco) 18%, transparent);
}
.af-controllo[aria-invalid="true"],
.af-scelta[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--af-errore-testo); }
textarea.af-controllo { border-radius: var(--af-raggio-vetro-interno); }
/* La casella che cerca è una capsula, come quella di Rapport. */
.af-cerca .af-controllo { border-radius: var(--af-raggio-tondo); padding-inline: var(--af-spazio-5); }

/* ---- le capsule di stato ---- */
.af-etichetta { border-radius: var(--af-raggio-tondo); padding-inline: var(--af-spazio-3); }
.af-etichetta:not([class*="af-etichetta--"]) { background: var(--af-vetro-lente); border-color: var(--af-vetro-filo); }

/* ---- le linguette: la scelta è una capsula d'inchiostro, le altre testo quieto ---- */
.af-linguette--larghe { padding: 6px; border-radius: var(--af-raggio-tondo); }
.af-linguette--larghe .af-linguetta { border-radius: var(--af-raggio-tondo); min-height: 2.25rem; }
.af-linguette--larghe .af-linguetta[aria-selected="true"],
.af-linguette--larghe .af-linguetta[data-urgenza][aria-selected="true"] {
  color: var(--af-su-azione);
  background: var(--af-azione);
  box-shadow: 0 1px 2px var(--af-vetro-buio), 0 10px 20px -12px var(--af-vetro-buio);
}
.af-linguette--larghe .af-linguetta[aria-selected="true"] .af-ico,
.af-linguette--larghe .af-linguetta[data-urgenza][aria-selected="true"] .af-ico { color: var(--af-su-azione); }
.af-linguette--larghe .af-linguetta[aria-selected="true"] .af-linguetta-conto,
.af-linguette--larghe .af-linguetta[data-urgenza][aria-selected="true"] .af-linguetta-conto {
  color: var(--af-testo);
  background: var(--af-su-azione);
  box-shadow: none;
}
@media (max-width: 700px) {
  .af-linguette--larghe { border-radius: var(--af-raggio-vetro); }
}

/* «Elenco / Lavagna»: un binario grigio con la capsula bianca sopra, come «Grid / Table». */
.af-viste {
  padding: 4px;
  background: var(--af-carta-tenue);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  border-radius: var(--af-raggio-tondo);
  box-shadow: inset 0 1px 2px var(--af-vetro-buio);
}
.af-viste a { border-radius: var(--af-raggio-tondo); padding-inline: var(--af-spazio-4); }
.af-viste a[aria-current="page"] {
  background: var(--af-carta);
  box-shadow: 0 1px 2px var(--af-vetro-buio), 0 6px 14px -8px var(--af-vetro-buio);
}

/* ---- la barra a sinistra: una rotaia d'inchiostro sospesa, la voce dove sei è una capsula crema ---- */
.af-lato {
  color: var(--af-su-rotaia);
  border-color: transparent;
  border-radius: 28px;
  box-shadow: 0 2px 6px -2px var(--af-vetro-buio), 0 30px 60px -30px var(--af-vetro-buio);
}
.af-lato::before {
  background: var(--af-rotaia);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.af-marchio-nome { color: var(--af-su-rotaia); }
.af-marchio-segno {
  color: var(--af-su-rotaia-scelta);
  background: var(--af-rotaia-scelta);
  border-radius: var(--af-raggio-vetro-interno);
  box-shadow: none;
}
.af-lato .af-voce { color: var(--af-su-rotaia-tenue); border-radius: var(--af-raggio-tondo); }
.af-lato .af-voce:hover { color: var(--af-su-rotaia); background: var(--af-rotaia-sopra); }
.af-lato .af-voce[aria-current="page"],
.af-lato .af-gruppo:has(.af-voce-volo[aria-current="page"]) > .af-voce--gruppo {
  color: var(--af-su-rotaia-scelta);
  background: var(--af-rotaia-scelta);
  box-shadow: none;
}
.af-lato .af-voce[aria-current="page"] > .af-ico,
.af-lato .af-gruppo:has(.af-voce-volo[aria-current="page"]) > .af-voce--gruppo > .af-ico { color: var(--af-su-rotaia-scelta); }
.af-lato .af-gruppo:is(:hover, :focus-within, [data-aperto]) > .af-voce--gruppo { color: var(--af-su-rotaia); border-color: transparent; background: var(--af-rotaia-sopra); }
.af-lato .af-voce-freccia { color: inherit; }
.af-lato .af-voce:focus-visible { outline-color: var(--af-su-rotaia); }
.af-lato .af-filetto { background: var(--af-rotaia-sopra); }
.af-lato-piede { border-top-color: var(--af-rotaia-sopra); }
.af-lato-chi { color: var(--af-su-rotaia); }
.af-lato-ruolo { color: var(--af-su-rotaia-tenue); }
/* Il pannello che si apre di lato resta una lastra chiara, coi colori della pagina. */
.af-volo { color: var(--af-testo); border-radius: var(--af-raggio-vetro); }
.af-voce-volo { border-radius: var(--af-raggio-tondo); }
.af-voce-volo[aria-current="page"] {
  color: var(--af-su-azione);
  background: var(--af-azione);
  box-shadow: none;
}

/* ---- la barra in alto: una capsula sospesa ---- */
.af-testata { border-radius: var(--af-raggio-tondo); padding-inline: var(--af-spazio-3); }

/* ---- la lavagna: colonne tonde, carte bianche ---- */
.af-colonna { border-radius: var(--af-raggio-vetro); }
.af-lavagna .af-carta { background: var(--af-carta); border-radius: var(--af-raggio-vetro-interno); }

/* ---- gli stati vuoti: un incavo leggero, tondo ---- */
.af-vuoto { border-radius: var(--af-raggio-vetro); box-shadow: none; }

@media (prefers-reduced-transparency: reduce) {
  .af-lato::before { background: var(--af-rotaia); }
}