/* ─── Botões ──────────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: var(--texto-base);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition:
    transform var(--rapido),
    box-shadow var(--normal),
    background var(--normal),
    border-color var(--normal),
    filter var(--normal);
  white-space: nowrap;
  user-select: none;
}

.btn:active {
  transform: translateY(2px);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  filter: saturate(0.5);
}

.btn--primario {
  background: linear-gradient(
    180deg,
    var(--marca-laranja-brilho) 0%,
    var(--marca-laranja-claro) 42%,
    var(--marca-laranja) 72%,
    var(--marca-laranja-escuro) 100%
  );
  color: var(--marca-laranja-tinta);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.35);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -2px 0 rgb(0 0 0 / 0.22),
    0 8px 0 -2px #8a2d05,
    var(--glow-laranja);
}
@media (hover: hover) {
  .btn--primario:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.6),
      inset 0 -2px 0 rgb(0 0 0 / 0.22),
      0 10px 0 -2px #8a2d05,
      0 0 0 1px rgb(249 115 22 / 0.6),
      0 18px 44px -10px rgb(249 115 22 / 0.7);
  }
}


.btn--primario:active:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    0 4px 0 -2px #8a2d05,
    var(--glow-laranja);
}

.btn--secundario {
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border-color: var(--borda-forte);
  color: var(--texto);
  box-shadow: var(--relevo);
}
@media (hover: hover) {
  .btn--secundario:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--superficie-3), var(--superficie-2));
    border-color: var(--marca-laranja);
    transform: translateY(-2px);
  }
}


.btn--fantasma {
  color: var(--texto-suave);
  padding-inline: var(--e3);
  font-weight: 600;
}
@media (hover: hover) {
  .btn--fantasma:hover:not(:disabled) {
    color: var(--texto);
    background: rgb(255 255 255 / 0.06);
  }
}


.btn--grande {
  padding: var(--e4) var(--e7);
  font-size: var(--texto-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.btn--bloco {
  width: 100%;
}

.btn__icone {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

/* ─── Chips de filtro ─────────────────────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border-radius: var(--r-full);
  border: 1px solid var(--borda);
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: 600;
  box-shadow: var(--relevo);
  transition: all var(--rapido);
}
@media (hover: hover) {
  .chip:hover:not(:disabled) {
    border-color: var(--borda-forte);
    color: var(--texto);
    transform: translateY(-1px);
  }
}


.chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.chip[aria-pressed='true'] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chip-cor, var(--marca-laranja)) 34%, var(--superficie-2)),
    color-mix(in srgb, var(--chip-cor, var(--marca-laranja)) 14%, var(--superficie))
  );
  border-color: var(--chip-cor, var(--marca-laranja));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    0 0 0 1px color-mix(in srgb, var(--chip-cor, var(--marca-laranja)) 55%, transparent),
    0 8px 24px -8px color-mix(in srgb, var(--chip-cor, var(--marca-laranja)) 80%, transparent);
}

.chip__ponto {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--chip-cor, var(--marca-laranja));
  box-shadow: 0 0 10px var(--chip-cor, var(--marca-laranja));
  flex-shrink: 0;
}

.chip__contagem {
  font-size: var(--texto-xs);
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.chip[aria-pressed='true'] .chip__contagem {
  color: rgb(255 255 255 / 0.75);
}

/* ─── Cartões ─────────────────────────────────────────────────────────────── */

.cartao {
  position: relative;
  background: linear-gradient(165deg, var(--superficie-2), var(--fundo-alt));
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: var(--e5);
  box-shadow: var(--relevo), var(--sombra-md);
}

/* Fio de luz no topo, o que dá a sensação de superfície iluminada. */
.cartao::before {
  content: '';
  position: absolute;
  inset-inline: 14%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
}

.cartao--interativo {
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition:
    transform var(--normal),
    border-color var(--normal),
    box-shadow var(--normal);
}
@media (hover: hover) {
  .cartao--interativo:hover:not(:disabled) {
    transform: translateY(-4px);
    border-color: var(--borda-forte);
    box-shadow: var(--relevo), var(--sombra-lg);
  }
}


.cartao--interativo:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Barra de progresso ──────────────────────────────────────────────────── */

.progresso {
  height: 10px;
  border-radius: var(--r-full);
  background: rgb(0 0 0 / 0.55);
  border: 1px solid var(--borda);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.6);
}

.progresso__preenchimento {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--marca-laranja-brilho), var(--marca-laranja));
  box-shadow: 0 0 14px rgb(255 176 32 / 0.8);
  transition: width var(--normal);
}

.progresso--tempo .progresso__preenchimento {
  transition: width 250ms linear;
}

.progresso--tempo[data-nivel='atencao'] .progresso__preenchimento {
  background: linear-gradient(90deg, #fde047, #f59e0b);
  box-shadow: 0 0 14px rgb(245 158 11 / 0.85);
}

.progresso--tempo[data-nivel='critico'] .progresso__preenchimento {
  background: linear-gradient(90deg, #fb7185, var(--erro));
  box-shadow: 0 0 18px rgb(244 63 94 / 0.9);
  animation: pulsar 700ms ease-in-out infinite;
}

@keyframes pulsar {
  50% {
    opacity: 0.5;
  }
}

/* ─── Selo / etiqueta ─────────────────────────────────────────────────────── */

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 3px var(--e2);
  border-radius: var(--r-sm);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--superficie-3);
  color: var(--texto-suave);
  border: 1px solid var(--borda);
}

.selo--facil {
  color: #86efac;
  border-color: rgb(34 197 94 / 0.5);
  background: rgb(34 197 94 / 0.16);
}

.selo--medio {
  color: #fcd34d;
  border-color: rgb(251 191 36 / 0.5);
  background: rgb(251 191 36 / 0.16);
}

.selo--dificil {
  color: #fda4af;
  border-color: rgb(244 63 94 / 0.5);
  background: rgb(244 63 94 / 0.16);
}

/* ─── Avisos e carregamento ───────────────────────────────────────────────── */

.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--r-md);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.aviso--erro {
  border-color: rgb(244 63 94 / 0.5);
  background: var(--erro-fundo);
  color: #fecdd3;
}

.carregando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
  padding: var(--e8) var(--e4);
  color: var(--texto-fraco);
}

.girador {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid rgb(255 255 255 / 0.08);
  border-top-color: var(--marca-laranja-claro);
  box-shadow: 0 0 26px rgb(249 115 22 / 0.45);
  animation: girar 800ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Toast ───────────────────────────────────────────────────────────────── */

.toasts {
  position: fixed;
  bottom: max(var(--e5), env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  z-index: 60;
  width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  padding: var(--e3) var(--e4);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--superficie-3), var(--superficie));
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-lg);
  font-size: var(--texto-sm);
  font-weight: 600;
  text-align: center;
  animation: subir var(--elastico) both;
}

.toast--erro {
  border-color: rgb(244 63 94 / 0.6);
  background: linear-gradient(180deg, #4a0f1f, var(--erro-fundo));
  color: #fecdd3;
}

.toast--sucesso {
  border-color: rgb(34 197 94 / 0.6);
  background: linear-gradient(180deg, #0a4023, var(--sucesso-fundo));
  color: #bbf7d0;
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
}