/* Token, layout, barra, mappa e pin. Colori brand = quelli di Foristo. */
:root {
  --accent: #e85d26;
  --accent-dark: #cf5d24;
  --accent-light: #fde9dc;
  --navy: #1a2634;
  --success: #27ae60;
  --warning: #f39c12;
  --danger: #e74c3c;
  --sfondo: #f6f5f3;
  --carta: #ffffff;
  --testo: #1f2933;
  --tenue: #6b7280;
  --bordo: #e5e7eb;
  --raggio: 12px;
  --ombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.45 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3 { font-family: Sora, Inter, system-ui, sans-serif; margin: 0; line-height: 1.25; }
h1 { font-size: 20px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
button, input, textarea, select { font: inherit; color: inherit; }

.barra {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--navy); color: #fff;
}
.marchio { font-family: Sora, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.marchio span { color: var(--accent); }
.scelta-giornata {
  flex: 1; min-width: 0; max-width: 360px; min-height: 36px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08); color: #fff; padding: 4px 8px;
}
.scelta-giornata option { color: var(--testo); }
.chi { margin-left: auto; font-size: 14px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.layout { display: flex; flex-direction: column; }
.colonna-mappa { position: sticky; top: 56px; z-index: 10; background: var(--sfondo); }
.mappa { height: 42vh; min-height: 260px; width: 100%; }
.pannello { padding: 16px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }

@media (min-width: 960px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr); }
  .colonna-mappa { top: 56px; height: calc(100vh - 56px); }
  .mappa { height: 100%; }
  .pannello { max-height: calc(100vh - 56px); overflow-y: auto; padding: 20px 24px; }
}

/* Mappa di base attenuata: le linee colorate dei giri devono risaltare. */
.leaflet-tile-pane { filter: grayscale(0.7) brightness(1.06) contrast(0.92); }

/* Pin della mappa e pallini delle schede: stessa palette di mappa.js (c0…c11). */
.pin-mappa { background: none; border: none; }
.pin, .pallino {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-weight: 600; font-size: 14px;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.pin.sede { width: 32px; height: 32px; background: var(--navy); font-family: Sora, sans-serif; }
.pin.fuori { background: #9ca3af; }
.pallino { flex: none; border: none; box-shadow: none; }
.pallino.grande { width: 40px; height: 40px; font-size: 17px; }
.c0 { background: #2563eb; } .c1 { background: #dc2626; } .c2 { background: #16a34a; }
.c3 { background: #9333ea; } .c4 { background: #ea580c; } .c5 { background: #0891b2; }
.c6 { background: #c026d3; } .c7 { background: #65a30d; } .c8 { background: #b45309; }
.c9 { background: #4f46e5; } .c10 { background: #db2777; } .c11 { background: #0d9488; }

.avviso {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 2000; max-width: calc(100vw - 32px);
  padding: 12px 16px; border-radius: 10px; box-shadow: var(--ombra);
  color: #fff; font-weight: 500; background: var(--navy);
}
.avviso.ok { background: var(--success); }
.avviso.errore { background: var(--danger); }

.vuoto { padding: 32px 8px; text-align: center; color: var(--tenue); }
.vuoto h1 { color: var(--testo); margin-bottom: 8px; }
.tenue { color: var(--tenue); }
.aiuto { color: var(--tenue); font-size: 14px; margin: 8px 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }