/* EYON Reciclagem: classes de componentes. Depende de tokens.css. */

.ey-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  min-height: 44px; padding: 0 var(--espaco-6);
  font-family: var(--font-manchete); font-weight: 800; font-size: 18px; line-height: 20px;
  letter-spacing: 0.02em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: var(--raio-md);
  background: var(--roxo); color: var(--on-roxo); cursor: pointer;
}
.ey-btn:hover { background: var(--roxo-forte); }
.ey-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ey-btn:disabled { opacity: .5; cursor: not-allowed; }
.ey-btn--acao { background: var(--verde); color: var(--on-verde); }
.ey-btn--acao:hover { background: var(--verde-forte); }
.ey-btn--contorno { background: transparent; color: var(--roxo); border-color: var(--borda-controle); }
.ey-btn--contorno:hover { background: var(--superficie-2); }

.ey-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--espaco-4); }
.ey-passo {
  display: grid; gap: var(--espaco-2); align-content: start;
  padding: var(--espaco-4); border: 1px solid var(--borda); border-radius: var(--raio-md);
  background: var(--superficie); color: var(--tinta);
}
.ey-passo__num {
  width: 32px; height: 32px; border-radius: var(--raio-pill);
  display: grid; place-items: center;
  background: var(--lilas); color: var(--roxo);
  font-family: var(--font-manchete); font-weight: 800; font-size: 18px;
}
.ey-passo__titulo {
  margin: 0; font-family: var(--font-manchete); font-weight: 800; font-size: 18px; line-height: 20px;
  text-transform: uppercase; color: var(--roxo);
}
.ey-passo__texto { margin: 0; font-family: var(--font-texto); font-size: 14px; line-height: 20px; color: var(--tinta-suave); }

.ey-estado {
  display: inline-flex; align-items: center; gap: var(--espaco-1);
  padding: 2px var(--espaco-3); border-radius: var(--raio-pill);
  font-family: var(--font-texto); font-weight: 700; font-size: 13px; line-height: 20px;
  border: 1px solid currentColor; background: var(--superficie-2); color: var(--tinta-suave);
}
.ey-estado::before { content: ""; width: 8px; height: 8px; border-radius: var(--raio-pill); background: currentColor; }
.ey-estado--agendado { color: var(--roxo); background: var(--superficie); }
.ey-estado--coletado { color: var(--verde-texto); background: var(--verde-claro); }
.ey-estado--nao-coletado { color: var(--alerta); background: var(--alerta-claro); }