/* Pagine «da scrivania»: login, store, pannello, proposta. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--testo);
  font-family: var(--carattere); font-size: 1rem; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
a { color: var(--ciano); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: var(--peso-titolo); letter-spacing: -.02em; margin: 0 0 .5rem; overflow-wrap: anywhere; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1rem; color: var(--grigio); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
p { margin: 0 0 .75rem; }
button, .bottone {
  font: inherit; font-weight: 700; color: var(--testo); background: var(--blu); border: 0; border-radius: var(--raggio-piccolo);
  padding: .6rem 1rem; cursor: pointer; transition: background var(--transizione), transform var(--transizione), opacity var(--transizione);
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
}
button:hover, .bottone:hover { background: var(--blu-scuro); text-decoration: none; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondario, .bottone.secondario { background: transparent; border: 1px solid var(--bordo); color: var(--testo); }
button.secondario:hover { background: var(--pannello); }
button.ciano, .bottone.ciano { background: var(--ciano); color: #2a1d00; }  /* ambra = azione principale (scena.css aggiunge la luce) */
button.ciano:hover, .bottone.ciano:hover { background: #FFB63D; }
button.pericolo { background: transparent; border: 1px solid rgba(248,113,113,.5); color: var(--errore); }
button.pericolo:hover { background: rgba(248,113,113,.12); }
button.piccolo { padding: .3rem .6rem; font-size: .85rem; }
button.icona { padding: .25rem .5rem; font-size: .85rem; background: transparent; border: 1px solid var(--bordo); color: var(--grigio); }
button.icona:hover { color: var(--testo); background: var(--pannello-2); }
input, select, textarea {
  font: inherit; color: var(--testo); background: var(--fondo); border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
  padding: .55rem .7rem; width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--ciano); outline-offset: 1px; }
label { color: var(--grigio); font-size: .85rem; display: block; margin-bottom: .25rem; }
.marchio { display: inline-flex; align-items: center; gap: .6rem; font-weight: var(--peso-titolo); letter-spacing: -.01em; color: var(--testo); }
.marchio .cerchio { width: 1.35em; height: 1.35em; background: url("../img/simbolo.5be78e5ae103.svg") center / contain no-repeat; display: inline-block; } /* il simbolo «Testa di vetro» */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--bordo); }
.testata nav { display: flex; gap: 1rem; align-items: center; color: var(--grigio); font-size: .9rem; }
.contenuto { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
.pannello { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.25rem; }
.griglia { display: grid; gap: 1rem; }
.didascalia { color: var(--grigio); font-size: .85rem; }
.spia { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; background: var(--pannello-2); border: 1px solid var(--bordo); color: var(--grigio); }
.spia.ATTIVA { color: var(--ok); border-color: rgba(52,211,153,.4); }
.spia.IN_PAUSA { color: var(--attenzione); border-color: rgba(251,191,36,.4); }
.spia.ANALISI, .spia.COMPLETATA { color: var(--ciano); border-color: rgba(245,165,36,.4); }
.spia.CONVERTITA { color: var(--ok); background: rgba(52,211,153,.15); }
.spia.ABBANDONATA { color: var(--errore); }
.numero-grande { font-size: 2.2rem; font-weight: var(--peso-titolo); letter-spacing: -.03em; line-height: 1; }
.riga-tabella { display: grid; grid-template-columns: 1fr auto auto auto; gap: .75rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--bordo); font-size: .95rem; }
.riga-tabella:first-of-type { border-top: 0; }
.vuoto { color: var(--grigio); padding: 1rem 0; text-align: center; }
.avviso { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); color: var(--attenzione); border-radius: var(--raggio-piccolo); padding: .6rem .9rem; font-size: .9rem; }
.errore { color: var(--errore); }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--pannello); border: 1px solid var(--bordo); color: var(--testo); padding: .7rem 1.1rem; border-radius: var(--raggio-piccolo); box-shadow: var(--ombra); opacity: 0; pointer-events: none; transition: opacity var(--transizione); z-index: 50; max-width: 90vw; }
.toast.visibile { opacity: 1; }
.toast.errore { border-color: rgba(248,113,113,.5); }
.filo { font-size: .75rem; color: var(--grigio); display: inline-flex; gap: .4rem; align-items: center; }
.filo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--grigio); }
.filo.collegato::before { background: var(--ok); }
.filo.perso::before { background: var(--errore); }
@media (max-width: 900px) { .contenuto { padding: 1rem; } .testata { padding: .75rem 1rem; } }

/* --- telefono e tablet (05/10): il pannello e le pagine da scrivania si impilano --- */
@media (max-width: 1000px) {
  .colonne { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .colonna { min-width: 0; }
  .riga-tabella { grid-template-columns: 1fr auto; row-gap: .35rem; }
  .riga-tabella > * { min-width: 0; }
  input[type="number"], input[type="text"] { max-width: 100%; }
  .testata { flex-wrap: wrap; gap: .5rem; }
  .testata nav { flex-wrap: wrap; }
  h1 { font-size: 1.6rem; }
}
@media (max-width: 600px) {
  .contenuto { padding: .75rem; }
  .modulo-riga { flex-wrap: wrap; }
  .modulo-riga > * { flex: 1 1 100%; }
}

/* ---------- micro-interazioni delle pagine da scrivania (docs/animazioni.md: niente spettacolo, cura) ---------- */
button, .bottone { transition: background var(--transizione), transform 120ms ease, filter 120ms ease, opacity var(--transizione); }
button:active:not(:disabled), .bottone:active { transform: translateY(1px) scale(.985); filter: brightness(.9); }
.pannello { position: relative; }
.pannello::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(139, 92, 246, .16); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .45); opacity: 0; pointer-events: none; }
.pannello.lampo::after { animation: lampo 1000ms ease-out both; }  /* un lampo discreto quando arriva un evento dal filo */
@keyframes lampo { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.filo.collegato::before { animation: filo-pulsa 2.6s ease-in-out infinite; }
@keyframes filo-pulsa { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.riga-tabella, .proposta .pannello, .numero-grande { animation: sale 520ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sale { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.spia { transition: color var(--transizione), border-color var(--transizione), background var(--transizione); }
.battuta.nuova { animation: sale 420ms ease both; }
@media (prefers-reduced-motion: reduce) {
  .riga-tabella, .proposta .pannello, .numero-grande, .battuta.nuova { animation: dissolvi 240ms ease both; }
  .filo.collegato::before, .pannello.lampo::after { animation: none; }
  .pannello.lampo::after { opacity: .5; transition: opacity 600ms ease; }
  button:active:not(:disabled) { transform: none; }
  @keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
}