/* Registro Gruppo ADO
   Direzione: diario scolastico ripensato — evidenziatori, adesivi, inchiostro indaco.
   Area pubblica audace (adesivi con bordo e ombra piena), area admin calma e leggibile. */

@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #22205A;
  --ink-2: #4A4780;
  --muted: #6B6894;
  --paper: #F1F0FF;
  --card: #FFFFFF;
  --line: #DCDAF2;
  --yellow: #FFE04A;
  --pink: #FF4D94;
  --pink-soft: #FFE1EE;
  --blue: #3D5AFE;
  --blue-soft: #E3E8FF;
  --mint: #1FC98E;
  --mint-soft: #D6F7EA;
  --orange: #FF9F1C;
  --orange-soft: #FFF0D9;
  --danger: #D7263D;
  --radius: 14px;
  --font: 'Bricolage', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-variation-settings: 'opsz' 14;
}
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5rem; font-weight: 750; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); font-stretch: 85%; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; margin-top: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
img, svg { max-width: 100%; }
small, .small { font-size: .875rem; }
.muted { color: var(--muted); }
.strong { font-weight: 650; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.warn-text { color: #B5179E; font-weight: 600; }
.danger-text { color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1rem;
  font: inherit; font-weight: 650; font-size: .95rem; line-height: 1.1;
  color: var(--ink); background: var(--card);
  border: 2px solid var(--ink); border-radius: 999px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .08s ease, background-color .15s ease;
}
.btn:hover { background: var(--blue-soft); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--blue-soft); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-wa { border-color: #1DA851; color: #0F7A39; }
.btn-wa:hover { background: #DCF8E6; }
.btn-sm { min-height: 36px; padding: .35rem .8rem; font-size: .875rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-row form { margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Tag ---------- */
.tag {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 650; line-height: 1.5; vertical-align: middle;
  background: var(--line); color: var(--ink);
}
.tag-incontro { background: var(--blue-soft); color: #2337B8; }
.tag-evento { background: var(--pink-soft); color: #B0105A; }
.tag-ok { background: var(--mint-soft); color: #0A7A53; }
.tag-no { background: var(--pink-soft); color: #B0105A; }
.tag-part { background: var(--orange-soft); color: #9A5B00; }
.tag-off { background: #ECEBF5; color: var(--muted); }

/* ---------- Form ---------- */
.form { display: grid; gap: 1rem; max-width: 34rem; }
.form-wide { max-width: 50rem; }
label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
label small { font-weight: 400; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .75rem;
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: 10px;
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
input[type="checkbox"], input[type="radio"] { width: 1.2rem; height: 1.2rem; min-height: 0; accent-color: var(--ink); margin: 0; flex: none; }
input[readonly] { background: var(--paper); }
input:disabled { background: #F4F4FA; color: var(--muted); }
.check { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.checks, .radio-stack { display: grid; gap: .6rem; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
legend { font-weight: 750; font-size: 1.1rem; margin-bottom: .75rem; padding: 0; }
.row2, .row3 { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .row2 { grid-template-columns: 1fr 1fr; }
  .row3 { grid-template-columns: 1fr 1fr 1fr; }
}
.gen-row { padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin: .5rem 0; }
.inline-form label { font-size: .82rem; }
.inline-form input, .inline-form select { min-height: 38px; padding: .35rem .55rem; width: auto; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem 1rem; padding: .75rem; background: var(--paper); border-radius: 10px; margin: .5rem 0 1rem; }

/* Segmented control (link o radio) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 3px; background: #fff; border: 2px solid var(--line); border-radius: 999px; }
.seg a, .seg label {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .85rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.seg a[aria-current], .seg label:has(input:checked) { background: var(--ink); color: #fff; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 1px; }
.seg-mini label { padding: .25rem .7rem; }

/* ---------- Alert ---------- */
.alert { padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1rem; border-left: 5px solid; background: #fff; }
.alert-success { border-color: var(--mint); background: var(--mint-soft); }
.alert-error { border-color: var(--danger); background: #FFE3E6; }
.alert-warn { border-color: var(--orange); background: var(--orange-soft); }
.alert-info { border-color: var(--blue); background: var(--blue-soft); }

/* =========================================================
   AREA ADMIN
   ========================================================= */
.topbar {
  display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap;
  padding: .7rem max(1rem, env(safe-area-inset-left));
  background: var(--ink); color: #fff;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 750; font-size: 1.1rem; font-stretch: 85%; }
.brand:hover { color: var(--yellow); }
.brand-mark {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  background: var(--yellow); color: var(--ink); border-radius: 9px;
  font-weight: 800; font-stretch: 75%; transform: rotate(-6deg);
}
.anno-switch select { min-height: 34px; padding: .2rem 2rem .2rem .7rem; font-size: .9rem; font-weight: 600; background-color: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); border-radius: 999px; }
.anno-switch select option { color: var(--ink); }
.who { margin-left: auto; display: flex; gap: .9rem; align-items: center; font-size: .9rem; }
.who a, .who .linklike { color: #fff; }
.who form { margin: 0; }

.mainnav {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  padding: .5rem max(1rem, env(safe-area-inset-left));
  background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  flex: none; padding: .45rem .85rem; border-radius: 999px;
  color: var(--ink-2); font-weight: 600; text-decoration: none; font-size: .95rem;
}
.mainnav a:hover { background: var(--paper); color: var(--ink); }
.mainnav a[aria-current] { background: var(--yellow); color: var(--ink); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: .2rem; }
.page-head p { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.toolbar input[type="search"] { max-width: 18rem; }
.filters label { font-size: .82rem; }
.filters input, .filters select { width: auto; min-height: 38px; padding: .3rem .6rem; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.panel > summary { cursor: pointer; font-weight: 650; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.panel-head h2 { margin: 0; }
.panel-today { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--yellow); }
.panel-warn { border-color: var(--orange); background: #FFFBF3; }
.panel-numbers { display: flex; gap: .75rem; flex-wrap: wrap; }
.panel-numbers a { flex: 1 1 10rem; padding: .8rem 1rem; border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; }
.panel-numbers b { display: block; font-size: 2rem; font-stretch: 75%; line-height: 1; }
.hello h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-stretch: 75%; }

.grid-dash { display: grid; gap: 1rem; }
.grid-2 { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .grid-dash { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .grid-dash .panel-today, .grid-dash .panel-warn { grid-column: 1 / -1; }
  .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .grid-2 .panel { margin-bottom: 0; }
  .grid-2 { margin-bottom: 1rem; }
}

/* Lista eventi */
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ev {
  display: grid; grid-template-columns: 3.6rem 1fr; gap: .4rem .9rem; align-items: center;
  padding: .7rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.ev-date { display: grid; justify-items: center; line-height: 1; padding: .4rem 0; border-radius: 10px; background: var(--blue-soft); color: #2337B8; }
.ev-evento .ev-date { background: var(--pink-soft); color: #B0105A; }
.ev-wd, .ev-mon { font-size: .72rem; font-weight: 650; }
.ev-day { font-size: 1.55rem; font-weight: 800; font-stretch: 75%; }
.ev-title { font-weight: 650; }
.ev-meta { font-size: .9rem; color: var(--ink-2); }
.ev-info { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .85rem; color: var(--muted); }
.ev-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.ev-annullato .ev-title, .ev-annullato .ev-meta { text-decoration: line-through; color: var(--muted); }
.ev-annullato .ev-date { background: #ECEBF5; color: var(--muted); }
@media (min-width: 760px) {
  .ev { grid-template-columns: 3.6rem 1fr auto; }
  .ev-actions { grid-column: auto; justify-content: flex-end; }
}

.month-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.month-nav h2 { margin: 0; min-width: 10rem; text-align: center; font-stretch: 85%; }
.month-nav .btn-ghost { font-size: 1.4rem; }

/* Liste a schede */
.card-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.card { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .9rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.card-main { display: grid; gap: .2rem; flex: 1 1 18rem; min-width: 0; }
.card-title { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--ink); }
a.card-title:hover { color: var(--blue); }
.card-side { display: grid; justify-items: end; }
.card-off { opacity: .6; }
.card-hot { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--yellow); }
.card p { margin: .25rem 0 0; color: var(--ink-2); font-size: .92rem; }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }
.amount { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-due { color: #B0105A; font-size: 1.2rem; }

/* Tabelle */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .82rem; color: var(--muted); font-weight: 650; background: #FAFAFE; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FAFAFE; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-off { opacity: .55; }
.table-adesioni input { min-height: 36px; padding: .3rem .55rem; }
.pc { display: inline-block; min-width: 3.2rem; padding: .1rem .5rem; border-radius: 999px; font-weight: 700; text-align: center; }
.pc-hi { background: var(--mint-soft); color: #0A7A53; }
.pc-mid { background: var(--orange-soft); color: #9A5B00; }
.pc-lo { background: var(--pink-soft); color: #B0105A; }
.pc-cell { display: flex; align-items: center; gap: .6rem; min-width: 10rem; }

/* Barre */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.bars li { display: grid; grid-template-columns: 4rem 1fr 3rem; gap: .6rem; align-items: center; font-size: .9rem; }
.bar { display: block; flex: 1; height: .7rem; background: var(--paper); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.bar-hi > span { background: var(--mint); }
.bar-mid > span { background: var(--orange); }
.bar-lo > span { background: var(--pink); }
.bar-val { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.progress { height: .5rem; background: var(--paper); border-radius: 999px; overflow: hidden; margin-top: .35rem; max-width: 22rem; }
.progress span { display: block; height: 100%; background: var(--mint); }

/* Strisce di riepilogo */
.sum-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.sum-strip > div { padding: .8rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.sum-strip span { display: block; font-size: .82rem; color: var(--muted); }
.sum-strip b { font-size: 1.45rem; font-stretch: 80%; font-variant-numeric: tabular-nums; }
.sum-due { border: 2px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--pink); }
.stat-line { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Scheda ragazzo */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 .5rem; }
.dl dt { color: var(--muted); font-size: .9rem; }
.dl dd { margin: 0; }
.gen { display: grid !important; gap: .3rem; }
.link-box { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.link-box input { flex: 1 1 14rem; }
.qr { width: 11rem; height: 11rem; padding: .4rem; background: #fff; border: 2px solid var(--ink); border-radius: 12px; }
.qr svg { width: 100%; height: 100%; display: block; }
.nfc { margin-top: 1rem; padding: 1rem; background: var(--paper); border-radius: 12px; }
.nfc h3 { margin-top: 0; }
.nfc-supported { display: grid; gap: .75rem; }
.nfc-status { margin: 0; font-weight: 600; min-height: 1.5em; }
.nfc-status.ok { color: #0A7A53; }
.nfc-status.err { color: var(--danger); }
.danger-zone { margin-top: 1rem; }
.danger-zone > summary { cursor: pointer; color: var(--danger); font-weight: 650; font-size: .92rem; }
.danger-zone[open] > summary { margin-bottom: .6rem; }
.big-pc { font-size: 2.2rem; font-weight: 800; font-stretch: 75%; }
.dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.dots a { display: grid; justify-items: center; padding: .25rem .45rem; border-radius: 8px; text-decoration: none; font-size: .78rem; line-height: 1.2; color: inherit; }
.dots b { font-size: 0; }
.dots b::before { font-size: .8rem; }
.dot-si a { background: var(--mint-soft); color: #0A7A53; }
.dot-si b::before { content: 'P'; }
.dot-no a { background: var(--pink-soft); color: #B0105A; }
.dot-no b::before { content: 'A'; }
.dot-giust a { background: var(--orange-soft); color: #9A5B00; }
.dot-giust b::before { content: 'G'; }

/* Appello */
.appello-bar {
  position: sticky; top: 3.1rem; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem .8rem; margin-bottom: .75rem;
  background: var(--ink); color: #fff; border-radius: 12px;
}
.appello-bar .btn { border-color: #fff; }
.appello-bar .btn-ghost { color: #fff; border-color: transparent; }
.appello-bar .btn-ghost:hover { background: rgba(255,255,255,.15); }
.appello-count { margin-right: auto; font-size: 1.05rem; }
.appello-count b { font-size: 1.6rem; font-stretch: 75%; color: var(--yellow); }
.appello-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.appello-list > li { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.appello-row { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; cursor: pointer; font-weight: 400; font-size: 1.05rem; min-height: 56px; }
.appello-row input { width: 1.5rem; height: 1.5rem; }
.appello-name { flex: 1; }
.appello-state::before { content: 'Assente'; font-size: .82rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: #ECEBF5; color: var(--muted); }
.appello-list > li:has(input[name="presente[]"]:checked) { border-color: var(--mint); background: #F3FDF9; }
.appello-row:has(input:checked) .appello-state::before { content: 'Presente'; background: var(--mint); color: #fff; }
.appello-extra { padding: 0 1rem .5rem 3.3rem; font-size: .88rem; }
.appello-extra summary { color: var(--muted); cursor: pointer; width: max-content; }
.appello-extra[open] { display: grid; gap: .4rem; padding-bottom: .8rem; }
.appello-extra input[type="text"], .appello-extra input:not([type]) { min-height: 36px; padding: .3rem .6rem; font-size: .9rem; }
.appello-list > li:has(input[name="presente[]"]:checked) .appello-extra { display: none; }
.sticky-save { position: sticky; bottom: 0; padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--paper) 35%); margin-top: .5rem; }

/* Contributi */
.quota-list { list-style: none; margin: .75rem 0 1rem; padding: 0; display: grid; gap: .5rem; }
.quota { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; }
.quota-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.quota-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.pay-form > summary { list-style: none; }
.pay-form > summary::-webkit-details-marker { display: none; }
.pay-form[open] { flex-basis: 100%; }
.pay-list { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .88rem; }
.pay-list li { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: center; padding: .25rem 0; }
.pay-list form { margin: 0 0 0 auto; }

/* Registro */
.log { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.log li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .93rem; }
.log li:last-child { border-bottom: 0; }
.log time { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.log-who { font-weight: 700; margin-right: .3rem; }
.log-elimina { background: #FFF7F8; }
.log-det { margin-top: .3rem; font-size: .85rem; }
.log-det summary { cursor: pointer; color: var(--muted); }
.log-det ul { margin: .3rem 0; padding-left: 1.1rem; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }

.empty { text-align: center; padding: 3rem 1rem; background: #fff; border: 2px dashed var(--line); border-radius: var(--radius); }
.empty h1 { font-size: 3rem; }
.empty p { color: var(--muted); max-width: 32rem; margin: 0 auto 1rem; }

/* Login / installazione */
body.bare { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; background: var(--ink); }
.bare-box { width: 100%; max-width: 26rem; background: #fff; border-radius: 20px; padding: 1.75rem 1.5rem; box-shadow: 8px 8px 0 var(--yellow); }
.bare-brand { display: flex; align-items: center; gap: .6rem; font-weight: 750; font-stretch: 85%; font-size: 1.15rem; margin-bottom: 1.25rem; }

/* =========================================================
   AREA PUBBLICA (ragazzi e genitori)
   ========================================================= */
body.public { background: var(--paper); }
.pub-hero {
  position: relative; overflow: hidden;
  padding: calc(1.6rem + env(safe-area-inset-top)) 1.25rem 2.2rem;
  background: var(--yellow);
  border-bottom: 3px solid var(--ink);
}
.pub-hero::after {
  /* righe del quaderno */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 27px, rgba(34,32,90,.09) 27px 28px);
}
.pub-hero > * { position: relative; z-index: 1; max-width: 40rem; margin-left: auto; margin-right: auto; }
.pub-group { margin: 0 auto .2rem; font-weight: 650; font-size: .95rem; }
.pub-name {
  margin: 0 auto; font-size: clamp(3rem, 15vw, 5.5rem); line-height: .9;
  font-weight: 800; font-stretch: 75%; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.pub-name span { display: block; font-size: .42em; font-weight: 600; font-stretch: 90%; letter-spacing: 0; margin-bottom: .1em; }

.pub { max-width: 40rem; margin: 0 auto; padding: 0 1rem 2rem; }
.pub-sec { margin-top: 2.25rem; }
.pub-404 { padding-top: 4rem; text-align: center; }

/* Titoli evidenziati */
.hl { display: inline-block; font-size: 1.6rem; font-stretch: 80%; padding: 0 .35rem; margin-bottom: .9rem;
      background: linear-gradient(transparent 45%, var(--hl, var(--yellow)) 45%, var(--hl, var(--yellow)) 92%, transparent 92%); }
.hl-pink { --hl: #FFB3D1; }
.hl-blue { --hl: #B9C6FF; }
.hl-mint { --hl: #A6EED3; }
.hl-yellow { --hl: var(--yellow); }

/* Prossimo appuntamento: l'adesivo */
.next { margin-top: -1.4rem; position: relative; z-index: 2; }
.next-h { font-size: .95rem; font-weight: 700; margin: 0 0 .35rem .2rem; display: inline-block; background: var(--ink); color: #fff; padding: .2rem .7rem; border-radius: 999px; transform: rotate(-2deg); }
.next-card {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding: 1rem 1.1rem 1.1rem; background: #fff;
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink);
}
.next-date {
  display: grid; justify-items: center; line-height: 1; padding: .55rem .7rem .6rem; min-width: 5.2rem;
  background: var(--blue); color: #fff; border-radius: 12px; transform: rotate(-3deg);
}
.next-evento .next-date { background: var(--pink); }
.next-wd { font-size: .85rem; font-weight: 650; }
.next-day { font-size: 3.6rem; font-weight: 800; font-stretch: 75%; margin: .05em 0; }
.next-mon { font-size: .85rem; font-weight: 650; }
.next-body { display: grid; gap: .2rem; min-width: 0; }
.next-title { font-size: 1.35rem; line-height: 1.15; font-weight: 750; }
.next-when { font-weight: 600; }
.next-where { color: var(--ink-2); }
.next-desc { margin: .4rem 0 0; font-size: .95rem; }

/* Avvisi */
.notice { padding: 1rem 1.1rem; background: #fff; border: 2px solid var(--ink); border-radius: 14px; margin-bottom: .75rem; }
.notice h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.notice p { margin-bottom: .4rem; }
.notice-hot { background: var(--pink-soft); box-shadow: 4px 4px 0 var(--pink); }

/* Agenda */
.agenda { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--ink); margin-left: .6rem; }
.agenda-item { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: .6rem; padding: .55rem 0 .55rem .9rem; }
.agenda-item::before { content: ''; position: absolute; left: -.55rem; top: 1rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--blue); border: 2px solid var(--ink); }
.agenda-evento::before { background: var(--pink); width: 1rem; height: 1rem; left: -.65rem; }
.agenda-date { line-height: 1.1; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.agenda-date b { display: block; font-size: 1.7rem; font-weight: 800; font-stretch: 75%; color: var(--ink); }
.agenda-body { display: grid; gap: .1rem; }
.agenda-off .agenda-body > b, .agenda-off .agenda-date { text-decoration: line-through; color: var(--muted); }
.agenda-off::before { background: #ECEBF5; }
.agenda details summary { cursor: pointer; color: var(--blue); }
.cal-add { margin-top: 1rem; padding: 1rem; background: #fff; border: 2px dashed var(--ink-2); border-radius: 14px; }
.btn-pub { background: #fff; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
.btn-pub:hover { background: var(--yellow); }
.btn-pub:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }

/* Presenze */
.pres-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.pres-pc {
  display: inline-grid; place-items: center; width: 6rem; height: 6rem; flex: none;
  font-size: 2.1rem; font-weight: 800; font-stretch: 75%;
  background: var(--mint); color: var(--ink); border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(-4deg);
}
.pres-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .35rem; }
.pres-strip li { display: grid; place-items: center; height: 2.6rem; border-radius: 10px; font-size: .8rem; font-weight: 700; border: 2px solid var(--ink); }
.ps-si { background: var(--mint); }
.ps-no { background: #fff; color: var(--pink); border-color: var(--pink) !important; border-style: dashed !important; }
.ps-giust { background: var(--orange-soft); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .6rem; color: var(--muted); }
.lg { display: inline-block; width: .9rem; height: .9rem; border-radius: 4px; border: 2px solid var(--ink); }
.lg-si { background: var(--mint); }
.lg-no { background: #fff; border-color: var(--pink); border-style: dashed; }
.lg-giust { background: var(--orange-soft); }

/* Contributi pubblici */
.due-total { font-size: 1.15rem; padding: .7rem 1rem; background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--pink); }
.due-total b { font-size: 1.5rem; font-stretch: 80%; }
.due-ok { box-shadow: 4px 4px 0 var(--mint); }
.quote-pub li { padding: .7rem 0; }

.install-tip { margin-top: 2.5rem; padding: 1rem; background: var(--blue-soft); border-radius: 14px; display: grid; gap: .5rem; justify-items: start; }
.pub-foot { text-align: center; padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); color: var(--muted); font-size: .85rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media print {
  .topbar, .mainnav, .btn, .danger-zone, .sticky-save { display: none !important; }
  body { background: #fff; }
}

/* ---------- Classifica ---------- */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rank li { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: .2rem .7rem; padding: .5rem .75rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.rank-pos { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper); font-weight: 800; font-stretch: 80%; }
.rank-name { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.rank-pts { font-weight: 800; font-size: 1.15rem; font-stretch: 80%; font-variant-numeric: tabular-nums; }
.rank-detail { grid-column: 2; grid-row: 2; }
.rank-admin li.rank-visible { background: #FFFBE0; border-color: #F2DE7A; }
.rank-admin .rank-pts { grid-row: 1 / span 2; grid-column: 3; }
.rank-admin .rank-pos { grid-row: 1 / span 2; }
.rank-1 .rank-pos { background: var(--yellow); }
.rank-2 .rank-pos { background: #D9DDF0; }
.rank-3 .rank-pos { background: #F7C9A0; }
.pts-plus { color: #0A7A53; min-width: 2.5rem; }
.pts-minus { color: var(--danger); min-width: 2.5rem; }
.push-right { margin: 0 0 0 auto; }

.rank-pub li { border: 2px solid var(--ink); }
.rank-pub .rank-top .rank-pos { border: 2px solid var(--ink); }
.rank-pub .rank-1 { box-shadow: 4px 4px 0 var(--yellow); }
.rank-pub .rank-me { background: var(--blue-soft); }
.rank-pub .rank-name small { font-weight: 500; color: var(--ink-2); }
.me-score { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.me-score > span { padding: .5rem 1rem; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); font-weight: 600; }
.me-score b { font-size: 2rem; font-weight: 800; font-stretch: 75%; margin-right: .15rem; }
.me-pos { transform: rotate(2deg); background: var(--yellow) !important; }
.pts-chip { display: inline-block; margin-left: .3rem; padding: 0 .45rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 700; font-size: .78rem; }

.agenda-body > .tag { justify-self: start; }

/* ---------- Categorie colorate ---------- */
/* Ogni elemento colorato riceve --c (pieno), --c-on (testo sul pieno), --c-soft (sfondo chiaro) */
.tag-cat { background: var(--c, var(--line)); color: var(--c-on, var(--ink)); }
.sw { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; background: var(--c, #fff); border: 2px solid var(--ink); flex: none; }
.sw-none { background: repeating-linear-gradient(45deg, #fff 0 3px, var(--line) 3px 6px); }

.ev-cat .ev-date { background: var(--c); color: var(--c-on); }
.ev-cat { border-left: 6px solid var(--c); }
.ev-annullato.ev-cat .ev-date { background: #ECEBF5; color: var(--muted); }

.cat-legend-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .88rem; font-weight: 600; }
.cat-legend-list li { display: inline-flex; align-items: center; gap: .4rem; }
.pub .cat-legend-list { margin-top: .9rem; color: var(--ink-2); }

.cat-pick { gap: .5rem; }
.cat-legend { font-size: .92rem; font-weight: 600; margin-bottom: .3rem; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cat-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .55rem; border: 2px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; cursor: pointer; }
.cat-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cat-chip:has(input:checked) { border-color: var(--ink); background: var(--c-soft, var(--paper)); box-shadow: 2px 2px 0 var(--ink); }
.cat-chip:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }

.next-cat .next-date { background: var(--c); color: var(--c-on); }
.next-body .tag-cat { justify-self: start; border: 2px solid var(--ink); }
.agenda-cat::before { background: var(--c); }
.agenda-body > .tag-cat { justify-self: start; }

.cat-row { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; }
.cat-row .sw { width: 2.2rem; height: 2.2rem; }
.palette { display: flex; flex-wrap: wrap; gap: .35rem; }
.palette button { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; padding: 0; }
input[type="color"] { width: 3.2rem; min-height: 40px; padding: .15rem; cursor: pointer; }

/* ---------- Selezione multipla nel calendario ---------- */
.bulk-bar {
  position: sticky; top: 3.1rem; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .5rem .8rem; margin-bottom: .6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.bulk-bar .btn-danger { margin-left: auto; }
.bulk-bar .btn-danger:disabled { opacity: .35; cursor: default; }
.bulk-bar .btn-danger:disabled:hover { background: #fff; color: var(--danger); }
.ev-sel { grid-template-columns: auto 3.6rem 1fr; }
.ev-sel .ev-actions { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .ev-sel { grid-template-columns: auto 3.6rem 1fr auto; }
  .ev-sel .ev-actions { grid-column: auto; }
}
.ev-check { display: grid; place-items: center; padding: .3rem; cursor: pointer; }
.ev-check input { width: 1.3rem; height: 1.3rem; }
.ev-picked { background: #FFF4F6; outline: 2px solid var(--danger); outline-offset: -1px; }
.ric-filter { margin-left: auto; }
.ric-filter select { min-height: 38px; padding: .3rem .6rem; width: auto; max-width: 100%; }
.month-nav { flex-wrap: wrap; }
.btn.danger-text { color: var(--danger); }
.btn.danger-text:hover { background: #FFE3E6; color: var(--danger); }