@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --bg-app: #fbfbf7;
  --ink: #14231c;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-app);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.card-soft {
  background: #ffffff;
  border: 1px solid #ecebe4;
  border-radius: 20px;
  transition: all 0.2s ease-in-out;
}

.mobile-nav-pill {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #ecebe4;
}

.input-calm {
  background-color: #f6f6f1;
  border: 1.5px solid #ecebe4;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  transition: all 0.2s ease;
  width: 100%;
}

.input-calm:focus {
  background-color: #ffffff;
  border-color: #84cc16;
  box-shadow: 0 0 0 4px rgba(132, 204, 22, 0.15);
  outline: none;
}

/* anel de progresso do hero (recebido hoje sobre carteira em aberto) */
.progress-ring {
  border-radius: 999px;
  background: conic-gradient(#84cc16 calc(var(--pct) * 1%), #2a352d calc(var(--pct) * 1%));
}
.progress-ring-inner {
  background: var(--ink);
  border-radius: 999px;
}

.route-row {
  border-bottom: 1px solid #ecebe4;
}
.route-row:last-child {
  border-bottom: none;
}

.mini-bar {
  background: #ecebe4;
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
}
.mini-bar > span {
  display: block;
  height: 100%;
  background: #84cc16;
  border-radius: 999px;
}