:root {
  --bg: #F2F5F6;
  --surface: #FFFFFF;
  --surface-alt: #EDF1F2;
  --border: #DFE5E8;
  --border-forte: #C9D2D6;
  --teal: #00697E;
  --teal-dark: #00505F;
  --teal-wash: #E1F1F4;
  --bianco: #FFFFFF;
  --text-main: #15191C;
  --text-muted: #5A6167;
  --danger: #C23A2B;
  --danger-forte: #DC3B28;
  --danger-wash: #FCEAE8;
  /* "In scadenza" e' un promemoria, non un allarme: grigio, cosi' il
     colore acceso resta a chi e' attivo (blu) e a chi e' gia' scaduto
     (rosso), e l'occhio va dove serve. */
  --warning: #49525A;
  --warning-forte: #97A1A9;
  --warning-wash: #E4E9EC;
  /* Stato dell'abbonamento: blu = attivo, arancione = in scadenza, rosso =
     scaduto. Il teal resta il colore del marchio (navigazione e azioni),
     cosi' i tre stati non si confondono con l'interfaccia intorno. */
  --attivo: #1D4ED8;
  --attivo-forte: #2563EB;
  --attivo-wash: #E7EDFD;
  --success: #1F8A4C;
  --success-wash: #E3F7EC;
  --radius: 14px;
  --radius-sm: 9px;
  --ombra-1: 0 1px 2px rgba(18, 28, 33, 0.05), 0 1px 3px rgba(18, 28, 33, 0.04);
  --ombra-2: 0 4px 14px rgba(18, 28, 33, 0.07);
  --ombra-3: 0 18px 44px rgba(18, 28, 33, 0.16);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Base piu' grande del default browser (16px -> ~17px): tutte le
     misure in rem nel resto del foglio di stile scalano di conseguenza,
     per una UI piu' leggibile anche per chi vede meno bene. */
  font-size: 106.25%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text-main);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Niente scorrimento laterale: su telefono basta un grafico o una riga
     larga qualche pixel di troppo per far ballare tutta la pagina. */
  overflow-x: hidden;
}

/* Un'immagine o un canvas non devono mai essere piu' larghi del telefono */
img, canvas, svg, video { max-width: 100%; }

/* Il tocco non e' un mouse: niente ritardo sul doppio tap e niente
   rettangolo grigio di sistema sopra i nostri stati :active. */
a, button, .btn, .prossimo-riga, .kpi-card, .cal-day, .stato-card, .barra-piano, .sess-riga {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { color: var(--teal); }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
  row-gap: 8px;
}

.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--text-main); text-decoration: none; font-size: 1.1rem; }
.topbar-brand img { height: 32px; width: 32px; border-radius: 50%; }
.topbar-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar-nav a {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none;
  color: var(--text-muted);
  padding: 9px 14px;
  border-radius: var(--radius);
  font-size: 0.98rem;
  font-weight: 600;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.topbar-nav a.active, .topbar-nav a:hover { background: var(--teal-wash); color: var(--teal-dark); }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
/* Pallino rosso col numero di abbonamenti scaduti: deve saltare all'occhio
   dal menu, senza dover entrare nella sezione. */
.nav-badge {
  background: var(--danger); color: var(--bianco); border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; line-height: 1; padding: 3px 7px; margin-left: 2px;
}

.bottom-nav {
  display: none; /* diventa una tab bar fissa sotto i 768px, vedi media query in fondo */
}

.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 0.92rem; color: var(--text-muted); }
.avatar-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-main); font-weight: 600; }
.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%; background: var(--teal);
  color: var(--bianco); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; text-transform: uppercase; flex-shrink: 0;
}
.avatar-name { font-size: 0.92rem; }

/* Con viewport-fit=cover il contenuto puo' finire sotto il notch quando il
   telefono e' di lato: i margini laterali di sicurezza si sommano a quelli
   normali qui, nella topbar e nella tab bar in fondo. */
.container {
  max-width: 1000px; margin: 0 auto;
  padding: 18px calc(16px + env(safe-area-inset-right)) 18px calc(16px + env(safe-area-inset-left));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--ombra-1);
}
.card h2 {
  font-size: 0.85rem;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 700;
}
.card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.card-header h2 { margin: 0; }

/* Intestazione di pagina/sezione: titolo grande + sottotitolo + azioni */
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-header h1 { font-size: 1.5rem; margin: 0 0 2px; letter-spacing: -0.01em; }
.page-header .page-sub { color: var(--text-muted); font-size: 0.93rem; margin: 0; }
.page-header-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* KPI: numeri grandi in griglia, per le dashboard. La misura minima e'
   140px e non 160 perche' su un telefono stretto (320px di viewport) con
   160 si scende a una colonna sola e la dashboard diventa un rotolo. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--ombra-1); display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: inherit;
  transition: border-color .14s var(--ease), transform .1s var(--ease), box-shadow .14s var(--ease);
}
a.kpi-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--ombra-2); }
.kpi-valore { font-size: 1.85rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.kpi-etichetta { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-nota { font-size: 0.82rem; color: var(--text-muted); }
.kpi-card.critico .kpi-valore { color: var(--danger); }
/* Ora che l'"attenzione" e' grigia, colorare il numero lo farebbe
   sembrare spento invece che segnalato: il richiamo passa sul bordo. */
.kpi-card.attenzione { border-left: 4px solid var(--warning-forte); }
.kpi-card.positivo .kpi-valore { color: var(--success); }

/* Stato vuoto curato invece di una riga di testo grigia */
.empty-state { text-align: center; padding: 26px 16px; color: var(--text-muted); }
.empty-state svg { width: 40px; height: 40px; color: var(--border-forte); margin-bottom: 8px; }
.empty-state .empty-titolo { font-weight: 700; color: var(--text-main); margin-bottom: 3px; }
.empty-state .empty-testo { font-size: 0.9rem; }

/* Skeleton di caricamento: meglio di uno spinner su liste e card */
.skeleton { background: linear-gradient(90deg, var(--surface-alt) 25%, #F5F8F9 37%, var(--surface-alt) 63%); background-size: 400% 100%; animation: skel 1.3s ease infinite; border-radius: 8px; }
.skeleton-riga { height: 14px; margin: 10px 0; }
.skeleton-riga.corta { width: 45%; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Chip informativa compatta */
.chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-alt); color: var(--text-muted); border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; font-weight: 600; }
.chip.chip-teal { background: var(--teal-wash); color: var(--teal-dark); }
.chip.chip-danger { background: var(--danger-wash); color: var(--danger); }
/* Il grigio dell'"in scadenza" e' vicino a quello delle chip neutre: il
   contorno basta a far capire che qui il grigio e' uno stato, non un
   riempimento qualsiasi. */
.chip.chip-warning { background: var(--warning-wash); color: var(--warning); box-shadow: inset 0 0 0 1px var(--border-forte); }
.chip.chip-success { background: var(--success-wash); color: var(--success); }
/* Abbonamento in corso: blu, per distinguerlo dal teal dell'interfaccia */
.chip.chip-attivo { background: var(--attivo-wash); color: var(--attivo); }

/* Barra di avanzamento generica */
.barra { height: 7px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.barra-fill { height: 100%; background: var(--teal); border-radius: 999px; transition: width .3s var(--ease); }
/* La scheda come foglio: stessa cosa a schermo e stampata. Il personal
   trainer vede l'anteprima dentro l'app e con "Stampa" ottiene il PDF dal
   browser, senza che il server debba generarlo. */
.foglio {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--ombra-1); margin-bottom: 18px;
}
.foglio-testata { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--text-main); padding-bottom: 12px; margin-bottom: 18px; }
.foglio-testata img { height: 44px; width: 44px; border-radius: 50%; }
.foglio-titolo { font-size: 1.4rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.foglio-sottotitolo { color: var(--text-muted); font-size: 0.92rem; margin: 2px 0 0; }
.foglio-meta { text-align: right; font-size: 0.85rem; color: var(--text-muted); }

.foglio-gruppo { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); margin: 20px 0 6px; }
.foglio-gruppo:first-of-type { margin-top: 0; }

table.foglio-tabella { width: 100%; border-collapse: collapse; }
table.foglio-tabella th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1.5px solid var(--border-forte);
}
table.foglio-tabella td { padding: 11px 8px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.95rem; }
table.foglio-tabella tr:last-child td { border-bottom: none; }
table.foglio-tabella .col-num { width: 30px; color: var(--text-muted); font-weight: 700; }
table.foglio-tabella .col-esercizio { font-weight: 700; }
table.foglio-tabella .col-dato { width: 78px; text-align: center; font-variant-numeric: tabular-nums; }
table.foglio-tabella .es-note { font-size: 0.85rem; color: var(--text-muted); font-weight: 400; margin-top: 3px; }
/* Colonna vuota dove segnare il carico a mano sul foglio stampato */
table.foglio-tabella .col-carico { width: 84px; border-left: 1px dashed var(--border-forte); }

.foglio-note { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 0.92rem; }
.foglio-firma { display: none; }

.pdf-incorporato { width: 100%; height: 76vh; height: 76dvh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }

@media (max-width: 640px) {
  .foglio { padding: 16px 14px; }
  .foglio-testata { flex-direction: column; gap: 8px; }
  .foglio-meta { text-align: left; }
  /* Su telefono il carico da scrivere a mano non serve: si toglie la
     colonna per lasciare spazio al nome dell'esercizio. */
  table.foglio-tabella .col-carico { display: none; }
  table.foglio-tabella td, table.foglio-tabella th { padding: 9px 5px; }
  table.foglio-tabella .col-dato { width: 58px; font-size: 0.9rem; }
  .pdf-incorporato { height: 68vh; height: 68dvh; }
}

/* Stampa: resta solo il foglio, senza navigazione ne' bottoni. */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .topbar, .bottom-nav, .toast-container, .page-header-azioni,
  [data-kinesis-install], .vista-pt-banner, .no-stampa { display: none !important; }
  .container { padding: 0; max-width: none; }
  .foglio { border: none; box-shadow: none; padding: 0; margin: 0; }
  .foglio-gruppo { break-after: avoid; }
  table.foglio-tabella tr { break-inside: avoid; }
  table.foglio-tabella .col-carico { display: table-cell; }
  .foglio-firma { display: block; margin-top: 36px; font-size: 0.85rem; color: #555; }
}

/* Grafici su canvas. Su telefono si alzano invece di stringersi: lo
   spazio verticale si recupera scorrendo, quello orizzontale no, e una
   colonna alta si legge anche quando e' larga pochi pixel. */
.grafico { display: block; width: 100%; height: 150px; }
.grafico.alto { height: 230px; }
@media (max-width: 640px) {
  .grafico { height: 170px; }
  .grafico.alto { height: 260px; }
}

/* Legenda dei colori sopra un grafico */
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }

.barra-fill.attivo { background: var(--attivo-forte); }
.barra-fill.attenzione { background: var(--warning-forte); }
.barra-fill.critico { background: var(--danger); }

.form-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.form-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.form-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 9px;
}

.prossimo-riga {
  display: flex; justify-content: space-between; align-items: center; padding: 13px 10px;
  border-bottom: 1px solid var(--border); cursor: pointer; gap: 10px; border-radius: 8px;
  transition: background .12s var(--ease), transform .12s var(--ease);
  margin: 0 -10px;
}
.prossimo-riga:last-child { border-bottom: none; }
.prossimo-riga:hover { background: var(--surface-alt); }
.prossimo-riga:active { transform: scale(0.99); }
.prossimo-data { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.prossimo-ora { font-weight: 700; font-size: 1.05rem; }

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  padding: 12px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--surface-alt); border-color: var(--border-forte); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--teal); color: var(--bianco); border-color: var(--teal); box-shadow: 0 2px 10px rgba(0, 105, 126, 0.28); }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn-danger:hover { background: var(--danger-wash); }
.btn-link-muted { background: none; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; padding: 6px 0; font-size: 1rem; font-weight: 600; }
.btn-link-muted:hover { color: var(--text-main); }
.btn-sm { padding: 8px 14px; font-size: 0.9rem; }
.btn-block { width: 100%; }
/* Su schermo tattile anche i bottoni piccoli devono restare presi al
   primo colpo: 44px e' la misura sotto la quale si sbaglia bersaglio. */
@media (pointer: coarse) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 40px; }
}

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 0.92rem; color: var(--text-main); font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text-main);
  transition: border-color .15s var(--ease);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash);
}
.form-row { display: flex; gap: 10px; }
.form-row > .form-group { flex: 1; }

.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.badge-confermato { background: var(--teal-wash); color: var(--teal-dark); }
.badge-completato { background: var(--success-wash); color: var(--success); }
.badge-annullato { background: var(--surface-alt); color: var(--text-muted); }
.badge-no_show { background: var(--danger-wash); color: var(--danger); }
.badge-pagato { background: var(--success-wash); color: var(--success); }
.badge-non-pagato { background: var(--warning-wash); color: var(--warning); }
.badge-in_attesa { background: var(--warning-wash); color: var(--warning); }
.badge-nxr { display: inline-block; background: var(--teal-wash); color: var(--teal-dark); font-weight: 700; border-radius: 6px; padding: 1px 8px; margin-right: 6px; font-size: 0.85rem; }

.progressione-legenda { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 0.85rem; }
.progressione-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.progressione-legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--text-main); color: var(--bianco);
  padding: 12px 18px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: toast-in .2s var(--ease);
}
.toast.err { background: var(--danger); }
.toast.uscita { animation: toast-out .2s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 26, 29, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
  opacity: 1; transition: opacity .16s var(--ease);
}
.modal-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  /* Su iOS 90vh comprende la barra degli indirizzi, quindi il fondo della
     finestra finisce sotto il bordo visibile: dvh misura l'altezza che si
     vede davvero. La riga vh sopra resta per i browser che non lo hanno. */
  max-height: 90dvh;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  transform: scale(1) translateY(0); transition: transform .18s var(--ease);
}
.modal-overlay.hidden .modal { transform: scale(0.95) translateY(6px); }
.modal h3 { margin-top: 0; padding-right: 24px; font-size: 1.2rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-close-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.modal-close-x:hover { background: var(--border); color: var(--text-main); }

/* Agenda: griglia mensile */
.agenda-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.agenda-toolbar-nav { display: flex; align-items: center; gap: 10px; }
.agenda-toolbar-azioni { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agenda-mese-label { font-weight: 700; font-size: 1.1rem; min-width: 160px; text-align: center; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day {
  background: var(--surface); border-radius: 8px; padding: 6px; min-height: 64px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color .12s var(--ease), transform .1s var(--ease);
}
.cal-day:hover { border-color: var(--teal); transform: translateY(-1px); }
.cal-day.altro-mese { opacity: 0.45; }
.cal-day.oggi { border-color: var(--teal); border-width: 2px; }
.cal-day.bloccato { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--surface-alt) 6px, var(--surface-alt) 12px); }
.cal-day-num { font-size: 0.86rem; font-weight: 700; }
.cal-ev-indicatore {
  align-self: flex-start;
  background: var(--teal-wash);
  color: var(--teal-dark);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Agenda: switch mese/settimana + vista settimanale */
.agenda-vista-switch { display: flex; gap: 4px; background: var(--surface-alt); border-radius: 8px; padding: 3px; }
.agenda-vista-switch .btn { border: none; background: transparent; box-shadow: none; padding: 6px 12px; }
.agenda-vista-switch .btn.btn-vista-attiva { background: var(--surface); color: var(--teal-dark); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.cal-settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.settimana-giorno { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-height: 110px; display: flex; flex-direction: column; gap: 6px; }
.settimana-giorno.oggi { border-color: var(--teal); border-width: 2px; }
.settimana-giorno-header { font-weight: 700; font-size: 0.82rem; cursor: pointer; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.settimana-vuoto { color: var(--text-muted); font-size: 0.78rem; }
.settimana-evento { background: var(--teal-wash); color: var(--teal-dark); border-radius: 6px; padding: 4px 6px; font-size: 0.78rem; line-height: 1.3; }
.settimana-evento.bloccato { background: var(--surface-alt); color: var(--text-muted); }
@media (max-width: 720px) {
  .cal-settimana { grid-template-columns: repeat(2, 1fr); }
}
.cal-ev-indicatore.bloccato { background: var(--surface-alt); color: var(--text-muted); }

.popup-giorno-riga {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; border-radius: 8px; transition: background .12s var(--ease);
}
.popup-giorno-riga:hover { background: var(--surface-alt); }
.popup-giorno-riga:last-child { border-bottom: none; }

table.tabella-semplice { width: 100%; border-collapse: collapse; }
table.tabella-semplice th, table.tabella-semplice td {
  text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--border); font-size: 0.96rem;
}
table.tabella-semplice th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; width: 40%; }
.table-responsive { overflow-x: auto; }

.login-wrap {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(180deg, #EAF1F3 0%, var(--bg) 100%);
}
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 32px;
  width: 100%; max-width: 380px; text-align: center;
  box-shadow: 0 16px 40px rgba(20, 30, 35, 0.12);
  animation: login-in .3s var(--ease);
}
@keyframes login-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.login-card img.logo { height: 80px; width: 80px; border-radius: 50%; margin-bottom: 16px; box-shadow: 0 0 0 5px var(--teal-wash); }
.login-card h1 { color: var(--text-main); font-size: 1.35rem; margin: 0 0 22px; letter-spacing: 0.01em; }
.login-card .form-group { text-align: left; }
.login-hint { color: var(--text-muted); font-size: 0.9rem; }

.avviso-box { background: var(--warning-wash); border: 1px solid var(--border-forte); border-radius: 8px; padding: 12px 14px; font-size: 0.92rem; margin-bottom: 12px; color: var(--text-main); }

[data-kinesis-install="banner"] {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--teal-wash); border-bottom: 1px solid var(--border);
  padding: 10px 16px; font-size: 0.92rem;
}
[data-kinesis-install="banner"] .install-testo { flex: 1; min-width: 200px; color: var(--teal-dark); font-weight: 600; }
[data-kinesis-install="banner"] .install-banner-chiudi {
  background: none; border: none; color: var(--teal-dark); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
[data-kinesis-install="completo"] .install-testo { color: var(--text-main); margin-bottom: 12px; }

.vista-pt-banner {
  background: var(--teal); color: var(--bianco); text-align: center;
  padding: 10px 12px; font-size: 0.92rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.vista-pt-banner button { background: rgba(255,255,255,0.22); border: none; color: var(--bianco); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.86rem; font-weight: 600; }

/* Stato di caricamento generico */
.spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--teal);
  animation: spin .7s linear infinite; vertical-align: middle; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .topbar-brand .brand-text { display: none; }
  .container { padding: 12px calc(10px + env(safe-area-inset-right)) 12px calc(10px + env(safe-area-inset-left)); }
  /* Meno imbottitura nelle schede: su 360px di schermo ogni pixel
     recuperato ai bordi va al contenuto, che e' quello che si legge. */
  .card { padding: 16px 14px; margin-bottom: 14px; }
  .prossimo-riga { margin: 0 -8px; padding: 13px 8px; }
  .cal-day { min-height: 52px; padding: 4px; }
  .page-header h1 { font-size: 1.3rem; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-overlay .modal {
    max-width: 100%; border-radius: 16px 16px 0 0;
    max-height: 92vh; max-height: 92dvh;
    /* Sull'iPhone l'ultimo bottone finirebbe sotto la barra di sistema */
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .modal-overlay.hidden .modal { transform: translateY(16px); }
  .form-row { flex-direction: column; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .card-header { flex-direction: column; align-items: stretch; }
  .card-header > div { display: flex; flex-direction: column; gap: 8px; }
  /* Le azioni in testa alla pagina, in fila e larghe uguali invece che
     appiccicate a sinistra su una riga mezza vuota. */
  .page-header { align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .page-header-azioni { width: 100%; }
  .page-header-azioni > .btn { flex: 1; }
  .agenda-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .agenda-toolbar-nav { justify-content: space-between; }
  .agenda-toolbar-azioni { justify-content: center; }
  .agenda-toolbar-azioni .btn-primary { width: 100%; order: 3; }
}

/* Telefono girato di lato: restano poco piu' di 300px di altezza. Con la
   topbar appiccicata in alto e la tab bar fissa in basso il contenuto si
   riduceva a una fessura, quindi qui la topbar scorre via con la pagina. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .topbar { position: static; }
}

/* Sotto i 400px (iPhone SE e simili) il nome accanto all'avatar spinge la
   topbar su due righe: resta l'iniziale, il nome per esteso e' comunque
   nella pagina Account. */
@media (max-width: 400px) {
  .avatar-name { display: none; }
  .topbar { padding: 10px 12px; }
}

/* Navigazione: sotto i 768px la nav primaria si sposta in una tab bar
   fissa in fondo allo schermo (pattern da app nativa) invece di restare
   nella topbar, che si affollava rapidamente (fino a 4 voci lato cliente
   + avatar + nome + Esci sulla stessa riga). Vedi templates/_nav_links.html,
   incluso sia nella topbar — nascosta qui sotto — sia nella bottom-nav,
   cosi' le due navigazioni restano sempre sincronizzate. */
@media (max-width: 768px) {
  .topbar-nav { display: none; }
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 4px calc(4px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));
    justify-content: space-around;
    z-index: 60;
    box-shadow: 0 -2px 10px rgba(20, 30, 35, 0.06);
  }
  .bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 4px; border-radius: 10px; flex: 1; min-width: 0;
    text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.68rem;
    transition: background .15s var(--ease), color .15s var(--ease);
  }
  .bottom-nav a .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bottom-nav a.active { background: var(--teal-wash); color: var(--teal-dark); }
  .bottom-nav .nav-icon { width: 22px; height: 22px; }
  /* Nella tab bar il badge diventa un pallino sopra l'icona, come nelle
     app native, invece di una terza riga che sballerebbe l'allineamento. */
  .bottom-nav a { position: relative; }
  .bottom-nav .nav-badge { position: absolute; top: 2px; right: 50%; transform: translateX(22px); margin: 0; }
  /* Spazio per non far finire l'ultimo elemento della pagina sotto la tab
     bar fissa. Regola volutamente dopo il blocco 640px sopra, cosi' vince
     nella cascata anche sui telefoni piu' stretti (stessa specificita',
     l'ultima dichiarazione in ordine di sorgente prevale). */
  .container { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* Stesso motivo per i messaggi di conferma: a 20px dal fondo finivano
     dietro la tab bar, cioe' proprio sopra il bottone appena premuto. */
  .toast-container { bottom: calc(78px + env(safe-area-inset-bottom)); width: 100%; padding: 0 16px; }
  .toast { max-width: 100%; }
}

/* ==========================================================================
   BRAND AL CANTIERE — in coda a style.css (stesso schema di ET Club, da cui
   l'app e' stata copiata). Le regole di brand si modificano qui e si
   ricopiano in fondo a style.css (vedi CLAUDE.md).
   ========================================================================== */

/* Font del sito palestraalcantiere.it, self-hosted: Oswald per titoli e
   marchio, Roboto per il testo. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/static/fonts/oswald-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/roboto-latin.woff2') format('woff2');
}

/* Colori sociali: nero + arancione del logo (#F54D02). I nomi delle
   variabili restano quelli di Kinesis (--teal*) per non toccare il codice
   condiviso: qui cambiano solo i valori. */
:root {
  --bg: #F4F3F2;
  --surface: #FFFFFF;
  --surface-alt: #EFEDEB;
  --border: #E0DCD9;
  --border-forte: #C9C3BF;
  --teal: #F54D02;
  --teal-dark: #C23C00;
  --teal-wash: #FEEBE1;
  --text-main: #161412;
  --text-muted: #5C5651;
  /* Stati abbonamento come ET Club: attivo nero, in scadenza grigio,
     scaduto rosso. L'arancione resta al marchio (navigazione e azioni),
     cosi' "in scadenza" non si confonde con un bottone. */
  --attivo: #161412;
  --attivo-forte: #161412;
  --attivo-wash: #ECEAE8;
  --warning: #4F4F4F;
  --warning-forte: #9A9A9A;
  --warning-wash: #E6E6E6;
  --ombra-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  --ombra-2: 0 4px 14px rgba(0, 0, 0, 0.08);
  --ombra-3: 0 18px 44px rgba(0, 0, 0, 0.18);
}

body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1, h2, .page-header h1, .card h2, .topbar-brand .brand-text {
  font-family: 'Oswald', 'Roboto', sans-serif; font-weight: 600; letter-spacing: 0.01em;
}
.page-header h1 { text-transform: uppercase; }
/* testo arancione su bianco: tono piu' scuro per restare leggibile */
a { color: var(--teal-dark); }
.skeleton { background-image: linear-gradient(90deg, var(--surface-alt) 25%, #F8F7F6 37%, var(--surface-alt) 63%); }
.btn-primary { box-shadow: 0 2px 8px rgba(245, 77, 2, 0.28); }

/* Barra in alto nera come l'intestazione del sito, marchio in Oswald */
.topbar { background: #0E0D0C; border-bottom: 3px solid var(--teal); }
.topbar-brand { color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.04em; }
.topbar-nav a { color: #C9C4C0; }
.topbar-nav a.active, .topbar-nav a:hover { background: rgba(245, 77, 2, 0.16); color: #FF7A3D; }
.topbar-right { color: #C9C4C0; }
.topbar .avatar-link { color: #FFFFFF; }
.topbar .btn-link-muted { color: #C9C4C0; }

/* Login: foto della palestra scurita + logo tondo su fascia nera */
.login-wrap {
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.82) 100%),
              url('/static/img/foto/sala.jpg') center 30% / cover no-repeat #111;
}
.login-card { border: none; border-top: 4px solid var(--teal); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.login-card img.logo {
  display: block; box-sizing: content-box;
  width: 150px; height: 150px; max-width: none;
  margin: -32px -32px 22px; padding: 18px calc(50% - 75px + 32px) 16px;
  background: #000; border-radius: 14px 14px 0 0; box-shadow: none;
}
.login-card h1 { font-family: 'Oswald', 'Roboto', sans-serif; font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; }
.login-wrap [data-kinesis-install="completo"] { background: rgba(255,255,255,0.94); border-radius: 14px; padding: 14px 16px; }

/* Barre orizzontali per tipo di abbonamento (pagina Abbonamenti e Report):
   un nome lungo come "Percorso Gold (35 allenamenti)" si legge per intero,
   cosa impossibile con le colonne verticali. */
.barra-piano { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; margin: 0 -10px; }
.barra-piano:last-child { border-bottom: none; }
.barra-piano:hover { background: var(--surface-alt); }
.barra-piano-nome { flex: 0 0 34%; font-weight: 700; font-size: 0.95rem; }
.barra-piano-traccia { flex: 1; display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--surface-alt); }
.barra-seg { height: 100%; }
.barra-seg.ok { background: var(--attivo-forte); }
.barra-seg.scadenza { background: var(--warning-forte); }
.barra-seg.scaduti { background: var(--danger-forte); }
.barra-piano-numeri { flex: 0 0 auto; font-weight: 800; font-size: 1.05rem; min-width: 34px; text-align: right; }

@media (max-width: 560px) {
  /* Su telefono il nome del piano prende tutta la riga e la barra col
     numero scende sotto: affiancati, alla barra restavano una manciata
     di pixel e non si capiva piu' quale piano fosse il piu' grosso. */
  .barra-piano { flex-wrap: wrap; row-gap: 8px; }
  .barra-piano-nome { flex: 1 1 100%; }
  .barra-piano-traccia { order: 2; }
  .barra-piano-numeri { order: 3; font-size: 1.15rem; }
}