@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600;700&family=Khand:wght@500;600;700&family=Open+Sans:wght@400;600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

/* Prenotazioni Piscine: stili dei componenti.
   I valori (colori, misure, tipi) arrivano da tokens.json; qui c'è solo la struttura.
   Unico valore per impianto che non sta nei token: quale famiglia fa da titolo e da testo. */
:root { --f-display: var(--font-sp-display); --f-body: var(--font-sp-body); }
[data-theme="concaverde"] { --f-display: var(--font-cv-display); --f-body: var(--font-cv-body); }
[data-theme="contrasto"] { --f-display: var(--font-ui); --f-body: var(--font-ui); }

.t-hero, .t-heading, .t-subheading, .t-verdict { font-family: var(--f-display); text-transform: uppercase; }
.t-body, .t-body-strong, .t-small, .t-small-strong, .t-label, .t-button, .t-price, .t-seat { font-family: var(--f-body); }
.t-label { text-transform: uppercase; }
.t-price, .t-seat, .t-code, .t-ui, .t-ui-strong, .t-ui-small, .t-ui-title { font-variant-numeric: tabular-nums; }
[data-theme="concaverde"] .t-hero, [data-theme="concaverde"] .t-heading, [data-theme="concaverde"] .t-subheading, [data-theme="concaverde"] .t-verdict { letter-spacing: 0.01em; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface); color: var(--ink); }
body { font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Impaginazione delle anteprime */
.pp-root { padding: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.pp-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.pp-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pp-muted { color: var(--ink-muted); }
.pp-caption { color: var(--ink-muted); margin: 0 0 var(--space-2); }
.pp-icon { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Button */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-5); border: 2px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, transform .08s ease; }
.pp-btn:hover { box-shadow: inset 0 0 0 999px var(--overlay-hover); }
.pp-btn:active { transform: translateY(1px); }
.pp-btn--primary { background: var(--brand); color: var(--on-brand); }
.pp-btn--secondary { background: var(--surface-raised); border-color: var(--line-strong); }
.pp-btn--ghost { color: var(--brand-ink); }
.pp-btn--danger { background: var(--danger-fill); color: var(--on-danger-fill); }
.pp-btn--solid { background: var(--ink); color: var(--surface-raised); }
.pp-btn--light { background: var(--surface-raised); color: var(--ink); }
.pp-btn--block { width: 100%; }
.pp-btn--admin { min-height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-md); }
.pp-btn--row { min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-md); }
.pp-btn[disabled], .pp-btn[aria-disabled="true"] { background: var(--surface-sunken); border-color: transparent; color: var(--ink-muted); cursor: not-allowed; box-shadow: none; transform: none; }
.pp-btn[aria-busy="true"] { cursor: progress; }
.pp-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: pp-spin .8s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* Stepper */
.pp-stepper { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); width: 340px; max-width: 100%; }
.pp-stepper__name { margin: 0; }
.pp-stepper__price { margin: 0; color: var(--ink-muted); }
.pp-stepper__ctrl { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: var(--space-2); }
.pp-stepper__btn { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; }
.pp-stepper__btn:hover { box-shadow: inset 0 0 0 999px var(--overlay-hover); }
.pp-stepper__btn--plus { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pp-stepper__btn[disabled] { background: var(--surface-sunken); border-color: var(--surface-sunken); color: var(--ink-muted); cursor: not-allowed; box-shadow: none; }
.pp-stepper__value { min-width: 2ch; text-align: center; }
.pp-stepper__hint { grid-column: 1 / -1; margin: var(--space-1) 0 0; color: var(--ink-muted); }
.pp-stepper__hint--limit { color: var(--warn); }

/* DayPicker */
.pp-cal { width: 360px; max-width: 100%; padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.pp-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.pp-cal__title { margin: 0; }
.pp-cal__nav { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pp-cal__nav:hover { background: var(--surface-sunken); }
/* Freccia senza mese da quella parte: aria-disabled invece di disabled, così chi la usa da tastiera non perde il fuoco */
.pp-cal__nav[disabled], .pp-cal__nav[aria-disabled="true"] { color: var(--ink-muted); background: transparent; cursor: not-allowed; }
.pp-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.pp-cal__dow { text-align: center; color: var(--ink-muted); padding-block: var(--space-1); }
.pp-day { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; min-width: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.pp-day:hover { background: var(--surface-sunken); }
.pp-day--today { box-shadow: inset 0 0 0 2px var(--line-strong); }
.pp-day--holiday .pp-day__num { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.pp-day__mark { position: absolute; bottom: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; }
.pp-day--few .pp-day__mark { background: var(--warn); }
.pp-day--full .pp-day__mark { background: transparent; box-shadow: inset 0 0 0 2px var(--danger); }
.pp-day[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.pp-day[aria-pressed="true"] .pp-day__num { color: var(--on-brand); }
.pp-day--few[aria-pressed="true"] .pp-day__mark { background: var(--on-brand); box-shadow: none; }
.pp-day--full[aria-pressed="true"] .pp-day__mark { background: transparent; box-shadow: inset 0 0 0 2px var(--on-brand); }
.pp-day[aria-disabled="true"] { color: var(--ink-muted); cursor: not-allowed; background: transparent; }
.pp-day[aria-disabled="true"] .pp-day__num { text-decoration: line-through; color: var(--ink-muted); }
.pp-day--blank { visibility: hidden; }
.pp-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink-muted); }
.pp-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.pp-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* SeatMap */
.pp-map-wrap { width: 640px; max-width: 100%; display: grid; gap: var(--space-3); }
.pp-map { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--map-paving); box-shadow: var(--shadow-1); }
.pp-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pp-map__bg .lawn { fill: var(--map-lawn); }
.pp-map__bg .water { fill: var(--map-water); }
.pp-map__bg .edge { fill: none; stroke: var(--surface-raised); stroke-width: 4; }
.pp-map__bg .zone { fill: var(--ink-muted); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.pp-map__zoom { position: absolute; top: var(--space-3); right: var(--space-3); display: grid; gap: var(--space-1); }
.pp-map__zoom button { width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-md); border: 0; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1); display: grid; place-items: center; cursor: pointer; }
.pp-pin { position: absolute; width: var(--pin); height: var(--pin); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--seat-free-ring); background: var(--seat-free); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: var(--shadow-pin); transition: transform .12s ease, background-color .12s ease; }
.pp-pin:hover { transform: translate(-50%, -50%) scale(1.08); }
.pp-pin[aria-pressed="true"] { background: var(--seat-mine); color: var(--on-brand); border-width: 3px; transform: translate(-50%, -50%) scale(1.18); z-index: var(--z-pin-mine); }
.pp-pin[data-state="taken"], .pp-pin[data-state="blocked"] { background: var(--seat-taken); border-color: var(--seat-taken-glyph); color: var(--seat-taken-glyph); box-shadow: none; cursor: not-allowed; }
.pp-pin[data-state="taken"]:hover, .pp-pin[data-state="blocked"]:hover { transform: translate(-50%, -50%); }
.pp-pin[data-state="paid"] { background: var(--ink); color: var(--surface-raised); }
.pp-pin[data-state="phone"] { background: var(--info-fill); border-color: var(--seat-free-ring); color: var(--on-info-fill); }
.pp-pin[data-state="held"] { background: var(--warn-fill); border-style: dashed; color: var(--on-warn-fill); }
.pp-pin[data-state="in"] { background: var(--ok-fill); color: var(--on-ok-fill); }
.pp-pin svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.pp-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.pp-seg button { min-height: 36px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); cursor: pointer; }
.pp-seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1); }
.pp-mini-pin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--seat-free-ring); background: var(--seat-free); flex: none; }
.pp-mini-pin[data-state="mine"] { background: var(--seat-mine); }
.pp-mini-pin[data-state="taken"], .pp-mini-pin[data-state="blocked"] { background: var(--seat-taken-far); border-color: var(--seat-taken-glyph); }
.pp-mini-pin[data-state="paid"] { background: var(--ink); }
.pp-mini-pin[data-state="phone"] { background: var(--info-fill); }
.pp-mini-pin[data-state="held"] { background: var(--warn-fill); border-style: dashed; }
.pp-mini-pin[data-state="in"] { background: var(--ok-fill); }
.pp-pick { margin: 0; }

/* HoldTimer */
.pp-hold { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); width: 380px; max-width: 100%; padding: var(--space-3) var(--space-4); background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.pp-hold__icon { color: var(--brand-ink); }
.pp-hold__text { margin: 0; }
.pp-hold__time { margin: 0; }
.pp-hold__bar { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.pp-hold__fill { height: 100%; background: var(--brand-ink); transition: width 1s linear; }
.pp-hold--late { background: var(--warn-soft); }
.pp-hold--late .pp-hold__icon, .pp-hold--late .pp-hold__time { color: var(--warn); }
.pp-hold--late .pp-hold__fill { background: var(--warn); }

/* PackageCard */
.pp-pack { display: grid; gap: var(--space-3); width: 340px; max-width: 100%; padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.pp-pack__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pp-pack__name { margin: 0; }
.pp-pack__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pp-pack__list li { display: flex; align-items: center; gap: var(--space-2); }
.pp-pack__list .pp-icon { color: var(--brand-ink); }
.pp-pack__when { margin: 0; color: var(--ink-muted); }
.pp-pack__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.pp-pack__left { margin: 0; color: var(--warn); }
.pp-pack--off { opacity: 1; }
.pp-pack--off .pp-pack__name, .pp-pack--off .pp-pack__list { color: var(--ink-muted); }

/* CartSummary */
.pp-cart { display: grid; gap: var(--space-3); width: 400px; max-width: 100%; padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.pp-cart__date { margin: 0; }
.pp-cart__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pp-cart__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); }
.pp-cart__line p { margin: 0; }
.pp-cart__sub { color: var(--ink-muted); }
.pp-cart__fee { color: var(--ink-muted); }
.pp-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.pp-cart__total p { margin: 0; }
.pp-cart__terms { margin: 0; color: var(--ink-muted); }

/* TicketPass */
.pp-pass { width: 340px; max-width: 100%; background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); overflow: hidden; }
.pp-pass__head { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--brand); color: var(--on-brand); }
.pp-pass__head p { margin: 0; }
.pp-pass__qrbox { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-4); }
.pp-pass__qr { width: 196px; height: 196px; padding: 12px; background: var(--qr-ground); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); }
.pp-pass__qr canvas, .pp-pass__qr img, .pp-pass__qr svg { display: block; width: 100%; height: 100%; }
.pp-pass__qr .qr-on { fill: var(--qr-ink); }
.pp-pass__code { margin: 0; color: var(--ink); }
.pp-pass__tear { position: relative; height: 0; margin: 0 var(--space-5); border-top: 2px dashed var(--line); }
.pp-pass__tear::before, .pp-pass__tear::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); }
.pp-pass__tear::before { left: calc(var(--space-5) * -1 - 12px); }
.pp-pass__tear::after { right: calc(var(--space-5) * -1 - 12px); }
.pp-pass__body { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.pp-pass__body p { margin: 0; }
.pp-pass__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.pp-pass__items li { display: flex; align-items: center; gap: var(--space-2); }

/* ScanResult */
.pp-scan { width: 300px; max-width: 100%; height: 500px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-2); }
.pp-scan__top { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-5); text-align: center; }
.pp-scan__icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; border: 4px solid currentColor; }
.pp-scan__icon svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pp-scan__verdict { margin: 0; }
.pp-scan__reason { margin: 0; }
.pp-scan__detail { margin: 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-lg); display: grid; gap: var(--space-1); align-content: start; overflow: auto; }
.pp-scan__detail p { margin: 0; }
.pp-scan__actions { display: grid; gap: var(--space-2); padding: var(--space-3); }
.pp-scan--ok { background: var(--ok-fill); color: var(--on-ok-fill); }
.pp-scan--warn { background-color: var(--warn-fill); background-image: repeating-linear-gradient(-45deg, var(--warn-stripe) 0 14px, transparent 14px 28px); color: var(--on-warn-fill); }
.pp-scan--no { background: var(--danger-fill); color: var(--on-danger-fill); }
.pp-scan .pp-btn--secondary { border-color: transparent; }

/* StatusBadge */
.pp-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink); white-space: nowrap; }
.pp-badge .pp-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; }
.pp-badge--ok { background: var(--ok-soft); color: var(--ok); }
.pp-badge--warn { background: var(--warn-soft); color: var(--warn); }
.pp-badge--danger { background: var(--danger-soft); color: var(--danger); }
.pp-badge--info { background: var(--info-soft); color: var(--info); }
.pp-badge--brand { background: var(--brand-soft); color: var(--brand-ink); }

/* BookingTable */
.pp-panel { width: 100%; max-width: var(--content-max); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.pp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.pp-toolbar__title { margin: 0 auto 0 0; }
.pp-search { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink-muted); }
.pp-search input { border: 0; outline: 0; background: transparent; color: var(--ink); width: 200px; max-width: 40vw; font: inherit; }
.pp-chip { min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.pp-chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-ink); color: var(--brand-ink); }
.pp-table-scroll { overflow-x: auto; }
.pp-table { width: 100%; min-width: 760px; border-collapse: collapse; color: var(--ink); }
.pp-table__code { font-family: var(--font-mono); letter-spacing: 0.04em; white-space: nowrap; }
.pp-table__who span { white-space: nowrap; }
.pp-table th { text-align: left; color: var(--ink-muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-raised); }
.pp-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.pp-table tbody tr:hover td { background: var(--surface); }
.pp-table tbody tr[aria-selected="true"] td { background: var(--brand-soft); }
.pp-table__who { display: grid; }
.pp-table__actions { display: flex; gap: var(--space-2); justify-content: flex-end; white-space: nowrap; }
.pp-table__src { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.pp-table__src .pp-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Field */
.pp-form { display: grid; gap: var(--space-5); width: 440px; max-width: 100%; padding: var(--space-5); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.pp-field { display: grid; gap: var(--space-1); }
.pp-field__label { color: var(--ink); }
.pp-field__hint { margin: 0; color: var(--ink-muted); }
.pp-field__error { margin: 0; color: var(--danger); display: flex; align-items: center; gap: var(--space-1); }
.pp-input { width: 100%; min-height: var(--control-md); padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; }
.pp-input:focus-visible { outline-offset: 1px; }
.pp-field--error .pp-input { border-color: var(--danger); border-width: 2px; }
.pp-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pp-switch { position: relative; width: 48px; height: 28px; flex: none; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface-sunken); cursor: pointer; padding: 0; transition: background-color .15s ease; }
.pp-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: transform .15s ease; }
.pp-switch[aria-checked="true"] { background: var(--brand-ink); border-color: var(--brand-ink); }
.pp-switch[aria-checked="true"]::after { transform: translateX(20px); box-shadow: none; }
.pp-color { display: grid; grid-template-columns: var(--control-md) minmax(0, 1fr); gap: var(--space-2); }
.pp-color__swatch { width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--brand); }
.pp-check { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.pp-check--ok { color: var(--ok); }
.pp-check--no { color: var(--danger); }

/* Notice */
.pp-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); width: 420px; max-width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--info-soft); color: var(--ink); }
.pp-notice__icon { color: var(--info); padding-top: 3px; }
.pp-notice p { margin: 0; }
.pp-notice__action { grid-column: 2; justify-self: start; margin-top: var(--space-1); }
/* Chiudi: icona a destra, bersaglio tap-min che non alza l'avviso (i margini negativi stanno nel padding) */
.pp-notice__close { grid-column: 3; grid-row: 1; align-self: start; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer; }
.pp-notice__close:hover { box-shadow: inset 0 0 0 999px var(--overlay-hover); }
.pp-notice--ok { background: var(--ok-soft); } .pp-notice--ok .pp-notice__icon { color: var(--ok); }
.pp-notice--warn { background: var(--warn-soft); } .pp-notice--warn .pp-notice__icon { color: var(--warn); }
.pp-notice--danger { background: var(--danger-soft); } .pp-notice--danger .pp-notice__icon { color: var(--danger); }
.pp-toast { display: flex; align-items: center; gap: var(--space-3); width: 420px; max-width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--ink); color: var(--surface-raised); box-shadow: var(--shadow-2); }
.pp-toast p { margin: 0; }
.pp-toast .pp-icon { color: var(--surface-raised); }

/* SeatMap su pianta reale: la pianta e le puntine stanno in coordinate dell'impianto e si ingrandiscono insieme */
.pp-map--real { aspect-ratio: 16 / 10; background: var(--surface-raised); }
.pp-map--real.pp-map--tall { aspect-ratio: 4 / 5; }
.pp-map__viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.pp-map__viewport:active { cursor: grabbing; }
.pp-map__layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pp-map__layer > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pp-map__pins, .pp-map__labels { position: absolute; inset: 0; }
.pp-map--real .pp-pin { width: 52px; height: 52px; border-width: 5px; font-family: var(--f-body); font-size: 23px; font-weight: 700; line-height: 1; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
.pp-map--real .pp-pin svg { width: 26px; height: 26px; }
.pp-map--real .pp-pin[aria-pressed="true"] { border-width: 7px; }
.pp-map--real:not(.pp-map--near) .pp-pin__n, .pp-map--real:not(.pp-map--near) .pp-pin svg { display: none; }
.pp-map--real:not(.pp-map--near) .pp-pin:hover { transform: translate(-50%, -50%); }
/* Da lontano la croce non c'è: il posto non disponibile si riconosce dal riempimento pieno (almeno 3:1 su bianco e pianta) */
.pp-map--real:not(.pp-map--near) .pp-pin[data-state="taken"], .pp-map--real:not(.pp-map--near) .pp-pin[data-state="blocked"] { background: var(--seat-taken-far); }
.pp-map__label { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--f-display); font-size: 40px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--map-label); pointer-events: none; }
.pp-map__hint { position: absolute; left: var(--space-3); bottom: var(--space-3); margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1); pointer-events: none; }
/* La scritta se ne va da vicino, in modifica e mentre una puntina ha il fuoco della tastiera (copriva le puntine in basso) */
.pp-map--near .pp-map__hint, .pp-map--edit .pp-map__hint, .pp-map--tastiera .pp-map__hint { display: none; }
.pp-map--edit .pp-map__label { pointer-events: auto; cursor: move; outline: 3px dashed var(--line-strong); outline-offset: 8px; border-radius: var(--radius-sm); }
.pp-map--edit .pp-pin { cursor: move; }
/* in modifica lo strato delle puntine lascia passare i tocchi alle scritte sotto, le puntine restano toccabili */
.pp-map--edit .pp-map__pins { pointer-events: none; }
.pp-map--edit .pp-map__pins .pp-pin { pointer-events: auto; }
.pp-pin[data-sel] { outline: 7px solid var(--focus-ring); outline-offset: 5px; z-index: var(--z-pin-mine); }
.pp-pin[data-off] { background: var(--surface-sunken); border-style: dashed; border-color: var(--seat-taken-glyph); color: var(--ink-muted); box-shadow: none; }
.pp-areas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* I filtri delle aree si toccano col dito come la mappa: alti tap-min anche dove gli altri chip sono più bassi */
.pp-areas .pp-chip { min-height: var(--tap-min); padding: 0 var(--space-4); }

/* MapEditor */
.pp-editor { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-4); width: 100%; max-width: var(--content-max); }
@media (max-width: 860px) { .pp-editor { grid-template-columns: minmax(0, 1fr); } }
.pp-editor__map { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.pp-editor__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.pp-editor__panel h3, .pp-editor__panel p { margin: 0; }
.pp-editor__count { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; margin: 0; padding: 0; list-style: none; }
.pp-editor__dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.pp-editor__off { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pp-editor__status { margin: 0 0 0 auto; color: var(--ink-muted); }
.pp-editor__status--dirty { color: var(--warn); }

/* Pianta dell'impianto (SVG con classi pp-pl-*) */
.pp-pl-site { fill: var(--map-lawn); }
.pp-pl-sand { fill: var(--map-sand); }
.pp-pl-paving { fill: var(--map-paving); }
.pp-pl-building { fill: var(--map-building); stroke: var(--map-building-edge); stroke-width: 6; stroke-linejoin: round; }
.pp-pl-pane { fill: var(--map-building-edge); }
.pp-pl-water { fill: var(--map-water); stroke: var(--map-building); stroke-width: 10; stroke-linejoin: round; }
.pp-pl-slide { fill: var(--map-slide); }
.pp-pl-stripe { fill: var(--map-building); }
.pp-pl-feature { fill: var(--map-feature); }
.pp-pl-green { fill: var(--map-hedge); }

/* Postazione solo lettino (senza ombrellone): quadrato arrotondato invece del cerchio, stessi stati */
.pp-pin[data-tipo="lettino"] { border-radius: var(--radius-md); }
.pp-map--real .pp-pin[data-tipo="lettino"] { border-radius: 14px; }
.pp-mini-pin[data-tipo="lettino"] { border-radius: 4px; }