/* ---------- Shell ---------- */
.dashboard-shell {
  display: flex;
  height: 100vh;
}

/*
 * A barra lateral tem cor própria (#1f1f1f) nos dois temas, em vez de seguir o
 * fundo: o conteúdo é branco e a navegação é o painel escuro. Por isso tudo o
 * que vive aqui dentro lê os tokens `--sidebar-*`, nunca os globais — herdar
 * `--muted-foreground` daria texto escuro sobre cinza escuro no tema claro.
 */
.dashboard-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: hsl(var(--sidebar-bg));
  color: hsl(var(--sidebar-foreground));
  border-right: 1px solid hsl(var(--sidebar-edge));
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3) var(--space-3);
  transition: width var(--duration-base) var(--ease-out);
}

/* botão de menu: só aparece nas larguras pequenas */
.sidebar-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid hsl(var(--sidebar-border));
  border-radius: var(--radius-sm);
  background: transparent;
  color: hsl(var(--sidebar-foreground));
  cursor: pointer;
  flex-shrink: 0;
}

.dashboard-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem;
  margin-bottom: 1.25rem;
}

/*
 * Recolher o menu era um item escondido no rodapé, escrito "Recolher", abaixo
 * de catorze linhas de navegação — ninguém achava. Aqui ele fica na altura da
 * marca, que é onde se procura por esse controle.
 */
.sidebar-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: auto;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: hsl(var(--sidebar-muted));
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.sidebar-collapse-toggle:hover {
  background: var(--sidebar-hover);
  color: hsl(var(--sidebar-foreground));
}

.sidebar-collapse-toggle:focus-visible {
  outline: var(--ring-width) solid hsl(var(--sidebar-accent));
  outline-offset: 2px;
}

/* Recolhida, a linha da marca só tem o selo e a seta: empilhar os dois mantém
   os dois clicáveis sem espremer nenhum. */
.dashboard-sidebar.is-collapsed .dashboard-sidebar-logo {
  flex-direction: column;
  gap: 0.35rem;
  padding: 0;
}

.dashboard-sidebar.is-collapsed .sidebar-collapse-toggle {
  margin-left: 0;
}

.sidebar-logo {
  max-width: 100%;
  height: 2.75rem;
  object-fit: contain;
  object-position: left center;
}

/*
 * A barra é escura nos dois temas, então aqui vale sempre a variante branca.
 * A versão escura do arquivo continua no HTML para o menu mobile em tela
 * clara e para quem precisar dela em outro lugar.
 */
.sidebar-logo.is-light {
  display: none;
}

/* Com a barra recolhida, só o selo quadrado aparece. */
.sidebar-logo-mini {
  display: none;
}

.dashboard-sidebar.is-collapsed .sidebar-logo {
  display: none;
}

.dashboard-sidebar.is-collapsed .sidebar-logo-mini {
  display: block;
}

.sidebar-new-sale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dashboard-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  overflow-y: auto;
  padding-right: var(--space-1);
}

/* Rótulo do grupo: separa os blocos sem gastar uma linha de menu. */
.dashboard-nav-section {
  padding: var(--space-5) var(--space-3) var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--sidebar-muted-subtle));
}

.dashboard-nav-section:first-child {
  padding-top: 0;
}

.dashboard-sidebar.is-collapsed .dashboard-nav-section {
  height: 0;
  margin: var(--space-3) auto;
  padding: 0;
  width: 1.5rem;
  overflow: hidden;
  text-indent: -999px;
  border-top: 1px solid hsl(var(--sidebar-border));
}

.dashboard-sidebar.is-collapsed .dashboard-nav-section:first-child {
  margin-top: 0;
  border-top: 0;
}

.dashboard-sidebar.is-collapsed {
  width: var(--sidebar-width-collapsed);
}

.dashboard-sidebar.is-collapsed .sidebar-label {
  display: none;
}

.dashboard-sidebar.is-collapsed .dashboard-nav-item,
.dashboard-sidebar.is-collapsed .sidebar-new-sale {
  justify-content: center;
}

.dashboard-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem var(--space-3);
  border-radius: var(--radius-sm);
  color: hsl(var(--sidebar-muted));
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  text-align: left;
  width: 100%;
}

.dashboard-nav-item svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.dashboard-nav-item:hover:not(.is-disabled) {
  background: var(--sidebar-hover);
  color: hsl(var(--sidebar-foreground));
}

.dashboard-nav-item.is-active {
  background: hsl(var(--sidebar-accent) / 0.16);
  color: hsl(var(--sidebar-accent));
  font-weight: var(--weight-semibold);
}

.dashboard-nav-item.is-active svg {
  opacity: 1;
}

/* Trilho fino à esquerda: o item ativo é reconhecível mesmo de relance. */
.dashboard-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1.1rem;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: hsl(var(--sidebar-accent));
  transform: translateY(-50%);
}

.dashboard-nav-item.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.dashboard-nav-group-toggle svg:last-child {
  transition: transform 0.15s ease;
}

.dashboard-nav-children {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.4rem;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
}

.dashboard-nav-children.is-expanded {
  display: flex;
}

.dashboard-nav-children.is-expanded ~ .dashboard-nav-group-toggle svg:last-child,
.dashboard-nav-group-toggle:has(+ .dashboard-nav-children.is-expanded) svg:last-child {
  transform: rotate(180deg);
}

.dashboard-nav-item.is-child {
  font-size: 0.87rem;
  padding-left: 0.75rem;
}

.dashboard-sidebar.is-collapsed .dashboard-nav-children,
.dashboard-sidebar.is-collapsed .dashboard-nav-group-toggle svg:last-child {
  display: none;
}

.dashboard-nav-badge {
  margin-left: auto;
  font-size: 0.7rem;
  background: hsl(var(--sidebar-surface));
  color: hsl(var(--sidebar-muted));
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}

/* Conta e sessão não são navegação — a borda deixa isso explícito. */
.dashboard-sidebar-footer {
  border-top: 1px solid hsl(var(--sidebar-border));
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-profile-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid hsl(var(--sidebar-border));
  border-radius: var(--radius-md);
  background: hsl(var(--sidebar-surface));
  color: hsl(var(--sidebar-foreground));
  min-width: 0;
}

.sidebar-profile-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-profile-name {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.sidebar-profile-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: hsl(45 90% 15%);
  background: hsl(45 90% 55%);
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ---------- Main area ---------- */
.dashboard-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background));
}

.dashboard-topbar h1 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.dashboard-topbar-subtitle {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin-top: 0.1rem;
}

/*
 * A fileira de ícones era uma parede sem hierarquia. Agora os utilitários ficam
 * num grupo próprio, com um separador antes do bloco da conta.
 */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.topbar-actions > .icon-btn {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-sm);
  color: hsl(var(--muted-foreground));
}

.topbar-actions > .icon-btn:hover {
  background: var(--hover-overlay);
  color: hsl(var(--foreground));
}

.topbar-divider {
  width: 1px;
  height: 1.25rem;
  margin: 0 var(--space-2);
  background: hsl(var(--border));
  flex-shrink: 0;
}

.link-like {
  color: hsl(var(--primary));
  font-size: 0.85rem;
  font-weight: 500;
}

.topbar-dropdown-wrap {
  position: relative;
}

.topbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 320px;
  max-height: 24rem;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 60;
  animation: scale-in 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar-dropdown.is-open {
  display: block;
}

.topbar-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1rem 0.75rem;
}

.topbar-dropdown-header h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  flex: 1;
}

.topbar-dropdown-progress {
  height: 0.35rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
  margin: 0 1rem 0.75rem;
}

.topbar-dropdown-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-primary);
  width: 0%;
  transition: width 0.2s ease;
}

.topbar-dropdown-body {
  padding: 0 0.5rem 0.75rem;
}

.topbar-dropdown-footer {
  padding: 0.85rem 1rem;
  border-top: 1px solid hsl(var(--border));
}

.topbar-dropdown-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

.topbar-dropdown-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.topbar-dropdown-item:hover {
  background: hsl(var(--muted) / 0.5);
}

.topbar-dropdown-item-label {
  flex: 1;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-dropdown-item.is-done .topbar-dropdown-item-label {
  text-decoration: line-through;
  color: hsl(var(--muted-foreground));
}

.icon-btn.is-decorative {
  cursor: pointer;
}

.topbar-goal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.85rem;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.topbar-goal-pill:hover {
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--primary) / 0.08);
}

.topbar-goal-pill .is-muted {
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  margin-left: 0.2rem;
}

.topbar-user-avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.topbar-user-name {
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Menu do perfil (Configurações / Sair) */
.topbar-dropdown.is-right {
  width: 240px;
  padding: 0.5rem;
}

.topbar-user-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.85rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--foreground));
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.topbar-user-menu-item:hover {
  background: hsl(var(--muted));
}

.topbar-user-menu-item.is-danger {
  color: hsl(var(--destructive));
}

.topbar-user-menu-item.is-danger:hover {
  background: hsl(var(--destructive) / 0.12);
}

.topbar-user-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: hsl(45 90% 15%);
  background: hsl(45 90% 55%);
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

@media (max-width: 1180px) {
  .topbar-goal-pill,
  .topbar-user-name {
    display: none;
  }
}

.dashboard-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow);
  z-index: 40;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation: glow-pulse 2.5s ease-in-out infinite;
}

.dashboard-fab:hover {
  filter: brightness(1.08);
  transform: scale(1.08);
}

.dashboard-content {
  flex: 1;
  min-height: 0;
  padding: 2rem;
  overflow-y: auto;
}

/* ---------- Summary cards ---------- */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/*
 * Card de painel não pula no hover — isso é enfeite de template e atrapalha a
 * leitura de números. A resposta é a borda ganhar contraste.
 */
.summary-card,
.stat-card,
.chart-card,
.feature-card {
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  animation: fade-in var(--duration-slow) var(--ease-out);
}

.summary-card:hover,
.stat-card:hover,
.chart-card:hover,
.feature-card:hover {
  border-color: hsl(var(--border-strong));
  box-shadow: var(--shadow-sm);
}

/*
 * Mesma anatomia do `.stat-card` da Home: rótulo em cima, número embaixo. O
 * markup traz o valor primeiro, então quem inverte é o `order` — assim as duas
 * telas leem igual sem reescrever o HTML de cada uma.
 */
.summary-card {
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.summary-card .summary-value {
  order: 2;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
}

.summary-card .summary-label {
  order: 1;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
  margin-top: 0;
}

.summary-card.is-total .summary-value {
  color: hsl(var(--primary));
}

.values-hidden .value-sensitive {
  filter: blur(6px);
  user-select: none;
}

/* ---------- Home: date filter ---------- */
.home-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.home-filter-row .field-hint {
  margin-right: 0.25rem;
}

.home-filter-row input[type="date"] {
  height: 2.375rem;
  width: auto;
}

/* ---------- Home: filtros rápidos de período ---------- */
.quick-filter-wrap {
  position: relative;
}

.quick-filter-btn {
  height: 2.375rem;
  padding: 0 var(--space-3);
  width: auto;
  font-size: var(--text-base);
}

.quick-filter-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  padding: 0.6rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  min-width: 17rem;
}

.quick-filter-menu.is-open {
  display: grid;
}

.quick-filter-item {
  padding: 0.7rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--foreground));
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.quick-filter-item:hover {
  background: hsl(var(--muted));
}

.quick-filter-item.is-active {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  font-weight: 600;
}

/* ---------- Home: modo de edição de widgets ---------- */
.home-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.home-edit-hint {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  border: 1px solid hsl(var(--primary) / 0.35);
  border-radius: var(--radius);
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  font-size: 0.9rem;
}

.widget-drag-handle {
  display: none;
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 0.85rem;
  cursor: grab;
  background-image: radial-gradient(circle, hsl(var(--muted-foreground)) 1.2px, transparent 1.3px);
  background-size: 6px 6px;
  background-position: center;
  z-index: 2;
}

.is-editing-widgets [data-widget] {
  position: relative;
  outline: 1px dashed hsl(var(--primary) / 0.55);
  outline-offset: 2px;
}

.is-editing-widgets [data-widget]:hover {
  transform: none;
}

.is-editing-widgets .widget-drag-handle {
  display: block;
}

.is-editing-widgets [data-widget].is-dragging {
  opacity: 0.45;
  outline-style: solid;
}

/* Fora do modo de edição, widgets desmarcados somem de vez. */
[data-widget].is-widget-hidden {
  display: none;
}

.is-editing-widgets [data-widget].is-widget-hidden {
  display: none;
}

.pw-group {
  margin-bottom: 1.25rem;
}

.pw-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.15rem;
  cursor: pointer;
  font-size: 0.92rem;
}

.pw-item input {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

/* ---------- Home: welcome banner ---------- */
.welcome-banner {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.welcome-banner-thumb {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 90px;
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary-foreground));
  cursor: pointer;
}

.welcome-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--primary));
  margin-bottom: 0.35rem;
}

.welcome-banner h3 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.welcome-banner p {
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.85rem;
}

.welcome-banner-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.welcome-banner-actions .btn {
  width: auto;
  height: 2.5rem;
  padding: 0 1.1rem;
}

.welcome-banner-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: hsl(var(--muted-foreground));
  padding: 0.3rem;
  border-radius: var(--radius-sm);
}

.welcome-banner-close:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

/* ---------- Home: goal + stat cards ---------- */
.home-top-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: stretch;
}

/* A meta tem mais partes; o rodapé desce para o pé do card e iguala a altura. */
.goal-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.goal-card .goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.goal-card .goal-header h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
}

.goal-card .goal-sub {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
  margin: 0 0 auto;
}

.goal-values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  margin: var(--space-4) 0 var(--space-2);
}

/* O alvo é referência, não resultado: pesa menos que o valor alcançado. */
.goal-values > span:last-child {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
}

.goal-progress-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.goal-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  transition: width var(--duration-slow) var(--ease-out);
}

.goal-footnote {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
}

/*
 * O card empilhava ícone → número → rótulo, o que deixava um vazio grande
 * embaixo quando não havia linha de apoio. As áreas põem o rótulo e o ícone na
 * mesma linha de topo e o número como protagonista, sem mexer no HTML.
 */
.stat-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "value value"
    "sub   sub";
  align-content: start;
  gap: var(--space-1) var(--space-3);
}

.stat-card-icon {
  grid-area: icon;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-sm);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.stat-card-icon svg {
  width: 1rem;
  height: 1rem;
}

.stat-card .stat-value {
  grid-area: value;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
}

.stat-card .stat-label {
  grid-area: label;
  align-self: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
  margin: 0;
}

.stat-card .stat-sub {
  grid-area: sub;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
  margin-top: var(--space-2);
}

/* ---------- Home: chart card ---------- */
.chart-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.chart-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.chart-card-header h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.chart-card-header p {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
  margin-top: var(--space-1);
}

/* A legenda é apoio: fica separada do gráfico por uma linha, não solta. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid hsl(var(--border));
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chart-legend .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Home: feature card grid ---------- */
/* `grid-auto-rows: 1fr` iguala a altura dos cards linha a linha. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.feature-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  min-height: 13.75rem;
}

.feature-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.feature-card-header h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* O ícone do título vinha em tamanhos variados conforme o conjunto de ícones. */
.feature-card-header h3 svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

.feature-card-header .icon-btn {
  color: hsl(var(--muted-foreground));
}

/* Link de "ver mais": um só desenho para todos os cards. */
.feature-header-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-xs);
  color: hsl(var(--muted-foreground));
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.feature-header-link svg {
  width: 0.875rem;
  height: 0.875rem;
}

.feature-header-link:hover {
  background: var(--hover-overlay);
  color: hsl(var(--primary-light));
}

.feature-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  color: hsl(var(--muted-foreground-subtle));
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}

/* O ícone era uma mancha grande no meio do card; vira uma marca discreta. */
.feature-empty .feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground-subtle));
}

.feature-empty .feature-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.feature-empty a,
.feature-empty button.link-like {
  color: hsl(var(--primary-light));
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.feature-card .mini-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Campo e botão na mesma altura da escala densa. */
.feature-card .mini-input-row input {
  flex: 1;
  min-width: 0;
  height: 2.375rem;
}

.feature-card .mini-input-row button {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-header-link {
  font-size: 0.78rem;
  font-weight: 500;
  color: hsl(var(--primary));
  flex-shrink: 0;
}

.mini-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: 230px;
  overflow-y: auto;
}

.mini-list-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid hsl(var(--border));
}

.mini-list-item:last-child {
  border-bottom: none;
}

.mini-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid hsl(var(--border));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary-foreground));
  background: transparent;
}

.mini-checkbox.is-checked {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.mini-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.mini-list-title {
  font-size: 0.85rem;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-list-item.is-done .mini-list-title {
  text-decoration: line-through;
  color: hsl(var(--muted-foreground));
}

.mini-list-meta {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.mini-list-date {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.mini-list-delete {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

.mini-list-delete:hover {
  color: hsl(var(--destructive));
}

/* ---------- Home: diagnostic + health cards ---------- */
.diagnostic-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
}

.diagnostic-card .feature-icon {
  color: hsl(var(--primary) / 0.5);
  margin-bottom: 1rem;
}

.diagnostic-card h3 {
  color: hsl(var(--foreground));
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.diagnostic-card .diagnostic-eta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: hsl(var(--primary));
}

.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.nps-stats {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
}

.nps-stat {
  text-align: center;
}

.nps-stat .nps-value {
  font-size: 1.3rem;
  font-weight: 800;
}

.nps-stat .nps-label {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
}

.churn-warning {
  font-size: 0.8rem;
  color: hsl(var(--destructive));
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 1100px) {
  .home-top-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .home-top-grid,
  .feature-grid,
  .health-grid {
    grid-template-columns: 1fr;
  }
  .welcome-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .welcome-banner-thumb {
    width: 100%;
  }
}

@media (max-width: 1150px) {
  .team-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .team-plan-grid { grid-template-columns: 1fr; }
  .team-billing-toggle { width: 100%; }
  .team-billing-toggle button { flex: 1; min-width: 0; }
}

/* ---------- Abas de Tarefas ---------- */
.tasks-module-tabs {
  display: flex;
  width: fit-content;
  gap: .35rem;
  margin-bottom: 1.2rem;
  padding: .35rem;
  border-radius: .7rem;
  background: hsl(var(--muted));
}
.tasks-module-tabs button {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.tasks-module-tabs button.is-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 4px hsl(0 0% 0% / .08);
}
.tasks-module-tabs button > span {
  padding: .12rem .4rem;
  border-radius: 999px;
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
  font-size: .65rem;
  font-weight: 700;
}

@media (max-width: 520px) {
  .tasks-module-tabs { width: 100%; }
  .tasks-module-tabs button { flex: 1; justify-content: center; }
}

/* ---------- Clientes: page toolbar ---------- */
.page-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.view-toggle-group {
  display: flex;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.view-toggle-group button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
  white-space: nowrap;
}

.view-toggle-group button.is-active {
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: hsl(var(--primary) / 0.5);
}

.clientes-search-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.clientes-search-row .field-control {
  flex: 1;
  min-width: 240px;
}

.archived-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.archived-badge {
  font-size: 0.7rem;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.5rem;
}

/* ---------- Clientes: grid view ---------- */
.clientes-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
  padding: 1.25rem;
}

.cliente-card {
  position: relative;
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition-smooth);
}

.cliente-card:hover {
  border-color: hsl(var(--primary) / 0.45);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.cliente-card.is-archived {
  opacity: 0.55;
}

/* Faixa fina de status no topo do card. */
.cliente-card-status {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: hsl(var(--border-strong));
}
.cliente-card-status.status-lead { background: hsl(217 85% 60%); }
.cliente-card-status.status-contato { background: hsl(190 70% 55%); }
.cliente-card-status.status-proposta { background: hsl(45 85% 55%); }
.cliente-card-status.status-negociacao { background: hsl(22 85% 55%); }
.cliente-card-status.status-cliente { background: hsl(var(--success)); }
.cliente-card-status.status-perdido { background: hsl(var(--destructive)); }

.cliente-card-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.cliente-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.cliente-card-ident {
  min-width: 0;
}

.cliente-card-ident h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cliente-card-sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cliente-card-grupo {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.cliente-card-contato {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
}

.cliente-card-contato span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.cliente-card-contato svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground-subtle));
}

.cliente-card-contato a,
.cliente-card-contato span > :not(svg) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cliente-card-contato a {
  color: inherit;
}

.cliente-card-contato a:hover {
  color: hsl(var(--primary));
}

.cliente-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cliente-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.cliente-card-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid hsl(var(--border));
}

.cliente-card-valor {
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--success));
}

.cliente-card-status-label {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

.cliente-card-botoes {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.cliente-card-botoes .icon-btn.is-accent {
  color: hsl(var(--destructive));
}

/* Menu "…" flutuante do card. */
.cliente-menu {
  position: absolute;
  z-index: 70;
  width: 190px;
  padding: 0.35rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.cliente-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.cliente-menu button:hover {
  background: hsl(var(--muted));
}

@media (max-width: 640px) {
  .page-actions-row {
    justify-content: flex-start;
  }
}

/* ---------- Table ---------- */
.data-table-wrap {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.data-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  flex-wrap: wrap;
}

.data-table-toolbar .select {
  height: 2.75rem;
  width: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th {
  text-align: left;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
}

.data-table td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: hsl(var(--muted) / 0.5);
}

.data-table tbody tr.is-archived {
  opacity: 0.55;
}

.table-scroll {
  overflow-x: auto;
}

.row-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: hsl(var(--muted-foreground));
}

.icon-btn:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.icon-btn.is-danger:hover {
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

/* ---------- Status badge ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.status-lead { background: hsl(210 80% 55% / 0.14); color: hsl(210 80% 65%); }
.status-contato { background: hsl(45 90% 55% / 0.14); color: hsl(45 90% 60%); }
.status-proposta { background: hsl(280 70% 60% / 0.14); color: hsl(280 70% 72%); }
.status-negociacao { background: hsl(24 90% 55% / 0.14); color: hsl(24 90% 62%); }
.status-cliente { background: hsl(var(--success) / 0.14); color: hsl(var(--success)); }
.status-perdido { background: hsl(var(--destructive) / 0.14); color: hsl(var(--destructive)); }

.priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.content-search { flex: 1 1 260px; }
.content-summary-grid { grid-template-columns: repeat(5, minmax(130px, 1fr)); }
.content-summary-filter { text-align: left; cursor: pointer; color: inherit; font: inherit; }
.content-summary-filter.is-active { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); }
.content-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.content-card { display: block; width: 100%; min-height: 190px; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.content-card:hover { border-color: hsl(var(--primary)); transform: translateY(-2px); }
.content-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.content-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.content-card p { min-height: 42px; margin: 0 0 1rem; color: hsl(var(--muted-foreground)); font-size: .85rem; line-height: 1.5; }
.content-card-client { display: flex; align-items: center; gap: .4rem; color: hsl(var(--muted-foreground)); font-size: .82rem; }
.content-card-date { color: hsl(var(--muted-foreground)); font-size: .78rem; }
.status-badge { display: inline-flex; align-items: center; padding: .25rem .55rem; border-radius: 999px; background: hsl(var(--muted)); font-size: .72rem; font-weight: 700; }
.status-revisao { color: hsl(35 90% 45%); background: hsl(35 90% 50% / .12); }
.status-aguardando { color: hsl(210 80% 55%); background: hsl(210 80% 55% / .12); }
.status-aprovado { color: hsl(var(--success)); background: hsl(var(--success) / .12); }
.content-empty { min-height: 300px; }
.kanban-board.is-list-view { display: block; overflow: visible; }
.pipeline-list-wrap { width: 100%; }
.pipeline-list-wrap tbody tr { cursor: pointer; }
.pipeline-list-wrap tbody tr:hover { background: hsl(var(--muted) / .45); }

@media (max-width: 900px) {
  .content-summary-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}

/* ---------- Serviços ---------- */
/*
 * Regra do Design System: trocar de painel dentro da tela é sempre aba com
 * indicador na linha de base (igual ao Financeiro). O controle segmentado fica
 * reservado para alternar a VISUALIZAÇÃO do mesmo conteúdo — Kanban/Lista.
 * Aqui isto era um segmentado, e a mesma função tinha dois desenhos no produto.
 */
.services-module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid hsl(var(--border));
}

.services-module-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.375rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.services-module-tabs button svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.services-module-tabs button:hover:not(.is-active) {
  background: var(--hover-overlay);
  color: hsl(var(--foreground));
}

.services-module-tabs button.is-active {
  background: transparent;
  color: hsl(var(--primary-light));
  font-weight: var(--weight-semibold);
  box-shadow: none;
}

.services-module-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  background: hsl(var(--primary));
}

.services-actions { justify-content: flex-start; margin-bottom: 1rem; }
.services-budget-btn { color: hsl(var(--primary)); border-color: hsl(var(--primary)); }

.services-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}

.services-search { flex: 1; max-width: 520px; }
.services-filter-row .select { width: 240px; }

.services-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 1rem;
}

.service-catalog-card {
  min-height: 285px;
  padding: 1.4rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.9rem;
  background: hsl(var(--card));
}

.service-catalog-card.is-inactive { opacity: 0.65; }

.service-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.service-card-heading h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
}

.service-status {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  color: white;
  background: hsl(var(--primary));
  font-size: 0.72rem;
  font-weight: 700;
}

.service-status.is-off { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

.service-card-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.service-card-links a,
.service-card-links span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
}

/* `fileText` nasce com 18 e `clipboard` com 32: lado a lado um ficava o dobro
   do outro. Quem manda no tamanho é o contexto, não a definição do ícone. */
.service-card-links svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.service-card-links a:hover { color: hsl(var(--primary)); }
.service-card-divider { height: 1px; margin: 1rem 0; background: hsl(var(--border)); }

.service-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

.service-card-meta strong {
  padding: 0.15rem 0.55rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  color: hsl(var(--foreground));
  font-size: 0.75rem;
}

.service-price-row strong {
  padding: 0;
  border: 0;
  color: hsl(var(--primary));
  font-size: 1rem;
}

.service-card-footer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.service-edit-btn { flex: 1; justify-content: center; }
.service-active-toggle { margin: 0.25rem 0 0.5rem; }
.service-list-description { display: block; margin-top: 0.25rem; color: hsl(var(--muted-foreground)); }
.service-list-price { color: hsl(var(--primary)); }
.service-list-actions { display: flex; gap: 0.4rem; }
.service-empty { min-height: 320px; }

.service-checkout-modal {
  max-width: 720px;
  padding: 2rem;
}

.service-checkout-modal .modal-form { gap: 1.15rem; }
.service-checkout-modal textarea.input { height: auto; padding-top: 0.75rem; resize: vertical; }

.service-modal-highlight,
.service-funnel-card {
  border: 1px solid hsl(var(--border));
  border-radius: 0.85rem;
  padding: 1.15rem;
}

.service-modal-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-color: hsl(var(--primary) / 0.45);
  background: hsl(var(--primary) / 0.04);
}

.service-modal-highlight > div,
.service-switch-row > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.service-modal-highlight span:not(.toggle),
.service-switch-row span:not(.toggle) {
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}

.service-funnel-card h3,
.service-payment-methods h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.service-funnel-card h3 span { color: hsl(var(--muted-foreground)); font-weight: 400; }

.service-switch-row,
.service-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.service-funnel-card .field { margin-top: 1rem; }
.service-funnel-card > textarea { margin-top: 0.9rem; }
.service-payment-methods { display: grid; gap: 0.95rem; padding: 0 0.15rem; }
.service-payment-row { font-size: 0.95rem; }
.service-modal-submit { margin-top: 0.25rem; }

@media (max-width: 640px) {
  .service-checkout-modal { padding: 1.25rem; }
  .service-checkout-modal .field-row { grid-template-columns: 1fr; }
}

.services-secondary-actions { margin: 0 0 1rem; }

.service-secondary-empty {
  display: flex;
  min-height: 360px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.7rem;
  padding: 3rem 1.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.95rem;
  background: hsl(var(--card));
  text-align: center;
}

.service-secondary-icon {
  display: flex;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
}

.service-secondary-empty h3 { margin: 0; font-size: 1.25rem; }
.service-secondary-empty p { margin: 0 0 0.8rem; color: hsl(var(--muted-foreground)); }

.service-movement-card,
.checkout-settings-card {
  margin-top: 1.25rem;
  padding: 1.4rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.95rem;
  background: hsl(var(--card));
}

.service-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.service-section-heading h3 { margin: 0; }
.service-section-heading h3 span { color: hsl(var(--primary)); }
.service-movement-filters { display: flex; gap: 0.7rem; }
.service-movement-filters .select { width: 190px; }
.service-movement-empty { padding: 4rem 1rem; color: hsl(var(--muted-foreground)); text-align: center; }

.services-plans-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.services-plan-search { width: min(420px, 100%); }
.services-plans-toolbar + .service-secondary-empty { min-height: 520px; border: 0; background: transparent; }

.checkout-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.6rem 0 1rem;
}

.checkout-heading-row h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
}

.checkout-heading-row p { margin: 0; color: hsl(var(--muted-foreground)); }
.checkout-heading-actions { display: flex; gap: 0.7rem; }

/* ---------- Checkout: aviso, link público e catálogo ---------- */
.checkout-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid hsl(var(--warning) / 0.35);
  border-radius: var(--radius);
  background: hsl(var(--warning-soft));
}

.checkout-aviso > span {
  display: flex;
  flex-shrink: 0;
  color: hsl(var(--warning));
}

.checkout-aviso p {
  flex: 1;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.checkout-aviso .btn-secondary {
  flex-shrink: 0;
  white-space: nowrap;
}

.checkout-link-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.4);
}

.checkout-link-icone {
  display: flex;
  flex-shrink: 0;
  color: hsl(var(--primary));
}

/* O link é longo e não pode empurrar os botões para fora da caixa. */
.checkout-link-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.checkout-catalogo {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.checkout-servico-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.checkout-servico-dados strong {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--weight-semibold);
}

.checkout-servico-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.checkout-servico-meta em {
  color: hsl(var(--primary));
  font-style: normal;
  font-weight: var(--weight-bold);
}

.checkout-servico-badge {
  padding: 0.1rem 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  color: hsl(var(--muted-foreground));
}

.checkout-servico-acoes {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-1);
}

.checkout-upload-remover {
  width: 100%;
  margin-top: var(--space-3);
}

/* ---------- Modal "Importar serviços" ---------- */
.importar-checkout-intro {
  margin: 0 0 var(--space-4);
  color: hsl(var(--muted-foreground));
}

/* A lista pode ser longa: rola dentro do modal em vez de esticá-lo. */
.importar-checkout-lista {
  display: grid;
  gap: var(--space-2);
  max-height: 24rem;
  overflow-y: auto;
  margin-bottom: var(--space-4);
}

.importar-checkout-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.importar-checkout-item:hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--muted) / 0.4);
}

.importar-checkout-item input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
}

.importar-checkout-item > span {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.importar-checkout-item strong {
  font-weight: var(--weight-medium);
}

.importar-checkout-item small {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.importar-checkout-item em {
  flex-shrink: 0;
  color: hsl(var(--primary));
  font-style: normal;
  font-weight: var(--weight-semibold);
}

@media (max-width: 640px) {
  .checkout-aviso {
    flex-wrap: wrap;
  }

  .checkout-aviso .btn-secondary {
    width: 100%;
  }

  .checkout-servico-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.checkout-catalog-empty {
  display: flex;
  min-height: 11.875rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground-subtle));
  font-size: var(--text-base);
  text-align: center;
}

.checkout-catalog-empty > p {
  max-width: 26rem;
}

/*
 * Era `transform: scale(2)` — o cifrão virava uma mancha no meio do card. Vira
 * o mesmo selo circular que os estados vazios do resto do sistema usam.
 */
.checkout-catalog-empty > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground-subtle));
}

.checkout-catalog-empty > span svg {
  width: 1.125rem;
  height: 1.125rem;
}
.checkout-settings-card h3 { margin: 0 0 1.25rem; }

.checkout-setting-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--foreground));
  font: inherit;
  cursor: pointer;
}

.checkout-setting-toggle > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.checkout-setting-toggle > span:last-child { transition: transform 0.18s ease; }
.checkout-setting-toggle.is-expanded > span:last-child { transform: rotate(180deg); }

.checkout-setting-panel {
  display: none;
  padding: 1rem;
  border-bottom: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
}

.checkout-setting-panel.is-expanded { display: block; }
.checkout-setting-panel p { margin: 0; }
.checkout-save { margin-top: 1.25rem; }

.checkout-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 1rem;
}

.checkout-color-field,
.checkout-text-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: hsl(var(--foreground));
  font-size: 0.88rem;
}

.checkout-color-control {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.checkout-color-control input[type="color"] {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 3px;
  border: 1px solid hsl(var(--border));
  border-radius: 0.35rem;
  background: hsl(var(--muted));
  cursor: pointer;
}

.checkout-radius-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.1rem;
  color: hsl(var(--foreground));
  font-size: 0.88rem;
}

.checkout-radius-options { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.checkout-radius-options button {
  padding: 0.55rem 0.85rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.65rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font: inherit;
  cursor: pointer;
}

.checkout-radius-options button.is-active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: white;
}

.checkout-upload-group + .checkout-upload-group { margin-top: 1.4rem; }

.checkout-upload-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.checkout-upload-heading span,
.checkout-upload-group p { color: hsl(var(--muted-foreground)); font-size: 0.8rem; }
.checkout-upload-group p { margin: 0.35rem 0 0.75rem; }

.checkout-upload-box {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem;
  border: 2px dashed hsl(var(--border));
  border-radius: 0.75rem;
  background-position: center;
  background-size: cover;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  text-align: center;
}

.checkout-upload-box:hover { border-color: hsl(var(--primary)); }
.checkout-upload-box.has-image { position: relative; color: white; overflow: hidden; }
.checkout-upload-box.has-image::before { content: ""; position: absolute; inset: 0; background: hsl(0 0% 0% / 0.55); }
.checkout-upload-box.has-image > * { position: relative; z-index: 1; }
.checkout-upload-icon { display: flex; transform: scale(1.5); margin-bottom: 0.4rem; }

.checkout-text-fields {
  display: grid;
  gap: 1rem;
}

.checkout-text-fields textarea.input {
  height: auto;
  padding-top: 0.7rem;
  resize: vertical;
}

.checkout-text-divider { height: 1px; background: hsl(var(--border)); }

/* ---------- Orçamentos ---------- */
.budget-top-actions { justify-content: flex-start; margin-bottom: 1rem; }
/* Terceiro desenho de aba que existia no produto; agora segue o mesmo padrão. */
.budget-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid hsl(var(--border));
}

.budget-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.375rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.budget-tabs button svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.budget-tabs button:hover:not(.is-active) {
  background: var(--hover-overlay);
  color: hsl(var(--foreground));
}

.budget-tabs button.is-active {
  background: transparent;
  color: hsl(var(--primary-light));
  font-weight: var(--weight-semibold);
}

.budget-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  background: hsl(var(--primary));
}
.budget-summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.6rem 0;
}
.budget-summary-grid .summary-card { display: flex; min-height: 125px; flex-direction: column; justify-content: center; gap: 0.8rem; }
.budget-summary-grid .summary-card span { color: hsl(var(--muted-foreground)); }
.budget-summary-grid .summary-card strong { font-size: 1.55rem; }
.budget-summary-grid .budget-success strong { color: hsl(var(--success)); }
.budget-filter-card {
  display: grid; grid-template-columns: 1fr 220px auto; gap: 0.75rem;
  padding: 1.2rem; margin-bottom: 1.4rem; border: 1px solid hsl(var(--border));
  border-radius: 0.9rem; background: hsl(var(--card));
}
.budget-filter-card .btn-secondary.is-active { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.budget-empty {
  display: flex; min-height: 360px; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.65rem; padding: 3rem 1.5rem;
  border: 1px solid hsl(var(--border)); border-radius: 0.95rem;
  background: hsl(var(--card)); text-align: center;
}
.budget-empty > span { display: flex; margin-bottom: 1rem; color: hsl(var(--muted-foreground)); }
.budget-empty h3, .budget-empty p { margin: 0; }
.budget-empty p { margin-bottom: 0.8rem; color: hsl(var(--muted-foreground)); }
.budget-list { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 0.9rem; background: hsl(var(--card)); }
.budget-row {
  display: grid; width: 100%; grid-template-columns: 1fr 130px 150px 130px;
  align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 0;
  border-bottom: 1px solid hsl(var(--border)); background: transparent;
  color: inherit; text-align: left; cursor: pointer;
}
.budget-row:last-child { border-bottom: 0; }
.budget-row:hover { background: hsl(var(--muted) / 0.4); }
.budget-row > div { display: flex; flex-direction: column; gap: 0.25rem; }
.budget-row > div span, .budget-row > span { color: hsl(var(--muted-foreground)); font-size: 0.8rem; }
.status-rascunho { color: hsl(var(--muted-foreground)); }
.status-enviado { color: hsl(210 80% 60%); background: hsl(210 80% 55% / .12); }
.status-aprovado { color: hsl(var(--success)); background: hsl(var(--success) / .12); }
.status-recusado { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .12); }
.budget-table {
  overflow: visible;
  margin-top: 1.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: .95rem;
  background: hsl(var(--card));
}
.budget-table-head,
.budget-table-row {
  display: grid;
  grid-template-columns: 1.25fr .9fr 1.15fr .8fr .9fr .85fr .85fr 125px;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.1rem;
}
.budget-table-head {
  color: hsl(var(--muted-foreground));
  font-size: .8rem;
  border-bottom: 1px solid hsl(var(--border));
}
.budget-table-row {
  position: relative;
  min-height: 78px;
  border-bottom: 1px solid hsl(var(--border));
  font-size: .85rem;
}
.budget-table-row:last-child { border-bottom: 0; }
.budget-table-row > span:first-child { font-family: ui-monospace, monospace; }
.budget-client-cell { display: flex; min-width: 0; flex-direction: column; gap: .15rem; }
.budget-client-cell small { overflow: hidden; color: hsl(var(--muted-foreground)); text-overflow: ellipsis; }
.budget-row-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.budget-row-actions > .icon-btn { width: 34px; height: 34px; }
.budget-actions-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + .35rem);
  right: 0;
  display: none;
  width: 255px;
  overflow: hidden;
  padding: .45rem;
  border: 1px solid hsl(var(--border));
  border-radius: .8rem;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
}
.budget-actions-menu.is-open { display: grid; }
.budget-actions-menu button {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: .7rem;
  padding: .58rem .65rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
}
.budget-actions-menu button:hover { background: hsl(var(--muted)); }
.budget-actions-menu button svg { width: 19px; height: 19px; }
.budget-actions-menu button.is-danger { color: hsl(var(--destructive)); }
.budget-actions-menu button:nth-last-child(2) { margin-top: .3rem; border-top: 1px solid hsl(var(--border)); border-radius: 0; }

@media (max-width: 1100px) {
  .budget-table { overflow-x: auto; }
  .budget-table-head, .budget-table-row { min-width: 1050px; }
}

.new-budget-shell { width: min(900px, 100%); margin: 0 auto; }
.new-budget-progress { display: flex; align-items: center; justify-content: center; margin: .8rem 0 2rem; }
.new-budget-progress span {
  display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-weight: 800;
}
.new-budget-progress span.is-active { background: hsl(var(--primary)); color: white; box-shadow: 0 0 0 5px hsl(var(--primary) / .1); }
.new-budget-progress span.is-complete { background: hsl(var(--success)); color: white; }
.new-budget-progress i { width: 70px; height: 3px; background: hsl(var(--border)); }
.new-budget-card {
  display: grid; gap: 1.2rem; padding: 1.6rem; border: 1px solid hsl(var(--border));
  border-radius: .95rem; background: hsl(var(--card));
}
.new-budget-card-heading h2, .new-budget-card-heading p { margin: 0; }
.new-budget-card-heading h2 { font-size: 1.3rem; }
.new-budget-card-heading p { margin-top: .2rem; color: hsl(var(--muted-foreground)); font-size: .85rem; }
.new-budget-client-row { display: grid; grid-template-columns: 1fr 46px; gap: .6rem; }
.new-budget-client-row .btn-secondary { justify-content: center; padding: 0; }
.new-budget-description { min-height: 150px; height: auto; padding-top: .75rem; resize: vertical; }
.new-budget-counter { margin-top: -.45rem; color: hsl(var(--muted-foreground)); text-align: right; }
.new-budget-video-row { display: grid; grid-template-columns: 1fr 42px; gap: .5rem; margin-bottom: .5rem; }
.new-budget-add-video { width: fit-content; margin-top: .35rem; }
.new-budget-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 0 2rem; }
.new-budget-footer .btn { width: auto; min-width: 120px; }
.new-budget-service-grid { display: grid; gap: .7rem; }
.new-budget-service {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .8rem;
  padding: .9rem; border: 1px solid hsl(var(--border)); border-radius: .75rem;
  background: hsl(var(--background)); color: inherit; text-align: left; cursor: pointer;
}
.new-budget-service > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid hsl(var(--border)); border-radius: 50%; }
.new-budget-service > div { display: flex; flex-direction: column; gap: .2rem; }
.new-budget-service small { color: hsl(var(--muted-foreground)); }
.new-budget-service b { color: hsl(var(--primary)); }
.new-budget-service.is-selected { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .06); }
.new-budget-service.is-selected > span { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: white; }
.new-budget-total { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-radius: .75rem; background: hsl(var(--muted) / .35); }
.new-budget-total strong { color: hsl(var(--primary)); font-size: 1.25rem; }
.new-budget-multiplan {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: .8rem;
  background: hsl(var(--background));
}
.new-budget-multiplan > span:first-child { color: hsl(var(--primary)); }
.new-budget-multiplan > div { display: flex; flex-direction: column; gap: .2rem; }
.new-budget-multiplan small { color: hsl(var(--muted-foreground)); }
.new-budget-multiplan-info {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: .75rem;
  padding: 1rem 1.1rem;
  border: 1px solid hsl(var(--primary) / .45);
  border-radius: .8rem;
  background: hsl(var(--primary) / .055);
}
.new-budget-multiplan-info > span { color: hsl(var(--primary)); }
.new-budget-multiplan-info strong { display: block; margin-bottom: .25rem; }
.new-budget-multiplan-info p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: .88rem;
  line-height: 1.55;
}
.new-budget-plan-catalog { width: 100%; justify-content: flex-start; }
.new-budget-plan-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem 1rem;
  padding-top: .9rem;
  border-top: 1px solid hsl(var(--border));
}
.new-budget-plan-summary span { color: hsl(var(--muted-foreground)); }
.new-budget-plan-summary strong:last-child { color: hsl(var(--primary)); font-size: 1.25rem; }
.new-budget-service-picker-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: stretch;
}
.new-budget-service-picker { position: relative; min-width: 0; }
.new-budget-service-picker > button {
  display: grid;
  width: 100%;
  height: 48px;
  grid-template-columns: 24px 1fr 20px;
  align-items: center;
  gap: .6rem;
  padding: 0 .9rem;
  border: 1px solid hsl(var(--border));
  border-radius: .65rem;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  text-align: left;
  cursor: pointer;
}
.new-budget-service-picker > button svg:last-child { justify-self: end; }
.new-budget-new-service { height: 48px; white-space: nowrap; }
.new-budget-service-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + .45rem);
  left: 0;
  right: 0;
  display: none;
  max-height: 360px;
  overflow: auto;
  padding: .75rem;
  border: 1px solid hsl(var(--border));
  border-radius: .8rem;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
}
.new-budget-service-dropdown.is-open { display: block; }
.new-budget-service-dropdown > small {
  display: block;
  padding: .7rem .35rem .35rem;
  color: hsl(var(--muted-foreground));
}
.new-budget-service-dropdown [data-add-service] {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: .7rem .65rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
}
.new-budget-service-dropdown [data-add-service]:hover {
  background: hsl(var(--primary) / .12);
}
.new-budget-service-dropdown [data-add-service] b { color: hsl(var(--primary)); }
.new-budget-no-service {
  padding: 1rem .5rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.new-budget-selected-services {
  overflow: hidden;
  border: 1px dashed hsl(var(--border));
  border-radius: .8rem;
}
.new-budget-services-empty {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.new-budget-services-empty > span { display: flex; margin-bottom: .5rem; transform: scale(1.8); }
.new-budget-services-empty p { margin: 0; color: hsl(var(--foreground)); font-weight: 600; }
.new-budget-selected-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
}
.new-budget-selected-row:last-child { border-bottom: 0; }
.new-budget-selected-row > div { display: flex; min-width: 0; flex-direction: column; gap: .15rem; }
.new-budget-selected-row small { color: hsl(var(--muted-foreground)); }
.new-budget-selected-row b { color: hsl(var(--primary)); white-space: nowrap; }
.new-budget-payment-toggles { display: grid; gap: .75rem; }
.new-budget-payment-toggle-wrap {
  overflow: hidden;
  border: 1px solid hsl(var(--primary) / .35);
  border-radius: .8rem;
  background: linear-gradient(90deg, hsl(var(--primary) / .14), hsl(var(--primary) / .055));
}
.new-budget-payment-toggle-wrap.is-expanded {
  border-color: hsl(var(--primary) / .55);
}
.new-budget-payment-toggle {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.new-budget-payment-toggle > span:first-child { color: hsl(var(--primary)); }
.new-budget-payment-toggle > div { display: flex; flex-direction: column; gap: .15rem; }
.new-budget-payment-toggle small { color: hsl(var(--muted-foreground)); line-height: 1.4; }
.new-budget-toggle-details {
  display: grid;
  gap: 1rem;
  margin: 0 1rem;
  padding: 1rem 0 1.15rem;
  border-top: 1px solid hsl(var(--primary) / .18);
}
.new-budget-toggle-details p {
  margin: -.35rem 0 0;
  color: hsl(var(--muted-foreground));
}
.new-budget-recurring-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.new-budget-recurring-details .field > label:not(.field-label) {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
}
.new-budget-recurring-details input[type="radio"] { accent-color: hsl(var(--primary)); }
.new-budget-payment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.new-budget-payment-select { position: relative; }
.new-budget-payment-select > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  color: hsl(var(--foreground));
  text-align: left;
}
.new-budget-payment-menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  display: none;
  overflow: hidden;
  padding: .4rem;
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
}
.new-budget-payment-menu.is-open { display: grid; }
.new-budget-payment-menu label {
  display: grid;
  grid-template-columns: 0 22px 1fr;
  align-items: center;
  gap: .65rem;
  padding: .65rem;
  border-radius: .55rem;
  cursor: pointer;
}
.new-budget-payment-menu label:hover { background: hsl(var(--primary) / .1); }
.new-budget-payment-menu input { opacity: 0; pointer-events: none; }
.new-budget-payment-menu label > span {
  width: 18px;
  height: 18px;
  border: 1px solid hsl(var(--primary));
  border-radius: 50%;
}
.new-budget-payment-menu input:checked + span {
  border: 5px solid hsl(var(--primary));
}
.new-budget-payment-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  gap: .65rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: .8rem;
  background: hsl(var(--background));
}
.new-budget-payment-card h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .2rem;
  font-size: .95rem;
}
.new-budget-payment-card h3 svg { color: hsl(var(--primary)); }
.new-budget-payment-card label { display: flex; align-items: center; gap: .5rem; font-size: .86rem; }
.new-budget-payment-card input[type="radio"] { accent-color: hsl(var(--primary)); }
.new-budget-payment-card small { color: hsl(var(--muted-foreground)); line-height: 1.4; }
.new-budget-review { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.new-budget-review > div { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: .7rem; }
.new-budget-review span { color: hsl(var(--muted-foreground)); font-size: .78rem; }
.new-budget-review-description { padding: 1rem; border-radius: .7rem; background: hsl(var(--muted) / .25); }
.new-budget-review-description h3, .new-budget-review-description p { margin: 0; }
.new-budget-review-description p { margin-top: .5rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.new-budget-review-card {
  display: grid;
  gap: .7rem;
  padding: 1.15rem;
  border: 1px solid hsl(var(--border));
  border-radius: .8rem;
  background: hsl(var(--background));
}
.new-budget-review-card h3,
.new-budget-financial-review h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .95rem;
}
.new-budget-review-card h3 svg,
.new-budget-financial-review h3 svg { color: hsl(var(--primary)); }
.new-budget-review-card > span,
.new-budget-review-card > p,
.new-budget-review-card > small { margin: 0; color: hsl(var(--muted-foreground)); }
.new-budget-review-card dl { display: grid; gap: .2rem; margin: 0; }
.new-budget-review-card dt { margin-top: .3rem; color: hsl(var(--muted-foreground)); font-size: .78rem; }
.new-budget-review-card dd { display: flex; align-items: center; gap: .35rem; margin: 0; }
.new-budget-review-card dd small { display: block; margin-top: .3rem; color: hsl(var(--muted-foreground)); }
.new-budget-review-switches { gap: 0; }
.new-budget-review-switches label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
.new-budget-review-switches label:first-child { padding-top: 0; }
.new-budget-review-switches label:last-child { padding-bottom: 0; border-bottom: 0; }
.new-budget-review-switches label > div { display: flex; flex-direction: column; gap: .15rem; }
.new-budget-review-switches small { color: hsl(var(--muted-foreground)); }
.new-budget-financial-review {
  display: grid;
  gap: .8rem;
  padding: 1.2rem;
  border: 1px solid hsl(var(--primary) / .25);
  border-radius: .8rem;
  background: linear-gradient(90deg, hsl(var(--primary) / .1), hsl(var(--primary) / .035));
}
.new-budget-financial-review > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: hsl(var(--muted-foreground));
}
.new-budget-financial-review .is-total {
  padding-top: .8rem;
  border-top: 1px solid hsl(var(--primary) / .15);
  color: hsl(var(--foreground));
  font-size: 1.1rem;
}
.new-budget-financial-review .is-total strong:last-child { color: hsl(var(--primary)); font-size: 1.3rem; }

.quick-client-modal { max-width: 560px; }
.quick-client-modal .modal-header { margin-bottom: 1.3rem; }
.quick-client-modal .modal-header h2 { font-size: 1.45rem; }
.quick-client-modal .modal-form { gap: 1.1rem; }
.quick-client-modal .field-label { font-size: .9rem; }
.quick-client-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: .4rem;
}

.quick-service-modal { max-width: 620px; }
.quick-service-modal .modal-header { align-items: flex-start; }
.quick-service-modal .modal-header h2,
.quick-service-modal .modal-header p { margin: 0; }
.quick-service-modal .modal-header p {
  margin-top: .35rem;
  color: hsl(var(--muted-foreground));
}
.quick-service-check {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
}
.quick-service-check input {
  width: 20px;
  height: 20px;
  accent-color: hsl(var(--primary));
}
.quick-service-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: .5rem;
}
.quick-service-actions .btn { width: auto; min-width: 140px; }

.contract-templates-overlay { padding: 1rem; }
.contract-templates-modal,
.contract-template-editor {
  width: min(900px, calc(100vw - 2rem));
  max-height: min(78dvh, 680px);
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: 1.1rem;
  background: hsl(var(--background));
  box-shadow: var(--shadow-card);
}
.contract-templates-modal > header,
.contract-template-editor > header {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1.4rem;
}
.contract-templates-modal > header > div,
.contract-template-editor > header > div { flex: 1; }
.contract-templates-modal header h2,
.contract-templates-modal header p,
.contract-template-editor header h2,
.contract-template-editor header p { margin: 0; }
.contract-templates-modal header h2,
.contract-template-editor header h2 { display: flex; align-items: center; gap: .55rem; }
.contract-templates-modal header p,
.contract-template-editor header p { margin-top: .35rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.contract-new-template {
  width: 100%;
  justify-content: center;
  margin-bottom: 1rem;
}
.contract-template-list { display: grid; gap: .75rem; }
.contract-template-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 42px;
  align-items: center;
  gap: .6rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: .8rem;
  background: hsl(var(--card));
}
.contract-template-list article > div {
  min-width: 0;
  overflow: hidden;
}
.contract-template-list article > .icon-btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
.contract-template-list h3,
.contract-template-list p { margin: 0; }
.contract-template-list h3 { display: flex; align-items: center; gap: .5rem; }
.contract-template-list h3 span {
  padding: .2rem .6rem;
  border: 1px solid hsl(var(--primary) / .45);
  border-radius: 999px;
  color: hsl(var(--primary));
  font-size: .75rem;
}
.contract-template-list p {
  margin-top: .35rem;
  overflow: hidden;
  color: hsl(var(--muted-foreground));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-template-editor {
  width: min(1280px, calc(100vw - 2rem));
  height: min(880px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.5rem;
}
.contract-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, .9fr);
  gap: 1.4rem;
}
.contract-editor-form { display: grid; align-content: start; gap: .7rem; min-width: 0; }
#contract-template-text {
  min-height: min(570px, calc(100dvh - 290px));
  padding: 1rem;
  font: .9rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
  white-space: pre-wrap;
}
.contract-editor-actions { display: flex; gap: .7rem; }
.contract-editor-actions .btn { width: auto; }
.contract-shortcodes { min-width: 0; }
.contract-shortcodes > h3,
.contract-shortcodes > p { margin: 0; }
.contract-shortcodes > p { margin-top: .25rem; color: hsl(var(--muted-foreground)); }
.contract-shortcodes > div {
  max-height: min(660px, calc(100dvh - 210px));
  overflow: auto;
  margin-top: 1rem;
  padding: .7rem;
  border: 1px solid hsl(var(--border));
  border-radius: .8rem;
}
.contract-shortcodes section { display: grid; gap: .55rem; margin-bottom: 1rem; }
.contract-shortcodes section:last-child { margin-bottom: 0; }
.contract-shortcodes h4 { margin: .25rem; color: hsl(var(--primary)); }
.contract-shortcodes button {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: .35rem;
  padding: .8rem;
  border: 1px solid hsl(var(--border));
  border-radius: .7rem;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  text-align: left;
  cursor: pointer;
}
.contract-shortcodes button:hover { border-color: hsl(var(--primary) / .6); background: hsl(var(--primary) / .05); }
.contract-shortcodes code {
  padding: .2rem .55rem;
  border: 1px solid hsl(var(--primary) / .4);
  border-radius: 999px;
  color: hsl(var(--primary));
  font-weight: 700;
}

@media (max-width: 520px) {
  .quick-client-actions { grid-template-columns: 1fr; }
  .quick-client-actions .btn-primary { grid-row: 1; }
  .new-budget-service-picker-row { grid-template-columns: 1fr; }
  .new-budget-new-service { width: 100%; justify-content: center; }
  .new-budget-selected-row { grid-template-columns: 24px minmax(0, 1fr) 36px; }
  .new-budget-selected-row b { grid-column: 2; }
  .quick-service-actions { flex-direction: column-reverse; }
  .quick-service-actions .btn { width: 100%; }
}

@media (max-width: 760px) {
  .new-budget-payment-grid { grid-template-columns: 1fr; }
  .new-budget-payment-card { min-height: 0; }
  .new-budget-payment-toggle { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .new-budget-recurring-details { grid-template-columns: 1fr; }
  .contract-editor-grid { grid-template-columns: 1fr; }
  .contract-templates-modal,
  .contract-template-editor {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    height: auto;
    padding: 1rem;
  }
  .contract-shortcodes > div { max-height: 420px; }
  .contract-editor-actions { flex-direction: column; }
  .contract-editor-actions .btn,
  .contract-editor-actions .btn-secondary { width: 100%; }
}

.budget-contract-card {
  min-height: 380px; padding: 1.5rem; margin-top: 1.5rem;
  border: 1px solid hsl(var(--border)); border-radius: .95rem; background: hsl(var(--card));
}
.budget-contract-card h2 { display: flex; align-items: center; gap: .5rem; margin: 0; }
.budget-contract-empty {
  display: flex; min-height: 280px; align-items: center; justify-content: center;
  flex-direction: column; gap: .55rem; color: hsl(var(--muted-foreground)); text-align: center;
}
.budget-contract-empty > span { display: flex; margin-bottom: .8rem; }
.budget-contract-empty p { margin: 0; font-size: 1.1rem; }

.contract-modal {
  display: flex;
  width: min(1040px, calc(100vw - 24px));
  height: min(860px, calc(100dvh - 24px));
  max-width: 1040px;
  max-height: none;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-color: hsl(var(--border) / .8);
  border-radius: 1.2rem;
}
.modal-overlay:has(.contract-modal) {
  align-items: center;
  padding: 12px;
  overflow: hidden;
}
.contract-modal .modal-header { padding: 1.35rem 1.6rem; margin: 0; border-bottom: 1px solid hsl(var(--border)); }
.contract-modal-header > div { display: flex; flex-direction: column; gap: .15rem; }
.contract-modal-header h2 { font-size: 1.4rem; }
.contract-modal-header p { margin: 0; color: hsl(var(--muted-foreground)); font-size: .8rem; }
.contract-modal-eyebrow { color: hsl(var(--primary)); font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.contract-step-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  align-items: center;
  padding: .9rem 1.6rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / .18);
}
.contract-step-tabs > i { display: block; height: 1px; background: hsl(var(--border)); }
.contract-step-tabs button {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.contract-step-tabs button > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: hsl(var(--background));
  font-size: .75rem;
  font-weight: 800;
}
.contract-step-tabs button > div { display: flex; min-width: 0; flex-direction: column; }
.contract-step-tabs button strong { color: hsl(var(--foreground)); font-size: .78rem; white-space: nowrap; }
.contract-step-tabs button small { font-size: .67rem; white-space: nowrap; }
.contract-step-tabs button.is-active > span { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: white; box-shadow: 0 0 0 4px hsl(var(--primary) / .12); }
.contract-step-tabs button.is-active strong { color: hsl(var(--primary)); }
.contract-modal form { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
.contract-step {
  display: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 1.3rem 1.6rem 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.contract-step.is-active { display: grid; flex: 1; align-content: start; gap: 1rem; }
.contract-step::-webkit-scrollbar { width: 8px; }
.contract-step::-webkit-scrollbar-thumb { border-radius: 999px; background: hsl(var(--border)); }
.contract-step-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem;
  margin-bottom: .15rem;
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  background: hsl(var(--muted) / .18);
}
.contract-step-heading > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: .65rem;
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
}
.contract-step-heading h3, .contract-step-heading p { margin: 0; }
.contract-step-heading h3 { font-size: .95rem; }
.contract-step-heading p { margin-top: .12rem; color: hsl(var(--muted-foreground)); font-size: .74rem; }
.contract-step .field { gap: .35rem; }
.contract-step .field,
.contract-step .field-row,
.contract-step .input,
.contract-step .select { min-width: 0; }
.contract-step .input,
.contract-step .select { width: 100%; box-sizing: border-box; }
.contract-step .field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.contract-step .field-label { font-size: .78rem; }
.contract-step .input, .contract-step .select { min-height: 42px; }
.contract-step textarea.input { height: auto; padding-top: .7rem; resize: vertical; }
.contract-client-row { display: grid; grid-template-columns: 1fr 44px; gap: .55rem; }
.contract-client-row .btn-secondary { justify-content: center; padding: 0; }
.contract-modal #contract-error { margin: auto 2rem 0; }
.contract-modal-footer {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.6rem; margin-top: auto; border-top: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 -8px 20px hsl(var(--background) / .35);
  z-index: 2;
}

@media (max-width: 1050px) {
  .contract-step-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
  }
  .contract-step-tabs > i { display: none; }
  .contract-step-tabs button { min-width: 0; }
  .contract-step-tabs button > div { min-width: 0; }
  .contract-step-tabs button strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .contract-step-tabs button small { display: none; }
}

@media (max-height: 720px) {
  .contract-modal {
    height: calc(100dvh - 16px);
    border-radius: .85rem;
  }
  .modal-overlay:has(.contract-modal) { padding: 8px; }
  .contract-modal .modal-header { padding: .85rem 1.25rem; }
  .contract-modal-header p { display: none; }
  .contract-step-tabs { padding: .55rem 1.25rem; }
  .contract-step { padding-top: .9rem; }
  .contract-step-heading { padding: .65rem; }
}
.contract-modal-footer > span { color: hsl(var(--muted-foreground)); font-size: .72rem; }
.contract-modal-footer .btn { width: auto; min-width: 115px; min-height: 40px; }

.approval-layout, .pdf-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); gap: 1.5rem; margin-top: 1.5rem; }
.approval-editor, .approval-preview, .pdf-config-card, .pdf-preview {
  padding: 1.4rem; border: 1px solid hsl(var(--border)); border-radius: .9rem; background: hsl(var(--card));
}
.approval-editor { display: grid; gap: 1.2rem; }
.approval-editor > h3 { margin: 0; color: hsl(var(--primary)); }
.approval-upload > div { display: flex; justify-content: space-between; margin-bottom: .55rem; }
.approval-upload > div span, .approval-upload label small { color: hsl(var(--muted-foreground)); font-size: .75rem; }
.approval-upload label {
  display: flex; min-height: 145px; align-items: center; justify-content: center; flex-direction: column;
  gap: .45rem; border: 2px dashed hsl(var(--border)); border-radius: .7rem; cursor: pointer;
}
.approval-color-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.approval-color-row label { display: flex; flex-direction: column; gap: .45rem; }
.approval-color-row input[type="color"] { width: 100%; height: 42px; padding: 3px; border: 1px solid hsl(var(--border)); border-radius: .45rem; background: hsl(var(--background)); }
.approval-field { display: flex; flex-direction: column; gap: .45rem; }
.approval-field textarea { height: auto; padding-top: .7rem; resize: vertical; }
.approval-preview { min-height: 650px; text-align: center; background: radial-gradient(circle at 70% 35%, hsl(var(--primary) / .09), transparent 35%), hsl(var(--card)); }
.approval-language { margin-left: auto; width: fit-content; padding: .65rem 1rem; border: 1px solid hsl(var(--border)); border-radius: .7rem; }
.approval-preview-badge { display: inline-flex; margin-top: 2rem; padding: .55rem 1rem; border-radius: 999px; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.approval-preview > h2 { max-width: 520px; margin: 1.4rem auto .5rem; font-size: 2rem; }
.approval-preview > p { color: hsl(var(--muted-foreground)); }
.approval-preview-cards { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 2rem; text-align: left; }
.approval-preview-cards > div { padding: 1.2rem; border: 1px solid hsl(var(--border)); border-radius: .8rem; }
.approval-preview-cards p { color: hsl(var(--muted-foreground)); line-height: 1.55; }

.pdf-layout { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr); }
.pdf-editor { display: grid; gap: 1rem; }
.pdf-config-card { display: grid; gap: 1rem; }
.pdf-config-card h3, .pdf-config-card p { margin: 0; }
.pdf-config-card > p { color: hsl(var(--muted-foreground)); font-size: .82rem; }
.pdf-config-card > label { display: flex; flex-direction: column; gap: .45rem; }
.pdf-config-card .approval-upload label { min-height: 54px; flex-direction: row; }
.pdf-mode-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pdf-mode-options button { padding: .7rem; border: 1px solid hsl(var(--border)); border-radius: .55rem; background: hsl(var(--background)); color: inherit; }
.pdf-mode-options button.is-active { border-color: hsl(var(--primary)); }
.pdf-preview { height: fit-content; position: sticky; top: 1rem; background: hsl(var(--muted)); }

@media (max-width: 1100px) {
  .services-card-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}

@media (max-width: 720px) {
  .services-module-tabs { display: flex; overflow-x: auto; }
  .services-module-tabs button { white-space: nowrap; }
  .services-filter-row { align-items: stretch; flex-direction: column; }
  .services-search,
  .services-filter-row .select { width: 100%; max-width: none; }
  .services-card-grid { grid-template-columns: 1fr; }
  .services-plans-toolbar,
  .checkout-heading-row,
  .service-section-heading { align-items: stretch; flex-direction: column; }
  .checkout-heading-actions,
  .service-movement-filters { flex-wrap: wrap; }
  .service-movement-filters .select { width: 100%; }
  .checkout-color-grid { grid-template-columns: 1fr; }
  .budget-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .budget-filter-card { grid-template-columns: 1fr; }
  .budget-row { grid-template-columns: 1fr 110px; }
  .budget-row > span:nth-of-type(2) { display: none; }
  .approval-layout, .pdf-layout { grid-template-columns: 1fr; }
  .pdf-preview { position: static; }
}

@media (max-width: 680px) {
  .budget-tabs { display: flex; overflow-x: auto; }
  .budget-tabs button { min-width: 145px; }
  .budget-summary-grid { grid-template-columns: 1fr; }
  .approval-color-row, .approval-preview-cards { grid-template-columns: 1fr; }
  .contract-step-tabs button { padding: .75rem .35rem; font-size: .78rem; }
  .contract-step-tabs { grid-template-columns: repeat(3, 1fr); padding: .65rem; }
  .contract-step-tabs > i { display: none; }
  .contract-step-tabs button { justify-content: center; }
  .contract-step-tabs button > div { display: none; }
  .contract-step { padding: 1rem; }
  .contract-step .field-row { grid-template-columns: 1fr; }
  .contract-modal-footer { padding: 1rem 1.2rem; }
  .contract-modal-footer > span { display: none; }
  .new-budget-progress i { width: 34px; }
  .new-budget-card { padding: 1rem; }
  .new-budget-card .field-row, .new-budget-review { grid-template-columns: 1fr; }
}

.priority-baixa { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.priority-media { background: hsl(45 90% 55% / 0.14); color: hsl(45 90% 60%); }
.priority-alta { background: hsl(var(--destructive) / 0.14); color: hsl(var(--destructive)); }

/* ---------- Financeiro ---------- */
/*
 * Abas com indicador na linha de base: a aba ativa se conecta ao conteúdo
 * abaixo dela. A pílula flutuando sobre a borda não dizia de onde vinha o
 * painel que estava sendo mostrado.
 */
.finance-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: var(--space-5);
}

/* As dez abas cabem numa linha só, como na referência — daí o padding curto. */
.finance-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.375rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  color: hsl(var(--muted-foreground));
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.finance-tab svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.finance-tab:hover:not(.is-active):not(.is-disabled) {
  background: var(--hover-overlay);
  color: hsl(var(--foreground));
}

.finance-tab.is-active {
  background: transparent;
  color: hsl(var(--primary-light));
  font-weight: var(--weight-semibold);
}

.finance-tab.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  background: hsl(var(--primary));
}

.finance-tab.is-disabled {
  opacity: 0.55;
}

/* `1fr` nas linhas: os três cards do resumo fecham na mesma base. */
.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.finance-summary-card {
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.finance-summary-card.is-highlight {
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: var(--shadow-glow);
}

.finance-summary-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: hsl(var(--primary));
}

.finance-summary-header h3 {
  font-size: 0.95rem;
  color: hsl(var(--foreground));
}

.finance-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  padding: 0.4rem 0;
}

.finance-summary-row strong {
  font-weight: 700;
  color: hsl(var(--foreground));
}

.finance-summary-row strong.is-info { color: hsl(210 80% 65%); }
.finance-summary-row strong.is-danger { color: hsl(var(--destructive)); }
.finance-summary-row strong.is-success { color: hsl(var(--success)); }

.finance-summary-row.is-total {
  border-top: 1px solid hsl(var(--border));
  margin-top: 0.4rem;
  padding-top: 0.75rem;
}

.finance-alerts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.finance-alert-card {
  background: hsl(var(--primary) / 0.06);
  border: 1px solid hsl(var(--primary) / 0.25);
  border-radius: var(--radius);
  overflow: hidden;
}

.finance-alert-card.is-despesa {
  background: hsl(var(--destructive) / 0.06);
  border-color: hsl(var(--destructive) / 0.25);
}

.finance-alert-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
}

.finance-alert-header > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.finance-alert-header h3 {
  font-size: 0.95rem;
}

.finance-alert-header svg:last-child {
  transition: transform 0.15s ease;
  margin-left: auto;
}

.finance-alert-header.is-expanded svg:last-child {
  transform: rotate(180deg);
}

.finance-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: hsl(var(--destructive));
  color: hsl(0 0% 100%);
  font-size: 0.72rem;
  font-weight: 700;
}

.finance-alert-body {
  display: none;
  padding: 0 1.25rem 1rem;
}

.finance-alert-body.is-expanded {
  display: block;
}

.finance-transacoes-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.25rem;
}

.finance-transacoes-card h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.pix-code-box {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  word-break: break-all;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: hsl(var(--foreground));
}

.finance-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.5rem;
  padding: 0 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}

.finance-pill strong {
  font-weight: 700;
}

.finance-pill.is-success { border-color: hsl(var(--success) / 0.35); color: hsl(var(--success)); }
.finance-pill.is-danger { border-color: hsl(var(--destructive) / 0.35); color: hsl(var(--destructive)); }
.finance-pill.is-warning { border-color: hsl(45 90% 55% / 0.35); color: hsl(45 90% 60%); }

.finance-cliente-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.finance-cliente-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: hsl(var(--muted) / 0.4);
}

.finance-cliente-header span:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.finance-cliente-body {
  display: none;
  padding: 0.5rem 1rem;
}

.finance-cliente-body.is-expanded {
  display: block;
}

.relatorio-mes-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid hsl(var(--border));
}

.relatorio-mes-row:last-child {
  border-bottom: none;
}

.relatorio-mes-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

.relatorio-mes-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.relatorio-bar-track {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.1rem;
  background: hsl(var(--muted));
  border-radius: 999px;
  overflow: visible;
}

.relatorio-bar {
  height: 100%;
  border-radius: 999px;
  min-width: 2px;
}

.relatorio-bar.is-receita { background: hsl(var(--success)); }
.relatorio-bar.is-despesa { background: hsl(var(--destructive)); }

.relatorio-bar-track span {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .finance-summary-grid,
  .finance-alerts-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Empty state ---------- */
/*
 * Estado vazio: bloco centrado com largura de leitura. Sem o max-width a frase
 * de apoio esticava pela tela inteira e o card virava um vão.
 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-base);
}

.empty-state h3 {
  color: hsl(var(--foreground));
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: 0;
}

/* Quando o estado vazio abre com um ícone, ele vira uma marca d'água discreta. */
.empty-state h3 svg,
.empty-state > svg {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--muted-foreground-subtle));
  opacity: 0.65;
}

.empty-state p {
  color: hsl(var(--muted-foreground-subtle));
  font-size: var(--text-base);
}

.empty-state .btn,
.empty-state .btn-secondary {
  margin-top: var(--space-3);
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 50;
  animation: fade-in 0.15s ease-out;
}

.modal-card {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  animation: scale-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-card.is-wide {
  max-width: 640px;
}

/* ---------- Modal em gaveta ----------
   O cadastro do cliente não abre mais como caixa no meio da tela: desliza da
   direita, como o painel lateral do lead. Assim o quadro (ou a lista) continua
   à vista enquanto se edita, e as duas telas que mostram um cliente passam a
   abrir do mesmo jeito. */
.modal-overlay.is-gaveta {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  /* Acima do painel lateral do lead (70), de onde este cadastro é aberto. */
  z-index: 80;
}

.modal-overlay.is-gaveta .modal-card {
  width: min(100%, 46rem); /* a mesma largura do painel do lead */
  max-width: none;
  height: 100%;
  max-height: none;
  border: 0;
  border-left: 1px solid hsl(var(--border));
  border-radius: 0;
  box-shadow: -12px 0 32px hsl(0 0% 0% / 0.18);
  animation: gaveta-entra 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gaveta-entra {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* `.cliente-card` também é a classe dos cards da lista de Clientes, que sobem
   2px no hover. Na gaveta isso fazia o painel inteiro pular ao passar o mouse
   por cima — o formulário ocupa a tela toda, então o hover é inevitável. */
.modal-overlay.is-gaveta .modal-card:hover {
  transform: none;
  border-left-color: hsl(var(--border));
  box-shadow: -12px 0 32px hsl(0 0% 0% / 0.18);
}

/* Quem pediu menos movimento recebe a gaveta sem a animação de entrada. */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-gaveta .modal-card { animation: none; }
}

/* ---------- Nova Venda: modal de escolha ---------- */
.venda-choice-card {
  position: relative;
  text-align: center;
}

.venda-choice-title {
  font-size: 1.3rem;
  margin-bottom: 0.35rem;
}

.venda-choice-subtitle {
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.75rem;
}

.venda-choice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.venda-choice-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.75rem 1.25rem;
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.4);
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: center;
}

.venda-choice-option:hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
}

.venda-choice-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.venda-choice-icon.is-orcamento {
  background: hsl(var(--destructive) / 0.14);
  color: hsl(var(--destructive));
}

.venda-choice-icon.is-rapida {
  background: hsl(var(--success) / 0.14);
  color: hsl(var(--success));
}

.venda-choice-option-title {
  font-weight: 700;
  font-size: 1.02rem;
}

.venda-choice-option-desc {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

@media (max-width: 560px) {
  .venda-choice-options {
    grid-template-columns: 1fr;
  }
}

/* ---------- Novo Serviço: escolha e modelos pré-definidos ---------- */
.servico-novo-subtitle {
  margin: 0 0 var(--space-6);
  text-align: center;
  color: hsl(var(--muted-foreground));
}

.servico-novo-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.servico-novo-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.servico-novo-option:hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
}

.servico-novo-icon {
  display: flex;
  color: hsl(var(--primary));
}

.servico-novo-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.servico-novo-option strong {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.servico-novo-option > span:last-child {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.servico-sugestoes-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  color: hsl(var(--primary));
  font-weight: var(--weight-semibold);
}

.servico-sugestoes-grupo {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.servico-sugestoes-grupo:first-of-type {
  margin-top: 0;
}

.servico-sugestoes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.servico-sugestao {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.servico-sugestao:hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--muted) / 0.5);
}

.servico-sugestao strong {
  font-weight: var(--weight-semibold);
}

.servico-sugestao > span {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.servico-sugestao em {
  margin-top: var(--space-1);
  color: hsl(var(--primary));
  font-style: normal;
  font-weight: var(--weight-bold);
}

/* O "/mês" acompanha o preço, mas em peso menor: é qualificador, não valor. */
.servico-sugestao em span {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.servico-sugestoes-custom {
  width: 100%;
  margin-top: var(--space-6);
}

/* ---------- Cadastrar Novo Serviço: formulário do catálogo ---------- */
.servico-cadastro-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.servico-cadastro-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.servico-cadastro-switch strong {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
}

.servico-cadastro-switch strong svg {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--primary));
}

.servico-cadastro-switch span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

/* O toggle é irmão do bloco de texto: não pode herdar o estilo de legenda. */
.servico-cadastro-switch > .toggle {
  flex-shrink: 0;
  margin-top: 0;
}

.servico-cadastro-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (max-width: 720px) {
  .servico-cadastro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .servico-novo-options,
  .servico-sugestoes-grid,
  .servico-cadastro-grid,
  .servico-cadastro-acoes {
    grid-template-columns: 1fr;
  }
}

/* ---------- Command Palette (busca) ---------- */
.command-palette-overlay {
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 0.6);
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 6vh 1rem;
}

.command-palette {
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scale-in 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.command-palette-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

.command-palette-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 1rem;
  color: hsl(var(--foreground));
}

.command-palette-search input::placeholder {
  color: hsl(var(--muted-foreground));
}

.command-palette-close {
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.2rem;
}

.command-palette-results {
  overflow-y: auto;
  padding: 0.5rem;
}

.command-palette-group-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  padding: 0.6rem 0.75rem 0.35rem;
}

.command-palette-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  color: hsl(var(--foreground));
  text-align: left;
}

.command-palette-item.is-active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.command-palette-item.is-active .command-palette-item-path {
  color: hsl(var(--primary-foreground) / 0.75);
}

.command-palette-item-icon {
  display: flex;
  flex-shrink: 0;
}

.command-palette-item-label {
  flex: 1;
  font-weight: 500;
}

.command-palette-item-path {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.command-palette-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

/* ---------- Venda Rápida (modal rico) ---------- */
.venda-rapida-card .modal-header h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.venda-rapida-subtitle {
  color: hsl(var(--muted-foreground));
  margin-top: -1rem;
  margin-bottom: 1.25rem;
}

.venda-rapida-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.venda-rapida-field-header .field-label,
.venda-rapida-toggle-row .field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  color: hsl(var(--foreground));
  background: none;
}

.btn-chip:hover {
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--primary) / 0.06);
}

.combobox {
  position: relative;
}

.combobox-list {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  z-index: 5;
  padding: 0.35rem;
}

.combobox-list.is-open {
  display: block;
}

.combobox-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
}

.combobox-item:hover {
  background: hsl(var(--muted));
}

.combobox-item-price {
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
  flex-shrink: 0;
}

.combobox-empty {
  padding: 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

.venda-rapida-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.venda-rapida-toggle-hint {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.15rem;
}

.switch {
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  position: relative;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: hsl(var(--card-foreground) / 0.9);
  background: white;
  transition: var(--transition-smooth);
}

.switch.is-on {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.switch.is-on .switch-thumb {
  left: calc(100% - 1.2rem - 1px);
}

.venda-rapida-divider {
  border: none;
  border-top: 1px solid hsl(var(--border));
  margin: 0;
}

.venda-rapida-payment-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.venda-rapida-payment-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.venda-rapida-payment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 0.88rem;
}

.venda-rapida-payment-btn.is-active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: hsl(var(--primary-foreground));
}

.venda-rapida-payment-row {
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  gap: 0.85rem;
  align-items: end;
}

.venda-rapida-payment-btn svg,
.venda-rapida-status-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.venda-rapida-status-options {
  display: flex;
  gap: 0.4rem;
}

.venda-rapida-status-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 3.25rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
  color: hsl(var(--foreground));
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.venda-rapida-status-btn.is-active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: hsl(var(--primary-foreground));
}

.venda-rapida-collapse-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  color: hsl(var(--foreground));
}

.venda-rapida-collapse-header .field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.venda-rapida-collapse-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .venda-rapida-payment-options {
    grid-template-columns: 1fr;
  }
  .venda-rapida-payment-row {
    grid-template-columns: 1fr;
  }
  .venda-rapida-status-options {
    flex-wrap: wrap;
  }
}

/* ---------- Venda Rápida: criação rápida inline ---------- */
.vr-quickcreate {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.35);
}

.vr-quickcreate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vr-quickcreate-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.vr-quickcreate-tab {
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 0.88rem;
}

.vr-quickcreate-tab.is-active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: hsl(var(--primary-foreground));
}

/* ---------- Venda Rápida: painéis Parcelado / Recorrente ---------- */
.vr-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vr-mode-info {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}

.vr-mode-info svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.vr-mode-info strong {
  color: hsl(var(--foreground));
}

.vr-mode-summary {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.35);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vr-mode-summary-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.vr-mode-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
}

.vr-mode-summary-row svg {
  vertical-align: -0.2em;
  margin-right: 0.3rem;
}

.vr-mode-summary-row strong {
  color: hsl(var(--foreground));
}

.vr-mode-summary-row.is-total {
  border-top: 1px solid hsl(var(--border));
  padding-top: 0.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.vr-mode-summary-row.is-total strong {
  color: hsl(var(--primary));
}

.vr-mode-billing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid hsl(var(--border));
  padding-top: 1rem;
}

.vr-mode-billing-row .field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vr-duracao-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.vr-duracao-option + .vr-duracao-option {
  margin-top: 0.6rem;
}

.vr-duracao-option.is-active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.07);
}

.vr-duracao-radio {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid hsl(var(--border-strong));
  flex-shrink: 0;
  margin-top: 0.15rem;
  position: relative;
}

.vr-duracao-option.is-active .vr-duracao-radio {
  border-color: hsl(var(--primary));
}

.vr-duracao-option.is-active .vr-duracao-radio::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: hsl(var(--primary));
}

.vr-duracao-option strong {
  font-size: 0.95rem;
}

.vr-duracao-option p {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.2rem;
  line-height: 1.45;
}

/* ---------- Venda Rápida: status Parcial / Pago ---------- */
.vr-status-extra {
  margin-top: 1rem;
}

.vr-valor-recebido-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.vr-valor-recebido-row .input {
  flex: 1;
}

.vr-valor-recebido-row .field-hint {
  white-space: nowrap;
}

/* ---------- Venda Rápida: categoria financeira ---------- */
.vr-categoria-select {
  position: relative;
}

.vr-categoria-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
  cursor: pointer;
}

.vr-categoria-list {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 0.35rem;
  z-index: 5;
}

.vr-categoria-list.is-open {
  display: block;
}

.vr-categoria-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
}

.vr-categoria-item:hover {
  background: hsl(var(--muted));
}

.vr-categoria-item.is-active {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.vr-categoria-check {
  display: flex;
  width: 1rem;
  flex-shrink: 0;
  visibility: hidden;
}

.vr-categoria-item.is-active .vr-categoria-check {
  visibility: visible;
}

.vr-categoria-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Venda Rápida: painel Gerar Tarefa ou Projeto ---------- */
.vr-tarefa-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: 2px solid hsl(var(--primary) / 0.5);
  padding-left: 1rem;
  margin-top: 0.25rem;
}

.vr-tarefa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.vr-tarefa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: none;
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.vr-tarefa-card.is-active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.07);
}

.vr-tarefa-card-radio {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid hsl(var(--border-strong));
}

.vr-tarefa-card.is-active .vr-tarefa-card-radio {
  border-color: hsl(var(--primary));
}

.vr-tarefa-card.is-active .vr-tarefa-card-radio::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: hsl(var(--primary));
}

.vr-tarefa-card strong {
  font-size: 0.92rem;
  margin-top: 0.35rem;
}

.vr-tarefa-card-desc {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

/* Miniaturas decorativas dos formatos de fluxo */
.vr-tarefa-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.25rem;
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.5);
  margin-bottom: 0.35rem;
  padding: 0.5rem;
}

.vr-art-card {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.35rem;
  padding: 0.5rem 0.65rem;
  min-width: 55%;
}

.vr-art-card.is-dashed {
  border-style: dashed;
  color: hsl(var(--muted-foreground));
  justify-content: center;
}

.vr-art-bar {
  width: 0.22rem;
  height: 1rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.vr-art-bar.is-blue { background: hsl(217 85% 60%); }
.vr-art-bar.is-cyan { background: hsl(190 70% 55%); }
.vr-art-bar.is-orange { background: hsl(22 85% 55%); }
.vr-art-bar.is-green { background: hsl(145 60% 45%); }
.vr-art-bar.is-red { background: hsl(var(--destructive)); }

.vr-art-line {
  flex: 1;
  height: 0.3rem;
  border-radius: 999px;
  background: hsl(var(--border-strong) / 0.7);
}

.vr-art-cols {
  display: flex;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
}

.vr-art-col {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.35rem;
  padding: 0.4rem;
}

.vr-art-col.is-highlight {
  border-color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
  flex-direction: column;
}

@media (max-width: 640px) {
  .vr-tarefa-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Conquistas ---------- */
.conquista-total-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, hsl(var(--primary) / 0.16), hsl(var(--primary) / 0.04));
  border: 1px solid hsl(var(--primary) / 0.3);
  margin-bottom: 1.5rem;
}

.conquista-total-card span {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

.conquista-total-card strong {
  font-size: 2rem;
  font-weight: 800;
  color: hsl(var(--primary));
}

.conquista-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
  margin-top: 1.5rem;
}

.conquista-placas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.conquista-placa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
}

.conquista-placa.is-unlocked {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--primary));
}

.conquista-placa-icon {
  display: flex;
}

.conquista-lock {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: hsl(var(--muted-foreground) / 0.6);
}

.conquista-placa-label {
  font-size: 0.85rem;
  font-weight: 700;
}

.conquista-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.conquista-timeline-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.35);
  border: 1px solid hsl(var(--border));
}

.conquista-timeline-row.is-done {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.08);
}

.conquista-timeline-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.conquista-timeline-row.is-done .conquista-timeline-icon {
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
}

.conquista-timeline-label {
  font-weight: 600;
  font-size: 0.88rem;
}

.conquista-timeline-valor {
  margin-left: auto;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

.conquista-mensal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.conquista-mes-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.conquista-mes-row.is-atual .conquista-mes-label {
  color: hsl(var(--primary));
  font-weight: 700;
}

.conquista-mes-label {
  width: 3.5rem;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

.conquista-mes-bar-track {
  flex: 1;
  height: 0.6rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
}

.conquista-mes-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-primary);
  min-width: 2px;
}

.conquista-mes-valor {
  width: 4.5rem;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

.conquista-proxima {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: hsl(var(--primary) / 0.08);
  border: 1px solid hsl(var(--primary) / 0.3);
}

.conquista-proxima-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.conquista-proxima-header strong {
  color: hsl(var(--primary));
  font-size: 1.05rem;
}

.conquista-proxima-track {
  height: 0.5rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.conquista-proxima-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-primary);
}

@media (max-width: 640px) {
  .conquista-placas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.modal-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
}

.modal-close {
  color: hsl(var(--muted-foreground));
  padding: 0.3rem;
  border-radius: var(--radius-sm);
}

.modal-close:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.modal-actions .btn {
  width: auto;
}

.modal-card.is-confirm {
  max-width: 400px;
  text-align: center;
}

/*
 * Abaixo de 860px o menu lateral vira uma barra com o logo e um botão de menu.
 * O resto (Nova Venda, navegação e rodapé) fica escondido até o usuário abrir —
 * empilhar 14 itens numa faixa horizontal deixava a navegação inalcançável.
 */
@media (max-width: 860px) {
  .dashboard-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .dashboard-sidebar,
  .dashboard-sidebar.is-collapsed {
    width: 100%;
    flex-direction: column;
    padding: 0.85rem 1rem;
    border-right: none;
    border-bottom: none;
    overflow: visible;
  }
  .dashboard-sidebar-logo {
    margin-bottom: 0;
    width: 100%;
    justify-content: space-between;
  }
  .sidebar-mobile-toggle {
    display: inline-flex;
  }
  .dashboard-sidebar .sidebar-new-sale,
  .dashboard-sidebar .dashboard-nav,
  .dashboard-sidebar .dashboard-sidebar-footer {
    display: none;
  }
  .dashboard-sidebar.is-mobile-open .sidebar-new-sale {
    display: flex;
    margin-top: 1rem;
  }
  .dashboard-sidebar.is-mobile-open .dashboard-nav {
    display: flex;
    flex-direction: column;
    flex: none;
    overflow: visible;
  }
  .dashboard-sidebar.is-mobile-open .dashboard-sidebar-footer {
    display: flex;
    flex-direction: column;
  }
  /* o "recolher" não faz sentido aqui, e o menu aberto precisa dos rótulos */
  #sidebar-collapse-btn {
    display: none;
  }
  /* Aqui a marca divide a faixa com o botão de menu, lado a lado — a pilha
     vertical do modo recolhido no computador não vale neste tamanho. */
  .dashboard-sidebar.is-collapsed .dashboard-sidebar-logo {
    flex-direction: row;
    gap: 0.6rem;
    padding: 0;
  }
  .dashboard-sidebar.is-collapsed .sidebar-label {
    display: inline;
  }
  .dashboard-sidebar.is-collapsed .dashboard-nav-item,
  .dashboard-sidebar.is-collapsed .sidebar-new-sale {
    justify-content: flex-start;
  }
  /* O recolhimento empurra o rótulo do grupo para fora da tela com text-indent.
     Aqui o menu abre inteiro, então os três blocos voltam a ter nome — sem
     isto o celular mostrava só vãos em branco entre eles. */
  .dashboard-sidebar.is-collapsed .dashboard-nav-section {
    height: auto;
    width: auto;
    margin: 0;
    padding: var(--space-5) var(--space-3) var(--space-2);
    text-indent: 0;
    border-top: 0;
  }
  .dashboard-sidebar.is-collapsed .dashboard-nav-section:first-child {
    padding-top: 0;
  }
  .dashboard-sidebar.is-collapsed .sidebar-logo.is-dark {
    display: block;
  }
  .dashboard-sidebar.is-collapsed .sidebar-logo-mini {
    display: none;
  }
  .dashboard-content {
    padding: 1.25rem;
    overflow-y: visible;
  }
  .dashboard-topbar {
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .topbar-actions {
    flex-wrap: wrap;
  }
  /* os grupos de botões da barra do pipeline empurravam a página para o lado */
  .pipeline-toolbar-row > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 100%;
  }
}

/*
 * Quarta anatomia de card de número que existia no produto: o ícone ficava à
 * esquerda, colado no valor. Passa para a mesma do resto — rótulo e ícone na
 * linha de topo, número embaixo — usando áreas, sem tocar no HTML.
 */
.briefing-summary > div {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "value value";
  align-content: start;
  gap: var(--space-1) var(--space-3);
  min-height: 6.5rem;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

@media (max-width: 900px) {
  .briefing-top-actions { margin-top: 1rem; justify-content: flex-start; overflow-x: auto; }
  .briefing-summary { grid-template-columns: repeat(2, 1fr); }
  .briefing-filters { grid-template-columns: 1fr; }
  .briefing-default-grid,
  .briefing-custom-templates,
  .briefing-type-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .briefing-summary { grid-template-columns: 1fr; }
}

#email-block-properties { margin-top: 1rem; }
#email-block-properties > p { margin-top: 3rem; color: hsl(var(--muted-foreground)); text-align: center; }

@media (max-width: 900px) {
  .email-builder { grid-template-columns: 170px 1fr; }
  .email-block-editor { display: none; }
  .email-campaign-meta { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .email-builder { grid-template-columns: 1fr; overflow: auto; }
  .email-block-library > div { grid-template-columns: repeat(3, 1fr); }
  .email-preview-panel { min-height: 500px; }
  .email-campaign-editor > footer { align-items: stretch; flex-direction: column; }
  .email-campaign-editor > footer > div { width: 100%; }
  .email-campaign-editor > footer > div > * { flex: 1; }
}

/* ---------- Páginas ---------- */
.pages-module-tabs {
  display: flex;
  width: fit-content;
  gap: .35rem;
  padding: .35rem;
  border-radius: .7rem;
  background: hsl(var(--muted));
}
.pages-module-tabs button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.pages-module-tabs button.is-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 4px hsl(0 0% 0% / .08);
}
.pages-actions { display: flex; justify-content: flex-end; margin: -2.9rem 0 1.2rem; }
.pages-actions .btn { width: auto; }
.pages-empty {
  display: flex;
  min-height: 340px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .5rem;
  border: 1px solid hsl(var(--border));
  border-radius: .85rem;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.pages-empty > span { display: flex; margin-bottom: .7rem; color: hsl(var(--primary)); }
.pages-empty h3, .pages-empty p { margin: 0; }
.pages-empty h3 { color: hsl(var(--foreground)); }
.pages-empty .btn { width: auto; margin-top: .8rem; }
.pages-list { display: grid; gap: .7rem; }
.pages-list article {
  display: grid;
  grid-template-columns: 32px 1fr auto 38px;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: .8rem;
  background: hsl(var(--card));
}
.pages-list article > span:first-child { color: hsl(var(--primary)); }
.pages-list article > div { display: flex; flex-direction: column; gap: .15rem; }
.pages-list small { color: hsl(var(--muted-foreground)); }
.pages-create-modal { max-width: 560px; }
.pages-create-modal .field-prefix {
  position: absolute;
  z-index: 1;
  left: .85rem;
  top: 50%;
  color: hsl(var(--muted-foreground));
  transform: translateY(-50%);
}
.pages-create-modal .field-control .input { padding-left: 1.5rem; }

@media (max-width: 700px) {
  .pages-actions { margin: 1rem 0; justify-content: flex-start; }
  .pages-module-tabs { width: 100%; }
  .pages-module-tabs button { flex: 1; justify-content: center; }
}

/* ---------- Pipelines: toolbar ---------- */
.pipeline-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.pipeline-toolbar-row.is-spread {
  justify-content: space-between;
}

.pipeline-tab {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid hsl(var(--primary) / 0.5);
  border-radius: var(--radius-sm);
  color: hsl(var(--foreground));
  font-size: 0.88rem;
  font-weight: 500;
  background: hsl(var(--primary) / 0.08);
}

/* ---------- Pipelines: kanban board ---------- */
/*
 * `align-items: flex-start` fazia cada coluna ter a altura do próprio conteúdo,
 * então o funil vazio virava uma faixa de 3 linhas com um vão embaixo. Esticadas,
 * as colunas viram raias de verdade e o alvo de arrastar existe mesmo vazio.
 */
.kanban-board {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  align-items: stretch;
  min-height: 24rem;
}

.kanban-column {
  flex: 0 0 17.5rem;
  width: 17.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-1);
}

.kanban-column-header h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.kanban-column-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  padding: 0.05rem var(--space-2);
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

.kanban-column-total {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
  padding: 0 var(--space-4) var(--space-3);
  font-variant-numeric: tabular-nums;
}

.kanban-column-body {
  flex: 1;
  padding: 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 120px;
  transition: background-color 0.15s ease;
  border-radius: var(--radius-sm);
}

.kanban-column-body.is-drag-over {
  background: hsl(var(--primary) / 0.08);
}

.kanban-empty {
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
  padding: 1.5rem 0.5rem;
}

.kanban-card {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 0.7rem;
  padding: 0.9rem;
  cursor: grab;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kanban-card:hover {
  border-color: hsl(var(--primary) / 0.5);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.kanban-card.is-dragging {
  opacity: 0.4;
}

.kanban-card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.kanban-card-grip {
  display: flex;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground-subtle));
  cursor: grab;
}

.kanban-card-name {
  flex: 1;
  font-weight: 700;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-menu-btn {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

.kanban-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

.kanban-card-info span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-info svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground-subtle));
}

.kanban-card-valor {
  font-weight: 700;
  color: hsl(var(--primary));
}

.kanban-card-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.kanban-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.kanban-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.kanban-btn.is-ganha {
  background: hsl(145 63% 40%);
  color: #fff;
}

.kanban-btn.is-ganha:hover {
  background: hsl(145 63% 34%);
}

.kanban-btn.is-perdida {
  background: none;
  border-color: hsl(var(--destructive) / 0.6);
  color: hsl(var(--destructive));
}

.kanban-btn.is-perdida:hover {
  background: hsl(var(--destructive) / 0.1);
}

/* Menu "…" flutuante do card do funil. */
/*
 * A largura era fixa em 170px e os itens quebravam linha. Quando o bloco de
 * menus do Design System passou a usar `white-space: nowrap`, o texto mais
 * longo ("Marcar como Perdida") deixou de caber e vazava pela borda. A largura
 * agora acompanha o maior item, com um teto.
 */
.kanban-card-menu {
  position: absolute;
  z-index: 70;
  width: max-content;
  min-width: 11rem;
  max-width: 16rem;
  padding: 0.35rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.kanban-card-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.kanban-card-menu button:hover {
  background: hsl(var(--muted));
}

@media (max-width: 700px) {
  .kanban-column {
    flex: 0 0 240px;
    width: 240px;
  }
}

/* ---------- Agenda ---------- */
.agenda-view-switch {
  display: inline-flex;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 0.2rem;
  gap: 0.2rem;
}

.agenda-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.1rem;
  padding: 0 0.85rem;
  border-radius: calc(var(--radius-sm) - 0.15rem);
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

.agenda-view-btn.is-active {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.agenda-month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
}

.agenda-month-row h2 {
  font-size: 1.2rem;
  font-weight: 700;
}

.toggle-row-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.toggle-row-bar .toggle-row {
  cursor: pointer;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

.agenda-calendar {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

/* Faixa dos dias da semana com fundo próprio: separa cabeçalho de conteúdo. */
.agenda-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}

.agenda-weekdays span {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: hsl(var(--muted-foreground-subtle));
}

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.agenda-day {
  min-height: 6.5rem;
  padding: var(--space-2);
  border-right: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

/* A última coluna não precisa de borda: o card já fecha a grade. */
.agenda-day:nth-child(7n) {
  border-right: none;
}

.agenda-day:hover {
  background: var(--hover-overlay);
}

/* Dia de fora do mês fica recuado, não pintado. */
.agenda-day.is-outside {
  background: transparent;
  opacity: 0.45;
  cursor: default;
}

.agenda-day.is-outside:hover {
  background: transparent;
}

.agenda-day.is-outside .agenda-day-number {
  color: hsl(var(--muted-foreground) / 0.4);
}

.agenda-day-number {
  font-size: 0.85rem;
  color: hsl(var(--foreground));
}

.agenda-day-number.is-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  font-weight: 700;
}

.agenda-day-items {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.agenda-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.72rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-item.is-tarefa {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.agenda-item.is-done {
  text-decoration: line-through;
  opacity: 0.6;
}

@media (max-width: 860px) {
  .agenda-day {
    min-height: 70px;
  }
  .agenda-item {
    font-size: 0.65rem;
  }
}

/* Configurações */
.settings-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.3rem;
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted));
  scrollbar-width: thin;
}

.settings-tabs button {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.settings-tabs button:hover,
.settings-tabs button.is-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.18);
}

.settings-stack {
  display: grid;
  gap: 1.25rem;
  max-width: 1080px;
}

.settings-card,
.settings-placeholder {
  padding: 1.35rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.settings-card > header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}

.settings-card > header > span,
.settings-account-email > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.65rem;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.75rem;
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary-light));
}

.settings-card > header svg,
.settings-account-email svg,
.settings-inline-card h3 svg {
  width: 1.2rem;
  height: 1.2rem;
}

.settings-card h2,
.settings-card h3,
.settings-card p,
.settings-inline-card p {
  margin: 0;
}

.settings-card h2 {
  font-size: 1.05rem;
}

.settings-card header p,
.settings-card > p,
.settings-inline-card p,
.settings-inline-card small,
.settings-photo small {
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
}

.settings-photo {
  margin-bottom: 1.2rem;
}

.settings-photo > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
  font-size: 0.85rem;
}

.settings-photo > div span {
  color: hsl(var(--muted-foreground));
}

.settings-photo > label {
  display: grid;
  grid-template-columns: 5rem max-content 1fr;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
}

.settings-photo > label > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border: 1px dashed hsl(var(--border-strong));
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.settings-photo > label svg {
  width: 2rem;
  height: 2rem;
}

.settings-inline-card,
.settings-account-email {
  margin-bottom: 1.2rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.35);
}

.settings-inline-card h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
}

.settings-inline-card p {
  margin: 0.2rem 0 0.75rem;
}

.settings-inline-card .select {
  width: 100%;
}

.settings-inline-card small {
  display: block;
  margin-top: 0.55rem;
  color: hsl(var(--primary-light));
}

.settings-account-email {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settings-account-email small,
.settings-account-email strong {
  display: block;
}

.settings-account-email small {
  color: hsl(var(--muted-foreground));
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.settings-form-grid .field:nth-child(-n + 4) {
  grid-column: span 2;
}

.settings-form-grid .is-wide-address {
  grid-column: span 3;
}

.settings-form-grid .is-full {
  grid-column: 1 / -1;
}

.settings-save-row {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 0.75rem;
}

.settings-save-row .btn-primary {
  width: 100%;
}

.settings-link-row {
  display: grid;
  grid-template-columns: auto auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.35);
}

.settings-link-row > span {
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

.settings-passwords {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.settings-passwords .btn-secondary {
  justify-self: start;
}

.settings-placeholder {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.settings-placeholder > span {
  color: hsl(var(--primary-light));
}

.settings-placeholder svg {
  width: 2.2rem;
  height: 2.2rem;
}

.settings-placeholder h2 {
  margin: 0.8rem 0 0.25rem;
}

.settings-placeholder p {
  margin: 0 0 1rem;
  color: hsl(var(--muted-foreground));
}

.appearance-stack {
  max-width: 1180px;
}

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.appearance-option {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 5.6rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.appearance-option:hover {
  border-color: hsl(var(--primary) / 0.55);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.appearance-option > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.7rem;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.appearance-option > span svg {
  width: 1.3rem;
  height: 1.3rem;
}

.appearance-option > svg {
  color: hsl(var(--muted-foreground));
}

.appearance-option strong,
.appearance-option small {
  display: block;
}

.appearance-option strong {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.appearance-option small {
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.35;
}

/* ===== Aba E-mail das Configurações =====
   As regras base destes dois seletores tinham sumido: sobravam só os ajustes
   dentro de `@media (max-width: 780px)` e `(max-width: 520px)`, que
   SOBRESCREVEM um grid que não existia mais. Acima de 780px o cartão caía no
   estilo padrão de <button> — texto centralizado, sem borda, com a seta
   quebrando para a linha de baixo.
   O desenho é o mesmo de `.appearance-option`, que é o irmão desta tela: as
   larguras que o celular sobrescreve (2,7rem / 1fr / auto) são as daquele. */
.email-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.email-setting-card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 5.6rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.email-setting-card:hover:not(:disabled) {
  border-color: hsl(var(--primary) / 0.55);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.email-setting-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.7rem;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.email-setting-card > span svg {
  width: 1.3rem;
  height: 1.3rem;
}

.email-setting-card > svg {
  color: hsl(var(--muted-foreground));
}

.email-setting-card strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.email-setting-card p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.35;
}

/* O cartão "em breve" não é clicável: o cinza e o cursor dizem isso antes do
   clique, em vez de prometer uma tela e avisar depois que ela não existe. */
.email-setting-card.is-soon {
  cursor: default;
  opacity: 0.6;
}

.email-setting-card.is-soon > span {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* ---- Estado do envio, no cartão do SMTP ---- */
.email-setting-estado {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.email-setting-estado.is-ok { color: hsl(var(--success)); }
.email-setting-estado.is-aviso { color: hsl(45 90% 35%); }

.email-settings-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.email-settings-nota svg { flex-shrink: 0; margin-top: 0.1rem; }

/* ---- Modal de configuração do SMTP ---- */
.smtp-modal { max-width: 620px; }
.smtp-sub {
  margin: 0.25rem 0 0;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.smtp-form { display: flex; flex-direction: column; gap: var(--space-3); }

.smtp-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.smtp-presets .btn-secondary {
  width: auto;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
}

.smtp-ativar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.85rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.smtp-ativar span { display: block; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.smtp-ativar .toggle { flex-shrink: 0; }

.smtp-estado {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.smtp-estado svg { flex-shrink: 0; margin-top: 0.1rem; }
.smtp-estado.is-ok { color: hsl(var(--success)); }
.smtp-estado.is-erro { color: hsl(var(--destructive)); }

/* A conversa com o servidor fica recolhida: só interessa quando falha, e aí
   é a única coisa que diz o motivo. */
.smtp-transcricao summary {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.smtp-transcricao pre {
  max-height: 14rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  overflow: auto;
  border-radius: var(--radius-sm);
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.smtp-acoes { display: flex; gap: var(--space-2); }
.smtp-acoes .btn-secondary,
.smtp-acoes .btn { width: auto; flex: 1; }

@media (max-width: 560px) {
  .smtp-acoes { flex-direction: column; }
}

.appearance-wide-card > header {
  margin-bottom: 1rem;
}

.appearance-upload-row {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 0.65rem;
  margin-top: 0.45rem;
}

.appearance-upload-row .btn-secondary {
  white-space: nowrap;
}

.appearance-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border));
}

.appearance-control-row strong,
.appearance-control-row small {
  display: block;
}

.appearance-control-row small {
  margin-top: 0.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
}

.appearance-compact-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.appearance-compact-card > header {
  margin: 0;
}

.appearance-manager-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.appearance-manager-card h2,
.appearance-manager-card p {
  margin: 0;
}

.appearance-manager-card h2 {
  font-size: 1rem;
}

.appearance-manager-card p {
  margin-top: 0.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
}

.updates-card {
  max-width: 1080px;
}

.updates-card > header > span {
  background: linear-gradient(135deg, #f0b82f, #ffe19a);
  color: #6a4800;
  box-shadow: 0 5px 18px rgb(240 184 47 / 0.22);
}

.updates-timeline {
  display: grid;
  gap: 1.25rem;
}

.update-group > h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
}

.update-list {
  display: grid;
  gap: 0.55rem;
}

.update-item {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.34);
  transition: var(--transition-smooth);
}

.update-item:hover {
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--muted) / 0.56);
}

.update-icon {
  display: inline-flex;
  justify-content: center;
  padding-top: 0.1rem;
  color: hsl(var(--muted-foreground));
}

.update-icon svg {
  width: 1rem;
  height: 1rem;
}

.update-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.update-title strong {
  font-size: 0.86rem;
}

.update-item p {
  margin: 0.28rem 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  line-height: 1.45;
}

.update-category,
.update-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.15rem;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
}

.update-category.is-financeiro {
  background: rgb(59 130 246 / 0.13);
  color: #60a5fa;
}

.update-category.is-produtos {
  background: rgb(34 197 94 / 0.13);
  color: #4ade80;
}

.update-category.is-ia {
  background: rgb(168 85 247 / 0.14);
  color: #c084fc;
}

.update-category.is-integracao {
  background: rgb(20 184 166 / 0.13);
  color: #2dd4bf;
}

.update-category.is-conteudo {
  background: rgb(236 72 153 / 0.12);
  color: #f472b6;
}

.update-category.is-tarefas {
  background: rgb(148 163 184 / 0.15);
  color: #cbd5e1;
}

.update-category.is-correcao {
  background: rgb(148 163 184 / 0.13);
  color: hsl(var(--muted-foreground));
}

.update-status.is-new,
.update-status.is-important,
.update-status.is-soon {
  background: rgb(245 158 11 / 0.16);
  color: #fbbf24;
}

.update-status.is-important {
  background: rgb(249 115 22 / 0.16);
  color: #fb923c;
}

.update-status.is-beta {
  background: rgb(168 85 247 / 0.14);
  color: #c084fc;
}

.subscription-stack {
  max-width: 1080px;
}

.subscription-card > header > span {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.subscription-summary {
  display: grid;
  gap: 0.85rem;
}

.subscription-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 5.35rem;
  padding: 1rem 1.15rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.25);
}

.subscription-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary-light));
}

.subscription-row.is-success .subscription-row-icon {
  color: hsl(var(--success));
}

.subscription-row-icon:empty {
  width: 1rem;
}

.subscription-row-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.subscription-row small,
.subscription-row strong {
  display: block;
}

.subscription-row small {
  margin-bottom: 0.12rem;
  color: hsl(var(--muted-foreground));
}

.subscription-row strong {
  font-size: 1rem;
}

.subscription-row-action {
  display: flex;
  justify-content: flex-end;
}

.subscription-badge,
.subscription-note {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  color: hsl(var(--foreground));
  font-size: 0.76rem;
  font-weight: 700;
}

.subscription-badge.is-active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.subscription-note {
  border: 0;
  background: hsl(var(--muted));
}

.subscription-inline-form,
.subscription-action-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.45);
}

.subscription-inline-form h3 {
  margin: 0 0 0.8rem;
}

.subscription-card-fields {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.55fr 0.4fr;
  gap: 0.7rem;
}

.subscription-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.subscription-form-actions .btn-primary {
  width: auto;
}

.subscription-actions > h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.subscription-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.3rem;
  margin-top: 0.7rem;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.28);
  color: hsl(var(--foreground));
  font: inherit;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.subscription-action:hover {
  border-color: hsl(var(--primary) / 0.45);
  background: hsl(var(--muted) / 0.55);
}

.subscription-action > span {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.subscription-action svg {
  width: 1rem;
  height: 1rem;
}

.subscription-action-panel p {
  margin: 0;
  color: hsl(var(--muted-foreground));
}

.subscription-plan-row {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 0.65rem;
}

.subscription-plan-row .btn-primary {
  width: auto;
}

.subscription-cancel {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.3rem auto 0;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font: inherit;
  cursor: pointer;
}

.subscription-cancel:hover {
  color: hsl(var(--destructive));
}

.subscription-cancel svg {
  width: 1rem;
  height: 1rem;
}

.mobile-settings-card {
  max-width: 1080px;
}

.mobile-settings-card > header > span {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.mobile-settings-label {
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.mobile-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.mobile-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 6.6rem;
  padding: 0.9rem;
  border: 1px solid hsl(var(--border-strong));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.22);
  color: hsl(var(--muted-foreground));
  font: inherit;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.mobile-shortcut:hover {
  border-color: hsl(var(--primary) / 0.6);
  color: hsl(var(--foreground));
}

.mobile-shortcut.is-selected {
  border: 2px solid hsl(var(--primary-light));
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary-light));
}

.mobile-shortcut span {
  display: inline-flex;
}

.mobile-shortcut svg {
  width: 1.55rem;
  height: 1.55rem;
}

.mobile-shortcut strong {
  font-size: 0.9rem;
  text-align: center;
}

.mobile-settings-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.28);
}

.mobile-settings-notice p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
  line-height: 1.45;
}

.mobile-settings-notice strong {
  color: hsl(var(--foreground));
}

.mobile-settings-save {
  width: 100%;
  margin-top: 1.25rem;
}

.notification-settings-stack {
  max-width: 1080px;
}

.notification-card > header > span {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.push-notification-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.28);
}

.push-notification-row > span {
  display: inline-flex;
  color: hsl(var(--muted-foreground));
}

.push-notification-row > span svg {
  width: 1.15rem;
  height: 1.15rem;
}

.push-notification-row strong,
.push-notification-row small,
.notification-toggle-row strong,
.notification-toggle-row small,
.notification-section-heading strong,
.notification-section-heading small,
.notification-receive-box strong,
.notification-receive-box span {
  display: block;
}

.push-notification-row small,
.notification-toggle-row small,
.notification-section-heading small {
  margin-top: 0.15rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}

.push-notification-row .btn-primary {
  width: auto;
  min-width: 4.7rem;
}

.notification-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.24);
}

.notification-toggle-row.is-main {
  margin: 1.2rem 0;
  padding-inline: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.notification-section-heading {
  margin-bottom: 0.7rem;
}

.notification-type-list,
.notification-general-list {
  display: grid;
  gap: 0.65rem;
}

.notification-general-list .notification-toggle-row {
  padding-inline: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.notification-general-list .notification-toggle-row:last-child {
  border-bottom: 0;
}

.notification-receive-box {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.2rem;
  padding: 1rem;
  border: 1px solid hsl(var(--primary) / 0.4);
  border-radius: var(--radius-sm);
  background: hsl(var(--primary) / 0.1);
}

.notification-receive-box strong {
  margin-bottom: 0.25rem;
}

.notification-receive-box span {
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
}

.notification-save {
  width: 100%;
  margin-top: 1.2rem;
}

.automation-settings {
  max-width: 1180px;
}

.automation-settings-header,
.automation-title {
  display: flex;
  align-items: center;
}

.automation-settings-header {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.automation-title {
  gap: 0.75rem;
}

.automation-title > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 0.75rem;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.automation-title h2,
.automation-title p {
  margin: 0;
}

.automation-title h2 {
  font-size: 1.35rem;
}

.automation-title p {
  margin-top: 0.15rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

.automation-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 1.2rem;
}

.automation-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-right: 1.2rem;
  border-right: 1px solid hsl(var(--border));
}

.automation-nav button {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.automation-nav button:hover,
.automation-nav button.is-active {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary-light));
}

.automation-nav button > span {
  display: inline-flex;
}

.automation-nav button svg {
  width: 1rem;
  height: 1rem;
}

.automation-nav button small {
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-size: 0.58rem;
  font-weight: 700;
}

.automation-panel {
  min-width: 0;
}

.automation-panel > header > span {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.automation-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 1rem;
  min-height: 4.55rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid hsl(var(--border));
}

.automation-control-row strong,
.automation-control-row small {
  display: block;
}

.automation-control-row small {
  margin-top: 0.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}

.automation-control-row .select {
  min-width: 170px;
}

.automation-control-row .toggle {
  justify-self: end;
}

.automation-details {
  margin-top: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.28);
  overflow: hidden;
}

.automation-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}

.automation-details summary::-webkit-details-marker {
  display: none;
}

.automation-details summary svg {
  width: 1rem;
  height: 1rem;
}

.automation-details > div {
  padding: 0 1rem 1rem;
}

.automation-details p {
  color: hsl(var(--muted-foreground));
}

.automation-message {
  margin-top: 1rem;
}

.automation-message textarea {
  min-height: 110px;
  resize: vertical;
}

.automation-number-input {
  width: 110px;
  justify-self: end;
  text-align: center;
}

.automation-notification-list {
  display: grid;
}

.automation-dual-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid hsl(var(--border));
}

.automation-dual-row strong,
.automation-dual-row small {
  display: block;
}

.automation-dual-row small {
  margin-top: 0.18rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.76rem;
}

.automation-dual-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
}

.automation-dual-controls label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  white-space: nowrap;
}

.automation-dual-controls .select {
  min-width: 135px;
}

.automation-nested-card {
  margin-top: 1.2rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.24);
}

.automation-nested-card > header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.automation-nested-card > header > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  border-radius: 0.65rem;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
}

.automation-nested-card > header strong,
.automation-nested-card > header small {
  display: block;
}

.automation-nested-card > header small {
  margin-top: 0.12rem;
  color: hsl(var(--muted-foreground));
}

.automation-unified-banner {
  display: grid;
  gap: 0.18rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid hsl(155 65% 42% / 0.45);
  border-radius: var(--radius-sm);
  background: hsl(155 65% 42% / 0.09);
}

.automation-unified-banner span {
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
}

@media (max-width: 1180px) {
  .whatsapp-service-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .whatsapp-connect-page { min-height: auto; padding: 0; }
  .whatsapp-connect-card { padding: 1.5rem 1rem; }
  .whatsapp-qr-layout { grid-template-columns: 1fr; }
  .whatsapp-fake-qr { width: min(220px, 100%); margin: auto; }
  .whatsapp-service-actions { align-items: flex-end; margin: 0 0 1rem; flex-direction: column; gap: .7rem; }
  .whatsapp-service-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whatsapp-service-table { overflow-x: auto; }
  .whatsapp-service-table-head { min-width: 760px; }
  .whatsapp-template-grid { grid-template-columns: 1fr; }
}

.integration-settings {
  display: grid;
  gap: 1.4rem;
  max-width: 1180px;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
}

.integration-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 150px;
  padding: 1rem 0.7rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid hsl(var(--border-strong));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.integration-card:not(:disabled):hover {
  border-color: hsl(var(--primary) / 0.55);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.integration-card > small {
  position: absolute;
  top: 0.7rem;
  right: 0.65rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.63rem;
  font-weight: 700;
}

.integration-logo {
  display: inline-flex;
  min-width: 2.7rem;
  min-height: 2.7rem;
  align-items: center;
  justify-content: center;
  color: hsl(var(--foreground));
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.integration-logo svg {
  width: 2.2rem;
  height: 2.2rem;
}

.integration-logo.is-google-calendar {
  width: 2.2rem;
  min-width: 2.2rem;
  min-height: 2.2rem;
  border: 0.35rem solid #4285f4;
  border-top-color: #ea4335;
  border-right-color: #34a853;
  border-bottom-color: #fbbc05;
  border-radius: 0.25rem;
  background: white;
  color: #4285f4;
  font-size: 0.85rem;
}

.integration-logo.is-asaas {
  border-radius: 0.35rem;
  background: #133bc2;
  font-size: 1.4rem;
}

/* O AbacatePay era o único `kind` sem regra de marca: o emoji saía no tamanho
   do texto enquanto Asaas, Inter, Meta, Drive e Calendar tinham tratamento. */
.integration-logo.is-abacate {
  border-radius: 0.35rem;
  background: #127a3d;
  font-size: 1.4rem;
}

.integration-logo.is-inter {
  color: #ff7a00;
  font-size: 0.9rem;
  text-transform: lowercase;
}

.integration-logo.is-meta {
  color: #20232d;
  font-family: Georgia, serif;
  font-size: 2.4rem;
}

.integration-logo.is-drive {
  color: #1a73e8;
  font-size: 2.2rem;
  text-shadow: -7px 7px 0 #0f9d58, 7px 7px 0 #fbbc04;
}

.integration-card.is-connected {
  border-color: hsl(160 68% 45% / 0.65);
  background: hsl(160 68% 45% / 0.1);
  color: hsl(160 68% 38%);
}

.integration-card.is-connected .integration-logo {
  color: hsl(160 68% 42%);
}

.integration-check {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.integration-check svg {
  width: 0.8rem;
  height: 0.8rem;
}

.integration-card.is-soon {
  border-color: transparent;
  background: hsl(var(--muted) / 0.18);
  color: hsl(var(--muted-foreground));
  cursor: not-allowed;
  opacity: 0.56;
}

.integration-suggestion {
  padding: 1.7rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  text-align: center;
}

.integration-suggestion h2,
.integration-suggestion p {
  margin: 0;
}

.integration-suggestion h2 {
  font-size: 1.15rem;
}

.integration-suggestion p {
  margin: 0.45rem 0 1rem;
  color: hsl(var(--muted-foreground));
}

.integration-suggestion .btn-secondary {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-light));
}

.content-settings {
  display: grid;
  gap: 1.15rem;
  max-width: 1180px;
}

.content-settings-heading,
.content-section-title,
.content-flow-title,
.content-workflow-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.content-settings-heading h2,
.content-settings-heading p,
.content-section-title h2,
.content-section-title p {
  margin: 0;
}

.content-settings-heading h2,
.content-section-title h2 {
  font-size: 1rem;
}

.content-settings-heading p,
.content-section-title p {
  margin-top: 0.18rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  line-height: 1.42;
}

.content-settings-heading em {
  color: hsl(160 65% 42%);
  font-style: normal;
}

.content-text-link {
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: hsl(var(--primary-light));
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.content-flow-title {
  padding: 0.75rem 0.85rem;
  border-radius: 0.55rem;
  background: hsl(var(--muted));
}

.content-flow-title small {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary-light));
}

.content-check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 0.7rem;
  padding: 0.85rem;
  align-items: start;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.25);
}

.content-check-row strong,
.content-check-row small {
  display: block;
}

.content-check-row small {
  margin-top: 0.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.content-success-banner {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  align-items: center;
  border: 1px solid hsl(160 65% 42% / 0.35);
  border-radius: var(--radius-sm);
  background: hsl(160 65% 42% / 0.08);
  color: hsl(160 65% 36%);
  font-size: 0.75rem;
}

.content-success-banner svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.content-flow-preview {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.content-flow-preview > small {
  color: hsl(var(--muted-foreground));
}

.content-flow-preview > div {
  display: flex;
  min-width: 760px;
  margin-top: 0.65rem;
  align-items: flex-start;
  justify-content: space-between;
}

.content-flow-preview span {
  position: relative;
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 0.3rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.68rem;
  text-align: center;
}

.content-flow-preview i {
  z-index: 1;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--stage-color);
  border-radius: 50%;
  background: hsl(var(--card));
  color: var(--stage-color);
  font-style: normal;
}

.content-flow-preview i svg {
  width: 1rem;
  height: 1rem;
}

.content-flow-preview u {
  position: absolute;
  top: 1rem;
  left: calc(50% + 1rem);
  width: calc(100% - 2rem);
  border-top: 2px solid hsl(var(--border));
  text-decoration: none;
}

.content-stage-list {
  display: grid;
  gap: 0.45rem;
  overflow-x: auto;
}

.content-stage-row {
  display: grid;
  grid-template-columns: 1.1rem minmax(110px, 0.8fr) minmax(100px, 0.75fr) 2.2rem minmax(190px, 1.5fr) minmax(135px, 0.9fr) 70px 2rem;
  min-width: 890px;
  gap: 0.45rem;
  padding: 0.55rem;
  align-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
}

.content-stage-row .input,
.content-stage-row .select {
  min-width: 0;
  height: 2.25rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
}

.content-stage-row input[type="color"],
.content-add-row input[type="color"] {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0.2rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.35rem;
  background: hsl(var(--muted));
}

.content-stage-handle {
  color: hsl(var(--muted-foreground));
  cursor: grab;
}

.content-delete-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: hsl(var(--destructive));
  cursor: pointer;
}

.content-workflow-actions {
  margin-top: 0.75rem;
}

.content-workflow-actions .btn-primary {
  margin-left: auto;
}

.content-functions-card > header {
  margin-bottom: 0.75rem;
}

.content-overline {
  display: block;
  margin: 0.75rem 0 0.45rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.68rem;
  text-transform: uppercase;
}

.content-chip-list,
.content-system-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.content-chip-list span,
.content-system-types > span {
  display: inline-flex;
  padding: 0.42rem 0.65rem;
  align-items: center;
  gap: 0.38rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.45rem;
  background: hsl(var(--muted) / 0.35);
  font-size: 0.75rem;
}

.content-chip-list span::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--chip-color, hsl(var(--chip-hue) 75% 55%));
}

.content-chip-list em {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.content-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 2.4rem auto;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.content-types-section,
.content-categories-section {
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border));
}

.content-system-types i {
  font-style: normal;
}

.content-system-types small {
  padding: 0.12rem 0.3rem;
  border-radius: 999px;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-size: 0.56rem;
}

.content-custom-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.content-custom-types article {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem 2rem;
  gap: 0.55rem;
  padding: 0.65rem;
  align-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
}

.content-custom-types article > span {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--type-color) 16%, transparent);
  color: var(--type-color);
  font-size: 1.1rem;
}

.content-custom-types strong,
.content-custom-types small {
  display: block;
}

.content-custom-types small {
  color: hsl(var(--muted-foreground));
  font-size: 0.66rem;
}

.content-custom-types button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.content-custom-types button:last-child {
  color: hsl(var(--destructive));
}

.content-category-box {
  display: flex;
  min-height: 125px;
  margin-top: 0.65rem;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
}

.content-category-box > svg {
  width: 1.5rem;
  height: 1.5rem;
}

.content-category-box > span {
  display: inline-flex;
  padding: 0.5rem 0.7rem;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--category-color) 45%, hsl(var(--border)));
  border-radius: 999px;
  background: color-mix(in srgb, var(--category-color) 10%, hsl(var(--card)));
  color: hsl(var(--foreground));
}

.content-category-box > span i {
  color: var(--category-color);
  font-style: normal;
}

.content-type-modal {
  position: relative;
  display: flex;
  height: min(90vh, 760px);
  max-width: 900px;
  padding: 1.5rem 2rem;
  overflow: hidden;
  flex-direction: column;
}

.content-category-modal {
  max-width: 620px;
}

.content-type-modal .modal-header {
  flex: 0 0 auto;
  margin-bottom: 1rem;
}

.content-type-modal .modal-form {
  min-height: 0;
  padding-right: 0.25rem;
  padding-bottom: 4.5rem;
  overflow-y: auto;
  gap: 0.75rem;
}

.content-type-modal .modal-actions {
  position: absolute;
  right: 2rem;
  bottom: 1.5rem;
  left: 2rem;
  z-index: 2;
  padding: 1rem 0 0;
  background: hsl(var(--card));
}

.content-category-modal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 1rem 0 0;
  background: hsl(var(--card));
}

.content-type-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.content-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.content-color-palette button {
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--option-color);
  box-shadow: 0 0 0 1px hsl(var(--border));
  cursor: pointer;
}

.content-color-palette button.is-selected {
  border-color: hsl(var(--card));
  box-shadow: 0 0 0 3px hsl(var(--foreground));
}

.content-composition-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.content-composition-heading small {
  display: block;
  margin-top: 0.25rem;
  color: hsl(var(--muted-foreground));
}

.content-composition-heading .btn-secondary {
  flex: 0 0 auto;
}

.content-composition-list {
  display: grid;
  gap: 0.6rem;
}

.content-composition-list > p {
  padding: 1rem;
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius-sm);
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.content-composition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 2.6rem;
  gap: 0.6rem;
}

.content-composition-row > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: transparent;
  color: hsl(var(--destructive));
  cursor: pointer;
}

.content-category-name {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  align-items: end;
  gap: 1rem;
}

.content-category-name > span {
  display: inline-flex;
  width: 4.2rem;
  height: 4.2rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: #6366f1;
  color: white;
  font-size: 1.65rem;
}

.content-icon-picker {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.55rem;
}

.content-icon-picker button {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: 0.65rem;
  background: hsl(var(--card));
  font-size: 1.2rem;
  cursor: pointer;
}

.content-icon-picker button.is-selected {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  box-shadow: inset 0 0 0 1px hsl(var(--primary));
}

@media (max-width: 1100px) {
  .integration-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .content-settings {
    max-width: 100%;
  }
}

@media (max-width: 780px) {
  .settings-card,
  .settings-placeholder {
    padding: 1rem;
  }

  .settings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-form-grid .field,
  .settings-form-grid .field:nth-child(-n + 4),
  .settings-form-grid .is-wide-address {
    grid-column: span 1;
  }

  .settings-form-grid .is-full {
    grid-column: 1 / -1;
  }

  .settings-photo > label {
    grid-template-columns: 4rem 1fr;
  }

  .settings-photo > label > span {
    width: 4rem;
    height: 4rem;
    grid-row: span 2;
  }

  .settings-link-row {
    grid-template-columns: 1fr auto;
  }

  .settings-link-row > span {
    display: none;
  }

  .settings-link-row .input {
    grid-column: 1 / 2;
  }

  .appearance-grid {
    grid-template-columns: 1fr;
  }

  .update-item {
    padding: 0.75rem;
  }

  .subscription-card-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-shortcuts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .automation-layout {
    grid-template-columns: 1fr;
  }

  .automation-nav {
    flex-direction: row;
    padding: 0 0 0.7rem;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--border));
  }

  .automation-nav button {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
  }

  .automation-dual-row {
    grid-template-columns: 1fr;
  }

  .automation-dual-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .whatsapp-template-grid {
    grid-template-columns: 1fr;
  }

  .integration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .email-settings-grid {
    grid-template-columns: 1fr;
  }

  .content-settings-heading,
  .content-section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .content-settings-heading .btn-secondary,
  .content-section-title .btn-primary {
    width: 100%;
  }

  .content-add-row {
    grid-template-columns: minmax(0, 1fr) 120px 2.4rem;
  }

  .content-add-row .btn-primary {
    grid-column: 1 / -1;
  }

  .content-icon-picker {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .settings-form-grid,
  .settings-save-row {
    grid-template-columns: 1fr;
  }

  .settings-form-grid .field,
  .settings-form-grid .field:nth-child(-n + 4),
  .settings-form-grid .is-wide-address,
  .settings-form-grid .is-full {
    grid-column: 1;
  }

  .settings-photo > div span,
  .settings-photo small {
    display: none;
  }

  .settings-save-row .btn-secondary {
    width: 100%;
  }

  .appearance-upload-row,
  .appearance-compact-card {
    grid-template-columns: 1fr;
  }

  .appearance-upload-row .btn-secondary {
    width: 100%;
  }

  .appearance-compact-card > .toggle {
    margin-top: 1rem;
  }

  .appearance-manager-card {
    align-items: stretch;
    flex-direction: column;
  }

  .subscription-row {
    grid-template-columns: 1.4rem minmax(0, 1fr);
  }

  .subscription-row-action {
    grid-column: 2;
    justify-content: flex-start;
  }

  .subscription-card-fields,
  .subscription-plan-row {
    grid-template-columns: 1fr;
  }

  .subscription-plan-row .btn-primary,
  .subscription-form-actions .btn-primary {
    width: 100%;
  }

  .mobile-shortcut {
    min-height: 5.7rem;
  }

  .push-notification-row {
    grid-template-columns: 1.4rem minmax(0, 1fr);
  }

  .push-notification-row .btn-primary {
    grid-column: 2;
    width: 100%;
  }

  .automation-settings-header {
    align-items: stretch;
    flex-direction: column;
  }

  .automation-control-row {
    grid-template-columns: 1fr;
  }

  .automation-control-row .select {
    width: 100%;
  }

  .automation-control-row .toggle {
    justify-self: start;
  }

  .automation-number-input {
    width: 100%;
    justify-self: start;
  }

  .automation-dual-controls {
    gap: 0.55rem;
  }

  .whatsapp-automation-heading,
  .whatsapp-quick-replies {
    align-items: stretch;
    flex-direction: column;
  }

  .integration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .integration-card {
    min-height: 125px;
  }

  .email-setting-card {
    grid-template-columns: 2.7rem minmax(0, 1fr) auto;
    min-height: 105px;
    padding: 0.9rem;
  }

  .email-setting-card > span {
    width: 2.7rem;
    height: 2.7rem;
  }

  .content-workflow-actions,
  .content-add-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .content-workflow-actions .btn-primary {
    margin-left: 0;
  }

  .content-custom-types {
    grid-template-columns: 1fr;
  }

  .content-add-row input[type="color"] {
    width: 100%;
  }

  .content-type-modal,
  .content-category-modal {
    padding: 1.2rem;
  }

  .content-type-two-columns,
  .content-composition-row {
    grid-template-columns: 1fr;
  }

  .content-composition-row > button {
    min-height: 2.6rem;
  }

  .content-composition-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .content-composition-heading .btn-secondary {
    width: 100%;
  }

  .content-category-name {
    grid-template-columns: 3.4rem minmax(0, 1fr);
  }

  .content-category-name > span {
    width: 3.4rem;
    height: 3.4rem;
  }

  .content-icon-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Página pública de cadastro de cliente ---------- */
.cadastro-publico {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.25rem 3rem;
  text-align: center;
}

.cadastro-publico-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--destructive) / 0.15);
  color: hsl(var(--destructive));
}

.cadastro-publico h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2rem;
}

.cadastro-publico-card {
  text-align: left;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}

.cadastro-publico-card h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.cadastro-publico-card .field-hint {
  display: block;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.cadastro-publico-card form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cadastro-publico-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.75rem;
}

.cadastro-publico-footer {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

.cadastro-publico-card.is-sucesso {
  text-align: center;
}

.cadastro-publico-sucesso-icon {
  color: hsl(var(--success));
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

/* ---------- Cadastro público: passo 2 (dados completos) ---------- */
.cadastro-publico .cadastro-publico-card {
  padding: 2rem;
}

.cp-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 0.25rem;
}

.cp-section-header + .field,
.cp-section-header + .cp-grid-2 {
  margin-top: 0.5rem;
}

.cp-section-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.cadastro-publico .link-like {
  color: hsl(var(--muted-foreground));
  font-size: 0.95rem;
}

.cadastro-publico .link-like:hover {
  color: hsl(var(--primary));
}

.cp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cp-grid-rua {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1rem;
}

.cp-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: 1rem;
}

.input.is-readonly {
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--muted-foreground));
  cursor: default;
}

.cp-submit {
  width: 100%;
  height: 3.5rem;
  font-size: 1rem;
  background: var(--gradient-primary);
  margin-top: 0.5rem;
}

@media (max-width: 620px) {
  .cp-grid-2,
  .cp-grid-rua,
  .cp-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Notificações ---------- */
.topbar-dropdown-header .icon-btn {
  color: hsl(var(--muted-foreground));
}

.notificacao-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
}

.notificacao-item:last-child {
  border-bottom: none;
}

.notificacao-icone {
  display: flex;
  flex-shrink: 0;
  color: hsl(var(--destructive));
  margin-top: 0.1rem;
}

.notificacao-item strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
}

.notificacao-item p {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.15rem;
}

.notificacao-data {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground-subtle));
}

#topbar-notificacoes-btn {
  position: relative;
}

#topbar-notificacoes-btn.has-badge::after {
  content: attr(data-count);
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Grupos de clientes ---------- */
.grupos-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.35rem;
  background: hsl(var(--muted) / 0.5);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}

.grupos-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  cursor: pointer;
}

.grupos-tab.is-active {
  background: hsl(var(--card));
  border-color: hsl(var(--primary));
  color: hsl(var(--foreground));
}

.grupos-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1rem;
  align-items: start;
}

.grupos-coluna {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.grupos-painel {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  background: hsl(var(--muted) / 0.25);
}

.grupos-painel.is-lista,
.grupos-detalhe {
  min-height: 12rem;
}

.grupos-novo-row {
  display: flex;
  gap: 0.6rem;
  margin: 0.5rem 0 0.85rem;
}

.grupos-novo-row .input {
  flex: 1;
}

.grupos-novo-row .btn {
  width: 3rem;
  flex-shrink: 0;
  padding: 0;
}

.grupos-cores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.grupo-cor {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.grupo-cor.is-active {
  border-color: hsl(var(--foreground));
}

.grupo-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--foreground));
  cursor: pointer;
  text-align: left;
}

.grupo-item:hover {
  background: hsl(var(--muted));
}

.grupo-item.is-active {
  background: hsl(var(--primary) / 0.12);
}

.grupo-bolinha {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.grupo-item-nome {
  flex: 1;
}

.grupo-item-count {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.grupos-vazio {
  color: hsl(var(--muted-foreground));
  text-align: center;
  padding: 2.5rem 1rem;
  font-size: 0.9rem;
}

.grupos-detalhe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.grupos-detalhe-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.grupos-clientes-lista {
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.grupo-cliente-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.92rem;
}

.grupo-cliente-item:hover {
  background: hsl(var(--muted));
}

.grupo-cliente-item input {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

.hierarquia-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hierarquia-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hierarquia-nome {
  flex: 1;
  font-size: 0.92rem;
}

.hierarquia-row .select {
  max-width: 15rem;
  height: 2.5rem;
}

.hierarquia-arvore {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hierarquia-ramo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}

@media (max-width: 720px) {
  .grupos-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Modal de cliente (campos estendidos) ---------- */
.cl-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cl-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: 1rem;
}

.cl-grid-endereco {
  display: grid;
  grid-template-columns: 2fr 0.8fr 1fr;
  gap: 1rem;
}

.cl-tel-row,
.cl-doc-row {
  display: flex;
  gap: 0.6rem;
}

.cl-tel-row .input,
.cl-doc-row .input {
  flex: 1;
}

.cl-ddi {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.75rem;
  height: 3.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--input));
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.cl-doc-row .btn-secondary {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
}

.cl-iss-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cl-iss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cl-iss-header .field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--destructive));
}

@media (max-width: 620px) {
  .cl-grid-2,
  .cl-grid-3,
  .cl-grid-endereco {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pipelines: tela "Todos os Leads" ---------- */
.kanban-board.is-plain {
  display: block;
  overflow: visible;
}

.todos-leads {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.todos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.todos-stats {
  display: flex;
  gap: 0.85rem;
}

.todos-stat {
  min-width: 7rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  transition: var(--transition-smooth);
}

.todos-stat strong {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.todos-stat span {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

.todos-stat.is-leads strong { color: hsl(217 85% 62%); }
.todos-stat.is-clientes strong { color: hsl(var(--success)); }

.todos-stat.is-active {
  border-color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.todos-stat.is-active strong {
  color: hsl(var(--destructive));
}

.todos-stat.is-leads.is-active,
.todos-stat.is-clientes.is-active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
}

.todos-acoes {
  display: flex;
  gap: 0.6rem;
}

.todos-filtros {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
}

.todos-filtros .select {
  height: 3rem;
}

.todos-data {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.75rem;
  height: 3rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--input));
  color: hsl(var(--muted-foreground));
}

.todos-data .input {
  border: none;
  background: none;
  height: auto;
  padding: 0;
  width: 8.5rem;
}

.todos-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.todos-contagem {
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
}

.todos-tabela {
  display: flex;
  flex-direction: column;
}

.todos-linha {
  display: grid;
  grid-template-columns: auto auto minmax(8rem, 1.4fr) auto minmax(9rem, 1.4fr) minmax(7rem, auto) minmax(9rem, auto) auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid hsl(var(--border));
  cursor: pointer;
  transition: background 0.15s ease;
}

.todos-linha:hover:not(.is-header) {
  background: hsl(var(--muted) / 0.5);
}

.todos-linha.is-header {
  grid-template-columns: auto 1fr auto;
  cursor: default;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
}

.todos-linha input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

.todos-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.todos-nome {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todos-col {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todos-col svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground-subtle));
}

.todos-excluir-lote {
  margin-left: auto;
  color: hsl(var(--destructive));
}

@media (max-width: 1100px) {
  .todos-filtros {
    grid-template-columns: 1fr 1fr;
  }
  .todos-linha,
  .todos-linha.is-header {
    grid-template-columns: auto auto 1fr auto;
  }
  .todos-col {
    display: none;
  }
}

/* ---------- Abas de pipelines + cor da etapa ---------- */
.pipeline-abas {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pipeline-abas .pipeline-tab {
  cursor: pointer;
  border: 1px solid hsl(var(--border));
  background: none;
  color: hsl(var(--muted-foreground));
}

/* Na referência o funil ativo é neutro (texto claro, borda discreta), não laranja. */
.pipeline-abas .pipeline-tab.is-active {
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.5);
}

.kanban-column {
  position: relative;
}

.kanban-column-cor {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
}

/* ---------- Modal: Webhooks de Captura ---------- */
.webhooks-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.webhooks-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.webhooks-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2.5rem 1rem;
  color: hsl(var(--muted-foreground));
}

.webhooks-vazio-icone {
  display: flex;
  color: hsl(var(--muted-foreground-subtle));
}

.webhooks-lista {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.webhook-item {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.webhook-item-topo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.webhook-item-topo strong {
  flex: 1;
}

.webhook-badge {
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.webhook-url-row,
.webhook-form-row {
  display: flex;
  gap: 0.6rem;
}

.webhook-url-row .input,
.webhook-form-row .input {
  flex: 1;
  font-size: 0.85rem;
}

.webhook-form {
  border: 1px solid hsl(var(--primary) / 0.4);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.webhooks-legenda {
  margin-top: 1.5rem;
  padding: 1rem;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
  border-radius: var(--radius);
}

.webhooks-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.5rem;
  margin: 0.75rem 0;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
}

.webhooks-campos code {
  font-family: var(--font-mono);
  color: hsl(var(--foreground));
}

/* ---------- Modal: Criar Pipeline ---------- */
.pipeline-modal h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.pipeline-modal form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.pm-posvenda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.pm-etapas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pm-etapas {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pm-etapa {
  display: grid;
  grid-template-columns: auto 1fr 10rem auto;
  gap: 0.6rem;
  align-items: center;
}

/* ---------- Modal: Lead automático ---------- */
.lead-auto-modal h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.lead-auto-modal form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.25rem;
}

.la-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.la-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.la-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  font-size: 0.85rem;
}

.la-tag button {
  display: flex;
  border: none;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 0;
}

.la-tag svg {
  width: 13px;
  height: 13px;
}

/* ---------- Modal: Importar planilha ---------- */
.importar-modal h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
}

.imp-passos {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
}

.imp-passo.is-active {
  color: hsl(var(--foreground));
  font-weight: 700;
}

.imp-seta {
  display: flex;
  color: hsl(var(--muted-foreground-subtle));
}

.imp-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.5rem 1rem;
  border: 2px dashed hsl(var(--border-strong));
  border-radius: var(--radius);
  text-align: center;
}

.imp-dropzone-icone {
  display: flex;
  color: hsl(var(--muted-foreground));
}

.imp-dropzone-icone svg {
  width: 36px;
  height: 36px;
}

.imp-modelo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  margin-top: 1rem;
  background: hsl(var(--muted) / 0.5);
  border-radius: var(--radius);
}

.imp-resumo {
  margin-bottom: 1rem;
}

.imp-mapa {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 22rem;
  overflow-y: auto;
}

.imp-mapa-linha {
  display: grid;
  grid-template-columns: 10rem 1fr 1fr;
  gap: 0.75rem;
  align-items: center;
}

.imp-mapa-campo {
  font-size: 0.9rem;
  font-weight: 600;
}

.imp-mapa-previa {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imp-resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
}

.imp-resultado-icone {
  display: flex;
  color: hsl(var(--success));
}

.imp-resultado strong {
  font-size: 1.15rem;
}

.imp-erros {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: hsl(var(--destructive));
  text-align: left;
  list-style: disc;
  padding-left: 1.25rem;
}

@media (max-width: 640px) {
  .webhooks-campos,
  .imp-mapa-linha,
  .pm-etapa {
    grid-template-columns: auto 1fr;
  }
}

/* ---------- Kanban: cards recolhidos ---------- */
.kanban-card.is-recolhido {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
}

.kanban-card-ponto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.kanban-card.is-recolhido .kanban-card-name {
  font-size: 0.9rem;
  font-weight: 500;
}

/* ---------- Kanban: menu de exibição dos cards ---------- */
.ajustes-wrap {
  position: relative;
}

.ajustes-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  width: 16rem;
  padding: 0.9rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.ajustes-menu.is-open {
  display: block;
}

.ajustes-menu strong {
  display: block;
  padding-bottom: 0.7rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid hsl(var(--border));
}

.ajustes-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  font-size: 0.92rem;
  cursor: pointer;
}

/* ---------- Kanban: busca do quadro ---------- */
.pipeline-busca {
  position: relative;
  margin: var(--space-3) 0 var(--space-4);
}

/*
 * O recuo do texto e a posição da lupa precisam vir do mesmo par de medidas.
 * Quando o campo encolheu para a escala densa, o ícone (32px) ficou por cima
 * do placeholder porque só o padding tinha sido calculado.
 */
.pipeline-busca .input {
  padding-left: 2.25rem;
}

.pipeline-busca-icone {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}

.pipeline-busca-icone svg {
  width: 1rem;
  height: 1rem;
}

/* ---------- Kanban: modo seleção ---------- */
/* Flutua no rodapé, centralizada, como na referência. */
.selecao-barra {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.75rem 0.6rem 1.1rem;
  transform: translateX(-50%);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  box-shadow: 0 12px 30px hsl(0 0% 0% / 0.35);
}

.selecao-barra[hidden] {
  display: none;
}

.selecao-barra-acoes {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.btn-secondary.is-danger {
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.4);
}

.card-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  background: transparent;
  border: 1.5px solid hsl(var(--border));
  border-radius: 0.3rem;
  color: hsl(var(--primary-foreground));
  cursor: pointer;
}

.card-check.is-on {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.kanban-card.is-selecionado {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.4);
}

/* ---------- Modal: nova negociação ---------- */
.ng-resultados {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 18rem;
  overflow-y: auto;
}

.ng-vazio {
  padding: 0.9rem 0.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
}

.ng-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ng-item:hover {
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
}

.ng-item-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
  font-weight: 600;
}

.ng-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.ng-item-info small {
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
}

/* ---------- Modal: editar pipeline ---------- */
.pm-venda {
  padding: 1rem;
  margin-bottom: 1.2rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.pm-venda .select {
  margin-top: 0.75rem;
}

.pm-etapa-mover {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.pm-etapa-mover .icon-btn {
  width: 1.6rem;
  height: 1.4rem;
  color: hsl(var(--muted-foreground));
}

.pm-etapa-mover .icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.modal-actions.is-split {
  justify-content: space-between;
}

.modal-actions.is-split .btn-danger {
  margin-right: auto;
}

/* ---------- Tarefas: barra de modos de exibição ---------- */
.tarefas-modos {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tarefas-modos-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tarefas-acoes,
.tarefas-filtros {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tarefas-filtros .select {
  width: auto;
  min-width: 11rem;
}

.tarefas-busca {
  margin: 0;
  min-width: 16rem;
}

/* ---------- Tarefas: cabeçalho colorido das colunas ---------- */
.kanban-column-header h3 {
  flex: 1;
}

.kanban-column-header .icon-btn {
  width: 1.7rem;
  height: 1.7rem;
  color: hsl(var(--muted-foreground));
}

.tarefa-card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* Bolinha do card compacto, na cor da prioridade. */
.priority-dot-alta {
  background: hsl(var(--destructive));
}

.priority-dot-media {
  background: hsl(45 85% 55%);
}

.priority-dot-baixa {
  background: hsl(145 60% 45%);
}

/* Checkbox nativo dentro dos menus de ajuste. */
.ajustes-linha input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

.ajustes-menu .link-like {
  margin-top: 0.5rem;
}

/* ---------- Orçamentos: Página de Aprovação ---------- */
.approval-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: hsl(var(--primary));
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.approval-section-head > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.approval-section-body {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.approval-section-body[hidden] {
  display: none;
}

.approval-group-label {
  margin: 0.4rem 0 0;
  font-weight: 600;
}

.approval-group-label span {
  font-weight: 400;
  color: hsl(var(--muted-foreground));
}

.approval-section-body .field-hint {
  margin: -0.6rem 0 0;
}

/* Miniatura da imagem já enviada. */
.approval-upload-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

.approval-upload-preview img {
  max-width: 60%;
  max-height: 5rem;
  object-fit: contain;
}

/* Paletas sugeridas. */
.approval-paletas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.approval-paleta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.35rem;
  background: transparent;
  border: 2px solid hsl(var(--border));
  border-radius: 0.55rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  cursor: pointer;
}

.approval-paleta > .approval-paleta-cores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 2rem;
  overflow: hidden;
  border-radius: 0.35rem;
}

.approval-paleta-cores > span {
  display: block;
  height: 100%;
}

.approval-paleta:hover {
  border-color: hsl(var(--muted-foreground));
}

.approval-paleta.is-active {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.approval-paleta small {
  text-align: center;
}

/* Prévia usa as quatro cores escolhidas, não as do tema. */
.approval-preview {
  --proposta-primaria: hsl(var(--primary));
  --proposta-destaque: hsl(var(--primary));
  --proposta-fundo: hsl(var(--card));
  --proposta-texto: hsl(var(--foreground));
  background: var(--proposta-fundo);
  color: var(--proposta-texto);
}

.approval-preview h2,
.approval-preview h3,
.approval-preview strong,
.approval-preview b {
  color: inherit;
}

/* Textos secundários acompanham a cor do texto, só que mais suaves. */
.approval-preview p,
.approval-preview small,
.approval-preview .approval-preview-numero {
  color: color-mix(in srgb, var(--proposta-texto) 65%, transparent);
}

.approval-preview .approval-preview-cards > div,
.approval-preview .approval-preview-item,
.approval-preview .approval-language {
  border-color: color-mix(in srgb, var(--proposta-texto) 18%, transparent);
}

.approval-preview-logo {
  display: block;
  max-width: 15rem;
  max-height: 5rem;
  margin: 1.5rem auto 0;
  object-fit: contain;
}

.approval-preview .approval-preview-badge {
  background: color-mix(in srgb, var(--proposta-primaria) 15%, transparent);
  color: var(--proposta-primaria);
}

.approval-preview-numero {
  margin-top: 0.3rem;
}

.approval-preview-tag {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.72rem;
  font-weight: 500;
}

.approval-preview-cards h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}

.approval-preview-cards strong {
  display: block;
  margin: 1rem 0 0.5rem;
}

.approval-preview-condicoes h3 {
  color: var(--proposta-destaque);
}

.approval-preview-condicoes p {
  font-style: italic;
}

.approval-preview-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.6rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

.approval-preview-item span {
  display: flex;
  flex-direction: column;
}

.approval-preview-item small {
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
}

.approval-preview-item b {
  color: var(--proposta-primaria);
  white-space: nowrap;
}

.approval-language {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-left: auto;
  padding: 0.4rem 0.9rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

/* O select fica sem moldura própria: a moldura é a do bloco. */
.approval-language select {
  padding: 0.2rem 0.2rem 0.2rem 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.approval-language select:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* ---------- Orçamentos: aba PDF ---------- */
.pdf-config-card > h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
}

.pdf-config-card > p {
  margin: 0 0 1.1rem;
  color: hsl(var(--muted-foreground));
}

.pdf-upload-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem;
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.pdf-upload-linha:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--foreground));
}

/* Seletor de cor com o hex ao lado, como na referência. */
.approval-color-row.is-duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pdf-cor {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pdf-cor-campo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.7rem;
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
}

.pdf-cor-campo input[type="color"] {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 0.35rem;
  background: transparent;
  cursor: pointer;
}

.pdf-cor-campo output {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

.pdf-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

/* Modelos jurídicos. */
.pdf-terms-empty {
  padding: 1.5rem;
  margin-top: 1rem;
  border: 1px dashed hsl(var(--border));
  border-radius: 0.7rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

.pdf-modelos-prontos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1rem;
}

.pdf-modelos-lista {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.pdf-modelos-lista article {
  padding: 0.9rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

.pdf-modelos-lista h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
}

.pdf-modelos-lista h4 span {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
  font-size: 0.72rem;
}

.pdf-modelos-lista p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

.pdf-bottom-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-top: 1.2rem;
  border-top: 1px solid hsl(var(--border));
}

/* ---------- Prévia ao vivo do PDF ---------- */
.pdf-preview > span {
  display: block;
  margin-bottom: 0.8rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.pdf-page {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  text-align: left;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
  font-size: 0.72rem;
  line-height: 1.5;
}

.pdf-page-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  background-size: cover;
  background-position: center;
}

.pdf-page-banner img {
  max-height: 3rem;
  max-width: 60%;
  object-fit: contain;
}

.pdf-page-logo {
  display: block;
  max-height: 3rem;
  max-width: 50%;
  margin: 1.2rem 1.5rem 0;
  object-fit: contain;
}

.pdf-page-corpo {
  padding: 1.5rem;
}

.pdf-page[data-template="classico"] .pdf-page-corpo {
  margin: 0.6rem;
  border: 2px solid currentColor;
}

.pdf-page-corpo h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-align: center;
}

.pdf-page[data-template="minimalista"] .pdf-page-corpo h3,
.pdf-page[data-template="minimalista"] .pdf-page-corpo > small {
  text-align: left;
  display: block;
}

.pdf-page-corpo > small {
  display: block;
  text-align: center;
  opacity: 0.7;
}

.pdf-page-corpo hr {
  margin: 0.9rem 0 1.1rem;
  border: 0;
  border-top: 2px solid;
}

.pdf-page-colunas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.pdf-page-colunas strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.pdf-page-colunas p,
.pdf-page-descricao,
.pdf-page-intro,
.pdf-page-termos,
.pdf-page-rodape-texto {
  margin: 0 0 0.2rem;
}

.pdf-page-corpo h4 {
  margin: 0 0 0.2rem;
}

.pdf-page-descricao,
.pdf-page-intro,
.pdf-page-termos {
  opacity: 0.75;
}

.pdf-page-secao {
  display: block;
  margin: 1.4rem 0 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.pdf-fake-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
}

.pdf-fake-table th {
  padding: 0.4rem 0.5rem;
  color: #fff;
  text-align: left;
  font-weight: 600;
}

.pdf-fake-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid currentColor;
  vertical-align: top;
}

.pdf-fake-table tbody tr td {
  border-bottom-color: color-mix(in srgb, currentColor 15%, transparent);
}

.pdf-fake-table td small {
  display: block;
  opacity: 0.6;
}

.pdf-page-totais {
  display: grid;
  gap: 0.2rem;
  justify-content: end;
  margin-top: 1rem;
}

.pdf-page-totais > div {
  display: grid;
  grid-template-columns: 6rem 6rem;
  text-align: right;
}

.pdf-page-totais .is-desconto {
  color: #16a34a;
}

.pdf-total {
  margin-top: 0.3rem;
  font-weight: 700;
}

.pdf-page-contato {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 0.62rem;
  opacity: 0.6;
}

/* Marca d'água atravessando a página. */
.pdf-page-marca {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.08;
  white-space: nowrap;
  pointer-events: none;
}

.bt-abas button {
  padding: 0.7rem;
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  color: hsl(var(--muted-foreground));
  font: inherit;
  cursor: pointer;
}

.bt-abas button.is-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

.bt-painel[hidden] {
  display: none;
}

.bt-linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.bt-obrigatorio {
  color: hsl(var(--destructive));
}

.bt-ativo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

/* Perguntas */
.bt-perguntas-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bt-perguntas-topo .field-hint {
  margin: 0;
}

.bt-pergunta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.7rem;
  padding: 0.9rem;
  margin-bottom: 0.7rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

.bt-pergunta-campos {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.bt-pergunta-opcoes {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bt-pergunta-opcoes .select {
  width: auto;
  min-width: 12rem;
}

.bt-obrigatoria {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.88rem;
  cursor: pointer;
}

.bt-obrigatoria input {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

.bt-perguntas-vazio {
  padding: 2.5rem 1.5rem;
  border: 1px dashed hsl(var(--border));
  border-radius: 0.7rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.bt-perguntas-vazio h3 {
  margin: 0.7rem 0 0.3rem;
  color: hsl(var(--foreground));
}

.bt-perguntas-vazio p {
  margin: 0;
}

.bt-rotulo {
  display: block;
  font-weight: 500;
}

.bt-rotulo em {
  color: hsl(var(--muted-foreground));
  font-style: normal;
  font-weight: 400;
}

/* ---------- Agenda: barra e seletor de data ---------- */
.agenda-acoes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.agenda-periodo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* O input de data cobre o ícone, então o clique abre o calendário nativo. */
.agenda-datepicker {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  cursor: pointer;
}

.agenda-datepicker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.agenda-exibir-contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
  font-size: 0.75rem;
  font-weight: 600;
}

.agenda-densidade-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.agenda-densidade-row[hidden] {
  display: none;
}

/* ---------- Agenda: grade da semana ---------- */
.agenda-semana {
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.agenda-semana[hidden] {
  display: none;
}

.semana-linha {
  display: grid;
  /* 7 colunas na visão de semana, 1 na visão de dia */
  grid-template-columns: 5.5rem repeat(var(--semana-colunas, 7), minmax(0, 1fr));
  border-bottom: 1px solid hsl(var(--border));
}

.semana-linha:last-child {
  border-bottom: 0;
}

.semana-cabecalho {
  position: sticky;
  top: 0;
  z-index: 2;
  background: hsl(var(--card));
}

.semana-col-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.8rem 0.4rem;
  border-left: 1px solid hsl(var(--border));
}

.semana-col-cabecalho small {
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}

.semana-dia-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 600;
}

.semana-dia-numero.is-today {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* O corpo rola sozinho para o cabeçalho ficar fixo. */
.semana-corpo {
  max-height: 60vh;
  overflow-y: auto;
}

.semana-hora-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.35rem 0.7rem 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  white-space: nowrap;
}

.semana-celula {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: var(--altura-hora, 48px);
  padding: 0.25rem;
  border-left: 1px solid hsl(var(--border));
  cursor: pointer;
}

.semana-celula:hover {
  background: hsl(var(--muted) / 0.35);
}

.semana-dia-inteiro {
  background: hsl(var(--muted) / 0.25);
}

.semana-dia-inteiro .semana-celula {
  min-height: 2.4rem;
}

.semana-dia-inteiro .semana-hora-col {
  align-items: center;
  padding-top: 0.6rem;
}

/* ---------- Agenda: cores por tipo de item ---------- */
.agenda-item.is-feriado {
  background: hsl(4 72% 55% / 0.15);
  color: hsl(4 72% 62%);
}

.agenda-item.is-comemorativa {
  background: hsl(330 70% 55% / 0.15);
  color: hsl(330 70% 66%);
}

.agenda-item.is-aniversario {
  background: hsl(270 65% 62% / 0.15);
  color: hsl(270 65% 72%);
}

.agenda-item.is-receita {
  background: hsl(145 60% 45% / 0.15);
  color: hsl(145 60% 55%);
}

.agenda-item.is-despesa {
  background: hsl(22 85% 55% / 0.15);
  color: hsl(22 85% 62%);
}

/* Na grade de dia e semana o lançamento vira bloco: o que é em cima, quanto e
   de quem embaixo. A barra à esquerda repete a cor do tipo. */
.agenda-item-bloco {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid currentColor;
  border-radius: var(--radius-sm);
  text-align: left;
  white-space: normal;
}

.agenda-item-titulo {
  font-weight: var(--weight-medium);
}

.agenda-item-detalhe {
  font-size: var(--text-xs);
  opacity: 0.85;
}

.agenda-item-detalhe strong {
  font-weight: var(--weight-bold);
}

/* ---------- Agenda: layout com painel lateral ---------- */
/* A agenda abre em coluna única; a lateral só ganha espaço quando um dia é
   escolhido — daí a segunda coluna vir da classe, não do padrão. */
.agenda-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.agenda-layout.tem-lateral {
  grid-template-columns: minmax(0, 1fr) 20rem;
}

.agenda-painel {
  min-width: 0;
}

.agenda-lateral {
  display: grid;
  gap: 1.2rem;
  position: sticky;
  top: 1rem;
}

.agenda-card-dia,
.agenda-card-resumo {
  padding: 1.2rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.agenda-card-dia header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.agenda-card-dia h3,
.agenda-card-resumo h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.1rem;
}

.agenda-card-dia h3 svg {
  color: hsl(var(--primary));
}

/* Cada item do dia com o rótulo do tipo à direita. */
.agenda-dia-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 0.6rem;
  font-size: 0.9rem;
}

.agenda-dia-item:last-child {
  margin-bottom: 0;
}

.agenda-dia-item em {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-size: 0.72rem;
  font-style: normal;
}

.agenda-dia-vazio {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
}

.agenda-card-resumo h3 {
  margin-bottom: 1rem;
}

.agenda-resumo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  color: hsl(var(--muted-foreground));
}

.agenda-resumo-linha b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary-light));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Contagem zerada é informação de fundo, não alerta. */
.agenda-resumo-linha b.is-zero {
  background: transparent;
  color: hsl(var(--muted-foreground-subtle));
  font-weight: var(--weight-normal);
}

/* ---------- Agenda: dia selecionado ---------- */
.semana-col-cabecalho {
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.semana-col-cabecalho.is-selecionado,
.semana-celula.is-selecionado {
  background: hsl(var(--primary) / 0.07);
}

.semana-celula.is-selecionado:hover {
  background: hsl(var(--primary) / 0.12);
}

/* ---------- Agenda: menu "Exibir" ---------- */
.agenda-exibir-menu {
  width: 19rem;
}

.agenda-exibir-menu strong {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}

/* `inline-flex` sem `min-width: 0` não encolhe: o rótulo mantinha a largura do
   texto e empurrava o interruptor para fora do painel. */
.agenda-camada-nome {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

.agenda-camada-nome svg {
  flex-shrink: 0;
}

.agenda-camada-nome svg {
  color: hsl(var(--primary));
}

/* Checkbox nativo estilizado como interruptor. */
.switch-checkbox {
  appearance: none;
  position: relative;
  width: 2.4rem;
  height: 1.35rem;
  flex-shrink: 0;
  background: hsl(var(--border));
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.switch-checkbox::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.switch-checkbox:checked {
  background: hsl(var(--primary));
}

.switch-checkbox:checked::after {
  transform: translateX(1.05rem);
}

@media (max-width: 1200px) {
  .agenda-layout,
  .agenda-layout.tem-lateral {
    grid-template-columns: minmax(0, 1fr);
  }

  .agenda-lateral {
    position: static;
  }
}

/* ---------- Tarefas: visões de lista e tabela ---------- */
.tarefas-lista {
  display: grid;
  gap: 0.6rem;
}

.tarefas-lista-item {
  display: grid;
  grid-template-columns: 0.3rem 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
}

.tarefas-lista-item:hover {
  border-color: hsl(var(--primary) / 0.5);
}

.tarefas-lista-cor {
  width: 0.3rem;
  height: 2.2rem;
  border-radius: 999px;
}

.tarefas-lista-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tarefas-lista-texto small {
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
}

.tarefas-lista-prazo {
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
  white-space: nowrap;
}

.tarefas-linha-acoes {
  display: inline-flex;
  gap: 0.35rem;
}

/* Nas visões de lista/tabela o quadro perde a rolagem horizontal do Kanban. */
.kanban-board:has(.tarefas-lista),
.kanban-board:has(.data-table-wrap) {
  display: block;
  overflow: visible;
}

/* ---------- Paginação ---------- */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid hsl(var(--border));
}

.paginacao-info,
.paginacao-atual {
  color: hsl(var(--muted-foreground));
  font-size: 0.88rem;
}

.paginacao-botoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.paginacao-botoes .btn-secondary:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- Financeiro: barra de período das contas ---------- */
.conta-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.conta-filtros-rapidos {
  position: relative;
}

.conta-filtros-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  /* Duas colunas, como na referência. */
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  padding: 0.35rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px hsl(0 0% 0% / 0.35);
}

.conta-filtros-menu.is-open {
  display: grid;
}

.conta-filtros-menu button {
  padding: 0.5rem 0.9rem;
  border: none;
  border-radius: 0.4rem;
  background: none;
  color: hsl(var(--foreground));
  font-size: 0.85rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.conta-filtros-menu button:hover {
  background: hsl(var(--muted));
}

.conta-mes-chip {
  padding: 0.45rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

/* ---------- Financeiro: Relatórios ---------- */
.rel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.rel-title {
  font-size: 1.6rem;
  font-weight: 700;
}

/* Exportar, cliente e período ficam numa linha só, como na referência; só
   quebram quando a tela é estreita demais para os três. */
.rel-header-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.rel-header-controls > .select,
.rel-header-controls > .rel-exportar-wrap {
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .rel-header-controls {
    flex-wrap: wrap;
  }
}

.rel-exportar-wrap {
  position: relative;
}

.rel-exportar-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  min-width: 12rem;
  padding: 0.35rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px hsl(0 0% 0% / 0.35);
}

.rel-exportar-menu.is-open {
  display: block;
}

.rel-exportar-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: none;
  border-radius: 0.4rem;
  background: none;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.rel-exportar-menu button:hover {
  background: hsl(var(--muted));
}

.rel-periodo-extra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.rel-resumo-table tr.is-total td,
.rel-dre-table tr.is-total td {
  font-weight: 700;
}

.rel-progress-label {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

.rel-progress-track {
  height: 0.4rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
}

.rel-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: hsl(145 60% 45%);
}

.rel-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 900px) {
  .rel-grid-2 {
    grid-template-columns: 1fr;
  }
}

.rel-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.rel-dot.is-receita {
  background: hsl(217 85% 60%);
}

.rel-dot.is-despesa {
  background: hsl(22 85% 55%);
}

.rel-legenda {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

.rel-legenda span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Barras mês a mês: cada coluna tem receita e despesa lado a lado. */
.rel-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 12rem;
  padding-top: 0.5rem;
}

.rel-bars-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  height: 100%;
}

.rel-bars-pair {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 0.15rem;
  width: 100%;
  justify-content: center;
}

.rel-bar {
  width: 45%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}

.rel-bar.is-receita {
  background: hsl(217 85% 60%);
}

.rel-bar.is-despesa {
  background: hsl(22 85% 55%);
}

.rel-bars-label {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
}

.rel-linha {
  width: 100%;
  height: 11rem;
}

.rel-linha-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
}

.rel-linha-atual {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

.rel-cat-row {
  display: grid;
  grid-template-columns: auto minmax(6rem, 1fr) 2fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.rel-cat-nome {
  font-size: 0.88rem;
}

.rel-cat-track {
  height: 0.45rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
}

.rel-cat-bar {
  height: 100%;
  border-radius: 999px;
}

.rel-servico-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1rem 0;
}

@media (max-width: 700px) {
  .rel-servico-cards {
    grid-template-columns: 1fr;
  }
}

.rel-servico-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

.rel-servico-card span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
}

.rel-servico-card strong {
  font-size: 1.25rem;
}

.rel-servico-card.is-assinatura {
  border-color: hsl(var(--primary) / 0.4);
}

.finance-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: none;
  color: hsl(var(--muted-foreground));
  font-size: 0.82rem;
  cursor: pointer;
}

.finance-pill-btn.is-active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* ---------- Financeiro: barra de período ----------
   Setas e seletor de mês ficam à esquerda; o mês escolhido se repete à direita,
   como na referência, para não perder a leitura ao rolar a tela. */
.finance-periodo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.finance-periodo-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.finance-periodo-controls .icon-btn {
  border: 1px solid hsl(var(--border));
}

.finance-periodo-controls .select {
  min-width: 12rem;
}

/* ---------- Financeiro: cadastro de categorias ---------- */
.cat-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1.1rem;
  background: hsl(var(--muted));
  border-radius: 0.6rem;
}

.cat-tab {
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 0.45rem;
  background: none;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.cat-tab.is-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.18);
}

.cat-nova-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.cat-nova-row .input {
  flex: 1;
}

/* Espelha a cor escolhida na paleta, para conferir antes de criar. */
.cat-cor-atual {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.45rem;
}

.cat-nova-row .btn {
  width: 2.75rem;
  flex-shrink: 0;
  padding: 0;
}

.cat-cores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.cat-cor {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.cat-cor.is-active {
  border-color: hsl(var(--foreground));
}

.cat-lista {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  max-height: 20rem;
  overflow-y: auto;
}

.cat-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

.cat-item.is-editando {
  grid-template-columns: 1fr auto auto;
}

.cat-bolinha {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}

.cat-vazio {
  margin-top: 1rem;
  color: hsl(var(--muted-foreground));
}

/* ---------- Financeiro: resumo de categorias ---------- */
.categorias-lista {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  max-height: 22rem;
  overflow-y: auto;
}

.categorias-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
}

.categorias-item span {
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

.categorias-valores {
  display: flex;
  gap: 0.6rem;
  white-space: nowrap;
}

.categorias-valores em {
  font-style: normal;
  font-weight: 600;
}

.categorias-valores .is-receita {
  color: hsl(145 60% 45%);
}

.categorias-valores .is-despesa {
  color: hsl(22 85% 55%);
}

.categorias-vazio {
  margin-top: 1rem;
  color: hsl(var(--muted-foreground));
}

/* Aviso das Transações — igual ao da referência: as transações são geradas
   automaticamente e a edição acontece nas abas Receber/Pagar. */
.transacoes-aviso {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.35);
}

.transacoes-aviso svg {
  flex-shrink: 0;
  color: hsl(var(--primary));
}

/* Alternador Kanban/Lista da tela de Pipelines: na referência o item ativo é
   claro, não laranja. Classe própria para não mexer nas outras telas que usam
   o mesmo componente (Clientes, Agenda, Tarefas e Serviços). */
.view-toggle-group.pipeline-view-toggle button.is-active {
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--foreground));
}

/* Tags salvas dos leads (tela de Pipelines). */
.tags-salvas-linha {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.tags-salvas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--cor-tag, hsl(var(--border)));
  background: color-mix(in srgb, var(--cor-tag, #888) 18%, transparent);
  color: hsl(var(--foreground));
  font-size: 0.78rem;
  cursor: pointer;
}

.tag-chip svg { width: 13px; height: 13px; opacity: 0.7; }
.tag-chip:hover svg { opacity: 1; }

/* Tags nos cards do Kanban de Pipelines. */
.kanban-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.1rem 0 0.5rem;
}

.kanban-tag {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  border: 1px solid var(--cor-tag);
  background: color-mix(in srgb, var(--cor-tag) 20%, transparent);
}

/* Agrupamento da lista de Tarefas. */
.tarefas-grupo { margin-bottom: 1.25rem; }

.tarefas-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

.tarefas-grupo-titulo span {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: hsl(var(--muted) / 0.6);
  font-size: 0.72rem;
}

.agrupar-opcao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  color: hsl(var(--foreground));
  font-size: 0.85rem;
  cursor: pointer;
}

.agrupar-opcao:hover { background: hsl(var(--muted) / 0.5); }
.agrupar-opcao.is-active { color: hsl(var(--primary)); }

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

/* Sugestões de serviço no campo Projeto/Interesse (cadastro de lead). */
.servico-sugestoes {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
}

.servico-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.servico-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 0.8rem;
  cursor: pointer;
}

.servico-chip:hover { border-color: hsl(var(--primary)); }
.servico-chip small { color: hsl(var(--muted-foreground)); }

/* Separadores e ação destrutiva no menu ⋮ do card (Pipelines). */
.kanban-card-menu hr {
  margin: 0.3rem 0;
  border: 0;
  border-top: 1px solid hsl(var(--border));
}

.kanban-card-menu .is-danger { color: hsl(var(--destructive)); }

/* Modal "Gerenciar tags" (menu do card em Pipelines). */
.tags-nova-linha {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

.tags-nova-linha .btn { width: auto; padding: 0 0.9rem; }

.gerenciar-tags-modal #tag-busca { margin-top: 0.5rem; }

.tags-lista {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 320px;
  overflow-y: auto;
}

.tags-vazio {
  margin: 2rem 0;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.88rem;
}

.tag-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
}

.tag-nome { flex: 1; font-size: 0.88rem; }

.tag-estrela {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.95rem;
  filter: grayscale(1);
  opacity: 0.45;
}

.tag-estrela.is-on { filter: none; opacity: 1; }

/* Lista de funis no "Mover para Pipeline" (menu do card em Pipelines). */
.mover-pipeline-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Seletor de país do telefone (cadastro de lead). */
.ddi-wrap { position: relative; }

.cl-ddi-botao {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.ddi-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  width: 280px;
  padding: 0.6rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  box-shadow: 0 12px 30px hsl(0 0% 0% / 0.35);
}

.ddi-lista {
  margin-top: 0.5rem;
  max-height: 240px;
  overflow-y: auto;
}

.ddi-opcao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  color: hsl(var(--foreground));
  font-size: 0.85rem;
  cursor: pointer;
}

.ddi-opcao:hover { background: hsl(var(--muted) / 0.5); }
.ddi-opcao.is-active { background: hsl(var(--primary) / 0.15); }
.ddi-check { width: 14px; color: hsl(var(--primary)); }
.ddi-nome { flex: 1; text-align: left; }
.ddi-opcao small { color: hsl(var(--muted-foreground)); }

/* Modal "Mover Lead para Pipeline". */
.mover-lead-modal { max-width: 460px; }
.mover-lead-pergunta { margin: 0.6rem 0 0.2rem; font-size: 0.9rem; }

/* Bloco do Google Meet no modal Agendar Reunião. */
.reuniao-meet {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.35);
}

.reuniao-meet-linha {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.reuniao-meet-linha .input { flex: 1; }

/* Aviso por WhatsApp no modal Agendar Reunião. */
.reuniao-whats {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid hsl(140 45% 40% / 0.5);
  border-radius: var(--radius-sm);
  background: hsl(140 45% 40% / 0.12);
}

.reuniao-whats-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.88rem;
  cursor: pointer;
}

.reuniao-whats-topo span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Dia escolhido na grade do mês (painel lateral aberto). */
.agenda-day.is-selecionado {
  background: hsl(var(--primary) / 0.12);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.45);
}

/* Campo escondido do "ir para uma data" na Agenda. */
.agenda-data-alvo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Blocos com interruptor no modal de compromisso (Agenda). */
.cp-bloco {
  margin: 0.75rem 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted) / 0.25);
}

.cp-bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
}

.cp-bloco-topo strong {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.cp-bloco-topo small {
  display: block;
  margin-top: 0.15rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}

.cp-bloco-corpo {
  padding: 0 0.8rem 0.8rem;
  border-top: 1px solid hsl(var(--border));
  padding-top: 0.7rem;
}

.cp-tags-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.cp-tag-sugestao {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  cursor: pointer;
}

.cp-tag-sugestao:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary)); }

/* Ícone girando enquanto a Agenda atualiza. */
#agenda-atualizar.is-girando svg { animation: girar 0.8s linear infinite; }

/* ---------- Pipelines: gaveta de tags do lead ----------
   Aberta por "Editar Tags" no menu do card. Fica acima do modal do cliente
   (z-index 50), porque entra por cima dele. */
.tags-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: min(26rem, 100vw);
  height: 100vh;
  padding: 1.25rem;
  overflow-y: auto;
  background: hsl(var(--card));
  border-left: 1px solid hsl(var(--border));
  box-shadow: -12px 0 32px hsl(0 0% 0% / 0.35);
}

.tags-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tags-drawer-header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.tags-drawer-busca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tags-drawer-busca .field-control {
  flex: 1;
}

.tags-drawer-busca .btn {
  width: 2.75rem;
  flex-shrink: 0;
  padding: 0;
}

.tags-drawer-titulo {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

.tags-drawer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
}

.tag-chip.is-sugestao {
  cursor: pointer;
}

.tag-chip button {
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
}

.tag-chip button svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* ---------- Pipelines: visão Lista ---------- */
.lista-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.lista-busca {
  flex: 1;
  min-width: 15rem;
}

.lista-contador {
  margin-left: auto;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

/* Cabeçalho clicável para ordenar, com a seta indicando o sentido atual. */
.lista-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lista-seta {
  opacity: 0.5;
  font-size: 0.8em;
}

.lista-sub {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
}

.lista-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.lista-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 0.25rem 0;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

.lista-paginacao {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lista-paginacao .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.lista-paginacao .btn-secondary:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Seletor por linha na visão Lista — a referência mostra um círculo à esquerda,
   sempre visível, independente do modo "Selecionar". */
.lista-col-check {
  width: 2.5rem;
}

.lista-check {
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid hsl(var(--border));
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.lista-check.is-on {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  box-shadow: inset 0 0 0 2px hsl(var(--card));
}

.lista-contato-linha {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.lista-contato-linha svg,
.lista-sub svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  opacity: 0.7;
}

.lista-sub {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Alguns modais (Webhooks, Lead automático, Importar planilha) põem o botão de
   fechar solto no card, fora de um .modal-header. Sem isto ele caía no fluxo e
   aparecia à ESQUERDA, acima do título — na referência ele fica sempre no canto
   superior direito. A regra vale só para o botão que é filho direto do card;
   quem está dentro de .modal-header segue posicionado pelo flex de lá. */
.modal-card {
  position: relative;
}

.modal-card > .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

/* Só o bloco logo abaixo precisa desviar do X; os demais seguem inteiros. */
.modal-card > .modal-close + * {
  padding-right: 2rem;
}

/* `.btn` é width:100%; sem soltar aqui o botão comia a linha e quebrava o título. */
.webhooks-header .btn {
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.webhooks-header h2 {
  white-space: nowrap;
}

/* O título deste modal é longo e quebrava em duas linhas; na referência ele cabe
   numa só, num card um pouco mais largo que o padrão de 480px. */
.negociacao-modal {
  max-width: 540px;
}

/* ---------- Lançar Despesa ---------- */
.despesa-titulo {
  margin-bottom: 1.5rem;
  padding-right: 2rem;
}

.despesa-titulo h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

/* Estrela de "já é cliente" na visão Lista — indicador, não controle. */
.lista-nome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lista-estrela {
  display: inline-flex;
  color: hsl(var(--primary));
}

.lista-estrela svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: currentColor;
}

/* ---------- Modal: nova despesa recorrente ---------- */
/* Na referência a Duração fica numa moldura própria, junto do campo extra. */
.recorrente-duracao {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.recorrente-duracao .field-label {
  display: block;
  margin-bottom: 0.4rem;
}

.recorrente-duracao .field-hint {
  display: block;
  margin: 0.75rem 0 0.35rem;
}

/* ============================================================
   Design System — densidade de controles no dashboard

   `.input`, `.select` e `.btn` nasceram com 3.25rem porque foram feitos para o
   login e o onboarding, onde o campo é o herói da tela. Dentro do CRM isso
   engorda toda listagem e toolbar. Aqui eles passam para a escala densa, e as
   telas de autenticação seguem com a altura original.

   O escopo inclui os overlays porque modal e gaveta vivem fora do shell —
   sem isso o formulário do modal teria altura diferente da tela atrás dele.
   ============================================================ */

.dashboard-shell .input,
.dashboard-shell .select,
.dashboard-shell .btn,
.modal-overlay .input,
.modal-overlay .select,
.modal-overlay .btn,
.tags-drawer .input,
.tags-drawer .btn {
  height: 2.375rem;
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
}

/*
 * O recuo só é redefinido para campo SEM ícone. A primeira versão desta camada
 * declarava `padding` para todo `.input`, e como ela vem no fim do arquivo
 * atropelava o recuo de qualquer campo com ícone à esquerda — a lupa passava a
 * ficar por cima do placeholder. Campo com ícone tem regra própria abaixo.
 */
.dashboard-shell .input:not(.has-icon),
.modal-overlay .input:not(.has-icon),
.tags-drawer .input:not(.has-icon) {
  padding: 0 var(--space-3);
}

.dashboard-shell .input.has-icon,
.modal-overlay .input.has-icon,
.tags-drawer .input.has-icon {
  padding: 0 var(--space-3) 0 2.25rem;
}

.dashboard-shell .btn,
.modal-overlay .btn,
.tags-drawer .btn {
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

/* `.btn-primary` era 100% de largura por causa do login; no CRM ele é um botão
   de barra. Isso apaga a necessidade dos `style="width:auto"` espalhados. */
.dashboard-shell .btn-primary,
.modal-overlay .btn-primary,
.tags-drawer .btn-primary {
  width: auto;
}

/* Textarea não tem altura fixa: cresce com o conteúdo. */
.dashboard-shell textarea.input,
.modal-overlay textarea.input {
  height: auto;
  min-height: 4.5rem;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}

/* Foco: um anel só, igual em campo, seleção e botão. */
.dashboard-shell .input:focus,
.dashboard-shell .select:focus,
.modal-overlay .input:focus,
.modal-overlay .select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}

/* Botões-ícone: mesma caixa de toque em todo lugar. */
.dashboard-shell .icon-btn,
.modal-overlay .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--radius-sm);
  color: hsl(var(--muted-foreground));
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.dashboard-shell .icon-btn:hover:not(:disabled),
.modal-overlay .icon-btn:hover:not(:disabled) {
  background: var(--hover-overlay);
  color: hsl(var(--foreground));
}

.dashboard-shell .icon-btn.is-danger:hover,
.modal-overlay .icon-btn.is-danger:hover {
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

/* Botão secundário: contorno discreto, sem competir com o primário. */
.dashboard-shell .btn-secondary,
.modal-overlay .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 2.375rem;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.dashboard-shell .btn-secondary:hover:not(:disabled),
.modal-overlay .btn-secondary:hover:not(:disabled) {
  background: hsl(var(--surface-raised));
  border-color: hsl(var(--border-strong));
}

.dashboard-shell .btn-secondary.is-active {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.45);
  color: hsl(var(--primary-light));
}

/*
 * Ícone dentro de campo: alguns vinham com 32px, herdados do tamanho padrão do
 * conjunto de ícones, e encostavam no placeholder do campo denso. Aqui o
 * tamanho é do campo, não do ícone.
 */
.dashboard-shell .field-icon,
.modal-overlay .field-icon,
.tags-drawer .field-icon {
  left: var(--space-3);
  align-items: center;
}

.dashboard-shell .field-icon svg,
.modal-overlay .field-icon svg,
.tags-drawer .field-icon svg {
  width: 1rem;
  height: 1rem;
}

/* Rótulo de campo: mesma voz em toda parte. */
.dashboard-shell .field-label,
.modal-overlay .field-label,
.tags-drawer .field-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
}

.dashboard-shell .field-label svg,
.modal-overlay .field-label svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.dashboard-shell .field-hint,
.modal-overlay .field-hint {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
}

.dashboard-shell .field-error,
.modal-overlay .field-error {
  display: block;
  font-size: var(--text-xs);
  color: hsl(var(--destructive));
}

/* Estado saudável usa o mesmo bloco vazio, só com o selo em verde. */
.feature-empty.is-ok .feature-icon {
  background: hsl(var(--success-soft));
  color: hsl(var(--success));
}

/*
 * `.empty-state` virou flex no ciclo do Design System, e em quatro tabelas ela
 * está aplicada no próprio `<td>` — o flex tira a célula do layout de tabela e
 * o texto encosta na esquerda. Aqui ela volta a ser célula.
 */
td.empty-state {
  display: table-cell;
  max-width: none;
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: hsl(var(--muted-foreground-subtle));
}

/* ============================================================
   Design System — selo de estado vazio

   Sete telas infravam o ícone do estado vazio com `transform: scale()`, cada
   uma com um fator diferente (2.2, 2.3, 2.4, 2.5), o que dava sete tamanhos
   para a mesma coisa e deixava o traço do SVG esticado junto. Todas passam a
   usar o selo circular único.
   ============================================================ */

.service-secondary-icon,
.budget-empty > span,
.budget-contract-empty > span,
.briefing-empty > span,
.briefing-template-empty > span,
.email-automation-empty > span,
.pages-empty > span,
.checkout-catalog-empty > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground-subtle));
}

.service-secondary-icon svg,
.budget-empty > span svg,
.budget-contract-empty > span svg,
.briefing-empty > span svg,
.briefing-template-empty > span svg,
.email-automation-empty > span svg,
.pages-empty > span svg,
.checkout-catalog-empty > span svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ============================================================
   Design System — abas de painel

   O produto tinha DEZESSEIS grupos de aba, cada tela com o seu desenho:
   pílula sobre fundo, caixa com borda, segmentado, texto solto. Mesma função,
   linguagens diferentes — era o que mais denunciava telas feitas em momentos
   distintos.

   Regra: trocar de PAINEL dentro da tela é sempre aba com indicador na linha
   de base. Ficam de fora, por serem outra coisa:
   - `.contract-step-tabs` — passos de um assistente (stepper);
   - `.email-device-tabs`  — prévia desktop/mobile do MESMO conteúdo;
   - `.view-toggle-group`  — alterna a visualização (Kanban/Lista).
   ============================================================ */

.tasks-module-tabs,
.pages-module-tabs,
.email-module-tabs,
.settings-tabs,
.whatsapp-service-tabs,
.whatsapp-automation-tabs,
.grupos-tabs,
.cat-tabs,
.briefing-question-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  padding: 0;
  border: 0;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tasks-module-tabs > button,
.pages-module-tabs > button,
.email-module-tabs > button,
.settings-tabs > button,
.whatsapp-service-tabs > button,
.whatsapp-automation-tabs > button,
.grupos-tabs > button,
.cat-tabs > button,
.briefing-question-tabs > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.375rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.tasks-module-tabs > button svg,
.pages-module-tabs > button svg,
.email-module-tabs > button svg,
.settings-tabs > button svg,
.whatsapp-service-tabs > button svg,
.whatsapp-automation-tabs > button svg,
.grupos-tabs > button svg,
.cat-tabs > button svg,
.briefing-question-tabs > button svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.tasks-module-tabs > button:hover:not(.is-active),
.pages-module-tabs > button:hover:not(.is-active),
.email-module-tabs > button:hover:not(.is-active),
.settings-tabs > button:hover:not(.is-active),
.whatsapp-service-tabs > button:hover:not(.is-active),
.whatsapp-automation-tabs > button:hover:not(.is-active),
.grupos-tabs > button:hover:not(.is-active),
.cat-tabs > button:hover:not(.is-active),
.briefing-question-tabs > button:hover:not(.is-active) {
  background: var(--hover-overlay);
  color: hsl(var(--foreground));
}

.tasks-module-tabs > button.is-active,
.pages-module-tabs > button.is-active,
.email-module-tabs > button.is-active,
.settings-tabs > button.is-active,
.whatsapp-service-tabs > button.is-active,
.whatsapp-automation-tabs > button.is-active,
.grupos-tabs > button.is-active,
.cat-tabs > button.is-active,
.briefing-question-tabs > button.is-active {
  background: transparent;
  color: hsl(var(--primary-light));
  font-weight: var(--weight-semibold);
  box-shadow: none;
}

.tasks-module-tabs > button.is-active::after,
.pages-module-tabs > button.is-active::after,
.email-module-tabs > button.is-active::after,
.settings-tabs > button.is-active::after,
.whatsapp-service-tabs > button.is-active::after,
.whatsapp-automation-tabs > button.is-active::after,
.grupos-tabs > button.is-active::after,
.cat-tabs > button.is-active::after,
.briefing-question-tabs > button.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  background: hsl(var(--primary));
}

/* A marca é um botão para o início; o alvo acompanha o logo sem deslocá-lo. */
.sidebar-logo-btn {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.sidebar-logo-btn:hover {
  opacity: 0.85;
}

.sidebar-logo-btn:focus-visible {
  outline: var(--ring-width) solid hsl(var(--ring));
  outline-offset: var(--ring-offset);
}

/* ============================================================
   Segunda passagem — telas pequenas
   ============================================================ */

@media (max-width: 640px) {
  /*
   * Os oito utilitários da barra quebravam numa linha própria e empurravam o
   * bloco da conta para uma terceira. Passam a rolar na horizontal dentro da
   * própria faixa: nenhum atalho some do celular, e a barra volta a ter duas
   * linhas.
   */
  .dashboard-topbar {
    padding: var(--space-3) var(--space-4);
  }

  .topbar-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
  }

  .topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .topbar-actions > * {
    flex-shrink: 0;
  }

  /* O "até" ficava sozinho no fim da linha, longe das duas datas. */
  .home-filter-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
  }

  .home-filter-row .quick-filter-wrap {
    grid-column: 1 / -1;
  }

  .home-filter-row input[type="date"] {
    width: 100%;
  }

  .home-filter-row .field-hint {
    margin: 0;
    text-align: center;
  }

  .home-filter-row #toggle-values-btn {
    grid-column: 1;
    margin-left: 0 !important;
    justify-self: start;
  }
}

/* ============================================================
   Design System — camadas de sobreposição

   Uma escala só de z-index, para parar de escolher número por chute:
   barra flutuante 40 · modal 50 · gaveta 60 · toast 70.
   ============================================================ */

/*
 * O toast ficava em bottom:1.5rem / left:50% — a MESMA posição da barra de
 * seleção em massa do Pipelines. Em modo seleção os dois se sobrepunham. O
 * toast agora empilha acima dela.
 */
.toast-stack {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  max-width: min(28rem, calc(100vw - var(--space-8)));
  padding: var(--space-2) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  background: hsl(var(--surface-raised));
  color: hsl(var(--foreground));
  font-size: var(--text-base);
  text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tags-drawer {
  z-index: 60;
}

/* ---------- Modal ---------- */

/*
 * O card usava raio 1.25rem e padding 2rem, fora da escala e largo demais para
 * formulário denso. Cabeçalho e ações passam a acompanhar os mesmos tokens.
 */
.modal-card {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  margin-bottom: var(--space-5);
}

.modal-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--radius-sm);
  color: hsl(var(--muted-foreground));
}

.modal-close svg {
  width: 1rem;
  height: 1rem;
}

.modal-close:hover {
  background: var(--hover-overlay);
  color: hsl(var(--foreground));
}

.modal-form {
  gap: var(--space-4);
}

.modal-actions {
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Fundo do overlay um pouco mais fechado: o modal precisa dominar a tela. */
.modal-overlay {
  background: hsl(0 0% 0% / 0.68);
}

/* ---------- Selo de status ---------- */

/*
 * `.status-badge` estava declarado DUAS vezes no arquivo, com padding, tamanho
 * e peso diferentes — a segunda vencia por ordem, mas herdava o ponto colorido
 * da primeira. Uma definição só.
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   Design System — menus flutuantes

   Cada menu tinha o seu recheio e o seu raio (0.35rem, 0.6rem, 0.9rem), e todos
   usavam a sombra de card — a mesma de um bloco que não flutua. Um menu precisa
   parecer estar acima da página.
   ============================================================ */

.ajustes-menu,
.kanban-card-menu,
.quick-filter-menu,
.topbar-dropdown,
.agenda-exibir-menu {
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: hsl(var(--surface-raised));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-lg);
}

/* Item de menu: uma altura e um recuo para todos. */
.kanban-card-menu > button,
.quick-filter-item,
.agrupar-opcao {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 2.125rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-base);
  text-align: left;
  white-space: nowrap;
}

.kanban-card-menu > button svg,
.quick-filter-item svg,
.agrupar-opcao svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}

.kanban-card-menu > button:hover,
.quick-filter-item:hover,
.agrupar-opcao:hover {
  background: var(--hover-overlay);
}

/* Ação destrutiva no menu: vermelha só no hover, para não gritar em repouso. */
.kanban-card-menu > button.is-danger {
  color: hsl(var(--destructive));
}

.kanban-card-menu > button.is-danger:hover {
  background: hsl(var(--destructive) / 0.12);
}

/* O menu tem separadores entre grupos de ação; que sejam da mesma cor de borda. */
.kanban-card-menu hr {
  height: 1px;
  margin: var(--space-1) 0;
  border: 0;
  background: hsl(var(--border));
}

/* ============================================================
   Passagem com dados reais — tabela da visualização Lista

   Com o sistema vazio a tabela parecia bem distribuída. Com 31 leads dentro,
   o navegador dava largura pelo conteúdo: "Lead de Volume 1", "Novo Lead" e
   "Belo Horizonte/MG" quebravam em duas linhas enquanto a coluna de contato
   sobrava espaço. As proporções agora são declaradas.
   ============================================================ */

.lista-table {
  table-layout: fixed;
  min-width: 56rem;
}

.lista-table th,
.lista-table td {
  vertical-align: middle;
}

.lista-table .lista-col-check { width: 2.75rem; }
.lista-table th:nth-child(2), .lista-table td:nth-child(2) { width: 22%; }  /* Nome    */
.lista-table th:nth-child(3), .lista-table td:nth-child(3) { width: 24%; }  /* Contato */
.lista-table th:nth-child(4), .lista-table td:nth-child(4) { width: 12%; }  /* Origem  */
.lista-table th:nth-child(5), .lista-table td:nth-child(5) { width: 12%; }  /* Etapa   */
.lista-table th:nth-child(6), .lista-table td:nth-child(6) { width: 14%; }  /* Tags    */
.lista-table th:nth-child(7), .lista-table td:nth-child(7) { width: 9%; }   /* Valor   */
.lista-table th:nth-child(8), .lista-table td:nth-child(8) { width: 9%; }   /* Data    */

/* Rótulos curtos não devem quebrar; texto livre corta com reticências. */
.lista-table td:nth-child(5),
.lista-table td:nth-child(7),
.lista-table td:nth-child(8) {
  white-space: nowrap;
}

.lista-nome,
.lista-sub,
.lista-contato-linha {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.lista-nome > strong,
.lista-contato-linha,
.lista-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A rolagem horizontal fica dentro da tabela, nunca na página. */
.pipeline-list-wrap .table-scroll {
  overflow-x: auto;
}

/* ============================================================
   Passagem com dados reais — grade do calendário

   `repeat(7, 1fr)` é `minmax(auto, 1fr)`: o conteúdo pode empurrar a coluna.
   Com um compromisso de título longo, a célula do dia foi a 729px e os eventos
   atravessaram o calendário inteiro. `minmax(0, 1fr)` impede que o texto dite a
   largura, e os itens cortam com reticências.
   ============================================================ */

.agenda-grid,
.agenda-weekdays {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda-day {
  min-width: 0;
  overflow: hidden;
}

.agenda-day-items {
  min-width: 0;
}

.agenda-day-items > * {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Financeiro — contas em cartão (aba Receber)

   O cartão mostra de uma vez o que a tabela só entregava abrindo o lançamento:
   quanto foi pago e quanto ainda falta. A tabela continua no seletor, porque
   ela é melhor quando o objetivo é varrer muitas contas de uma vez.
   ============================================================ */

.conta-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.conta-card {
  padding: var(--space-4) var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  transition: border-color var(--duration-base) var(--ease-out);
}

.conta-card:hover {
  border-color: hsl(var(--border-strong));
}

.conta-card-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.conta-card-ident {
  min-width: 0;
}

.conta-card-ident strong {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conta-card-ident p {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin-top: 0.1rem;
}

/* Três cifras lado a lado; empilham quando não cabem. */
.conta-card-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3) var(--space-6);
  margin: var(--space-4) 0;
}

.conta-card-valores span {
  display: block;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.conta-card-valores strong {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.conta-card-valores .is-success { color: hsl(var(--success)); }
.conta-card-valores .is-warning { color: hsl(var(--warning)); }

.conta-card-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid hsl(var(--border));
}

.conta-card-acoes .icon-btn {
  margin-left: 0;
}

/* O botão de excluir vai para a ponta, longe da ação principal. */
.conta-card-acoes .icon-btn.is-danger {
  margin-left: auto;
}

/* ---------- Financeiro: fechamento por cliente ---------- */

.fechamento-cliente {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  overflow: hidden;
}

.fechamento-cliente + .fechamento-cliente {
  margin-top: var(--space-3);
}

.fechamento-cliente-topo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.fechamento-cliente-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.fechamento-cliente-avatar svg {
  width: 1.125rem;
  height: 1.125rem;
}

.fechamento-cliente-ident {
  min-width: 0;
  flex: 1;
}

.fechamento-cliente-ident strong {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fechamento-cliente-ident p {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.fechamento-cliente-total {
  text-align: right;
  flex-shrink: 0;
}

.fechamento-cliente-total strong {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: hsl(var(--destructive));
}

.fechamento-cliente-total span {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
}

/* As contas ficam separadas do cabeçalho por uma linha, sempre visíveis. */
.fechamento-cliente-contas {
  border-top: 1px solid hsl(var(--border));
}

.fechamento-conta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  color: hsl(var(--muted-foreground));
  text-align: left;
  transition: background var(--duration-fast) var(--ease-out);
}

.fechamento-conta + .fechamento-conta {
  border-top: 1px solid hsl(var(--border));
}

.fechamento-conta:hover {
  background: var(--hover-overlay);
}

.fechamento-conta-titulo {
  flex: 1;
  min-width: 0;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fechamento-conta-venc {
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.fechamento-conta strong {
  flex-shrink: 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: hsl(var(--foreground));
}

/* ---------- Financeiro: tabela de fornecedores ---------- */

.fornecedores-table {
  min-width: 48rem;
}

.fornecedores-acoes {
  text-align: right;
  white-space: nowrap;
}

.fornecedores-acoes .icon-btn {
  vertical-align: middle;
}

/* ---------- Financeiro: caixas e extrato ---------- */

.caixa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.caixa-card {
  padding: var(--space-4) var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.caixa-card:hover {
  border-color: hsl(var(--border-strong));
}

/* O caixa aberto no extrato fica marcado — senão não se sabe de quem é a lista. */
.caixa-card.is-ativo {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.35);
}

.caixa-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* O selo "padrão" ficava dentro do texto com reticências e era cortado. */
.caixa-card-nome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.caixa-card-topo strong {
  min-width: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caixa-padrao {
  padding: 0.05rem var(--space-2);
  border-radius: var(--radius-full);
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary-light));
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.caixa-card-acoes {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
}

.caixa-saldo {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.caixa-saldo.is-success { color: hsl(var(--success)); }
.caixa-saldo.is-danger { color: hsl(var(--destructive)); }

.caixa-moeda {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
}

/* Cada ação com a cor do que ela faz no saldo. */
.caixa-movimento-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.caixa-movimento-acoes .is-entrada {
  color: hsl(var(--success));
  border-color: hsl(var(--success) / 0.4);
}

.caixa-movimento-acoes .is-saque {
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.4);
}

.caixa-movimento-acoes .is-ajuste {
  color: hsl(var(--info));
  border-color: hsl(var(--info) / 0.4);
}

.caixa-movimento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.caixa-movimento + .caixa-movimento {
  border-top: 1px solid hsl(var(--border));
}

.caixa-movimento-ident {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.caixa-movimento-tipo {
  padding: 0.05rem var(--space-2);
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.caixa-movimento-tipo.is-entrada { background: hsl(var(--success-soft)); color: hsl(var(--success)); }
.caixa-movimento-tipo.is-saque,
.caixa-movimento-tipo.is-sangria { background: hsl(var(--destructive-soft)); color: hsl(var(--destructive)); }
.caixa-movimento-tipo.is-ajuste { background: hsl(var(--info-soft)); color: hsl(var(--info)); }

.caixa-movimento-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caixa-movimento-data {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
}

.caixa-movimento-valores {
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.caixa-movimento-valores strong {
  display: block;
  font-weight: var(--weight-semibold);
}

.caixa-movimento-valores strong.is-success { color: hsl(var(--success)); }
.caixa-movimento-valores strong.is-danger { color: hsl(var(--destructive)); }

.caixa-movimento-valores span {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
}

/* ---------- Modal de cliente: identidade, abas e tags ---------- */

.cl-identidade {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
}

.cl-avatar-bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.cl-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.cl-avatar-acao {
  font-size: var(--text-2xs);
  color: hsl(var(--muted-foreground-subtle));
}

.cl-identidade-nome {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.cl-identidade-status {
  font-size: var(--text-base);
  color: hsl(var(--muted-foreground));
}

.cl-identidade-status.is-cliente { color: hsl(var(--success)); }
.cl-identidade-status.is-perdido { color: hsl(var(--destructive)); }

/* Abas do modal: mesmo desenho das abas de painel do sistema. */
.cl-abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid hsl(var(--border));
}

.cl-abas > button {
  position: relative;
  height: 2.375rem;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.cl-abas > button:hover:not(.is-active) {
  color: hsl(var(--foreground));
}

.cl-abas > button.is-active {
  color: hsl(var(--primary-light));
  font-weight: var(--weight-semibold);
}

.cl-abas > button.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  background: hsl(var(--primary));
}

.cl-painel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cl-painel[hidden] {
  display: none;
}

.cl-tag-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cl-tag-chip {
  padding: 0.2rem var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.cl-tag-chip:hover {
  background: hsl(var(--primary) / 0.14);
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--primary-light));
}

/* ---------- Serviços: produtos e movimentações ---------- */

.produto-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
}

.produto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.produto-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.produto-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid hsl(var(--border));
}

.produto-card-topo strong {
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.produto-alerta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-full);
  background: hsl(var(--destructive) / 0.16);
  color: hsl(var(--destructive));
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.produto-alerta svg {
  width: 0.75rem;
  height: 0.75rem;
}

.produto-card-dados > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.produto-card-dados dt {
  font-size: var(--text-base);
  color: hsl(var(--muted-foreground));
}

.produto-card-dados dd {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.produto-preco { color: hsl(var(--primary-light)); }
.produto-estoque-baixo { color: hsl(var(--destructive)); }

.produto-card-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.produto-card-acoes .btn-secondary {
  flex: 1;
}

.produto-movimento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.produto-movimento + .produto-movimento {
  border-top: 1px solid hsl(var(--border));
}

.produto-movimento-ident {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.produto-movimento-nome {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.produto-movimento-valores {
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.produto-movimento-valores strong {
  display: block;
  font-weight: var(--weight-semibold);
}

.produto-movimento-valores strong.is-success { color: hsl(var(--success)); }
.produto-movimento-valores strong.is-danger { color: hsl(var(--destructive)); }

.produto-movimento-valores span {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground-subtle));
}

/* ---------- Serviços: planos ---------- */

.plano-grupo + .plano-grupo {
  margin-top: var(--space-6);
}

/* Cabeçalho do grupo com a linha que preenche o resto da largura. */
.plano-grupo-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground-subtle));
}

.plano-grupo-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-normal);
}

.plano-grupo-titulo > i {
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}

.plano-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.plano-card {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.plano-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.plano-card-topo strong {
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plano-card-acoes {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
}

.plano-valor {
  display: block;
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: hsl(var(--destructive));
}

.plano-incluso {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--space-2);
}

.plano-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Lista de serviços do modal: linha inteira clicável. */
.plano-servicos {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  overflow: hidden;
}

.plano-servico {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.plano-servico + .plano-servico {
  border-top: 1px solid hsl(var(--border));
}

.plano-servico:hover {
  background: var(--hover-overlay);
}

.plano-servico input {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
  flex-shrink: 0;
}

.plano-servico-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plano-servico-preco {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

/* A camada de superfícies elevadas apertou o recuo de todos os menus para
   var(--space-1). No painel "Exibir" isso cola as linhas na borda: aqui ele
   volta a ter respiro, sem mexer nos outros menus. */
.agenda-exibir-menu {
  padding: 0.9rem;
}

.agenda-exibir-menu .ajustes-linha {
  padding: 0.55rem 0;
}

/* ---------- Conectar ao Google Calendar ---------- */
.gcal-intro {
  margin: 0 0 var(--space-4);
  color: hsl(var(--muted-foreground));
  line-height: var(--leading-normal);
}

.gcal-url {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.4);
}

/* O endereço é longo: encolhe com reticências em vez de empurrar o botão. */
.gcal-url > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.gcal-url .btn-secondary {
  flex-shrink: 0;
}

.gcal-passos {
  margin: var(--space-5) 0;
  padding-left: 1.25rem;
  line-height: var(--leading-normal);
}

.gcal-passos li + li {
  margin-top: var(--space-2);
}

.gcal-abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.gcal-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid hsl(var(--info) / 0.3);
  border-radius: var(--radius);
  background: hsl(var(--info-soft));
}

.gcal-aviso > span {
  display: flex;
  flex-shrink: 0;
  color: hsl(var(--info));
}

.gcal-aviso p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.gcal-privacidade {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: hsl(var(--muted-foreground));
}

/* ---------- Categorias de Serviços ---------- */
.cs-nova {
  padding: var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.3);
}

.cs-nova h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* O campo ocupa a linha e a paleta escorre ao lado dele, quebrando embaixo —
   é o arranjo do print sem precisar de duas listas de cores. */
.cs-nova-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cs-nova-linha .input {
  flex: 1 1 14rem;
  min-width: 0;
}

.cs-cores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cs-cor {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  background: var(--cs-cor);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.cs-cor:hover {
  transform: scale(1.1);
}

.cs-cor.is-ativa {
  border-color: hsl(var(--foreground));
}

.cs-nova .btn-primary {
  width: 100%;
  margin-top: var(--space-4);
}

.cs-titulo-lista {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.cs-lista {
  display: grid;
  gap: var(--space-2);
  max-height: 22rem;
  overflow-y: auto;
}

.cs-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.cs-ponto {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-full);
  background: var(--cs-cor);
}

.cs-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-selo {
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  background: hsl(var(--muted));
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: hsl(var(--muted-foreground));
}

/* ---------- Tarefas Recorrentes ---------- */
.tr-form {
  padding: var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.3);
}

.tr-form h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.tr-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.tr-form-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.tr-form-acoes .btn {
  width: auto;
}

.tr-titulo-lista {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.tr-lista {
  display: grid;
  gap: var(--space-2);
  max-height: 22rem;
  overflow-y: auto;
}

.tr-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

/* Pausada continua legível, só recua um passo. */
.tr-item.is-pausada {
  opacity: 0.6;
}

.tr-item-dados {
  min-width: 0;
}

.tr-item-dados strong {
  display: block;
  font-weight: var(--weight-medium);
}

.tr-item-dados span {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.tr-item-acoes {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
}

@media (max-width: 640px) {
  .tr-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tr-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Menu "Exibir" do quadro de Tarefas ---------- */
/* `.ajustes-menu` ancora à direita, o que serve para os botões do fim da barra.
   Este fica na ponta esquerda: ancorado à direita, ele saía da tela. */
.exibir-menu {
  left: 0;
  right: auto;
  width: 20rem;
  padding: 0.9rem 1.1rem;
}

/* O interruptor encostava na borda de conteúdo: com `space-between` ele para
   exatamente no limite do padding, e qualquer arredondamento o faz parecer
   fora da caixa. O recuo à direita garante folga em qualquer resolução. */
.exibir-menu .ajustes-linha {
  gap: 0.75rem;
  padding: 0.55rem 0.15rem 0.55rem 0;
}

/* O segundo título de grupo precisa de ar em cima; o primeiro já vem do card. */
.exibir-menu strong + .ajustes-linha ~ strong {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}

.exibir-menu .ajustes-linha span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

.exibir-menu .ajustes-linha span svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: hsl(var(--primary));
}

/* ---------- Tarefas: estado vazio, tabela agrupada, calendário e projetos ---------- */
.tarefas-vazio {
  margin: 4rem 0;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

.tarefas-tabela-grupo td {
  background: hsl(var(--muted) / 0.4);
  font-weight: var(--weight-semibold);
}

.tarefas-tabela-grupo span {
  margin-left: var(--space-2);
  color: hsl(var(--muted-foreground));
  font-weight: var(--weight-normal);
}

.tarefas-tabela-vazio {
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

.tarefas-cal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.tarefas-cal-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tarefas-cal-nav strong {
  min-width: 10rem;
  font-size: var(--text-lg);
}

.tarefas-cal-grade {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

/* `minmax(0, 1fr)` impede que um título longo estique a coluna do dia. */
.tarefas-cal-semana,
.tarefas-cal-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tarefas-cal-semana {
  background: hsl(var(--muted) / 0.4);
}

.tarefas-cal-semana span {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: hsl(var(--muted-foreground));
}

.tarefas-cal-dia {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 6rem;
  padding: var(--space-2);
  border-top: 1px solid hsl(var(--border));
  border-left: 1px solid hsl(var(--border));
}

.tarefas-cal-dia.is-fora {
  background: hsl(var(--muted) / 0.25);
}

.tarefas-cal-numero {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.tarefas-cal-dia.is-hoje .tarefas-cal-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: var(--weight-semibold);
}

.tarefas-cal-itens {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.tarefas-cal-item {
  overflow: hidden;
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: hsl(var(--muted));
  color: inherit;
  font-size: var(--text-2xs);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.tarefas-cal-item:hover {
  background: hsl(var(--primary) / 0.15);
}

.tarefas-projetos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.tarefas-projeto-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.tarefas-projeto-card:hover {
  border-color: hsl(var(--primary));
}

.tarefas-projeto-card span {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

/* ---------- Tela Recorrentes ---------- */
.recorrentes-topo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.recorrentes-topo h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-2xl);
}

.recorrentes-topo h2 svg {
  color: hsl(var(--primary));
}

.recorrentes-voltar {
  flex-shrink: 0;
  width: auto;
  padding: 0;
}

.recorrentes-inativas {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.recorrentes-tabs span {
  margin-left: var(--space-2);
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  font-size: var(--text-2xs);
}

.recorrentes-lista {
  display: grid;
  gap: var(--space-2);
}

.recorrentes-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

/* Inativa continua legível — é informação, não lixo. */
.recorrentes-item.is-inativa {
  opacity: 0.6;
}

.recorrentes-item strong {
  display: block;
  font-weight: var(--weight-medium);
}

.recorrentes-item span {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

/* O vazio é o coração desta tela: sem cadastro aqui, ele precisa dizer onde
   a recorrência se configura. */
.recorrentes-vazio {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: 4rem var(--space-6);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  text-align: center;
}

.recorrentes-vazio > span {
  display: flex;
  color: hsl(var(--muted-foreground) / 0.5);
}

.recorrentes-vazio svg {
  width: 2.75rem;
  height: 2.75rem;
}

.recorrentes-vazio h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  color: hsl(var(--muted-foreground));
}

.recorrentes-vazio p {
  margin: 0;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

/* ---------- Modelos de Tarefas ---------- */
.modelos-card {
  position: relative;
  max-width: 44rem;
}

.modelos-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding-right: 2rem;
  font-size: var(--text-xl);
}

.modelos-topo {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.modelos-topo .field-control {
  flex: 1;
  min-width: 0;
}

.modelos-grupo {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.modelos-lista {
  display: grid;
  gap: var(--space-2);
}

.modelo-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.modelo-item:hover {
  border-color: hsl(var(--primary));
}

.modelo-icone {
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
}

.modelo-texto {
  display: grid;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.modelo-texto strong {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.modelo-texto small {
  color: hsl(var(--muted-foreground));
}

.modelo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.modelo-pills em,
.modelo-tags em {
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  font-size: var(--text-2xs);
  font-style: normal;
  color: hsl(var(--muted-foreground));
}

.modelo-seta {
  display: flex;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

.modelos-restaurar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-6);
}

/* ---------- Detalhe ---------- */
.modelos-detalhe-topo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-right: 2rem;
}

.modelos-detalhe-topo h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.modelos-detalhe-desc {
  margin: var(--space-2) 0 var(--space-5);
  color: hsl(var(--muted-foreground));
}

.modelos-itens {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.modelo-tarefa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.modelo-tarefa strong {
  display: block;
  font-weight: var(--weight-semibold);
}

.modelo-tarefa p {
  margin: 0.2rem 0 0;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.modelo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.modelos-detalhe-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.modelos-detalhe-acoes .btn-primary {
  flex: 1;
  width: auto;
}

/* ---------- Editor ---------- */
.modelo-editor-cabecalho {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-3);
}

.modelo-editor-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

.modelo-editor-itens {
  display: grid;
  gap: var(--space-3);
}

.modelo-editor-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.3);
}

.modelo-editor-linha {
  display: flex;
  gap: var(--space-2);
}

.modelo-editor-linha .input,
.modelo-editor-linha .select {
  flex: 1;
  min-width: 0;
}

.modelo-editor-linha .icon-btn {
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .modelos-topo,
  .modelo-editor-cabecalho {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
}

/* Aviso de filtro ativo no menu "Exibir": fica fora do board para valer nos
   cinco modos, inclusive no Kanban, onde cada coluna tem seu próprio vazio. */
.exibir-aviso {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--info) / 0.3);
  border-radius: var(--radius);
  background: hsl(var(--info-soft));
}

.exibir-aviso > span {
  display: flex;
  flex-shrink: 0;
  color: hsl(var(--info));
}

.exibir-aviso p {
  flex: 1;
  margin: 0;
  font-size: var(--text-sm);
}

.exibir-aviso .btn-secondary {
  flex-shrink: 0;
}

/* ---------- Modelos: seleção de serviços ---------- */
.mod-servicos {
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

/* Lista rolável: o catálogo pode ter dezenas de serviços e o modal não deve
   crescer com ele. */
.mod-servicos-lista {
  display: grid;
  gap: 0.15rem;
  max-height: 11rem;
  overflow-y: auto;
  margin-top: var(--space-3);
}

.mod-servico-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.mod-servico-item:hover {
  background: hsl(var(--muted) / 0.5);
}

.mod-servico-item input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
}

.mod-servico-item span {
  display: grid;
  min-width: 0;
}

.mod-servico-item small {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.mod-servicos-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid hsl(var(--border));
}

.mod-servico-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: hsl(var(--muted));
  color: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.mod-servico-chip:hover {
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

.mod-servico-chip svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* ---------- Modelos: "Como deseja criar?" ---------- */
.criar-opcoes {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.criar-opcao {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.criar-opcao:hover {
  border-color: hsl(var(--primary) / 0.5);
}

.criar-opcao.is-ativa {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.05);
}

/* O selo cavalga a borda superior, como no print. */
.criar-selo {
  position: absolute;
  top: -0.7rem;
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.criar-selo svg {
  width: 0.8rem;
  height: 0.8rem;
}

.criar-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.criar-icone {
  display: flex;
  flex-shrink: 0;
  padding: var(--space-2);
  border-radius: var(--radius);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.criar-cabecalho strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.criar-cabecalho small {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: hsl(var(--muted-foreground));
}

.criar-previa {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.criar-previa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.criar-previa-topo em {
  flex-shrink: 0;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid hsl(var(--border));
  font-size: var(--text-2xs);
  font-style: normal;
  color: hsl(var(--muted-foreground));
}

.criar-previa-linha,
.criar-previa-tarefa {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.criar-previa-tarefa {
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  color: hsl(var(--foreground));
}

.criar-previa-tarefa em {
  margin-left: auto;
  font-size: var(--text-xs);
  font-style: normal;
  color: hsl(var(--muted-foreground));
}

.criar-ponto {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: hsl(var(--primary) / 0.6);
}

.criar-caixa {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xs);
}

.criar-previa-mais {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.criar-repetir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.criar-repetir > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.criar-continuar {
  width: 100%;
  margin-top: var(--space-5);
}

/* ===== Checklist dentro do modal de tarefa ===== */
.tarefa-checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid hsl(var(--border));
}
.tarefa-checklist-item:last-child { border-bottom: none; }
.tarefa-checklist-item label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
  flex: 1;
}
.tarefa-checklist-item input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.tarefa-checklist-item.is-feito span {
  text-decoration: line-through;
  color: hsl(var(--muted-foreground));
}
.tarefa-checklist-novo {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.tarefa-checklist-novo .input { flex: 1; }

/* ===== Quadro de Tarefas: barra compacta =====
   A barra tinha crescido para cinco linhas e o Kanban começava só no fim da
   tela. Aqui ela é apertada: botões mais baixos, menos respiro entre as linhas
   e a busca elástica, para caber mais coisa por linha sem encolher a fonte. */
.tarefas-modos + .tarefas-acoes,
.tarefas-filtros + .tarefas-acoes {
  margin-left: auto;
}

.dashboard-content .pipeline-toolbar-row {
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.tarefas-acoes .btn-secondary,
.tarefas-filtros .btn-secondary,
.tarefas-acoes .btn.btn-primary {
  height: 2.25rem;
  padding: 0 0.7rem;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.tarefas-acoes .icon-btn {
  height: 2.25rem;
  width: 2.25rem;
}

.tarefas-filtros .select {
  height: 2.25rem;
  min-width: 9.5rem;
  font-size: var(--text-sm);
}

.tarefas-filtros {
  flex: 1;
  min-width: 0;
}

.tarefas-busca {
  flex: 1;
  min-width: 10rem;
  max-width: 22rem;
}

.tarefas-busca .input {
  height: 2.25rem;
  font-size: var(--text-sm);
}

.view-toggle-group button {
  height: 2.25rem;
}

/* ===== Menu do botão Criar ===== */
.criar-menu {
  width: 21rem;
  padding: var(--space-2);
}

.criar-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}

.criar-item:hover { background: hsl(var(--muted)); }

.criar-item-icone {
  display: flex;
  color: hsl(var(--primary));
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.criar-item strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.criar-item small {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  line-height: 1.35;
}

/* ===== Card de tarefa: prazo, contagem e ações ===== */
.tarefa-card .kanban-card-top {
  align-items: flex-start;
  gap: var(--space-1);
}

.tarefa-card .kanban-card-name { flex: 1; }

.tarefa-card-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  flex-shrink: 0;
}

.tarefa-card-acao:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.tarefa-card-acao.is-on { color: hsl(var(--success)); }

.tarefa-card-prazo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.tarefa-card-data,
.tarefa-card-quando {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tarefa-card-quando.is-hoje,
.tarefa-card-quando.is-atrasada { color: hsl(var(--destructive)); font-weight: var(--weight-medium); }

.tarefa-card-contagem {
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
  font-size: var(--text-xs);
  white-space: nowrap;
}

.tarefa-card-barra {
  height: 4px;
  margin-top: var(--space-2);
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
}

.tarefa-card-barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: hsl(var(--success));
}

.tarefa-card-barra.is-atrasada span { background: hsl(var(--destructive)); }

.tarefa-card-aviso {
  margin-top: 0.25rem;
  text-align: right;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.tarefa-card-aviso.is-atrasada { color: hsl(var(--destructive)); }

.tarefa-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.tarefa-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: var(--space-2);
}

.tarefa-card-tags span {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.tarefa-card-abrir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border: none;
  border-top: 1px solid hsl(var(--border));
  background: none;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
  cursor: pointer;
}

.tarefa-card-abrir:hover { color: hsl(var(--primary)); }

/* Rótulo com controle à direita, usado no "Só clientes" dos modais. */
.field-label-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.filtro-so-clientes {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.filtro-so-clientes input { accent-color: hsl(var(--primary)); }

.modal-header-icone {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0.35rem;
  color: hsl(var(--primary));
}

/* ===== Modal de tarefa: campos novos ===== */
.field-row.is-tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.field-contador {
  align-self: flex-end;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.t-novo-cliente {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.t-servicos {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.t-servicos .input {
  border: none;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
}

.t-servicos-lista {
  max-height: 11rem;
  overflow-y: auto;
  padding: var(--space-2);
}

.t-servico-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.t-servico-item:hover { background: hsl(var(--muted)); }
.t-servico-item input { accent-color: hsl(var(--primary)); width: 1rem; height: 1rem; }
.t-servico-item strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.t-servico-item small { display: block; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }

.t-bloco-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
}

.t-bloco-toggle > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.t-tags-linha {
  display: flex;
  gap: var(--space-2);
}

.t-tags-linha .input { flex: 1; }

.t-tag-add {
  width: 2.75rem;
  flex-shrink: 0;
  padding: 0;
  justify-content: center;
}

.t-tags-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--space-2);
}

.t-tags-sugestoes button {
  padding: 0.15rem 0.6rem;
  border: none;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: var(--text-xs);
  cursor: pointer;
}

.t-tags-sugestoes button:hover { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }

.t-tags-escolhidas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--space-2);
}

.t-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-size: var(--text-xs);
}

.t-tag button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0;
}

.t-anexos-acao {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.t-anexos-dica { margin-top: 0.25rem; }

.t-anexos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.t-anexo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.t-anexo a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  color: hsl(var(--foreground));
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-anexo a:hover { color: hsl(var(--primary)); }
.t-anexo span { color: hsl(var(--muted-foreground)); font-size: var(--text-xs); }

@media (max-width: 640px) {
  .field-row.is-tres { grid-template-columns: 1fr; }
}

/* ===== Modal de tarefa: abas, comentários e atividade ===== */
.modal-subtitulo {
  margin-top: 0.15rem;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.t-abas {
  display: flex;
  gap: 0.25rem;
  margin: 0 var(--space-5);
  padding: 0.25rem;
  border-radius: var(--radius-md);
  background: hsl(var(--muted));
}

.t-abas button {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.t-abas button.is-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08);
}

.t-painel[hidden] { display: none !important; }

#t-painel-comentarios,
#t-painel-atividade {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.t-vazio {
  padding: var(--space-6) 0;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
}

.t-comentarios-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 18rem;
  overflow-y: auto;
}

.t-comentario {
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
}

.t-comentario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.t-comentario p {
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.t-comentario-novo {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.t-comentario-novo .input { flex: 1; }

.t-comentario-enviar {
  width: 3rem;
  flex-shrink: 0;
  padding: 0;
  justify-content: center;
}

.t-atividades-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 20rem;
  overflow-y: auto;
}

.t-atividade {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.t-atividade-ponto {
  width: 8px;
  height: 8px;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  flex-shrink: 0;
}

.t-atividade strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.t-atividade small { display: block; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }

.t-acoes-esquerda {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Card compacto: título com ações e o resumo do prazo embaixo. */
.tarefa-card.is-recolhido {
  display: block;
}

.tarefa-card-compacto-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

/* O rodapé do modal de tarefa tem quatro controles (Arquivar, excluir,
   Cancelar, Salvar). Sem permissão para quebrar, o botão da direita saía do
   cartão em telas estreitas — foi o que aconteceu nos ciclos 87 e 91. */
.modal-form .modal-actions {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.modal-form .modal-actions > div {
  flex-wrap: wrap;
  min-width: 0;
}

.t-acoes-esquerda .btn-secondary {
  white-space: nowrap;
}

/* ===== Página completa da tarefa ===== */
.tarefa-pagina-topo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.tarefa-pagina-titulo {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  background: none;
  border-color: transparent;
}

.tarefa-pagina-titulo:hover { border-color: hsl(var(--border)); }

.tarefa-pagina-acoes {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.tarefa-pagina-pai {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.tarefa-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--space-5);
  align-items: start;
}

.tarefa-pagina-principal,
.tarefa-pagina-lado {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.tarefa-bloco,
.tarefa-lado-card {
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
}

.tarefa-bloco h3,
.tarefa-lado-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.tarefa-bloco h3 > span {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
}

.tarefa-bloco-acao { margin-left: auto; }

.tarefa-bloco-linha {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tarefa-bloco-linha .input { flex: 1; }
.tarefa-bloco-linha .btn-secondary { flex-shrink: 0; white-space: nowrap; }

.tarefa-lado-card { display: flex; flex-direction: column; gap: var(--space-3); }
.tarefa-lado-card h3 { margin-bottom: 0; }

.tarefa-vazio {
  padding: var(--space-4) 0;
  text-align: center;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.tarefa-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid hsl(var(--border));
}

.tarefa-item:last-child { border-bottom: none; }

.tarefa-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1;
  cursor: pointer;
}

.tarefa-item input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

.tarefa-item strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.tarefa-item small { display: block; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.tarefa-item p { margin-top: 0.2rem; font-size: var(--text-sm); white-space: pre-wrap; }
.tarefa-item.is-feito strong { text-decoration: line-through; color: hsl(var(--muted-foreground)); }

.tarefa-item-acoes { display: flex; gap: 0.25rem; flex-shrink: 0; }

.tarefa-link-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tarefa-link-form .btn-secondary { justify-content: center; }

@media (max-width: 1100px) {
  .tarefa-pagina { grid-template-columns: 1fr; }
}

.modal-header-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.modal-header-acoes .link-like {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* ===== Assistente de Novo Projeto ===== */
.pa-passos {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0 var(--space-5) var(--space-2);
}

.pa-passo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.pa-passo:disabled { cursor: default; }
.pa-passo.is-atual { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.pa-passo.is-feito { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }

.pa-traco {
  flex: 1;
  min-width: 1.5rem;
  height: 0;
  border-top: 1px dashed hsl(var(--border));
}

.pa-traco.is-feito { border-top-color: hsl(var(--primary) / 0.5); }

.pa-titulo {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.pa-ajuda {
  margin-top: -0.35rem;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.pa-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 22rem;
  overflow-y: auto;
}

.pa-opcao {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  cursor: pointer;
}

.pa-opcao:hover { border-color: hsl(var(--primary) / 0.5); }
.pa-opcao.is-on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.05); }

.pa-opcao input[type="checkbox"],
.pa-opcao input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: hsl(var(--primary));
  flex-shrink: 0;
  cursor: pointer;
}

.pa-opcao-icone { font-size: 1.25rem; flex-shrink: 0; }

.pa-opcao-texto { flex: 1; min-width: 0; }
.pa-opcao-texto strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.pa-opcao-texto small { display: block; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }

.pa-opcao-marca {
  flex-shrink: 0;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
}

.pa-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.pa-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid hsl(var(--border));
}

.pa-voltar { width: auto; }

/* O botão de confirmar pode ter ícone (ex.: ✓✓ de "Concluir e arquivar"). */
#confirm-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

/* ===== Módulo Páginas: abas e portfólio ===== */
.paginas-abas {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: 0.25rem;
  border-radius: var(--radius-md);
  background: hsl(var(--muted));
}

.paginas-abas button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
}

.paginas-abas button.is-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08);
}

.paginas-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.paginas-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius-md);
  text-align: center;
}

.paginas-vazio-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.paginas-vazio h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.paginas-vazio p { max-width: 24rem; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }

.paginas-vazio-simples {
  padding: var(--space-5) 0;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
}

.paginas-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 44rem;
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
}

.paginas-form h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-top: var(--space-2); }

.paginas-cor { width: 5rem; padding: 0.25rem; }

.paginas-link-linha { display: flex; gap: var(--space-2); }
.paginas-link-linha .input { flex: 1; }

.paginas-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
}

.paginas-card strong { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-base); }
.paginas-card p { margin-top: 0.25rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.paginas-card .btn-secondary { flex-shrink: 0; white-space: nowrap; }

.paginas-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.paginas-metricas article {
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
}

.paginas-metricas span { display: block; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.paginas-metricas strong { display: block; margin-top: 0.25rem; font-size: var(--text-2xl, 1.5rem); font-weight: var(--weight-semibold); }

.paginas-grafico {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 8rem;
  padding: var(--space-2);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
}

.paginas-barra { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.paginas-barra span { width: 100%; background: hsl(var(--primary)); border-radius: 2px 2px 0 0; min-height: 2px; }

.video-embed {
  width: 100%;
  max-width: 26rem;
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: hsl(var(--muted));
}

.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.criar-opcao.is-ativa { border-color: hsl(var(--primary)); }

/* ===== Modal Escolher Layout ===== */
.lay-opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.lay-opcao {
  padding: var(--space-3);
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
  text-align: left;
  cursor: pointer;
}

.lay-opcao:hover { border-color: hsl(var(--primary) / 0.5); }
.lay-opcao.is-ativa { border-color: hsl(var(--primary)); }

.lay-opcao strong { display: block; margin-top: var(--space-3); font-size: var(--text-base); }
.lay-opcao small { display: block; margin-top: 0.15rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }

.lay-previa {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: center;
  gap: 0.4rem;
  height: 7rem;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: hsl(var(--muted));
}

/* Os blocos precisam de altura própria: num container que quebra linha,
   `align-content` não estica a linha e eles colapsavam para zero. */
.lay-bloco {
  flex: 1 1 0;
  min-width: 2.5rem;
  height: 100%;
  border-radius: 0.35rem;
  background: hsl(var(--foreground) / 0.18);
}

.lay-bloco.is-largo { flex-basis: 100%; height: calc(50% - 0.2rem); }
.lay-bloco.is-largo.is-destaque { height: calc(65% - 0.2rem); background: hsl(var(--primary) / 0.45); }
.lay-bloco.is-largo:not(.is-destaque) { height: calc(35% - 0.2rem); }
.lay-bloco.is-estreito { flex: 0 0 45%; }

.lay-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground, 0 0% 100%));
}

.lay-opcao.is-ativa .lay-check { display: flex; }

/* ===== Modal Cores do Tema ===== */
.paleta-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.paleta {
  padding: var(--space-3);
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
  text-align: left;
  cursor: pointer;
}

.paleta:hover { border-color: hsl(var(--primary) / 0.5); }
.paleta.is-ativa { border-color: hsl(var(--primary)); }

.paleta-amostras {
  display: flex;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
}

.paleta-amostras span {
  flex: 1;
  height: 2.6rem;
  border-radius: 0.4rem;
}

.paleta strong { display: block; font-size: var(--text-base); font-weight: var(--weight-medium); }
.paleta small { display: block; margin-top: 0.1rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }

.paleta-custom { margin-top: var(--space-4); }

.paleta-custom summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--space-2);
}

.paleta-custom summary:hover { color: hsl(var(--foreground)); }

/* ===== Aba Configurações do módulo Páginas ===== */
.config-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.config-cartao {
  padding: var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
  text-align: left;
  cursor: pointer;
}

.config-cartao:hover { border-color: hsl(var(--primary)); }

.config-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.config-icone.is-pixels { background: hsl(210 70% 55% / 0.14); color: hsl(210 70% 55%); }
.config-icone.is-marca { background: hsl(320 70% 60% / 0.14); color: hsl(320 70% 55%); }

.config-cartao strong { display: block; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.config-cartao small { display: block; margin-top: 0.3rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }

.config-estado {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: hsl(var(--success) / 0.14);
  color: hsl(var(--success));
  font-size: var(--text-xs);
}

.paginas-card.is-coluna { align-items: flex-start; }

#ed-salvar.is-pendente::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: currentColor;
}

@media (max-width: 1200px) {
  .ed-grade { grid-template-columns: 1fr; }
}

/* ===== Editor Visual em tela cheia ===== */
body.editor-cheio .dashboard-sidebar,
body.editor-cheio .dashboard-topbar { display: none; }

body.editor-cheio #app,
body.editor-cheio .dashboard-layout,
body.editor-cheio .dashboard-main {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

.editor-tela {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0;
  background: hsl(var(--background));
}

@media (max-width: 1200px) {
  .editor-tela .ed-grade { grid-template-columns: 1fr; }
  .editor-tela { height: auto; }
  .editor-tela .ed-lateral,
  .editor-tela .ed-painel,
  .editor-tela .ed-palco { height: auto; }
}

/* A pílula "Editar Hero" só aparece ao passar o mouse ou quando a seção está
   selecionada — como na referência, ela não polui a prévia o tempo todo. */
.ed-pilula {
  position: absolute;
  top: -0.4rem;
  right: 0.4rem;
  display: none;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--ed-cor), var(--ed-cor2));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* Bloco ainda sem conteúdo: continua clicável, só não finge estar em uso. */
.ed-bloco.is-vazio { opacity: 0.55; }

/* Botão sem link: aparece na prévia, mas riscado, porque some no site. */
.ed-cta.sem-link,
.ed-cta2.sem-link {
  opacity: 0.55;
  text-decoration: line-through;
}

@media (max-width: 1100px) {
  .bio-editor { grid-template-columns: 1fr; }
  .bio-preview { position: static; }
}

/* Rádio com o círculo à esquerda do texto, como no restante do módulo. */
.bio-radio { display: flex; align-items: center; gap: 0.55rem; padding: 0.2rem 0; cursor: pointer; }

/* O seletor de cor ocupa a largura do campo, como os selects vizinhos. */
.bio-cor-botao { width: 100%; height: 2.75rem; padding: 0.35rem; cursor: pointer;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--background)); }

/* Campo obrigatório deixado em branco no Salvar. A borda vermelha some assim
   que a pessoa digita — ver `wireProfile` em dashboardConfiguracoes.js. */
.input.is-invalido,
input.is-invalido,
select.is-invalido,
textarea.is-invalido {
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.12);
}

/* ---- Kanban: tempo parado e troca de etapa no card ---- */

/* Linha de rodapé com a entrada à esquerda e o tempo parado à direita. */
.kanban-card-parado {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px dashed hsl(var(--border));
  font-size: var(--text-xs); color: hsl(var(--muted-foreground));
}

/* Três níveis: em dia (discreto), atenção a partir de 7 dias, alerta aos 14.
   A cor é o que faz o lead esquecido saltar aos olhos sem ninguém procurar. */
.kanban-parado-selo { font-weight: var(--weight-medium); white-space: nowrap; }
.kanban-parado-selo.is-atencao { color: hsl(38 92% 45%); }
.kanban-parado-selo.is-alerta { color: hsl(var(--destructive)); font-weight: var(--weight-semibold); }

/* Mover sem arrastar. No celular, arrastar entre colunas quase nunca dá certo. */
.kanban-card-etapa {
  width: 100%; height: 2rem; margin-top: var(--space-2);
  font-size: var(--text-xs); cursor: pointer;
}

/* ============================================================
   Painel lateral do lead — abre ao clicar num card do Kanban
   ============================================================ */

.drawer-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; justify-content: flex-end;
  background: hsl(0 0% 0% / 0);
  transition: background 180ms ease;
}
.drawer-overlay.is-aberto { background: hsl(0 0% 0% / 0.45); }

/* Desliza da direita. `max-width` em vez de largura fixa para que em telas
   estreitas ele ocupe tudo — um painel de 720px num celular seria inútil. */
.drawer-painel {
  width: min(100%, 46rem); height: 100%; overflow-y: auto;
  background: hsl(var(--background));
  border-left: 1px solid hsl(var(--border));
  box-shadow: -12px 0 32px hsl(0 0% 0% / 0.18);
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.drawer-overlay.is-aberto .drawer-painel { transform: translateX(0); }

/* Quem pediu menos movimento recebe o painel sem a animação de entrada. */
@media (prefers-reduced-motion: reduce) {
  .drawer-overlay, .drawer-painel { transition: none; }
}

.drawer-topo {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
}
.drawer-abrir-completo { font-size: var(--text-sm); }

.drawer-identidade { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-2); }
.drawer-avatar {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0;
  border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-weight: var(--weight-semibold); font-size: var(--text-base);
}
.drawer-identidade-texto { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.drawer-identidade-texto h2 { margin: 0; font-size: var(--text-xl); }
.drawer-selo {
  padding: 0.15rem 0.6rem; border-radius: 999px;
  background: hsl(var(--primary) / 0.12); color: hsl(var(--primary));
  font-size: var(--text-xs); font-weight: var(--weight-medium);
}

.drawer-contato {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  padding: 0 var(--space-5) var(--space-3);
  font-size: var(--text-sm); color: hsl(var(--muted-foreground));
}
.drawer-contato span { display: inline-flex; align-items: center; gap: 0.35rem; }
.drawer-contato svg { width: 1rem; height: 1rem; }

.drawer-acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); }
.drawer-acoes .btn-secondary, .drawer-acoes .btn { font-size: var(--text-sm); }
.drawer-acoes .is-whatsapp { color: hsl(142 70% 35%); border-color: hsl(142 70% 35% / 0.4); }
.drawer-acao-principal { width: auto; }

/* Trilha de etapas em setas. O recorte em chevron mostra a direção do funil
   sem precisar de ícone nenhum. */
.drawer-trilha { display: flex; gap: 2px; padding: 0 var(--space-5); overflow-x: auto; }
.drawer-etapa {
  flex: 1 1 0; min-width: 7rem; padding: 0.55rem 1.4rem 0.55rem 1.8rem;
  border: none; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%, 0.9rem 50%);
}
.drawer-etapa:first-child { clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%); padding-left: 1.1rem; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.drawer-etapa:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.9rem 50%); }
.drawer-etapa:hover:not(.is-atual) { background: hsl(var(--muted) / 0.7); color: hsl(var(--foreground)); }
.drawer-etapa.is-atual { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: var(--weight-semibold); cursor: default; }

.drawer-parado { margin: var(--space-2) 0 0; padding: 0 var(--space-5); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }

.drawer-abas {
  display: flex; gap: var(--space-1); margin-top: var(--space-4);
  padding: 0 var(--space-5); overflow-x: auto;
  border-bottom: 1px solid hsl(var(--border));
}
.drawer-abas button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: var(--space-2) var(--space-3); white-space: nowrap; cursor: pointer;
  border: none; border-bottom: 2px solid transparent; background: none;
  color: hsl(var(--muted-foreground)); font-size: var(--text-sm);
}
.drawer-abas button svg { width: 1rem; height: 1rem; }
.drawer-abas button:hover { color: hsl(var(--foreground)); }
.drawer-abas button.is-ativa { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); font-weight: var(--weight-medium); }
.drawer-aba-conta {
  min-width: 1.25rem; padding: 0 0.35rem; border-radius: 999px;
  background: hsl(var(--muted)); font-size: var(--text-xs);
}

.drawer-corpo { padding: var(--space-5); }
.drawer-vazio { padding: var(--space-6) 0; text-align: center; }

/* Duas colunas quando cabe; uma só quando o painel está estreito. */
.drawer-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.drawer-coluna { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 860px) { .drawer-grade { grid-template-columns: 1fr; } }

.drawer-bloco { padding: var(--space-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); }
.drawer-bloco > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.drawer-bloco h3 { margin: 0; font-size: var(--text-base); }
.drawer-bloco dl { margin: 0; }
.drawer-bloco .btn { width: 100%; margin-top: var(--space-3); }

.drawer-linha { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2); padding: 0.45rem 0; border-bottom: 1px solid hsl(var(--border) / 0.5); }
.drawer-linha:last-child { border-bottom: none; }
.drawer-linha dt { margin: 0; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.drawer-linha dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.drawer-idade { color: hsl(var(--muted-foreground)); }

.drawer-proximo { margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: 1.5; }
.drawer-proximo svg { width: 1rem; height: 1rem; vertical-align: -0.15rem; }

.drawer-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.drawer-lista li { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--text-sm); }
.drawer-lista li small { color: hsl(var(--muted-foreground)); font-size: var(--text-xs); }
.drawer-lista.is-cartoes li { padding: var(--space-3); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); }
.drawer-lista li.is-feita strong { text-decoration: line-through; color: hsl(var(--muted-foreground)); }
.drawer-lista li.is-receita { border-left: 3px solid hsl(142 70% 40%); }
.drawer-lista li.is-despesa { border-left: 3px solid hsl(var(--destructive)); }


/* ============================================================
   Tema claro — cores de categoria
   ============================================================
 *
 * Tudo abaixo existia com a luminosidade calibrada para o fundo navy: um
 * amarelo a 60% de luz é confortável no escuro e vira quase branco sobre
 * branco. Com o claro virando o padrão, cada uma ganha aqui a versão escura
 * da mesma matiz — matiz e saturação intactas, só a luminosidade desce ao
 * ponto em que o texto alcança 4.5:1 contra o fundo que ele realmente tem
 * (o fundo translúcido do próprio selo, não o branco da página).
 */
:root[data-theme="light"] .priority-media { color: hsl(45 90% 27%); }
:root[data-theme="light"] .status-enviado { color: hsl(210 80% 43%); }

:root[data-theme="light"] .agenda-item.is-feriado { color: hsl(4 72% 45%); }
:root[data-theme="light"] .agenda-item.is-comemorativa { color: hsl(330 70% 45%); }
:root[data-theme="light"] .agenda-item.is-aniversario { color: hsl(270 65% 55%); }
:root[data-theme="light"] .agenda-item.is-receita { color: hsl(145 60% 30%); }
:root[data-theme="light"] .agenda-item.is-despesa { color: hsl(22 85% 38%); }

:root[data-theme="light"] .kanban-parado-selo.is-atencao { color: hsl(38 92% 31%); }

/* Estes dois são fundo sólido com texto branco: quem escurece é o fundo. */
:root[data-theme="light"] .kanban-btn.is-ganha { background: hsl(145 63% 32%); }
:root[data-theme="light"] .kanban-btn.is-ganha:hover { background: hsl(145 63% 27%); }

/*
 * Título da coluna do quadro de tarefas. A cor vem da etapa, então o JS manda
 * matiz e saturação em variáveis e aqui se escolhe a luminosidade por tema —
 * um valor fixo no style inline não acompanharia a troca de tema.
 */
.kanban-column-titulo-cor {
  color: hsl(var(--etapa-h) var(--etapa-s) var(--etapa-l));
}

:root[data-theme="light"] .kanban-column-titulo-cor {
  color: hsl(var(--etapa-h) var(--etapa-s) 30%);
}

/* Era a cor do tema escuro escrita à mão, e nunca acompanhou a troca de tema. */
:root[data-theme="light"] .finance-summary-row strong.is-info { color: hsl(210 80% 38%); }

/* O próprio realce azul da pílula clareia o fundo e come o meio ponto que
   faltava para o número passar. */
:root[data-theme="light"] .agenda-exibir-contagem { color: hsl(216 91% 42%); }

/* Botão de contorno: o verde do WhatsApp a 35% de luz não alcança o branco. */
:root[data-theme="light"] .drawer-acoes .is-whatsapp { color: hsl(142 70% 27%); border-color: hsl(142 70% 27% / 0.45); }

/* Com o fundo branco, o cartão de login ficava branco sobre branco e só a
   sombra o segurava. Aqui a página recua um tom e o cartão volta a ser cartão. */
:root[data-theme="light"] .auth-shell,
:root[data-theme="light"] .onboarding-body {
  background: hsl(var(--muted));
}

/* ===== Roteiro do serviço (checklists no formato do Trello) =====
   O modal é alto por natureza — várias listas, cada uma com seus itens. Por
   isso ele é uma coluna flex com o miolo rolando sozinho: o cabeçalho e o
   campo de "adicionar lista" ficam sempre à vista, como no cartão do Trello. */
.servico-roteiro-modal {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem;
}
.servico-roteiro-modal .modal-header { margin-bottom: var(--space-3); }
.roteiro-header-texto h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.roteiro-subtitulo {
  margin: 0.25rem 0 0;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

.roteiro-corpo {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.roteiro-lista {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--space-3);
  background: hsl(var(--card));
}
.roteiro-lista.is-dragging { opacity: 0.4; }

.roteiro-lista-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* A alça é o que separa "arrastar a lista" de "arrastar o item": a seção só
   vira arrastável enquanto ela está sendo segurada. */
.roteiro-grip,
.roteiro-item-grip {
  display: inline-flex;
  color: hsl(var(--muted-foreground));
  cursor: grab;
  flex-shrink: 0;
}
.roteiro-grip:active,
.roteiro-item-grip:active { cursor: grabbing; }

.roteiro-lista-titulo {
  flex: 1;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: text;
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  min-width: 0;
}
.roteiro-lista-titulo:hover { background: hsl(var(--muted)); }

.roteiro-contador {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.roteiro-progresso {
  height: 6px;
  margin: var(--space-2) 0;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
}
.roteiro-progresso > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: hsl(var(--primary));
  transition: width 0.2s ease;
}

/* Altura mínima para que uma lista vazia continue sendo alvo de arraste. */
.roteiro-itens { min-height: 1.5rem; }
.roteiro-itens.is-drag-over {
  outline: 2px dashed hsl(var(--primary));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.roteiro-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.25rem;
  border-radius: var(--radius-sm);
}
.roteiro-item:hover { background: hsl(var(--muted)); }
.roteiro-item.is-dragging { opacity: 0.4; }
.roteiro-item input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
  flex-shrink: 0;
}
.roteiro-item-texto {
  flex: 1;
  font-size: var(--text-sm);
  cursor: text;
  min-width: 0;
  word-break: break-word;
}
.roteiro-item.is-feito .roteiro-item-texto {
  text-decoration: line-through;
  color: hsl(var(--muted-foreground));
}
/* O botão de remover só aparece no item sob o cursor — com um por linha, a
   coluna de lixeiras competia com o texto pela atenção. */
.roteiro-item .icon-btn { opacity: 0; transition: opacity 0.15s ease; }
.roteiro-item:hover .icon-btn,
.roteiro-item:focus-within .icon-btn { opacity: 1; }
/* Em tela de toque não existe hover: esconder a lixeira ali seria escondê-la
   para sempre. O critério é o ponteiro, não a largura — um tablet largo com
   toque cai no mesmo caso. */
@media (hover: none) {
  .roteiro-item .icon-btn { opacity: 1; }
}

.roteiro-escondidos,
.roteiro-lista-vazia {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

.roteiro-edicao { font-size: var(--text-sm); }

.roteiro-novo-item {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.roteiro-novo-item .input { flex: 1; }

.roteiro-vazio {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: hsl(var(--muted-foreground));
}
.roteiro-vazio p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

.roteiro-rodape {
  padding-top: var(--space-3);
  border-top: 1px solid hsl(var(--border));
  margin-top: var(--space-3);
}
.roteiro-nova-lista { display: flex; gap: var(--space-2); }
.roteiro-nova-lista .input { flex: 1; }

/* ---- Emblema do roteiro no card do serviço ---- */
.service-card-roteiro {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.service-card-roteiro > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.service-card-roteiro strong {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.service-card-roteiro.is-completo strong { color: hsl(var(--success)); }
.service-roteiro-barra {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
  min-width: 2rem;
}
.service-roteiro-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: hsl(var(--primary));
}
.service-list-roteiro {
  margin-left: 0.2rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .servico-roteiro-modal { max-width: 100%; padding: 1.25rem; }
  .roteiro-nova-lista,
  .roteiro-novo-item { flex-direction: column; align-items: stretch; }
}

/* O .icon-btn é um quadrado de 38px. Com o emblema "2/4" dentro, o SVG era
   espremido de 18px para 5px para o número caber. Quando há emblema, o botão
   deixa de ser quadrado e o ícone para de encolher. */
.service-list-actions .icon-btn.has-roteiro-badge {
  width: auto;
  gap: 0.25rem;
  padding-inline: 0.45rem;
}
.service-list-actions .icon-btn svg,
.service-list-roteiro { flex-shrink: 0; }

/* ---- Slot de upload com logo padrão (Propostas → Aprovação) ---- */
.approval-upload-acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* O <label> aqui faz o papel de botão: ele abre o seletor de arquivo do input
   escondido dentro dele. Precisa parecer um, já que fica ao lado de um. */
.approval-upload .approval-upload-trocar {
  display: inline-flex;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
}

.approval-upload .approval-upload-trocar:hover {
  border-color: hsl(var(--primary) / 0.55);
}

.approval-upload .approval-upload-trocar svg {
  width: 1rem;
  height: 1rem;
}

.approval-upload-tag {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.72rem;
  white-space: nowrap;
}

/* O padrão é um estado provisório, não uma escolha: o tracejado diz isso. */
.approval-upload-preview.is-padrao {
  border-style: dashed;
}