/* assets/css/components/joker.css */

.joker-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.joker-btn {
  height: 4.2rem;
  border-radius: var(--radius-10);
  border: 1px solid var(--color-borde-1);
  background: var(--color-tarjeta);

  font-weight: 800;
  font-size: var(--texto-14);
  letter-spacing: 0.02em;

  color: var(--color-texto-principal);
  cursor: pointer;
  user-select: none;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    transform 120ms ease;
}

.joker-btn:hover {
  background: var(--color-hover-suave);
}

.joker-btn:active {
  transform: scale(0.99);
}

.joker-btn.is-active {
  background: var(--color-joker);
  border-color: var(--color-joker);
  color: var(--color-texto-invertido);
}