/* PRESENCEIT — Estilos complementares ao Tailwind CDN */

/* ─── Tipografia e base ─────────────────────────────────────── */
body { background-color: #F4F4F8; }

/* ─── Botões padrão ─────────────────────────────────────────── */
.btn-brand {
  display: inline-flex;
  align-items: center;
  background-color: #7c3aed;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}
.btn-brand:hover   { background-color: #6d28d9; }
.btn-brand:active  { transform: scale(0.98); }
.btn-brand:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: #6b7280;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  border: 1.5px solid #d1d5db;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn-outline:hover { background-color: #f9fafb; border-color: #9ca3af; }

/* ─── Kanban cards ──────────────────────────────────────────── */
.kanban-card { user-select: none; }
.kanban-card:active { cursor: grabbing; }

/* ─── Prose básico para páginas de texto ───────────────────── */
.prose p   { margin-bottom: 0.75rem; line-height: 1.7; }
.prose ul  { margin-bottom: 0.75rem; }
.prose li  { margin-bottom: 0.25rem; }

/* ─── Scrollbar fina (webkit) ───────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─── Animações suaves de fade-in ───────────────────────────── */
.step-panel { animation: fadeIn 0.2s ease; }

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

/* ─── Focus rings acessíveis ────────────────────────────────── */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}