/* =============================================================================
   IDENTIDADE "CAMIÑO E TERRA" — design tokens
   Spec: docs/superpowers/specs/2026-07-15-redeseno-frontend-design.md
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --cor-primaria: #2d5a3d;
  --cor-primaria-escura: #1e3f2a;
  --cor-primaria-clara: #e8f2ec;
  --cor-acento: #f2b705;
  --cor-terra: #a67b4f;
  --cor-fondo: #f5f0e6;
  --cor-superficie: #ffffff;
  --cor-texto: #26302a;
  --cor-texto-suave: #6b7570;
  --cor-borde: #e3ddd0;
  --radio-tarxeta: 16px;
  --radio-boton: 10px;
  --sombra-suave: 0 2px 12px rgba(45, 90, 61, 0.08);
  --sombra-media: 0 4px 20px rgba(45, 90, 61, 0.14);
  --fs-titulo: 1.6rem;
  --fs-subtitulo: 1.15rem;

  /* Reconfiguración de Bootstrap 5.3 via CSS vars */
  --bs-primary: var(--cor-primaria);
  --bs-primary-rgb: 45, 90, 61;
  --bs-success: var(--cor-primaria);
  --bs-success-rgb: 45, 90, 61;
  --bs-body-bg: var(--cor-fondo);
  --bs-body-color: var(--cor-texto);
  --bs-border-radius: var(--radio-boton);
  --bs-link-color: var(--cor-primaria);
  --bs-link-hover-color: var(--cor-primaria-escura);
  --bs-light: #f5f0e6;
  --bs-light-rgb: 245, 240, 230;
}

[data-bs-theme="dark"] {
  --cor-primaria: #5a9a72;
  --cor-primaria-escura: #7ab890;
  --cor-primaria-clara: #24352b;
  --cor-fondo: #1a1f1b;
  --cor-superficie: #242b25;
  --cor-texto: #e8e6e0;
  --cor-texto-suave: #9aa39d;
  --cor-borde: #38423a;
  --sombra-suave: 0 2px 12px rgba(0, 0, 0, 0.35);
  --sombra-media: 0 4px 20px rgba(0, 0, 0, 0.5);
  --bs-body-bg: var(--cor-fondo);
  --bs-body-color: var(--cor-texto);
  --bs-primary: var(--cor-primaria);
  --bs-primary-rgb: 90, 154, 114;
  --bs-success: var(--cor-primaria);
  --bs-success-rgb: 90, 154, 114;
  --bs-link-color: var(--cor-primaria);
  --bs-link-hover-color: var(--cor-primaria-escura);
  --bs-light: #1a1f1b;
  --bs-light-rgb: 26, 31, 27;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--cor-fondo);
  color: var(--cor-texto);
  padding-bottom: 60px;
}

h1, h2, h3, .marca-app {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.015em;
  color: var(--cor-texto);
}
.marca-app { color: var(--cor-primaria); font-weight: 650; }

/* --- Botóns Bootstrap co ton da identidade --- */
.btn { border-radius: var(--radio-boton); }
.btn-primary, .btn-success {
  --bs-btn-bg: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: var(--cor-primaria-escura);
  --bs-btn-hover-border-color: var(--cor-primaria-escura);
  --bs-btn-active-bg: var(--cor-primaria-escura);
  --bs-btn-active-border-color: var(--cor-primaria-escura);
}
.btn-outline-primary, .btn-outline-success {
  --bs-btn-color: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: var(--cor-primaria);
  --bs-btn-hover-border-color: var(--cor-primaria);
  --bs-btn-active-bg: var(--cor-primaria);
  --bs-btn-active-border-color: var(--cor-primaria);
}
.btn-acento {
  background: var(--cor-acento);
  border: none;
  color: #3a2f00;
  font-weight: 600;
  border-radius: var(--radio-boton);
}
.btn-acento:hover { background: #d9a504; color: #3a2f00; }

/* --- Tarxetas e superficies --- */
.card, .post-card, .tarxeta {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borde);
  border-radius: var(--radio-tarxeta);
  box-shadow: var(--sombra-suave);
}
.modal-content, .offcanvas, .dropdown-menu {
  background: var(--cor-superficie);
  color: var(--cor-texto);
}
.form-control, .form-select {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borde);
  border-radius: var(--radio-boton);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), .25);
}
.form-check-input:checked {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

/* --- Chips (filtros de etapa en feed/buscar, lenda de isócronas) --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--cor-borde);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-size: 0.8em;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.chip.activa {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}
.fila-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.fila-chips::-webkit-scrollbar { display: none; }

/* --- Mapa: popups e controis Leaflet --- */
.leaflet-popup-content-wrapper, .leaflet-control, .donut-legend {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-radius: var(--radio-tarxeta);
  box-shadow: var(--sombra-media);
}
.leaflet-popup-tip { background: var(--cor-superficie); }
.leaflet-marker-icon, .donut-arc, .marker-modern {
  transition: transform 0.15s, box-shadow 0.15s;
}
.leaflet-marker-icon:hover, .donut-arc:hover, .marker-modern:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--cor-acento);
  cursor: pointer;
}
.popup-modern {
  background: var(--cor-superficie);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--cor-texto);
}
.popup-modern a { color: var(--cor-primaria); font-weight: 600; text-decoration: none; }
.popup-modern .badge {
  background: var(--cor-terra);
  color: #fff;
  font-size: 0.95em;
  border-radius: 6px;
  padding: 2px 8px;
}
.donut-text { font-weight: 600; font-size: 15px; color: var(--cor-texto); }
.leaflet-control-attribution a { text-decoration: none; display: none; }

.offcanvas-backdrop { display: none !important; }
@media (max-width: 600px) {
  .offcanvas.offcanvas-start {
    width: 90vw !important;
    min-width: unset;
    max-width: unset;
  }
}

/* --- Bottom nav --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 3000;
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borde);
  display: flex;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: 0.65em;
  gap: 2px;
  position: relative;
  transition: color 0.15s;
  background: none;
  border: none;
  cursor: pointer;
}
.bottom-nav-item i { font-size: 1.4em; }
.bottom-nav-item.active, .bottom-nav-item:hover { color: var(--cor-primaria); }
.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-acento);
}

/* --- Mencións --- */
.mention-link { color: var(--cor-primaria); font-weight: 600; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
.mention-dropdown {
  position: fixed;
  z-index: 2000;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borde);
  border-radius: 10px;
  min-width: 180px;
  box-shadow: var(--sombra-media);
  overflow: hidden;
}
.mention-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.88em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mention-dropdown-item:hover { background: var(--cor-primaria-clara); }

/* --- Axustes finais de contraste (verificación WCAG AA) --- */
/* Bio do perfil (texto branco sobre a banda terra→primaria): a clase
   opacity-75 de Bootstrap leva !important e baixaba a ratio a ~2.85:1 no
   extremo terra, así que se quitou do template. Engadimos un fondo
   translúcido escuro para garantir >=4.5:1 en calquera punto do
   gradiente, en claro e escuro. */
.perfil-cabeceira p.text-white {
  display: inline-block;
  background: rgba(0, 0, 0, 0.28);
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
}

/* Texto branco sobre --cor-primaria en modo escuro (#5a9a72) só daba 3.33:1,
   por baixo do 4.5:1 esixido (botóns, badges, chip activo). Usamos texto
   escuro sobre ese verde máis claro, coma xa se facía en bg-warning. */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .chip.activa,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-success {
  color: #10241a;
}

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-hover-color: #10241a;
  --bs-btn-active-color: #10241a;
}