/* Polaris – tema "Notte stellata" con i colori del nuovo logo (09/11/2026):
   blu reale e blu notte, azzurro ghiaccio della stella polare, carattere Rubik.
   (le variabili --gold restano col vecchio nome ma ora sono azzurro ghiaccio) */
:root {
  --navy: #0B2350;        /* Blu notte del logo */
  --navy-2: #173F8C;      /* Blu profondo */
  --ocean: #1F55B5;       /* Blu reale del logo */
  --teal: #2FB5C1;        /* Turchese */
  --gold: #8ED2F5;        /* Azzurro ghiaccio della stella */
  --gold-soft: #CFE3FA;

  --bg: #0B2350;
  --surface: rgba(23, 63, 140, .6);        /* vetro blu sopra il cielo */
  --surface-strong: rgba(11, 35, 80, .88);
  --text: #EEF3FA;
  --muted: #A9BAD3;
  --border: rgba(160, 190, 230, .18);

  --red: #FF9A90;   --red-bg: rgba(232, 100, 90, .18);     /* Corallo */
  --amber: #FFC870; --amber-bg: rgba(240, 163, 58, .18);   /* Ambra */
  --green: #6FE0B0; --green-bg: rgba(61, 190, 139, .18);   /* Verde mare */
  --grey: #A9BAD3;  --grey-bg: rgba(169, 186, 211, .14);

  --field-bg: rgba(11, 35, 80, .55);       /* campi, riquadri interni */
  --bar-bg: rgba(11, 35, 80, .55);         /* barra in alto */
  --bar-text: #fff;
  --on-accent: #0B2350;                    /* testo sopra i pulsanti */
  --accent-line: rgba(142, 210, 245, .55);
  --shadow: rgba(0, 0, 0, .18);
  --stripe: rgba(255, 255, 255, .03);
  --radius: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
html { background: var(--bg); }

body {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
}
/* Cielo stellato fisso dietro i contenuti (funziona anche su iPhone) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--navy) url("img/sfondo.webp") center bottom / cover no-repeat;
}
@media (max-width: 600px) { body::before { background-image: url("img/sfondo-small.webp"); } }
/* Mare in movimento (js/sea.js): quando parte, sostituisce l'immagine */
#sea-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
html.sea-on body::before { display: none; }

.topbar {
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
}
.brand { color: var(--bar-text); text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.brand img { border-radius: 50%; }

main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 20px 16px 32px; }

.footer { text-align: center; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); font-size: .8rem; }

.muted { color: var(--muted); }
.center { text-align: center; }

h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

/* Accesso */
.login { margin-top: 8vh; }
.login .logo { display: block; margin: 0 auto 16px; width: 88px; height: 88px; border-radius: 20px; }
.login h1 { text-align: center; }
.login p.lead { text-align: center; margin: 0 0 20px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type=email] {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
input[type=email]:focus { outline: 3px solid var(--gold); outline-offset: 1px; }

.button {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  margin-top: 14px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) { .button { background: var(--gold); color: var(--navy); } }
.button.block { display: block; width: 100%; }
.button:disabled { opacity: .6; cursor: default; }

.link-button { background: none; border: 0; color: var(--gold-soft); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 4px; }

.notice { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: .95rem; }
.notice.ok { background: var(--green-bg); color: var(--green); }
.notice.error { background: var(--red-bg); color: var(--red); }

/* Certificati */
.page-head { margin-bottom: 16px; }

.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 20px; }
.summary div { border-radius: 12px; padding: 10px 12px; }
.summary strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.summary span { font-size: .85rem; }
.summary .scaduto { background: var(--red-bg); color: var(--red); }
.summary .in_scadenza { background: var(--amber-bg); color: var(--amber); }
.summary .valido { background: var(--green-bg); color: var(--green); }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.cert {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 6px solid var(--grey);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cert.scaduto { border-left-color: var(--red); }
.cert.in_scadenza { border-left-color: var(--amber); }
.cert.valido { border-left-color: var(--green); }

.cert-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.badge { flex: none; font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.badge.scaduto { background: var(--red-bg); color: var(--red); }
.badge.in_scadenza { background: var(--amber-bg); color: var(--amber); }
.badge.valido { background: var(--green-bg); color: var(--green); }
.badge.senza_scadenza { background: var(--grey-bg); color: var(--grey); }

.when { margin: 6px 0 10px; font-weight: 600; }
.when.scaduto { color: var(--red); }
.when.in_scadenza { color: var(--amber); }

.details { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: .9rem; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }

.empty { text-align: center; padding: 28px 20px; }

/* ---------- Fase 3: area marittimo ---------- */
a { color: inherit; }
.topbar-actions { display: flex; gap: 4px; align-items: center; }
.banner { background: var(--amber-bg); color: var(--amber); padding: 10px 16px; text-align: center; font-size: .92rem; font-weight: 600; }

.page-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-title-row h1 { margin: 0; }
.back { display: inline-block; margin-bottom: 8px; color: var(--muted); text-decoration: none; font-weight: 600; }
.lead { margin: 0 0 16px; }
.section-title { font-size: 1.05rem; margin: 22px 0 10px; }
.tight { margin: 2px 0; }

.button.small { margin-top: 0; padding: 8px 14px; font-size: .92rem; }
.button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.button.danger { background: var(--red-bg); color: var(--red); }
@media (prefers-color-scheme: dark) { .button.secondary { background: transparent; color: var(--text); } .button.danger { background: var(--red-bg); color: var(--red); } }

.notice.info { background: var(--grey-bg); color: var(--text); }

/* Plancia */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-decoration: none; color: var(--text); min-height: 110px; }
.tile:hover, .tile:focus-visible { border-color: var(--gold); }
.tile-icon { font-size: 1.5rem; }
.tile-title { font-weight: 700; line-height: 1.25; }
.tile-sub { font-size: .85rem; color: var(--muted); }
.tile-sub.warn { color: var(--amber); font-weight: 600; }
.tile-sub.ok { color: var(--green); }

/* Elenchi */
.cert.neutral { border-left-color: var(--border); }
.row-link { display: block; color: inherit; text-decoration: none; }
.badge.confirmed { display: inline-block; background: var(--green-bg); color: var(--green); margin-bottom: 8px; }

.total-card { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 16px 18px; margin: 16px 0 12px; display: grid; gap: 2px; }
.total-card .label { color: var(--gold); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.total-card strong { font-size: 1.35rem; }
.total-card .muted { color: #C6D0E0; }
.by-rank { padding: 12px 16px; margin-bottom: 8px; }
.by-rank summary { font-weight: 700; cursor: pointer; }
table.simple { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .92rem; }
table.simple td { padding: 6px 0; border-top: 1px solid var(--border); }
table.simple td.num { text-align: right; white-space: nowrap; padding-left: 12px; }

.month-nav { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 14px; }
.stats div { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.stats strong { display: block; font-size: 1.3rem; }
.stats span { font-size: .8rem; color: var(--muted); }
.stats .accent { background: var(--amber-bg); border-color: transparent; color: var(--amber); }
.stats .accent span { color: var(--amber); }
#export { margin-bottom: 14px; }

/* Moduli */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }
.field label { font-size: .92rem; }
.field input, .field select, .field textarea, .reply textarea, .search-row input, .period-form input {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus, .reply textarea:focus, .search-row input:focus, .period-form input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.field input:disabled, .field select:disabled { opacity: .7; }
.field.check { display: flex; align-items: flex-start; gap: 10px; }
.field.check input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }
.field.check label { font-weight: 500; margin: 0; }
.field .req { color: var(--red); }
.hint { font-size: .82rem; color: var(--muted); margin: 4px 0 0; }
.preview { margin: 0; font-weight: 700; color: var(--green); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.form-actions .button { margin-top: 0; }
.form-actions .danger { margin-left: auto; }
.badge.attach { display: inline-block; background: var(--grey-bg); color: var(--grey); margin: 0 0 8px 6px; }
.attach-open { margin: 0 0 8px; display: inline-block; }
.field input[type=file] { padding: 8px; }

/* Area staff */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 4px 0 14px; }
.chip { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; font-size: .9rem; font-weight: 600; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (prefers-color-scheme: dark) { .chip.on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); } }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.row-actions .button { margin-top: 0; }
.search { margin: 4px 0 14px; }
.search input { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.add-role { margin-top: 12px; }
.center-block .form-grid { padding: 0; }
.field.setting { margin-bottom: 14px; }
.field.setting input { max-width: 220px; }

/* Armatori */
.mini-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mini-counts span { font-size: .8rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.mini-counts .scaduto { background: var(--red-bg); color: var(--red); }
.mini-counts .in_scadenza { background: var(--amber-bg); color: var(--amber); }
.mini-counts .valido { background: var(--green-bg); color: var(--green); }
.pay-box { margin: 10px 0; background: var(--bg); }
.pay-box p { margin: 0 0 8px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

.id-docs { margin-bottom: 14px; }
.id-docs .section-title { margin-top: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ul.plain .button { margin: 6px 0 0; display: inline-block; }
.banner.offline { background: var(--grey-bg); color: var(--text); }


/* =====================================================================
   Tema "Notte stellata": rifiniture (queste regole prevalgono sulle precedenti)
   ===================================================================== */
.topbar { background: var(--bar-bg); color: var(--bar-text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.brand span { font-weight: 600; letter-spacing: .28em; text-transform: uppercase; font-size: 1rem; }
.link-button { color: var(--gold); }

h1 { font-weight: 600; letter-spacing: .01em; }
h2 { font-weight: 600; }

.card, .cert, .tile, .stats div, .search input, .chip {
  background: var(--surface);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-color: var(--border);
}
.card, .cert { box-shadow: 0 8px 24px var(--shadow); }

/* Pulsanti: oro polare */
.button, .button.small { background: var(--gold); color: var(--on-accent); }
.button:hover { filter: brightness(1.05); }
.button.secondary { background: rgba(255, 255, 255, .06); color: var(--text); border: 1px solid var(--border); }
.button.danger { background: var(--red-bg); color: var(--red); }

/* Campi */
input[type=email], .field input, .field select, .field textarea, .reply textarea, .search-row input, .period-form input {
  background: var(--field-bg); color: var(--text); border: 1px solid var(--border);
}
.field select option { background: var(--navy); }

/* Plancia: icone in cerchio dorato */
.tile { min-height: 124px; transition: transform .15s ease, border-color .15s ease; }
.tile:hover, .tile:focus-visible { transform: translateY(-2px); border-color: rgba(142, 210, 245, .6); }
.tile-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--accent-line); color: var(--gold); background: var(--field-bg);
}
.tile-icon svg { width: 22px; height: 22px; }
.tile-title { margin-top: 6px; }

/* Riquadro del totale di navigazione */
.total-card { background: linear-gradient(135deg, rgba(30, 91, 140, .85), rgba(18, 48, 90, .9)); border: 1px solid rgba(47, 181, 193, .35); }

/* Riepiloghi colorati leggibili sul cielo */
.summary div { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.chip.on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.banner { background: rgba(240, 163, 58, .22); color: var(--amber); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.banner.offline { background: rgba(169, 186, 211, .18); color: var(--text); }
.notice.info { background: rgba(47, 181, 193, .14); color: var(--text); }
.pay-box { background: var(--field-bg); }

/* Accesso: logo e titolo come nella schermata di avvio */
.login .logo { width: 112px; height: 112px; border-radius: 50%; box-shadow: 0 0 40px rgba(142, 210, 245, .25); }
.login h1 { letter-spacing: .02em; }
.brand-title { text-align: center; font-weight: 600; letter-spacing: .4em; font-size: 2rem; margin: 0 0 2px; padding-left: .4em; }
.brand-tagline { text-align: center; color: var(--muted); margin: 0 0 22px; }

/* Schermata di avvio */
.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--navy) url("img/avvio.webp") center / cover no-repeat;
  transition: opacity .5s ease;
}
.splash.hide { opacity: 0; pointer-events: none; }

.footer { color: rgba(169, 186, 211, .7); }
.brand-logo { display: block; width: min(180px, 48vw); height: auto; margin: 0 auto 10px; filter: drop-shadow(0 12px 30px rgba(5, 18, 48, .5)); }
.brand-word { display: block; width: min(240px, 64vw); height: auto; margin: 0 auto 20px; }
.login { margin-top: 4vh; }

/* Questionari di gradimento e suggerimenti */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.survey-card { border-color: rgba(142, 210, 245, .45); background: linear-gradient(135deg, rgba(142, 210, 245, .14), var(--surface)); margin-bottom: 14px; }
.survey-card h2 { margin: 2px 0 6px; font-size: 1.1rem; }
.survey-kicker { margin: 0; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
fieldset.field { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.field legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 2.3rem; line-height: 1; cursor: pointer; color: var(--border); color: rgba(169, 186, 211, .35); padding: 2px; border-radius: 8px; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: var(--gold); }
.stars input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font-weight: 400; }
.choice input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.choice:has(input:checked) { border-color: var(--gold); }
.choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
fieldset .choice { margin-bottom: 8px; }
.link-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; margin-top: 14px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; margin: 8px 0; font-size: .92rem; }
.bar-label { overflow-wrap: anywhere; }
.bar { display: block; height: 10px; border-radius: 999px; background: var(--grey-bg); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.bar-n { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.field.check { flex-wrap: wrap; }
.field.check .hint { flex-basis: 100%; margin: 2px 0 0 32px; }
.card + .card { margin-top: 12px; }

/* Analisi (staff) */
.complete-card { border-color: rgba(142, 210, 245, .45); margin-bottom: 14px; }
.period-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 10px 0 4px; }
.period-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.period-form input { min-height: 40px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.kpis.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 4px 0 10px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi strong { font-size: 1.35rem; line-height: 1.15; overflow-wrap: anywhere; }
.kpi span { color: var(--muted); font-size: .85rem; }
.kpi .delta { font-size: .8rem; font-weight: 600; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.an-group { margin: 26px 0 10px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.an-card .section-title { margin-top: 0; }
.an-sub { font-size: .95rem; margin: 14px 0 4px; }
.cols { display: flex; align-items: stretch; gap: 3px; height: 170px; padding-top: 6px; }
.col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.col-stack { flex: 1; display: flex; flex-direction: column-reverse; border-bottom: 1px solid var(--border); }
.col-stack span { display: block; width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.col-x { font-size: .68rem; color: var(--muted); text-align: center; height: 16px; white-space: nowrap; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; font-size: .85rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th { text-align: left; font-weight: 600; color: var(--muted); font-size: .8rem; padding: 6px 4px; border-bottom: 1px solid var(--border); }
table.data td { padding: 8px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data .num { text-align: right; white-space: nowrap; }
table.data .short { color: var(--red); font-weight: 700; }
.italy-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 64px)); grid-auto-rows: 52px; gap: 4px; margin: 6px 0 10px; }
.tile-region { border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; }
.tile-region b { font-size: .78rem; }
.tile-region.zero { color: var(--muted); background: var(--grey-bg); }

/* Messaggi */
.msg-link { position: relative; display: inline-flex; align-items: center; padding: 4px 6px; }
.msg-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--on-accent); font-size: .7rem; font-weight: 800; line-height: 18px; text-align: center; }
.inbox .excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox h2 { overflow-wrap: anywhere; }
.search-row { display: flex; gap: 8px; margin: 12px 0; }
.search-row input { flex: 1; min-width: 0; }
.as-button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.thread { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 85%; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--surface-strong); border: 1px solid var(--border); align-self: flex-start; }
.bubble.mine { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: rgba(142, 210, 245, .24); border-color: rgba(142, 210, 245, .4); }
.bubble.side-staff:not(.mine) { border-color: rgba(47, 181, 193, .5); }
.bubble .who { display: block; font-size: .78rem; font-weight: 700; color: var(--gold); margin-bottom: 2px; }
.bubble p { margin: 0; overflow-wrap: anywhere; }
.bubble time { display: block; font-size: .7rem; color: var(--muted); margin-top: 4px; text-align: right; }
.reply { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.reply textarea { flex: 1; min-width: 0; resize: vertical; }
.thread-actions { margin-top: 12px; }

/* Certificati: esporta e curriculum stampabile */
.export-actions { margin: 4px 0 12px; }
.filter-note { margin: 0 0 12px; color: var(--muted); }
.cv-sheet { background: #fff; color: #10233f; border-radius: 12px; padding: 22px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); overflow-x: auto; }
.cv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-bottom: 2px solid #c99a2e; padding-bottom: 10px; margin-bottom: 14px; }
.cv-head h1 { font-size: 1.2rem; margin: 0 0 4px; color: #0a1a33; }
.cv-head p { margin: 2px 0; font-size: .9rem; }
.cv-name { font-size: 1.1rem; font-weight: 700; }
.cv-date { color: #4a5b75; font-size: .85rem; margin: 0; }
@media (min-width: 600px) { .cv-date { text-align: right; } }
.cv-sheet h2 { font-size: 1rem; margin: 16px 0 6px; color: #0a1a33; }
.cv-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cv-table th, .cv-table td { border-bottom: 1px solid #d9e0ea; padding: 5px 6px; text-align: left; vertical-align: top; }
.cv-table th { background: #eef2f7; font-weight: 600; }
.cv-foot { margin-top: 16px; font-size: .75rem; color: #4a5b75; }
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff !important; }
  body::before, body::after, #sea-bg { display: none !important; }
  .topbar, .footer, .banner, .no-print, #splash, #survey-card { display: none !important; }
  .cv-sheet { box-shadow: none; padding: 0; border-radius: 0; overflow: visible; }
  .cv-table { font-size: 9pt; }
  .cv-table tr { break-inside: avoid; }
}

/* Tabelle a righe (staff) */
section.wide { max-width: none; }
.grid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.grid-tools input { flex: 1 1 220px; min-width: 0; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text); font: inherit; }
.grid-tools input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.grid-count { font-size: .85rem; }
.grid-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong); }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .86rem; }
table.grid th { position: sticky; top: 0; z-index: 1; background: var(--navy-2); text-align: left; padding: 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.grid th button { all: unset; display: block; padding: 8px 10px; cursor: pointer; font-weight: 600; color: var(--gold-soft); }
table.grid th button:focus-visible { outline: 2px solid var(--gold); }
table.grid td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
table.grid tr:nth-child(even) td { background: var(--stripe); }
table.grid tr:hover td { background: rgba(142, 210, 245, .08); }
table.grid .num { text-align: right; }
table.grid td:first-child, table.grid th:first-child { position: sticky; left: 0; background: #0E2446; }
table.grid th:first-child { z-index: 2; background: var(--navy-2); }
table.grid td:first-child a { color: var(--gold); font-weight: 600; }
main:has(section.wide) { max-width: 1280px; }

/* Forum */
.excerpt2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.forum-post .post-title { font-size: 1.3rem; margin: 6px 0 4px; text-wrap: balance; overflow-wrap: anywhere; }
.post-body, .comment-body { overflow-wrap: anywhere; }
.post-body p, .comment-body p { margin: 0 0 10px; }
.comments { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.comment { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; }
.comment.off { opacity: .6; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.small-link { font-size: .85rem; padding: 2px 0; }
.edit-box { width: 100%; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text); }

.join-card { border-color: rgba(142, 210, 245, .45); margin-bottom: 12px; display: grid; gap: 8px; }

/* Meteo sul ponte */
.meteo { margin-bottom: 14px; }
.meteo h2 { font-size: 1rem; margin: 0; }
.meteo-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.meteo-pos { font-size: .78rem; font-variant-numeric: tabular-nums; }
.meteo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.meteo-col { border-left: 1px solid var(--border); padding-left: 8px; min-width: 0; }
.meteo-col:first-child { border-left: 0; padding-left: 0; }
.meteo-when { margin: 0 0 4px; display: flex; flex-direction: column; font-size: .82rem; line-height: 1.2; }
.meteo-sky { display: flex; align-items: center; gap: 6px; color: var(--gold); }
.meteo-temp { font-size: 1.35rem; font-weight: 700; color: var(--text); }
.meteo-line { margin: 2px 0 0; font-size: .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; overflow-wrap: anywhere; }
.wind-arrow { color: var(--teal); flex: none; }
.meteo-foot { margin: 8px 0 0; }
.meteo-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.meteo-ask > div { flex: 1 1 200px; min-width: 0; }
.meteo-ask .hint { margin: 2px 0 0; }

/* Sezione in cui ci si trova, sotto "Polaris" nella barra in alto */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand .where { font-size: .8rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }

/* Elenco A–Z per i messaggi dell'admin */
.az-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 5; padding: 6px; border-radius: 12px; background: var(--surface-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.az-letter { min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 600; text-decoration: none; color: var(--gold); border: 1px solid var(--border); }
.az-letter.off { color: var(--muted, #6b7a90); opacity: .4; border-color: transparent; }
.az-group { scroll-margin-top: calc(130px + env(safe-area-inset-top)); }
.az-head { margin: 16px 0 6px; }

/* =====================================================================
   Tema GIORNO (chiaro): si attiva con html[data-theme="day"] (vedi js/theme.js)
   ===================================================================== */
html[data-theme="day"] {
  --bg: #EAF3FC;
  --surface: rgba(255, 255, 255, .78);
  --surface-strong: rgba(255, 255, 255, .94);
  --text: #0B2350;
  --muted: #4A6385;
  --border: rgba(11, 35, 80, .14);
  --gold: #1F55B5;            /* accento: blu reale del logo */
  --gold-soft: #173F8C;
  --field-bg: rgba(255, 255, 255, .92);
  --bar-bg: rgba(255, 255, 255, .72);
  --bar-text: #0B2350;
  --on-accent: #FFFFFF;
  --accent-line: rgba(31, 85, 181, .45);
  --shadow: rgba(11, 35, 80, .10);
  --stripe: rgba(11, 35, 80, .03);
  --red: #B3261E;   --red-bg: rgba(179, 38, 30, .10);
  --amber: #8A5300; --amber-bg: rgba(240, 163, 58, .18);
  --green: #11704A; --green-bg: rgba(61, 190, 139, .16);
  --grey: #4A6385;  --grey-bg: rgba(74, 99, 133, .10);
  color-scheme: light;
}
html[data-theme="day"] body::before { background: #EAF3FC; }
html[data-theme="day"] .button.secondary { background: rgba(255, 255, 255, .7); }
html[data-theme="day"] .total-card { background: linear-gradient(135deg, #1F55B5, #173F8C); color: #fff; border-color: transparent; }
html[data-theme="day"] .total-card .label { color: #CFE3FA; }
html[data-theme="day"] .banner { background: rgba(240, 163, 58, .25); }
html[data-theme="day"] .notice.info { background: rgba(31, 85, 181, .08); }
html[data-theme="day"] .footer { color: rgba(255, 255, 255, .85); }
html[data-theme="day"] .brand img { box-shadow: 0 0 0 1px rgba(11, 35, 80, .1); }

/* Selettore del tema nella barra in alto */
.theme-switch { display: inline-flex; gap: 2px; padding: 2px; margin-right: 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--field-bg); }
.theme-switch button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.theme-switch button:hover { color: var(--gold); }
.theme-switch button.on { background: var(--gold); color: var(--on-accent); }
.theme-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (max-width: 420px) { .theme-switch button { width: 26px; height: 26px; } .theme-switch svg { width: 16px; height: 16px; } .brand .where { max-width: 30vw; } }
.msg-link[hidden] { display: none !important; }
html[data-theme="day"] .brand-word { filter: brightness(.22) saturate(1.6); }
html[data-theme="day"] .login .lead { background: var(--surface); padding: 8px 12px; border-radius: 12px; color: var(--text); }
@media (max-width: 420px) {
  .topbar { padding-left: 10px; padding-right: 8px; }
  .brand { gap: 6px; }
  .brand img { width: 28px; height: 28px; }
  .brand span { letter-spacing: .16em; font-size: .92rem; }
  .topbar-actions { gap: 0; }
  .topbar-actions .link-button { padding: 6px 3px; font-size: .9rem; }
}

/* =====================================================================
   Navigazione come su AppSheet: principali in basso, secondarie a sinistra
   ===================================================================== */
.menu-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 6px; border: 0; border-radius: 10px; background: transparent; color: var(--bar-text); cursor: pointer; padding: 0; flex: none; }
.menu-btn[hidden] { display: none; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--field-bg); }
.topbar { justify-content: flex-start; }
.topbar .topbar-actions { margin-left: auto; }

/* barra in basso */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--bar-bg); border-top: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bottomnav[hidden] { display: none; }
.bnav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 500; min-height: 48px; justify-content: center; }
.bnav-item .nav-ico { position: relative; display: grid; place-items: center; width: 44px; height: 26px; border-radius: 13px; }
.bnav-item svg { width: 22px; height: 22px; }
.bnav-item.on { color: var(--gold); }
.bnav-item.on .nav-ico { background: rgba(142, 210, 245, .16); }
html[data-theme="day"] .bnav-item.on .nav-ico { background: rgba(31, 85, 181, .12); }
.nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { position: absolute; top: -4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: var(--on-accent); font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center; }
.nav-badge[hidden] { display: none; }
html.nav-on body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

/* colonna a sinistra */
.sidenav { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(290px, 84vw); overflow-y: auto; padding: calc(10px + env(safe-area-inset-top)) 10px 90px;
  background: var(--surface-strong); border-right: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateX(-105%); transition: transform .22s ease; }
.sidenav[hidden] { display: none; }
html.menu-open .sidenav { transform: none; }
.nav-backdrop { display: none; }
html.menu-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(5, 18, 48, .45); }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; }
.side-group { margin-top: 6px; }
.side-title { margin: 12px 8px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--text); font-size: .95rem; }
.side-item .nav-ico { display: grid; place-items: center; color: var(--gold); }
.side-item svg { width: 20px; height: 20px; }
.side-item:hover { background: var(--field-bg); }
.side-item.on { background: rgba(142, 210, 245, .16); color: var(--gold); font-weight: 600; }
html[data-theme="day"] .side-item.on { background: rgba(31, 85, 181, .1); }
@media (prefers-reduced-motion: reduce) { .sidenav { transition: none; } }

/* schermi larghi: colonna sempre aperta, come su AppSheet */
@media (min-width: 960px) {
  html.nav-on .menu-btn { display: none; }
  html.nav-on .sidenav { transform: none; top: 63px; width: 250px; padding-top: 8px; }
  html.nav-on .side-head { display: none; }
  html.nav-on.menu-open .nav-backdrop { display: none; }
  html.nav-on main, html.nav-on .footer, html.nav-on .banner { margin-left: max(266px, calc((100% - 640px) / 2)); }
  html.nav-on main:has(section.wide) { margin-left: 266px; max-width: calc(100% - 282px); }
}

/* Cruscotto della situazione sulla Plancia */
.dash { display: flex; flex-direction: column; gap: 12px; border-left: 5px solid var(--green); }
.dash.dash-amber { border-left-color: var(--amber); }
.dash.dash-red { border-left-color: var(--red); }
.dash-head { display: flex; gap: 12px; align-items: flex-start; }
.dash-head h2 { margin: 0 0 2px; font-size: 1.2rem; }
.dash-light { flex: none; width: 16px; height: 16px; margin-top: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }
.dash-amber .dash-light { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.dash-red .dash-light { background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.dash-fams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .dash-fams { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dash-fam { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; background: var(--field-bg); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.dash-fam-ico { color: var(--gold); display: flex; }
.dash-fam-ico svg { width: 20px; height: 20px; }
.dash-fam-name { font-weight: 600; font-size: .92rem; }
.dash-fam-counts { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .8rem; }
.dash-n { font-weight: 600; }
.dash-n.red { color: var(--red); } .dash-n.amber { color: var(--amber); } .dash-n.green { color: var(--green); }
.dash-sub { margin: 4px 0 0; font-size: 1rem; }
.dash-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-todo li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--amber-bg); }
.dash-todo li.red { background: var(--red-bg); }
.dash-todo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-todo-text .muted { font-size: .82rem; }
.dash-todo .button { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.dash-todo .button svg, .dash a svg { width: 16px; height: 16px; vertical-align: -3px; }
@media (max-width: 420px) { .dash-todo li { flex-direction: column; align-items: stretch; } .dash-todo .button { justify-content: center; } }
.tiles-title { margin: 18px 0 10px; }
@media (min-width: 960px) { html.nav-on .bottomnav { left: 250px; } }

/* Annulla / Segnala un errore / Storico */
.void-box summary, .hist-box summary { cursor: pointer; font-weight: 600; }
.void-box[open] summary, .hist-box[open] summary { margin-bottom: 10px; }
.void-box fieldset { border: 0; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.void-box legend { font-weight: 600; margin-bottom: 4px; }
.void-box label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .9rem; }
.hist-changes { margin: 4px 0 0; padding-left: 18px; }
/* menu chiuso sul telefono: invisibile anche alla tastiera e al lettore di schermo */
.sidenav { visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
html.menu-open .sidenav { visibility: visible; transition: transform .22s ease; }
@media (min-width: 960px) { html.nav-on .sidenav { visibility: visible; } }

/* =====================================================================
   Stile "AppSheet": elenchi a righe compatte, gruppi numerati, superfici piene e ben leggibili
   ===================================================================== */
#sea-bg { opacity: .6; }                              /* il mare resta, ma più discreto dietro i contenuti */
html[data-theme="day"] #sea-bg { opacity: .5; }
:root { --surface: rgba(14, 38, 84, .94); --surface-strong: rgba(11, 35, 80, .98); }
html[data-theme="day"] { --surface: rgba(255, 255, 255, .96); --surface-strong: #fff; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pgroup { margin-top: 18px; }
.pgroup-title { margin: 0 0 6px; padding: 6px 4px; font-size: 1rem; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); }
.tiles.plist { display: flex; flex-direction: column; gap: 0; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.tile.prow { flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 12px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.tile.prow + .tile.prow { border-top: 1px solid var(--border); }
.tile.prow:hover { transform: none; background: var(--field-bg); }
.prow .tile-icon { width: 36px; height: 36px; flex: none; }
.prow .tile-icon svg { width: 20px; height: 20px; }
.prow-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.prow .tile-title { font-size: 1rem; }
.prow .tile-sub { font-size: .85rem; }
.prow-go { color: var(--muted); font-size: 1.4rem; line-height: 1; }
.cert { padding: 12px 14px; }
.pcustom-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.pcustom-row label.check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pcustom-row .tile-icon { width: 30px; height: 30px; }
.pcustom-row input { width: 22px; height: 22px; }
.pcustom-move { display: flex; gap: 6px; }
.pcustom-move .button { min-width: 40px; }

/* Corsi: ricerca per provincia o regione */
.place-filter { padding: 12px 14px; }
.place-filter .field { margin: 0; }
.place-filter .hint { margin-top: 6px; }

/* ---------------------------------------------------------------
   Pulsanti con rilievo e transizioni
   - i pulsanti hanno luce in alto, ombra sotto e "affondano" quando si premono,
     con un alone azzurro e un'onda che parte dal punto toccato;
   - le pagine entrano con una breve dissolvenza.
   --------------------------------------------------------------- */
:root { --btn-shadow: 0 6px 16px rgba(2, 10, 30, .45), 0 2px 4px rgba(2, 10, 30, .35); --btn-shadow-press: 0 1px 3px rgba(2, 10, 30, .45); --btn-glow: rgba(142, 210, 245, .55); }
html[data-theme="day"] { --btn-shadow: 0 6px 14px rgba(11, 35, 80, .22), 0 2px 4px rgba(11, 35, 80, .18); --btn-shadow-press: 0 1px 2px rgba(11, 35, 80, .25); --btn-glow: rgba(31, 85, 181, .35); }

.button, .bnav-item, .side-item, .tile, .link-button { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.button {
  border-radius: 12px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .14), var(--btn-shadow);
  letter-spacing: .01em;
  transition: transform .14s cubic-bezier(.3, .7, .4, 1), box-shadow .14s ease, filter .14s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.button:active:not(:disabled), .button.pressed {
  transform: translateY(2px) scale(.97);
  filter: brightness(1.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22), var(--btn-shadow-press), 0 0 0 4px var(--btn-glow);
}
.button.secondary {
  background-color: rgba(255, 255, 255, .08);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(2, 10, 30, .3);
  backdrop-filter: blur(6px);
}
html[data-theme="day"] .button.secondary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 8px rgba(11, 35, 80, .14); }
.button.danger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px rgba(120, 10, 10, .3); }
.button:disabled { box-shadow: none; filter: grayscale(.4); }

/* filtri, righe-collegamento, lettere dell'elenco e intestazioni delle tabelle (area staff compresa) */
.chip, .az-letter, .link-card, .cert:has(> .row-link), .card:has(> .row-link), table.grid th button, .theme-switch button { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.chip, .az-letter, .link-card, .cert:has(> .row-link), table.grid th button { transition: transform .14s ease, box-shadow .15s ease, background-color .15s ease, filter .14s ease; }
.chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 8px rgba(2, 10, 30, .28); }
html[data-theme="day"] .chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(11, 35, 80, .14); }
.chip:active, .az-letter:active { transform: scale(.94); box-shadow: 0 0 0 3px var(--btn-glow); filter: brightness(1.12); }
.cert:has(> .row-link):hover, .link-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2, 10, 30, .35); }
.cert:has(> .row-link):active, .link-card:active { transform: scale(.985); box-shadow: 0 0 0 3px var(--btn-glow); }
table.grid th button:active { background: rgba(127, 178, 255, .2); }
.theme-switch button:active { transform: scale(.9); }

/* righe della plancia e riquadri */
.pgroup .plist { box-shadow: 0 8px 22px rgba(2, 10, 30, .35); }
html[data-theme="day"] .pgroup .plist { box-shadow: 0 6px 16px rgba(11, 35, 80, .12); }
.tile { transition: transform .14s ease, background-color .15s ease, box-shadow .15s ease; }
.tile:not(.prow):active { transform: scale(.98); box-shadow: 0 0 0 3px var(--btn-glow); }
.tile.prow:active, .tile.prow.pressed { background: rgba(127, 178, 255, .18); box-shadow: inset 4px 0 0 var(--gold); }
.tile.prow .prow-go { transition: transform .15s ease; }
.tile.prow:hover .prow-go, .tile.prow:active .prow-go { transform: translateX(4px); }

/* barra in basso e menu laterale */
.bnav-item, .side-item { transition: transform .14s ease, background-color .15s ease, color .15s ease; }
.bnav-item:active, .side-item:active { transform: scale(.93); background: rgba(127, 178, 255, .16); }
.bnav-item.on .nav-ico { animation: nav-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nav-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* onda che parte dal punto toccato */
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .55s ease-out forwards; }
html[data-theme="day"] .ripple { background: rgba(31, 85, 181, .22); }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* cambio pagina: dissolvenza con un piccolo movimento verticale (niente scorrimenti laterali) */
#app.page-in { animation: page-in .3s cubic-bezier(.2, .7, .2, 1) both; }
#app.page-in[data-dir="fwd"] { --page-dy: 14px; --page-scale: .985; }
#app.page-in[data-dir="back"] { --page-dy: -10px; --page-scale: 1; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(var(--page-dy, 8px)) scale(var(--page-scale, 1)); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #app.page-in, .bnav-item.on .nav-ico, .ripple { animation: none; }
  .ripple { display: none; }
  .button:hover:not(:disabled), .button:active:not(:disabled), .bnav-item:active, .side-item:active, .tile:active, .chip:active, .az-letter:active, .link-card:hover, .link-card:active, .cert:has(> .row-link):hover, .cert:has(> .row-link):active, .theme-switch button:active { transform: none; }
}
.sort-note { display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; font-size: .92rem; color: var(--gold-soft); }
.sort-note svg { width: 18px; height: 18px; flex: none; }
.km { color: var(--gold); font-weight: 700; }

/* avviso "nuova versione" */
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--surface-strong); color: var(--text); border: 1px solid var(--accent-line); box-shadow: 0 10px 28px rgba(2, 10, 30, .45); animation: page-in .3s ease both; }
.update-bar .button { margin: 0; flex: none; }
@media (min-width: 900px) { .update-bar { left: auto; right: 24px; bottom: 24px; max-width: 420px; } }

/* pulsanti in fondo a un elenco (es. "Personalizza la plancia"): più staccati dall'ultima riga */
.list + .form-actions, .pcustom + .form-actions { margin-top: 28px; }

/* Scheda del corso in forma schematica: etichetta a sinistra, valore a destra */
.facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 8px 0 10px; border-top: 1px solid var(--border); }
.fact { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); }
.fact dt { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; font-weight: 500; }
.fact dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fact-ico { display: inline-flex; width: 18px; height: 18px; flex: none; color: var(--gold); }
.fact-ico svg { width: 18px; height: 18px; }
.fact-km dd { color: var(--gold); }
@media (min-width: 720px) { .facts.wide2 { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.course-desc { margin: 6px 0 10px; }
.course-desc summary { cursor: pointer; font-weight: 600; color: var(--gold); padding: 4px 0; }
.course-desc p, .course-desc h3 + p { white-space: pre-line; margin: 6px 0 0; line-height: 1.5; }
.course-desc h3 { font-size: 1rem; margin: 12px 0 0; }
.course-head .badge { float: right; margin: 0 0 6px 8px; }
.course-head .facts { clear: both; }

/* Corsi: incrocio certificati da rinnovare × corso più vicino */
.suggest .suggest-label { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-weight: 700; color: var(--gold); }
.suggest .suggest-label svg { width: 18px; height: 18px; }
.suggest-course { background: rgba(127, 178, 255, .08); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.suggest-course h3 { margin: 0 0 4px; font-size: 1.02rem; }
.suggest-none { border-left: 4px solid #4cc38a; }

/* Plancia dell'armatore: idoneità dell'equipaggio */
.crew-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.crew-c { border-radius: 14px; padding: 10px 6px; text-align: center; font-weight: 700; box-shadow: 0 6px 16px rgba(2, 10, 30, .25); }
.crew-c b { display: block; font-size: 1.6rem; line-height: 1.1; }
.crew-c.ok { background: var(--green-bg, rgba(52, 199, 120, .18)); color: var(--green, #2e9e62); }
.crew-c.warn { background: var(--amber-bg, rgba(255, 180, 60, .18)); color: var(--amber, #b97400); }
.crew-c.ko { background: var(--red-bg, rgba(255, 90, 90, .18)); color: var(--red, #c0392b); }
.crew-todo { border-left: 4px solid var(--red, #e06666); }
.crew-todo h2 { font-size: 1.05rem; margin: 0 0 6px; }
.crew-todo ul { margin: 0; padding-left: 18px; }
.crew-todo li { margin: 8px 0; }
.when-inline { font-weight: 700; }
.when-inline.scaduto { color: var(--red); } .when-inline.in_scadenza { color: var(--amber); }
.fit-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 2px; }
.fit-area { border-radius: 10px; padding: 6px 4px; text-align: center; font-size: .82rem; font-weight: 600; }
.fit-area.ok { background: var(--green-bg, rgba(52, 199, 120, .16)); color: var(--green, #2e9e62); }
.fit-area.warn, .fit-area.none { background: var(--amber-bg, rgba(255, 180, 60, .16)); color: var(--amber, #b97400); }
.fit-area.ko { background: var(--red-bg, rgba(255, 90, 90, .16)); color: var(--red, #c0392b); }
.fit-area.hidden { background: rgba(127, 140, 160, .14); color: var(--muted); }
.small-note { font-size: .82rem; }
.share-health { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-weight: 600; }
.share-health input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
#add-form[hidden] { display: none; }

/* Campanella degli avvisi (al posto del selettore del tema) */
.bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gold); text-decoration: none;
  border: 1px solid var(--border); background: var(--field-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px rgba(2,10,30,.25); margin-right: 4px; overflow: visible; }
.bell[hidden] { display: none; }
.bell:active { transform: scale(.92); box-shadow: 0 0 0 3px var(--btn-glow); }
.bell-badge { position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--surface-strong); }
.bell-badge[hidden] { display: none; }
.bell:has(.bell-badge:not([hidden])) svg { animation: bell-ring 1.6s ease-in-out 1; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .bell svg { animation: none !important; } }
.notif-open { color: var(--gold); font-weight: 700; }

/* Impostazioni */
.set-group { border: 1px solid var(--border); margin: 0 0 14px; }
.set-group legend { font-weight: 700; padding: 0 6px; }
.set-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.set-options.two { grid-template-columns: repeat(2, 1fr); }
.set-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--field-bg);
  color: var(--text); font: inherit; cursor: pointer; text-align: center; box-shadow: 0 4px 10px rgba(2,10,30,.22); transition: transform .14s ease, box-shadow .14s ease; position: relative; overflow: hidden; }
.set-opt small { color: var(--muted); font-size: .76rem; }
.set-opt.on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--btn-glow); color: var(--gold); }
.set-opt:active { transform: scale(.96); }