@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap');

/* ==========================================================================
   IAM - il circolo di sera.
   Il fondo scuro prende la tinta del colore dell'associazione (--brand,
   impostato da core.js). La tessera e' un oggetto: cartoncino nel colore
   dell'associazione, bollino dell'anno, matrice bianca con il QR.
   Una sola famiglia, Archivo, usata per larghezza: larga per i titoli,
   normale per il testo, stretta per i numeri.
   ========================================================================== */

:root {
  color-scheme: dark;

  --brand: #FAC032;
  --brand-ink: #1C1E21;

  --fondo: color-mix(in oklab, var(--brand) 6%, #131418);
  --incavo: color-mix(in oklab, var(--fondo), #000 22%);
  --sup-1: color-mix(in oklab, var(--fondo), #fff 4%);
  --sup-2: color-mix(in oklab, var(--fondo), #fff 7.5%);
  --sup-3: color-mix(in oklab, var(--fondo), #fff 12%);
  --gesso: #F1EEE7;
  --gesso-2: color-mix(in oklab, var(--gesso) 68%, var(--fondo));
  --gesso-3: color-mix(in oklab, var(--gesso) 50%, var(--fondo));
  --linea: color-mix(in oklab, var(--gesso) 10%, transparent);
  --linea-2: color-mix(in oklab, var(--gesso) 18%, transparent);
  --carta: #FBF9F4;
  --carta-ink: #1E1F23;
  --carta-2: #62646B;

  --ok: #62D59C;
  --warn: #F2B340;
  --stop: #F26D60;
  --info: #86AFF2;

  /* testo e icone nel colore dell'associazione, testo sui pulsanti chiari, barre dell'app */
  --brand-testo: var(--brand);
  --su-gesso: #18191C;
  --barra: color-mix(in srgb, var(--incavo) 90%, transparent);
  --linea-gruppo: var(--linea);

  --font: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --largo: 116%;
  --stretto: 76%;
  --r-oggetto: 16px;
  --r: 12px;
  --r-ctrl: 9px;
}

/* L'app iscritti segue il tema del telefono: di giorno e' chiara, come le app di sistema.
   Gestionale, scanner e pagine pubbliche restano scuri. */
@media (prefers-color-scheme: light) {
  :root.app-iscritti {
    color-scheme: light;
    --fondo: color-mix(in srgb, var(--brand) 5%, #F2F1ED);
    --incavo: color-mix(in srgb, var(--fondo) 45%, #fff);
    --sup-1: #FFFFFF;
    --sup-2: #F4F3F0;
    --sup-3: #FFFFFF;
    --gesso: #1A1B1E;
    --gesso-2: color-mix(in oklab, var(--gesso) 70%, #fff);
    --gesso-3: color-mix(in oklab, var(--gesso) 55%, #fff);
    --linea: color-mix(in oklab, var(--gesso) 10%, transparent);
    --linea-2: color-mix(in oklab, var(--gesso) 18%, transparent);
    --ok: #1F8A55;
    --warn: #A86A0C;
    --stop: #CC3B30;
    --info: #2563C9;
    --brand-testo: color-mix(in oklab, var(--brand), #000 42%);
    --su-gesso: #FFFFFF;
    --barra: color-mix(in srgb, #fff 82%, transparent);
    --linea-gruppo: transparent;
  }
  :root.app-iscritti input[type="date"].input::-webkit-calendar-picker-indicator { filter: none; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--gesso);
  background: var(--fondo);
  font: 450 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 800; }
h1 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); font-stretch: var(--largo); letter-spacing: -0.012em; }
h2 { font-size: 1.125rem; font-stretch: 108%; font-weight: 750; letter-spacing: -0.005em; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0; }
h2 + p, h3 + p { margin-top: 4px; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--gesso); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--brand); color: var(--brand-ink); }

.muted { color: var(--gesso-2); }
.small { font-size: .85rem; }
.code { font-variant-numeric: tabular-nums; letter-spacing: .12em; font-weight: 650; font-stretch: 108%; }
.stack { display: grid; gap: 16px; align-content: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row-start { align-items: flex-start; }
.center { justify-content: center; }
.center-text { text-align: center; }
.grow { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Pulsanti ---------- */
.btn {
  appearance: none; border: 1px solid transparent; border-radius: var(--r-ctrl);
  padding: 10px 16px; font: 650 .9rem/1.2 var(--font); font-stretch: 104%;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap; color: var(--gesso);
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--brand), #fff 14%); color: var(--brand-ink); }
.btn-dark { background: var(--gesso); color: var(--su-gesso); }
.btn-dark:hover:not(:disabled) { background: color-mix(in oklab, var(--gesso), var(--su-gesso) 12%); color: var(--su-gesso); }
/* Azione secondaria nel colore dell'associazione: un solo pulsante pieno per schermata */
.btn-tinta { background: color-mix(in oklab, var(--brand) 22%, transparent); color: var(--brand-testo); }
.btn-tinta:hover:not(:disabled) { background: color-mix(in oklab, var(--brand) 32%, transparent); color: var(--brand-testo); }
.btn-ghost { background: transparent; border-color: var(--linea-2); }
.btn-ghost:hover:not(:disabled) { background: var(--sup-2); }
.btn-ok { background: var(--ok); color: #062615; }
.btn-ok:hover:not(:disabled) { background: color-mix(in oklab, var(--ok), #fff 14%); color: #062615; }
.btn-stop { background: transparent; color: var(--stop); border-color: color-mix(in oklab, var(--stop) 45%, transparent); }
.btn-stop:hover:not(:disabled) { background: color-mix(in oklab, var(--stop) 14%, transparent); color: var(--stop); }
.btn-sm { padding: 7px 12px; font-size: .84rem; }
.btn-block { width: 100%; padding: 13px 18px; }
.btn-icon { padding: 8px; }

/* ---------- Moduli ---------- */
.field { display: grid; gap: 6px; }
.field > span, .field > label { font-weight: 600; font-size: .86rem; }
.field small { color: var(--gesso-3); font-weight: 450; font-size: .8rem; }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--linea-2); background: var(--incavo);
  color: var(--gesso); border-radius: var(--r-ctrl); padding: 11px 13px;
  font: 450 .97rem/1.3 var(--font); transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--gesso-3); }
select.input option { background: var(--sup-2); color: var(--gesso); }
textarea.input { resize: vertical; min-height: 104px; }
.input:hover { border-color: color-mix(in oklab, var(--gesso) 28%, transparent); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 28%, transparent); }
.input[aria-invalid="true"] { border-color: var(--stop); }
input[type="date"].input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--gesso-2); }
.check strong { color: var(--gesso); font-weight: 650; }
.check input { margin-top: 2px; width: 19px; height: 19px; accent-color: var(--brand); flex: none; }
.password { position: relative; }
.password .input { padding-right: 84px; }
.password button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--gesso-2); font: 600 .8rem var(--font); cursor: pointer; padding: 6px 10px;
}
.password button:hover { color: var(--gesso); }
.form-error { color: var(--stop); font-size: .88rem; font-weight: 600; min-height: 1.2em; }
.form-error:empty { min-height: 0; }

/* ---------- Superfici ---------- */
.card { background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--r); padding: 22px; }
.card-flat { background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px; }
.divider { height: 1px; background: var(--linea); border: 0; margin: 4px 0; }

/* Stato di un'iscrizione: ambra in attesa, verde attiva, rosso sospesa (ovunque uguale) */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: color-mix(in oklab, currentColor 13%, transparent);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { color: var(--ok); }
.pill-warn { color: var(--warn); }
.pill-stop { color: var(--stop); }
.pill-info { color: var(--info); }
.pill-neutral { color: var(--gesso-2); }

.notice {
  border-radius: var(--r); padding: 12px 14px; font-size: .9rem; display: flex; gap: 11px; align-items: flex-start;
  background: color-mix(in oklab, currentColor 11%, var(--fondo));
}
.notice span { color: var(--gesso); }
.notice strong { color: currentColor; font-weight: 650; }
.notice a { color: currentColor; font-weight: 650; }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.notice-ok { color: var(--ok); }
.notice-warn { color: var(--warn); }
.notice-stop { color: var(--stop); }
.notice-info { color: var(--info); }

/* ---------- Barra superiore ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 9px; flex: none; overflow: hidden;
  background: var(--brand); color: var(--brand-ink); display: grid; place-items: center;
  font: 800 .9rem var(--font); font-stretch: var(--largo);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* Logo caricato: il riquadro bianco si allarga quanto il logo, anche se e' orizzontale. */
.brand-mark.logo { width: auto; min-width: 36px; max-width: 120px; padding: 5px 8px; background: #fff; display: flex; align-items: center; justify-content: center; }
.brand-mark.logo img { width: auto; max-width: 100%; height: 100%; background: none; }
/* Il logo di IAM in testa alle pagine della piattaforma: piu' grande del marchio di
   un'associazione, perche' li' e' il logo principale e non un'icona di riga. */
.brand-mark.logo.grande { height: 46px; max-width: 180px; padding: 6px 10px; border-radius: 11px; }
.brand-name { font-weight: 750; font-size: 1rem; font-stretch: 108%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: .8rem; color: var(--gesso-2); font-weight: 500; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---------- Notifiche ---------- */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(92vw, 420px); }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--sup-3); color: var(--gesso); border: 1px solid var(--linea-2); border-radius: var(--r);
  padding: 12px 15px; font-weight: 600; box-shadow: 0 18px 40px -14px rgb(0 0 0 / 70%);
  animation: toast-in .2s ease-out;
}
.toast-ok::before, .toast-stop::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.toast-ok::before { background: var(--ok); }
.toast-stop::before { background: var(--stop); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Dialoghi ---------- */
dialog {
  border: 1px solid var(--linea-2); border-radius: var(--r-oggetto); padding: 0; width: min(560px, 94vw);
  background: var(--sup-2); color: var(--gesso); box-shadow: 0 40px 80px -24px rgb(0 0 0 / 75%);
}
dialog::backdrop { background: rgb(0 0 0 / 62%); }
.dialog-head { padding: 20px 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-body { padding: 16px 22px; display: grid; gap: 15px; align-content: start; max-height: 70vh; overflow: auto; }
.dialog-foot { padding: 4px 22px 20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
dialog.drawer {
  margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(520px, 100vw);
  border-radius: var(--r-oggetto) 0 0 var(--r-oggetto); border-right: 0; background: var(--sup-1);
}
dialog.drawer form { display: flex; flex-direction: column; height: 100%; }
dialog.drawer .dialog-body { flex: 1; min-height: 0; max-height: none; }
dialog.drawer .dialog-foot { justify-content: flex-start; border-top: 1px solid var(--linea); padding-top: 16px; }
dialog.drawer[open] { animation: drawer-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } }

/* ---------- Elenchi e tabelle ---------- */
.table-wrap { overflow-x: auto; background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 600; color: var(--gesso-3); font-size: .78rem; padding: 13px 16px 10px; white-space: nowrap; }
td { padding: 11px 16px; border-top: 1px solid var(--linea); vertical-align: middle; }
td strong { font-weight: 650; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td, tr.clickable:focus-visible td { background: var(--sup-2); }
tr.clickable:focus-visible { outline: none; }
.col-check { width: 44px; padding-right: 0; }
.col-check input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  width: 36px; height: 36px; border-radius: 9px; flex: none; overflow: hidden;
  background: color-mix(in oklab, var(--brand) 24%, var(--sup-3));
  color: var(--gesso); display: grid; place-items: center; font: 700 .8rem var(--font); font-stretch: 110%;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 20px; height: 20px; }
.avatar-lg { width: 72px; height: 72px; border-radius: 14px; font-size: 1.3rem; }
.person-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-sub { font-size: .8rem; color: var(--gesso-2); }
.empty { padding: 44px 18px; text-align: center; color: var(--gesso-2); display: grid; gap: 12px; justify-items: center; }
.empty svg { width: 30px; height: 30px; color: var(--gesso-3); }
.empty p { max-width: 52ch; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .input { width: auto; min-width: 0; }
.toolbar .search { flex: 1 1 280px; }
.toolbar .search .input { width: 100%; }
.toolbar label.row { gap: 8px; color: var(--gesso-2); }

.segments { display: inline-flex; background: var(--incavo); border: 1px solid var(--linea); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segments button {
  border: 0; background: transparent; color: var(--gesso-2); font: 600 .86rem var(--font);
  padding: 7px 13px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center;
}
.segments button:hover { color: var(--gesso); }
.segments button[aria-pressed="true"] { background: var(--sup-3); color: var(--gesso); }
.segments .count { font-variant-numeric: tabular-nums; color: var(--gesso-3); font-weight: 500; }

/* Numeri: un'unica striscia, come la riga dei totali di un registro */
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden;
}
.figure { padding: 18px 20px 16px; display: grid; gap: 6px; align-content: start; box-shadow: -1px -1px 0 var(--linea); }
.figure strong {
  font: 700 2.6rem/.95 var(--font); font-stretch: var(--stretto); letter-spacing: -0.01em; white-space: nowrap;
}
.figure span { color: var(--gesso-2); font-size: .84rem; line-height: 1.35; }
.figure.accent strong { color: var(--brand); }

.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 110px 1fr 36px; gap: 14px; align-items: center; font-size: .9rem; }
.bar-track, .bar-fill { display: block; }
.bar-track { height: 6px; background: var(--sup-3); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 3px; background: var(--brand); transition: width .5s ease-out; }
.bar b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
/* Occupazione di una sede rispetto alla capienza */
.occupazione { display: inline-grid; grid-template-columns: auto; gap: 4px; min-width: 96px; white-space: nowrap; }
.occupazione b { font-weight: 700; font-variant-numeric: tabular-nums; }
.occupazione .bar-track { height: 4px; }
.occupazione.piena b, .occupazione.piena { color: var(--stop); }
.occupazione.piena .bar-fill { background: var(--stop); }

/* Grafici a colonne (js/grafici.js) */
.grafico { display: grid; gap: 10px; }
.grafico-area { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico svg:focus { outline: none; }
.grafico svg:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: 6px; }
.grafico .griglia { stroke: var(--linea); stroke-width: 1; }
.grafico .base { stroke: var(--linea-2); stroke-width: 1; }
.grafico .asse { fill: var(--gesso-3); font: 500 11px var(--font); font-variant-numeric: tabular-nums; }
.grafico .picco { fill: var(--gesso); font: 650 12px var(--font); }
.grafico .colonna { fill: var(--grafico-colore, var(--brand)); transition: opacity .12s; }
.grafico-area:has(.colonna.attiva) .colonna:not(.attiva) { opacity: .4; }
.grafico .zona { fill: transparent; }
.grafico-suggerimento {
  position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 1px; white-space: nowrap;
  background: var(--sup-3); border: 1px solid var(--linea-2); border-radius: 8px; padding: 6px 10px;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 60%);
}
.grafico-suggerimento strong { font-size: .95rem; font-weight: 700; }
.grafico-suggerimento span { font-size: .78rem; color: var(--gesso-2); }
.grafico-tabella summary { cursor: pointer; font-size: .82rem; color: var(--gesso-2); width: max-content; }
.grafico-tabella summary:hover { color: var(--gesso); }
.grafico-tabella table { margin-top: 8px; font-size: .84rem; }
.grafico-tabella th, .grafico-tabella td { padding: 6px 12px 6px 0; }
.grafico-tabella td:last-child, .grafico-tabella th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.grafico-vuoto { padding: 20px 0; }
.grafici-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .grafici-due { grid-template-columns: 1fr; } }
.in-caricamento { opacity: .5; transition: opacity .2s; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.facts div { min-width: 0; border-top: 1px solid var(--linea); padding-top: 8px; }
.facts dt { font-size: .78rem; color: var(--gesso-3); font-weight: 500; }
.facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.timeline { display: grid; }
.timeline-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.timeline-item:last-child { border-bottom: 0; }
.btn-reset { border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-ctrl); padding-inline: 8px; margin-inline: -8px; width: calc(100% + 16px); }
.btn-reset:hover { background: var(--sup-2); }
td .btn-reset { width: auto; margin: 0; padding: 2px 0; }
td .btn-reset:hover { background: none; text-decoration: underline; }

/* ---------- Bacheca ---------- */
.board { display: grid; gap: 10px; }
.post {
  position: relative; display: grid; gap: 6px;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px 18px 16px 22px;
}
.post::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--info); }
.post-avviso::before { background: var(--warn); }
.post-urgente::before { background: var(--stop); }
.post-assemblea::before { background: var(--brand); }
.assemblea-quando { font-weight: 600; }
.assemblea-quando::first-letter { text-transform: uppercase; }
details.odg summary { cursor: pointer; font-size: .86rem; color: var(--gesso-2); width: max-content; }
details.odg[open] summary { margin-bottom: 6px; }
.post-body { white-space: pre-line; color: color-mix(in oklab, var(--gesso) 88%, var(--fondo)); }
.post-meta { font-size: .8rem; color: var(--gesso-3); }

/* ==========================================================================
   Bollino dell'anno: pieno se il contributo e' versato, sagoma vuota se manca
   ========================================================================== */
.bollino {
  --bollino-carta: var(--carta);
  --bollino-ink: color-mix(in oklab, var(--brand) 45%, #000);
  display: inline-block; width: 64px; aspect-ratio: 1; flex: none;
  transform: rotate(-12deg); filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 30%));
}
.bollino svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bollino-bordo { fill: var(--bollino-carta); }
.bollino-anello { fill: none; stroke: var(--bollino-ink); stroke-width: 1.4; }
.bollino-anno { fill: var(--bollino-ink); font-family: var(--font); font-weight: 800; font-size: 27px; font-stretch: 80%; }
.bollino-vuoto { filter: none; }
.bollino-vuoto .bollino-bordo { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 3.5 3; opacity: .55; }
.bollino-vuoto .bollino-anello { display: none; }
.bollino-vuoto .bollino-anno { fill: currentColor; opacity: .5; }
.bollino-mini { width: 17px; transform: none; filter: none; vertical-align: -3px; }
.bollino-mini .bollino-bordo { fill: var(--brand); }
.bollino-mini .bollino-anno, .bollino-mini .bollino-anello { display: none; }
.con-bollino { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   App iscritti
   ========================================================================== */
.portal { max-width: 460px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 20px; }
.portal-hero { display: grid; gap: 8px; padding-top: 4px; }
.portal-hero h1 { font-size: clamp(1.9rem, 8vw, 2.3rem); }
.portal-hero p { color: var(--gesso-2); max-width: 44ch; }

/* Tessera della pagina iniziale (index.html): cartoncino con il bollino dell'anno */
.pass-card {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 1.586; border-radius: var(--r-oggetto); padding: 18px 20px;
  display: grid; grid-template-rows: auto 1fr auto; color: var(--brand-ink); background: var(--brand);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%), 0 22px 40px -24px rgb(0 0 0 / 80%);
}
.pass-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgb(255 255 255 / 16%), transparent 45%, rgb(0 0 0 / 12%));
}
.pass-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: repeating-radial-gradient(circle at 108% 125%, transparent 0 6px, color-mix(in srgb, var(--brand-ink) 9%, transparent) 6px 7px);
  -webkit-mask-image: linear-gradient(110deg, transparent 30%, #000 85%);
  mask-image: linear-gradient(110deg, transparent 30%, #000 85%);
}
.pass-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pass-org-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pass-org { font: 800 1rem/1.1 var(--font); font-stretch: var(--largo); }
.pass-kind { font-size: .76rem; font-weight: 600; opacity: .72; margin-top: 2px; }
.pass-holder { display: flex; align-items: flex-end; gap: 12px; }
.pass-photo {
  width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex: none;
  background: color-mix(in srgb, var(--brand-ink) 12%, transparent); display: grid; place-items: center;
  font: 750 1.05rem var(--font); font-stretch: 110%;
  border: 1.5px solid color-mix(in srgb, var(--brand-ink) 22%, transparent);
}
.pass-name { font: 800 clamp(1.3rem, 6vw, 1.6rem)/1.02 var(--font); font-stretch: var(--largo); letter-spacing: -0.01em; }
.pass-meta { font-size: .8rem; font-weight: 550; opacity: .75; margin-top: 3px; }
.pass-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 10px; }
.pass-code { font: 700 1.05rem/1.1 var(--font); font-stretch: 112%; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.pass-code small { display: block; font-size: .66rem; font-weight: 600; letter-spacing: 0; font-stretch: 100%; opacity: .7; margin-bottom: 3px; }
.pass-status {
  display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-ink) 13%, transparent);
}
.pass-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Il bollino si attacca alla tessera quando si apre */
.home-front .bollino { animation: attacca .5s cubic-bezier(.3, 1.45, .5, 1) .25s both; }
@keyframes attacca { from { opacity: 0; transform: rotate(-34deg) scale(1.45); } }

.qr-tile { background: #fff; padding: 14px; border-radius: var(--r); }

/* ---------- App iscritti: barra del titolo e barra delle schede ---------- */
body.con-schede .topbar { display: none; }
body.con-schede .portal { padding-top: 6px; gap: 24px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.appbar {
  position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fondo) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
}
.appbar-inner { max-width: 460px; margin: 0 auto; padding: 16px 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appbar h1 { font: 800 1.75rem/1.1 var(--font); letter-spacing: -0.015em; }
.appbar-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; text-decoration: none;
  color: var(--brand-testo); font-weight: 650; font-size: .95rem;
}
.appbar-link svg { width: 18px; height: 18px; }
.appbar-link:hover { color: var(--brand-testo); opacity: .8; }

.tabbar {
  position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--barra); border-top: 1px solid var(--linea);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tabbar .tab {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 4px; border-radius: var(--r-ctrl);
  text-decoration: none; color: var(--gesso-3); font-size: .7rem; font-weight: 600;
}
.tabbar .tab svg { width: 25px; height: 25px; }
.tabbar .tab:hover { color: var(--gesso-2); }
.tabbar .tab[aria-current="page"] { color: var(--brand-testo); }
.tab-punto { position: absolute; top: 4px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%; background: var(--stop); box-shadow: 0 0 0 2px var(--sup-1); }
@media (min-width: 600px) {
  .tabbar { width: 460px; margin: 0 auto; border: 1px solid var(--linea); border-bottom: 0; border-radius: 16px 16px 0 0; }
}
.portal.entra { animation: scheda-in .2s ease-out; }
@keyframes scheda-in { from { opacity: 0; } }

/* ---------- Gruppi di righe, come nelle impostazioni del telefono ---------- */
.gruppo { display: grid; gap: 7px; }
.gruppo-titolo { font-size: .76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--gesso-2); padding: 0 16px; }
.gruppo-righe { background: var(--sup-1); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--linea-gruppo); }
.gruppo-nota { font-size: .8rem; line-height: 1.45; color: var(--gesso-3); padding: 0 16px; }
.riga {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 12px 16px;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; text-decoration: none;
}
.riga + .riga::before, .voce + .voce::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--linea); }
.riga > svg { width: 20px; height: 20px; flex: none; color: var(--gesso-2); }
.riga > svg.freccia { width: 16px; height: 16px; color: var(--gesso-3); margin-left: auto; }
a.riga, button.riga, label.riga { cursor: pointer; }
a.riga:hover, button.riga:hover, a.riga:active, button.riga:active { background: var(--sup-2); color: inherit; }
.riga-valore { margin-left: auto; min-width: 0; color: var(--gesso-2); text-align: right; overflow-wrap: anywhere; }
.riga-testo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.riga-titolo { font-weight: 600; }
.riga-sotto { font-size: .82rem; color: var(--gesso-2); }
.riga-pericolo, .riga-pericolo > svg { color: var(--stop); }
.riga .btn { flex: none; }
.riga-vuota { color: var(--gesso-2); font-size: .9rem; }

/* Interruttore acceso/spento */
.interruttore {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0 0 0 auto; cursor: pointer;
  width: 51px; height: 31px; border-radius: 999px; background: color-mix(in oklab, var(--gesso) 18%, transparent); transition: background .2s;
}
.interruttore::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / 28%); transition: transform .2s;
}
.interruttore:checked { background: var(--ok); }
.interruttore:checked::before { transform: translateX(20px); }
.interruttore:disabled { opacity: .5; cursor: progress; }

/* ---------- Scheda Tessera ---------- */
.tessera-pila { display: grid; gap: 12px; }
.tessera {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.586; border-radius: 18px; padding: 18px 20px 16px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; color: var(--brand-ink); background: var(--brand);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 16px 32px -20px rgb(0 0 0 / 60%);
}
.tessera::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, rgb(255 255 255 / 15%), transparent 55%); }
.tessera-testa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tessera-logo { height: 30px; padding: 4px 7px; border-radius: 7px; background: #fff; display: flex; align-items: center; flex: none; }
.tessera-logo img { height: 100%; width: auto; max-width: 92px; object-fit: contain; }
.tessera-org { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tessera-stato {
  flex: none; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em;
  padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--brand-ink) 12%, transparent);
}
.tessera-titolare { display: flex; align-items: flex-end; gap: 12px; align-self: end; }
.tessera-nome { font: 750 clamp(1.35rem, 6.4vw, 1.6rem)/1.05 var(--font); letter-spacing: -0.012em; }
.tessera-meta { font-size: .84rem; font-weight: 550; opacity: .72; margin-top: 4px; }
.tessera-foto { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgb(255 255 255 / 60%); }
.tessera-foto img { width: 100%; height: 100%; object-fit: cover; }
.tessera-campi { display: flex; gap: 26px; margin: 0; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--brand-ink) 16%, transparent); }
.tessera-campi dt { font-size: .64rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.tessera-campi dd { margin: 2px 0 0; font-weight: 700; font-size: .95rem; }
.tessera-codice { letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.tessera.sospesa { filter: grayscale(1) brightness(.82); }

/* Il QR in un riquadro bianco a parte: si tocca per ingrandirlo */
.tessera-qr {
  width: 100%; border: 0; font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 12px;
  padding: 22px 20px 14px; border-radius: 18px; background: #fff; color: var(--carta-ink);
  box-shadow: 0 0 0 1px var(--linea-gruppo), 0 10px 26px -20px rgb(0 0 0 / 45%);
}
.tessera-qr:focus-visible { outline-offset: 3px; }
#qr svg { width: min(216px, 58vw); height: auto; display: block; }
.stub-timer { width: min(216px, 58vw); display: grid; gap: 7px; justify-items: center; font-size: .82rem; font-weight: 550; color: var(--carta-2); }
.stub-bar { display: block; width: 100%; height: 3px; border-radius: 2px; overflow: hidden; background: rgb(0 0 0 / 10%); }
.stub-bar span { display: block; height: 100%; width: 100%; background: color-mix(in oklab, var(--brand) 72%, #000); transition: width 1s linear; }
.tessera-qr-nota { font-size: .86rem; font-weight: 600; color: var(--carta-2); }
.tessera-qr-azione { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--carta-2); }
.tessera-qr-azione svg { width: 14px; height: 14px; }
.tessera-azioni { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tessera-azioni:not(:has(> :not([hidden]))) { display: none; }

/* Suggerimento che si chiude: aggiungere l'app alla schermata Home */
.suggerimento {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 6px 12px 14px; border-radius: 14px;
  background: var(--sup-1); box-shadow: 0 0 0 1px var(--linea-gruppo); font-size: .88rem;
}
.suggerimento > svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--brand-testo); }
.suggerimento p { flex: 1; color: var(--gesso-2); }
.suggerimento strong { color: var(--gesso); font-weight: 650; }
.suggerimento .btn { margin-top: -4px; border-color: transparent; color: var(--gesso-3); }

/* ---------- Scheda Avvisi ---------- */
.voce { position: relative; display: grid; gap: 5px; padding: 15px 16px; }
.voce-etichetta { display: flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 650; color: var(--gesso-3); }
.voce-etichetta.tinta { color: var(--brand-testo); }
.voce-etichetta.urgente { color: var(--stop); }
.voce-titolo { font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.voce-testo { white-space: pre-line; }
.voce-meta { font-size: .82rem; color: var(--gesso-2); }
.voce-meta::first-letter { text-transform: uppercase; }
.voce .btn { justify-self: start; margin-top: 6px; }
.nuovo { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: .14em; border-radius: 50%; background: var(--info); }
details.odg summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--brand-testo); width: max-content; list-style: none; }
details.odg summary::-webkit-details-marker { display: none; }
details.odg summary::after { content: ' ›'; }
details.odg[open] summary::after { content: ' ‹'; }
details.odg[open] summary { margin-bottom: 4px; }
.vuoto-app { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 24px; color: var(--gesso-2); }
.vuoto-app svg { width: 34px; height: 34px; color: var(--gesso-3); }
.vuoto-app strong { color: var(--gesso); font-size: 1.05rem; }

/* ---------- Scheda Turni ---------- */
.data-blocco { display: grid; justify-items: center; width: 42px; flex: none; gap: 2px; line-height: 1; }
.data-blocco span { font-size: .64rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--gesso-3); }
.data-blocco span:first-child { color: var(--brand-testo); }
.data-blocco b { font: 700 1.45rem/1 var(--font); font-variant-numeric: tabular-nums; }
.turno-orario { font-variant-numeric: tabular-nums; color: var(--gesso); font-weight: 600; }
.intero { white-space: nowrap; }

/* ---------- Scheda Io ---------- */
.profilo { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 2px; }
.profilo .avatar { width: 84px; height: 84px; border-radius: 50%; font-size: 1.6rem; }
.profilo-nome { font: 750 1.35rem/1.15 var(--font); letter-spacing: -0.01em; }
.profilo .muted { margin-top: -4px; font-size: .9rem; }

/* Sul telefono i dialoghi salgono dal basso, come i fogli delle app */
@media (max-width: 600px) {
  .app-iscritti dialog {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom); background: var(--sup-1);
  }
  .app-iscritti dialog[open] { animation: foglio-in .26s cubic-bezier(.2, .8, .2, 1); }
  .app-iscritti .dialog-foot .btn { flex: 1; padding-block: 12px; }
}
@keyframes foglio-in { from { transform: translateY(48px); opacity: 0; } }

.auth-switch { display: grid; grid-template-columns: 1fr 1fr; background: var(--incavo); border-radius: 11px; padding: 3px; border: 1px solid var(--linea); }
.auth-switch button { border: 0; background: transparent; padding: 10px; border-radius: 8px; font: 650 .92rem var(--font); color: var(--gesso-2); cursor: pointer; }
.auth-switch button[aria-selected="true"] { background: var(--sup-3); color: var(--gesso); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }

.photo-pick {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px dashed var(--linea-2);
  border-radius: var(--r); cursor: pointer; transition: border-color .15s;
}
.photo-pick:hover { border-color: var(--brand); }
.photo-pick { font-weight: 450; }
.photo-pick strong { font-weight: 650; }
.photo-pick .avatar { width: 52px; height: 52px; border-radius: 10px; }
details.values { border: 1px solid var(--linea); border-radius: var(--r); padding: 0 16px; background: var(--incavo); }
details.values summary { cursor: pointer; padding: 12px 0; font-weight: 650; }
details.values div { padding-bottom: 15px; white-space: pre-line; color: var(--gesso-2); font-size: .9rem; }

.footer-links { display: flex; justify-content: center; gap: 20px; font-size: .82rem; color: var(--gesso-3); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--gesso); }

/* QR a schermo intero, su bianco: si legge meglio con poca luce */
.qr-pieno {
  position: fixed; inset: 0; z-index: 70; background: #fff; color: var(--carta-ink);
  display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center;
  animation: esito-in .16s ease-out; cursor: pointer;
}
.qr-pieno:focus { outline: none; }
.qr-pieno [data-qr] svg { width: min(84vw, 420px); height: auto; display: block; }
.qr-pieno .stub-timer { width: min(84vw, 420px); }
.qr-pieno-nome { font: 800 1.35rem/1.1 var(--font); }
.qr-pieno-codice { font: 700 1.1rem var(--font); font-stretch: 112%; letter-spacing: .15em; color: var(--carta-2); }
.qr-pieno .btn-dark { background: var(--carta-ink); color: #fff; }

/* App iscritti aperta da computer: invito ad aprirla sul telefono */
.portal:has(.phone-only) { max-width: 900px; }
.phone-only { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; padding: 48px 0 24px; }
.phone-only h1 { font-size: clamp(2rem, 4vw, 2.75rem); max-width: 14ch; }
.phone-only .muted { max-width: 46ch; }
.phone-only .qr-tile { margin: 0; padding: 18px; display: grid; gap: 10px; justify-items: center; color: var(--carta-ink); }
.phone-only .qr-img { width: 220px; height: 220px; }
.phone-only .qr-tile p { font-size: .82rem; font-weight: 600; color: var(--carta-2); }
@media (max-width: 700px) { .phone-only { grid-template-columns: 1fr; justify-items: center; gap: 32px; } }

/* Passi numerati (sequenze vere: collegamento, apertura sul telefono) */
.pairing-steps { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 10px; }
.pairing-steps li { counter-increment: passo; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline; color: var(--gesso-2); }
.pairing-steps li::before {
  content: counter(passo); font: 700 1.05rem/1 var(--font); font-stretch: var(--stretto); color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Gestionale
   ========================================================================== */
.admin { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--incavo); border-right: 1px solid var(--linea); padding: 18px 12px;
  display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar > .brand { padding: 2px 6px; align-items: center; }
.sidebar > .brand .brand-name { font-size: .98rem; }
.nav { display: grid; gap: 2px; }
.nav button, .nav a {
  border: 0; background: transparent; text-align: left; padding: 9px 11px; border-radius: var(--r-ctrl);
  font: 550 .91rem var(--font); color: var(--gesso-2); cursor: pointer; display: flex; gap: 11px; align-items: center; text-decoration: none;
}
.nav svg { width: 18px; height: 18px; flex: none; }
.nav-gruppo { margin: 14px 0 4px; padding: 0 11px; font-size: .74rem; font-weight: 600; color: var(--gesso-3); }
.nav-gruppo:first-child { margin-top: 0; }
.nav button:hover, .nav a:hover { background: var(--sup-1); color: var(--gesso); }
.nav button[aria-current="page"] { background: var(--sup-2); color: var(--gesso); font-weight: 650; }
.nav button[aria-current="page"] svg { color: var(--brand); }
.badge {
  margin-left: auto; background: var(--warn); color: #2A1B00; border-radius: 6px;
  font-size: .72rem; padding: 1px 7px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.sidebar-foot { margin-top: auto; display: grid; gap: 10px; }
.sidebar-foot .person { padding: 10px; border-radius: var(--r); background: var(--sup-1); border: 1px solid var(--linea); }
.main { padding: 30px clamp(18px, 3vw, 40px) 72px; display: grid; gap: 22px; align-content: start; min-width: 0; max-width: 1280px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-bottom: 4px; }
.page-head p { color: var(--gesso-2); margin-top: 6px; }
.page-head > .row { flex-wrap: nowrap; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }
/* Nelle colonne strette le intestazioni delle tabelle vanno a capo invece di tagliare la tabella */
.two-col .table-wrap th { white-space: normal; }
.menu-toggle { display: none; }
@media (max-width: 860px) {
  .admin { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 50; transform: translateX(-100%); transition: transform .22s; }
  .sidebar.open { transform: none; box-shadow: 30px 0 60px rgb(0 0 0 / 60%); }
  .menu-toggle { display: inline-flex; }
  .main { padding-top: 20px; }
}
.swatch { width: 46px; height: 46px; border-radius: var(--r-ctrl); border: 1px solid var(--linea-2); padding: 3px; background: var(--incavo); cursor: pointer; }
.logo-preview { min-width: 72px; max-width: 200px; height: 72px; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--linea); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #888; }
.logo-preview img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.logo-preview svg { width: 26px; height: 26px; }

/* Turni dei volontari */
.etichetta-settimana { font-weight: 650; }
.etichetta-settimana::first-letter { text-transform: uppercase; }
.settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.giorno-turni { display: grid; gap: 8px; align-content: start; min-height: 160px; padding: 10px; border-radius: var(--r); background: var(--incavo); border: 1px solid var(--linea); }
.giorno-turni h3 { font-size: .86rem; font-weight: 650; color: var(--gesso-2); }
.giorno-turni h3::first-letter { text-transform: uppercase; }
.giorno-turni.oggi { border-color: var(--brand); }
.giorno-turni.oggi h3 { color: var(--brand); }
.turno {
  display: grid; gap: 3px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--sup-2); border: 1px solid var(--linea); border-left: 3px solid var(--warn);
  border-radius: 8px; padding: 8px 10px;
}
.turno:hover { background: var(--sup-3); }
.turno.completo { border-left-color: var(--ok); }
.turno-ora { font: 700 .95rem var(--font); font-stretch: var(--stretto); font-variant-numeric: tabular-nums; }
.turno strong { font-weight: 650; font-size: .88rem; }
.turno-posti { font-size: .76rem; color: var(--gesso-2); }
.turno.scoperto .turno-posti { color: var(--warn); }
.turno-nomi { font-size: .76rem; color: var(--gesso-2); }
@media (max-width: 1100px) { .settimana { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .settimana { grid-template-columns: 1fr; } .giorno-turni { min-height: 0; } }
.segno-volontario { color: var(--info); font-weight: 600; }
.turno-carta { display: grid; gap: 6px; background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px 16px; }
.turno-carta.mio { border-color: color-mix(in oklab, var(--brand) 60%, transparent); }
.turno-giorno::first-letter { text-transform: uppercase; }
.turno-carta .turno-ora { color: var(--brand); }

/* Assemblee */
.assemblee { display: grid; gap: 10px; }
.assemblea {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px 18px;
}
.assemblea:hover { background: var(--sup-2); }
.assemblea-data { display: grid; justify-items: center; gap: 3px; line-height: 1; color: var(--gesso-2); font-size: .74rem; font-weight: 600; }
.assemblea-data b { font: 700 2.1rem/1 var(--font); font-stretch: var(--stretto); color: var(--gesso); }
.assemblea-testo { display: grid; gap: 5px; min-width: 0; }
.assemblea-testo strong { font-weight: 700; font-size: 1.02rem; }
.assemblea-quorum { text-align: right; white-space: nowrap; line-height: 1.2; }
.assemblea-quorum b { font: 700 1.5rem var(--font); font-stretch: var(--stretto); }
.assemblea-titolo { font-size: 1.5rem; font-stretch: var(--largo); }
.quorum { display: grid; gap: 8px; }
.quorum .bar-track { height: 8px; }
.quorum b { font-weight: 700; }
@media (max-width: 560px) {
  .assemblea { grid-template-columns: 52px minmax(0, 1fr); }
  .assemblea-quorum { grid-column: 2; text-align: left; }
}

/* ---------- Accesso al gestionale e nuova password ---------- */
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.login-box { width: min(400px, 100%); display: grid; gap: 20px; }
.login-box > .brand { flex-direction: column; gap: 12px; text-align: center; }
.login-box > .brand .brand-mark { width: 56px; height: 56px; border-radius: 14px; font-size: 1.25rem; }
.login-box > .brand .brand-mark.logo { width: auto; max-width: 180px; padding: 8px 12px; }
.login-box > .brand .brand-name { font-size: 1.1rem; }
.login-box h1 + p { margin-top: 6px; }
/* "Password dimenticata?" come collegamento, sotto il pulsante principale */
.login-box .btn-ghost.btn-sm, #form-accesso .btn-ghost.btn-sm { justify-self: center; border-color: transparent; color: var(--gesso-2); }
.login-box .btn-ghost.btn-sm:hover, #form-accesso .btn-ghost.btn-sm:hover { color: var(--gesso); }

/* Collegamento di un telefono scanner (nel gestionale) */
.pairing { display: grid; justify-items: center; gap: 18px; }
.pairing .qr-tile svg { width: min(230px, 60vw); height: auto; display: block; }
.pairing .pairing-steps { width: 100%; }
.pairing > p { text-align: center; }
.pairing-stato { min-height: 28px; }

/* ==========================================================================
   Pagina iniziale
   ========================================================================== */
.home { max-width: 1080px; margin: 0 auto; padding: 28px 20px 72px; display: grid; gap: 64px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 24px; }
.home-title { font-size: clamp(2.5rem, 6.4vw, 4.5rem); font-stretch: 112%; font-weight: 850; line-height: .98; letter-spacing: -0.02em; max-width: 12ch; }
.home-lead { font-size: 1.08rem; color: var(--gesso-2); max-width: 46ch; }
.home-accesso { max-width: 560px; }
.home-accesso .password { display: block; }
.scelte { display: grid; gap: 8px; }
.scelte .btn { justify-content: space-between; text-align: left; padding: 13px 16px; white-space: normal; }
.home-codice { max-width: 560px; }
.home-codice .field > span:first-child { font-weight: 500; color: var(--gesso-2); }
.code-entry { display: flex; gap: 8px; flex-wrap: wrap; max-width: 520px; }
.code-entry .input { flex: 1 1 220px; font-size: 1.02rem; padding: 13px 15px; }
.code-entry .btn { padding: 13px 18px; }
.home-cards { position: relative; padding: 20px 0 40px; }
.home-cards .pass-card { width: min(380px, 100%); margin-inline: auto; }
.home-cards > .pass-card:first-child { visibility: hidden; }
.home-back, .home-front { position: absolute; top: 20px; left: 0; right: 0; }
.home-back { --brand: #2E7D6B; --brand-ink: #FFFFFF; transform: translate(34px, -30px) rotate(7deg); }
.home-front { --brand: #FAC032; --brand-ink: #1C1E21; transform: rotate(-4deg); }
.home-steps { display: grid; gap: 24px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.steps li { counter-increment: passo; border-top: 1px solid var(--linea-2); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.steps li::before {
  content: counter(passo); font: 700 3rem/.9 var(--font); font-stretch: var(--stretto); color: var(--brand);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.steps p { color: var(--gesso-2); max-width: 36ch; }
details.card > summary { cursor: pointer; }
details.card[open] > summary { margin-bottom: 20px; }
@media (max-width: 820px) {
  .home { gap: 48px; }
  .home-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 8px; }
  .home-cards { padding: 36px 0 12px; }
  .home-back { transform: translate(18px, -26px) rotate(6deg); }
  .steps { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   App scanner del telefono
   ========================================================================== */
.scanner-app { overscroll-behavior: none; }
.scan-pair { max-width: 440px; margin: 0 auto; padding: 40px 16px calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 18px; }
.scan-logo { width: 64px; height: 64px; margin: 0 auto 4px; display: block; }
.scan-logo img { width: 100%; height: 100%; border-radius: 16px; }

/* Mirino a quattro angoli, condiviso da collegamento e scanner */
.frame {
  --angolo: var(--brand);
  position: absolute; width: min(64vw, 280px); aspect-ratio: 1;
  background:
    linear-gradient(var(--angolo) 0 0) top left / 34px 4px,
    linear-gradient(var(--angolo) 0 0) top left / 4px 34px,
    linear-gradient(var(--angolo) 0 0) top right / 34px 4px,
    linear-gradient(var(--angolo) 0 0) top right / 4px 34px,
    linear-gradient(var(--angolo) 0 0) bottom left / 34px 4px,
    linear-gradient(var(--angolo) 0 0) bottom left / 4px 34px,
    linear-gradient(var(--angolo) 0 0) bottom right / 34px 4px,
    linear-gradient(var(--angolo) 0 0) bottom right / 4px 34px;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 42%);
}
.viewfinder {
  position: relative; aspect-ratio: 1; background: #000; border-radius: var(--r-oggetto); overflow: hidden;
  display: grid; place-items: center;
}
.viewfinder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewfinder .frame { width: 70%; }
.viewfinder .hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; font-size: .88rem; font-weight: 600; }

.scan-screen { position: relative; height: 100dvh; overflow: hidden; background: #000; }
.scan-camera { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.scan-camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-camera .hint {
  position: absolute; left: 0; right: 0; top: calc(50% + min(32vw, 140px) + 18px);
  text-align: center; color: #fff; font-weight: 600; font-size: .95rem;
}
.scan-start { position: relative; z-index: 2; }
.scan-head {
  position: absolute; inset: 0 0 auto; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 56px; background: linear-gradient(rgb(0 0 0 / 78%), transparent);
}
.scan-count { display: grid; justify-items: end; line-height: 1; }
.scan-count strong { font: 700 2.9rem/.85 var(--font); font-stretch: var(--stretto); color: var(--brand); font-variant-numeric: tabular-nums; }
.scan-count span { font-size: .78rem; color: rgb(255 255 255 / 72%); font-weight: 550; margin-top: 5px; }
/* Passaggio tra ingressi e presenze dell'assemblea */
.scan-modo {
  position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(80px + env(safe-area-inset-top));
  padding: 11px 14px; border-radius: 10px; border: 0; text-align: left; cursor: pointer;
  font: 650 .9rem/1.35 var(--font); background: var(--brand); color: var(--brand-ink);
}
.scan-modo.attivo { background: rgb(22 22 24 / 82%); color: #fff; border: 1px solid rgb(255 255 255 / 22%); }
.scan-count.piena strong { color: var(--stop); }
.scan-count.piena span { color: var(--stop); }
.scan-foot {
  position: absolute; inset: auto 0 0; z-index: 3; display: flex; gap: 10px;
  padding: 56px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / 80%));
}
.scan-foot .btn { background: rgb(22 22 24 / 72%); border-color: rgb(255 255 255 / 18%); color: #fff; }
.scan-foot .btn:first-child { flex: 1; padding: 14px; }

/* Esito a tutto schermo: si legge da lontano, anche con poca luce */
.scan-result {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 28px;
  animation: esito-in .16s ease-out; cursor: pointer;
}
.scan-ok { background: var(--ok); color: #052313; }
.scan-avviso { background: var(--warn); color: #281900; }
.scan-stop { background: var(--stop); color: #2A0704; }
.scan-result-inner { display: grid; justify-items: center; gap: 16px; text-align: center; width: min(360px, 100%); }
.scan-result .result-title { font: 850 clamp(2.2rem, 10vw, 3rem)/1 var(--font); font-stretch: var(--largo); letter-spacing: -0.015em; }
.scan-result .muted { color: inherit; opacity: .72; }
.scan-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / 12%); }
.scan-icon svg { width: 42px; height: 42px; stroke-width: 2.6; }
.scan-person { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; background: rgb(0 0 0 / 10%); padding: 12px; border-radius: 14px; }
.scan-person .avatar-lg { width: 60px; height: 60px; border-radius: 12px; background: rgb(0 0 0 / 14%); color: inherit; }
.scan-person .person-name { font-size: 1.15rem; font-weight: 700; }
.scan-person .bollino { width: 54px; margin-left: auto; }
.scan-person .bollino-vuoto { color: inherit; }
@keyframes esito-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Pagine di solo testo (informativa privacy): una colonna leggibile.
   --------------------------------------------------------------------------- */
.documento { max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; gap: 14px; }
.documento h1 { font-size: 2rem; font-weight: 850; letter-spacing: -0.02em; margin-top: 8px; }
.documento h2 { font-size: 1.1rem; font-weight: 750; margin-top: 18px; }
.documento p, .documento li { line-height: 1.6; }
.documento ul { display: grid; gap: 8px; padding-left: 20px; }
.documento li { list-style: disc; }
/* Segna i dati del gestore che vanno ancora inseriti: visibili, non nascosti per sbaglio. */
.documento [data-da-compilare] {
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  color: var(--brand-testo); border-radius: 4px; padding: 1px 6px;
}

.home-footer {
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  align-items: center; padding: 28px 0 8px; border-top: 1px solid var(--linea);
  font-size: .9rem;
}

/* ==========================================================================
   Movimento della pagina iniziale
   Una sola idea: le cose entrano quando arrivano sotto gli occhi, una volta sola.
   Niente animazioni in loop, niente parallasse: attirano l'attenzione, stancano
   alla seconda visita e danno fastidio a chi soffre di vertigini.
   ========================================================================== */
:root { --entrata: cubic-bezier(.22, 1, .36, 1); }

/* Nascosto solo quando il JS e' vivo (classe messa da js/motion.js): senza,
   la pagina resta leggibile com'e'. */
.motion .rivela { opacity: 0; transform: translateY(12px); filter: blur(6px); }
.motion .rivela.dentro {
  opacity: 1; transform: none; filter: none;
  transition:
    opacity .55s var(--entrata) var(--ritardo, 0ms),
    transform .55s var(--entrata) var(--ritardo, 0ms),
    filter .55s var(--entrata) var(--ritardo, 0ms);
}
/* Le tessere sono gia' ruotate di loro: si muove il contenitore, non le carte,
   altrimenti la trasformazione dell'entrata cancellerebbe l'inclinazione. */
.motion .home-cards.rivela { transform: translateY(16px) scale(.99); }

/* Alone caldo dietro le tessere: fermo, non pulsa. Da' profondita' alla scena
   senza chiedere attenzione. */
.home-cards::before {
  content: ""; position: absolute; inset: -14% -6% 8%;
  background: radial-gradient(58% 56% at 56% 44%, color-mix(in oklab, var(--brand) 20%, transparent), transparent 72%);
  filter: blur(38px); pointer-events: none;
}

/* Spazio per una scena 3D al posto delle tessere: appena contiene qualcosa,
   le tessere finte si tolgono di mezzo. */
.scena-3d:not(:empty) { position: relative; z-index: 1; min-height: 360px; }
.scena-3d:not(:empty) ~ .pass-card { display: none; }
.scena-3d > canvas, .scena-3d > svg, .scena-3d > video { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  /* Chi chiede meno movimento vede la pagina gia' composta, non vuota. */
  .motion .rivela { opacity: 1; transform: none; filter: none; }
}

/* ---------- La tessera della pagina iniziale: si guarda e si apre ---------- */
.home-vetrina { display: grid; gap: 18px; align-items: center; }
/* La spiegazione sta sotto le tessere, non di fianco: la colonna della hero e'
   larga quanto una tessera, e affiancarla ridurrebbe la carta a un francobollo. */
.spiega-tessera { width: min(380px, 100%); margin-inline: auto; }

.home-cards { perspective: 1000px; }
/* Il movimento sta sulle carte, non sul contenitore: l'entrata usa gia' quello. */
.home-cards .pass-card { transition: transform .5s var(--entrata), opacity .5s var(--entrata); }

.tessere-apri {
  position: absolute; inset: 0; z-index: 2;
  appearance: none; background: none; border: 0; padding: 0 0 6px;
  display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer; border-radius: var(--r);
}
.tessere-invito {
  font: 600 .82rem/1 var(--font); color: var(--gesso-2);
  background: color-mix(in oklab, var(--sup-1) 86%, transparent);
  border: 1px solid var(--linea); border-radius: 999px; padding: 7px 14px;
  transition: color .18s ease-out, border-color .18s ease-out, transform .18s var(--entrata);
}
.tessere-apri:hover .tessere-invito { color: var(--gesso); border-color: var(--gesso-3); }
.tessere-apri:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* Passaggio del mouse: le carte seguono il puntatore, appena appena. Solo con un
   mouse vero: su un dito non esiste "passare sopra" e il tocco e' gia' il clic. */
@media (hover: hover) and (pointer: fine) {
  .home-cards.inclina .home-front {
    transform: rotate(-4deg) translateY(-8px)
               rotateX(var(--incl-x, 0deg)) rotateY(var(--incl-y, 0deg));
  }
  .home-cards.inclina .home-back {
    transform: translate(34px, -30px) rotate(7deg) translateY(-4px)
               rotateX(calc(var(--incl-x, 0deg) * .55)) rotateY(calc(var(--incl-y, 0deg) * .55));
  }
}

/* Aperta: le carte si raddrizzano e si scostano, cosi' si leggono tutte e due. */
.home-cards.aperta .home-front { transform: rotate(0deg) translateY(10px) scale(.96); }
.home-cards.aperta .home-back { transform: translate(6px, -58px) rotate(-3deg) scale(.9); opacity: .62; }
.home-cards.aperta .tessere-invito { transform: translateY(6px); opacity: 0; }

.spiega-tessera {
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 18px 20px; display: grid; gap: 12px; align-content: start;
}
.spiega-tessera[hidden] { display: none; }
.spiega-tessera h2 { font-size: 1.05rem; font-weight: 750; }
.spiega-tessera ul { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.spiega-tessera li { position: relative; padding-left: 16px; font-size: .92rem; color: var(--gesso-2); line-height: 1.5; }
.spiega-tessera li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--brand);
}
.spiega-tessera .btn { justify-self: start; }
/* Entra con lo stesso gesto del resto della pagina: sfocatura che si schiarisce. */
.motion .spiega-tessera { opacity: 0; transform: translateY(8px); filter: blur(5px); }
.motion .spiega-tessera.dentro {
  opacity: 1; transform: none; filter: none;
  transition: opacity .4s var(--entrata), transform .4s var(--entrata), filter .4s var(--entrata);
}

@media (prefers-reduced-motion: reduce) {
  .motion .spiega-tessera { opacity: 1; transform: none; filter: none; }
}

/* ---------- Sfondo animato della hero ----------
   Il video sta dietro al contenuto, schiarito da un velo scuro: il testo deve
   restare leggibile sempre, anche sul fotogramma piu' chiaro dell'animazione.
   Il bordo inferiore sfuma nel fondo della pagina, cosi' non si vede il taglio. */
.home-hero { position: relative; isolation: isolate; }
.hero-sfondo {
  position: absolute; z-index: -1; top: -40px; bottom: -24px;
  left: 50%; width: 100vw; transform: translateX(-50%);
  overflow: hidden; pointer-events: none;
}
.hero-sfondo video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Il poster resta visibile finche' il video non parte: niente buco nero. */
  background: var(--fondo) center / cover no-repeat;
}
.hero-velo {
  position: absolute; inset: 0;
  background:
    /* sfumatura sui bordi: nasconde il taglio del riquadro */
    linear-gradient(to bottom, var(--fondo), transparent 16%, transparent 72%, var(--fondo)),
    /* velo: denso a sinistra, dove si legge; piu' leggero a destra, dove il video si vede */
    linear-gradient(to right,
      color-mix(in oklab, var(--fondo) 92%, transparent) 0%,
      color-mix(in oklab, var(--fondo) 78%, transparent) 42%,
      color-mix(in oklab, var(--fondo) 38%, transparent) 100%);
}
@media (max-width: 820px) {
  /* Su telefono il testo occupa tutta la larghezza: serve piu' velo, non meno. */
  .hero-velo { background: linear-gradient(to bottom, var(--fondo), color-mix(in oklab, var(--fondo) 86%, transparent) 40%, var(--fondo)); }
}