:root {
  --blue: #1463ff;
  --blue-dark: #0e49c7;
  --navy: #0c1830;
  --text: #536077;
  --muted: #8b97aa;
  --border: #e4eaf2;
  --surface: #ffffff;
  --surface-soft: #f5f8fd;
  --green: #1eaf5d;
  --red: #ee4d4d;
  --yellow: #f6b913;
  --orange: #f26430;
  --shadow: 0 18px 50px rgba(28, 55, 99, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--navy);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 72%, #f4f8ff 100%);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 74px;
  padding: 0 clamp(20px, 5vw, 90px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--blue); font-size:1.55rem; }
.brand-mark {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border-radius: 14px;
  background: transparent;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.desktop-nav { display:flex; align-items:center; gap:30px; font-weight:650; }
.desktop-nav a:hover, .nav-login:hover { color:var(--blue); }
.nav-login { border:0; background:none; cursor:pointer; color:var(--navy); font-weight:650; }
.mobile-menu-button { display:none; border:0; background:white; font-size:1.5rem; cursor:pointer; }
.mobile-menu { position:fixed; z-index:990; top:74px; left:0; right:0; background:white; border-bottom:1px solid var(--border); padding:18px 24px; box-shadow:var(--shadow); }
.mobile-menu a, .mobile-menu .nav-login { display:block; width:100%; padding:12px 0; text-align:left; }

.button { border-radius:12px; padding:13px 20px; font-weight:750; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:.2s ease; }
.button:hover { transform:translateY(-1px); }
.button-primary { background:var(--blue); color:white; box-shadow:0 10px 24px rgba(20,99,255,.24); }
.button-primary:hover { background:var(--blue-dark); }
.button-outline { background:white; border-color:var(--blue); color:var(--blue); }
.button-ghost { background:#eff3f9; color:var(--navy); }

.hero-shell {
  max-width: 1540px;
  margin: 0 auto;
  padding: 44px clamp(20px, 5vw, 80px) 70px;
  display: grid;
  grid-template-columns: minmax(350px, .86fr) minmax(560px, 1.45fr);
  gap: 44px;
  align-items: start;
}
.hero-copy { padding-top:18px; }
.eyebrow { display:inline-flex; color:var(--blue); background:#edf4ff; border-radius:999px; padding:9px 14px; font-weight:750; font-size:.9rem; }
h1 { margin:24px 0 14px; font-size:clamp(2.5rem, 4.8vw, 4.55rem); line-height:.98; letter-spacing:-.055em; max-width:700px; }
.hero-description { max-width:580px; font-size:1.08rem; line-height:1.7; color:var(--text); }
.search-box { margin-top:30px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; background:white; border:1px solid var(--border); border-radius:15px; padding:7px; box-shadow:0 12px 28px rgba(27,47,82,.08); }
.search-box input { min-width:0; border:0; outline:0; padding:12px 10px; color:var(--navy); }
.search-box button { border:0; border-radius:10px; background:#eff4ff; color:var(--blue); padding:11px 15px; font-weight:750; cursor:pointer; }
.search-icon { color:#72819a; font-size:1.4rem; padding-left:7px; }
.hero-actions { margin-top:20px; display:flex; gap:14px; flex-wrap:wrap; }

.stats-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:24px; }
.stat-card { display:flex; align-items:center; gap:12px; background:white; border:1px solid var(--border); border-radius:15px; padding:16px; box-shadow:0 8px 22px rgba(27,47,82,.07); }
.stat-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  color: #ffffff;
  overflow: hidden;
}

.stat-icon svg {
  width: 30px;
  height: 30px;

  margin-top: 16%;
  margin-left: 16%;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-icon.blue {
  background: var(--blue);
}

.stat-icon.green {
  background: var(--green);
}

.stat-icon.red {
  background: var(--red);
}
.stat-icon.blue { background:var(--blue); }.stat-icon.green { background:var(--green); }.stat-icon.red { background:var(--red); }
.stat-card strong, .stat-card span, .stat-card small { display:block; }
.stat-card strong { font-size:1.45rem; }
.stat-card span { font-size:.78rem; font-weight:750; }.stat-card small { color:var(--muted); margin-top:2px; }

.recent-card { margin-top:20px; background:white; border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow); }
.section-heading-row { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.section-heading-row h2 { margin:0; font-size:1rem; }
.section-heading-row button { border:0; background:none; color:var(--blue); font-weight:750; cursor:pointer; }
.recent-list { margin-top:8px; }
.recent-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid #eef2f7; cursor:pointer; }
.recent-item:last-child { border-bottom:0; }
.recent-icon { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:white; }
.recent-title { font-weight:800; font-size:.94rem; }.recent-location { color:var(--muted); font-size:.78rem; margin-top:3px; }
.recent-meta { text-align:right; }.status-badge { display:inline-block; padding:6px 9px; border-radius:999px; font-size:.68rem; font-weight:800; }
.status-open { background:#ffeded; color:#d73838; }.status-confirmed { background:#e5f8ed; color:#188649; }.status-priority { background:#fff2df; color:#d76b00; }
.recent-time { display:block; color:var(--muted); margin-top:6px; font-size:.72rem; }

.map-column { min-width:0; }
.filter-bar { display:flex; gap:10px; overflow-x:auto; padding:0 0 12px; scrollbar-width:none; }
.filter-bar::-webkit-scrollbar { display:none; }
.filter-chip { white-space:nowrap; border:1px solid var(--border); background:white; color:var(--navy); border-radius:999px; padding:10px 14px; font-weight:720; cursor:pointer; }
.filter-chip.active { color:var(--blue); background:#edf4ff; border-color:#cfe0ff; }
.map-card { position:relative; background:white; border:1px solid var(--border); border-radius:22px; padding:12px; box-shadow:var(--shadow); overflow:hidden; }
#map { height:690px; border-radius:15px; z-index:1; }
.map-overlay-card { position:absolute; z-index:500; left:28px; bottom:28px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:13px; padding:11px 14px; box-shadow:0 10px 24px rgba(34,50,84,.16); }
.map-overlay-card strong, .map-overlay-card span { display:block; }.map-overlay-card strong { font-size:1.25rem; }.map-overlay-card span { font-size:.74rem; color:var(--text); }
.custom-marker { width:38px; height:38px; display:grid; place-items:center; border-radius:50% 50% 50% 12%; transform:rotate(-45deg); color:white; border:3px solid white; box-shadow:0 8px 20px rgba(0,0,0,.22); }
.custom-marker span { transform:rotate(45deg); font-size:16px; }
.leaflet-popup-content-wrapper { border-radius:15px; box-shadow:0 18px 40px rgba(22,39,72,.2); }
.popup-card h3 { margin:0 0 5px; }.popup-card p { margin:4px 0; color:var(--text); }.popup-card .status-badge { margin-top:8px; }

.how-section { text-align:center; padding:72px clamp(20px, 6vw, 100px) 90px; background:linear-gradient(180deg, rgba(240,245,255,.55), rgba(255,255,255,.9)); }
.section-label { color:var(--blue); font-weight:850; font-size:.78rem; letter-spacing:.08em; }
.how-section h2 { margin:12px 0 8px; font-size:clamp(2rem,3vw,3rem); }.how-section > p { color:var(--text); }
.steps-grid { max-width:1250px; margin:44px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step-card { position:relative; background:white; border:1px solid var(--border); border-radius:20px; padding:28px 20px; box-shadow:0 12px 30px rgba(35,55,96,.07); }
.step-card > span { position:absolute; right:18px; top:15px; color:#c9d4e4; font-weight:900; }.step-icon { width:66px; height:66px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:#eff4ff; color:var(--blue); font-size:1.8rem; }.step-card h3 { margin:0 0 8px; }.step-card p { color:var(--text); line-height:1.55; font-size:.92rem; }

footer { padding:28px clamp(20px,5vw,80px); display:flex; justify-content:space-between; gap:15px; color:var(--text); border-top:1px solid var(--border); background:white; }

.report-dialog { border:0; padding:0; border-radius:22px; max-width:720px; width:calc(100% - 30px); box-shadow:0 35px 90px rgba(11,27,55,.3); }
.report-dialog::backdrop { background:rgba(6,17,38,.62); backdrop-filter:blur(4px); }
.dialog-card { padding:26px; }.dialog-header { display:flex; justify-content:space-between; align-items:start; gap:20px; }.dialog-header h2 { margin:7px 0 20px; }
.icon-button { border:0; background:#f1f4f8; border-radius:50%; width:38px; height:38px; font-size:1.5rem; cursor:pointer; }
.dialog-card label { display:block; font-weight:750; margin-bottom:16px; }.dialog-card input, .dialog-card select, .dialog-card textarea { display:block; width:100%; margin-top:7px; border:1px solid var(--border); border-radius:12px; padding:12px 13px; outline:none; color:var(--navy); }.dialog-card input:focus, .dialog-card select:focus, .dialog-card textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(20,99,255,.12); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.file-field span { color:var(--muted); font-weight:500; }.location-picker-row { display:flex; align-items:center; gap:12px; margin:-3px 0 16px; }.location-picker-row span { color:var(--text); font-size:.88rem; line-height:1.4; }.dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:6px; }
.toast { position:fixed; z-index:2000; right:22px; bottom:22px; max-width:380px; padding:14px 17px; border-radius:13px; background:var(--navy); color:white; box-shadow:var(--shadow); opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s ease; }.toast.show { opacity:1; transform:translateY(0); }

@media (max-width: 1100px) {
  .desktop-nav { display:none; }.mobile-menu-button { display:block; }
  .hero-shell { grid-template-columns:1fr; }.map-column { grid-row:2; }.hero-copy { padding-top:0; }
  #map { height:560px; }.steps-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 650px) {
  .site-header { height:66px; }.mobile-menu { top:66px; }.brand { font-size:1.22rem; }
  .hero-shell { padding-top:28px; gap:28px; }.hero-description { font-size:1rem; }.search-box { grid-template-columns:auto 1fr; }.search-box button { grid-column:1/-1; width:100%; }
  .stats-grid { grid-template-columns:1fr; }.stat-card { padding:14px; }.hero-actions .button { flex:1 1 100%; }
  #map { height:480px; }.map-card { padding:8px; border-radius:17px; }.map-overlay-card { left:20px; bottom:20px; }
  .steps-grid { grid-template-columns:1fr; }.form-grid { grid-template-columns:1fr; }.location-picker-row { align-items:stretch; flex-direction:column; }.dialog-actions { flex-direction:column-reverse; }.dialog-actions .button { width:100%; }
  footer { flex-direction:column; }
}


.status-progress { background:#e8f0ff; color:#2459d6; }
.status-resolved { background:#e7f8ee; color:#168148; }

.popup-card { min-width: 260px; }
.popup-card h3 { margin:0 0 5px; }
.popup-card p { margin:4px 0; color:var(--text); }
.popup-card .status-badge { margin-top:8px; }
.popup-feedback { margin-top:14px; padding-top:12px; border-top:1px solid #eef2f7; }
.popup-feedback strong { display:block; margin-bottom:10px; font-size:.82rem; }
.popup-actions { display:grid; gap:8px; }
.popup-action {
  border:1px solid var(--border);
  background:#fff;
  color:var(--navy);
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition:.2s ease;
}
.popup-action:hover { border-color:#cfe0ff; background:#f6f9ff; }
.popup-action span { font-weight:700; font-size:.82rem; text-align:left; }
.popup-action small {
  min-width:26px;
  height:26px;
  border-radius:999px;
  background:#eef3fb;
  color:var(--blue);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.74rem;
}

/* Autenticação, persistência e fotografias */
.nav-login.signed-in { color: var(--blue); font-weight: 800; }
.account-panel {
  position: fixed;
  z-index: 2100;
  width: min(300px, calc(100vw - 32px));
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 15px;
  box-shadow: 0 20px 55px rgba(11, 27, 55, .22);
}
.account-panel strong, .account-panel span { display: block; }
.account-panel span { margin-top: 4px; color: var(--text); font-size: .85rem; overflow-wrap: anywhere; }
.account-panel button {
  width: 100%; margin-top: 14px; padding: 10px 12px; border: 0; border-radius: 10px;
  background: #eef3fb; color: var(--navy); font-weight: 750; cursor: pointer;
}
.auth-message { min-height: 22px; margin: 0 0 12px; font-size: .9rem; }
.auth-message.error { color: #c93636; }
.auth-message.success { color: #168148; }
.auth-actions { align-items: stretch; }
.empty-state { color: var(--text); padding: 18px 4px 8px; }
.popup-photo { width: 100%; max-height: 170px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.popup-login-hint { display: block; margin-top: 9px; color: var(--muted); line-height: 1.35; }
.popup-action:disabled { opacity: .55; cursor: wait; }
.button:disabled { opacity: .6; cursor: wait; transform: none; }

.popup-owner-actions {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #eef2f7;
}

.delete-issue-button {
  width: 100%;
  border: 1px solid #f3b9b9;
  background: #fff4f4;
  color: #c92f2f;
  border-radius: 12px;
  padding: 11px 13px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

.delete-issue-button:hover {
  background: #ffe8e8;
  border-color: #ec8f8f;
}

.delete-issue-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.popup-owner-actions small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.dialog-card select {
  appearance: none;
  -webkit-appearance: none;

  padding: 12px 42px 12px 13px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230c1830' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px;
}

.popup-owner-actions {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #eef2f7;
}

.edit-issue-button,
.delete-issue-button {
  width: 100%;
  border-radius: 12px;
  padding: 11px 13px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

.edit-issue-button {
  border: 1px solid #bdd2ff;
  background: #f2f6ff;
  color: var(--blue);
}

.edit-issue-button:hover {
  background: #e5eeff;
  border-color: #91b2ff;
}

.delete-issue-button {
  border: 1px solid #f3b9b9;
  background: #fff4f4;
  color: #c92f2f;
}

.delete-issue-button:hover {
  background: #ffe8e8;
  border-color: #ec8f8f;
}

.site-footer {
  padding: 30px clamp(20px, 5vw, 80px);
  background: #ffffff;
  border-top: 1px solid var(--border);
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-brand strong {
  color: var(--navy);
  font-size: 1rem;
}

.footer-brand span {
  color: var(--muted);
  font-size: 0.82rem;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.footer-links a {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 650;
  transition: 0.2s ease;
}

.footer-links a:hover {
  color: var(--blue);
}

.footer-copyright {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: right;
}

.footer-copyright a {
  color: var(--blue);
  font-weight: 750;
}

.footer-copyright a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .footer-copyright {
    text-align: center;
  }
}

.legal-page {
  min-height: 100vh;
  background:
    linear-gradient(
      180deg,
      #f6f9ff 0%,
      #ffffff 380px
    );
}

.legal-header {
  min-height: 74px;
  padding: 14px clamp(20px, 5vw, 80px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);

  border-bottom: 1px solid var(--border);
}

.legal-main {
  padding:
    70px
    clamp(20px, 5vw, 80px)
    90px;
}

.legal-document {
  width: min(900px, 100%);
  margin: 0 auto;

  padding: clamp(25px, 5vw, 60px);

  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;

  box-shadow: var(--shadow);
}

.legal-document > h1 {
  margin: 12px 0 8px;
  max-width: none;

  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.legal-updated {
  margin-bottom: 42px;
  color: var(--muted);
  font-size: 0.88rem;
}

.legal-document section {
  margin-top: 36px;
  padding-top: 4px;
}

.legal-document h2 {
  margin: 0 0 13px;

  color: var(--navy);
  font-size: 1.25rem;
}

.legal-document p,
.legal-document li {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.75;
}

.legal-document p {
  margin: 10px 0;
}

.legal-document ul {
  margin: 14px 0;
  padding-left: 24px;
}

.legal-document li {
  margin-bottom: 7px;
}

@media (max-width: 650px) {
  .legal-header {
    align-items: stretch;
    flex-direction: column;
  }

  .legal-header .button {
    width: 100%;
  }

  .legal-main {
    padding-top: 35px;
  }

  .legal-document {
    border-radius: 18px;
  }
}

.account-admin-link {
  width: 100%;
  margin-top: 12px;
  padding: 11px 13px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #bfd3ff;
  border-radius: 11px;

  background: #edf4ff;
  color: var(--blue);

  font-size: 0.84rem;
  font-weight: 800;
}

.account-admin-link:hover {
  background: #dfeaff;
}

.forgot-password-button {
  padding: 13px 18px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: #f1f4f9;
  color: var(--navy);

  font-weight: 750;
  cursor: pointer;

  transition: 0.2s ease;
}

.forgot-password-button:hover {
  background: #e8edf5;
  border-color: #d5deea;
}

.forgot-password-button:focus-visible {
  outline: 3px solid rgba(20, 99, 255, 0.15);
  outline-offset: 2px;
}

.return-report-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;
  padding: 0 22px;

  border: 0;
  border-radius: 999px;

  background: var(--blue, #1463ff);
  color: #ffffff;

  box-shadow: 0 12px 30px rgba(20, 99, 255, 0.3);

  font: inherit;
  font-weight: 800;
  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.return-report-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(20, 99, 255, 0.4);
}

.return-report-button:active {
  transform: translateY(0);
}

.return-report-button[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .return-report-button {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: calc(100% - 32px);
  }
}

#adminPanelLink[hidden] {
  display: none !important;
}

.popup-issue-type {
  display: inline-flex;
  margin: 0 0 8px;
  padding: 5px 9px;

  border-radius: 999px;

  background: #edf4ff;
  color: #1463ff;

  font-size: 0.76rem;
  font-weight: 800;
}

#reportIssueTypeField {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

#reportIssueTypeField #reportIssueType {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

#editIssueTypeField {
  grid-column: 1 / -1;
  width: 100%;
}

#editIssueType {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.popup-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.popup-detail {
  display: inline-flex;
  align-items: center;

  padding: 4px 8px;

  border: 1px solid #dbe5f3;
  border-radius: 999px;

  background: #f5f8fc;
  color: #53627a;

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

#filterBar {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  max-width: 100%;

  padding: 4px 2px 12px;

  overflow-x: auto;
  overflow-y: hidden;

  flex-wrap: nowrap;

  scrollbar-width: thin;
  scrollbar-color: #c4d2e7 transparent;

  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

#filterBar::-webkit-scrollbar {
  height: 7px;
}

#filterBar::-webkit-scrollbar-track {
  background: transparent;
}

#filterBar::-webkit-scrollbar-thumb {
  background: #c4d2e7;
  border-radius: 999px;
}

#filterBar::-webkit-scrollbar-thumb:hover {
  background: #9fb2cf;
}

#filterBar .filter-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}


.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 42px;
  padding: 0 15px;
}

.filter-chip-icon {
  display: inline-grid;
  place-items: center;

  min-width: 16px;

  font-size: 0.95rem;
  font-weight: 900;
}


.user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  margin-top: 7px;
  margin-bottom: 4px;
  padding: 6px 10px;

  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.user-badge-participante {
  background: #eef2f7;
  color: #5f6f87;
}

.user-badge-cidadao {
  background: #eaf1ff;
  color: #1463ff;
}

.user-badge-regular {
  background: #e8f8ef;
  color: #159052;
}

.user-badge-guardiao {
  background: #fff3e4;
  color: #d97a00;
}

.user-badge-embaixador {
  background: #f3ecff;
  color: #7a49d6;
}

.reputation-card {
  --reputation-accent: #1463ff;
  --reputation-soft: #eaf1ff;

  width: 100%;
  margin: 12px 0 8px;
  padding: 14px;

  border: 1px solid #dbe5f3;
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--reputation-soft)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.reputation-header {
  display: flex;
  align-items: center;
  gap: 11px;
}

.reputation-emblem-shell {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.reputation-emblem-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;

  filter: drop-shadow(0 6px 14px rgba(12, 24, 48, 0.18));
}

.reputation-emblem-ring {
  position: absolute;
  inset: 0;

  border-radius: 50%;

  background:
    radial-gradient(circle at 30% 30%, #ffffff 0%, rgba(255,255,255,0.75) 18%, transparent 19%),
    linear-gradient(145deg, color-mix(in srgb, var(--reputation-accent) 78%, #ffffff), var(--reputation-accent));

  box-shadow:
    inset 0 2px 5px rgba(255,255,255,0.55),
    inset 0 -3px 8px rgba(0,0,0,0.10),
    0 10px 24px color-mix(in srgb, var(--reputation-accent) 24%, transparent);

  border: 2px solid rgba(255,255,255,0.8);
}

.reputation-emblem-ring::before {
  content: '';

  position: absolute;
  inset: 6px;

  border-radius: 50%;

  border: 2px dashed rgba(255,255,255,0.28);
}

.reputation-emblem {
  position: relative;
  z-index: 1;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));

  color: var(--reputation-accent);

  font-size: 1rem;
  font-weight: 900;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.9),
    0 3px 8px rgba(12, 24, 48, 0.16);
}

.reputation-title {
  min-width: 0;
  flex: 1;
}

.reputation-title strong,
.reputation-title span {
  display: block;
}

.reputation-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #0c1830;
  font-size: 0.88rem;
}

.reputation-title span {
  margin-top: 3px;

  color: #71809a;
  font-size: 0.72rem;
}

.reputation-title b {
  color: var(--reputation-accent);
}

.reputation-progress-info {
  display: flex;
  justify-content: space-between;
  gap: 10px;

  margin-top: 13px;

  color: #71809a;
  font-size: 0.67rem;
}

.reputation-progress-info strong {
  color: var(--reputation-accent);
}

.reputation-progress-track {
  height: 7px;
  margin-top: 7px;

  overflow: hidden;

  border-radius: 999px;
  background: rgba(117, 137, 170, 0.16);
}

.reputation-progress-value {
  width: 0;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--reputation-accent),
      color-mix(
        in srgb,
        var(--reputation-accent) 65%,
        #ffffff
      )
    );

  transition: width 0.5s ease;
}

.reputation-next-level {
  display: block;
  margin-top: 7px;

  color: #71809a;
  font-size: 0.65rem;
}

.reputation-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  margin-top: 12px;
  padding-top: 11px;

  border-top: 1px solid rgba(130, 151, 185, 0.18);
}

.reputation-stats div {
  min-width: 0;
}

.reputation-stats div + div {
  padding-left: 10px;
  border-left: 1px solid rgba(130, 151, 185, 0.18);
}

.reputation-stats strong,
.reputation-stats span {
  display: block;
}

.reputation-stats strong {
  color: #0c1830;
  font-size: 0.9rem;
}

.reputation-stats span {
  margin-top: 2px;

  color: #8491a7;
  font-size: 0.64rem;
}

.reputation-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reputation-title strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.reputation-title span {
  margin-top: 4px;
  font-size: 0.75rem;
}





@media (max-width: 600px) {
  .leaflet-popup-content-wrapper {
    border-radius: 14px;
  }

  .leaflet-popup-content {
    width: min(290px, calc(100vw - 34px)) !important;
    max-height: 54vh;
    margin: 8px 10px;

    overflow-y: auto;
    overflow-x: hidden;
  }

  .popup-card h3 {
    margin: 0 24px 3px 0;
    font-size: 0.9rem;
    line-height: 1.15;
  }

  .popup-card p {
    margin: 2px 0;
    font-size: 0.7rem;
    line-height: 1.25;
  }

  .popup-details {
    gap: 4px;
    margin: 5px 0 7px;
  }

  .popup-detail {
    padding: 3px 6px;
    font-size: 0.6rem;
  }

  .popup-card hr {
    margin: 8px 0;
  }

  .popup-card .status-title {
    margin-bottom: 6px;
    font-size: 0.72rem;
  }

  .vote-options {
    gap: 5px;
  }

  .vote-option {
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 10px;
  }

  .vote-option span {
    font-size: 0.69rem;
  }

  .vote-option strong {
    min-width: 23px;
    height: 23px;
    font-size: 0.65rem;
  }

  .popup-card .vote-note {
    margin-top: 5px;
    font-size: 0.58rem;
    line-height: 1.2;
  }

  .popup-owner-actions {
    gap: 5px;
    margin-top: 8px;
  }

  .popup-owner-actions button {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 0.68rem;
    border-radius: 9px;
  }

  .popup-owner-note {
    margin: 6px 0 0;
    font-size: 0.58rem;
    line-height: 1.2;
  }

  .leaflet-popup-close-button {
    width: 26px !important;
    height: 26px !important;
    font-size: 18px !important;
  }
}

.account-restriction-notice {
  width: 100%;
  margin: 10px 0;
  padding: 10px 12px;

  border: 1px solid #f4c47b;
  border-radius: 12px;

  background: #fff6e8;
  color: #a85b00;

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

.account-restriction-notice.blocked {
  border-color: #efb0b0;
  background: #fff0f0;
  color: #c93636;
}


.location-control {
  margin-top: 8px !important;
}

.location-control-button {
  display: flex;
  width: 30px;
  height: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #1c2434;
  cursor: pointer;
}

.location-control-button:hover {
  background: #f1f5fb;
  color: #1463ff;
}

.location-control-button:focus-visible {
  outline: 3px solid rgba(20, 99, 255, 0.25);
  outline-offset: 2px;
}

.location-control-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.location-control-button.is-loading svg {
  animation: location-button-spin 0.9s linear infinite;
}

.location-control-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

@keyframes location-button-spin {
  to {
    transform: rotate(360deg);
  }
}

.responsibility-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;

  margin-top: 10px;
  padding: 14px 16px;

  border: 1px solid #cfe0ff;
  border-radius: 14px;

  background: #f2f7ff;
}

.responsibility-preview[hidden] {
  display: none;
}

.responsibility-preview span {
  color: #61718a;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.responsibility-preview strong {
  color: #1463ff;
  font-size: 0.95rem;
}

.responsibility-preview small {
  color: #708097;
}