/* IA-ID - dashboard personale. Colori del marchio IA-NET (gli stessi della home iai.ia-net.it). */
:root {
  --notte: #070c16; --lastra: #0d1524; --lastra2: #111b2e; --filo: #1d2a42; --filo2: #2a3a57;
  --testo: #e8eff9; --tenue: #9fb2cd; --acqua: #34d6c8; --acqua-inchiostro: #04211f;
  --ambra: #f2c14e; --rosso: #ff8f85; --verde: #5fd57a;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raggio: 10px; --barra: 60px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 16px); }
body { margin: 0; background: var(--notte); color: var(--testo); font: 400 16px/1.55 var(--font); min-height: 100vh; }
[hidden] { display: none !important; }
a { color: var(--acqua); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; }
h2 { font-size: 21px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
h3 { font-size: 16px; margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
p { margin: 10px 0 0; max-width: 68ch; }
.tenue { color: var(--tenue); }
.nota { color: var(--tenue); font-size: 14px; }
:focus-visible { outline: 2px solid var(--acqua); outline-offset: 3px; border-radius: 6px; }
.salta { position: absolute; left: -9999px; top: 8px; background: var(--acqua); color: var(--acqua-inchiostro); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.salta:focus { left: 12px; }

/* ------------------------------------------------------------------ barra in alto */
.barra { position: sticky; top: 0; z-index: 20; height: calc(var(--barra) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(7, 12, 22, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--filo); }
.marchio { display: inline-flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none; font-weight: 700; letter-spacing: .04em; min-height: 44px; }
.segno { width: 30px; height: 20px; fill: var(--acqua); }
.barra-utente { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chi { color: var(--tenue); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

/* ------------------------------------------------------------------ pulsanti e campi */
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
  font: 600 15px/1 var(--font); border-radius: var(--raggio); border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s; }
.pulsante.primario { background: var(--acqua); color: var(--acqua-inchiostro); letter-spacing: .02em; }
.pulsante.primario:hover { background: #5fe2d6; }
.pulsante.secondario { background: transparent; color: var(--testo); border-color: var(--filo2); }
.pulsante.secondario:hover { border-color: var(--acqua); }
.pulsante.tenue { background: transparent; color: var(--tenue); min-height: 44px; padding: 0 12px; }
.pulsante.tenue:hover { color: var(--testo); }
.pulsante.largo { width: 100%; }
.pulsante[aria-disabled="true"], .pulsante:disabled { opacity: .45; cursor: not-allowed; }
label { display: block; margin: 18px 0 6px; font-weight: 600; font-size: 15px; }
input, select { width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px var(--font); color: var(--testo); background: var(--lastra2);
  border: 1px solid var(--filo2); border-radius: var(--raggio); }
input:focus, select:focus { border-color: var(--acqua); outline: none; box-shadow: 0 0 0 3px rgba(52, 214, 200, .22); }
input::placeholder { color: #6f819c; }
.spunta { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 1.45; }
.spunta input { width: 22px; height: 22px; min-height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--acqua); }
.chiocciola { display: flex; align-items: center; background: var(--lastra2); border: 1px solid var(--filo2); border-radius: var(--raggio); }
.chiocciola span { padding: 0 2px 0 14px; color: var(--tenue); }
.chiocciola input { border: 0; background: transparent; padding-left: 4px; }
.chiocciola:focus-within { border-color: var(--acqua); box-shadow: 0 0 0 3px rgba(52, 214, 200, .22); }
.chiocciola input:focus { box-shadow: none; }
.modulo button[type="submit"] { margin-top: 16px; }
.riga-campo { display: flex; gap: 10px; }
.riga-campo input, .riga-campo select { flex: 1; min-width: 0; }
.riga-campo .pulsante { flex: none; margin-top: 0 !important; }

.msg { padding: 12px 14px; border-radius: var(--raggio); background: rgba(52, 214, 200, .1); border: 1px solid rgba(52, 214, 200, .35); color: var(--testo); margin: 0 0 18px; }
.msg.errore { background: rgba(255, 143, 133, .1); border-color: rgba(255, 143, 133, .45); }
.avviso-globale { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: #2a2210; border-bottom: 1px solid #5a4818; color: #f8e7b5; }
.avviso-globale p { margin: 0; }

.stato { font: 600 12px/1 var(--font); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--filo2); color: var(--tenue); white-space: nowrap; }
.stato.on { color: var(--verde); border-color: rgba(95, 213, 122, .45); }
.stato.attesa { color: var(--ambra); border-color: rgba(242, 193, 78, .45); }

/* ------------------------------------------------------------------ viste */
.vista { padding: 0 20px; }
.centrata { min-height: 60vh; display: grid; place-content: center; justify-items: center; text-align: center; }
.segnale { display: flex; gap: 6px; align-items: flex-end; height: 34px; }
.segnale i { width: 7px; background: var(--acqua); border-radius: 2px; animation: segnale 1s ease-in-out infinite; }
.segnale i:nth-child(1) { height: 34px; } .segnale i:nth-child(2) { height: 22px; animation-delay: .15s; } .segnale i:nth-child(3) { height: 34px; animation-delay: .3s; }
@keyframes segnale { 50% { opacity: .35; } }

.ingresso { max-width: 1040px; margin: 0 auto; padding-top: 56px; padding-bottom: 64px; display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start; }
.ingresso-testo h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -.02em; }
.ingresso-testo p { color: var(--tenue); font-size: 18px; margin-top: 16px; }
.ingresso-modulo { background: var(--lastra); border: 1px solid var(--filo); border-radius: 16px; padding: 26px; }
.ingresso-modulo .nota { margin-top: 10px; }
.vantaggi { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; max-width: 46ch; }
.vantaggi li { padding-left: 22px; position: relative; color: var(--tenue); }
.vantaggi li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--acqua); }
.vantaggi b { color: var(--testo); font-weight: 600; }
.cambio { margin-top: 30px; }
.separatore { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: 13px; margin: 24px 0 4px; }
.separatore::before, .separatore::after { content: ""; flex: 1; height: 1px; background: var(--filo2); }
.social { display: grid; gap: 10px; margin-top: 14px; }
.social:empty { display: none; }
.social button { min-height: 46px; border-radius: var(--raggio); border: 1px solid var(--filo2); background: transparent; color: var(--testo); font: 600 15px var(--font); cursor: pointer; }

/* ------------------------------------------------------------------ dashboard */
.dashboard { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-top: 36px; padding-bottom: 80px; }
.indice { position: sticky; top: calc(var(--barra) + 28px); align-self: start; display: flex; flex-direction: column; gap: 2px; }
.indice a { color: var(--tenue); text-decoration: none; padding: 9px 12px 9px 14px; border-left: 2px solid var(--filo); font-size: 15px; min-height: 40px; display: flex; align-items: center; }
.indice a:hover { color: var(--testo); }
.indice a[aria-current="true"] { color: var(--testo); border-left-color: var(--acqua); }
.contenuto { max-width: 720px; }

.panoramica { padding-bottom: 36px; }
.saluto { color: var(--tenue); font-size: 17px; margin: 0; }
.firma { margin-top: 26px; }
.firma-etichetta { margin: 0; color: var(--acqua); font-size: 15px; font-weight: 600; }
.firma-nome { font-size: clamp(56px, 11vw, 112px); font-weight: 800; letter-spacing: -.035em; line-height: .95; margin-top: 6px; overflow-wrap: anywhere; }
.firma-nome::after { content: ""; display: block; width: 82px; height: 6px; margin-top: 18px; border-radius: 3px;
  background: linear-gradient(90deg, var(--acqua) 0 30%, transparent 30% 40%, var(--acqua) 40% 60%, transparent 60% 70%, var(--acqua) 70%);
  transform-origin: left; animation: firma .9s cubic-bezier(.2, .7, .2, 1) both .1s; }
@keyframes firma { from { transform: scaleX(0); } }
.firma-nota { color: var(--tenue); margin-top: 16px; }
.azioni-ia { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.azioni-ia .pulsante { min-height: 52px; padding: 0 24px; font-size: 15px; }
.sintesi { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--filo); }
.sintesi li { padding: 14px 16px 0 0; }
.sintesi a { text-decoration: none; color: inherit; display: block; min-height: 44px; }
.sintesi b { display: block; font-size: 14px; font-weight: 600; }
.sintesi span { font-size: 14px; color: var(--tenue); }
.sintesi span.on { color: var(--verde); } .sintesi span.attesa { color: var(--ambra); }

.sezione { padding: 34px 0 36px; border-top: 1px solid var(--filo); }
.righe { margin: 16px 0 0; }
.righe > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filo); }
.righe dt { color: var(--tenue); }
.righe dd { margin: 0; overflow-wrap: anywhere; }
.elenco { list-style: none; padding: 0; margin: 16px 0 0; }
.elenco li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--filo); }
.elenco li .descr { flex: 1 1 220px; min-width: 0; }
.elenco li .descr small { display: block; color: var(--tenue); font-size: 13px; }
.elenco li .pulsante { min-height: 40px; padding: 0 14px; font-size: 14px; }
.dichiarazione { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--ambra); background: rgba(242, 193, 78, .07); color: var(--testo); font-weight: 600; }
.dichiarazione.on { border-left-color: var(--verde); background: rgba(95, 213, 122, .07); }
.importo { font-size: 30px; font-weight: 700; margin-top: 12px; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sezione > .pulsante { margin-top: 16px; }
.collegamenti { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; }

/* conferma dell'identita' */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(3, 6, 12, .78); display: grid; place-items: center; padding: 20px; }
.pannello { width: min(440px, 100%); background: var(--lastra); border: 1px solid var(--filo2); border-radius: 16px; padding: 24px; }
.pannello .pulsante.largo { margin-top: 18px; }

/* smartphone */
.pollice, .foglio { display: none; }
@media (max-width: 860px) {
  .ingresso { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
  .ingresso-modulo { padding: 20px; }
  .dashboard { grid-template-columns: 1fr; gap: 0; padding-top: 22px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .indice { display: none; }
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.tastiera .pollice, body.tastiera-vv .pollice { display: none !important; }
  .righe > div { grid-template-columns: 1fr; gap: 2px; }
  .azioni-ia .pulsante { flex: 1 1 100%; }
  .chi { display: none; }
  .pollice:not([hidden]) { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; -webkit-tap-highlight-color: transparent;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(9, 15, 27, .97); border-top: 1px solid var(--filo2); }
  .pollice a, .pollice button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px;
    color: var(--testo); text-decoration: none; background: none; border: 0; font: 600 13px var(--font); border-radius: 12px; cursor: pointer; }
  .pollice button[aria-expanded="true"] { color: var(--acqua); background: rgba(52, 214, 200, .1); }
  .pollice a:first-child { color: var(--acqua); }
  .pollice svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .foglio:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(3, 6, 12, .6); }
  .foglio-corpo { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow-y: auto; background: var(--lastra);
    border-top: 1px solid var(--filo2); border-radius: 18px 18px 0 0; padding: 10px 12px calc(84px + env(safe-area-inset-bottom)); }
  .foglio-corpo a { display: flex; align-items: center; min-height: 52px; padding: 0 14px; color: var(--testo); text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--filo); }
  .riga-campo { flex-wrap: wrap; }
  .riga-campo .pulsante { flex: 1 1 100%; }
}
@media (max-width: 380px) { .vista { padding-left: 16px; padding-right: 16px; } .barra { padding-left: 16px; padding-right: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- V1.5 gestore della memoria personale */
.nascosto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gestore { margin-top: 22px; }
.gestore-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gestore-testa h3 { margin: 0; }
.contatore { margin: 0; color: var(--tenue); font-size: 14px; font-variant-numeric: tabular-nums; }
.schede-cat { display: flex; gap: 8px; margin: 14px 0 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.scheda { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--filo2); background: transparent; color: var(--testo); font: 500 14px var(--font); cursor: pointer; }
.scheda:hover { border-color: var(--acqua); }
.scheda.attiva { background: var(--acqua); border-color: var(--acqua); color: var(--acqua-inchiostro); font-weight: 650; }
.scheda .conta { font-variant-numeric: tabular-nums; font-size: 12px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.scheda.attiva .conta { background: rgba(4, 33, 31, .16); }
.gestore-barra { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; margin-top: 12px; }
.gestore-filtri { margin-top: 10px; border: 1px solid var(--filo); border-radius: var(--raggio); padding: 0 14px; }
.gestore-filtri summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: 15px; }
.gestore-filtri[open] { padding-bottom: 12px; }
.filtri-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.filtri-griglia label { margin-top: 4px; font-size: 14px; }
.selezione { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--raggio);
  background: var(--lastra2); border: 1px solid var(--filo2); }
.selezione span { font-weight: 600; margin-right: auto; }
.selezione select { width: auto; min-width: 180px; min-height: 42px; }
.selezione .pulsante { min-height: 42px; }
.ricordi { list-style: none; padding: 0; margin: 14px 0 0; }
.ricordo { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--filo); }
.ricordo .sel { width: 20px; height: 20px; min-height: 0; margin: 3px 0 0; accent-color: var(--acqua); }
.ricordo .testo { margin: 0; overflow-wrap: anywhere; line-height: 1.45; }
.ricordo .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; }
.ricordo .meta small { color: var(--tenue); font-size: 13px; }
.ricordo .azioni { display: flex; gap: 2px; }
.ricordo .azioni .pulsante { min-height: 40px; padding: 0 10px; font-size: 14px; }
.etichetta-cat, .etichetta { font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--filo2); color: var(--testo); }
.etichetta { color: var(--tenue); border-style: dashed; }
.cat-identita { border-color: #7c9cff; } .cat-gusti { border-color: #f2c14e; } .cat-famiglia { border-color: #ff8fb1; }
.cat-lavoro { border-color: #34d6c8; } .cat-obiettivi { border-color: #5fd57a; } .cat-luoghi { border-color: #c79bff; } .cat-altro { border-color: var(--filo2); }
.ricordo .modifica { grid-column: 1 / -1; }
.modifica label { margin-top: 10px; font-size: 14px; }
.modifica textarea { width: 100%; min-height: 70px; padding: 10px 14px; font: 400 16px/1.45 var(--font); color: var(--testo); background: var(--lastra2);
  border: 1px solid var(--filo2); border-radius: var(--raggio); resize: vertical; }
.modifica textarea:focus { border-color: var(--acqua); outline: none; box-shadow: 0 0 0 3px rgba(52, 214, 200, .22); }
.riga-azioni { display: flex; gap: 8px; margin-top: 12px; }
#mem-altri { margin-top: 14px; }
#btn-mem-tutti { margin-top: 14px; }
@media (max-width: 640px) {
  .gestore-barra { grid-template-columns: minmax(0, 1fr); }
  .filtri-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filtri-griglia > div:first-child { grid-column: 1 / -1; }
  .ricordo { grid-template-columns: 28px minmax(0, 1fr); }
  .ricordo .azioni { grid-column: 2; margin-left: -10px; }
  .selezione span { width: 100%; }
  .selezione select { flex: 1; min-width: 0; }
}
/* la riga delle schede scorre al suo interno: non deve allargare la colonna della pagina (griglia 1fr su smartphone) */
.dashboard > *, .contenuto, #s-memoria, .gestore { min-width: 0; }

/* V1.6: categorie vuote visibili ma attenuate */
.scheda.vuota{opacity:.55}
.scheda.vuota .conta{opacity:.8}