/* ============================================================
   META CONTABILIDADE · GESTÃO DE TAREFAS
   Folha de estilo — design minimalista corporativo
   Abordagem: Mobile-first · foco em contraste e legibilidade
   ============================================================ */

/* ---------- 1. Tokens de design (variáveis) ---------- */
:root {
  /* Paleta institucional Meta Contabilidade */
  --azul:          #1F4C8C;   /* cor principal — cabeçalhos, botões */
  --azul-claro:    #2E63A8;   /* hover de elementos azuis */
  --azul-escuro:   #163963;   /* rodapés, áreas de destaque */
  --verde:         #3DAE7C;   /* ações de sucesso / confirmação */
  --verde-escuro:  #2D8A60;   /* hover verde */

  /* Neutros */
  --tinta:         #1A2332;   /* texto principal */
  --cinza-texto:   #5A6478;   /* texto secundário */
  --linha:         #DCE3EC;   /* bordas e divisórias */
  --fundo:         #F4F6F9;   /* fundo da aplicação */
  --fundo-card:    #FFFFFF;   /* fundo de cartões */
  --fundo-alt:     #EEF2F7;   /* fundo alternado */

  /* Estados */
  --alerta:        #E8B04A;   /* prioridade média / avisos */
  --perigo:        #D6604D;   /* prioridade alta / erros / vencido */
  --critico:       #A4161A;   /* prioridade crítica */
  --info:          #2E63A8;

  /* Sombra suave (design corporativo discreto) */
  --sombra-sm: 0 1px 2px rgba(26, 35, 50, .06);
  --sombra-md: 0 4px 12px rgba(26, 35, 50, .10);
  --sombra-lg: 0 12px 32px rgba(26, 35, 50, .16);

  /* Métricas */
  --raio:      8px;
  --raio-lg:   14px;
  --transicao: 160ms ease;
}

/* ---------- 2. Reset e base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  min-height: 100vh;
}

[hidden] { display: none !important; }

button { font-family: inherit; cursor: pointer; }

a { color: var(--azul); }

/* ---------- 3. Componentes utilitários ---------- */

/* 3.1 Marca / logotipo */
.brand { display: flex; align-items: center; gap: 12px; }

.brand__mark {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--azul), var(--azul-escuro));
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  border-radius: var(--raio);
}

.brand__name { font-weight: 700; font-size: 1rem; color: var(--azul); line-height: 1.2; }
.brand__tagline { font-size: .76rem; color: var(--cinza-texto); }

/* 3.2 Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-size: .9rem;
  font-weight: 600;
  transition: background var(--transicao), border-color var(--transicao), opacity var(--transicao);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--azul); color: #fff; }
.btn--primary:hover { background: var(--azul-claro); }
.btn--success { background: var(--verde); color: #fff; }
.btn--success:hover { background: var(--verde-escuro); }
/* Botão verde do WhatsApp (relatório gerencial → CEO) */
.btn--whatsapp { background: #25D366; color: #fff; }
.btn--whatsapp:hover { background: #1da851; }
.btn--ghost { background: transparent; color: var(--cinza-texto); border-color: var(--linha); }
.btn--ghost:hover { background: var(--fundo-alt); color: var(--tinta); }
.btn--danger { background: transparent; color: var(--perigo); border-color: var(--linha); }
.btn--danger:hover { background: rgba(214, 96, 77, .08); border-color: var(--perigo); }
.btn--sm { padding: 6px 12px; font-size: .82rem; }
.btn--block { width: 100%; }

/* Link externo (Inter, Efí, Veri, Econet etc.) — herda btn--ghost e adiciona ↗ */
a.btn--ext { text-decoration: none; }
a.btn--ext::after {
  content: " ↗";
  font-size: .85em;
  opacity: .55;
  margin-left: 2px;
}
a.btn--ext:hover { background: var(--fundo-alt); color: var(--tinta); }
a.btn--ext:hover::after { opacity: .9; }

/* 3.3 Campos de formulário */
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { font-size: .82rem; font-weight: 600; color: var(--cinza-texto); }
.req { color: var(--perigo); }

.field__input {
  width: 100%;
  padding: 10px 12px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--tinta);
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.field__input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(31, 76, 140, .14);
}
textarea.field__input { resize: vertical; min-height: 64px; }

.field--inline { flex: 1; min-width: 150px; }

/* 3.4 Mensagens de formulário */
.form-message {
  font-size: .84rem;
  min-height: 18px;
  font-weight: 600;
}
.form-message--error { color: var(--perigo); }
.form-message--success { color: var(--verde-escuro); }

/* ---------- 4. Tela de autenticação ---------- */
.auth-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 100%);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--fundo-card);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  padding: 32px 28px;
}

.brand--auth { justify-content: center; margin-bottom: 24px; }

.auth-form__title { font-size: 1.3rem; color: var(--azul); margin-bottom: 6px; }
.auth-form__hint { font-size: .86rem; color: var(--cinza-texto); margin-bottom: 18px; }
.auth-form .field { margin-bottom: 14px; }
.auth-card__footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  font-size: .74rem;
  color: var(--cinza-texto);
  text-align: center;
}

/* 4.1 Caixa "manter conectado" no login */
.field--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.field--check .field__check {
  width: 16px;
  height: 16px;
  accent-color: var(--azul);
  cursor: pointer;
  flex-shrink: 0;
}
.field--check .field__check-label {
  font-size: .86rem;
  color: var(--cinza-texto);
  cursor: pointer;
  user-select: none;
}

/* ---------- 5. Estrutura da aplicação ---------- */
.app { display: flex; flex-direction: column; min-height: 100vh; }

/* 5.1 Cabeçalho */
.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--fundo-card);
  border-bottom: 1px solid var(--linha);
  box-shadow: var(--sombra-sm);
  position: sticky; top: 0; z-index: 20;
}

.main-nav {
  display: flex;
  gap: 4px;
  flex: 1;
}
.main-nav__item {
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: var(--raio);
  font-size: .88rem;
  font-weight: 600;
  color: var(--cinza-texto);
  transition: background var(--transicao), color var(--transicao);
}
.main-nav__item:hover { background: var(--fundo-alt); color: var(--tinta); }
.main-nav__item--active { background: var(--azul); color: #fff; }
.main-nav__item--active:hover { background: var(--azul-claro); color: #fff; }

.app-header__user { display: flex; align-items: center; gap: 10px; }

.user-chip { display: flex; align-items: center; gap: 8px; }
.user-chip__avatar {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  border-radius: 50%;
}
.user-chip__info { display: flex; flex-direction: column; line-height: 1.2; }
.user-chip__name { font-weight: 600; font-size: .86rem; }
.user-chip__role { font-size: .72rem; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: .04em; }

/* 5.2 Área principal */
.app-main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 20px; }

.view__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.view__title { font-size: 1.35rem; color: var(--azul); }
.view__subtitle { font-size: .85rem; color: var(--cinza-texto); margin-top: 2px; }

/* 5.3 Rodapé */
.app-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px;
  background: var(--azul-escuro);
  color: rgba(255, 255, 255, .78);
  font-size: .76rem;
}
.app-footer__version {
  color: rgba(255,255,255,.50);
  font-size: .68rem;
  font-family: 'Consolas', 'Monaco', monospace;
  cursor: help;
  letter-spacing: .3px;
}
.app-footer__version:hover { color: rgba(255,255,255,.85); }

/* ---------- 6. Barra de filtros ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 14px;
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  margin-bottom: 18px;
}

/* ---------- 7. Quadro Kanban ---------- */
.kanban {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.kanban-col {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.kanban-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 2px solid var(--linha);
}
.kanban-col__title {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kanban-col--pendente      .kanban-col__head { border-bottom-color: var(--cinza-texto); }
.kanban-col--processamento .kanban-col__head { border-bottom-color: var(--info); }
.kanban-col--aguardando    .kanban-col__head { border-bottom-color: var(--alerta); }
.kanban-col--concluido     .kanban-col__head { border-bottom-color: var(--verde); }

/* Botão "−" / "+" para recolher/expandir cada coluna do Kanban.
   Posição: aparece antes do título, dentro do cabeçalho da coluna. */
.kanban-col__toggle {
  border: 1px solid var(--linha);
  background: var(--fundo-card);
  color: var(--cinza-texto);
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  margin-right: 8px;
  transition: background var(--transicao), color var(--transicao);
}
.kanban-col__toggle:hover { background: var(--fundo-alt); color: var(--tinta); }

/* Coluna recolhida: corpo somem, cabeçalho fica mais compacto. */
.kanban-col.is-collapsed              { min-height: 0; }
.kanban-col.is-collapsed .kanban-col__body { display: none; }
.kanban-col.is-collapsed .kanban-col__head { padding: 8px 12px; }

.kanban-col__count {
  background: var(--fundo-alt);
  color: var(--cinza-texto);
  font-size: .76rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}
.kanban-col__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
/* Realce visual quando um cartão é arrastado sobre a coluna */
.kanban-col__body.is-drop-target {
  background: rgba(31, 76, 140, .05);
  outline: 2px dashed var(--azul);
  outline-offset: -6px;
  border-radius: var(--raio);
}
.kanban-col__empty {
  font-size: .82rem;
  color: var(--cinza-texto);
  text-align: center;
  padding: 24px 8px;
}

/* 7.1 Cartão de tarefa */
.task-card {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px;
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.task-card:hover { box-shadow: var(--sombra-md); }
.task-card--draggable { cursor: grab; }
.task-card--draggable:active { cursor: grabbing; }
.task-card.is-dragging { opacity: .5; }
/* Indica, durante o arraste, onde o cartão vai cair */
.task-card.drop-marker { box-shadow: 0 -3px 0 0 var(--azul); }

.task-card--prio-critica { border-left-color: var(--critico); }
.task-card--prio-alta  { border-left-color: var(--perigo); }
.task-card--prio-media { border-left-color: var(--alerta); }
.task-card--prio-baixa { border-left-color: var(--verde); }

.task-card__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2px;
}
.task-card__number {
  font-size: .72rem;
  font-weight: 700;
  color: var(--cinza-texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}
.task-card__client { font-weight: 700; font-size: .92rem; }
.task-card__desc {
  font-size: .84rem;
  color: var(--cinza-texto);
  margin: 4px 0 8px;
  word-break: break-word;
}
.task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* 7.2 Etiquetas (badges) */
.badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge--critica { background: var(--critico); color: #fff; }
.badge--alta  { background: rgba(214, 96, 77, .14); color: var(--perigo); }
.badge--media { background: rgba(232, 176, 74, .20); color: #9a6b14; }
.badge--baixa { background: rgba(61, 174, 124, .16); color: var(--verde-escuro); }
.badge--due   { background: var(--fundo-alt); color: var(--cinza-texto); }
.badge--due-late { background: var(--perigo); color: #fff; }
.badge--recurrence { background: rgba(46,99,168,.14); color: var(--azul-claro); }
.badge--waiting    { background: rgba(232, 176, 74, .20); color: #9a6b14; }
/* Cronômetro de tempo de trabalho no cartão. badge--work-live pulsa
   suavemente para indicar que está contando ao vivo (status=processamento). */
.badge--work       { background: rgba(46,99,168,.10); color: var(--azul); font-variant-numeric: tabular-nums; }
.badge--work-live  {
  background: rgba(46,99,168,.18);
  color: var(--azul);
  position: relative;
  padding-left: 18px;
}
.badge--work-live::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
  animation: meta-pulse 1.8s ease-in-out infinite;
}
@keyframes meta-pulse {
  0%, 100% { opacity: .35; transform: translateY(-50%) scale(0.85); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.15); }
}

.task-card__assignee {
  font-size: .76rem;
  color: var(--cinza-texto);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-card__start {
  width: 100%;
  margin-top: 10px;
}
.task-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}
.task-card__actions select {
  flex: 1;
  padding: 5px 8px;
  font-size: .78rem;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--fundo-card);
  color: var(--tinta);
}
.icon-btn {
  border: 1px solid var(--linha);
  background: var(--fundo-card);
  border-radius: 6px;
  width: 30px; height: 30px;
  font-size: .85rem;
  color: var(--cinza-texto);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transicao), color var(--transicao);
}
.icon-btn:hover { background: var(--fundo-alt); color: var(--tinta); }
.icon-btn--danger:hover { background: rgba(214, 96, 77, .10); color: var(--perigo); }

/* ---------- 8. Tabela de dados (usuários) ---------- */
.table-wrap {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  overflow-x: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--fundo-alt);
  color: var(--cinza-texto);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--linha);
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.data-table tr:last-child td { border-bottom: none; }
.data-table__actions { text-align: right; white-space: nowrap; }

.role-tag {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.role-tag--master           { background: rgba(31, 76, 140, .14);  color: var(--azul); }
.role-tag--ceo              { background: rgba(22, 57, 99, .14);   color: var(--azul-escuro); }
.role-tag--consultor        { background: rgba(107, 114, 128, .14); color: #4B5563; }
/* Coordenadores — verde escuro */
.role-tag--coord_fiscal,
.role-tag--coord_pessoal,
.role-tag--coord_atendimento,
.role-tag--coord_tecnologia,
.role-tag--coord_marketing  { background: rgba(61, 174, 124, .16); color: var(--verde-escuro); }
/* Departamentos — cinza neutro */
.role-tag--dept_fiscal,
.role-tag--dept_pessoal,
.role-tag--dept_administrativo { background: var(--fundo-alt); color: var(--cinza-texto); }
/* Setores únicos */
.role-tag--financeiro       { background: rgba(232, 176, 74, .20); color: #9A7320; }
.role-tag--comercial        { background: rgba(99, 102, 241, .14); color: #4338CA; }
/* Legados */
.role-tag--gestor           { background: rgba(61, 174, 124, .12); color: #4B7B5F; }
.role-tag--analista         { background: var(--fundo-alt);        color: var(--cinza-texto); }

/* Usuário desabilitado — badge vermelho + linha em cinza */
.role-tag--disabled {
  background: rgba(214, 96, 77, .15);
  color: var(--perigo);
  text-transform: none;
  font-weight: 600;
}
tr.row-disabled {
  background: rgba(243, 244, 246, .6) !important;
  color: var(--cinza-texto);
}
tr.row-disabled td { opacity: .8; }
tr.row-disabled td:first-child { font-style: italic; }

/* Checkbox de "Desabilitar usuário" no form */
.field--check {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(214, 96, 77, .05);
  border: 1px dashed rgba(214, 96, 77, .35);
  border-radius: var(--raio);
}
.field--check input[type="checkbox"] {
  margin-top: 4px;
  width: 18px; height: 18px;
  accent-color: var(--perigo);
  cursor: pointer;
}

/* ---------- Painel "Custo por Setor" (só Master) ---------- */
.sector-cost {
  background: linear-gradient(135deg, #FEF3C7 0%, #FFF7ED 100%);
  border: 1px solid #FCD34D;
  border-radius: var(--raio);
  padding: 14px 18px 18px;
  margin-bottom: 18px;
}
.sector-cost__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.sector-cost__title {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: #92400E;
}
.sector-cost__hint {
  font-size: .78rem; color: #92400E; font-weight: 600;
}
.sector-cost__table { background: rgba(255,255,255,.7); }
.sector-cost__table tfoot td {
  background: rgba(146, 64, 14, .08);
  font-weight: 700;
}

/* Aba Auditoria — listagem por período */
.audit-period { margin-bottom: 28px; }
.audit-period__title {
  font-size: 1rem; font-weight: 700;
  color: var(--azul);
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--fundo-alt);
  border-left: 4px solid var(--azul);
  border-radius: 4px;
}
.audit-table th { background: var(--azul); color: #fff; }
.audit-table td { vertical-align: middle; }

/* Cofre — estado bloqueado do painel Custo por Setor */
.sector-cost__locked {
  background: rgba(255,255,255,.7);
  border: 1px dashed #FCD34D;
  border-radius: var(--raio);
  padding: 14px 16px;
}
.sector-cost__form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
.sector-cost__form .field__input { background: #fff; }

/* ---------- 9. Modais ---------- */
.modal {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(22, 57, 99, .55);
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--fundo-card);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linha);
}
.modal__title { font-size: 1.1rem; color: var(--azul); }
.modal__close {
  border: none; background: transparent;
  font-size: 1.5rem; line-height: 1;
  color: var(--cinza-texto);
  width: 32px; height: 32px;
  border-radius: 6px;
}
.modal__close:hover { background: var(--fundo-alt); color: var(--tinta); }
.modal__body { padding: 20px; }
.modal__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field--full { grid-column: 1 / -1; }

/* ---------- 10. Notificações (toasts) ---------- */
.toast-container {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 80;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--fundo-card);
  border-left: 4px solid var(--azul);
  border-radius: var(--raio);
  box-shadow: var(--sombra-md);
  padding: 12px 16px;
  font-size: .86rem;
  font-weight: 600;
  min-width: 220px;
  max-width: 320px;
  animation: toast-in 220ms ease;
}
.toast--success { border-left-color: var(--verde); }
.toast--error   { border-left-color: var(--perigo); }
.toast--info    { border-left-color: var(--info); }
/* Aviso de nova tarefa — destaque dourado, pulso de atenção e
   cursor de clique (o toast pode ser dispensado com um clique). */
.toast--notify {
  border-left-color: var(--alerta);
  border-left-width: 5px;
  background: #FFFCF4;
  color: var(--azul-escuro);
  cursor: pointer;
  animation: toast-in 220ms ease, toast-pulse 1.6s ease-in-out 2;
}
.toast.is-leaving { animation: toast-out 220ms ease forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }
@keyframes toast-pulse {
  0%, 100% { box-shadow: var(--sombra-md); }
  50%      { box-shadow: 0 4px 16px rgba(232, 176, 74, .55); }
}

/* ---------- 12. Componentes adicionais ---------- */

/* 12.1 Ações no cabeçalho da visão */
.view__head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 12.2 Banner de alerta de prazos */
.deadline-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--raio);
  margin-bottom: 16px;
  font-size: .88rem;
  font-weight: 600;
  border: 1px solid;
}
.deadline-alert--danger {
  background: rgba(214, 96, 77, .08);
  border-color: rgba(214, 96, 77, .35);
  color: #9a3526;
}
.deadline-alert--warning {
  background: rgba(232, 176, 74, .12);
  border-color: rgba(232, 176, 74, .45);
  color: #8a5e10;
}
.deadline-alert--ok {
  background: rgba(61, 174, 124, .10);
  border-color: rgba(61, 174, 124, .35);
  color: var(--verde-escuro);
}
.deadline-alert__count {
  font-weight: 800;
  font-size: 1rem;
}

/* 12.3 Painel genérico (backup, relatórios) */
.panel {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: 18px;
  margin-top: 16px;
}
.panel__title {
  font-size: .95rem;
  color: var(--azul);
  margin-bottom: 6px;
}
.panel__hint {
  font-size: .82rem;
  color: var(--cinza-texto);
  margin-bottom: 12px;
}
.panel__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 12.4 Indicadores (KPIs) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.kpi-card {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--azul);
  border-radius: var(--raio);
  padding: 14px 16px;
}
.kpi-card--success { border-top-color: var(--verde); }
.kpi-card--warning { border-top-color: var(--alerta); }
.kpi-card--waiting { border-top-color: var(--alerta); }
.kpi-card--danger  { border-top-color: var(--perigo); }
.kpi-card__value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--azul);
  line-height: 1;
}
.kpi-card--success .kpi-card__value { color: var(--verde-escuro); }
.kpi-card--warning .kpi-card__value { color: #8a5e10; }
.kpi-card--waiting .kpi-card__value { color: #8a5e10; }
.kpi-card--danger  .kpi-card__value { color: var(--perigo); }
.kpi-card__label {
  font-size: .78rem;
  color: var(--cinza-texto);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* 12.5 Lista de barras (carga por responsável) */
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: .84rem;
}
.bar-row__name { font-weight: 600; }
.bar-row__track {
  background: var(--fundo-alt);
  border-radius: 999px;
  height: 16px;
  overflow: hidden;
}
.bar-row__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--azul), var(--azul-claro));
  border-radius: 999px;
  min-width: 2px;
}
.bar-row__value { font-weight: 700; text-align: right; color: var(--azul); }

/* 12.6 Log de auditoria */
.audit-log {
  list-style: none;
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
}
.audit-log__item {
  display: flex;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--linha);
  font-size: .82rem;
}
.audit-log__item:last-child { border-bottom: none; }
.audit-log__time {
  color: var(--cinza-texto);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.audit-log__text { flex: 1; }
.audit-log__user { font-weight: 700; color: var(--azul); }
.audit-log__empty { color: var(--cinza-texto); font-size: .84rem; padding: 12px 0; }

/* 12.7 Lista de obrigações fiscais (modal) */
.fiscal-obligations {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
  margin: 14px 0;
}
.fiscal-obligations legend {
  font-size: .82rem;
  font-weight: 700;
  color: var(--cinza-texto);
  padding: 0 6px;
}
.fiscal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: .86rem;
}
.fiscal-item input { width: 16px; height: 16px; }
.fiscal-item__tag {
  font-size: .72rem;
  color: var(--cinza-texto);
}

/* 12.8 Barra de exclusão em massa (Master) */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: rgba(214, 96, 77, .06);
  border: 1px solid rgba(214, 96, 77, .30);
  border-radius: var(--raio);
}
.bulk-bar__label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--perigo);
  margin-right: auto;
}

/* 12.9 Relógio do cabeçalho */
.header-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  padding-right: 4px;
}
.header-clock__date {
  font-size: .72rem;
  color: var(--cinza-texto);
  text-transform: capitalize;
}
.header-clock__time {
  font-size: .95rem;
  font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

/* 12.10 Painel de gamificação */
.gamification {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: linear-gradient(120deg, rgba(31,76,140,.06), rgba(61,174,124,.10));
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
}
.gamification__icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.gamification__body { flex: 1; min-width: 0; }
.gamification__line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.gamification__line strong {
  font-size: 1rem;
  color: var(--azul);
}
.gamification__line span {
  font-size: .82rem;
  color: var(--cinza-texto);
}
.gamification__bar {
  height: 8px;
  background: var(--fundo-alt);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 4px;
}
.gamification__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--verde), var(--verde-escuro));
  border-radius: 999px;
  transition: width .5s ease;
}
.gamification__next {
  font-size: .76rem;
  color: var(--cinza-texto);
}

/* 12.11 Gestão de setores */
.sectors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: .84rem;
  font-weight: 600;
}
.sector-chip button {
  border: none;
  background: transparent;
  color: var(--cinza-texto);
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: .9rem;
  line-height: 1;
}
.sector-chip button:hover { background: rgba(214,96,77,.14); color: var(--perigo); }
.sectors-add {
  display: flex;
  gap: 8px;
  max-width: 420px;
}
.sectors-add .field__input { flex: 1; }

/* 12.12 Confete da celebração */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

/* ---------- 11. Responsividade (Mobile-first → telas maiores) ---------- */

/* Tablet: a partir de 680px — 2 colunas (4 colunas só apertaria demais) */
@media (min-width: 680px) {
  .kanban { grid-template-columns: repeat(2, 1fr); align-items: start; }
}

/* Desktop largo: 4 colunas lado a lado (Pendente, Em Proc, Aguardando, Concluído) */
@media (min-width: 1180px) {
  .kanban { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop: ajustes de respiro a partir de 1024px */
@media (min-width: 1024px) {
  body { font-size: 15px; }
  .app-main { padding: 28px; }
}

/* Telas pequenas: empilha cabeçalho e formulários */
@media (max-width: 679px) {
  .app-header { gap: 10px; }
  .main-nav { order: 3; width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .view__head { flex-direction: column; }
  .filters { flex-direction: column; align-items: stretch; }
  .field--inline { min-width: 0; }
}

/* ============================================================
   13. PWA — aplicativo instalável, modo offline e ajustes mobile
   ============================================================ */

/* 13.1 Faixa de modo offline (inserida no topo da aplicação) */
.offline-banner {
  background: var(--alerta);
  color: #4A3206;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  padding: 9px 14px;
  line-height: 1.35;
}

/* 13.2 Botão flutuante "Instalar aplicativo" */
.install-app-btn {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: none;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  box-shadow: var(--sombra-lg);
  cursor: pointer;
  transition: background var(--transicao);
}
.install-app-btn:hover { background: var(--azul-claro); }
.install-app-btn[hidden] { display: none; }

/* 13.2b Botão de notificações push (cabeçalho) */
.notif-btn {
  background: transparent;
  color: var(--cinza-texto);
  border-color: var(--linha);
}
.notif-btn:hover { background: var(--fundo-alt); color: var(--tinta); }
.notif-btn[hidden] { display: none; }
.notif-btn__icon { font-size: 1em; line-height: 1; }
/* Estado "disponível": convida o usuário a ativar os avisos */
.notif-btn--on {
  background: rgba(31, 76, 140, .09);
  color: var(--azul);
  border-color: rgba(31, 76, 140, .38);
}
.notif-btn--on:hover { background: rgba(31, 76, 140, .15); color: var(--azul); }
/* Estado "ativado": avisos já ligados neste aparelho */
.notif-btn--active {
  background: rgba(61, 174, 124, .11);
  color: var(--verde-escuro);
  border-color: rgba(61, 174, 124, .42);
}
.notif-btn--active:hover { background: rgba(61, 174, 124, .17); color: var(--verde-escuro); }

/* 13.3 Dica de instalação no iOS (Safari não tem instalação automática) */
.ios-install-hint {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--azul-escuro);
  color: #fff;
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
  font-size: .82rem;
  line-height: 1.4;
}
.ios-install-hint strong { color: var(--alerta); }
.ios-install-hint button {
  flex-shrink: 0;
  border: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- 12.5 Histórico da tarefa (Timeline + Tempos) ----------
   Aparece no rodapé do modal de edição. Mostra:
   - Dois "cards de tempo" no topo (total e em processamento)
   - Caixa para escrever comentário manual + botão
   - Timeline (eventos do mais recente pro mais antigo) */
.task-history {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}
.task-history__title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--tinta);
  margin: 12px 0 8px;
}
.task-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.time-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--fundo-alt);
  border-radius: var(--raio);
  border-left: 3px solid var(--cinza-texto);
}
.time-card--accent { border-left-color: var(--info); }
.time-card__label {
  font-size: .72rem;
  color: var(--cinza-texto);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.time-card__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.task-comment-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.task-comment-box .field__input { width: 100%; }
.task-comment-box .btn { align-self: flex-end; }

.task-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.task-timeline__loading,
.task-timeline__empty,
.task-timeline__error {
  font-size: .82rem;
  color: var(--cinza-texto);
  text-align: center;
  padding: 14px 8px;
  margin: 0;
}
.task-timeline__error { color: var(--perigo); }

.task-event {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.task-event__icon {
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
}
.task-event__body { min-width: 0; }
.task-event__text {
  font-size: .86rem;
  color: var(--tinta);
  word-break: break-word;
}
.task-event__text b { color: var(--azul); font-weight: 700; }
.task-event__comment {
  display: block;
  margin-top: 2px;
  white-space: pre-wrap;
  color: var(--cinza-texto);
  font-style: italic;
}
.task-event__meta {
  font-size: .72rem;
  color: var(--cinza-texto);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.task-event--created      { border-left: 3px solid var(--info); }
.task-event--status_change { border-left: 3px solid var(--alerta); }
.task-event--comment      { border-left: 3px solid var(--verde); }
.task-event--priority_change,
.task-event--assignee_change { border-left: 3px solid var(--cinza-texto); }

/* Mobile: cards de tempo empilhados */
@media (max-width: 679px) {
  .task-times { grid-template-columns: 1fr; }
}

/* 13.4 Áreas seguras (notch / barra inferior) — viewport-fit=cover */
.app-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.app-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

/* 13.5 Refinamentos para celular */
@media (max-width: 679px) {
  .app-main { padding: 14px; }

  /* Cabeçalho mais compacto */
  .app-header { gap: 8px 10px; padding-left: 14px; padding-right: 14px; }
  .brand__tagline { display: none; }
  .header-clock { display: none; }
  .user-chip__name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Notificações: no celular mostra só o sino, para poupar espaço */
  .notif-btn__label { display: none; }
  .notif-btn { padding-left: 10px; padding-right: 10px; }

  /* Navegação vira uma faixa rolável na horizontal */
  .main-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav__item { white-space: nowrap; flex-shrink: 0; }

  /* Alvos de toque mais confortáveis */
  .btn { min-height: 42px; }
  .btn--sm { min-height: 36px; }

  /* Modais ocupam melhor a tela pequena (folha inferior) */
  .modal { padding: 0; align-items: flex-end; }
  .modal__panel {
    max-width: 100%;
    max-height: 94vh;
    border-radius: 14px 14px 0 0;
  }
  .modal__body { padding: 16px; }
}

/* ============================================================
   18. PAINÉIS LATERAIS — Agenda (esquerda) + Anotações (direita)
   Layout 3-colunas em torno do <main>. Em telas estreitas os
   painéis somem (≤ 1366px) e o miolo volta ao layout normal.
   ============================================================ */
.app-shell-3col {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  align-items: start;
  gap: 16px;
  padding: 0 12px;
  max-width: 1820px;
  margin: 0 auto;
  width: 100%;
}
/* Layout adapta quando user oculta sidebars.
   Fixamos a coluna de cada filho EXPLICITAMENTE: sem isso, quando uma
   sidebar fica display:none, o auto-placement do grid joga o restante
   pras colunas erradas e o conteúdo principal fica esmagado em 40px. */
.app-shell-3col > #side-agenda  { grid-column: 1 / 2; }
.app-shell-3col > .app-main     { grid-column: 2 / 3; }
.app-shell-3col > #side-postits { grid-column: 3 / 4; }

body.no-agenda  .app-shell-3col { grid-template-columns: 0 minmax(0,1fr) 260px; gap: 0 16px; }
body.no-agenda  #side-agenda    { display: none; }
body.no-postits .app-shell-3col { grid-template-columns: 260px minmax(0,1fr) 0; gap: 16px 0; }
body.no-postits #side-postits   { display: none; }
body.no-agenda.no-postits .app-shell-3col { grid-template-columns: 0 minmax(0,1fr) 0; gap: 0; }
/* Main expande quando alguma sidebar foi escondida */
body.no-agenda  .app-shell-3col > .app-main,
body.no-postits .app-shell-3col > .app-main { max-width: 100%; padding: 20px; }

/* Botões de toggle no header */
.layout-toggle {
  font-size: 13px;
  padding: 4px 8px;
  min-width: 32px;
  opacity: .55;
  transition: opacity .15s;
}
.layout-toggle:hover { opacity: 1; }
.layout-toggle[aria-pressed="true"] { opacity: 1; }
.layout-toggle[aria-pressed="false"] {
  opacity: .35;
  text-decoration: line-through;
  text-decoration-color: var(--perigo);
}
.app-shell-3col > .app-main { max-width: 1280px; margin: 0 auto; padding: 20px 12px; }

.side-panel {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  display: flex; flex-direction: column;
  overflow: hidden;
  margin-top: 20px;
}
.side-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-claro) 100%);
  color: #fff;
  flex: 0 0 auto;
}
.side-panel__head h3 {
  font-size: 13px; color: #fff; font-weight: 700;
  margin: 0; letter-spacing: 0.02em;
}
.side-panel__head .side-actions { display: flex; gap: 6px; align-items: center; }
.side-panel__head button {
  background: rgba(255,255,255,.18); color: #fff;
  border: none; cursor: pointer; font-family: inherit;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.side-panel__head button:hover { background: rgba(255,255,255,.34); }
.side-panel__body { padding: 12px; overflow-y: auto; flex: 1 1 auto; }
.side-panel__body::-webkit-scrollbar { width: 6px; }
.side-panel__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }

/* Mini-calendário */
.mini-cal-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.mini-cal-title {
  font-size: 13px; font-weight: 700;
  color: var(--azul); text-transform: capitalize;
  flex: 1; text-align: center;
}
.mini-cal-nav button {
  background: var(--fundo); color: var(--tinta); border: none;
  width: 24px; height: 24px; border-radius: 6px;
  cursor: pointer; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.mini-cal-nav button:hover { background: var(--azul); color: #fff; }
.mini-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; margin-bottom: 10px;
}
.mini-cal-dow {
  text-align: center; padding: 3px 0;
  font-size: 9px; font-weight: 700;
  color: var(--cinza-texto);
  text-transform: uppercase;
}
.mini-cal-cell {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  border-radius: 6px;
  background: var(--fundo);
  color: var(--tinta);
  cursor: pointer;
  position: relative;
  transition: background .15s, color .15s;
}
.mini-cal-cell:hover { background: rgba(31,76,140,.18); }
.mini-cal-cell.other-month { opacity: .35; }
.mini-cal-cell.is-today    { background: var(--azul); color: #fff; }
.mini-cal-cell.has-task::after {
  content: ""; position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--verde);
}
.mini-cal-cell.has-overdue::after { background: var(--perigo); }
.mini-cal-cell.has-reminder::after { background: var(--alerta); }
.mini-cal-cell.selected { outline: 2px solid var(--verde); outline-offset: -1px; }

.mini-cal-day {
  border-top: 1px dashed var(--linha);
  padding-top: 8px;
}
.mini-cal-day-title {
  font-size: 11px; font-weight: 700; color: var(--azul);
  margin-bottom: 6px; text-transform: capitalize;
}
.mini-cal-item {
  display: block; padding: 5px 8px;
  background: var(--fundo); border-radius: 6px;
  margin-bottom: 4px; font-size: 11px;
  border-left: 3px solid var(--azul);
  color: var(--tinta); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-cal-item.overdue   { border-left-color: var(--perigo);  background: rgba(214,96,77,.10); }
.mini-cal-item.completed { border-left-color: var(--verde);   opacity: .65; text-decoration: line-through; }
.mini-cal-item.reminder  { border-left-color: var(--alerta);  background: rgba(232,176,74,.14); }
.mini-cal-empty {
  font-size: 11px; color: var(--cinza-texto);
  padding: 8px 4px; text-align: center; font-style: italic;
}
.mini-cal-add-reminder {
  display: flex; gap: 4px; margin-top: 8px;
}
.mini-cal-add-reminder input {
  flex: 1; padding: 6px 8px; font-size: 11px;
  border: 1px solid var(--linha); border-radius: 6px;
  background: #fff; font-family: inherit;
}
.mini-cal-add-reminder button {
  background: var(--verde); color: #fff; border: none;
  padding: 0 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.mini-cal-add-reminder button:hover { background: var(--verde-escuro); }

/* Mini post-its */
.mini-postit-board { display: flex; flex-direction: column; gap: 10px; }
.mini-postit {
  background: #fff9a5;
  padding: 10px 12px 24px;
  border-radius: 2px 10px 2px 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  transform: rotate(-1deg);
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.mini-postit:nth-child(3n+2) { transform: rotate(1deg);  background: #ffe48a; }
.mini-postit:nth-child(3n+3) { transform: rotate(-2deg); background: #b8ecd5; }
.mini-postit:nth-child(4n)   { transform: rotate(2deg);  background: #ffc4d6; }
.mini-postit:nth-child(5n)   { transform: rotate(-1deg); background: #aee2ff; }
.mini-postit:hover { transform: rotate(0); z-index: 2; box-shadow: 0 6px 14px rgba(0,0,0,.16); }
.mini-postit textarea {
  width: 100%; min-height: 56px;
  background: transparent; border: none;
  resize: vertical; outline: none;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--tinta); line-height: 1.4;
}
.mini-postit-footer {
  position: absolute; bottom: 3px; left: 10px; right: 8px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px; color: rgba(0,0,0,.45);
}
.mini-postit-del {
  background: transparent; border: none;
  cursor: pointer; font-size: 11px;
  padding: 1px 5px; border-radius: 4px;
  color: rgba(0,0,0,.4);
}
.mini-postit-del:hover { background: rgba(0,0,0,.12); color: var(--perigo); }
.mini-postit-empty {
  font-size: 11px; color: var(--cinza-texto);
  padding: 14px 10px; text-align: center;
  background: rgba(255,255,255,.55);
  border: 2px dashed rgba(0,0,0,.18);
  border-radius: 10px;
  line-height: 1.4;
}

/* ===== Mini post-it tipo LISTA (estilo Keep) ===== */
.mini-postit--list { padding: 8px 12px 24px; }
.mini-postit-title {
  width: 100%;
  background: transparent;
  border: none; outline: none;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--tinta);
  padding: 2px 0 6px;
  border-bottom: 1px dashed rgba(0,0,0,.15);
  margin-bottom: 6px;
}
.mini-postit-title::placeholder { color: rgba(0,0,0,.35); font-weight: 600; }
.mini-postit-items { display: flex; flex-direction: column; gap: 2px; }
.mini-postit-li {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0;
}
.mini-postit-li input[type="checkbox"] {
  margin: 0; flex: 0 0 auto;
  width: 14px; height: 14px;
  accent-color: #1F4C8C;
  cursor: pointer;
}
.mini-postit-li-text {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: none; outline: none;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 12px; color: var(--tinta);
  line-height: 1.3; padding: 1px 2px;
}
.mini-postit-li-text::placeholder { color: rgba(0,0,0,.35); }
.mini-postit-li.is-done .mini-postit-li-text {
  text-decoration: line-through;
  color: rgba(0,0,0,.45);
}
.mini-postit-li-del {
  flex: 0 0 auto;
  background: transparent; border: none;
  cursor: pointer;
  font-size: 14px; line-height: 1;
  color: rgba(0,0,0,.35);
  padding: 0 4px; border-radius: 4px;
  visibility: hidden;
}
.mini-postit-li:hover .mini-postit-li-del { visibility: visible; }
.mini-postit-li-del:hover { color: var(--perigo); background: rgba(0,0,0,.06); }

/* Linha "Adicionar item" */
.mini-postit-add-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; padding-top: 4px;
  border-top: 1px dashed rgba(0,0,0,.12);
}
.mini-postit-add-plus {
  font-weight: 700; color: rgba(0,0,0,.45);
  width: 14px; text-align: center;
  flex: 0 0 auto;
}
.mini-postit-add-item {
  flex: 1 1 auto;
  background: transparent; border: none; outline: none;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 12px; color: var(--tinta);
  padding: 2px 0;
}
.mini-postit-add-item::placeholder { color: rgba(0,0,0,.35); font-style: italic; }

/* Botão ☑ de criar lista (lado a lado com o +) */
#mini-postit-add-list {
  background: transparent; border: 1px solid rgba(255,255,255,.4);
  color: #fff; cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px; font-size: 14px;
  margin-left: 4px;
  transition: background .15s;
}
#mini-postit-add-list:hover { background: rgba(255,255,255,.18); }

/* Telas estreitas: esconde os painéis (o usuário usa o app normalmente) */
@media (max-width: 1366px) {
  .app-shell-3col {
    grid-template-columns: 1fr;
    padding: 0;
    max-width: none;
  }
  .app-shell-3col > .app-main { max-width: 1280px; padding: 20px; }
  .side-panel { display: none; }
}

/* ============================================================
   19. PAINEL COMERCIAL — CRM (leads + propostas)
   ============================================================ */
.cmc-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.cmc-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* KPIs */
.cmc-kpis {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.cmc-kpi {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra-sm);
}
.cmc-kpi__label { font-size: 11px; color: var(--cinza-texto); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.cmc-kpi__value { font-size: 22px; font-weight: 700; color: var(--azul); margin-top: 4px; }
.cmc-kpi__hint  { font-size: 11px; color: var(--cinza-texto); margin-top: 4px; }

/* Abas */
.cmc-tabs {
  display: flex; gap: 4px; border-bottom: 2px solid var(--linha);
  margin-bottom: 14px;
}
.cmc-tab {
  background: transparent; border: none;
  padding: 10px 16px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--cinza-texto);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.cmc-tab:hover { color: var(--azul); }
.cmc-tab--active { color: var(--azul); border-bottom-color: var(--azul); }

.cmc-filters {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; align-items: flex-end;
}

/* Kanban — swimlanes (Comercial + Ativação + Encerramento) */
.cmc-kanban {
  display: flex; flex-direction: column; gap: 16px;
}
.cmc-swimlane {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
}
.cmc-swimlane__title {
  font-size: 12px; font-weight: 700; color: var(--azul);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px dashed var(--linha);
  display: flex; justify-content: space-between; align-items: center;
}
.cmc-swimlane__cols {
  display: grid; gap: 8px;
}
.cmc-swimlane__cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cmc-swimlane__cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cmc-swimlane__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* === Card de importação de planilha (aba Ferramentas) === */
.cmc-import-card {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--verde);
  border-radius: var(--raio-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--sombra-sm);
}
.cmc-import-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 10px;
}
.cmc-import-card__head h3 { color: var(--azul); font-size: 15px; margin-bottom: 4px; }
.cmc-import-card__head p { font-size: 12px; color: var(--cinza-texto); line-height: 1.5; margin: 0; }
.cmc-import-card__hint {
  font-size: 11px; color: var(--cinza-texto);
  padding-top: 8px; border-top: 1px dashed var(--linha);
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.cmc-import-card__hint a {
  color: var(--azul); font-weight: 700; text-decoration: none;
  padding: 2px 8px; background: rgba(31,76,140,.08); border-radius: 4px;
}
.cmc-import-card__hint a:hover { background: rgba(31,76,140,.18); }

/* === Modal de importação === */
#cmc-import-modal.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 16px;
}
#cmc-import-modal[hidden] { display: none !important; }

.cmc-import-step { padding: 8px 0; }
.cmc-import-drop {
  border: 2px dashed var(--linha);
  border-radius: var(--raio-lg);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cmc-import-drop:hover, .cmc-import-drop.dragover {
  border-color: var(--azul);
  background: rgba(31,76,140,.05);
}
.cmc-import-drop__icon { font-size: 48px; margin-bottom: 12px; }
.cmc-import-drop__title { font-size: 15px; font-weight: 700; color: var(--azul); margin-bottom: 8px; }
.cmc-import-drop__hint { font-size: 12px; color: var(--cinza-texto); line-height: 1.5; max-width: 500px; margin: 0 auto; }

.cmc-import-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
  font-size: 12px;
}
.cmc-import-table-wrap {
  max-height: 50vh; overflow: auto;
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.cmc-import-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.cmc-import-table th {
  position: sticky; top: 0; background: var(--fundo); z-index: 1;
  padding: 8px 10px; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--cinza-texto); border-bottom: 1px solid var(--linha);
}
.cmc-import-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
.cmc-import-table tr:hover { background: rgba(31,76,140,.04); }

.cmc-import-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 14px; flex-wrap: wrap;
}
.cmc-import-disc {
  font-size: 11px; color: var(--cinza-texto); font-style: italic;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linha);
}

/* Botão de sync com Efí */
.cmc-sync-btn {
  background: var(--verde); color: #fff;
  border: none; padding: 4px 10px;
  border-radius: 6px; font-size: 11px; font-weight: 700;
  cursor: pointer; text-transform: none; letter-spacing: 0;
  font-family: inherit;
}
.cmc-sync-btn:hover { background: var(--verde-escuro); }
.cmc-sync-btn:disabled { opacity: .6; cursor: wait; }
.cmc-col {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  display: flex; flex-direction: column;
  min-height: 240px;
}
.cmc-col__head {
  padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--linha);
  background: var(--fundo-card);
  border-radius: var(--raio) var(--raio) 0 0;
}
.cmc-col__title { font-size: 13px; font-weight: 700; color: var(--azul); flex: 1 1 auto; min-width: 0; }
.cmc-col__count {
  background: var(--azul); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 700;
}
/* Botão minimizar/expandir coluna do pipeline */
.cmc-col__toggle {
  background: transparent; border: 1px solid var(--linha);
  border-radius: 6px; color: var(--cinza-texto);
  width: 22px; height: 22px; line-height: 1;
  font-size: 16px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.cmc-col__toggle:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.cmc-col--won .cmc-col__title { color: var(--verde); }
.cmc-col--won .cmc-col__count { background: var(--verde); }
.cmc-col--lost .cmc-col__title { color: var(--perigo); }
.cmc-col--lost .cmc-col__count { background: var(--perigo); }
.cmc-col__hint {
  padding: 4px 12px; font-size: 11px; color: var(--cinza-texto);
  border-bottom: 1px dashed var(--linha);
}
.cmc-col__body {
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  flex: 1 1 auto; min-height: 100px;
  transition: background .15s;
}
.cmc-col__body--over { background: rgba(31,76,140,.08); }

/* Coluna minimizada: só cabeçalho visível, fica fininha e o grid
   se reorganiza automaticamente. */
.cmc-col--collapsed { min-height: 0; }
.cmc-col--collapsed .cmc-col__head { border-bottom: 0; border-radius: var(--raio); }
.cmc-col--collapsed .cmc-col__hint,
.cmc-col--collapsed .cmc-col__body { display: none; }

/* ============================================================
   PAINEL LEGALIZAÇÃO — pipeline kanban de processos
   ============================================================ */
.lgl-topbar {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.lgl-topbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lgl-kanban {
  display: grid;
  grid-template-columns: repeat(9, minmax(210px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}
@media (max-width: 1600px) {
  .lgl-kanban { grid-template-columns: repeat(9, 220px); }
}
.lgl-col {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  display: flex; flex-direction: column;
  min-height: 320px;
}
.lgl-col__head {
  padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px;
  background: var(--fundo-card);
  border-bottom: 1px solid var(--linha);
  border-radius: var(--raio) var(--raio) 0 0;
}
.lgl-col__title { font-size: 12px; font-weight: 700; color: var(--azul); flex: 1 1 auto; min-width: 0; }
.lgl-col__count {
  background: var(--azul); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; min-width: 22px; text-align: center;
}
/* Botão minimizar/expandir coluna do kanban Legalização */
.lgl-col__toggle {
  background: transparent; border: 1px solid var(--linha);
  border-radius: 6px; color: var(--cinza-texto);
  width: 22px; height: 22px; line-height: 1;
  font-size: 16px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.lgl-col__toggle:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.lgl-col--collapsed { min-height: 0; }
.lgl-col--collapsed .lgl-col__head { border-bottom: 0; border-radius: var(--raio); }
.lgl-col--collapsed .lgl-col__body { display: none; }
.lgl-col__body {
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
  flex: 1 1 auto; min-height: 100px;
  transition: background .15s;
}
.lgl-col__body--over { background: rgba(31,76,140,.10); }
.lgl-empty {
  text-align: center; color: var(--cinza-texto);
  font-size: 12px; padding: 16px 8px; font-style: italic;
}

.lgl-card {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
  box-shadow: var(--sombra-sm);
  cursor: grab;
  transition: box-shadow .15s, transform .15s;
}
.lgl-card:hover { box-shadow: var(--sombra-md); transform: translateY(-1px); }
.lgl-card:active { cursor: grabbing; }
.lgl-card--dragging { opacity: .4; }
.lgl-card__title {
  font-size: 13px; font-weight: 700; color: var(--texto);
  line-height: 1.25; margin-bottom: 6px;
}
.lgl-card__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.lgl-card__cnpj { font-size: 11px; color: var(--cinza-texto); font-family: monospace; }
.lgl-card__row { font-size: 11.5px; color: var(--cinza-texto); margin-top: 4px; }
.lgl-card__solic {
  margin-top: 6px; padding: 6px 8px; border-radius: 5px;
  background: #FFFBEB; border-left: 3px solid #F59E0B;
  font-size: 11.5px; color: #92400E; line-height: 1.35;
}
/* Itens da lista de anexos no modal de legalização */
.lgl-att-item {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px; margin-bottom: 6px;
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px;
}
.lgl-att-item a {
  color: var(--azul); text-decoration: none; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lgl-att-item a:hover { text-decoration: underline; }
/* Chips de anexo/link direto no card — clicáveis sem abrir o modal */
.lgl-card__atts {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px;
}
.lgl-att-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: #EFF6FF; color: #1D4ED8; text-decoration: none;
  border: 1px solid #BFDBFE; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.lgl-att-chip:hover { background: #DBEAFE; text-decoration: underline; }
.lgl-att-more {
  font-size: 10px; color: var(--cinza-texto); padding: 2px 6px;
  background: #F3F4F6; border-radius: 999px; font-weight: 600;
}
.lgl-card__foot { margin-top: 6px; display: flex; gap: 6px; }
.lgl-card__days {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: #ECFDF5; color: #047857; font-weight: 600;
}
.lgl-card__days--late { background: #FEE2E2; color: #B91C1C; }
.lgl-card__timer {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: #EEF2FF; color: #3730A3; font-weight: 600;
  border: 1px solid #C7D2FE;
}
.lgl-card__timer--done {
  background: #ECFDF5; color: #047857; border-color: #A7F3D0;
}

.lgl-pill {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.lgl-pill--const { background: #DBEAFE; color: #1E40AF; }
.lgl-pill--alt   { background: #FEF3C7; color: #92400E; }
.lgl-pill--baixa { background: #FEE2E2; color: #991B1B; }

/* Form do modal — 2 colunas */
.lgl-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.lgl-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 680px) {
  .lgl-grid { grid-template-columns: 1fr; }
}

.cmc-card {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
  box-shadow: var(--sombra-sm);
  cursor: grab;
  transition: box-shadow .15s, transform .15s;
}
.cmc-card:hover { box-shadow: var(--sombra-md); transform: translateY(-1px); }
.cmc-card--dragging { opacity: .5; cursor: grabbing; }
.cmc-card__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.cmc-card__name { font-size: 14px; color: var(--tinta); line-height: 1.25; }
.cmc-card__value {
  font-size: 12px; font-weight: 700; color: var(--verde-escuro);
  white-space: nowrap;
}
.cmc-card__contact { font-size: 11px; color: var(--cinza-texto); margin-top: 4px; }
/* Badge de idade da empresa no card do lead — escala por antiguidade */
.cmc-card__age-line { margin-top: 4px; }
.cmc-card__age {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: .2px;
  border: 1px solid transparent;
}
.cmc-card__age--ok     { background: rgba(45,138,96,.12);  color: #15803D; border-color: rgba(45,138,96,.25); }
.cmc-card__age--warn   { background: rgba(224,164,28,.14); color: #92400E; border-color: rgba(224,164,28,.30); }
.cmc-card__age--orange { background: rgba(234,88,12,.14);  color: #C2410C; border-color: rgba(234,88,12,.30); }
.cmc-card__age--risk   { background: rgba(192,57,43,.13);  color: #B91C1C; border-color: rgba(192,57,43,.32); font-weight: 800; }
.cmc-card__next {
  font-size: 11px; color: var(--cinza-texto); margin-top: 6px;
  padding: 3px 7px; background: var(--fundo); border-radius: 5px;
}
.cmc-card__next.today { background: rgba(232,176,74,.18); color: #8a5a00; font-weight: 600; }
.cmc-card__next.overdue { background: rgba(214,96,77,.16); color: #913526; font-weight: 700; }
.cmc-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; font-size: 11px; color: var(--cinza-texto);
}
.cmc-card__owner { font-weight: 600; }
.cmc-card__lost {
  background: rgba(214,96,77,.14); color: var(--perigo);
  padding: 2px 6px; border-radius: 4px; font-weight: 600;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmc-empty {
  text-align: center; color: var(--cinza-texto); font-size: 12px;
  font-style: italic; padding: 20px 8px;
}

/* Tabela */
.cmc-table-wrap { overflow-x: auto; }
.cmc-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--fundo-card);
  border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden;
}
.cmc-table th, .cmc-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linha);
}
.cmc-table th {
  background: var(--fundo); font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: var(--cinza-texto); letter-spacing: 0.03em;
}
.cmc-table td.num, .cmc-table th.num { text-align: right; white-space: nowrap; }
.cmc-table tr:last-child td { border-bottom: none; }
.cmc-table tr[data-prop-id]:hover,
.cmc-table tr[data-edit-lead]:hover { background: rgba(31,76,140,.04); }
.cmc-sub { font-size: 11px; color: var(--cinza-texto); margin-top: 2px; }

.cmc-status {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: var(--fundo); color: var(--tinta);
}
.cmc-status--rascunho { background: rgba(90,100,120,.14); color: var(--cinza-texto); }
.cmc-status--enviada  { background: rgba(46,99,168,.14); color: var(--azul-claro); }
.cmc-status--aceita   { background: rgba(61,174,124,.16); color: var(--verde-escuro); }
.cmc-status--recusada { background: rgba(214,96,77,.16); color: var(--perigo); }
.cmc-status--expirada { background: rgba(232,176,74,.20); color: #8a5a00; }

.cmc-pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.cmc-pill--warn   { background: rgba(232,176,74,.20); color: #8a5a00; }
.cmc-pill--danger { background: rgba(214,96,77,.18); color: var(--perigo); }

/* Grids do formulário */
.cmc-grid-2 {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 10px;
}

/* Modal — adapta o padrão existente */
#cmc-lead-modal.modal, #cmc-prop-modal.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 16px;
}
#cmc-lead-modal[hidden], #cmc-prop-modal[hidden] { display: none !important; }

/* Botão danger em modais */
.btn--danger { color: var(--perigo) !important; }
.btn--danger:hover { background: rgba(214,96,77,.10) !important; }

/* Responsivo do Kanban */
@media (max-width: 1300px) {
  .cmc-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmc-col--won, .cmc-col--lost { grid-column: span 1; }
}
@media (max-width: 900px) {
  .cmc-kanban { grid-template-columns: 1fr; }
  .cmc-grid-2 { grid-template-columns: 1fr; }
}

/* === Próximas atividades === */
.cmc-activities {
  margin: 0 0 16px;
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 14px;
}
.cmc-activities__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: 13px;
}
.cmc-activities__head strong { color: var(--azul); }
.cmc-activities__hint { color: var(--cinza-texto); font-size: 11px; }
.cmc-activities__empty { font-size: 12px; color: var(--cinza-texto); font-style: italic; padding: 4px 0; }
.cmc-activities__strip {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
}
.cmc-activities__strip::-webkit-scrollbar { height: 6px; }
.cmc-activities__strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
.cmc-activity {
  flex: 0 0 220px;
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: 6px; padding: 8px 10px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.cmc-activity:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.cmc-activity__when {
  font-size: 10px; font-weight: 700; color: var(--cinza-texto);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.cmc-activity__lead { font-size: 13px; font-weight: 700; color: var(--tinta); margin: 2px 0; line-height: 1.2; }
.cmc-activity__action { font-size: 11px; color: var(--cinza-texto); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmc-activity.overdue { border-left: 3px solid var(--perigo); }
.cmc-activity.overdue .cmc-activity__when { color: var(--perigo); }
.cmc-activity.today { border-left: 3px solid var(--alerta); }
.cmc-activity.today .cmc-activity__when { color: #8a5a00; }
.cmc-activity.soon { border-left: 3px solid var(--azul-claro); }

/* === Aba Ferramentas === */
.cmc-tools-intro { font-size: 13px; color: var(--cinza-texto); margin-bottom: 16px; }
.cmc-tools-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 24px;
}
.cmc-tool {
  display: block; background: var(--fundo-card);
  border: 1px solid var(--linha); border-radius: var(--raio-lg);
  padding: 20px; text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cmc-tool:hover {
  transform: translateY(-3px); box-shadow: var(--sombra-md);
  border-color: var(--azul);
}
.cmc-tool__icon { font-size: 32px; margin-bottom: 10px; }
.cmc-tool__title { font-size: 15px; color: var(--azul); margin-bottom: 6px; }
.cmc-tool__desc { font-size: 12px; color: var(--cinza-texto); line-height: 1.45; margin-bottom: 12px; }
.cmc-tool__action {
  font-size: 12px; font-weight: 700; color: var(--azul);
  display: inline-block; padding-top: 6px;
  border-top: 1px solid var(--linha);
}
.cmc-crm-info {
  background: var(--fundo);
  border-left: 3px solid var(--azul);
  border-radius: 6px;
  padding: 14px 18px;
}
.cmc-crm-info h4 { color: var(--azul); margin-bottom: 8px; font-size: 13px; }
.cmc-crm-info p { font-size: 12px; color: var(--cinza-texto); margin-bottom: 6px; line-height: 1.5; }
.cmc-crm-info p:last-child { margin-bottom: 0; }

/* === Histórico de interações (modal de lead) === */
.cmc-int-section {
  margin: 14px 0 6px;
  padding: 12px;
  background: var(--fundo);
  border-radius: var(--raio);
  border: 1px solid var(--linha);
}
.cmc-int-title { font-size: 13px; color: var(--azul); margin-bottom: 8px; }
.cmc-int-add {
  display: grid; gap: 6px;
  grid-template-columns: 130px 1fr auto;
  margin-bottom: 10px;
}
.cmc-int-add .field__input { font-size: 12px; padding: 6px 10px; min-height: 34px; }
.cmc-int-add .btn { padding: 6px 12px; font-size: 12px; }
.cmc-int-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.cmc-int-empty { font-size: 12px; color: var(--cinza-texto); font-style: italic; padding: 8px; text-align: center; }
.cmc-int-item {
  background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: 6px; padding: 8px 10px;
}
.cmc-int-item__head {
  display: flex; gap: 6px; align-items: center;
  font-size: 11px; margin-bottom: 4px;
}
.cmc-int-item__type {
  background: rgba(31,76,140,.10); color: var(--azul);
  padding: 2px 8px; border-radius: 999px; font-weight: 600;
}
.cmc-int-item__when { color: var(--cinza-texto); flex: 1; }
.cmc-int-item__del {
  background: transparent; border: none; cursor: pointer;
  font-size: 12px; color: var(--cinza-texto);
  padding: 2px 4px; border-radius: 4px;
}
.cmc-int-item__del:hover { background: rgba(214,96,77,.12); color: var(--perigo); }
.cmc-int-item__note { font-size: 13px; line-height: 1.4; color: var(--tinta); white-space: pre-wrap; word-wrap: break-word; }

/* === Botões extras no modal de lead === */
.cmc-lead-extras {
  display: flex; gap: 8px; margin: 10px 0;
  padding: 8px 0; border-top: 1px dashed var(--linha);
}

/* === Consulta CNPJ na Receita === */
.cmc-cnpj-row {
  display: flex; gap: 6px; align-items: stretch;
}
.cmc-cnpj-row .field__input { flex: 1; }
.cmc-cnpj-btn {
  white-space: nowrap; padding: 0 12px;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--linha);
  background: var(--fundo);
}
.cmc-cnpj-btn:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.cmc-cnpj-btn:disabled { opacity: .6; cursor: wait; }
/* ============================================================
   Card de destaque: Data de constituição da empresa (lead)
   Cor escala de verde (nova) → vermelho (antiga sem contrato)
   ============================================================ */
.cmc-lead-age-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  border-left: 5px solid #6B7280;
  background: #F9FAFB;
  transition: all .2s;
}
.cmc-lead-age-card--ok     { background: #F0FDF4; border-color: #BBF7D0; border-left-color: #2D8A60; }
.cmc-lead-age-card--warn   { background: #FEFCE8; border-color: #FEF08A; border-left-color: #E0A41C; }
.cmc-lead-age-card--orange { background: #FFF7ED; border-color: #FED7AA; border-left-color: #EA580C; }
.cmc-lead-age-card--risk   { background: #FEF2F2; border-color: #FECACA; border-left-color: #C0392B; box-shadow: 0 2px 8px rgba(192,57,43,.08); }
.cmc-lead-age-card__icon {
  font-size: 28px; line-height: 1; flex-shrink: 0;
}
.cmc-lead-age-card__body { flex: 1; min-width: 0; }
.cmc-lead-age-card__label {
  font-size: 11px; font-weight: 700;
  color: var(--cinza-texto);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 4px;
}
.cmc-lead-age-card__date {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cmc-lead-age-card__input {
  padding: 6px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 5px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--tinta);
  font-weight: 600;
}
.cmc-lead-age-card__input:focus { outline: none; border-color: var(--azul); }
.cmc-lead-age-card__age {
  font-size: 14px;
  color: var(--tinta);
  line-height: 1.4;
}
.cmc-lead-age-card--risk .cmc-lead-age-card__age strong { color: #C0392B; }
.cmc-lead-age-card--orange .cmc-lead-age-card__age strong { color: #EA580C; }
.cmc-lead-age-card--warn .cmc-lead-age-card__age strong { color: #92400E; }
.cmc-lead-age-card--ok .cmc-lead-age-card__age strong { color: #15803D; }

/* Flash de campo preenchido automaticamente pela consulta CNPJ */
.cmc-input-flash {
  animation: cmcInputFlash 1.8s ease;
  background: #FFF8C5 !important;
}
@keyframes cmcInputFlash {
  0%   { background: #FFE96B; box-shadow: 0 0 0 3px rgba(255,233,107,.45); }
  100% { background: #FFF8C5; box-shadow: 0 0 0 0 rgba(255,233,107,0); }
}
/* ============================================================
   Banner in-app de notificações push
   ============================================================ */
.push-banner-host {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
.push-banner {
  pointer-events: auto;
  background: #fff;
  border-left: 4px solid #1F4C8C;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 14px 14px 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  animation: pushBannerIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes pushBannerIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.push-banner__icon { font-size: 26px; flex: 0 0 auto; }
.push-banner__body { flex: 1 1 auto; min-width: 0; }
.push-banner__title {
  font-weight: 700; color: #1F4C8C; font-size: 14px;
  margin-bottom: 3px;
}
.push-banner__text {
  font-size: 13px; color: #1A1A1A; line-height: 1.4;
}
.push-banner__acts {
  display: flex; flex-direction: column; gap: 4px;
  flex: 0 0 auto;
}
.push-banner__btn {
  background: #1F4C8C; color: #fff;
  border: none; border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.push-banner__btn:hover { background: #0F8E84; }
.push-banner__close {
  background: transparent; border: none;
  color: #999; cursor: pointer;
  font-size: 13px; padding: 2px 6px;
}
.push-banner__close:hover { color: #C0392B; }

/* ============================================================
   CARTEIRA DE CLIENTES (CRM pós-venda) — aba 🤝 Carteira
   ============================================================ */
.cmc-carteira-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.cmc-carteira-stats {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.cmc-carteira-total {
  font-size: 12px; font-weight: 700;
  color: var(--azul); padding: 4px 10px;
  background: rgba(31,76,140,.08); border-radius: 6px;
}
.cmc-carteira-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.field__input--sm { font-size: 12px; padding: 6px 8px; }
.cmc-carteira-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.cmc-carteira-empty {
  padding: 32px; text-align: center;
  background: var(--fundo); border-radius: 8px;
  color: var(--cinza-texto);
  border: 2px dashed var(--cinza-borda);
  grid-column: 1 / -1;
}
.cmc-cli-card {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.cmc-cli-card:hover {
  border-color: var(--azul);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.cmc-cli-card--ok         { border-left-color: #2D8A60; }
.cmc-cli-card--warn       { border-left-color: #E0A41C; }
.cmc-cli-card--at-risk    { border-left-color: #C0392B; background: rgba(192,57,43,.03); }
.cmc-cli-card--onboarding { border-left-color: #1F4C8C; background: rgba(31,76,140,.03); }
.cmc-cli-card--closed     { border-left-color: #6B7280; opacity: .65; }

.cmc-cli-card__top {
  display: flex; justify-content: space-between; align-items: start;
  gap: 8px; margin-bottom: 6px;
}
.cmc-cli-card__name { font-size: 13px; color: var(--tinta); }
.cmc-cli-card__state { font-size: 10px; font-weight: 600; color: var(--cinza-texto); white-space: nowrap; }
.cmc-cli-card__state-line { font-size: 10px; font-weight: 600; color: var(--cinza-texto); margin: 2px 0 4px; }
.cmc-cli-card__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  letter-spacing: .2px;
  flex-shrink: 0;
}
.cmc-cli-card__score--ok   { background: #2D8A60; }
.cmc-cli-card__score--warn { background: #E0A41C; }
.cmc-cli-card__score--risk { background: #C0392B; }
.cmc-cli-card__partner,
.cmc-cli-card__plan,
.cmc-cli-card__contact {
  font-size: 11px; color: var(--cinza-texto); margin: 2px 0;
}
.cmc-cli-card__plan { color: var(--azul); font-weight: 500; }
.cmc-cli-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--cinza-borda);
}
.cmc-cli-card__resp { font-size: 10px; color: var(--cinza-texto); }
.cmc-cli-card__acts { display: flex; gap: 4px; }
.cmc-cli-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  font-size: 13px;
  background: var(--fundo); color: var(--tinta);
  border-radius: 4px; text-decoration: none;
  border: 1px solid var(--cinza-borda);
  transition: background .15s, color .15s;
}
.cmc-cli-act:hover { background: var(--azul); color: #fff; border-color: var(--azul); text-decoration: none; }

/* Pills de estado na barra de stats */
.cmc-pill--onboarding { background: rgba(31,76,140,.10); color: #1F4C8C; }
.cmc-pill--ok         { background: rgba(45,138,96,.10); color: #2D8A60; }
.cmc-pill--at-risk    { background: rgba(192,57,43,.10); color: #C0392B; }
.cmc-pill--closed     { background: rgba(107,114,128,.10); color: #6B7280; }

/* Barra de atalhos no topo do modal do cliente */
.cmc-cli-acts-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: -8px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--cinza-borda);
}

/* ============================================================
   Dashboard Executivo (view-dashexec)
   ============================================================ */
#view-dashexec { padding-bottom: 40px; }
.dx-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.dx-kpi {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s;
}
.dx-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.06); }
.dx-kpi--primary {
  background: linear-gradient(135deg, #1F4C8C 0%, #0F8E84 100%);
  border-color: #1F4C8C;
  color: #fff;
}
.dx-kpi--primary .dx-kpi__label,
.dx-kpi--primary .dx-kpi__hint { color: rgba(255,255,255,.85); }
.dx-kpi--primary .dx-kpi__value { color: #fff; }
.dx-kpi__label {
  font-size: 11px; font-weight: 700;
  color: var(--cinza-texto);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 6px;
}
.dx-kpi__value {
  font-size: 28px; font-weight: 800;
  color: var(--tinta);
  line-height: 1.1;
  margin-bottom: 4px;
}
.dx-kpi__hint {
  font-size: 12px;
  color: var(--cinza-texto);
}
.dx-kpi__hint--ok  { color: #15803D; font-weight: 600; }
.dx-kpi__hint--bad { color: #C0392B; font-weight: 600; }

.dx-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.dx-row:has(.dx-card--wide) { grid-template-columns: 2fr 1fr; }
.dx-row:not(:has(.dx-card--wide)) { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .dx-row { grid-template-columns: 1fr !important; }
}
.dx-card {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dx-card__title {
  font-size: 14px; font-weight: 700;
  color: var(--azul);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--cinza-borda);
}
.dx-chart-wrap {
  position: relative;
  height: 300px;
}
.dx-chart-wrap--sm { height: 240px; }

/* Funil de origem */
.dx-funil { display: flex; flex-direction: column; gap: 12px; }
.dx-funil__row {
  display: grid;
  grid-template-columns: 130px 1fr 220px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
@media (max-width: 600px) {
  .dx-funil__row { grid-template-columns: 1fr; gap: 4px; }
}
.dx-funil__label { font-weight: 600; color: var(--tinta); }
.dx-funil__bar-bg {
  height: 14px;
  background: #F3F4F6;
  border-radius: 7px;
  overflow: hidden;
}
.dx-funil__bar {
  height: 100%;
  background: #6B7280;
  border-radius: 7px;
  transition: width .4s;
}
.dx-funil__bar--ok   { background: linear-gradient(90deg, #2D8A60, #4ade80); }
.dx-funil__bar--warn { background: linear-gradient(90deg, #E0A41C, #FBBF24); }
.dx-funil__bar--risk { background: linear-gradient(90deg, #C0392B, #F87171); }
.dx-funil__stats { color: var(--cinza-texto); font-size: 11.5px; text-align: right; }
@media (max-width: 600px) {
  .dx-funil__stats { text-align: left; }
}

/* Ticket médio por plano */
.dx-tickets { display: flex; flex-direction: column; gap: 8px; }
.dx-ticket {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  font-size: 13px;
}
.dx-ticket__plan { font-weight: 700; color: var(--azul); }
.dx-ticket__count { color: var(--cinza-texto); font-size: 11.5px; }
.dx-ticket__avg { font-weight: 700; color: var(--tinta); }
.dx-ticket__total { color: var(--cinza-texto); font-size: 11.5px; }

/* Tabelas */
.dx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dx-table th, .dx-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--cinza-borda);
}
.dx-table th {
  background: #F8FAFC;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--cinza-texto);
}
.dx-table .num { text-align: right; }
.dx-table tr:hover { background: rgba(31,76,140,.03); }
.dx-empty {
  text-align: center;
  padding: 16px;
  color: var(--cinza-texto);
  font-style: italic;
}

/* ===== Onda 3 — Atividades do dia (topo da Carteira) ===== */
.cmc-carteira-activities {
  margin: 0 0 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #FFF8E7 0%, #FFFCEF 100%);
  border: 1px solid #F0D788;
  border-left: 4px solid var(--ouro, #C9A227);
  border-radius: 8px;
}
.cmc-cact__header {
  font-size: 13px; font-weight: 700; color: #8B6F1F;
  margin-bottom: 10px; letter-spacing: .3px;
}
.cmc-cact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 180px;
  gap: 16px;
}
@media (max-width: 800px) {
  .cmc-cact__grid { grid-template-columns: 1fr; }
}
.cmc-cact__col {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(201,162,39,.25);
  border-radius: 6px;
  padding: 8px 10px;
}
.cmc-cact__title {
  font-size: 11px; font-weight: 700; color: #5A4710;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.cmc-cact__item {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s;
}
.cmc-cact__item:hover { background: rgba(201,162,39,.18); }
.cmc-cact__item strong { color: var(--tinta); font-weight: 600; }
.cmc-cact__item span { color: var(--cinza-texto); }
.cmc-cact__empty {
  font-size: 12px; color: var(--cinza-texto);
  font-style: italic; padding: 4px 6px;
}
.cmc-cact__more {
  font-size: 11px; color: #8B6F1F;
  padding: 4px 6px;
  font-style: italic;
}
.cmc-cact__big {
  font-size: 36px; font-weight: 800;
  color: #C0392B;
  line-height: 1;
  text-align: center;
  margin: 4px 0;
}
.cmc-cact__hint {
  font-size: 11px; color: var(--cinza-texto);
  text-align: center;
}

/* ===== Onda 2/3/4 — seções extras no modal do cliente ===== */
.cmc-cli-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--cinza-borda);
}
.cmc-cli-section h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--azul);
  letter-spacing: .2px;
}

/* Linha de adição de interação */
.cmc-cli-int-add {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .cmc-cli-int-add { grid-template-columns: 1fr; }
}

/* Lista de interações */
.cmc-cli-int-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.cmc-cli-int-empty {
  font-size: 12px;
  color: var(--cinza-texto);
  font-style: italic;
  padding: 8px 4px;
}
.cmc-cli-int-item {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  background: #F8FAFC;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  font-size: 13px;
}
.cmc-cli-int-icon {
  font-size: 18px;
  text-align: center;
}
.cmc-cli-int-body { min-width: 0; }
.cmc-cli-int-note {
  color: var(--tinta);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.cmc-cli-int-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--cinza-texto);
}
.cmc-cli-int-del {
  background: transparent;
  border: none;
  color: var(--cinza-texto);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  border-radius: 4px;
}
.cmc-cli-int-del:hover { background: #FECACA; color: #B91C1C; }

/* NPS */
.cmc-cli-nps-add {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cmc-cli-nps-link {
  flex: 1;
  font-size: 12px;
  color: var(--cinza-texto);
  word-break: break-all;
}
.cmc-cli-nps-link a {
  color: var(--azul);
  text-decoration: underline;
}
.cmc-cli-nps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.cmc-cli-nps-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.cmc-cli-nps-score--ok   { background: #2D8A60; }
.cmc-cli-nps-score--warn { background: #E0A41C; }
.cmc-cli-nps-score--risk { background: #C0392B; }

/* Encaminhar para setor */
.cmc-cli-fwd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 110px 130px;
  gap: 6px;
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  .cmc-cli-fwd-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .cmc-cli-fwd-grid { grid-template-columns: 1fr; }
}
.cmc-cli-fwd-grid + textarea {
  width: 100%;
  margin-bottom: 8px;
  box-sizing: border-box;
}

/* Botão "🔗 abrir link" direto no card do kanban (sem precisar editar) */
.task-card__links {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 6px 0 4px;
}
.task-card__link-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-size: 11px; font-weight: 600;
  color: #fff !important;
  background: var(--azul);
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--azul);
  transition: background .15s, transform .1s;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-card__link-btn:hover {
  background: var(--verde);
  border-color: var(--verde);
  text-decoration: none;
}
.task-card__link-btn:active { transform: scale(0.97); }

/* ============================================================
   ANEXOS E LINKS DE TAREFA
   ============================================================ */
.task-attach {
  margin-top: 18px; padding-top: 14px;
  border-top: 2px solid var(--cinza-borda);
}
.task-attach__title {
  font-size: 15px; color: var(--azul);
  margin: 0 0 4px; font-weight: 700;
}
.task-attach__hint {
  font-size: 11px; color: var(--cinza-texto);
  margin: 0 0 12px; line-height: 1.4;
}
.task-attach-list { display: flex; flex-direction: column; gap: 6px; }
.task-attach-empty {
  padding: 12px; text-align: center;
  background: var(--fundo); border-radius: 6px;
  font-size: 12px; color: var(--cinza-texto);
  border: 1px dashed var(--cinza-borda);
}
.task-attach-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--fundo);
  border-radius: 6px;
  border: 1px solid var(--cinza-borda);
  transition: border-color .15s, background .15s;
}
.task-attach-item:hover { border-color: var(--azul); background: #fff; }
.task-attach-item--link { background: rgba(15,142,132,.06); border-color: rgba(15,142,132,.25); }
.task-attach-icon { font-size: 22px; flex: 0 0 auto; }
.task-attach-body { flex: 1 1 auto; min-width: 0; }
.task-attach-name {
  font-size: 13px; font-weight: 600; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-attach-dest {
  font-weight: 400; color: var(--cinza-texto); font-size: 12px;
}
.task-attach-sub {
  font-size: 11px; color: var(--cinza-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-attach-acts {
  display: flex; gap: 4px; flex: 0 0 auto;
}
.task-attach-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: #fff; border: 1px solid var(--cinza-borda);
  border-radius: 5px; cursor: pointer; text-decoration: none;
  font-size: 14px; color: var(--tinta);
  transition: background .15s, color .15s, border-color .15s;
}
.task-attach-act:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.task-attach-del:hover { background: var(--perigo); border-color: var(--perigo); }
.task-attach-actions {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.task-attach-upload-btn {
  display: inline-flex; align-items: center; cursor: pointer;
}
.task-attach-link-form {
  margin-top: 10px; padding: 12px;
  background: var(--fundo); border-radius: 6px;
  border: 1px solid var(--cinza-borda);
  display: flex; flex-direction: column; gap: 8px;
}
.task-attach-link-form input { width: 100%; }
.task-attach-link-form > .btn { align-self: flex-start; }

/* Botão "Gerar linha Efí" no card compact */
.cmc-card__efi {
  display: block; width: 100%;
  margin-top: 6px; padding: 4px 6px;
  font-size: 11px; font-weight: 700;
  background: var(--azul); color: #fff;
  border: none; border-radius: 4px;
  cursor: pointer;
  transition: background .15s;
}
.cmc-card__efi:hover { background: var(--verde); }
.cmc-card__efi:active { transform: scale(0.97); }

/* Card kanban: linha de "Indicado por" */
.cmc-card__referrer {
  font-size: 11px; color: var(--azul);
  background: rgba(31,76,140,.08);
  padding: 2px 6px; border-radius: 4px;
  margin: 4px 0; display: inline-block;
}
.cmc-cnpj-status {
  margin-top: 6px; font-size: 12px; line-height: 1.5;
  padding: 8px 10px; border-radius: 6px;
}
.cmc-cnpj-loading {
  display: block; color: var(--cinza-texto); font-style: italic;
  background: var(--fundo); padding: 8px 10px; border-radius: 6px;
}
.cmc-cnpj-err {
  display: block; color: var(--perigo);
  background: rgba(214,96,77,.10); padding: 8px 10px; border-radius: 6px;
}
.cmc-cnpj-err a { color: var(--azul); }
.cmc-cnpj-ok {
  background: rgba(61,174,124,.08);
  border-left: 3px solid var(--verde);
  padding: 8px 10px; border-radius: 4px;
  color: var(--tinta);
}
.cmc-cnpj-ok strong { color: var(--verde-escuro); }
.cmc-cnpj-info {
  margin-top: 4px; font-size: 11px;
  color: var(--cinza-texto); line-height: 1.55;
}
.cmc-cnpj-hint {
  margin-top: 6px; font-size: 10px; color: var(--cinza-texto); font-style: italic;
}
/* Tabela de comparação Atual vs Receita (modal do cliente) */
.cmc-cnpj-diff {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 12px;
  background: rgba(255,255,255,.6);
  border-radius: 4px;
}
.cmc-cnpj-diff th {
  background: rgba(31,76,140,.08);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--cinza-texto);
  padding: 5px 6px;
  text-align: left;
  border-bottom: 1px solid var(--cinza-borda);
}
.cmc-cnpj-diff td {
  padding: 5px 6px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}
.cmc-cnpj-diff td:first-child { text-align: center; width: 24px; }
.cmc-cnpj-diff td:last-child { width: 80px; text-align: right; }
.cmc-cnpj-apply-btn {
  padding: 3px 8px;
  font-size: 11px;
  background: var(--azul);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.cmc-cnpj-apply-btn:hover:not(:disabled) {
  background: var(--verde);
}
.cmc-cnpj-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--cinza-borda);
}
.cmc-pill.cmc-pill--ok {
  background: rgba(61,174,124,.18); color: var(--verde-escuro);
}
.cmc-cnpj-info strong { color: var(--azul); }
.cmc-cnpj-anexo {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(46,99,168,.08);
  border-left: 3px solid var(--azul-claro);
  border-radius: 4px;
  font-size: 12px; line-height: 1.5;
}
.cmc-cnpj-anexo strong { color: var(--azul); }
.cmc-cnpj-anexo small { color: var(--cinza-texto); }
.cmc-cnpj-anexo a { color: var(--azul); }

/* === Simulador de honorário === */
.cmc-sim-link {
  background: transparent; border: none; color: var(--azul);
  font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 4px 0; margin-top: 4px;
  text-decoration: underline;
}
.cmc-sim-link:hover { color: var(--verde-escuro); }
.cmc-sim-box {
  background: var(--fundo);
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: 12px;
  margin: 10px 0;
}
.cmc-sim-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.cmc-sim-head strong { color: var(--azul); font-size: 13px; }
.cmc-sim-note { font-size: 11px; color: var(--cinza-texto); font-style: italic; }
.cmc-sim-row {
  display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 10px;
}
.cmc-sim-row .field__input { font-size: 13px; }
.cmc-sim-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-bottom: 10px;
}
.cmc-sim-result { min-height: 0; }
.cmc-sim-out {
  background: var(--fundo-card);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--verde);
  border-radius: 6px;
  padding: 10px 12px;
}
.cmc-sim-out__head { font-size: 11px; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: 0.04em; }
.cmc-sim-out__value { font-size: 22px; font-weight: 700; color: var(--verde-escuro); margin: 4px 0; }
.cmc-sim-out__break {
  font-size: 11px; color: var(--cinza-texto); line-height: 1.6;
}
.cmc-sim-out__break span { white-space: nowrap; }
.cmc-sim-disclaimer {
  font-size: 10px; color: var(--cinza-texto); font-style: italic; margin: 6px 0 0;
}
.cmc-sim-err {
  background: rgba(214,96,77,.10); color: var(--perigo);
  padding: 8px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
}

/* === Badges e info-box dos planos === */
.cmc-sim-plano {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
}
.cmc-sim-plano__head { font-size: 13px; margin-bottom: 6px; }
.cmc-sim-plano__range { color: var(--cinza-texto); font-size: 11px; }
.cmc-sim-plano__para { font-size: 11px; color: var(--cinza-texto); margin-bottom: 6px; line-height: 1.5; }
.cmc-sim-plano__det { margin-top: 4px; }
.cmc-sim-plano__det summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--azul);
  padding: 4px 0;
}
.cmc-sim-plano__det ul { margin: 6px 0 4px 18px; font-size: 12px; line-height: 1.55; color: var(--tinta); }
.cmc-sim-plano__badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 6px;
}
.cmc-sim-plano__badge--start    { background: #e8f4f8; color: #1F4C8C; }
.cmc-sim-plano__badge--basic    { background: #e0f0e8; color: #2D8A60; }
.cmc-sim-plano__badge--advanced { background: #fff3d6; color: #8a5a00; }
.cmc-sim-plano__badge--premium  { background: #1F4C8C; color: #fff; }
.cmc-sim-plano__badge--custom   { background: #f0f0f0; color: #555; }

/* Info-box do plano (no modal de lead / proposta) */
.cmc-plan-info {
  margin-top: 6px; padding: 10px 12px;
  background: var(--fundo);
  border-left: 3px solid var(--azul);
  border-radius: 6px;
  font-size: 12px;
}
.cmc-plan-info__head { margin-bottom: 6px; font-size: 13px; }
.cmc-plan-info__head em { color: var(--cinza-texto); font-style: italic; }
.cmc-plan-info__para {
  font-size: 11px; color: var(--cinza-texto); line-height: 1.5; margin-bottom: 6px;
}
.cmc-plan-info__det summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--azul);
  padding: 4px 0;
}
.cmc-plan-info__det ul { margin: 6px 0 0 18px; font-size: 12px; line-height: 1.55; color: var(--tinta); }
.cmc-plan-info__det li { margin-bottom: 3px; }

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

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

/* === FinLock — trava extra (PIN) das áreas financeiras === */
.fin-locked #cmc-kpis,
.fin-locked .fin-sensitive {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  user-select: none;
  cursor: pointer;
  transition: filter .15s ease;
}
.fin-locked #cmc-kpis:hover,
.fin-locked .fin-sensitive:hover { filter: blur(6px); }
#finlock-modal[hidden] { display: none; }
#finlock-pin { padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; }