/* =====================================================================
   Terra Rutes: disposició de l'app (la base és la de Terra Sol). Els
   components (botons, camps, pestanyes, diàlegs...) venen de
   nucli/css/nucli.css.

   Dues pantalles a tota la finestra:
    - el mapa, amb un panell flotant (full inferior al mòbil, targeta
      lateral a partir de 900 px d'ample);
    - la vista 3D, que entra per sobre lliscant cap amunt.
   ===================================================================== */
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* --- Pantalla del mapa --- */
.pantalla-mapa {
  position: fixed;
  inset: 0;
}

.mapa {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #dcd7c9;
}

/* Els controls de Leaflet, per sota de la barra superior. */
.mapa .leaflet-top {
  top: calc(64px + env(safe-area-inset-top));
}

/* La barra superior, el panell flotant, les dades de la zona i l'avís
   de privacitat venen del nucli. Aquí la barra queda per sota del panell
   (600), com abans; al nucli és a 700. */
.barra-superior {
  z-index: 500;
}

/* Brúixola del mapa (nucli/js/ui/mapaBase.js), sota el botó de capa i
   centrada amb ell: 64 px de botó a 10 px de la vora = centre a 42 px. */
.mapa .bruixola-mapa {
  top: calc(226px + env(safe-area-inset-top));
  right: calc(42px - 1.3rem);
  z-index: 500;
}

/* Al mòbil, sota el botó no hi ha prou espai abans del full inferior: a
   l'esquerra del botó, centrada amb ell (150 + 32 = 182 px). */
@media (max-width: 899px) {
  .mapa .bruixola-mapa {
    top: calc(182px - 1.3rem + env(safe-area-inset-top));
    right: 86px;
  }
}

/* Botó de capa: miniatura de l'altra capa al lloc on es mira, amb el nom.
   Un sol toc hi canvia (patró de Google Maps). */
.miniatura-capa {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 500;
  right: 10px;
  top: calc(150px + env(safe-area-inset-top));
  width: 64px;
  height: 64px;
  border: 2px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-vora);
  box-shadow: var(--ombra-flotant);
  cursor: pointer;
  display: block;
  transition: transform var(--transicio);
}

.miniatura-capa:active {
  transform: scale(0.95);
}

.miniatura-capa:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primari) 45%, transparent);
  outline-offset: 2px;
}

.miniatura-capa__imatge {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniatura-capa__nom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 3px 3px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  white-space: nowrap;
  overflow: hidden;
}

.miniatura-capa__nom svg {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
}

/* --- Panell flotant --- */
.panell__pas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espai-s);
  animation: apareix 220ms var(--transicio) both;
}

@keyframes apareix {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.panell__formulari {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espai-s);
}

.camp__entrada--mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.camp__entrada--mono::placeholder {
  font-family: var(--font);
  letter-spacing: normal;
  text-transform: none;
}

.dibuix-estat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espai-xs);
}

.dibuix-estat__resum {
  font-weight: 600;
  font-size: 0.92rem;
  min-width: 0;
}

.dibuix-estat__botons {
  display: inline-flex;
  align-items: center;
  gap: var(--espai-xs);
}

/* Zona triada */
.zona-capcalera {
  display: flex;
  align-items: flex-start;
  gap: var(--espai-xs);
}

.zona-capcalera__text {
  flex: 1 1 auto;
  min-width: 0;
}

.accions-zona {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espai-xs);
}

/* Forma de la zona sobre el mapa: lleugera pulsació en seleccionar-la */
.forma-zona {
  animation: forma-entra 500ms var(--transicio) both;
}

@keyframes forma-entra {
  from {
    opacity: 0;
  }
}


.pestanyes--mode .pestanyes__opcio {
  padding: 0.6rem;
  font-size: 0.95rem;
}

.pestanyes--petites .pestanyes__opcio {
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
}

.camp__valor {
  font-weight: 700;
  color: var(--color-primari-fosc);
}

.lliscador {
  width: 100%;
  margin: 0.3rem 0 0;
  accent-color: var(--color-primari);
}

/* Mentre es dibuixa al mòbil, el panell es redueix per deixar més mapa. */
@media (max-width: 899px) {
  .panell--dibuix .panell__subtitol {
    display: none;
  }
}

/* --- Diàlegs --- */
.dialeg .xip {
  align-self: flex-start;
}

.llista-avantatges {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.llista-avantatges li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.4;
}

.llista-avantatges li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background-color: var(--color-primari-suau);
  color: var(--color-primari);
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.credits {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--color-text-mut);
  overflow-wrap: break-word;
}

/* =====================================================================
   Resultats
   ===================================================================== */

.estat-calcul {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radi);
  background-color: var(--color-primari-suau);
  color: var(--color-primari-fosc);
  font-weight: 600;
}

.resultats {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espai-s);
  animation: apareix 220ms var(--transicio) both;
}

.seccio-titol {
  margin: var(--espai-xs) 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primari-fosc);
}

/* Les capes Pro porten un cadenat fins que es desbloquegen. */
.icona-pro {
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.2rem;
  vertical-align: -0.1rem;
  /* Dins d'una pestanya estreta (flex), sense això l'SVG s'encongeix a 0. */
  flex-shrink: 0;
}

.es-pro .icona-pro,
.icona-lliure {
  display: none;
}

.es-pro .icona-lliure {
  display: inline-block;
}

/* Llegenda de la capa del mapa */
.llegenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  font-size: 0.8rem;
}

.llegenda__degradat {
  flex: 1 1 100%;
  height: 0.7rem;
  border-radius: var(--radi-rodo);
}

.llegenda__extrems {
  flex: 1 1 100%;
  display: flex;
  justify-content: space-between;
  color: var(--color-text-mut);
}

.llegenda__classe {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.llegenda__mostra {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.llegenda__nota {
  margin: 0;
  color: var(--color-text-mut);
}

.bloqueig-pro {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-premium);
  padding: 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--color-premium) 50%, transparent);
  border-radius: var(--radi);
  background-color: color-mix(in srgb, var(--color-premium) 7%, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.bloqueig-pro svg {
  width: 1rem;
  height: 1rem;
}

.fila-botons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espai-xs);
}

.fila-botons .boto {
  min-width: 0;
}

/* --- Blocs de resultats i notes --- */

.resultats-bloc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espai-s);
}

.nota-grafic {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-mut);
}

/* --- Vista 3D --- */
.vista-3d {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: radial-gradient(ellipse at 50% 35%, #fbfaf6 0%, #e9e5da 60%, #d8d2c3 100%);
  animation: vista-entra 320ms var(--transicio) both;
}

@keyframes vista-entra {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

.visor {
  position: absolute;
  inset: 0;
  z-index: 0;
  touch-action: none;
}

.visor canvas {
  display: block;
}

/* La brúixola del visor, per sota de la barra superior */
.visor .bruixola-3d {
  top: calc(72px + env(safe-area-inset-top));
}

.vista-3d__barra {
  position: absolute;
  top: calc(var(--espai-xs) + env(safe-area-inset-top));
  left: var(--espai-xs);
  right: var(--espai-xs);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--espai-xs);
}

.vista-3d__titol {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radi-gran);
  background-color: var(--color-superficie-translucida);
  box-shadow: var(--ombra);
  backdrop-filter: blur(8px);
}

.vista-3d__titol strong {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vista-3d__mides {
  font-size: 0.78rem;
  color: var(--color-text-mut);
}

.carrega-3d {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.carrega-3d__targeta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radi-gran);
  background-color: var(--color-superficie);
  box-shadow: var(--ombra-flotant);
  font-weight: 600;
  color: var(--color-primari-fosc);
  max-width: 90vw;
}

.controls-3d {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 62vh;
  overflow-y: auto;
  padding: var(--espai-s) var(--espai-s) calc(var(--espai-s) + env(safe-area-inset-bottom));
  border-radius: var(--radi-gran) var(--radi-gran) 0 0;
  background-color: var(--color-superficie-translucida);
  backdrop-filter: blur(12px);
  box-shadow: var(--ombra-flotant);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espai-s);
}

.controls-3d__opcions {
  border-radius: var(--radi);
}

.controls-3d__resum {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-mut);
  list-style: none;
  padding: 0.2rem 0;
}

.controls-3d__resum::-webkit-details-marker {
  display: none;
}

.controls-3d__resum svg {
  width: 1rem;
  height: 1rem;
}

.controls-3d__resum::after {
  content: '▾';
  margin-left: auto;
  transition: transform var(--transicio);
}

.controls-3d__opcions:not([open]) .controls-3d__resum::after {
  transform: rotate(-90deg);
}

.controls-3d__graella {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espai-s);
  padding-top: var(--espai-xs);
}

/* --- Escriptori: panells laterals en lloc de fulls inferiors --- */
@media (min-width: 900px) {
  .controls-3d {
    left: auto;
    right: var(--espai-s);
    top: calc(72px + env(safe-area-inset-top));
    bottom: auto;
    width: 340px;
    max-height: calc(100vh - 96px);
    border-radius: var(--radi-gran);
  }

  .visor .bruixola-3d {
    right: calc(340px + 2 * var(--espai-s));
  }
}

/* --- Dia i hora: lliscadors amb marques (js/ui/lliscador.js) --- */

/* =====================================================================
   Terra Rutes
   ===================================================================== */

/* Botó d'obrir fitxers: un <label> amb l'<input type="file"> amagat a dins,
   perquè el clic obri el selector de fitxers del sistema. */
.boto-fitxer {
  position: relative;
  cursor: pointer;
}

.boto-fitxer:focus-within {
  outline: 3px solid color-mix(in srgb, var(--color-primari) 45%, transparent);
  outline-offset: 2px;
}

/* --- Llista de tracks --- */
.llista-tracks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espai-xxs);
}

.llista-tracks__element {
  display: flex;
  align-items: center;
  gap: var(--espai-xxs);
  border: 1px solid var(--color-vora);
  border-radius: var(--radi);
  background-color: var(--color-superficie);
}

.llista-tracks__element--amagat .llista-tracks__text {
  opacity: 0.5;
}

.llista-tracks__obrir {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: var(--radi);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.llista-tracks__obrir:hover {
  background-color: var(--color-hover);
}

.llista-tracks__color {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(35, 38, 31, 0.25);
}

.llista-tracks__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.llista-tracks__nom {
  font-weight: 650;
  font-size: 0.92rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.llista-tracks__dades {
  font-size: 0.8rem;
  color: var(--color-text-mut);
  font-variant-numeric: tabular-nums;
}

.llista-tracks__ull {
  flex-shrink: 0;
  margin-right: 0.25rem;
}

.llista-buida {
  margin: 0;
  padding: var(--espai-s);
  border: 1px dashed var(--color-vora);
  border-radius: var(--radi);
  text-align: center;
  color: var(--color-text-mut);
  font-size: 0.88rem;
}

/* --- Un track --- */
.track-nom {
  overflow-wrap: break-word;
}

.perfil {
  width: 100%;
  min-width: 0;
  border-radius: var(--radi);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-vora);
  overflow: hidden;
}

.perfil__canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
  /* Arrossegar en vertical desplaça el panell; en horitzontal, selecciona. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.llegenda--pendent {
  gap: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.tram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espai-xs);
  padding: var(--espai-xs);
  border-radius: var(--radi);
  border: 2px solid #ffd84d;
  background-color: color-mix(in srgb, #ffd84d 10%, var(--color-superficie));
}

.perfil__capcalera,
.tram__capcalera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espai-xs);
}

.tram__capcalera strong {
  min-width: 0;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

.tram .dades-zona__element {
  background-color: var(--color-superficie);
}

.boto--perill {
  min-width: 0;
}

/* --- Unir --- */
.casella {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.92rem;
  min-width: 0;
}

.casella input {
  margin: 0;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: var(--color-primari);
}

.llista-unir {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espai-xxs);
}

.llista-unir__element {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-vora);
  border-radius: var(--radi);
  background-color: var(--color-superficie);
}

.ordre-proposat {
  margin: 0;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: var(--espai-xs);
}

.ordre-proposat li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  font-size: 0.9rem;
}

.ordre-proposat li::marker {
  font-weight: 700;
  color: var(--color-primari-fosc);
}

.ordre-proposat__nom {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: break-word;
}

.ordre-proposat__salt {
  flex: 1 1 100%;
  font-size: 0.75rem;
  color: var(--color-text-mut);
}

/* Número d'ordre a l'inici de cada tram, al mapa. */
.ordre-unio {
  background: none;
  border: none;
}

.ordre-unio span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--color-text);
  color: #fff;
  font: 700 0.8rem/1 var(--font);
  border: 2px solid #fff;
  box-shadow: var(--ombra-flotant);
}

/* --- Editar --- */
.punt-triat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espai-xs);
  padding: var(--espai-xs);
  border-radius: var(--radi);
  background-color: var(--color-primari-suau);
}

.punt-triat__capcalera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}

.fila-botons .boto--petit {
  white-space: normal;
  line-height: 1.2;
}

/* Punts del track mentre s'edita: un cercle blanc amb vora fosca (el triat,
   més gran i del color primari). La zona tocable és més gran que el cercle. */
.vertex-ruta {
  background: none;
  border: none;
  cursor: grab;
}

.vertex-ruta span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 5px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid var(--color-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.vertex-ruta--triat span {
  width: 16px;
  height: 16px;
  margin: 3px;
  background-color: #ffd84d;
  border-width: 3px;
}

/* --- Arrossegar fitxers --- */
.zona-deixar {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--color-primari) 25%, transparent);
  border: 4px dashed var(--color-primari);
  pointer-events: none;
}

.zona-deixar__targeta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.4rem;
  border-radius: var(--radi-gran);
  background-color: var(--color-superficie);
  box-shadow: var(--ombra-flotant);
  font-weight: 700;
  color: var(--color-primari-fosc);
}

.zona-deixar__targeta svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* El perfil del 3D, sense títol: més baix de marge. */
.controls-3d .perfil {
  background-color: var(--color-superficie);
}

/* --- Titularitat del sòl (ui/titularitat.js) --- */
.titularitat {
  display: flex;
  flex-direction: column;
  gap: var(--espai-xs);
}

.titularitat__titol {
  margin: 0;
  font-weight: 700;
}

.titularitat__text {
  margin: 0;
  font-size: 0.85rem;
}

.titularitat__barra {
  display: flex;
  height: 0.8rem;
  overflow: hidden;
  border-radius: var(--radi-rodo);
  background-color: var(--color-vora);
}

.titularitat__barra span {
  flex-basis: 0;
  min-width: 2px;
}

.titularitat-classes,
.titularitat-llista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.titularitat-classes__element,
.titularitat-llista li,
.titularitat-llista__boto {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.titularitat-classes__nom,
.titularitat-llista__text {
  flex: 1;
  min-width: 0;
}

.titularitat-classes__nom small,
.titularitat-llista__text small {
  display: block;
  color: var(--color-text-mut);
  font-size: 0.75rem;
}

.titularitat-classes__valor,
.titularitat-llista__valor {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.titularitat-llista {
  max-height: 16rem;
  overflow-y: auto;
  padding-top: var(--espai-xs);
}

.titularitat-llista__boto {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0.3rem 0.4rem;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.titularitat-llista__boto:hover {
  background-color: var(--color-hover);
}

.titularitat-detalls summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primari-fosc);
}

.form-referencia {
  display: flex;
  align-items: flex-end;
  gap: var(--espai-xs);
}

.form-referencia .camp {
  flex: 1;
  min-width: 0;
}

.enllac {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primari);
}

.enllac svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* --- Gravar (Android) --- */
.gravar-capcalera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espai-xs);
}

/* Estat de la gravació: un punt que batega mentre grava. */
.estat-gravacio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radi-rodo);
  font-size: 0.8rem;
  font-weight: 700;
  background-color: var(--color-fons);
  color: var(--color-text-mut);
}

.estat-gravacio::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: currentColor;
}

.estat-gravacio[data-estat='gravant'] {
  background-color: color-mix(in srgb, #c62f2f 12%, transparent);
  color: #c62f2f;
}

.estat-gravacio[data-estat='gravant']::before {
  animation: batec 1.2s ease-in-out infinite;
}

.estat-gravacio[data-estat='pausa'] {
  background-color: var(--color-accent-suau);
  color: var(--color-accent);
}

@keyframes batec {
  50% {
    opacity: 0.25;
  }
}

#gravar-dades dd {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* Llegenda del perfil amb les dues altituds: la del MDT (contínua, la que
   es fa servir) i la del GPS o del fitxer (discontínua, per comparar). */
.llegenda__linia {
  display: inline-block;
  width: 1.2rem;
  height: 0;
  flex-shrink: 0;
}

.llegenda__linia--mdt {
  border-top: 2px solid #23261f;
}

.llegenda__linia--orig {
  border-top: 2px dashed #2f7de1;
}

/* --- Zona d'una entitat (?zona=, js/ui/zona.js) --- */
/* La capçalera de la barra superior: el logotip i el nom de l'entitat,
   amb el color de la zona (--color-zona, el posa l'app al body). */
.marca--zona {
  min-width: 0;
  flex-shrink: 1;
  border: 2px solid var(--color-zona, var(--color-primari));
}

.marca-zona__logotip {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  background-color: #fff;
  flex-shrink: 0;
}

.marca-zona__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.marca-zona__entitat {
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marca-zona__nom {
  font-size: 0.78rem;
  color: var(--color-text-mut);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boto-explorar {
  background-color: var(--color-superficie-translucida);
  box-shadow: var(--ombra);
}

/* El bloc de la zona, a dalt de la llista. */
.bloc-zona {
  display: flex;
  flex-direction: column;
  gap: var(--espai-xs);
  padding: var(--espai-s);
  border-radius: var(--radi);
  border-left: 4px solid var(--color-zona, var(--color-primari));
  background-color: color-mix(in srgb, var(--color-zona, var(--color-primari)) 8%, var(--color-superficie));
}

.bloc-zona__descripcio {
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.track-text {
  margin: 0;
  font-size: 0.9rem;
  white-space: pre-line;
}

/* El catàleg del diàleg "Explorar". */
.llista-zones {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espai-xxs);
  max-height: 55vh;
  overflow-y: auto;
}

.llista-zones__boto {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-vora);
  border-left: 4px solid var(--color-zona, var(--color-primari));
  border-radius: var(--radi);
  background-color: var(--color-superficie);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.llista-zones__boto:hover,
.llista-zones__boto[aria-current='true'] {
  background-color: var(--color-hover);
}

.llista-zones__logotip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: contain;
  background-color: #fff;
  flex-shrink: 0;
}

.llista-zones__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.llista-zones__nom {
  font-weight: 650;
}

.llista-zones__dades {
  font-size: 0.8rem;
  color: var(--color-text-mut);
}

/* --- La meva ubicació (ui/posicio.js) --- */
/* Sota la brúixola a l'escriptori, i sota el botó de capa al mòbil. */
.boto-posicio {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 500;
  right: 10px;
  top: calc(282px + env(safe-area-inset-top));
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background-color: var(--color-superficie);
  color: var(--color-text-mut);
  box-shadow: var(--ombra-flotant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Al mòbil, sota el botó de capa el tapa el full inferior (fa l'alçada del
   contingut): a sobre de la brúixola, a l'esquerra del botó de capa. */
@media (max-width: 899px) {
  .boto-posicio {
    top: calc(104px + env(safe-area-inset-top));
    right: 85px;
  }
}

.boto-posicio svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Seguint: ple; lliure (el GPS va, però el mapa no la segueix): només el color. */
.boto-posicio[data-estat='seguint'] {
  background-color: #2f7de1;
  color: #fff;
}

.boto-posicio[data-estat='lliure'] {
  color: #2f7de1;
}

.boto-posicio:focus-visible {
  outline: 3px solid color-mix(in srgb, #2f7de1 45%, transparent);
  outline-offset: 2px;
}

/* El punt de la posició i el con cap on es mira o es camina (gira amb el rumb). */
.posicio-mapa {
  background: none;
  border: none;
  pointer-events: none;
}

.posicio-mapa__punt {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #2f7de1;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.posicio-mapa__con {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  /* Un ventall de 70° cap amunt (el nord quan el rumb és 0). */
  background: conic-gradient(from -35deg at 50% 50%, rgba(47, 125, 225, 0.45) 0deg 70deg, transparent 70deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 8px, #000 9px);
  mask: radial-gradient(circle at 50% 50%, transparent 8px, #000 9px);
}

.posicio-mapa__con[hidden] {
  display: none;
}

/* --- Seguir una ruta (ui/seguidor.js) --- */
.avis-fora {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.dades-seguir dd {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* L'atribució del mapa: al mòbil, el full inferior la tapa i es llegia
   malament per sota del panell; s'amaga del mapa i es mostra al peu del
   panell (app.js en copia el contingut). A l'escriptori, la de Leaflet. */
.credits-mapa {
  display: none;
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--color-text-mut);
  overflow-wrap: break-word;
}

.credits-mapa a {
  color: inherit;
}

@media (max-width: 899px) {
  .credits-mapa {
    display: block;
  }

  #mapa .leaflet-control-attribution {
    display: none;
  }
}