:root {
  --verde: #2f7d32;
  --verde-forte: #1f5a23;
  --verde-tenue: #e7f2e4;
  --su-verde: #ffffff;
  --sfondo: #f3f4f0;
  --superficie: #ffffff;
  --superficie-2: #eceee8;
  --testo: #1c2118;
  --testo-tenue: #5a6154;
  --bordo: #d7dbd1;
  --rosso: #b3261e;
  --rosso-tenue: #fbe9e7;
  --ambra: #7a4f00;
  --ambra-tenue: #fff3d1;
  --fuoco: #1a5fb4;
  --ombra: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 6px rgb(0 0 0 / 0.06);
  --ombra-alta: 0 12px 32px rgb(0 0 0 / 0.2);
  --raggio: 10px;
  --raggio-piccolo: 6px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --carattere: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --larghezza-colonna: 288px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --verde: #79c374;
    --verde-forte: #a3dc9e;
    --verde-tenue: #1f2f1c;
    --su-verde: #0d170b;
    --sfondo: #131611;
    --superficie: #1d211a;
    --superficie-2: #262b22;
    --testo: #e6e9e1;
    --testo-tenue: #a2aa99;
    --bordo: #353b30;
    --rosso: #f2b8b5;
    --rosso-tenue: #3b1e1c;
    --ambra: #f3c867;
    --ambra-tenue: #362b10;
    --fuoco: #8ab4f8;
    --ombra: 0 1px 2px rgb(0 0 0 / 0.5);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--carattere);
  font-size: 16px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--sfondo);
  min-height: 100vh;
}

a { color: var(--verde-forte); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--s3); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--s3); }

:focus-visible {
  outline: 3px solid var(--fuoco);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.testo-tenue { color: var(--testo-tenue); }
.vuoto { color: var(--testo-tenue); padding: var(--s5) 0; }

/* Fascia demo e intestazione */
.fascia-demo {
  background: var(--ambra-tenue);
  color: var(--ambra);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding: var(--s1) var(--s4);
  border-bottom: 1px solid var(--bordo);
}

.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.app-header__title {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--verde-forte);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.app-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s4);
}

.app-header__nav a {
  color: var(--testo);
  text-decoration: none;
  padding: var(--s1) 0;
  border-bottom: 2px solid transparent;
}

.app-header__nav a:hover { border-bottom-color: var(--bordo); }
.app-header__nav a[aria-current="page"] { border-bottom-color: var(--verde); font-weight: 600; }
.app-header__chi { color: var(--testo-tenue); font-size: 0.875rem; }

/* Bottoni */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.btn:hover { background: var(--superficie-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }

.btn--primary { background: var(--verde); border-color: var(--verde); color: var(--su-verde); }
.btn--primary:hover { background: var(--verde-forte); border-color: var(--verde-forte); }
.btn--pericolo { color: var(--rosso); }
.btn--pericolo:hover { background: var(--rosso-tenue); }
.btn--testo { border-color: transparent; background: transparent; padding-inline: var(--s2); }
.btn--google { width: 100%; }

.btn--icona {
  min-height: 32px;
  min-width: 32px;
  padding: 0 var(--s2);
  border-color: transparent;
  background: transparent;
  color: var(--testo-tenue);
  font-size: 1.05rem;
}

.btn--icona:hover { background: var(--superficie-2); color: var(--testo); }

/* Pagine */
main { outline: none; }

.pagina {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s5);
}

.pagina--bacheca { max-width: none; }
.pagina--testo { max-width: 720px; }

.pagina__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.pagina__testa h1 { margin-bottom: var(--s1); }
.pagina__sottotitolo { color: var(--testo-tenue); margin: 0; }
.briciola { font-size: 0.875rem; text-decoration: none; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* Schede di accesso */
.scheda-accesso {
  max-width: 420px;
  margin: var(--s6) auto;
  padding: var(--s5);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.separatore {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--testo-tenue);
  font-size: 0.875rem;
  margin: var(--s4) 0;
}

.separatore::before,
.separatore::after { content: ""; flex: 1; border-top: 1px solid var(--bordo); }
.link-sotto { margin: var(--s3) 0 0; font-size: 0.95rem; }

/* Moduli */
.modulo { display: grid; gap: var(--s4); }
.campo { display: grid; gap: var(--s1); }
.campo__etichetta { font-weight: 600; font-size: 0.95rem; }
.campo__aiuto { color: var(--testo-tenue); font-size: 0.85rem; }

.campo input,
.campo select,
.campo textarea,
select {
  width: 100%;
  min-height: 42px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
}

.campo textarea { resize: vertical; }
.spunta { display: flex; align-items: flex-start; gap: var(--s2); }
.spunta input { margin-top: 0.3em; width: 18px; height: 18px; }
.modulo__errore { color: var(--rosso); font-weight: 600; margin: 0; }
.modulo__errore:empty { display: none; }
.modulo__azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Elenco bacheche */
.griglia-bacheche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s4);
}

.scheda-bacheca {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: 130px;
  padding: var(--s4);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-top: 4px solid var(--verde);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  color: var(--testo);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.scheda-bacheca:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.scheda-bacheca h2 { margin: 0; }
.scheda-bacheca p { margin: 0; color: var(--testo-tenue); }
.scheda-bacheca__conta { margin-top: auto; font-size: 0.85rem; color: var(--testo-tenue); }
.zona-demo { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px dashed var(--bordo); }

/* Bacheca */
.board {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  overflow-x: auto;
  padding-bottom: var(--s4);
  scroll-snap-type: x proximity;
}

.list {
  flex: 0 0 var(--larghezza-colonna);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 210px);
  background: var(--superficie-2);
  border-radius: var(--raggio);
  scroll-snap-align: start;
}

.list--proposte { background: var(--ambra-tenue); }

.list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) var(--s3) var(--s1) var(--s4);
}

.list__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: 0.95rem;
}

.list__conta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--testo-tenue);
  background: var(--superficie);
  border-radius: 999px;
  padding: 0 var(--s2);
}

.list__menu { display: flex; }
.list__nota { font-size: 0.8rem; color: var(--ambra); padding: 0 var(--s4); margin: 0 0 var(--s2); }

.list__cards {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s2) var(--s3);
  overflow-y: auto;
  border-radius: var(--raggio-piccolo);
  transition: background 0.15s;
}

.list__cards--sopra { background: var(--verde-tenue); outline: 2px dashed var(--verde); outline-offset: -4px; }
.list__vuota { color: var(--testo-tenue); font-size: 0.85rem; text-align: center; margin: var(--s2) 0; }

.list__add-card {
  margin: var(--s1) var(--s3) var(--s3);
  padding: var(--s2);
  border: none;
  border-radius: var(--raggio-piccolo);
  background: transparent;
  color: var(--testo-tenue);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.list__add-card:hover { background: var(--superficie); color: var(--testo); }

.add-list {
  flex: 0 0 var(--larghezza-colonna);
  min-height: 48px;
  border: 2px dashed var(--bordo);
  border-radius: var(--raggio);
  background: transparent;
  color: var(--testo-tenue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.add-list:hover { border-color: var(--verde); color: var(--verde-forte); }

.card {
  padding: var(--s3);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  box-shadow: var(--ombra);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
}

.card[draggable="true"] { cursor: grab; }
.card:hover { border-color: var(--verde); }
.card--mia { border-left: 4px solid var(--verde); }
.card--trascinata { opacity: 0.4; }
.card__text { margin: 0 0 var(--s2); font-weight: 500; overflow-wrap: anywhere; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  font-size: 0.78rem;
}

.card__info { color: var(--testo-tenue); }
.card__persone { display: flex; margin-left: auto; }
.card__persone .avatar + .avatar { margin-left: -6px; }

.segnaposto {
  height: 6px;
  border-radius: 3px;
  background: var(--verde);
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--superficie);
  background: var(--verde);
  color: var(--su-verde);
  font-size: 0.68rem;
  font-weight: 700;
}

.etichetta {
  display: inline-block;
  padding: 1px var(--s2);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--testo-tenue);
  font-size: 0.75rem;
  font-weight: 600;
}

.etichetta--vicina { background: var(--ambra-tenue); color: var(--ambra); }
.etichetta--scaduta { background: var(--rosso-tenue); color: var(--rosso); }
.etichetta--libero { background: var(--verde-tenue); color: var(--verde-forte); }

/* Finestra */
.finestra {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo);
  box-shadow: var(--ombra-alta);
}

.finestra::backdrop { background: rgb(0 0 0 / 0.45); }

.finestra__testa {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.finestra__titolo { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.finestra__corpo { display: grid; gap: var(--s5); padding: var(--s5); }

.task__dove { color: var(--testo-tenue); font-size: 0.9rem; margin: 0; }
.task__descrizione { white-space: pre-wrap; overflow-wrap: anywhere; }
.task__sezione h3 { margin-bottom: var(--s2); }
.task__azioni { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.task__azioni select { width: auto; }
.persone { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.persone li { display: flex; align-items: center; gap: var(--s2); }
.scelta-persone { border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); padding: var(--s3); display: grid; gap: var(--s2); max-height: 260px; overflow-y: auto; }
.commenti { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); }
.commento { padding: var(--s3); background: var(--superficie-2); border-radius: var(--raggio-piccolo); }
.commento__testa { font-size: 0.85rem; margin-bottom: var(--s1); }
.commento__testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task__storico ul { margin: var(--s2) 0 0; padding-left: var(--s4); font-size: 0.9rem; display: grid; gap: var(--s1); }
.task__storico summary { cursor: pointer; font-weight: 600; }
.archivio { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.archivio li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--bordo); }

/* I miei task */
.lista-miei { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.riga-mio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  color: var(--testo);
  text-decoration: none;
}

.riga-mio:hover { border-color: var(--verde); }
.riga-mio__titolo { font-weight: 600; flex: 1 1 240px; }

/* Persone e posta */
.scheda {
  padding: var(--s4);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.scheda h3 { display: flex; gap: var(--s2); align-items: center; }
.griglia-richieste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.griglia-richieste .azioni .campo { flex: 1 1 100%; }
.tabella-scorre { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--raggio); }
.tabella th, .tabella td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella th { font-size: 0.85rem; color: var(--testo-tenue); }
.tabella select { min-width: 150px; }
.posta { display: grid; gap: var(--s4); }
.messaggio__oggetto { margin: 0; font-size: 1.05rem; }
.messaggio__testo { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--s3) 0 0; }
.avviso-bozza { padding: var(--s3); background: var(--ambra-tenue); color: var(--ambra); border-radius: var(--raggio-piccolo); font-weight: 600; }

/* Avvisi a comparsa */
.avvisi {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 10;
  display: grid;
  gap: var(--s2);
  max-width: min(380px, calc(100% - 32px));
}

.avviso {
  padding: var(--s3) var(--s4);
  border-radius: var(--raggio-piccolo);
  background: var(--testo);
  color: var(--superficie);
  box-shadow: var(--ombra-alta);
  font-weight: 600;
}

.avviso--errore { background: var(--rosso); color: #fff; }

@media (prefers-color-scheme: dark) {
  .avviso--errore { color: #1d0b0a; }
}

/* Telefono */
@media (max-width: 640px) {
  .app-header { padding: var(--s3) var(--s4); }
  .pagina { padding: var(--s4); }
  :root { --larghezza-colonna: 82vw; }
  .list { max-height: none; }
  .finestra { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .finestra__corpo { padding: var(--s4); }
  .scheda-accesso { margin: var(--s4) auto; }
}

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