* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: system-ui, sans-serif; }

#map { position: absolute; inset: 0; z-index: 1; }

#barra-estat {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 8px 12px;
  display: flex; justify-content: space-between;
  font-size: 14px;
}

#btn-ajustos {
  position: absolute; top: 44px; right: 12px;
  z-index: 1000;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid white;
  background: rgba(0,0,0,0.7);
  color: white; font-size: 22px;
  cursor: pointer;
}

#controls {
  position: absolute; bottom: 120px; left: 0; right: 0;
  z-index: 1000;
  display: flex; gap: 8px; padding: 0 8px;
}
.boto-gran {
  flex: 1; padding: 20px 8px;
  font-size: 16px; font-weight: bold;
  border: 3px solid #333; border-radius: 10px;
  background: #f0f0f0; cursor: pointer;
  min-height: 70px;
}
.boto-gran.actiu { background: #4CAF50; color: white; border-color: #2e7d32; }
#btn-aplicar.actiu { background: #2e7d32; }
#btn-aplicar { background: #ffcdd2; }
#btn-pausa.actiu { background: #ff9800; color: white; }

#panell {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: white; padding: 8px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}
#info-sessio {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; font-size: 13px; margin-bottom: 8px;
}
#btn-finalitzar {
  width: 100%; padding: 12px;
  background: #2d5016; color: white;
  font-weight: bold; border: none;
  border-radius: 8px; font-size: 16px;
}

.amagat { display: none !important; }

#modal-ajustos {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-contingut {
  background: white; border-radius: 12px;
  padding: 20px; width: 100%; max-width: 420px;
  max-height: 90vh; overflow-y: auto;
}
.modal-contingut h2 { margin-bottom: 16px; color: #2d5016; }
.modal-contingut label { display: block; margin-bottom: 16px; }
.modal-contingut label span { display: block; font-weight: 600; margin-bottom: 6px; }
.modal-contingut input[type=range] { width: calc(100% - 70px); vertical-align: middle; }
.modal-contingut output {
  display: inline-block; width: 60px;
  text-align: right; font-weight: bold; color: #2d5016;
}
.modal-contingut select {
  width: 100%; padding: 8px; font-size: 16px;
  border-radius: 6px; border: 1px solid #ccc;
}
.ajuda {
  font-size: 12px; color: #666;
  margin: -8px 0 16px 0; font-style: italic;
}
.botons-modal { display: flex; gap: 8px; margin-top: 16px; }
.botons-modal button {
  flex: 1; padding: 12px; font-size: 15px; font-weight: bold;
  border-radius: 8px; border: none; cursor: pointer;
}
.boto-principal { background: #2d5016; color: white; }
#btn-tancar-ajustos { background: #e0e0e0; }
#indicador-desviament {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;
  background: rgba(211, 47, 47, 0.9);
  color: white;
  padding: 20px 40px;
  border-radius: 20px;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 4px solid white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  pointer-events: none; /* Perquè no bloquegi els clics al mapa */
}

#fletxa {
  font-size: 80px;
  line-height: 1;
}

#indicador-desviament.amagat {
  display: none !important;
}
/* Variables de color per defecte (Mode Clar) */
:root {
  --fons-panell: #ffffff;
  --text-panell: #000000;
  --fons-boto: #f0f0f0;
  --text-boto: #000000;
  --fons-modal: #ffffff;
  --text-modal: #000000;
}

/* Quan el body té la classe 'mode-fosc', canviem les variables */
body.mode-fosc {
  --fons-panell: #1e1e1e;
  --text-panell: #ffffff;
  --fons-boto: #333333;
  --text-boto: #ffffff;
  --fons-modal: #2d2d2d;
  --text-modal: #ffffff;
}

/* Apliquem les variables als elements */
#panell {
  background: var(--fons-panell) !important;
  color: var(--text-panell) !important;
}
#btn-finalitzar {
  color: white !important; /* Aquest sempre serà blanc per contrastar amb el verd */
}
.boto-gran {
  background: var(--fons-boto) !important;
  color: var(--text-boto) !important;
}
.modal-contingut {
  background: var(--fons-modal) !important;
  color: var(--text-modal) !important;
}
.modal-contingut h2, 
.modal-contingut label span,
.modal-contingut output {
  color: var(--text-modal) !important;
}
.modal-contingut select {
  background: var(--fons-boto);
  color: var(--text-boto);
  border-color: #555;
}
/* BAIXAR EL CONTROL DE CAPES DE LEAFLET */
.leaflet-top.leaflet-left {
  top: 40px; /* Baixa el control 40 píxels per sota de la barra d'estat */
  left: 10px; /* Li dona una mica de marge a l'esquerra */
}