/* Welfides — foglio di stile unico per sito pubblico, area riservata e pannello admin.
   Token dal design system Welfides. Caratteri ospitati in locale (nessun servizio di terze parti). */
@font-face { font-family: Fraunces; src: url(/assets/fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Figtree; src: url(/assets/fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --logo-green: #00957d; --logo-green-head: #009e85;
  --brand: #007a66; --brand-strong: #00604f; --on-brand: #ffffff; --brand-tint: #e6f4f0; --on-brand-tint: #006b59;
  --surface: #fbfaf7; --surface-raised: #ffffff; --surface-sunken: #f3f1ec;
  --ink: #1d2a26; --ink-muted: #56635f; --line: #e2dfd8; --line-strong: #7e8782;
  --focus: var(--brand-strong); --success: var(--brand-strong);
  --warning: #8a5300; --warning-tint: #fbf0dc; --danger: #a8211a; --danger-tint: #fbe6e4;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-sans: Figtree, "Segoe UI", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(29,42,38,.06), 0 8px 24px rgba(29,42,38,.06);
  --shadow-overlay: 0 16px 48px rgba(29,42,38,.18);
  --gutter: var(--space-4); --section: var(--space-12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3cc6a6; --brand-strong: #5ed6b8; --on-brand: #04231c; --brand-tint: #123a31; --on-brand-tint: #7fe0c8;
    --surface: #0f1916; --surface-raised: #17241f; --surface-sunken: #0b1311;
    --ink: #edf2f0; --ink-muted: #a4b3ae; --line: #26352f; --line-strong: #687872;
    --warning: #e8b35c; --warning-tint: #33270f; --danger: #f2847c; --danger-tint: #3a1714;
    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); --shadow-overlay: 0 16px 48px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
@media (min-width: 768px) { :root { --gutter: var(--space-16); --section: var(--space-24); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
body { margin: 0; font: 400 16px/24px var(--font-sans); color: var(--ink); background: var(--surface); padding-top: env(safe-area-inset-top, 0px); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 var(--space-4); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.svg-defs { position: absolute; }
.skip { position: absolute; left: var(--space-4); top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.skip:focus { top: var(--space-4); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Tipografia */
.display-xl { font: 500 44px/50px var(--font-display); letter-spacing: -0.015em; }
.display-lg { font: 500 36px/42px var(--font-display); letter-spacing: -0.015em; }
@media (min-width: 768px) { .display-xl { font-size: 64px; line-height: 68px; letter-spacing: -0.02em; } .display-lg { font-size: 44px; line-height: 50px; } }
.heading-1 { font: 500 28px/36px var(--font-display); letter-spacing: -0.01em; }
@media (min-width: 768px) { .heading-1 { font-size: 32px; line-height: 40px; } }
.heading-2 { font: 500 24px/32px var(--font-display); }
.heading-3 { font: 600 18px/26px var(--font-sans); }
.body-lg { font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.small { font-size: 14px; line-height: 20px; }
.muted { color: var(--ink-muted); }

/* ---------- Componenti del design system ---------- */
.wf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 1.5px solid transparent; font: 600 16px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color 150ms, border-color 150ms, color 150ms; white-space: nowrap; }
.wf-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wf-btn:disabled { opacity: .5; cursor: not-allowed; }
.wf-btn-lg { min-height: 52px; padding: 14px var(--space-8); font-size: 18px; }
.wf-btn-sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: 15px; }
.wf-btn-block { display: flex; width: 100%; }
.wf-btn-primary { background: var(--brand); color: var(--on-brand); }
.wf-btn-primary:hover:not(:disabled) { background: var(--brand-strong); color: var(--on-brand); }
.wf-btn-secondary { background: var(--surface-raised); color: var(--brand); border-color: var(--brand); }
.wf-btn-secondary:hover:not(:disabled) { background: var(--brand-tint); color: var(--on-brand-tint); }
.wf-btn-ghost { background: transparent; color: var(--brand); }
.wf-btn-ghost:hover:not(:disabled) { background: var(--brand-tint); color: var(--on-brand-tint); }
.wf-btn-danger { background: var(--surface-raised); color: var(--danger); border-color: var(--danger); }
.wf-btn-danger:hover:not(:disabled) { background: var(--danger-tint); color: var(--danger); }

.wf-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px; border-radius: var(--radius-pill); font: 600 13px/20px var(--font-sans); white-space: nowrap; }
.wf-badge-neutral { background: var(--surface-sunken); color: var(--ink-muted); }
.wf-badge-brand { background: var(--brand-tint); color: var(--on-brand-tint); }
.wf-badge-warning { background: var(--warning-tint); color: var(--warning); }
.wf-badge-danger { background: var(--danger-tint); color: var(--danger); }

.wf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wf-label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.wf-optional { font-weight: 400; color: var(--ink-muted); }
.wf-input { min-height: 44px; padding: 10px var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-sans); width: 100%; }
select.wf-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237e8782' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
textarea.wf-input { min-height: 112px; resize: vertical; }
.wf-input::placeholder { color: var(--ink-muted); }
.wf-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--brand); }
.wf-field-error .wf-input { border-color: var(--danger); }
.wf-hint { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.wf-hint-error { color: var(--danger); }

.wf-service { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: box-shadow 150ms; }
.wf-service:hover { box-shadow: var(--shadow-card); }
.wf-eyebrow { margin: 0 0 var(--space-3); font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.wf-service .wf-eyebrow { margin: 0; }
.wf-service-title { margin: 0; font: 500 24px/32px var(--font-display); color: var(--ink); }
.wf-service-text { margin: 0; color: var(--ink-muted); }
.wf-service-points { margin: 0; padding-left: 20px; font: 400 15px/22px var(--font-sans); }
.wf-service-points li { margin-bottom: 4px; }
.wf-service-points li::marker { color: var(--logo-green); }
.wf-service-link { margin-top: auto; padding-top: var(--space-2); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.wf-service-link:hover { text-decoration: underline; }

.wf-slots { display: flex; flex-direction: column; gap: var(--space-4); }
.wf-slots-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wf-slot { min-width: 72px; min-height: 44px; padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 600 15px/20px var(--font-sans); cursor: pointer; }
.wf-slot:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.wf-slot.is-selected { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.wf-slot:disabled { background: var(--surface-sunken); border-color: var(--line); color: var(--ink-muted); text-decoration: line-through; cursor: not-allowed; }

.wf-rating { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.wf-rating-btn { display: inline-flex; padding: 8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.wf-star path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linejoin: round; }
.wf-star.is-on path { fill: var(--logo-green); stroke: var(--logo-green); }
.wf-rating.is-readonly .wf-star { width: 20px; height: 20px; }
.wf-rating-value { margin-left: var(--space-2); font-weight: 600; }
.wf-rating-count { margin-left: var(--space-1); font-size: 14px; color: var(--ink-muted); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); }
.band { padding: var(--section) 0; }
.band-tint { background: var(--brand-tint); }
.band-tint .wf-eyebrow { color: var(--on-brand-tint); }
.band-tint .body-lg { color: var(--ink); }
.band-sunken { background: var(--surface-sunken); }
.panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; line-height: 22px; min-height: 44px; padding-top: 10px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }
.form-msg { margin: 0; font-size: 15px; }
.form-msg:empty { display: none; }
.form-msg.is-ok, .notice-ok { background: var(--brand-tint); color: var(--on-brand-tint); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.form-msg.is-err, .notice-err { background: var(--danger-tint); color: var(--danger); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.notice-warn { background: var(--warning-tint); color: var(--warning); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
form legend { padding: 0; margin-bottom: var(--space-4); }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; text-decoration: underline; min-height: 32px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 72px; }
.brand { flex: none; display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); min-height: 44px; }
.brand img { width: 36px; height: auto; }
.brand span { font: 500 24px/1 var(--font-display); color: var(--ink); }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-links { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav-links a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); color: var(--ink); text-decoration: none; font-weight: 500; border-radius: var(--radius-md); }
.nav-links a:hover { color: var(--brand); background: var(--brand-tint); }
.nav-actions { display: flex; gap: var(--space-2); }
.menu-toggle { display: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink); border-radius: var(--radius-md); cursor: pointer; }
.menu-toggle .when-open { display: none; }
.menu-toggle[aria-expanded="true"] .when-open { display: inline-flex; }
.menu-toggle[aria-expanded="true"] .when-closed { display: none; }
@media (max-width: 1239px) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4) calc(var(--gutter) + env(safe-area-inset-right, 0px)) var(--space-6) calc(var(--gutter) + env(safe-area-inset-left, 0px)); background: var(--surface-raised); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-overlay); max-height: calc(100vh - 72px); overflow-y: auto; }
  .nav.is-open { display: flex; }
  .nav-links { flex-direction: column; }
  .nav-links a { width: 100%; font-size: 18px; }
  .nav-actions { flex-direction: column; }
  .nav-actions .wf-btn { width: 100%; }
}

/* Hero con cornice a scudo (dal logo) */
.hero { padding: var(--space-12) 0 var(--section); }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
.hero-copy .body-lg { max-width: 34em; margin-top: var(--space-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-visual { display: flex; justify-content: center; }
.shield { width: min(100%, 440px); aspect-ratio: 628 / 600; position: relative; display: grid; place-items: center; }
.shield::before { content: ""; position: absolute; inset: 0; background: var(--brand-tint); clip-path: url(#shield-clip); }
.shield-mark { position: relative; width: 46%; }
.shield.has-img::before { background: var(--logo-green); transform: translate(14px, 14px); }
.shield-img { position: relative; width: 100%; height: 100%; object-fit: cover; clip-path: url(#shield-clip); }
@media (min-width: 900px) { .hero { padding-top: var(--space-16); } .hero-grid { grid-template-columns: 1.15fr .85fr; gap: var(--space-16); } }
@media (max-width: 599px) { .hero-actions .wf-btn { width: 100%; } .shield { width: 72%; } }

/* Sezioni */
.section-head { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); align-items: center; }
.section-head > div { max-width: 44em; }
.section-head .body-lg { margin-top: var(--space-4); margin-bottom: 0; }
.section-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
@media (min-width: 900px) { .section-head.with-img { grid-template-columns: 1.2fr .8fr; } }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.benefits li { border-top: 2px solid var(--logo-green); padding-top: var(--space-6); }
.benefits h3 { margin-bottom: var(--space-3); }
.benefits p { margin: 0; }
@media (min-width: 900px) { .benefits { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); } }
.service-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); counter-reset: s; }
.steps li { position: relative; }
.step-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--logo-green); color: var(--on-brand-tint); font: 500 20px/1 var(--font-display); margin-bottom: var(--space-4); background: var(--surface-raised); }
.steps h3 { margin-bottom: var(--space-2); }
.steps p { color: var(--ink-muted); margin: 0; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: calc(-1 * var(--space-8) + 12px); border-top: 1.5px dashed var(--line-strong); }
}
.testimonials { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
.testimonial { margin: 0; padding: var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-6); }
.testimonial blockquote { margin: 0; font: 400 20px/30px var(--font-display); }
.testimonial blockquote p { margin: 0; }
.testimonial figcaption { display: flex; flex-direction: column; font-size: 15px; }
.testimonial figcaption span { color: var(--ink-muted); }

/* Preventivo */
.quote-layout, .contact-layout { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 960px) { .quote-layout { grid-template-columns: .8fr 1.2fr; gap: var(--space-16); } .contact-layout { grid-template-columns: 1fr 1fr; gap: var(--space-16); } .quote-intro { position: sticky; top: 104px; } }
.rules { margin: var(--space-6) 0 0; padding-left: 20px; color: var(--ink-muted); }
.rules li { margin-bottom: var(--space-2); }
.rules li::marker { color: var(--logo-green); }
.pros { gap: var(--space-3); }
.pro { border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); transition: border-color 150ms, background-color 150ms; }
.pro.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand-tint) 55%, var(--surface-raised)); }
.pro-toggle { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); font-weight: 600; font-size: 17px; cursor: pointer; }
.pro-toggle input { width: 22px; height: 22px; accent-color: var(--brand); }
.pro-config { display: grid; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); grid-template-columns: 1fr 1fr; }
.pro-config .wf-hint { grid-column: 1 / -1; }
.quote-summary { margin: 0 0 var(--space-6); }
.summary-box { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.summary-box strong { font: 500 28px/1 var(--font-display); }
.summary-lines { list-style: none; margin: var(--space-2) 0 0; padding: 0; width: 100%; font-size: 15px; color: var(--ink-muted); }

/* Contatti */
.contact-list { list-style: none; padding: 0; margin: var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.contact-list li, .contact-list a, .footer-contact a, .footer-area { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.contact-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.contact-list svg, .footer-contact svg, .footer-area svg { color: var(--brand); flex: none; }
.contact-layout form { display: flex; flex-direction: column; gap: var(--space-4); }
.nl-banner { padding: var(--space-3) var(--space-4); background: var(--surface-raised); border-radius: var(--radius-md); }

/* Pagine servizio */
.page-hero { padding: var(--space-12) 0; }
.page-hero .body-lg { max-width: 40em; margin-top: var(--space-4); margin-bottom: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); margin-bottom: var(--space-6); }
.crumbs a { color: var(--on-brand-tint); }
.article-layout { display: grid; gap: var(--space-12); padding-top: var(--space-12); padding-bottom: var(--section); }
@media (min-width: 960px) { .article-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-16); } .aside { position: sticky; top: 104px; align-self: start; } }
.prose { max-width: 42em; font-size: 17px; line-height: 28px; }
.prose-wide { padding-top: var(--space-12); padding-bottom: var(--section); }
.prose h2 { font: 500 24px/32px var(--font-display); margin: var(--space-12) 0 var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--logo-green); }
.aside { display: flex; flex-direction: column; gap: var(--space-6); }
.aside .panel { display: flex; flex-direction: column; gap: var(--space-3); }
.aside .panel p { margin: 0 0 var(--space-2); color: var(--ink-muted); }
.other-services { list-style: none; margin: 0; padding: 0; }
.other-services a { display: flex; min-height: 44px; align-items: center; font-weight: 600; }

/* Footer */
.site-footer { background: var(--surface-sunken); border-top: 1px solid var(--line); padding: var(--space-12) 0 calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr 1fr; }
.footer-brand, .footer-contact { grid-column: 1 / -1; }
.footer-brand p { color: var(--ink-muted); max-width: 30em; margin-top: var(--space-4); }
.site-footer h2 { font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer nav a, .site-footer .link-btn { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; }
.site-footer nav a:hover { color: var(--brand); text-decoration: underline; }
.footer-contact p { margin: 0; }
.footer-contact a { color: var(--ink); text-decoration: none; }
.newsletter { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.newsletter-row { display: flex; gap: var(--space-2); }
.newsletter .check { font-size: 14px; line-height: 20px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; }
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--ink-muted); }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.4fr .8fr .9fr .9fr 1.5fr; } .footer-brand, .footer-contact { grid-column: auto; } }
.install-ios { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 80; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-overlay); }
.install-ios p { margin: 0 0 var(--space-2); }

/* ---------- Area riservata e admin ---------- */
.app-body { min-height: 100vh; }
.app-header { position: sticky; top: 0; z-index: 40; background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.app-header .header-row { min-height: 64px; }
.app-user { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; }
.app-shell { display: grid; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .app-shell { grid-template-columns: 240px minmax(0, 1fr); padding-bottom: var(--space-16); } }
.side-nav { display: none; }
@media (min-width: 900px) { .side-nav { display: flex; flex-direction: column; gap: var(--space-1); position: sticky; top: 96px; align-self: start; } }
.side-nav button, .bottom-nav button { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--ink); font: 600 15px/20px var(--font-sans); border-radius: var(--radius-md); cursor: pointer; text-align: left; }
.side-nav button:hover { background: var(--surface-sunken); }
.side-nav button[aria-current="page"] { background: var(--brand-tint); color: var(--on-brand-tint); }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; background: var(--surface-raised); border-top: 1px solid var(--line); padding: var(--space-1) env(safe-area-inset-right, 0px) calc(var(--space-1) + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px); }
.bottom-nav button { flex-direction: column; gap: 2px; flex: 1; min-height: 56px; padding: var(--space-1); font-size: 12px; justify-content: center; text-align: center; color: var(--ink-muted); }
.bottom-nav button[aria-current="page"] { color: var(--brand); }
@media (min-width: 900px) { .bottom-nav { display: none; } }
.view h1 { font: 500 28px/36px var(--font-display); margin-bottom: var(--space-2); }
.view > p.lead { color: var(--ink-muted); margin-bottom: var(--space-8); }
.view h2 { font: 600 18px/26px var(--font-sans); margin: var(--space-8) 0 var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cards { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .cards-2 { grid-template-columns: 1fr 1fr; } .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.card-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.card h3 { font: 600 18px/26px var(--font-sans); }
.meta { color: var(--ink-muted); font-size: 15px; margin: var(--space-1) 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.stat { font: 500 36px/1 var(--font-display); margin: var(--space-2) 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.chip { min-height: 44px; padding: 0 var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font: 600 15px/20px var(--font-sans); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--on-brand-tint); }
.day-block { margin-bottom: var(--space-6); }
.day-block h3 { font-size: 15px; color: var(--ink-muted); margin-bottom: var(--space-2); }
.summary { background: var(--brand-tint); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-4); }
.summary dt { color: var(--on-brand-tint); font-size: 14px; }
.summary dd { margin: 0; font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-weight: 600; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card .brand { margin-bottom: var(--space-6); }
.auth-card h1 { font: 500 28px/36px var(--font-display); margin-bottom: var(--space-2); }
.auth-card form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.tabs { display: flex; gap: var(--space-1); background: var(--surface-sunken); padding: var(--space-1); border-radius: var(--radius-md); margin-top: var(--space-6); }
.tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; font: 600 15px/20px var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.qr { display: block; margin: var(--space-4) auto; border-radius: var(--radius-md); background: #fff; padding: var(--space-2); }
.code-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); font: 600 15px/24px ui-monospace, Menlo, monospace; padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.dialog { border: 0; border-radius: var(--radius-lg); padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-overlay); }
.dialog::backdrop { background: rgba(15,25,22,.45); }
.dialog form { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.dialog h2 { font: 500 24px/32px var(--font-display); margin: 0; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 90; background: var(--ink); color: var(--surface); padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); font-weight: 600; box-shadow: var(--shadow-overlay); max-width: calc(100vw - 32px); }
@media (min-width: 900px) { .toast { bottom: var(--space-8); } }
.empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--ink-muted); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: var(--space-2); }
.content-group { margin-bottom: var(--space-8); }
.content-group .stack { gap: var(--space-6); }
textarea.long { min-height: 320px; font-size: 15px; line-height: 22px; }
.img-slot { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .img-slot { grid-template-columns: 220px 1fr; align-items: start; } }
.img-preview { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); }
.img-empty { display: grid; place-items: center; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-muted); font-size: 14px; border: 1.5px dashed var(--line-strong); }

@media (max-width: 599px) { .hide-sm { display: none; } .app-user .wf-badge { display: none; } }