@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ─── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Token LIGHT (default) ────────────────────────────────────────────────── */
:root {
  --bg-app:         #f4f6fa;
  --bg-surface:     #ffffff;
  --bg-raised:      #f9fafb;
  --bg-header:      #ffffff;
  --bg-nav:         #ffffff;
  --bg-tab:         #ffffff;
  --bg-map:         #dce8f5;
  --bg-code:        #f4f6fa;
  --bg-input:       #f4f6fa;
  --bg-settings:    #f4f6fa;
  --bg-toggle:      #e2e6ef;
  --bg-toggle-on:   #185fa5;

  --txt-primary:    #0c1f35;
  --txt-secondary:  #5a7390;
  --txt-muted:      #98afc4;
  --txt-accent:     #185fa5;

  --border:         #e2e6ef;
  --border-strong:  #c8d4e4;

  --accent:         #185fa5;
  --accent-hover:   #0c447c;

  --c-rosso-bg:      #fcebeb;
  --c-rosso-txt:     #791f1f;
  --c-rosso-dot:     #e24b4a;
  --c-rosso-num:     #a32d2d;
  --c-arancione-bg:  #faeeda;
  --c-arancione-txt: #633806;
  --c-arancione-dot: #ef9f27;
  --c-arancione-num: #854f0b;
  --c-verde-bg:      #eaf3de;
  --c-verde-txt:     #27500a;
  --c-verde-dot:     #639922;
  --c-verde-num:     #3b6d11;
  --c-bianco-bg:     #f4f6fa;
  --c-bianco-txt:    #444441;
  --c-bianco-dot:    #888780;
  --c-bianco-num:    #5f5e5a;
  --c-azzurro-bg:    #e6f4fb;
  --c-azzurro-txt:   #0a3d5c;
  --c-azzurro-dot:   #2196C9;
  --c-azzurro-num:   #0e5a8a;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font:      'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* ─── Token DARK (automatico da OS) ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app:         #0d1117;
    --bg-surface:     #0f1e30;
    --bg-raised:      #162336;
    --bg-header:      #0f2744;
    --bg-nav:         #0a1929;
    --bg-tab:         #0a1929;
    --bg-map:         #0d1f35;
    --bg-code:        #0a1421;
    --bg-input:       #0f1e30;
    --bg-settings:    #0d1117;
    --bg-toggle:      #1d2d44;
    --bg-toggle-on:   #1a73e8;
    --txt-primary:    #d0dff0;
    --txt-secondary:  #6b85a8;
    --txt-muted:      #2d4a68;
    --txt-nav:        #8daec8;
    --txt-accent:     #4a9eff;
    --border:         #1d2d44;
    --border-strong:  #2a3d56;
    --accent:         #1a73e8;
    --accent-hover:   #4a9eff;
    --c-rosso-bg:      #2a0f0f; --c-rosso-txt:     #f09595; --c-rosso-num:     #f09595;
    --c-arancione-bg:  #2a1a08; --c-arancione-txt: #fac775; --c-arancione-num: #fac775;
    --c-verde-bg:      #0d2010; --c-verde-txt:     #c0dd97; --c-verde-num:     #c0dd97;
    --c-bianco-bg:     #1a2535; --c-bianco-txt:    #8da4be; --c-bianco-num:    #8da4be;
    --c-azzurro-bg:    #0a1f30; --c-azzurro-txt:   #7dd3f0; --c-azzurro-num:   #7dd3f0;
    --shadow-card: none;
    --bg-pediatrico:       rgba(153,53,86,0.18);
    --border-pediatrico:   rgba(212,83,126,0.30);
    --bg-pediatrico-hover: rgba(153,53,86,0.26);
    --border-pediatrico-hover: rgba(212,83,126,0.50);
  }
}

/* ─── Token DARK (forzato manualmente) ────────────────────────────────────── */
[data-theme="dark"] {
  --bg-app:         #0d1117;
  --bg-surface:     #0f1e30;
  --bg-raised:      #162336;
  --bg-header:      #0f2744;
  --bg-nav:         #0a1929;
  --bg-tab:         #0a1929;
  --bg-map:         #0d1f35;
  --bg-code:        #0a1421;
  --bg-input:       #0f1e30;
  --bg-settings:    #0d1117;
  --bg-toggle:      #1d2d44;
  --bg-toggle-on:   #1a73e8;
  --txt-primary:    #d0dff0;
  --txt-secondary:  #6b85a8;
  --txt-muted:      #2d4a68;
  --txt-nav:        #8daec8;
  --txt-accent:     #4a9eff;
  --border:         #1d2d44;
  --border-strong:  #2a3d56;
  --accent:         #1a73e8;
  --accent-hover:   #4a9eff;
  --c-rosso-bg:      #2a0f0f; --c-rosso-txt:     #f09595; --c-rosso-num:     #f09595;
  --c-arancione-bg:  #2a1a08; --c-arancione-txt: #fac775; --c-arancione-num: #fac775;
  --c-verde-bg:      #0d2010; --c-verde-txt:     #c0dd97; --c-verde-num:     #c0dd97;
  --c-bianco-bg:     #1a2535; --c-bianco-txt:    #8da4be; --c-bianco-num:    #8da4be;
  --c-azzurro-bg:    #0a1f30; --c-azzurro-txt:   #7dd3f0; --c-azzurro-num:   #7dd3f0;
  --bg-pediatrico:       rgba(153,53,86,0.18);
  --border-pediatrico:   rgba(212,83,126,0.30);
  --bg-pediatrico-hover: rgba(153,53,86,0.26);
  --border-pediatrico-hover: rgba(212,83,126,0.50);
}

/* ─── Token LIGHT (forzato manualmente) ───────────────────────────────────── */
[data-theme="light"] {
  --bg-app: #f4f6fa; --bg-surface: #ffffff; --bg-raised: #f9fafb;
  --bg-header: #ffffff; --bg-nav: #ffffff; --bg-tab: #ffffff;
  --bg-map: #dce8f5; --bg-code: #f4f6fa; --bg-input: #f4f6fa;
  --bg-settings: #f4f6fa; --bg-toggle: #e2e6ef; --bg-toggle-on: #185fa5;
  --txt-primary: #0c1f35; --txt-secondary: #5a7390; --txt-muted: #98afc4; --txt-accent: #185fa5;
  --border: #e2e6ef; --border-strong: #c8d4e4;
  --accent: #185fa5; --accent-hover: #0c447c;
  --c-rosso-bg: #fcebeb; --c-rosso-txt: #791f1f; --c-rosso-num: #a32d2d;
  --c-arancione-bg: #faeeda; --c-arancione-txt: #633806; --c-arancione-num: #854f0b;
  --c-verde-bg: #eaf3de; --c-verde-txt: #27500a; --c-verde-num: #3b6d11;
  --c-bianco-bg: #f4f6fa; --c-bianco-txt: #444441; --c-bianco-num: #5f5e5a;
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */
html { font-size: 24px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font);
  background: var(--bg-app);
  color: var(--txt-primary);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}

/* ─── Layout app ───────────────────────────────────────────────────────────── */
#app { max-width: 480px; margin: 0 auto; }

/* ─── Header mobile: fixed in cima ────────────────────────────────────────── */
.app-header.mobile-only {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  max-width: 480px;
  margin: 0 auto;
}

/* ─── Main content: spazio per header e nav ────────────────────────────────── */
.main-content.mobile-only {
  display: block;
  margin-top: 100px;
  margin-bottom: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: calc(100dvh - 180px);
}

/* ─── Bottom nav: fixed in fondo ───────────────────────────────────────────── */
.bottom-nav.mobile-only {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  max-width: 480px;
  margin: 0 auto;
}

/* ─── Header ───────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: calc(16px + var(--safe-top)) 20px 14px;
  flex-shrink: 0; z-index: 10;
  transition: background .25s, border-color .25s;
}
.header-row { display: flex; align-items: center; justify-content: space-between; }
.header-brand { display: flex; align-items: center; gap: 14px; }
.brand-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}
.brand-text h1 { font-size: 26px; font-weight: 700; color: var(--txt-primary); line-height: 1; }
.brand-text p  { font-size: 15px; color: var(--txt-secondary); margin-top: 4px; white-space: nowrap; }
.brand-text .header-aggiornato {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
}
.brand-text .header-aggiornato .last-update {
  font-size: 14px; font-weight: 400; color: var(--txt-primary);
  font-family: var(--font);
}
.live-indicator { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--txt-secondary); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-verde-dot); }
.live-dot.pulse { animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* ─── Tab bar superiore — nascosta, navigazione solo dal bottom nav ─────────── */
.tab-bar { display: none; }

/* ─── Main content ─────────────────────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Mappa ────────────────────────────────────────────────────────────────── */
#mappa-container { height: calc(100dvh - 120px); min-height: 400px; }
#mappa { width: 100%; height: 100%; }
.leaflet-container { background: var(--bg-map); }
.leaflet-popup-content-wrapper {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); color: var(--txt-primary);
}
.leaflet-popup-tip { background: var(--bg-surface); }
.leaflet-popup-content { margin: 12px 14px; }

/* ─── Filtri ───────────────────────────────────────────────────────────────── */
.filtri-bar {
  display: flex; gap: 8px; padding: 12px 14px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.filtri-bar::-webkit-scrollbar { display: none; }
.filtro-btn {
  padding: 7px 16px; border-radius: 20px;
  border: 1px solid var(--border); background: none;
  color: var(--txt-secondary); font-size: 14px;
  font-family: var(--font); cursor: pointer; white-space: nowrap;
  transition: all .2s;
}
.filtro-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Card lista ───────────────────────────────────────────────────────────── */
#lista-container, #vicini-container { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ps-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, background .25s;
  animation: fadeUp .3s ease both;
}
.ps-card:hover, .ps-card:focus { border-color: var(--border-strong); outline: none; }
.ps-card.card-pediatrico {
  background: var(--bg-pediatrico, rgba(237,147,177,0.10));
  border-color: var(--border-pediatrico, rgba(212,83,126,0.25));
}
.ps-card.card-pediatrico:hover, .ps-card.card-pediatrico:focus {
  background: var(--bg-pediatrico-hover, rgba(237,147,177,0.18));
  border-color: var(--border-pediatrico-hover, rgba(212,83,126,0.45));
}
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card-citta { font-size: 22px; font-weight: 700; color: var(--txt-primary); line-height: 1.1; }
.card-nome  { font-size: 12px; font-weight: 400; color: var(--txt-secondary); margin-top: 3px; line-height: 1.3; }
.card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.card-totale { font-size: 12px; color: var(--txt-muted); }

/* Cerchio totale pazienti */
.card-totale-circle {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.card-totale-circle .ctc-num { font-size: 26px; font-weight: 700; }

.card-totale-wrap {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.card-totale-wrap svg { color: var(--txt-secondary); }

/* ─── Badge ────────────────────────────────────────────────────────────────── */
.badge { font-size: 18px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.badge-small { font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 20px; }
.badge-pediatrico { background: rgba(212,83,126,0.22); color: #993556; border: 1px solid rgba(212,83,126,0.4); font-size: 11px; font-weight: 600; margin-top: 6px; display: inline-block; }
.distanza { font-size: 12px; background: var(--bg-code); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--txt-secondary); }

/* ─── Codici colore ────────────────────────────────────────────────────────── */
.codici-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }

.codice {
  border-radius: var(--radius-md);
  padding: 14px 12px;
  display: flex; flex-direction: row;
  align-items: center; gap: 12px;
  text-align: left;
}

/* Sfondo pieno per ogni codice */
.codice-rosso     { background: var(--c-rosso-dot); }
.codice-arancione { background: var(--c-arancione-dot); }
.codice-azzurro   { background: var(--c-azzurro-dot); }
.codice-verde     { background: var(--c-verde-dot); }
.codice-bianco    { background: #f5f0e8; border: 1px solid #d4c9b0; }

.codice-dot {
  width: 0; height: 0; /* nascosto — il colore lo fa già lo sfondo */
  display: none;
}

/* Pallino laterale bianco come accento visivo */
.codice-icon {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

.codice-info { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.codice-num {
  font-size: 28px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
  color: #ffffff;
}
.codice-label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: rgba(255,255,255,0.85);
}
.codice-attesa {
  font-size: 12px; color: rgba(255,255,255,0.75);
  font-family: var(--font); margin-top: 2px;
}
.codice-desc {
  font-size: 11px; color: rgba(255,255,255,0.65);
  line-height: 1.4; margin-top: 4px; display: none;
}

/* Bianco: testo scuro su sfondo panna */
.codice-bianco .codice-num    { color: #3a2e1a; }
.codice-bianco .codice-label  { color: rgba(58,46,26,0.8); }
.codice-bianco .codice-attesa { color: rgba(58,46,26,0.65); }
.codice-bianco .codice-desc   { color: rgba(58,46,26,0.60); }
.codice-bianco .codice-icon   { background: rgba(58,46,26,0.2); }

/* In dark mode il bianco diventa grigio scuro */
[data-theme="dark"] .codice-bianco { background: #2a2520; border-color: #4a3e2a; }
[data-theme="dark"] .codice-bianco .codice-num    { color: #e8dcc8; }
[data-theme="dark"] .codice-bianco .codice-label  { color: rgba(232,220,200,0.8); }
[data-theme="dark"] .codice-bianco .codice-attesa { color: rgba(232,220,200,0.65); }
[data-theme="dark"] .codice-bianco .codice-desc   { color: rgba(232,220,200,0.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .codice-bianco { background: #2a2520; border-color: #4a3e2a; }
  :root:not([data-theme="light"]) .codice-bianco .codice-num    { color: #e8dcc8; }
  :root:not([data-theme="light"]) .codice-bianco .codice-label  { color: rgba(232,220,200,0.8); }
  :root:not([data-theme="light"]) .codice-bianco .codice-attesa { color: rgba(232,220,200,0.65); }
  :root:not([data-theme="light"]) .codice-bianco .codice-desc   { color: rgba(232,220,200,0.55); }
}

.codici-grid.dettaglio-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.codici-grid.dettaglio-grid .codice {
  padding: 18px 16px;
  align-items: flex-start;
}
.codici-grid.dettaglio-grid .codice-num   { font-size: 24px; }
.codici-grid.dettaglio-grid .codice-label { font-size: 15px; margin-top: 2px; }
.codici-grid.dettaglio-grid .codice-desc  {
  display: block;
  font-size: 18px;
  margin-top: 6px;
}
.codici-grid.dettaglio-grid .codice-attesa {
  font-size: 16px;
  font-weight: 400;
  margin-top: 6px;
  background-color: #185fa5;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 5px;
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
}
.codici-grid.dettaglio-grid .codice-info  { gap: 2px; display: flex; flex-direction: column; align-items: flex-start; }

/* Codice bianco nel dettaglio: attesa con sfondo blu e testo bianco */
.codici-grid.dettaglio-grid .codice-bianco .codice-attesa {
  background-color: #185fa5;
  color: #ffffff;
}

/* ─── Popup mappa ──────────────────────────────────────────────────────────── */
.popup-card { min-width: 180px; }
.popup-card strong { font-size: 13px; color: var(--txt-primary); display: block; margin-bottom: 2px; }
.popup-citta  { font-size: 11px; color: var(--txt-secondary); margin-bottom: 8px; }
.popup-codici { display: flex; gap: 6px; margin: 8px 0 4px; }
.pc { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.pc.rosso     { background: var(--c-rosso-bg);     color: var(--c-rosso-txt); }
.pc.arancione { background: var(--c-arancione-bg); color: var(--c-arancione-txt); }
.pc.azzurro   { background: var(--c-azzurro-bg);   color: var(--c-azzurro-txt); }
.pc.verde     { background: var(--c-verde-bg);     color: var(--c-verde-txt); }
.pc.bianco    { background: var(--c-bianco-bg);    color: var(--c-bianco-txt); }
.popup-totale { font-size: 11px; color: var(--txt-secondary); }

/* ─── GPS prompt ───────────────────────────────────────────────────────────── */
.gps-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 30px; text-align: center; gap: 12px; }
.gps-icon { width: 56px; height: 56px; background: var(--bg-code); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.gps-icon svg { width: 28px; height: 28px; }
.gps-prompt h3 { font-size: 16px; font-weight: 600; color: var(--txt-primary); }
.gps-prompt p  { font-size: 13px; color: var(--txt-secondary); line-height: 1.5; }
.btn-gps { background: var(--accent); color: #fff; border: none; border-radius: 24px; padding: 12px 28px; font-size: 14px; font-family: var(--font); font-weight: 500; cursor: pointer; margin-top: 8px; transition: background .2s; }
.btn-gps:hover { background: var(--accent-hover); }

/* ─── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton { pointer-events: none; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0%,100%{opacity:1} 50%{opacity:.5} }
.skel-line { background: var(--bg-code); border-radius: var(--radius-sm); margin-bottom: 8px; }
.skel-title { height: 14px; width: 70%; }
.skel-sub   { height: 11px; width: 40%; }
.skel-codici { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 12px; }
.skel-box { height: 56px; background: var(--bg-raised); border-radius: var(--radius-sm); }

/* ─── Errore / vuoto ───────────────────────────────────────────────────────── */
.empty-state { text-align: center; color: var(--txt-muted); padding: 40px 20px; font-size: 14px; }
.error-state { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; gap: 12px; text-align: center; }
.error-icon { width: 40px; height: 40px; background: var(--c-rosso-bg); color: var(--c-rosso-txt); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.error-state p { font-size: 13px; color: var(--txt-secondary); }
.btn-retry { background: none; border: 1px solid var(--border); color: var(--txt-secondary); border-radius: 20px; padding: 8px 20px; font-size: 13px; font-family: var(--font); cursor: pointer; }

/* ─── Update bar ───────────────────────────────────────────────────────────── */
/* ─── Nav items ────────────────────────────────────────────────────────────── */
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; border: none; background: none; color: var(--txt-nav, var(--txt-muted)); font-size: 13px; font-family: var(--font); cursor: pointer; transition: color .2s; }
.nav-item svg { width: 28px; height: 28px; }
.nav-item.active { color: var(--accent); }
.nav-item:hover:not(.active) { color: var(--txt-secondary); }

/* ─── IMPOSTAZIONI ─────────────────────────────────────────────────────────── */
#panel-impostazioni { background: var(--bg-settings); min-height: 100%; padding-bottom: 20px; }

.settings-section { padding: 20px 16px 0; }

.settings-section-title {
  font-size: 13px; font-weight: 600; color: var(--txt-muted);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 8px; padding: 0 4px;
}

.settings-group {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}

.settings-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-left { display: flex; align-items: center; gap: 12px; }

.settings-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.si-blue  { background: rgba(24,95,165,.12); }
.si-amber { background: rgba(239,159,39,.12); }
.si-green { background: rgba(99,153,34,.12); }
.si-red   { background: rgba(226,75,74,.12); }
.si-gray  { background: var(--bg-code); }
.settings-icon svg { width: 18px; height: 18px; }

.settings-label { font-size: 16px; color: var(--txt-primary); font-weight: 500; }
.settings-desc  { font-size: 13px; color: var(--txt-secondary); margin-top: 1px; }

/* Toggle switch */
.toggle { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: var(--bg-toggle); border-radius: 26px; cursor: pointer; transition: background .25s; }
.toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .25s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle input:checked + .toggle-slider { background: var(--bg-toggle-on); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* Tema selector a 3 opzioni */
.theme-selector { display: flex; gap: 4px; }
.theme-opt {
  padding: 5px 10px; border-radius: 20px;
  border: 1px solid var(--border); background: none;
  color: var(--txt-secondary); font-size: 11px;
  font-family: var(--font); cursor: pointer; white-space: nowrap;
  transition: all .2s;
}
.theme-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }

/* Info app */
.settings-info { padding: 24px 16px; text-align: center; }
.settings-info p { font-size: 14px; color: var(--txt-muted); line-height: 1.6; }
.settings-version { font-size: 13px; color: var(--txt-muted); margin-top: 4px; font-family: var(--font); }

/* ─── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ─── DETTAGLIO OSPEDALE ───────────────────────────────────────────────────── */
.dettaglio-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.dettaglio-panel {
  background: var(--bg-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%; max-width: 480px; margin: 0 auto;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slideUp .3s cubic-bezier(.22,1,.36,1);
  position: relative;
}
@keyframes slideUp { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }

.dettaglio-panel.detail-pediatrico {
  background: #fdf0f4;
}
[data-theme="dark"] .dettaglio-panel.detail-pediatrico {
  background: #2a1220;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dettaglio-panel.detail-pediatrico {
    background: #2a1220;
  }
}

/* Header dettaglio */
.dettaglio-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-surface);
}
.dettaglio-panel.detail-pediatrico .dettaglio-header {
  background: #fdf0f4;
}
[data-theme="dark"] .dettaglio-panel.detail-pediatrico .dettaglio-header {
  background: #2a1220;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dettaglio-panel.detail-pediatrico .dettaglio-header {
    background: #2a1220;
  }
}
.dettaglio-back {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--bg-code);
  color: var(--txt-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s;
}
.dettaglio-back:hover { background: var(--border); }
.dettaglio-header-text { flex: 1; }
.dettaglio-citta { font-size: 20px; font-weight: 700; color: var(--txt-primary); line-height: 1.1; }
.dettaglio-nome  { font-size: 12px; color: var(--txt-secondary); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dettaglio-circle {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}
.dettaglio-pazienti-label {
  font-size: 13px; color: var(--txt-secondary);
  font-weight: 500; line-height: 1.3;
  max-width: 80px;
}

/* Body dettaglio */
.dettaglio-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.dettaglio-stato { display: flex; align-items: center; gap: 10px; }
.dettaglio-aggiornato { font-size: 11px; color: var(--txt-muted); font-family: var(--font); }

.dettaglio-section-title {
  font-size: 18px; font-weight: 600; color: #185fa5;
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: -8px;
}

/* Indirizzo */
.dettaglio-indirizzo {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; color: var(--txt-secondary);
  background: var(--bg-code); border-radius: var(--radius-md);
  padding: 12px 14px;
}

/* Mini mappa nel dettaglio */
#dettaglio-mappa {
  height: 180px; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--border);
}

/* Bottoni navigatori */
.nav-buttons {
  display: flex; gap: 8px;
  padding-bottom: var(--safe-bottom);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--txt-primary);
  font-size: 14px; font-weight: 500;
  font-family: var(--font);
  text-decoration: none;
  transition: background .2s, border-color .2s;
  cursor: pointer;
}
.nav-btn svg { flex-shrink: 0; width: 28px; height: 28px; }
.nav-google { border-color: rgba(234,67,53,.3); }
.nav-google:hover { background: rgba(234,67,53,.06); }
.nav-apple  { border-color: rgba(0,0,0,.15); }
.nav-waze   { border-color: rgba(51,204,255,.4); }
.nav-waze:hover { background: rgba(51,204,255,.06); }

/* ─── Desktop ──────────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  #app { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  body { background: var(--bg-raised); }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET & DESKTOP
═══════════════════════════════════════════════════════════ */

/* Mobile: mostra mobile, nascondi desktop */
.mobile-only  { display: block; }
.desktop-only { display: none; }

/* ─── Bottom nav base ──────────────────────────────────────────────────────── */
.bottom-nav {
  display: flex;
  background: var(--bg-nav);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  transition: background .25s;
}

/* Tablet (768px+): card lista in griglia 2 colonne */
@media (min-width: 768px) {
  #lista-container,
  #vicini-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
  }
  .ps-card { margin-bottom: 0; }
  #mappa-container-mobile { height: calc(100dvh - 140px); }
}

/* Desktop (1024px+): layout completo 3 colonne */
@media (min-width: 1024px) {
  .mobile-only  { display: none !important; }
  .desktop-only { display: flex; flex-direction: column; }
  #app { max-width: 100%; }

  #app { max-width: 100%; height: 100dvh; overflow: hidden; }

  .desktop-layout { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

  /* ── Topbar ── */
  .desktop-topbar {
    background: #185FA5;
    padding: 0 24px; height: 64px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .desktop-topbar-brand { display: flex; align-items: center; gap: 14px; }
  .desktop-title { font-size: 18px; font-weight: 700; color: #fff; line-height: 1; }
  .desktop-sub   { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }
  .desktop-topbar-right { display: flex; align-items: center; gap: 20px; }
  .desktop-live  { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,0.85); }
  .desktop-ts    { font-size: 13px; color: rgba(255,255,255,0.65); }
  .desktop-settings-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-md); color: rgba(255,255,255,0.85);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s;
  }
  .desktop-settings-btn:hover { background: rgba(255,255,255,0.22); }

  /* ── Stats bar sopra le 3 colonne ── */
  .desktop-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; padding: 12px 20px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .dstat {
    background: var(--bg-app); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 10px 14px;
  }
  .dstat-label { font-size: 11px; color: var(--txt-secondary); font-weight: 500; margin-bottom: 3px; }
  .dstat-val   { font-size: 26px; font-weight: 700; color: var(--txt-primary); line-height: 1; }
  .dstat-sub   { font-size: 10px; color: var(--txt-muted); margin-top: 2px; }
  .dstat-crit .dstat-val { color: var(--c-rosso-dot); }
  .dstat-warn .dstat-val { color: var(--c-arancione-dot); }
  .dstat-ok   .dstat-val { color: var(--c-verde-dot); }

  /* ── Body: 3 colonne ── */
  .desktop-body {
    flex: 1; overflow: hidden;
    display: grid;
    grid-template-columns: 360px 1fr 1fr;
  }

  /* ── Colonna 1: Lista ── */
  .desktop-sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .desktop-sidebar-filters {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .desktop-sidebar-scroll { flex: 1; overflow-y: auto; padding: 10px; }
  #lista-container-desktop { display: flex; flex-direction: column; gap: 8px; }

  /* Card compatta nella lista desktop */
  #lista-container-desktop .ps-card { padding: 10px; }
  #lista-container-desktop .card-citta { font-size: 15px; }
  #lista-container-desktop .card-nome  { font-size: 10px; }
  #lista-container-desktop .card-totale-circle { width: 46px; height: 46px; }
  #lista-container-desktop .ctc-num    { font-size: 18px; }
  #lista-container-desktop .codice-num { font-size: 18px; }
  #lista-container-desktop .codici-grid { gap: 4px; }
  #lista-container-desktop .codice { padding: 5px 4px; }
  #lista-container-desktop .codice-label { font-size: 8px; }
  #lista-container-desktop .badge { font-size: 10px; padding: 2px 7px; }

  /* Card selezionata evidenziata */
  #lista-container-desktop .ps-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(24,95,165,0.2);
  }

  /* ── Colonna 2: Dettaglio ── */
  .desktop-main {
    border-right: 1px solid var(--border);
    background: var(--bg-app);
    display: flex; flex-direction: column;
    overflow: hidden;
  }

  /* Stato vuoto colonna dettaglio */
  .desktop-detail-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; padding: 40px 24px; text-align: center;
  }
  .desktop-detail-empty svg { opacity: .25; }
  .desktop-detail-empty p   { font-size: 14px; color: var(--txt-muted); line-height: 1.5; }

  /* Dettaglio inline nella colonna 2 */
  .desktop-detail-inner {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .desktop-detail-inner .dettaglio-header {
    position: sticky; top: 0; z-index: 2;
    border-radius: 0;
  }
  .desktop-detail-inner .dettaglio-body {
    flex: 1;
  }
  /* Nascondi mini-mappa nel dettaglio desktop (c'è la colonna 3) */
  .desktop-detail-inner #dettaglio-mappa { display: none; }

  /* ── Colonna 3: Mappa ── */
  .desktop-map-area { position: relative; overflow: hidden; }
  #mappa-desktop { width: 100%; height: 100%; }

  /* Leaflet override */
  .leaflet-container { background: var(--bg-map); }
  .leaflet-popup-content-wrapper {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); color: var(--txt-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
  .leaflet-popup-tip { background: var(--bg-surface); }
}

/* ── 1400px+: lista più larga ── */
@media (min-width: 1400px) {
  .desktop-body { grid-template-columns: 400px 1fr 1fr; }
}

/* Su desktop il dettaglio NON è mai un overlay */
@media (min-width: 1024px) {
  .dettaglio-overlay { display: none !important; }
}

/* ─── Banner prima apertura ────────────────────────────────────────────────── */
#banner-legale {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 8000;
  animation: slideUpIn .4s cubic-bezier(.22,1,.36,1);
}

@keyframes slideUpIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slideDownOut {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

.banner-legale-inner {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
}

.banner-legale-icon {
  font-size: 28px;
  line-height: 1;
}

.banner-legale-testo strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-primary);
  display: block;
  margin-bottom: 4px;
}

.banner-legale-testo p {
  font-size: 13px;
  color: var(--txt-secondary);
  line-height: 1.5;
}

.banner-legale-azioni {
  display: flex;
  gap: 8px;
}

.btn-legale-dettagli {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: none;
  color: var(--accent);
  font-size: 14px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
}

.btn-legale-ok {
  flex: 2;
  padding: 10px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
}

/* Su desktop il banner è più compatto e a tutta larghezza */
@media (min-width: 1024px) {
  #banner-legale {
    left: 0; right: 0;
  }
  .banner-legale-inner {
    flex-direction: row;
    align-items: center;
    padding: 14px 24px;
    max-width: 100%;
    border-radius: 0;
  }
  .banner-legale-testo { flex: 1; }
  .banner-legale-azioni { flex-shrink: 0; }
}