/* ==========================================================================
   UTILITÁRIOS GLOBAIS
   Classes de uso geral que não pertencem a nenhum componente específico.
   ========================================================================== */

/* ─────────────────────────────────────────
   TEXTO
───────────────────────────────────────── */

.center-text {
  text-align: center;
}
.left-text {
  text-align: left;
}
.right-text {
  text-align: right;
}
.text-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────
   LARGURA
───────────────────────────────────────── */

.full-width {
  width: 100% !important;
}
.w-auto {
  width: auto !important;
}

/* ─────────────────────────────────────────
   CURSOR
───────────────────────────────────────── */

.cursor-pointer {
  cursor: pointer;
}
.cursor-default {
  cursor: default;
}
.cursor-disabled {
  cursor: not-allowed;
}

/* ─────────────────────────────────────────
   GAPS — flexbox e grid
   Usados em contêineres de checkboxes,
   legendas de status e outros grupos
───────────────────────────────────────── */

.gap-checkboxes {
  gap: var(--spacing-sm);
}

.gap-xs {
  gap: var(--spacing-xs);
}
.gap-sm {
  gap: var(--spacing-sm);
}
.gap-md {
  gap: var(--spacing-md);
}
.gap-lg {
  gap: var(--spacing-lg);
}
.gap-xl {
  gap: var(--spacing-xl);
}

/* ─────────────────────────────────────────
   VISIBILIDADE
───────────────────────────────────────── */

.is-invisible-mobile {
  /* Mantém espaço mas oculta visualmente */
  visibility: hidden;
}

/* ─────────────────────────────────────────
   BOTÃO FANTASMA — link discreto
───────────────────────────────────────── */

.button.is-ghost {
  background: transparent;
  border: none;
  box-shadow: none;
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

.button.is-ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* ─────────────────────────────────────────
   ANIMAÇÕES GLOBAIS
───────────────────────────────────────── */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}

.animate-fade-in {
  animation: fadeIn var(--transition-speed) ease-out;
}

/* ─────────────────────────────────────────
   RESPONSIVIDADE
───────────────────────────────────────── */

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  .show-mobile {
    display: block !important;
  }

  .is-invisible-mobile {
    display: none;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
  .show-desktop {
    display: block !important;
  }
}