/* ===================== Navbar ===================== */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.topo__conteudo {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--esp-4) 0;
}
.marca {
  display: flex; align-items: center; gap: var(--esp-2);
  font-family: var(--fonte-display); font-weight: 700; font-size: var(--tx-lg);
}
.marca__ponto { color: var(--latao); }

/* ===================== Botões ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  padding: 0.75rem 1.4rem;
  border-radius: var(--raio-sm);
  border: 1px solid transparent;
  font-weight: 600; font-size: var(--tx-sm);
  transition: transform var(--vel-rapida), background var(--vel-rapida), border-color var(--vel-rapida), box-shadow var(--vel-rapida);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primario { background: var(--latao); color: #191305; }
.btn--primario:hover:not(:disabled) { background: var(--latao-forte); box-shadow: var(--sombra-sm); }

.btn--secundario { background: var(--superficie-2); color: var(--texto); border-color: var(--borda); }
.btn--secundario:hover:not(:disabled) { border-color: var(--borda-forte); }

.btn--fantasma { background: transparent; color: var(--texto-suave); }
.btn--fantasma:hover:not(:disabled) { color: var(--texto); background: var(--superficie-2); }

.btn--perigo { background: transparent; color: var(--vermelho-navalha); border-color: color-mix(in srgb, var(--vermelho-navalha) 40%, transparent); }
.btn--perigo:hover:not(:disabled) { background: color-mix(in srgb, var(--vermelho-navalha) 12%, transparent); }

.btn--bloco { width: 100%; }
.btn--pequeno { padding: 0.5rem 0.9rem; font-size: var(--tx-xs); }
.btn--icone { padding: 0.6rem; border-radius: var(--raio-sm); }

/* ===================== Cartões ===================== */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: var(--esp-5);
  box-shadow: var(--sombra-sm);
}
.cartao--interativo { transition: border-color var(--vel-rapida), transform var(--vel-rapida); cursor: pointer; }
.cartao--interativo:hover { border-color: var(--latao); transform: translateY(-2px); }

/* ===================== Formulários ===================== */
.campo { margin-bottom: var(--esp-4); }
.campo label {
  display: block; margin-bottom: var(--esp-2);
  font-size: var(--tx-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--texto-suave); text-transform: uppercase;
}
.entrada, select.entrada, textarea.entrada {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--bg-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  color: var(--texto);
  transition: border-color var(--vel-rapida), box-shadow var(--vel-rapida);
}
.entrada:focus {
  border-color: var(--latao);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--latao) 22%, transparent);
  outline: none;
}
.entrada::placeholder { color: var(--texto-fraco); }
textarea.entrada { resize: vertical; min-height: 90px; }
.ajuda-campo { font-size: var(--tx-2xs); color: var(--texto-fraco); margin-top: var(--esp-1); }
.erro-campo { font-size: var(--tx-2xs); color: var(--vermelho-navalha); margin-top: var(--esp-1); display: none; }
.campo.invalido .entrada { border-color: var(--vermelho-navalha); }
.campo.invalido .erro-campo { display: block; }

/* ===================== Badges de status ===================== */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.3rem 0.7rem; border-radius: var(--raio-pill);
  font-size: var(--tx-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--pendente { background: color-mix(in srgb, var(--amarelo-alerta) 16%, transparent); color: var(--amarelo-alerta); }
.selo--confirmado { background: color-mix(in srgb, var(--verde-ok) 16%, transparent); color: var(--verde-ok); }
.selo--concluido { background: color-mix(in srgb, var(--latao) 18%, transparent); color: var(--latao-forte); }
.selo--cancelado { background: color-mix(in srgb, var(--vermelho-navalha) 16%, transparent); color: var(--vermelho-navalha); }

/* ===================== Toggle de tema ===================== */
.alterna-tema {
  position: relative; width: 52px; height: 30px;
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  transition: background var(--vel-rapida);
}
.alterna-tema__bola {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--latao);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  transition: transform var(--vel-normal);
}
[data-tema="claro"] .alterna-tema__bola { transform: translateX(22px); }

/* ===================== Toast ===================== */
.pilha-toasts {
  position: fixed; bottom: var(--esp-5); right: var(--esp-5); z-index: 100;
  display: flex; flex-direction: column; gap: var(--esp-3);
  max-width: min(360px, calc(100vw - 2 * var(--esp-5)));
}
.toast {
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--latao);
  border-radius: var(--raio-sm); padding: var(--esp-4);
  box-shadow: var(--sombra-md);
  animation: entrar-cima var(--vel-normal) both;
  display: flex; gap: var(--esp-3); align-items: flex-start;
}
.toast--erro { border-left-color: var(--vermelho-navalha); }
.toast--sucesso { border-left-color: var(--verde-ok); }
.toast__titulo { font-weight: 700; font-size: var(--tx-sm); margin-bottom: 2px; }
.toast__msg { font-size: var(--tx-xs); color: var(--texto-suave); margin: 0; }

/* ===================== Modal ===================== */
.modal-fundo {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--esp-4); z-index: 90;
}
.modal {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); padding: var(--esp-6);
  width: 100%; max-width: 460px;
  box-shadow: var(--sombra-lg);
}

/* ===================== Chips de horário ===================== */
.grade-horarios {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--esp-2);
}
.chip-horario {
  padding: 0.65rem 0.5rem;
  text-align: center;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--bg-elevado);
  font-family: var(--fonte-mono); font-weight: 600; font-size: var(--tx-sm);
  transition: all var(--vel-rapida);
}
.chip-horario:hover { border-color: var(--latao); }
.chip-horario.selecionado { background: var(--latao); border-color: var(--latao); color: #191305; }

/* ===================== Barra de progresso de etapas ===================== */
.passos { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-6); }
.passo {
  flex: 1; height: 4px; border-radius: var(--raio-pill); background: var(--superficie-2);
  overflow: hidden; position: relative;
}
.passo::after {
  content: ''; position: absolute; inset: 0; background: var(--latao);
  transform: scaleX(0); transform-origin: left; transition: transform var(--vel-normal);
}
.passo.concluido::after, .passo.ativo::after { transform: scaleX(1); }

/* ===================== Layout de dashboard ===================== */
.app-dash { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral {
  background: var(--bg-elevado); border-right: 1px solid var(--borda);
  padding: var(--esp-5) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-6);
  position: sticky; top: 0; height: 100vh;
}
.nav-lateral { display: flex; flex-direction: column; gap: 2px; }
.nav-lateral__item {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: 0.7rem var(--esp-3); border-radius: var(--raio-sm);
  color: var(--texto-suave); font-weight: 600; font-size: var(--tx-sm);
  transition: background var(--vel-rapida), color var(--vel-rapida);
}
.nav-lateral__item:hover { background: var(--superficie-2); color: var(--texto); }
.nav-lateral__item.ativo { background: color-mix(in srgb, var(--latao) 14%, transparent); color: var(--latao-forte); }
.conteudo-dash { padding: var(--esp-6); max-width: 1240px; }

.cabecalho-pagina {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--esp-6); flex-wrap: wrap; gap: var(--esp-3);
}

.grade-estatisticas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--esp-4); margin-bottom: var(--esp-6);
}
.estatistica { display: flex; flex-direction: column; gap: var(--esp-1); }
.estatistica__valor { font-family: var(--fonte-display); font-size: var(--tx-3xl); font-weight: 700; }
.estatistica__rotulo { font-size: var(--tx-xs); color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.03em; }
.estatistica__variacao { font-size: var(--tx-2xs); font-weight: 600; }
.estatistica__variacao--alta { color: var(--verde-ok); }
.estatistica__variacao--baixa { color: var(--vermelho-navalha); }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; font-size: var(--tx-2xs); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--texto-fraco); padding: var(--esp-3); border-bottom: 1px solid var(--borda);
}
.tabela td { padding: var(--esp-3); border-bottom: 1px solid var(--borda); font-size: var(--tx-sm); }
.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: var(--superficie-2); }

.vazio {
  text-align: center; padding: var(--esp-8) var(--esp-4);
  color: var(--texto-suave);
}

.menu-bottom-mobile {
  display: none;
}

@media (max-width: 880px) {
  .app-dash { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .menu-bottom-mobile {
    display: flex; justify-content: space-around;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--bg-elevado); border-top: 1px solid var(--borda);
    padding: var(--esp-2) 0; padding-bottom: max(var(--esp-2), env(safe-area-inset-bottom));
  }
  .menu-bottom-mobile__item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: var(--tx-2xs); color: var(--texto-fraco); font-weight: 600;
    padding: var(--esp-1) var(--esp-3);
  }
  .menu-bottom-mobile__item.ativo { color: var(--latao); }
  .conteudo-dash { padding: var(--esp-4); padding-bottom: 5.5rem; }
}