/*
 * components.css — Componentes reutilizáveis do Tarivelo
 *
 * Classes de componentes do design system.
 * Depende de tokens.css e base.css (devem ser carregados antes).
 *
 * Organização:
 *   1. Saudação (greeting)
 *   2. Seções (section, section-title)
 *   3. Cards (card, card-empty, card-list)
 *   4. Estados e variações
 */

/* ─────────────────────────────────────────
 * 1. SAUDAÇÃO
 * Elemento principal da tela inicial.
 * Fraunces em tamanho grande — momento de acolhimento.
 * ───────────────────────────────────────── */

.greeting {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-primary-700);
  letter-spacing: -0.02em; /* levemente apertado — elegância tipográfica */

  /* Ligatures e variantes estilísticas do Fraunces */
  font-feature-settings: "ss01" on, "liga" on;
}

/* Responsivo: reduz em telas pequenas */
@media (max-width: 480px) {
  .greeting {
    font-size: var(--text-3xl);
  }
}

.greeting-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin-top: var(--space-sm);
  max-width: 52ch;
}

/* ─────────────────────────────────────────
 * 2. SEÇÕES
 * Divisões do dashboard — urgente, semana, sem prazo.
 * Hierarquia visual clara com rótulos discretos.
 * ───────────────────────────────────────── */

.section {
  margin-top: var(--space-2xl);
}

.section:first-of-type {
  margin-top: var(--space-xl);
}

.section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-md);

  /* Remove o comportamento de heading para este elemento */
  font-feature-settings: normal;
}

/* ─────────────────────────────────────────
 * 3. CARDS
 * Unidades de conteúdo — a base do trabalho diário.
 * Elevados levemente sobre o fundo, com borda suave.
 * ───────────────────────────────────────── */

.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);

  /* Transição suave para o efeito de hover */
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

/* ─────────────────────────────────────────
 * 3a. CARD VAZIO
 * Estado inicial — seções sem conteúdo ainda.
 * Tom gentil e não-alarmista: vazio é normal e tudo bem.
 * ───────────────────────────────────────── */

.card-empty {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);

  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-subtle);
  line-height: var(--leading-snug);

  /* Sem hover — é apenas informativo */
}

/* ─────────────────────────────────────────
 * 4. ESTADOS E VARIAÇÕES
 * ───────────────────────────────────────── */

/* Card com prioridade funcional — usado quando tiver conteúdo real */
.card--urgente {
  border-left: 3px solid var(--color-critical);
}

.card--atencao {
  border-left: 3px solid var(--color-warning);
}

.card--ok {
  border-left: 3px solid var(--color-success);
}

/* Etiqueta de status dentro de um card — para uso futuro */
.card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.card-status--sucesso {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.card-status--atencao {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.card-status--critico {
  background-color: var(--color-critical-bg);
  color: var(--color-critical);
}

/* ─────────────────────────────────────────
 * 5. FORMULÁRIOS
 * Usado na tela de login e em futuros formulários do sistema.
 * Simples, limpos, acessíveis.
 * ───────────────────────────────────────── */

/* Container do formulário — centralizado com largura confortável */
.form-container {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

/* Agrupamento de label + input */
.form-field {
  margin-bottom: var(--space-md);
}

/* Rótulo do campo */
.form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

/* Campo de texto */
.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);

  /* Remove o outline padrão do navegador — substituído pelo foco abaixo */
  outline: none;
}

.form-input::placeholder {
  color: var(--color-text-subtle);
}

.form-input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(90, 122, 106, 0.12);
}

/* Botão primário de submit */
.form-button {
  display: inline-block;
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
  background-color: var(--color-primary-500);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.form-button:hover {
  background-color: var(--color-primary-700);
}

.form-button:active {
  background-color: var(--color-primary-800);
}

/* Mensagem de erro — tom gentil, não alarmista */
.form-error {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background-color: rgba(168, 90, 74, 0.07);
  border-left: 3px solid var(--color-critical);
  border-radius: var(--radius-sm);
  color: var(--color-critical);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ─────────────────────────────────────────
 * 6. HEADER DO SITE
 * Header alto full-width: marca à esquerda, captura no centro, usuário à direita.
 * Sticky no topo — sempre visível durante a navegação.
 * ───────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr minmax(400px, 900px) 1fr;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Nome do sistema — "tarivelo" discreto à esquerda, clicável para o dashboard */
.site-header-brand {
  justify-self: start;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-subtle);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.site-header-brand:hover {
  color: var(--color-primary-500);
  text-decoration: none;
}

/* Área do usuário logado — nome e link de saída */
.site-header-user {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Separador visual entre nome e link */
.site-header-user-sep {
  color: var(--color-text-subtle);
  user-select: none;
}

/* Link "sair" */
.site-header-user a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-header-user a:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* ─────────────────────────────────────────
 * 6a. BARRA DE CAPTURA
 * Input largo no centro do header para capturas rápidas.
 * Atalho global: Ctrl+/ foca o input.
 * ───────────────────────────────────────── */

.captura-bar {
  justify-self: center;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.captura-bar:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(90, 122, 106, 0.12);
}

.captura-input {
  flex: 1;
  padding: var(--space-xs) var(--space-md);
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
}

.captura-input::placeholder {
  color: var(--color-text-subtle);
}

.captura-mic {
  background: transparent;
  border: none;
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  color: var(--color-text-subtle);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.captura-mic:hover {
  color: var(--color-primary-500);
}

/* Feedback visual após envio de captura */
.captura-feedback {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  animation: capturaFadeInOut 1.5s ease forwards;
  pointer-events: none;
  white-space: nowrap;
}

.captura-feedback--sucesso {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.captura-feedback--erro {
  background-color: var(--color-critical-bg);
  color: var(--color-critical);
}

@keyframes capturaFadeInOut {
  0%   { opacity: 0; transform: translateY(-50%) translateX(-8px); }
  15%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  85%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  100% { opacity: 0; transform: translateY(-50%) translateX(8px); }
}

/* ─────────────────────────────────────────
 * 6b. LAYOUT PRINCIPAL — sidebar + conteúdo
 * ───────────────────────────────────────── */

.app-layout {
  display: flex;
  min-height: calc(100vh - 64px); /* desconta a altura do header */
}

/* ─────────────────────────────────────────
 * 6c. SIDEBAR DE NAVEGAÇÃO
 * 260px aberta, 60px colapsada.
 * Transição suave de 250ms.
 * ───────────────────────────────────────── */

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
  transition: width 250ms ease;
  position: relative;
  overflow: hidden;
}

.sidebar--colapsada {
  width: 60px;
  overflow: visible; /* permite que o balão de hover flutue sobre o conteúdo vizinho */
}

/* Por padrão (sidebar aberta): inicial oculta, label visível */
.sidebar-item-inicial {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  width: 100%;
  text-align: center;
  letter-spacing: 0.02em;
  color: inherit;
}

.sidebar-item-label {
  display: inline;
  opacity: 1;
}

/* Sidebar colapsada: inicial visível, label oculta */
.sidebar--colapsada .sidebar-item {
  padding: var(--space-sm) 0;
  justify-content: center;
  position: relative;
}

.sidebar--colapsada .sidebar-item-inicial {
  display: inline-block;
}

.sidebar--colapsada .sidebar-item-label {
  display: none;
}

/* Botão de colapsar/expandir */
.sidebar-toggle {
  position: absolute;
  top: var(--space-md);
  right: var(--space-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  line-height: 1;
}

.sidebar-toggle:hover {
  color: var(--color-text);
  background-color: var(--color-surface-elevated);
}

/* Rotaciona a seta quando colapsada */
.sidebar--colapsada .sidebar-toggle-icon {
  display: inline-block;
  transform: rotate(180deg);
}

/* Lista de itens de navegação */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2xl);
  padding: 0 var(--space-sm);
}

/* Item de navegação */
.sidebar-item {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item:hover {
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  text-decoration: none;
}

/* Item ativo: destaque com cor primária */
.sidebar-item--ativo {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

.sidebar-item--ativo:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
  text-decoration: none;
}

/* Sidebar colapsada: item com position relative para o balão poder sair do box */
.sidebar--colapsada .sidebar-item {
  position: relative;
  overflow: visible;
}

/* No hover, aumenta z-index do item para o balão ficar sobre tudo */
.sidebar--colapsada .sidebar-item:hover {
  z-index: 50;
}

/* Balão que flutua à direita do item mostrando o nome completo */
.sidebar--colapsada .sidebar-item:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md) 0 var(--space-sm);
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-md);
  z-index: 50;
  animation: sidebarItemExpand 120ms ease-out;
}

/* Balão do item ativo: fundo e cor primária */
.sidebar--colapsada .sidebar-item--ativo:hover::before {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  border-color: var(--color-primary-200);
}

@keyframes sidebarItemExpand {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Contagem de capturas/items não processados */
.sidebar-item-contagem {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 1px 6px;
  background-color: var(--color-primary-500);
  color: white;
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

/* ─────────────────────────────────────────
 * 6d. ÁREA DE CONTEÚDO PRINCIPAL
 * ───────────────────────────────────────── */

.app-main {
  flex: 1;
  min-width: 0;
  background-color: var(--color-bg);
}

.app-main .container-tarivelo {
  max-width: 1000px;
  padding: var(--space-xl) var(--space-2xl);
}

/* ─────────────────────────────────────────
 * 7. PÁGINAS DE CONTEÚDO
 * Cabeçalhos de página, botões de ação e navegação interna.
 * ───────────────────────────────────────── */

/* Cabeçalho de página com título e ação principal — flex justify-between */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-lg);
}

/* Título principal das páginas de conteúdo (lista, detalhe, etc.) */
.page-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
  font-feature-settings: "ss01" on, "liga" on;
}

/* Subtítulo abaixo do título da página */
.page-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Botão de retorno — discreto, sem peso visual */
.btn-voltar {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.btn-voltar:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* Botão de ação secundária (editar, adicionar) — outline suave */
.btn-acao {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-700);
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  white-space: nowrap;
}

.btn-acao:hover {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary-300);
  text-decoration: none;
  color: var(--color-primary-700);
}

/* Botão de ação pequena — para uso dentro de cards e listas */
.btn-acao-small {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-sm);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn-acao-small:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  text-decoration: none;
}

/* Variante perigosa (remover, excluir) */
.btn-acao-small--perigo {
  color: var(--color-critical);
  border-color: rgba(168, 90, 74, 0.25);
  background: none;
}

.btn-acao-small--perigo:hover {
  color: var(--color-critical);
  border-color: var(--color-critical);
  background-color: var(--color-critical-bg);
}

/* ─────────────────────────────────────────
 * 8. FILTROS / ABAS
 * Linha de filtros clicáveis para a lista de empresas.
 * ───────────────────────────────────────── */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.filter-tab {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); /* pill */
  padding: var(--space-xs) var(--space-md);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
  white-space: nowrap;
}

.filter-tab:hover {
  background-color: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  border-color: var(--color-border-strong);
}

.filter-tab--ativo {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
  border-color: var(--color-primary-200);
}

.filter-tab--ativo:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
  border-color: var(--color-primary-300);
}

/* ─────────────────────────────────────────
 * 9. CARDS DE EMPRESA
 * Cards clicáveis da lista de empresas.
 * ───────────────────────────────────────── */

.empresa-card {
  display: block;
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.empresa-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  text-decoration: none;
}

.empresa-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.empresa-card-nome {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-700);
  line-height: var(--leading-tight);
  font-feature-settings: "ss01" on;
}

.empresa-card-razao {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.empresa-card-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.empresa-card-sep {
  color: var(--color-border-strong);
}

/* ─────────────────────────────────────────
 * 10. TAGS DE TIPO DE RELAÇÃO
 * Pílulas coloridas para identificar o tipo de cada empresa.
 * ───────────────────────────────────────── */

.tipo-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-lg);
  white-space: nowrap;
  /* cor padrão neutra */
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.tipo-tag--cliente {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  border-color: var(--color-primary-200);
}

.tipo-tag--destinador {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: rgba(184, 148, 85, 0.3);
}

.tipo-tag--transportador {
  background-color: #eef0f5;
  color: #5a6480;
  border-color: #d0d5e4;
}

.tipo-tag--fornecedor {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border-color: rgba(122, 140, 110, 0.3);
}

.tipo-tag--orgao_publico {
  background-color: #f5f0fa;
  color: #7a5a9a;
  border-color: #ddd0ed;
}

/* ─────────────────────────────────────────
 * 11. GRADE DE INFORMAÇÕES (detalhe)
 * Layout de dados em formato dt/dd, para os blocos de detalhe.
 * ───────────────────────────────────────── */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md) var(--space-xl);
  margin: 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-value {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  max-width: none;
}

/* ─────────────────────────────────────────
 * 12. CARDS DE PESSOA
 * Cards compactos dentro da página de detalhe de empresa.
 * ───────────────────────────────────────── */

.pessoa-card {
  padding: var(--space-md) var(--space-lg);
}

.pessoa-card--inativa {
  opacity: 0.6;
}

.pessoa-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.pessoa-nome {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.pessoa-papel {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 1px;
}

.pessoa-profissao {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: 2px;
}

.pessoa-contato {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: 4px;
}

.pessoa-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  padding-top: 2px;
}

/* ─────────────────────────────────────────
 * 13. FORMULÁRIOS — EXTENSÕES
 * Novos elementos além dos que já existiam.
 * ───────────────────────────────────────── */

/* Grid de formulário — dois campos por linha em telas maiores */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-xl);
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Campo que ocupa as duas colunas */
.form-field--full {
  grid-column: 1 / -1;
}

/* Campo estreito (ex: número de endereço, UF) */
.form-field--small {
  grid-column: span 1;
  max-width: 160px;
}

/* Asterisco de campo obrigatório */
.form-required {
  color: var(--color-critical);
  font-weight: var(--font-weight-bold);
  margin-left: 2px;
}

/* Select — mesmo visual que form-input */
.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  /* Remove aparência nativa no WebKit para compatibilidade de padding */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9a96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: calc(var(--space-md) * 2 + 12px);
}

.form-select:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(90, 122, 106, 0.12);
}

/* Textarea — crescimento vertical */
.form-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  resize: vertical;
  min-height: 120px;
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(90, 122, 106, 0.12);
}

.form-textarea::placeholder {
  color: var(--color-text-subtle);
}

/* Texto de observações na tela de detalhe */
.observacoes-texto {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
  white-space: pre-line; /* preserva quebras de linha do campo de texto */
  max-width: none;
}

/* ─────────────────────────────────────────
 * 14. CABEÇALHO DE DETALHE DE EMPRESA
 * Layout: nome + [tag + Editar] na mesma linha.
 * ───────────────────────────────────────── */

.detalhe-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.detalhe-header-nome-wrap {
  flex: 1;
  min-width: 0; /* permite truncar se necessário */
}

/* Saudação reutilizada como nome da empresa — sobrescreve margin-bottom */
.detalhe-nome {
  margin-bottom: 0;
  word-break: break-word;
}

.detalhe-header-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  padding-top: var(--space-xs); /* alinha visualmente com a linha de base do h1 */
}

/* Razão social em texto secundário abaixo do nome */
.detalhe-razao-social {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: none;
}

/* ─────────────────────────────────────────
 * 15. RODAPÉ DA PÁGINA DE DETALHE
 * Contém a ação de desativar/reativar empresa.
 * ───────────────────────────────────────── */

.detalhe-rodape {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-xl);
}

/* Botão de desativar: discreto, vermelho desbotado */
.btn-desativar {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-critical);
  background: none;
  border: 1px solid rgba(168, 90, 74, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  opacity: 0.8;
}

.btn-desativar:hover {
  background-color: var(--color-critical-bg);
  border-color: var(--color-critical);
  opacity: 1;
}

/* Botão de reativar: verde sálvia suave */
.btn-reativar {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
  background: none;
  border: 1px solid rgba(122, 140, 110, 0.4);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn-reativar:hover {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
}

/* ─────────────────────────────────────────
 * 16. ESTADOS DE EMPRESA DESATIVADA
 * Aviso no topo da página, badge na lista.
 * ───────────────────────────────────────── */

/* Aviso de licença ambiental vencida — crítico, borda vermelha */
.aviso-licenca-vencida {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background-color: var(--color-critical-bg);
  border-left: 4px solid var(--color-critical);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-critical);
}

/* Aviso no topo da página de detalhe */
.aviso-desativada {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  background-color: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-warning);
}

/* Card de empresa inativa na lista: opacidade reduzida */
.empresa-card--inativa {
  opacity: 0.55;
}

.empresa-card--inativa:hover {
  opacity: 0.85;
}

/* Badge "desativada" pequeno no card */
.badge-desativada {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium);
  padding: 1px var(--space-xs);
  border-radius: var(--radius-lg);
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid rgba(184, 148, 85, 0.3);
  white-space: nowrap;
}

/* Link de filtro de inativas — tom mais sutil */
.filter-tab-sep {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  padding: 0 var(--space-2xs);
  user-select: none;
}

.filter-tab--inativas {
  color: var(--color-text-subtle);
  border-style: dashed;
}

.filter-tab--inativas.filter-tab--ativo {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: rgba(184, 148, 85, 0.3);
  border-style: solid;
}

/* ─────────────────────────────────────────
 * 17. MINI-CARDS DE COMPROMISSO
 * Usados no dashboard para listar compromissos em cada bloco.
 * ───────────────────────────────────────── */

.compromisso-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  transition: border-color var(--transition-fast);
}

.compromisso-mini:last-child {
  margin-bottom: 0;
}

.compromisso-mini:hover {
  border-color: var(--color-border-strong);
}

/* Vencido: borda esquerda vermelha + prazo em cor crítica */
.compromisso-mini--vencido {
  border-left: 3px solid var(--color-critical);
}

/* Vencendo hoje ou amanhã: borda esquerda âmbar */
.compromisso-mini--hoje {
  border-left: 3px solid var(--color-warning);
}

.compromisso-mini-texto {
  flex: 1;
  min-width: 0;
}

.compromisso-mini-titulo {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compromisso-mini-empresa {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compromisso-mini-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.compromisso-mini-prazo {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.compromisso-mini--vencido .compromisso-mini-prazo {
  color: var(--color-critical);
  font-weight: var(--font-weight-semibold);
}

.compromisso-mini--hoje .compromisso-mini-prazo {
  color: var(--color-warning);
  font-weight: var(--font-weight-semibold);
}

.compromisso-mini-tipo {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Mini-cards clicáveis (quando têm empresa vinculada) */
a.compromisso-mini-link {
  display: flex;
  color: inherit;
  text-decoration: none;
}

a.compromisso-mini-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  text-decoration: none;
  color: inherit;
}

/* ─────────────────────────────────────────
 * 18. INSIGHTS DE IA
 * Seção com visual distinto: borda colorida por tipo, badge "IA".
 * ───────────────────────────────────────── */

.insights-section {
  margin-top: var(--space-2xl);
}

.insights-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Badge "IA" — discreto gradiente verde sálvia */
.section-title-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  color: white;
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
}

.insights-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Card base de insight */
.insight-card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: all var(--transition-fast);
}

.insight-card:hover {
  border-color: var(--color-primary-300);
  border-left-color: var(--color-primary-500);
  box-shadow: var(--shadow-md);
}

/* Variações por tipo */
.insight-card--alerta {
  border-left-color: var(--color-critical);
}

.insight-card--alerta:hover {
  border-left-color: var(--color-critical);
}

.insight-card--sugestao {
  border-left-color: var(--color-warning);
}

.insight-card--sugestao:hover {
  border-left-color: var(--color-warning);
}

.insight-card--padrao_observado {
  border-left-color: var(--color-primary-500);
}

.insight-card--predicao {
  border-left-color: var(--color-success);
}

.insight-card--predicao:hover {
  border-left-color: var(--color-success);
}

.insight-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.insight-tipo {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.insight-confianca {
  font-family: monospace;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  letter-spacing: -1px;
}

.insight-titulo {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0 0 var(--space-xs) 0;
  line-height: var(--leading-snug);
  font-feature-settings: "ss01" on, "liga" on;
}

.insight-mensagem {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-sm) 0;
  max-width: 70ch;
}

.insight-acao {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-700);
  text-decoration: none;
  margin-top: var(--space-xs);
}

.insight-acao:hover {
  color: var(--color-primary-500);
  text-decoration: none;
}

/* ─────────────────────────────────────────
 * 19. CARDS DE CAPTURA
 * Cards da área de capturas — texto bruto com ações inline.
 * Metadados (tempo + empresa) no topo em label discreta.
 * ───────────────────────────────────────── */

.captura-card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-fast);
}

.captura-card:hover {
  border-color: var(--color-border-strong);
}

/* Linha de metadados: tempo + empresa em label pequena no topo */
.captura-card-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

/* Nome da empresa — sem uppercase, cor levemente mais forte */
.captura-card-empresa {
  margin-left: var(--space-xs);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* Texto principal da captura — corpo sans-serif, não título serif */
.captura-card-texto {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-md) 0;
  white-space: pre-line;
}

/* Linha de ações: arquivar, vincular, excluir */
.captura-card-acoes {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-wrap: wrap;
}

/* Form de vincular empresa — aparece inline abaixo das ações */
.captura-card-vincular {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.captura-card-vincular form {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-wrap: wrap;
}

.captura-card-vincular select {
  flex: 1;
  max-width: 300px;
}

/* ─────────────────────────────────────────
 * 20. CARDS DE DOCUMENTO
 * Cards da área de documentos — arquivo, tipo, tamanho, ações.
 * ───────────────────────────────────────── */

.documento-card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-fast);
}

.documento-card:hover {
  border-color: var(--color-border-strong);
}

.documento-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.documento-card-nome {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  word-break: break-word;
}

.documento-card-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-xs);
}

.documento-card-empresa {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.documento-card-descricao {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  line-height: var(--leading-relaxed);
}

.documento-card-acoes {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-shrink: 0;
}

/* CSS do microfone gravando */
.captura-mic--gravando {
  color: var(--color-critical) !important;
  animation: micPulso 1s ease-in-out infinite;
}

@keyframes micPulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.1); }
}

/* ─────────────────────────────────────────
 * INDICADOR DE GRAVAÇÃO
 * Substitui o input da barra durante a gravação, transcrição e processamento.
 * ───────────────────────────────────────── */

/* Estados visuais da barra durante gravação */
.captura-bar--gravando {
  background-color: rgba(168, 90, 74, 0.04);
  border-color: rgba(168, 90, 74, 0.3);
}

.captura-bar--transcrevendo {
  background-color: rgba(184, 148, 85, 0.05);
  border-color: rgba(184, 148, 85, 0.3);
}

.captura-bar--concluido {
  background-color: rgba(122, 140, 110, 0.05);
  border-color: rgba(122, 140, 110, 0.4);
}

/* Indicador que substitui o input durante a gravação */
.captura-gravacao-indicador {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xs) var(--space-md);
}

.captura-gravacao-bolinha {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.captura-gravacao-bolinha--vermelha {
  background-color: var(--color-critical);
  animation: pulsoForte 0.8s ease-in-out infinite;
}

.captura-gravacao-bolinha--laranja {
  background-color: var(--color-warning);
  animation: pulsoSuave 1.2s ease-in-out infinite;
}

.captura-gravacao-bolinha--verde {
  background-color: var(--color-success);
}

@keyframes pulsoForte {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(168, 90, 74, 0.4);
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(168, 90, 74, 0);
  }
}

@keyframes pulsoSuave {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.captura-gravacao-status {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  flex: 1;
}

.captura-gravacao-tempo {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.captura-gravacao-parar {
  background-color: var(--color-critical);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.captura-gravacao-parar:hover {
  background-color: #8a4a3a;
}

/* ─────────────────────────────────────────
 * MODAL PÓS-CAPTURA
 * Aparece após captura por voz com sugestões do Claude.
 * ───────────────────────────────────────── */

.modal-pos-captura-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeInOverlay 200ms ease;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-pos-captura {
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 640px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUpModal 250ms ease;
}

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

.modal-pos-captura-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.modal-pos-captura-titulo {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-pos-captura-fechar {
  margin-left: auto;
  background: none;
  border: none;
  font-size: var(--text-2xl);
  color: var(--color-text-subtle);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-pos-captura-fechar:hover {
  color: var(--color-text-muted);
}

.modal-pos-captura-texto {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-primary-500);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  font-feature-settings: "ss01" on, "liga" on;
}

.modal-pos-captura-sugestoes {
  margin-bottom: var(--space-xl);
}

.modal-pos-captura-sugestoes h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-sm) 0;
}

.modal-pos-captura-sugestoes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.modal-pos-captura-sugestoes li {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.modal-pos-captura-sugestoes li strong {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  margin-right: var(--space-xs);
}

.modal-pos-captura-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.btn-primario-grande {
  width: 100%;
  padding: var(--space-md);
  background-color: var(--color-primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.btn-primario-grande:hover {
  background-color: var(--color-primary-700);
}

.modal-pos-captura-acoes .btn-secundario,
.modal-pos-captura-acoes .btn-terciario {
  background: none;
  border: 1px solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-pos-captura-acoes .btn-secundario:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.modal-pos-captura-acoes .btn-terciario {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.modal-pos-captura-acoes .btn-terciario:hover {
  color: var(--color-text-muted);
}

/* Badge "IA" para o header do modal */
.section-title-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-2xs, 0.65rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-700);
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  line-height: 1.4;
}

/* ─────────────────────────────────────────
 * MODAL PÓS-CAPTURA — VARIANTE MÚLTIPLA
 * Cards editáveis para N compromissos.
 * ───────────────────────────────────────── */

.modal-pos-captura--multiplo {
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-pos-captura-sugestoes-titulo {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-lg) 0 var(--space-md) 0;
  font-weight: var(--font-weight-semibold);
}

.compromissos-editaveis-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.compromisso-editavel-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: opacity 200ms ease;
}

.compromisso-editavel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.compromisso-editavel-numero {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-700);
  background-color: var(--color-primary-100);
  padding: 2px 8px;
  border-radius: 999px;
}

.compromisso-editavel-descartar {
  background: none;
  border: none;
  color: var(--color-text-subtle);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: 0 var(--space-xs);
  line-height: 1;
}

.compromisso-editavel-descartar:hover {
  color: var(--color-critical);
}

.compromisso-editavel-campo {
  margin-bottom: var(--space-sm);
}

.compromisso-editavel-campo label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.compromisso-editavel-campo input,
.compromisso-editavel-campo select {
  width: 100%;
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-sm);
}

.compromisso-editavel-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

/* ─────────────────────────────────────────
 * MINI-CARD DE COMPROMISSO
 * Usado na lista e nos partials _mini_card.
 * ───────────────────────────────────────── */

.compromisso-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  color: var(--color-text);
}

.compromisso-mini:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.compromisso-mini-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.compromisso-mini-titulo {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compromisso-mini-empresa {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.compromisso-mini-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.compromisso-mini-prazo {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.compromisso-mini-tipo {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.compromisso-mini--vencido {
  border-left: 3px solid var(--color-critical);
}

.compromisso-mini--vencido .compromisso-mini-prazo {
  color: var(--color-critical);
  font-weight: var(--font-weight-medium);
}

.compromisso-mini--concluido {
  opacity: 0.6;
}

.compromisso-mini--concluido .compromisso-mini-titulo {
  text-decoration: line-through;
}

/* form-select: selects fora de formulários (filtro, modal) */
.form-select {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-select:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(90, 122, 106, 0.12);
}


/* ─────────────────────────────────────────
 * RELATÓRIOS — Visualização e listagem
 * ───────────────────────────────────────── */

/* ── Cabeçalho do relatório ── */

.relatorio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-lg);
}

.relatorio-header-info {
  flex: 1;
  min-width: 0;
}

.relatorio-badge {
  display: inline-block;
  padding: 3px 10px;
  background-color: var(--color-primary-100, #e8f0ec);
  color: var(--color-primary-700, #2f5240);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.relatorio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: var(--space-sm);
}

.relatorio-header-acoes {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-xs);
  align-items: flex-start;
}

/* ── Corpo do relatório renderizado ── */

.relatorio-conteudo {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-2xl) 0 var(--space-3xl);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}

.relatorio-conteudo h1 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-xl) 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.relatorio-conteudo h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: var(--space-3xl) 0 var(--space-md) 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  line-height: 1.3;
}

.relatorio-conteudo h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: var(--space-xl) 0 var(--space-sm) 0;
  line-height: 1.4;
}

.relatorio-conteudo h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 var(--space-xs) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.relatorio-conteudo p {
  margin: 0 0 var(--space-md) 0;
}

.relatorio-conteudo ul,
.relatorio-conteudo ol {
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-xl);
}

.relatorio-conteudo li {
  margin-bottom: var(--space-xs);
  line-height: 1.65;
}

.relatorio-conteudo table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0 var(--space-lg) 0;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.relatorio-conteudo th {
  background-color: var(--color-surface);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border: 1px solid var(--color-border);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.relatorio-conteudo td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.relatorio-conteudo tr:nth-child(even) td {
  background-color: var(--color-surface);
}

.relatorio-conteudo blockquote {
  border-left: 3px solid var(--color-primary-500);
  padding-left: var(--space-md);
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-md) 0;
}

.relatorio-conteudo strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.relatorio-conteudo em {
  font-style: italic;
  color: var(--color-text-muted);
}

.relatorio-conteudo code {
  font-family: monospace;
  background-color: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.88em;
}

.relatorio-conteudo hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
}

/* ── Cards na lista de relatórios ── */

.relatorio-card {
  padding: var(--space-lg);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.relatorio-card:hover {
  border-color: var(--color-primary-500);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.relatorio-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.relatorio-card-titulo {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: var(--space-xs) 0;
}

.relatorio-card-empresa {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.relatorio-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* ── Cards de tipo (tela Novo relatório) ── */

.tipo-relatorio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

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

.tipo-relatorio-card {
  display: block;
  padding: var(--space-lg);
  background-color: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  user-select: none;
}

.tipo-relatorio-card:hover {
  border-color: var(--color-primary-500);
}

.tipo-relatorio-card.selecionado {
  border-color: var(--color-primary-500);
  background-color: var(--color-primary-50, #f0f5f2);
}

.tipo-relatorio-card input[type="radio"] {
  display: none;
}

.tipo-relatorio-sigla {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-700);
  margin-bottom: var(--space-xs);
}

.tipo-relatorio-nome {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

.tipo-relatorio-descricao {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ── Lacunas ── */

.lacuna-item {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-warning, #b89455);
  margin-bottom: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.campo-ok-item {
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.campo-ok-item::before {
  content: "OK ";
  color: var(--color-success, #7a8c6e);
  font-weight: var(--font-weight-semibold);
}