/* Nixsa Beach · sistema grafico comune (pannello di gestione e pagine pubbliche) */
:root {
  --mare-900: #072433; --mare-800: #0b3247; --mare-700: #0f4560; --mare-600: #135a7a; --mare-500: #1a7398;
  --acqua-600: #0e7c86; --acqua-500: #13a3a9; --acqua-100: #d7f2f1; --acqua-50: #eefaf9;
  --sabbia-50: #fbf8f2; --sabbia-100: #f5efe3; --sabbia-200: #ebe1cc; --sabbia-400: #cbb68a;
  --sole-500: #f2a516; --sole-100: #fdf0d3;
  --corallo-600: #d9483b; --corallo-500: #ec5f4f; --corallo-100: #fde4e0;
  --verde-600: #1d8a4f; --verde-500: #23a35f; --verde-100: #dcf3e5;
  --viola-600: #6d4bd1; --viola-100: #ebe5fb;
  --ink: #0d2230; --ink-2: #3b5262; --ink-3: #6b7f8c; --linea: #e3e8ec; --linea-2: #eef2f4;
  --fondo: #f4f6f8; --carta: #ffffff;
  --r-s: 8px; --r: 12px; --r-l: 18px;
  --ombra-1: 0 1px 2px rgba(7, 36, 51, .06), 0 1px 3px rgba(7, 36, 51, .08);
  --ombra-2: 0 4px 12px rgba(7, 36, 51, .08), 0 2px 4px rgba(7, 36, 51, .05);
  --ombra-3: 0 18px 50px rgba(7, 36, 51, .22);
  /* stati delle postazioni */
  --st-libero: #e9f7ef; --st-libero-b: #23a35f;
  --st-prenotato: #fff3d6; --st-prenotato-b: #e39a0b;
  --st-occupato: #fde4e0; --st-occupato-b: #d9483b;
  --st-abbonato: #e3ecfb; --st-abbonato-b: #2c5fc4;
  --st-parziale: #fff8e8; --st-parziale-b: #e39a0b;
  --st-fuori: #eceff1; --st-fuori-b: #90a4ae;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titoli: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--fondo); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-titoli); margin: 0; line-height: 1.2; letter-spacing: -.01em; }
a { color: var(--mare-600); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.nascosto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- pulsanti ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--linea); background: var(--carta); color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { border-color: #c9d3da; background: #fafcfd; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primario { background: var(--mare-700); border-color: var(--mare-700); color: #fff; }
.btn-primario:hover { background: var(--mare-800); border-color: var(--mare-800); }
.btn-acqua { background: var(--acqua-600); border-color: var(--acqua-600); color: #fff; }
.btn-acqua:hover { background: #0b6b74; border-color: #0b6b74; }
.btn-verde { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
.btn-verde:hover { background: #18773f; }
.btn-pericolo { color: var(--corallo-600); }
.btn-pericolo:hover { background: var(--corallo-100); border-color: #f6c2bb; }
.btn-rosso { background: var(--corallo-600); border-color: var(--corallo-600); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgba(13, 34, 48, .05); border-color: transparent; }
.btn-s { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-l { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn-icona { width: 38px; padding: 0; }
.btn-s.btn-icona { width: 31px; }
.btn-blocco { width: 100%; }

/* ---------- moduli ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span, .etichetta { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.input, select.input, textarea.input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid #d5dde3; border-radius: 9px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; }
.input:focus { border-color: var(--acqua-500); box-shadow: 0 0 0 3px rgba(19, 163, 169, .16); }
.input-s { height: 32px; font-size: 13px; }
.griglia-moduli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 14px; }
.griglia-moduli .intero { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.check input { width: 17px; height: 17px; accent-color: var(--acqua-600); }
.segmenti { display: inline-flex; background: #e9eef1; border-radius: 10px; padding: 3px; gap: 2px; }
.segmenti button { border: 0; background: transparent; height: 31px; padding: 0 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.segmenti button.attivo { background: #fff; color: var(--ink); box-shadow: var(--ombra-1); }

/* ---------- schede, tabelle, distintivi ---------- */
.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--ombra-1); }
.scheda-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linea-2); }
.scheda-testa h3 { font-size: 15px; }
.scheda-corpo { padding: 16px 18px; }
.tabella-box { overflow-x: auto; }
table.tabella { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabella th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--linea); background: #fafbfc; white-space: nowrap; }
.tabella td { padding: 11px 14px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tbody tr.cliccabile { cursor: pointer; }
.tabella tbody tr.cliccabile:hover td { background: #f7fafb; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: #eef2f4; color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge.semplice::before { display: none; }
.b-verde { background: var(--verde-100); color: #146c3c; }
.b-giallo { background: var(--sole-100); color: #9a6200; }
.b-rosso { background: var(--corallo-100); color: #b23427; }
.b-blu { background: #e3ecfb; color: #2552a8; }
.b-acqua { background: var(--acqua-100); color: #0b6b74; }
.b-viola { background: var(--viola-100); color: var(--viola-600); }
.b-grigio { background: #eceff1; color: #5d717d; }
.muto { color: var(--ink-3); }
.piccolo { font-size: 12.5px; }
.forte { font-weight: 700; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .02em; }
.vuoto { padding: 36px 20px; text-align: center; color: var(--ink-3); }
.vuoto svg { width: 34px; height: 34px; opacity: .45; margin-bottom: 6px; }
.riga { display: flex; align-items: center; gap: 10px; }
.riga-spazio { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.colonna { display: flex; flex-direction: column; gap: 10px; }
.avvolgi { flex-wrap: wrap; }
.cresce { flex: 1; min-width: 0; }

/* KPI */
.kpi-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r); padding: 15px 17px; box-shadow: var(--ombra-1); }
.kpi .kpi-et { font-size: 12px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.kpi .kpi-et svg { width: 15px; height: 15px; }
.kpi .kpi-val { font-family: var(--font-titoli); font-size: 26px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .kpi-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.barra { height: 8px; border-radius: 99px; background: #e9eef1; overflow: hidden; display: flex; }
.barra > span { display: block; height: 100%; }

/* ---------- finestre, pannelli, avvisi ---------- */
.velo { position: fixed; inset: 0; background: rgba(7, 36, 51, .45); backdrop-filter: blur(2px); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 18px; animation: appare .15s ease; }
.finestra { background: #fff; border-radius: var(--r-l); box-shadow: var(--ombra-3); width: min(560px, 100%); max-height: calc(100vh - 36px); display: flex; flex-direction: column; animation: sale .18s ease; }
.finestra.larga { width: min(860px, 100%); }
.finestra-testa { padding: 18px 22px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.finestra-testa h2 { font-size: 18px; }
.finestra-corpo { padding: 6px 22px 18px; overflow: auto; }
.finestra-piede { padding: 14px 22px; border-top: 1px solid var(--linea-2); display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.pannello-laterale { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; box-shadow: var(--ombra-3); z-index: 70; display: flex; flex-direction: column; animation: entraDestra .2s ease; }
.pannello-laterale .finestra-corpo { flex: 1; padding-top: 4px; }
.toast-box { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--mare-900); color: #fff; padding: 11px 16px; border-radius: 11px; box-shadow: var(--ombra-2); font-weight: 600; font-size: 13.5px; display: flex; gap: 9px; align-items: center; animation: sale .2s ease; max-width: 92vw; }
.toast.errore { background: var(--corallo-600); }
.toast.ok { background: var(--verde-600); }
.toast svg { width: 17px; height: 17px; }
@keyframes appare { from { opacity: 0; } }
@keyframes sale { from { opacity: 0; transform: translateY(8px); } }
@keyframes entraDestra { from { transform: translateX(30px); opacity: 0; } }
.caricamento { display: flex; align-items: center; justify-content: center; padding: 50px; color: var(--ink-3); gap: 10px; }
.rotella { width: 20px; height: 20px; border: 2.5px solid #d5dde3; border-top-color: var(--acqua-600); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* QR */
.qr-box { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 12px; display: inline-block; }
.qr-box img { display: block; width: 168px; height: 168px; }
.codice-grande { font-family: ui-monospace, Consolas, monospace; font-size: 20px; font-weight: 800; letter-spacing: .12em; }

@media (max-width: 640px) {
  .griglia-moduli { grid-template-columns: 1fr; }
  .finestra-testa, .finestra-corpo, .finestra-piede { padding-left: 16px; padding-right: 16px; }
  .velo { padding: 0; align-items: flex-end; }
  .finestra { border-radius: 18px 18px 0 0; max-height: 94vh; width: 100%; }
}