/* ==========================================================================
   Design tokens — painel de carro à noite
   ========================================================================== */
:root {
  /* Cor */
  --cor-fundo: #12161d;
  --cor-superficie: #1b212b;
  --cor-superficie-alta: #232a36;
  --cor-borda: #2c3543;

  --cor-texto: #f2efe8;
  --cor-texto-muted: #8b93a1;

  --cor-acento: #f2a93b;       /* âmbar de painel — indicador principal */
  --cor-acento-fraco: #f2a93b1a;
  --cor-sucesso: #6fcf97;      /* meta batida */
  --cor-sucesso-fraco: #6fcf9722;
  --cor-alerta: #e4572e;       /* custo alto / atenção */
  --cor-alerta-fraco: #e4572e1f;

  /* Tipografia */
  --fonte-display: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --fonte-corpo: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaçamento */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;

  --raio: 14px;
  --raio-peq: 8px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

.oculto {
  display: none !important;
}

[x-cloak] {
  display: none !important;
}

/* Foco visível — acessibilidade, nunca remover */
:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Layout geral
   ========================================================================== */
.tela {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--espaco-5) var(--espaco-4) var(--espaco-6);
}

.topo-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-2) 0 var(--espaco-4);
}

.topo-app__marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-family: var(--fonte-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-muted);
}

.topo-app__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-sucesso);
  box-shadow: 0 0 8px var(--cor-sucesso);
}

/* ==========================================================================
   Cartão / superfície
   ========================================================================== */
.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--espaco-5);
}

.cartao + .cartao {
  margin-top: var(--espaco-4);
}

/* ==========================================================================
   Hero — indicador principal (arco tipo velocímetro)
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--espaco-6) var(--espaco-5) var(--espaco-5);
}

.hero__arco-wrap {
  position: relative;
  width: 240px;
  height: 240px;
}

.hero__arco-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hero__arco-fundo {
  fill: none;
  stroke: var(--cor-superficie-alta);
  stroke-width: 14;
}

.hero__arco-progresso {
  fill: none;
  stroke: var(--cor-acento);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s ease;
}

.hero__arco-progresso.bateu {
  stroke: var(--cor-sucesso);
}

.hero__conteudo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-1);
}

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-muted);
}

.hero__valor {
  font-family: var(--fonte-display);
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.hero__valor.bateu {
  color: var(--cor-sucesso);
}

.hero__legenda {
  font-size: 13px;
  color: var(--cor-texto-muted);
}

.hero__status {
  margin-top: var(--espaco-5);
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-4);
  border-radius: 999px;
  background: var(--cor-acento-fraco);
  color: var(--cor-acento);
  font-size: 13px;
  font-weight: 600;
}

.hero__status.bateu {
  background: var(--cor-sucesso-fraco);
  color: var(--cor-sucesso);
}

/* ==========================================================================
   Grade de resumo (custo fixo / variável / faturado)
   ========================================================================== */
.grade-resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-3);
  margin-top: var(--espaco-5);
}

.resumo-item {
  text-align: center;
}

.resumo-item__rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-muted);
}

.resumo-item__valor {
  font-family: var(--fonte-display);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  margin-top: var(--espaco-1);
}

/* ==========================================================================
   Ação rápida — lançar corrida
   ========================================================================== */
.acao-rapida {
  display: flex;
  gap: var(--espaco-3);
}

.campo-valor {
  flex: 1;
  background: var(--cor-superficie-alta);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-peq);
  padding: var(--espaco-3) var(--espaco-4);
  color: var(--cor-texto);
  font-family: var(--fonte-display);
  font-size: 18px;
}

.campo-valor::placeholder {
  color: var(--cor-texto-muted);
  font-family: var(--fonte-corpo);
}

.botao {
  border: none;
  border-radius: var(--raio-peq);
  padding: var(--espaco-3) var(--espaco-5);
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.botao:active {
  transform: scale(0.97);
}

.botao--acento {
  background: var(--cor-acento);
  color: #1a1206;
}

.botao--fantasma {
  background: transparent;
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}

.botao:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   Lista (corridas do dia, custos)
   ========================================================================== */
.lista-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-3) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.lista-item:last-child {
  border-bottom: none;
}

.lista-item__hora {
  font-size: 12px;
  color: var(--cor-texto-muted);
}

.lista-item__valor {
  font-family: var(--fonte-display);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Navegação inferior
   ========================================================================== */
.nav-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  padding: var(--espaco-2) 0 calc(var(--espaco-2) + env(safe-area-inset-bottom));
}

.nav-inferior__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--cor-texto-muted);
  font-size: 11px;
  padding: var(--espaco-2) var(--espaco-3);
}

.nav-inferior__item.ativo {
  color: var(--cor-acento);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (min-width: 480px) {
  .tela {
    padding-top: var(--espaco-6);
  }
}

/* ==========================================================================
   Formulários (login, custos, metas)
   ========================================================================== */
.form-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-4);
}

.form-grupo label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-muted);
}

.form-campo,
.form-select {
  background: var(--cor-superficie-alta);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-peq);
  padding: var(--espaco-3) var(--espaco-4);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  width: 100%;
}

.form-campo::placeholder {
  color: var(--cor-texto-muted);
}

.form-acoes {
  display: flex;
  gap: var(--espaco-3);
  margin-top: var(--espaco-5);
}

.form-acoes .botao {
  flex: 1;
}

.erro-msg {
  background: var(--cor-alerta-fraco);
  color: var(--cor-alerta);
  border-radius: var(--raio-peq);
  padding: var(--espaco-3) var(--espaco-4);
  font-size: 13px;
  margin-bottom: var(--espaco-4);
}

.link-texto {
  background: none;
  border: none;
  color: var(--cor-acento);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tela de login/splash */
.tela-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tela-login__marca {
  text-align: center;
  margin-bottom: var(--espaco-6);
}

.tela-login__marca h1 {
  font-family: var(--fonte-display);
  font-size: 20px;
  letter-spacing: 0.02em;
}

.tela-login__marca p {
  color: var(--cor-texto-muted);
  font-size: 13px;
  margin-top: var(--espaco-1);
}

/* Cabecalho de secao interna */
.secao-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-4);
}

.secao-titulo h2 {
  font-size: 16px;
}

.vazio-estado {
  text-align: center;
  color: var(--cor-texto-muted);
  font-size: 13px;
  padding: var(--espaco-6) var(--espaco-4);
}

/* Badge de status (tenant / custo) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge--ativo { background: var(--cor-sucesso-fraco); color: var(--cor-sucesso); }
.badge--inadimplente { background: var(--cor-alerta-fraco); color: var(--cor-alerta); }
.badge--cancelado { background: var(--cor-superficie-alta); color: var(--cor-texto-muted); }

/* ==========================================================================
   Painel administrativo
   ========================================================================== */
.tabela-admin {
  width: 100%;
  border-collapse: collapse;
}

.tabela-admin th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-muted);
  padding: var(--espaco-2) var(--espaco-2);
  border-bottom: 1px solid var(--cor-borda);
}

.tabela-admin td {
  padding: var(--espaco-3) var(--espaco-2);
  border-bottom: 1px solid var(--cor-borda);
  font-size: 14px;
}

.tabela-admin__acoes {
  display: flex;
  gap: var(--espaco-2);
}

.botao-mini {
  border: 1px solid var(--cor-borda);
  background: transparent;
  color: var(--cor-texto);
  border-radius: var(--raio-peq);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}

.botao-mini--alerta {
  border-color: var(--cor-alerta);
  color: var(--cor-alerta);
}

.botao-mini--sucesso {
  border-color: var(--cor-sucesso);
  color: var(--cor-sucesso);
}

/* ==========================================================================
   Mini gráfico de histórico (barras, sem lib externa)
   ========================================================================== */
.grafico-barras {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  margin-top: var(--espaco-4);
}

.grafico-barras__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.grafico-barras__barra {
  width: 100%;
  background: var(--cor-acento);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}

.grafico-barras__rotulo {
  font-size: 9px;
  color: var(--cor-texto-muted);
}

/* Tela de carregamento / sem conexao */
.tela-status {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
}

.tela-status p {
  color: var(--cor-texto-muted);
  font-size: 14px;
  max-width: 280px;
}