/* 17/10/2026 - LA HOME DI AB SUITE. Veste di AB Core: box bianche bordate su fondo grigio chiaro, testi in maiuscolo
   (doc 361), un'altezza sola per i comandi (34 px, doc 360), raggi del design system (--r-sm 8, --r-md 12).
   I gettoni di palette sono quelli decisi da Angelo il 16/10 (public/core/aspetto.css, :root): ripetuti qui perche'
   aspetto.css porta con se' le regole di /core. Se cambiano la', vanno cambiati anche qui. */
:root {
  --ink: #23272B; --ink-2: #3E464E; --ink-3: #66707A; --ink-4: #A3ABB3;
  --canvas: #F1F2F4; --surface: #FFFFFF; --surface-sunken: #ECEEF1;
  --line: #E1E4E8; --line-strong: #C9CED4;
  --brand: #C9643F; --brand-deep: #A04A2A; --brand-tint: #FBEDE6;
  --ring: 0 0 0 4px rgba(201, 100, 63, .22);
  --menu-ardesia: #3D4650;
  --box-h: 34px; --spazio: 10px; --fs-box: 10px;
}
html, body { margin: 0; background: var(--canvas); color: var(--ink); }
body { font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: var(--fs-base, 14px); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

.home { max-width: var(--pagina-w, 1140px); margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: var(--spazio); }
.home-accesso, #home-attesa { width: 100%; max-width: 420px; align-self: center; }
.home-testata { display: flex; align-items: center; gap: 8px; min-height: var(--box-h); padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 12px); }
.home-marchio { font-weight: 700; letter-spacing: .08em; font-size: var(--fs-sm, 12.5px); }
.home-spazio { flex: 1; }
.home-chi { font-size: var(--fs-micro, 11px); color: var(--ink-3); letter-spacing: .04em; }
.home-esci { height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm, 8px);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-micro, 11px); font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.home-esci:hover { border-color: var(--ink-3); color: var(--ink); }
/* 18/10/2026 - la busta della posta: alta e bordata come ESCI */
.home-posta { height: 26px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm, 8px); background: var(--surface); color: var(--ink-2); }
.home-posta:hover { border-color: var(--ink-3); color: var(--ink); }
.home-posta:focus-visible { outline: none; box-shadow: var(--ring); }

.home-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 12px); overflow: hidden; }
.home-box-testa { padding: 0 12px; height: var(--box-h); display: flex; align-items: center; border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro, 11px); font-weight: 700; letter-spacing: .06em; color: var(--ink-2); }
.home-box-corpo { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.home-nota { margin: 0; padding: 12px; color: var(--ink-3); font-size: var(--fs-sm, 12.5px); }

.home-campo { display: flex; flex-direction: column; gap: 4px; }
.home-campo span { font-size: var(--fs-micro, 11px); font-weight: 600; letter-spacing: .06em; color: var(--ink-3); }
.home-campo input { height: var(--box-h); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm, 8px);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; /* 16 px: iOS non ingrandisce */ }
.home-campo input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.home-errore { margin: 0; padding: 8px 10px; border: 1px solid #E8B4B4; border-radius: var(--r-sm, 8px); background: #FBEDED; color: #A3112E; font-size: var(--fs-sm, 12.5px); }
.home-entra { height: var(--box-h); border: 1px solid var(--brand-deep); border-radius: var(--r-sm, 8px); background: var(--brand); color: #FFFFFF;
  font: inherit; font-weight: 700; letter-spacing: .06em; font-size: var(--fs-sm, 12.5px); cursor: pointer; }
.home-entra:disabled { opacity: .6; cursor: default; }
/* 18/10/2026 - ENTRA CON FACE ID: stessa altezza e bordo di ENTRA, su fondo bianco */
.home-faceid { background: #FFFFFF; color: var(--ink); border: 2px solid var(--ink); }
.home-link { align-self: center; color: var(--ink-3); font-size: var(--fs-micro, 11px); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.home-link:hover { color: var(--ink); }
.home-blocco { color: var(--ko, #C62828); font-weight: 600; } /* 18/10/2026: blocco d'emergenza */

/* La dashboard: un'area per software (public/home.js, elenco SOFTWARE). Banda piena ardesia come la banda menu di
   /core, box d'ingresso, riquadri di riepilogo alti 34 px come gli indicatori di AB Core. */
.home-aree { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spazio); }
.home-area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 12px); overflow: hidden; display: flex; flex-direction: column; }
.home-area-banda { height: var(--box-h); display: flex; align-items: center; padding: 0 12px; background: var(--menu-ardesia); color: #FFFFFF;
  font-weight: 700; letter-spacing: .08em; font-size: var(--fs-sm, 12.5px); }
.home-area-corpo { padding: var(--spazio); display: flex; flex-direction: column; gap: var(--spazio); }
.home-ingresso { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm, 8px); background: var(--surface); }
.home-ingresso:hover { border-color: var(--brand); background: var(--brand-tint); }
.home-ingresso:focus-visible { outline: none; box-shadow: var(--ring); }
.home-ingresso-nome { font-weight: 700; letter-spacing: .06em; font-size: var(--fs-sm, 12.5px); color: var(--brand-deep); }
.home-ingresso-cosa { color: var(--ink-3); font-size: var(--fs-sm, 12.5px); line-height: 1.35; }
.home-riquadri { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 5px; }
.home-riquadri:empty { display: none; }
.home-riquadro { height: var(--box-h); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--surface); min-width: 0; }
.home-riquadro-etichetta { font-size: var(--fs-box); font-weight: 600; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-riquadro-valore { font-size: var(--fs-sm, 12.5px); font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 420px) { .home-aree { grid-template-columns: 1fr; } }