/* =========================================================================
   Quadro — folha de estilo única
   Paleta em variáveis CSS, com tema claro e escuro.
   ========================================================================= */

:root {
  color-scheme: light;

  --fundo: #f4f6f9;
  --fundo-2: #e9edf3;
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --superficie-3: #eef2f7;
  --borda: #dde3ec;
  --borda-forte: #c6d0de;

  --texto: #16202e;
  --texto-2: #5a6879;
  --texto-3: #8b97a8;
  --texto-inv: #ffffff;

  --primaria: #2f6fed;
  --primaria-escura: #2559c9;
  --primaria-clara: #e8f0fe;
  --perigo: #d94848;
  --perigo-clara: #fdecec;
  --sucesso: #2f9e5f;
  --sucesso-clara: #e8f6ee;
  --alerta: #d68910;
  --alerta-clara: #fdf3e0;

  --nav: #172033;
  --nav-2: #1f2b42;
  --nav-texto: #e3e9f2;
  --nav-texto-2: #9aa8bf;

  --sombra-1: 0 1px 2px rgba(16, 26, 41, 0.08), 0 1px 3px rgba(16, 26, 41, 0.06);
  --sombra-2: 0 2px 8px rgba(16, 26, 41, 0.1), 0 1px 3px rgba(16, 26, 41, 0.06);
  --sombra-3: 0 12px 32px rgba(16, 26, 41, 0.18), 0 2px 8px rgba(16, 26, 41, 0.1);
  --sombra-drag: 0 18px 40px rgba(16, 26, 41, 0.28);

  --r-p: 5px;
  --r-m: 8px;
  --r-g: 12px;
  --r-xg: 16px;

  --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --largura-lista: 286px;
  --altura-topo: 52px;
  --altura-barra-quadro: 56px;
}

:root[data-tema='escuro'] {
  color-scheme: dark;

  --fundo: #10151f;
  --fundo-2: #161d2b;
  --superficie: #1b2230;
  --superficie-2: #202836;
  --superficie-3: #262f40;
  --borda: #2c3648;
  --borda-forte: #3b475d;

  --texto: #e6ebf3;
  --texto-2: #9daabd;
  --texto-3: #6f7c90;

  --primaria: #5b8ef5;
  --primaria-escura: #4479e6;
  --primaria-clara: #1e2c47;
  --perigo: #e56a6a;
  --perigo-clara: #3a2126;
  --sucesso: #4fb87a;
  --sucesso-clara: #17301f;
  --alerta: #e0a33c;
  --alerta-clara: #33270f;

  --nav: #0c111a;
  --nav-2: #151d2b;
  --nav-texto: #dde4ef;
  --nav-texto-2: #8492a8;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --sombra-drag: 0 18px 40px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

/*
 * O atributo hidden do HTML vale como display:none, mas qualquer regra de
 * display na folha de estilo (.campo{display:block}, .lista-add{display:flex})
 * sobrepõe o padrão do navegador e o elemento continua visível. Esta regra
 * garante que `el.hidden = true` funcione em todo o sistema.
 */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body.modal-aberto {
  overflow: hidden;
}

body.arrastando {
  cursor: grabbing;
  user-select: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.01em;
}

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

.icon {
  flex: none;
  display: block;
}

.sutil {
  color: var(--texto-2);
  font-size: 12.5px;
}

.vazio {
  color: var(--texto-3);
  font-style: italic;
}

/* ---------------------------------------------------------------- botões -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: var(--superficie-3);
  border-color: var(--borda-forte);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn-primario {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}

.btn-primario:hover:not(:disabled) {
  background: var(--primaria-escura);
  border-color: var(--primaria-escura);
}

.btn-perigo {
  background: var(--perigo);
  border-color: var(--perigo);
  color: #fff;
}

.btn-perigo:hover:not(:disabled) {
  filter: brightness(0.93);
}

.btn-fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--texto-2);
}

.btn-fantasma:hover:not(:disabled) {
  background: var(--superficie-3);
  color: var(--texto);
}

.btn-pequeno {
  padding: 4px 9px;
  font-size: 12.5px;
}

.btn-largo {
  width: 100%;
  justify-content: center;
}

.btn.carregando {
  position: relative;
  color: transparent;
}

.btn.carregando::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--texto-2);
  animation: girar 0.7s linear infinite;
}

.btn-primario.carregando::after,
.btn-perigo.carregando::after {
  color: #fff;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.icon-btn:hover {
  background: var(--superficie-3);
  color: var(--texto);
}

.icon-btn.popover-ativo {
  background: var(--superficie-3);
  color: var(--texto);
}

/* ---------------------------------------------------------------- campos -- */

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='search'],
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-m);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 18%, transparent);
}

textarea {
  resize: vertical;
  min-height: 60px;
}

input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--primaria);
  cursor: pointer;
}

.campo {
  display: block;
  margin-bottom: 14px;
}

.campo-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-2);
}

.campo-dica {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--texto-3);
}

.linha-campos {
  display: flex;
  gap: 12px;
}

.linha-campos > * {
  flex: 1;
  min-width: 0;
}

.inline-edit {
  font: inherit;
  font-weight: inherit;
}

/* ------------------------------------------------------------- avatares --- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: none;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.avatar.inativo {
  filter: grayscale(1);
  opacity: 0.6;
}

.avatares {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

/* ============================================================== estrutura = */

#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/*
 * Com a tarja do segundo fator no alto, o corpo vira uma COLUNA: a tarja no
 * tamanho que precisar, e o resto da tela para o programa.
 *
 * Sem isto, o rodapé da lateral — onde mora a engrenagem que ABRE a ativação —
 * sai para fora da tela, e a tarja esconde justamente o botão que ela manda
 * usar.
 *
 * Nem `calc(100vh - 41px)` nem medir a tarja por JavaScript: a altura muda com
 * a largura da janela (o texto quebra em duas linhas), e layout que depende de
 * o JavaScript acordar na hora certa é layout que um dia aparece quebrado.
 * Aqui quem faz a conta é o navegador, em qualquer largura, sem ajuda.
 */
body.com-tarja {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

body.com-tarja #app {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.lateral {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--nav);
  color: var(--nav-texto);
  overflow: hidden;
}

.lateral-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  height: var(--altura-topo);
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex: none;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(140deg, #4f8cf7, #2f6fed);
  color: #fff;
  flex: none;
}

.logo-texto {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.lateral-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px 20px;
}

.nav-secao {
  margin: 14px 6px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nav-texto-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--nav-texto);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.nav-item.ativo {
  background: rgba(79, 140, 247, 0.22);
  color: #fff;
  font-weight: 600;
}

.nav-item .icon {
  color: var(--nav-texto-2);
}

.nav-item.ativo .icon {
  color: #8db4fb;
}

.nav-item-texto {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.nav-badge.alerta {
  background: var(--perigo);
  color: #fff;
}

.ponto-quadro {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}

/* Lista de quadros reordenável na lateral. */
.nav-quadros {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 8px;
}

.nav-quadros .nav-item {
  touch-action: none;
}

.nav-quadros.drop-alvo {
  background: rgba(79, 140, 247, 0.1);
  border-radius: var(--r-m);
}

.nav-quadros .drag-placeholder {
  background: rgba(79, 140, 247, 0.25);
  border-color: rgba(141, 180, 251, 0.5);
}

.lateral-rodape {
  flex: none;
  padding: 9px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 9px;
}

.lateral-rodape .nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lateral-rodape .icon-btn {
  color: var(--nav-texto-2);
}

.lateral-rodape .icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topo {
  height: var(--altura-topo);
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo-busca {
  position: relative;
  width: 320px;
  max-width: 42vw;
}

.topo-busca .icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-3);
  pointer-events: none;
}

.topo-busca input {
  padding-left: 31px;
  background: var(--superficie-2);
}

/* ---- sino de notificações ---- */

.sino {
  position: relative;
  flex: none;
}

.sino.tem {
  color: var(--primaria);
}

.sino-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--perigo);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--superficie);
}

.notif-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--borda);
}

.notif-titulo {
  font-size: 13px;
  font-weight: 680;
}

.notif-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -4px;
}

.notif {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 9px 8px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notif:hover {
  background: var(--superficie-3);
}

.notif.nova {
  background: var(--primaria-clara);
  border-left-color: var(--primaria);
}

.notif.urgente {
  border-left-color: var(--perigo);
}

.notif-icone {
  flex: none;
  margin-top: 1px;
  color: var(--texto-3);
}

.notif.urgente .notif-icone {
  color: var(--perigo);
}

.notif-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-cabeca {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
}

.notif-cabeca b {
  flex: 1;
  min-width: 0;
  font-weight: 650;
}

.notif-cabeca .sutil {
  flex: none;
  font-size: 11px;
}

.notif-texto {
  font-size: 12.5px;
  color: var(--texto-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-onde {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--texto-3);
}

.notif-ponto {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--primaria);
}

/* ---- seletor de @ no comentário ---- */

.mencao-painel {
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-m);
  background: var(--superficie);
  box-shadow: var(--sombra-2);
  max-height: 190px;
  overflow-y: auto;
}

.espaco {
  flex: 1;
}

.conteudo {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Telas que gerenciam a própria rolagem (quadro, tabela). */
.conteudo.sem-rolagem {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pagina {
  padding: 24px 28px 40px;
  max-width: 1180px;
}

.pagina-cabecalho {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pagina-cabecalho h1 {
  font-size: 22px;
}

/* ============================================================ tela de login */

.login-tela {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 24px;
  background: linear-gradient(150deg, #172033 0%, #2b3d63 100%);
}

.login-caixa {
  width: 100%;
  max-width: 396px;
  padding: 30px 30px 26px;
  border-radius: var(--r-xg);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}

.login-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.login-caixa h1 {
  font-size: 19px;
  margin-bottom: 4px;
}

.login-caixa .sutil {
  margin-bottom: 20px;
}

.login-erro {
  margin-bottom: 14px;
  padding: 9px 11px;
  border-radius: var(--r-m);
  background: var(--perigo-clara);
  color: var(--perigo);
  font-size: 13px;
  font-weight: 550;
}

/* ============================================================== home ===== */

.grade-quadros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

.cartao-quadro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 108px;
  padding: 14px 14px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--texto);
  overflow: hidden;
  transition: box-shadow 0.14s, transform 0.14s, border-color 0.14s;
}

.cartao-quadro::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--cor-quadro, var(--primaria));
}

.cartao-quadro:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-1px);
  border-color: var(--borda-forte);
}

.cartao-quadro h3 {
  font-size: 15px;
  padding-left: 6px;
}

.cartao-quadro .meta {
  padding-left: 6px;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--texto-2);
}

.chip-alerta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--perigo-clara);
  color: var(--perigo);
  font-size: 11.5px;
  font-weight: 650;
}

.cartao-novo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 108px;
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--r-g);
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.cartao-novo:hover {
  background: var(--superficie);
  color: var(--primaria);
  border-color: var(--primaria);
}

/* ============================================================== quadro === */

.quadro {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.quadro-barra {
  flex: none;
  min-height: var(--altura-barra-quadro);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}

.quadro-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 680;
}

.quadro-titulo .ponto-quadro {
  width: 13px;
  height: 13px;
  border-radius: 4px;
}

.quadro-titulo-texto {
  padding: 2px 6px;
  border-radius: var(--r-p);
  cursor: text;
}

.quadro-titulo-texto:hover {
  background: var(--superficie-3);
}

.abas {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-m);
  background: var(--superficie-3);
}

.aba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.aba:hover {
  color: var(--texto);
}

.aba.ativo {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-1);
}

.filtro-ativo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 14px;
  background: var(--primaria-clara);
  color: var(--primaria);
  font-size: 12.5px;
  font-weight: 650;
}

.filtro-ativo-chip button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  padding: 2px;
  border-radius: 50%;
}

.filtro-ativo-chip button:hover {
  background: rgba(47, 111, 237, 0.18);
}

/* ---- colunas ---- */

.raia {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 20px;
  overflow-x: auto;
  overflow-y: hidden;
}

.lista {
  width: var(--largura-lista);
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  border-radius: var(--r-g);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
}

.lista-topo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 8px 8px 12px;
  cursor: grab;
}

.lista-nome {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 680;
  padding: 3px 6px;
  margin: -3px -6px;
  border-radius: var(--r-p);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.lista-nome:hover {
  background: var(--superficie-3);
}

/* Contagem de cartões da coluna. Ficava cinza-claro demais e passava batido —
   é informação de gestão, tem de ser lida sem procurar. */
.lista-contagem {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-2);
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--superficie-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.lista-contagem.estourado {
  background: var(--perigo-clara);
  color: var(--perigo);
}

.lista-cartoes {
  flex: 1;
  min-height: 34px;
  overflow-y: auto;
  padding: 0 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lista-cartoes.drop-alvo {
  background: color-mix(in srgb, var(--primaria) 7%, transparent);
}

.lista-rodape {
  flex: none;
  padding: 6px 8px 8px;
}

.lista-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  text-align: left;
}

.lista-add:hover {
  background: var(--superficie-3);
  color: var(--texto);
}

.nova-lista {
  width: var(--largura-lista);
  flex: none;
}

/* ---- cartão ---- */

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  border-radius: var(--r-m);
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  touch-action: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.cartao:hover {
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-2);
}

.cartao-capa {
  height: 7px;
  margin: -9px -10px 3px;
  border-radius: var(--r-m) var(--r-m) 0 0;
}

.cartao-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.etiqueta-mini {
  height: 8px;
  min-width: 34px;
  border-radius: 4px;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-titulo {
  font-size: 13.5px;
  line-height: 1.35;
  word-break: break-word;
}

.cartao-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.campo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 1px 7px;
  border-radius: var(--r-p);
  background: var(--superficie-3);
  font-size: 11.5px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campo-chip b {
  color: var(--texto);
  font-weight: 650;
}

.cartao-rodape {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.cartao-rodape .avatares {
  margin-left: auto;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--r-p);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-2);
  background: transparent;
}

.selo .icon {
  width: 13px;
  height: 13px;
}

.selo-data.atrasado {
  background: var(--perigo-clara);
  color: var(--perigo);
  font-weight: 700;
}

.selo-data.hoje {
  background: var(--alerta-clara);
  color: var(--alerta);
  font-weight: 700;
}

.selo-data.proximo {
  background: var(--alerta-clara);
  color: var(--alerta);
}

.selo-data.concluido {
  background: var(--sucesso-clara);
  color: var(--sucesso);
}

.selo-check.completo {
  background: var(--sucesso-clara);
  color: var(--sucesso);
}

/* Cartão que é evento: audiência, perícia, reunião. */
.selo-evento {
  background: var(--primaria-clara);
  color: var(--primaria);
  font-weight: 700;
}

.selo-funcao {
  background: var(--primaria-clara);
  color: var(--primaria);
  font-weight: 650;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selo-funcao.vago {
  background: var(--perigo-clara);
  color: var(--perigo);
}

.novo-cartao-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border-radius: var(--r-m);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-2);
}

.novo-cartao-form textarea {
  min-height: 54px;
  border: none;
  padding: 2px;
  box-shadow: none;
}

.novo-cartao-form textarea:focus {
  box-shadow: none;
}

.novo-cartao-acoes {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ---- arrastar ---- */

.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  pointer-events: none;
  box-shadow: var(--sombra-drag);
  opacity: 0.96;
  transform-origin: center;
}

.drag-placeholder {
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--primaria) 12%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--primaria) 45%, transparent);
  flex: none;
}

/* ============================================================== tabela === */

.tabela-wrap {
  overflow: auto;
  height: 100%;
  padding: 0 0 40px;
}

table.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

table.tabela th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 9px 12px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-2);
  white-space: nowrap;
}

table.tabela td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

table.tabela tbody tr:hover {
  background: var(--superficie-2);
}

table.tabela tbody tr {
  cursor: pointer;
}

.td-titulo {
  font-weight: 600;
  max-width: 380px;
}

.grupo-linha td {
  background: var(--superficie-3);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-2);
}

/* ============================================================ calendário = */

.cal-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.cal-mes {
  font-size: 18px;
  font-weight: 680;
  min-width: 190px;
}

.cal-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  overflow: hidden;
  background: var(--superficie);
}

.cal-cabecalho {
  padding: 8px 10px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-2);
  text-align: center;
}

.cal-dia {
  min-height: 108px;
  padding: 6px;
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-dia:nth-child(7n) {
  border-right: none;
}

.cal-dia.fora {
  background: var(--superficie-2);
}

.cal-dia.fds {
  background: color-mix(in srgb, var(--fundo-2) 55%, var(--superficie));
}

.cal-dia-num {
  font-size: 12px;
  font-weight: 650;
  color: var(--texto-2);
  padding: 1px 4px;
  align-self: flex-start;
  border-radius: 5px;
}

.cal-dia.hoje .cal-dia-num {
  background: var(--primaria);
  color: #fff;
}

.cal-dia.fora .cal-dia-num {
  color: var(--texto-3);
}

.cal-evento {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--superficie-3);
  border-left: 3px solid var(--cor-evento, var(--primaria));
  font-size: 11.5px;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  border-top: none;
  border-right: none;
  border-bottom: none;
  color: var(--texto);
  font-family: inherit;
  overflow: hidden;
}

.cal-evento:hover {
  background: var(--primaria-clara);
}

.cal-evento .titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-evento.concluido .titulo {
  text-decoration: line-through;
  color: var(--texto-3);
}

.cal-evento.atrasado {
  background: var(--perigo-clara);
  color: var(--perigo);
  font-weight: 600;
}

.cal-evento .tipo-item {
  color: var(--texto-3);
  flex: none;
  display: flex;
}

/*
 * Evento é o que se comparece — audiência, perícia. Ganha fundo próprio e
 * borda cheia para não se confundir com tarefa a fazer.
 */
.cal-evento.evento {
  background: color-mix(in srgb, var(--cor-evento, var(--primaria)) 22%, var(--superficie));
  border-left-width: 5px;
  border-left-style: double;
  font-weight: 600;
}

.cal-evento.evento .tipo-item {
  color: var(--cor-evento, var(--primaria));
}

/* Evento atrasado continua gritando vermelho: o alerta vem antes do estilo. */
.cal-evento.evento.atrasado {
  background: var(--perigo-clara);
  color: var(--perigo);
}

/*
 * PRAZO FATAL — o que encerra o caso.
 *
 * No mesmo dia convivem tarefa de checklist, evento marcado e prazo fatal, e o
 * custo de perder cada um é diferente: tarefa atrasa o trabalho, evento é
 * falta, prazo fatal é preclusão. Sem distinção, o que acaba com o caso aparece
 * do mesmo tamanho que "conferir se chegou o laudo".
 *
 * Barra grossa à esquerda e selo escrito, não só cor: cor sozinha não se lê em
 * tela ruim, em impressão, nem para quem não distingue bem vermelho.
 */
.cal-evento.prazo-fatal {
  background: color-mix(in srgb, var(--perigo) 10%, var(--superficie));
  border-left: 5px solid var(--perigo);
  font-weight: 600;
}

.cal-evento.prazo-fatal .tipo-item {
  color: var(--perigo);
}

.cal-selo-fatal {
  flex: none;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--perigo);
  color: #fff;
  text-transform: uppercase;
}

/* Vencido, o vermelho toma a peça inteira — o selo some dentro dele. */
.cal-evento.prazo-fatal.atrasado {
  background: var(--perigo-clara);
  color: var(--perigo);
}

.cal-evento.prazo-fatal.concluido {
  background: var(--superficie-3);
  border-left-color: var(--texto-3);
}

.cal-evento.prazo-fatal.concluido .cal-selo-fatal {
  background: var(--texto-3);
}

/*
 * Contagem na aba do filtro.
 *
 * Aparece também nas abas NÃO escolhidas, de propósito: é o que mostra que há
 * 3 prazos esperando enquanto você está olhando a aba de tarefas. Sem isso o
 * filtro esconde e a pessoa acha que viu tudo.
 */
.abas .aba-conta {
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
}

.abas .aba.ativo .aba-conta {
  background: var(--primaria);
  color: #fff;
}

/* A aba dos prazos é a única que muda de cor quando tem algo: é a que não
   pode passar batida. */
.abas .aba-prazo .aba-conta {
  background: var(--perigo);
  color: #fff;
}

/* Quem responde pelo prazo: iniciais, não bolinha lisa — bolinha não se lê. */
.cal-quem {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.cal-quem .avatar {
  width: 17px;
  height: 17px;
  font-size: 8px;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px var(--superficie);
}

.cal-quem .avatar + .avatar {
  margin-left: -4px;
}

/* Função sem ocupante: anel vermelho e iniciais da função. É aviso. */
.cal-avatar-vago {
  background: var(--perigo-clara) !important;
  color: var(--perigo) !important;
  box-shadow: inset 0 0 0 1.5px var(--perigo) !important;
}

.cal-avatar-ninguem {
  background: transparent !important;
  color: var(--texto-3) !important;
  box-shadow: inset 0 0 0 1.5px var(--borda-forte) !important;
}

.cal-mais-quem {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--texto-3);
  padding-left: 2px;
}

/* Bolinha só sobrevive na legenda, como amostra de cor. */
.cal-bolinha {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.cal-legenda .legenda-evento {
  font-weight: 600;
  color: var(--texto-2);
}

.cal-mais {
  border: none;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  padding: 1px 5px;
}

.cal-mais:hover {
  color: var(--primaria);
}

.cal-legenda {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--texto-2);
}

.cal-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-legenda i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: block;
}

/* lista/agenda */

.agenda-grupo {
  margin-bottom: 22px;
}

.agenda-titulo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borda);
}

.agenda-titulo h3 {
  font-size: 14px;
}

.agenda-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 6px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-evento, var(--primaria));
  border-radius: var(--r-m);
  background: var(--superficie);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--texto);
  transition: box-shadow 0.12s, border-color 0.12s;
}

.agenda-item:hover {
  box-shadow: var(--sombra-2);
}

.agenda-item .corpo {
  flex: 1;
  min-width: 0;
}

.agenda-item .titulo {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-item.concluido .titulo {
  text-decoration: line-through;
  color: var(--texto-3);
}

.agenda-item .caminho {
  font-size: 12px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-item.evento {
  border-left-width: 5px;
  border-left-style: double;
  background: var(--superficie-2);
}

/* Selo de evento e de função sem ocupante, na lista da agenda. */
.chip-evento,
.chip-vaga {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.chip-evento {
  color: var(--primaria);
  background: var(--primaria-clara);
}

.chip-vaga {
  color: var(--perigo);
  background: var(--perigo-clara);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================= modais ==== */

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 18px;
  background: rgba(12, 18, 28, 0.55);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.16s;
}

.modal-fundo.visivel {
  opacity: 1;
}

.modal {
  width: 100%;
  max-width: 620px;
  border-radius: var(--r-xg);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
  transform: translateY(-8px);
  transition: transform 0.16s;
  margin-bottom: 40px;
}

.modal-fundo.visivel .modal {
  transform: none;
}

.modal-pequeno {
  max-width: 420px;
}

.modal-grande {
  max-width: 860px;
}

.modal-largo {
  max-width: 1080px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 0 22px;
}

.modal-titulo {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  line-height: 1.35;
  word-break: break-word;
}

.modal-body {
  padding: 14px 22px 22px;
}

.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.confirmar p {
  margin: 0 0 8px;
}

/* ---- popover ---- */

.popover {
  position: fixed;
  z-index: 700;
  border-radius: var(--r-g);
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-3);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s;
  max-height: min(76vh, 620px);
  display: flex;
  flex-direction: column;
}

.popover.visivel {
  opacity: 1;
  transform: none;
}

.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 8px 9px 14px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  font-weight: 680;
  flex: none;
}

.popover-body {
  padding: 10px 12px 12px;
  overflow-y: auto;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: -4px -6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: none;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover:not(:disabled) {
  background: var(--superficie-3);
}

.menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.menu-item.danger {
  color: var(--perigo);
}

.menu-item.danger:hover {
  background: var(--perigo-clara);
}

.menu-item .icon {
  color: var(--texto-2);
}

.menu-item.danger .icon {
  color: var(--perigo);
}

.menu-icon-vazio {
  width: 15px;
  flex: none;
}

.menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--borda);
}

/* ---- opções selecionáveis (membros, etiquetas) ---- */

.opcao {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.opcao:hover {
  background: var(--superficie-3);
}

.opcao .nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opcao .marca {
  color: var(--primaria);
  flex: none;
}

.opcao-etiqueta {
  gap: 8px;
}

/*
 * O nome da etiqueta QUEBRA em vez de ser cortado.
 *
 * Ela, em 21/09/2026: *"tem coisa que eu não consigo ver o nome da etiqueta
 * para selecionar"*. As etiquetas dela são frases — "RA complementação abaixo
 * do mínimo (pré-2019)", "RA acerto de vínculos e remunerações" — e com
 * reticências viravam todas "RA complementação abaixo…", indistinguíveis
 * justamente na hora de escolher.
 *
 * Duas linhas ocupam mais espaço e resolvem; reticências economizam espaço e
 * escondem a informação que a pessoa foi buscar ali.
 */
.opcao-etiqueta .cor {
  flex: 1;
  min-width: 0;
  padding: 5px 9px;
  border-radius: var(--r-p);
  font-size: 12.5px;
  font-weight: 650;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  text-align: left;
}

/*
 * E ainda dá para arrastar a lateral, que foi o que ela pediu. A alça aparece
 * no canto de baixo à direita.
 */
/* As chaves de um modelo, em fila que quebra. */
.modelo-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.modelo-vars .selo {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11.5px;
}

/*
 * Os lugares em branco que o programa achou dentro do .docx: um por linha,
 * o trecho do contrato à esquerda e a escolha à direita. A lista rola dentro
 * dela mesma para o botão "Enviar" não fugir da tela num modelo comprido.
 */
.marcas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-2);
}

.marca-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.marca-onde code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.marca-onde .sutil {
  font-size: 11.5px;
  line-height: 1.3;
  margin-top: 2px;
}

/*
 * A tarja do segundo fator, no alto de tudo. Fica até ser feito — é obrigação
 * do escritório, não lembrete que se dispensa. Empurra a página para baixo em
 * vez de flutuar por cima, senão taparia a barra de busca.
 */
.tarja-2fa {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: #fde68a;
  color: #4a3410;
  font-size: 13.5px;
  border-bottom: 1px solid #e0c86a;
}

.tarja-2fa .btn {
  margin-left: auto;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .tarja-2fa { flex-wrap: wrap; }
  .tarja-2fa .btn { margin-left: 0; }
}

/*
 * A folha da prévia do documento. Não imita o Word — imita uma folha, para a
 * pessoa saber que está lendo um documento, e o resto é texto legível.
 */
.previa-folha {
  max-height: 55vh;
  overflow-y: auto;
  padding: 22px 26px;
  margin: 12px 0;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #fff;
  color: #1b1b1b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: justify;
}

:root:not([data-theme="light"]) .previa-folha,
:root[data-theme="dark"] .previa-folha {
  background: #f7f7f5;
}

.previa-linha {
  margin: 0 0 8px;
  min-height: 1em;
  overflow-wrap: anywhere;
}

/* O que o programa preencheu. Marcado para ela saber onde olhar. */
.previa-valor {
  background: #fff3c4;
  border-bottom: 1px solid #e0c86a;
  padding: 0 1px;
}

/* E o que vai sair em branco. */
.previa-buraco {
  background: #ffdcdc;
  border-bottom: 1px solid #e08a8a;
  color: #8a2020;
  padding: 0 1px;
}

.marca-escolha {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.marca-linha select,
.marca-rotulo {
  width: 100%;
  min-width: 0;
}

@media (max-width: 640px) {
  .marca-linha { grid-template-columns: 1fr; gap: 4px; }
}

.popover-largavel {
  resize: horizontal;
  overflow: hidden;
  min-width: 240px;
  max-width: 92vw;
}

.paleta {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.paleta button {
  height: 28px;
  border: 2px solid transparent;
  border-radius: var(--r-p);
  cursor: pointer;
  padding: 0;
}

.paleta button.escolhido {
  border-color: var(--texto);
}

/* ============================================================ modal cartão */

.cartao-modal .modal-body {
  padding: 0 22px 22px;
}

.cartao-caminho {
  font-size: 12.5px;
  color: var(--texto-2);
  margin: -6px 0 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/*
 * Duas colunas: à esquerda o trabalho (descrição, campos, checklists), à
 * direita a conversa (comentários e histórico), que assim fica sempre à vista
 * em vez de no fim de uma pilha longa.
 */
.cartao-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  gap: 0 26px;
  align-items: start;
}

.cartao-col-principal,
.cartao-col-lado {
  min-width: 0;
}

.cartao-col-lado {
  padding-left: 24px;
  border-left: 1px solid var(--borda);
}

/* Abas da coluna direita: Comentários | Atividade. */
.lado-abas {
  width: 100%;
  margin-bottom: 14px;
}

.lado-abas .aba {
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.lado-abas .aba span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lado-corpo .secao {
  margin-bottom: 0;
}

/* Em tela estreita o cartão volta a uma coluna. */
@media (max-width: 1000px) {
  .cartao-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cartao-col-lado {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--borda);
    padding-top: 18px;
    margin-top: 4px;
  }
}

/* Barra de ferramentas do cartão, no lugar da antiga coluna de botões. */
.cartao-ferramentas {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--borda);
}

.ferramenta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  color: var(--texto-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ferramenta:hover,
.ferramenta.popover-ativo {
  background: var(--superficie-3);
  color: var(--texto);
  border-color: var(--borda);
}

.ferramenta .icon {
  color: var(--texto-3);
}

.ferramenta:hover .icon {
  color: var(--texto-2);
}

.ferramenta.so-icone {
  padding: 6px 7px;
}

@media (max-width: 640px) {
  .ferramenta span {
    display: none;
  }
  .ferramenta {
    padding: 7px 9px;
  }
}

.secao {
  margin-bottom: 20px;
}

.secao-titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-2);
}

.secao-titulo .icon {
  color: var(--texto-3);
}

.secao-titulo .espaco {
  flex: 1;
}

/*
 * Grupos de campos personalizados: "Dados do cliente", "Dados do processo"…
 * Fundo levemente tingido para o bloco de campos se distinguir do resto do
 * cartão sem competir com ele.
 */
.grupo-campos,
.grade-campos.solta {
  /* --g é a cor da seção, escolhida na paleta clara. */
  --g: var(--primaria);
  margin-top: 10px;
  padding: 10px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--g) 22%, var(--borda));
  border-left: 3px solid color-mix(in srgb, var(--g) 55%, transparent);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--g) 7%, var(--superficie));
}

.grupo-campos > summary .nome {
  color: color-mix(in srgb, var(--g) 70%, var(--texto));
}

/* Botão da paleta, discreto até o mouse passar pela seção. */
.secao-cor {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: color-mix(in srgb, var(--g) 60%, var(--texto-3));
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}

.grupo-campos:hover .secao-cor,
.secao-cor:focus-visible,
.secao-cor.popover-ativo {
  opacity: 1;
}

.secao-cor:hover {
  background: color-mix(in srgb, var(--g) 18%, transparent);
}

.paleta-secao button {
  background: color-mix(in srgb, var(--g) 22%, var(--superficie));
  border: 2px solid color-mix(in srgb, var(--g) 55%, transparent);
  height: 30px;
}

.paleta-secao button.escolhido {
  border-color: var(--texto);
}

.grade-campos.solta {
  padding: 12px;
}

/* Explicação de por que a seção está vazia, com atalho para copiar. */
.campos-vazio {
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--primaria) 25%, var(--borda));
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--primaria) 4%, var(--superficie));
  font-size: 13px;
}

.campos-vazio p {
  margin: 0 0 8px;
}

.campos-vazio p:last-child {
  margin-bottom: 0;
}

.campos-vazio .lista-tags {
  margin-top: 4px;
}

.grupo-campos > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px -2px 8px;
  padding: 2px;
  list-style: none;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-2);
}

.grupo-campos > summary::-webkit-details-marker {
  display: none;
}

.grupo-campos > summary:hover {
  color: var(--texto);
}

.grupo-campos > summary .icon {
  color: var(--texto-3);
  transition: transform 0.15s;
  transform: rotate(-90deg);
}

.grupo-campos[open] > summary .icon {
  transform: none;
}

.grupo-campos > summary .nome {
  flex: 1;
  min-width: 0;
}

.grupo-campos > summary .conta {
  flex: none;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--superficie-3);
  color: var(--texto-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Seção com algo preenchido: sinaliza sem precisar abrir. */
.grupo-campos > summary .conta.tem {
  background: var(--primaria-clara);
  color: var(--primaria);
}

.grupo-campos:not([open]) {
  padding-bottom: 10px;
}

.grupo-campos:not([open]) > summary {
  margin-bottom: 0;
}

/*
 * Grade dos campos personalizados: compacta, três colunas, no espírito do
 * Trello. Cada campo é rótulo pequeno com a marca do tipo, e a entrada logo
 * abaixo — bem mais baixo que os campos de formulário do resto do sistema.
 */
.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px 10px;
}

.campo-cp {
  display: block;
  min-width: 0;
}

.campo-cp-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-2);
  overflow: hidden;
}

.campo-cp-label .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campo-cp-label .icon {
  flex: none;
  color: var(--texto-3);
}

.marca-tipo {
  flex: none;
  color: var(--texto-3);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  min-width: 13px;
}

.campo-cp input[type='text'],
.campo-cp input[type='date'],
.campo-cp select {
  width: 100%;
  padding: 5px 8px;
  font-size: 12.5px;
  border-radius: 6px;
  border-color: var(--borda);
  /* Caixa branca sobre o fundo tingido: o campo editável fica evidente. */
  background: var(--superficie);
}

.campo-cp input[type='text']:hover,
.campo-cp input[type='date']:hover,
.campo-cp select:hover {
  border-color: var(--borda-forte);
}

.campo-cp input::placeholder {
  color: var(--texto-3);
}

.campo-cp-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--texto-2);
}

/* ---------------------------------------------------------------------------
 * A descrição: campo aberto, barra de formatação em cima
 *
 * Ela, em 20/09/2026: "eu quero aquele campo aberto como ele estava antes… e
 * colocar essas opções em cima, mas mais bonitinho, estilo como fica no Docs
 * ou no Word".
 *
 * A barra e o campo são UMA caixa só, colados: barra solta em cima de um campo
 * solto parecem duas coisas que não se falam.
 * ------------------------------------------------------------------------- */

.fmt-barra {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-wrap: wrap;
  padding: 4px 6px;
  border: 1px solid var(--borda);
  border-bottom: 0;
  border-radius: var(--r-m) var(--r-m) 0 0;
  background: var(--superficie-2);
}

.fmt-btn {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-s, 6px);
  background: none;
  color: var(--texto);
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
}

.fmt-btn:hover { background: var(--superficie); }
.fmt-btn.popover-ativo { background: color-mix(in srgb, var(--primaria) 16%, transparent); }

/*
 * Os botões que abrem menu são mais largos: o ícone e a setinha têm de caber
 * LADO A LADO. Sem isto eles se empilhavam dentro dos 28px e a barra ficava
 * com dois andares — foi a primeira coisa que apareceu na tela de ensaio.
 */
.fmt-btn.com-seta { min-width: 42px; padding: 0 4px 0 6px; }

.fmt-conteudo {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
}

.fmt-conteudo svg { opacity: .55; }

.fmt-btn b, .fmt-btn i, .fmt-btn u, .fmt-btn s { font-size: 14px; }
.fmt-tt { font-weight: 600; letter-spacing: -.3px; }

/* O "A" colorido e o "A" marcado, como no Docs: a cor fica no próprio ícone. */
.fmt-a-colorida {
  font-weight: 700;
  border-bottom: 3px solid #c0392b;
  line-height: 1.05;
}

.fmt-marca {
  font-weight: 700;
  background: #fff3a3;
  color: #2b2b2b;
  border-radius: 2px;
  padding: 0 2px;
}

.fmt-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--borda);
}

.fmt-amostra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  font-weight: 700;
  flex-shrink: 0;
}

.descricao-editor {
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 0 0 var(--r-m) var(--r-m);
  background: var(--superficie);
  min-height: 96px;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
}

.descricao-editor:focus {
  border-color: var(--primaria);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaria) 18%, transparent);
}

/* O texto de convite, que some assim que se escreve a primeira letra. */
.descricao-editor:empty::before {
  content: attr(data-vazio);
  color: var(--texto-3, var(--texto-2));
  pointer-events: none;
}

.descricao-editor ul, .descricao-editor ol { margin: 4px 0 4px 20px; }
.descricao-editor p { margin: 0 0 6px; }
/*
 * Dentro de um campo de digitar, o ponteiro é uma barrinha de texto — e por
 * isso o link não parecia clicável. Aqui ele volta a parecer o que é.
 */
.descricao-editor a {
  color: var(--primaria);
  text-decoration: underline;
  cursor: pointer;
}

.descricao-editor a:hover {
  text-decoration-thickness: 2px;
}

/*
 * Salvar e Cancelar só aparecem depois que alguém mexe. Com o campo sempre
 * aberto, dois botões parados embaixo de toda descrição seriam dois convites a
 * clicar em algo que não faz nada.
 */
.descricao-acoes {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
}

.descricao-acoes.visivel { display: flex; }

/* ---- checklist ---- */

.checklist {
  margin-bottom: 18px;
}

.checklist-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.checklist-nome {
  font-weight: 680;
  font-size: 14px;
  padding: 2px 5px;
  margin: -2px -5px;
  border-radius: var(--r-p);
  cursor: text;
}

.checklist-nome:hover {
  background: var(--superficie-3);
}

.progresso {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.progresso-barra {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--superficie-3);
  overflow: hidden;
}

.progresso-barra i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--primaria);
  transition: width 0.2s;
}

.progresso-barra i.completo {
  background: var(--sucesso);
}

.item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 7px;
  border-radius: var(--r-m);
  touch-action: none;
}

.item:hover {
  background: var(--superficie-2);
}

.item input[type='checkbox'] {
  flex: none;
}

/*
 * Texto do item e os botões de responsável/data na MESMA linha, para o
 * checklist ficar compacto. Se não couber, o grupo desce sozinho.
 */
.item-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.item-texto {
  flex: 1;
  min-width: 140px;
  word-break: break-word;
  cursor: text;
  border-radius: var(--r-p);
  padding: 1px 3px;
  margin: -1px -3px;
}

.item-texto:hover {
  background: var(--superficie-3);
}

.item.feito .item-texto {
  text-decoration: line-through;
  color: var(--texto-3);
}

.item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  flex-wrap: wrap;
}

.item-acoes {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  flex: none;
}

.item:hover .item-acoes,
.item:focus-within .item-acoes {
  opacity: 1;
}

.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--superficie-3);
  color: var(--texto-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.mini-btn:hover {
  background: var(--borda);
  color: var(--texto);
}

/* ---- padrão do nome do cartão ---- */

.padrao-exemplo {
  font-size: 11px;
  color: var(--primaria);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.padrao-previa {
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  padding: 6px 8px;
  margin-bottom: 10px;
}

.padrao-linha {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  padding: 3px 0;
  border-bottom: 1px solid var(--borda);
}

.padrao-linha:last-child {
  border-bottom: none;
}

.padrao-linha .de {
  color: var(--texto-3);
  text-decoration: line-through;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.padrao-linha .para {
  color: var(--texto);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.padrao-linha .icon {
  flex: none;
  color: var(--texto-3);
}

/* ---- olho de "mostrar na frente do cartão" ---- */

.campo-cp-olho {
  border: none;
  background: transparent;
  padding: 0 2px;
  margin-left: auto;
  cursor: pointer;
  color: var(--borda-forte);
  display: inline-flex;
  align-items: center;
  flex: none;
}

.campo-cp-olho:hover {
  color: var(--texto-2);
}

.campo-cp-olho.ligado {
  color: var(--primaria);
}

/* ---- lista com ordem automática ---- */

.lista-ordem-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 130px;
  border: none;
  background: var(--primaria-clara);
  color: var(--primaria);
  border-radius: 999px;
  padding: 2px 7px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.lista-ordem-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-ordem-chip:hover {
  background: var(--primaria);
  color: #fff;
}

/* O cartão numa lista ordenada continua clicável e arrastável para FORA. */
.lista-cartoes.ordenada .cartao {
  cursor: pointer;
}

/* ---- campo de CPF e de número de processo ---- */

.campo-cp-doc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.campo-cp-doc input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Número que não fecha na conta fica vermelho e NÃO é gravado. */
.campo-cp-doc input.erro {
  border-color: var(--perigo);
  background: var(--perigo-clara);
  color: var(--perigo);
}

.campo-cp-erro {
  font-size: 11px;
  line-height: 1.3;
  color: var(--perigo);
  font-weight: 600;
}

/* ---- lista de opções: botão que abre o seletor com busca ---- */

.campo-cp-botao {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  font-size: 12.5px;
  text-align: left;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  min-width: 0;
}

.campo-cp-botao:hover:not(:disabled) {
  border-color: var(--borda-forte);
}

.campo-cp-botao:disabled {
  cursor: default;
  opacity: 0.7;
}

.campo-cp-botao .txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campo-cp-botao.vazio .txt {
  color: var(--texto-3);
}

.campo-cp-botao .icon {
  flex: none;
  color: var(--texto-3);
}

/*
 * Valor que não combina mais com o campo pai (trocaram o Estado depois de
 * escolher a Cidade). Fica visível em vez de ser apagado em silêncio.
 */
.campo-cp-botao.alerta {
  border-color: var(--perigo);
  background: var(--perigo-clara);
}

.campo-cp-botao.alerta .icon {
  color: var(--perigo);
}

.menu .opcao.ativa {
  background: var(--primaria-clara);
  font-weight: 600;
}

/* ---- aviso de versão velha da tela ---- */

.aviso-versao {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, 92vw);
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--aviso, #d9a62e);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
  font-size: 13px;
  line-height: 1.4;
}

.aviso-versao button {
  flex: none;
}

/* ---- importação de cartões de planilha ---- */

.mapa-colunas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px;
}

.mapa-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--borda);
  border-radius: 6px;
}

.mapa-linha.ignorada {
  opacity: 0.55;
}

.mapa-dois {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mapa-extra {
  font-size: 11.5px;
}

.mapa-cab {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mapa-cab .sutil,
.imp-prev-linha .sutil {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}

.imp-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.imp-chip {
  padding: 3px 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  background: var(--fundo-2);
  color: var(--texto-2);
}

.imp-chip.criar {
  background: var(--primaria-clara);
  color: var(--primaria);
}

.imp-chip.alerta {
  background: var(--perigo-clara);
  color: var(--perigo);
}

.imp-problemas,
.imp-previa {
  max-height: 230px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.imp-problema {
  border-left: 3px solid var(--perigo);
  padding: 4px 0 4px 9px;
  font-size: 12px;
}

.imp-problema .tit {
  margin-left: 7px;
  color: var(--texto-2);
}

.imp-problema ul {
  margin: 3px 0 0 16px;
  color: var(--perigo);
}

.imp-prev-linha {
  display: grid;
  grid-template-columns: 74px minmax(0, 2fr) minmax(0, 1fr) 88px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 12px;
}

.imp-prev-linha:nth-child(odd) {
  background: var(--fundo-2);
}

.imp-prev-linha .acao {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--texto-3);
}

.imp-prev-linha.criar .acao {
  color: var(--primaria);
}

.imp-prev-linha.pular {
  opacity: 0.6;
}

.imp-prev-linha .tit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- a que valores do campo pai cada opção pertence ---- */

.opcao-pais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 5px 0 0 2px;
  font-size: 11.5px;
}

.chip-pai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--borda);
  border-radius: 11px;
  cursor: pointer;
  color: var(--texto-2);
}

.chip-pai input {
  margin: 0;
}

.chip-pai.ligado {
  border-color: var(--primaria);
  background: var(--primaria-clara);
  color: var(--texto);
  font-weight: 600;
}

.mini-btn.ativo {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}

.mini-btn.atrasado {
  background: var(--perigo-clara);
  color: var(--perigo);
}

.mini-btn.hoje {
  background: var(--alerta-clara);
  color: var(--alerta);
}

.mini-btn.concluido {
  background: var(--sucesso-clara);
  color: var(--sucesso);
}

.mini-btn .avatar {
  margin: -1px -4px -1px -5px;
}

/* ---- árvore de vínculos ---- */

.arvore {
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  padding: 5px;
  max-height: 420px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.arvore-trilha {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--texto-2);
}

.arvore-trilha .sep {
  margin: 0 3px;
  color: var(--texto-3);
}

.link-cartao {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--primaria);
  cursor: pointer;
  text-align: left;
}

.link-cartao:hover {
  text-decoration: underline;
}

.arvore-no {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-radius: var(--r-m);
  min-height: 42px;
}

.arvore-no:hover {
  background: var(--superficie-3);
}

.arvore-no.atual {
  background: var(--primaria-clara);
  outline: 1px solid color-mix(in srgb, var(--primaria) 35%, transparent);
}

.arvore-no.arquivado .arvore-titulo {
  text-decoration: line-through;
  color: var(--texto-3);
}

/* Linha vertical por nível: mostra a hierarquia sem precisar abrir. */
.arvore-guia {
  flex: none;
  width: 17px;
  align-self: stretch;
  border-left: 1px solid var(--borda);
  margin-left: 10px;
}

/*
 * Botão de abrir o ramo. Recolhido, vem num azul suave com a quantidade de
 * cartões pendurados abaixo — visível sem gritar. Aberto, quase desaparece.
 */
.arvore-abrir {
  flex: none;
  align-self: center;
  height: 21px;
  min-width: 37px;
  padding: 0 6px 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--primaria) 28%, transparent);
  border-radius: 11px;
  background: var(--primaria-clara);
  color: var(--primaria);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.arvore-abrir .n {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.arvore-abrir:hover {
  background: color-mix(in srgb, var(--primaria) 16%, var(--superficie));
  border-color: color-mix(in srgb, var(--primaria) 45%, transparent);
}

.arvore-abrir .icon {
  transition: transform 0.15s;
  opacity: 0.75;
}

.arvore-abrir.aberto {
  background: transparent;
  border-color: transparent;
  color: var(--texto-3);
  font-weight: 600;
}

.arvore-abrir.aberto:hover {
  background: var(--superficie-3);
  color: var(--texto-2);
}

.arvore-abrir.aberto .icon {
  transform: rotate(180deg);
}

/* Folha: só um tracinho, para as colunas ficarem alinhadas. */
.arvore-abrir.vazio {
  background: none;
  border: none;
  cursor: default;
  min-width: 37px;
}

.arvore-abrir.vazio .ponta {
  width: 7px;
  height: 1px;
  background: var(--borda-forte);
  display: block;
}

.arvore-conteudo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 5px 6px;
  cursor: pointer;
  overflow: hidden;
}

.arvore-no.atual .arvore-conteudo {
  cursor: default;
}

/* Relações laterais: uma linha só, sem hierarquia para representar. */
.arvore-conteudo-linha {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  cursor: pointer;
  overflow: hidden;
  font-size: 11px;
  color: var(--texto-3);
}

.arvore-conteudo-linha .arvore-quadro {
  margin-left: auto;
}

/* --- primeira linha: o que o cartão é --- */

.arvore-linha1 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.tipo-ponto {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tipo-ponto.vazio {
  background: var(--borda-forte);
}

.arvore-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.arvore-no.atual .arvore-titulo {
  font-weight: 700;
}

.arvore-linha1 .selo-data {
  flex: none;
  margin-left: auto;
}

/* --- segunda linha: onde está e como está --- */

.arvore-linha2 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: 14px;
  font-size: 11px;
  color: var(--texto-3);
  overflow: hidden;
}

.arvore-nivel {
  flex: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
}

.arvore-nivel.fora {
  color: var(--alerta);
}

.arvore-tipo {
  flex: none;
  font-weight: 650;
  white-space: nowrap;
}

.arvore-sep {
  flex: none;
  color: var(--borda-forte);
}

.arvore-quadro {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.arvore-quadro .ponto-quadro {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.arvore-quadro .txt {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A etapa é a informação mais consultada, então ganha contorno próprio. */
.arvore-etapa {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto-2);
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desfecho e estado, visíveis na árvore sem abrir o cartão. É o que permite que
   "não enquadra" e "reconhecido em processo anterior" sejam ETIQUETA em vez de
   virarem mais uma coluna no quadro. */
.arvore-etiqueta {
  flex: none;
  padding: 1px 8px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 10.5px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arvore-campo {
  flex: none;
  padding: 1px 7px;
  border: 1px dashed var(--borda);
  border-radius: 9px;
  color: var(--texto-2);
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arvore-progresso {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.arvore-progresso.completo {
  color: var(--sucesso);
}

.arvore-funcao {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--primaria);
  font-weight: 600;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arvore-linha2 .avatares {
  flex: none;
  margin-left: auto;
}


.arvore-acao {
  opacity: 0;
  flex: none;
}

.arvore-no:hover .arvore-acao,
.arvore-no:focus-within .arvore-acao {
  opacity: 1;
}

/* Botão de entrar no cartão: sempre visível, para ser achado sem descobrir. */
.arvore-ir {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--r-p);
  background: var(--superficie);
  color: var(--texto-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.arvore-ir:hover {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}

.arvore-aqui {
  flex: none;
  align-self: center;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primaria);
}

/* Usado nas relações laterais, que continuam em uma linha só. */
.arvore-meta {
  font-size: 11.5px;
  color: var(--texto-3);
  margin-left: auto;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.tipo-badge {
  flex: none;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ---- comentários e atividade ---- */

.comentario {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.comentario-corpo {
  flex: 1;
  min-width: 0;
}

.comentario-cabecalho {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 12.5px;
}

.comentario-cabecalho .nome {
  font-weight: 680;
}

.comentario-texto {
  padding: 8px 11px;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  white-space: pre-wrap;
  word-break: break-word;
}

.atividade {
  display: flex;
  gap: 9px;
  margin-bottom: 9px;
  font-size: 12.5px;
  color: var(--texto-2);
  align-items: flex-start;
}

.atividade b {
  color: var(--texto);
  font-weight: 650;
}

/* ============================================================ minhas tarefas */

.destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.destaque {
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.destaque .n {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.destaque .rotulo {
  font-size: 12px;
  color: var(--texto-2);
  font-weight: 550;
}

.destaque.perigo .n {
  color: var(--perigo);
}

.destaque.alerta .n {
  color: var(--alerta);
}

.destaque.ok .n {
  color: var(--sucesso);
}

/* ============================================================= painel ==== */

.painel-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.painel-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  align-items: start;
}

.painel-caixa {
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  padding: 14px 16px 16px;
}

.painel-caixa-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--texto-2);
}

.painel-caixa-topo h3 {
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--texto);
}

.painel-nota,
.painel-sub {
  font-size: 11.5px;
  color: var(--texto-3);
  margin: 8px 2px 0;
}

.painel-sub {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* ---- barras horizontais ---- */

.barras {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.barra-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 2px 3px;
  border-radius: var(--r-p);
  font: inherit;
  font-size: 12.5px;
  color: var(--texto);
  text-align: left;
}

button.barra-linha {
  cursor: pointer;
}

button.barra-linha:hover {
  background: var(--superficie-2);
}

.barra-rotulo {
  flex: none;
  width: 132px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.barra-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-trilho {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: var(--superficie-3);
  overflow: hidden;
}

.barra-preenche {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.barra-n {
  flex: none;
  min-width: 22px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- colunas dos próximos 7 dias ---- */

.colunas {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
  height: 150px;
}

.coluna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}

.coluna-n {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}

.coluna-pilha {
  width: 100%;
  max-width: 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}

.coluna-parte {
  display: block;
  width: 100%;
  border-radius: 3px;
  min-height: 3px;
}

.coluna-parte.tarefa {
  background: var(--primaria);
}

.coluna-parte.evento {
  background: var(--alerta);
}

.coluna-rotulo {
  font-size: 10.5px;
  color: var(--texto-2);
  font-weight: 600;
}

.coluna-data {
  font-size: 9.5px;
  color: var(--texto-3);
}

.painel-legenda {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--texto-2);
}

.painel-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.painel-legenda i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: block;
}

.painel-legenda i.tarefa {
  background: var(--primaria);
}

.painel-legenda i.evento {
  background: var(--alerta);
}

/* ---- métricas do fluxo ---- */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 12px;
}

.metrica {
  text-align: center;
  padding: 6px 2px;
}

.metrica-n {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.metrica-rotulo {
  font-size: 11.5px;
  color: var(--texto-2);
  font-weight: 550;
  line-height: 1.25;
  margin-top: 3px;
}

.metrica-nota {
  font-size: 10.5px;
  color: var(--texto-3);
  margin-top: 3px;
}

.rosca {
  width: 62px;
  height: 62px;
  display: block;
  margin: 0 auto;
}

.rosca-trilho {
  fill: none;
  stroke: var(--superficie-3);
  stroke-width: 8;
}

.rosca-arco {
  fill: none;
  stroke: var(--alerta);
  stroke-width: 8;
  stroke-linecap: round;
}

.rosca-texto {
  fill: var(--texto);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
}

/* ---- linhas de cartão no painel ---- */

.painel-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 6px;
  border: none;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

.painel-linha:last-child {
  border-bottom: none;
}

.painel-linha:hover {
  background: var(--superficie-2);
}

.painel-linha .icon {
  flex: none;
  color: var(--texto-3);
}

.painel-linha-corpo {
  flex: 1;
  min-width: 0;
}

.painel-linha-titulo {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-linha-caminho {
  display: block;
  font-size: 11px;
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-linha .selo,
.painel-linha .avatares,
.painel-linha .chip-vaga,
.painel-linha .ponto-quadro {
  flex: none;
}

/* Valor em reais é mais largo que um contador: a coluna precisa caber. */
.barra-n {
  white-space: nowrap;
}

/* ---- configuração de permissões ---- */

.perm-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.perm-linha {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(220px, 1.6fr) minmax(120px, 0.8fr);
  gap: 14px;
  align-items: start;
  padding: 12px 4px;
  border-top: 1px solid var(--borda);
}

.perm-quem {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.perm-nome {
  font-weight: 650;
}

@media (max-width: 760px) {
  .perm-linha {
    grid-template-columns: 1fr;
  }
}

.lista-opcoes {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: auto;
}

.opcao.ativo {
  background: var(--primaria-clara);
  color: var(--primaria);
  font-weight: 650;
}

/* =============================================================== asaas ==== */

/* Botões de automação do cartão: ação, então ficam no alto e destacados. */
.cartao-botoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 9px 11px;
  margin-bottom: 14px;
  border-radius: var(--r-m);
  background: var(--primaria-clara);
  border-left: 3px solid var(--primaria);
}

.cartao-botoes .btn {
  background: var(--superficie);
  border-color: var(--primaria);
  color: var(--primaria);
  font-weight: 650;
}

.cartao-botoes .btn:hover:not(:disabled) {
  background: var(--primaria);
  color: #fff;
}

.asaas-estado {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: var(--superficie-3);
  color: var(--texto-2);
}

.asaas-estado.ligado {
  background: var(--sucesso-clara);
  color: var(--sucesso);
}

.asaas-estado .icon {
  flex: none;
  margin-top: 2px;
}

.asaas-estado-titulo {
  font-weight: 700;
  font-size: 13px;
}

.asaas-passos {
  margin: 4px 0 12px;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--texto-2);
  line-height: 1.7;
}

.asaas-passos code {
  font-size: 11.5px;
}

.asaas-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 12px;
  margin-bottom: 10px;
}

.asaas-dado {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: var(--r-p);
  background: var(--superficie-2);
  border-left: 2px solid var(--sucesso);
}

/* Dado que falta é o que impede o cadastro — tem de gritar. */
.asaas-dado.falta {
  border-left-color: var(--perigo);
  background: var(--perigo-clara);
}

.asaas-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-3);
}

.asaas-valor {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asaas-dado.falta .asaas-valor {
  color: var(--perigo);
  font-weight: 500;
}

/* De qual cartão o dado veio: é o que prova que a leitura do pai funcionou. */
.asaas-origem {
  display: block;
  font-size: 10px;
  color: var(--texto-3);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asaas-cob {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  border-bottom: 1px solid var(--borda);
}

.asaas-cob:last-child {
  border-bottom: none;
}

.asaas-cob.falhou {
  background: var(--perigo-clara);
}

.asaas-cob-valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================== organizar os campos ==== */

.org-raia {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.org-secao {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--g, var(--borda-forte));
  border-radius: var(--r-m);
  background: var(--superficie);
  padding: 9px 11px;
}

/* Os soltos ficam visualmente diferentes: não são uma seção, são o topo. */
.org-secao.solta {
  border-left-style: dashed;
  background: var(--superficie-2);
}

.org-secao-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.org-secao-nome {
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.org-editavel {
  cursor: text;
  border-bottom: 1px dotted var(--borda-forte);
}

.org-cor {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--borda-forte);
  cursor: pointer;
  flex: none;
  padding: 0;
}

.org-conta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--texto-3);
  background: var(--superficie-3);
  border-radius: 999px;
  padding: 1px 6px;
}

.org-secao-btns {
  margin-left: auto;
  display: flex;
}

.org-dica {
  font-size: 11px;
  color: var(--texto-3);
  font-style: italic;
  margin: 0 0 6px;
}

.org-campos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 34px;
}

.org-campo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--borda);
  border-radius: var(--r-p);
  background: var(--superficie);
  font-size: 12.5px;
  cursor: grab;
}

.org-campo:active {
  cursor: grabbing;
}

.org-campo .icon {
  color: var(--borda-forte);
  flex: none;
}

.org-campo-nome {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-campo-tipo {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--texto-3);
  background: var(--superficie-3);
  border-radius: 999px;
  padding: 1px 7px;
}

.org-vazio {
  font-size: 11.5px;
  color: var(--texto-3);
  font-style: italic;
  padding: 8px 9px;
  border: 1px dashed var(--borda);
  border-radius: var(--r-p);
  text-align: center;
}

/* ================================================== importar estrutura ==== */

/* Modelos prontos: o caminho principal, então parecem botão de verdade. */
.imp-modelos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.imp-modelo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--primaria);
  border-radius: var(--r-m);
  background: var(--primaria-clara);
  cursor: pointer;
  font: inherit;
}

.imp-modelo:hover {
  background: var(--primaria);
}

.imp-modelo:hover .imp-modelo-titulo,
.imp-modelo:hover .imp-modelo-desc {
  color: #fff;
}

.imp-modelo-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--primaria);
}

.imp-modelo-desc {
  font-size: 11.5px;
  color: var(--texto-2);
  line-height: 1.4;
}

.imp-avancado {
  margin-bottom: 10px;
}

.imp-avancado summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--texto-2);
  font-weight: 600;
  padding: 4px 0;
}

.imp-avancado textarea {
  margin-top: 6px;
}

.imp-resumo {
  padding: 9px 11px;
  border-radius: var(--r-m);
  background: var(--primaria-clara);
  margin-bottom: 12px;
  font-size: 12.5px;
}

.imp-avisos {
  margin-bottom: 12px;
}

.imp-aviso {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--alerta);
  padding: 3px 0;
  line-height: 1.4;
}

.imp-aviso .icon {
  flex: none;
  margin-top: 2px;
}

.imp-lista {
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  overflow: hidden;
  margin-bottom: 14px;
}

/* Seção de campos na prévia: mesma cor que ela terá dentro do cartão. */
.imp-secao {
  margin-bottom: 12px;
  padding-left: 9px;
  border-left: 3px solid var(--g, var(--borda-forte));
}

.imp-secao-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g, var(--texto-2));
  margin-bottom: 3px;
}

.imp-secao-porque {
  font-size: 11px;
  color: var(--texto-3);
  font-style: italic;
  margin-bottom: 5px;
  line-height: 1.4;
}

.imp-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--borda);
  background: var(--sucesso-clara);
}

.imp-linha:last-child {
  border-bottom: none;
}

.imp-linha.existe {
  background: var(--superficie-2);
  color: var(--texto-2);
}

.imp-n {
  flex: none;
  width: 18px;
  font-weight: 700;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.imp-nome {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imp-tipo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-2);
}

.imp-sugestao {
  font-size: 10.5px;
  background: var(--alerta-clara);
  color: var(--alerta);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}

.imp-opcoes {
  flex: none;
  font-size: 10.5px;
  color: var(--texto-3);
}

.imp-acao {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-3);
  min-width: 62px;
  text-align: right;
}

/* ========================================================== automações ==== */

.auto-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auto-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
}

.auto-item.desligada {
  background: var(--superficie-2);
}

.auto-item.desligada .auto-nome,
.auto-item.desligada .auto-descricao {
  color: var(--texto-3);
}

.auto-corpo {
  flex: 1;
  min-width: 0;
}

/* ---- quem faz o quê: kanban de cargos ---- */
/* Colunas são CARGOS; os cartõezinhos são tipos de atividade. Arrastar de uma
   coluna para outra muda de quem é aquele tipo de trabalho. */

.kanban-cargos {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.cargo-col {
  width: 260px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-g);
  border: 1px solid var(--borda);
  background: var(--fundo-2);
}

/* A coluna dos sem cargo fica marcada: atividade sem dono é o problema. */
.cargo-col-orfa {
  border-style: dashed;
  border-color: var(--aviso, #d08700);
}

.cargo-col-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 8px 6px 12px;
}

.cargo-col-nome {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cargo-col-quem {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 12px 8px;
}

.cargo-zona {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 8px 8px;
  min-height: 56px;
  max-height: 58vh;
  overflow-y: auto;
}

.cargo-zona.drop-alvo {
  background: var(--superficie-3);
  border-radius: var(--r-m, 8px);
}

.cargo-col-pe {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px 9px;
  border-top: 1px solid var(--borda);
  font-size: 11.5px;
  color: var(--texto-2);
}

.atrib-card {
  position: relative;
  padding: 8px 30px 8px 10px;
  border-radius: var(--r-m, 8px);
  border: 1px solid var(--borda);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  cursor: grab;
  touch-action: none;
}

.atrib-card:active {
  cursor: grabbing;
}

.atrib-topo {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.atrib-nome {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.atrib-pontos {
  flex: none;
  min-width: 24px;
  padding: 1px 6px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie-3);
  color: var(--texto);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.atrib-pontos.vazio {
  color: var(--texto-3);
  font-weight: 500;
}

.atrib-menu {
  position: absolute;
  top: 4px;
  right: 3px;
  opacity: 0;
}

.atrib-card:hover .atrib-menu,
.atrib-menu.popover-ativo {
  opacity: 1;
}

.auto-nome {
  font-weight: 650;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.auto-descricao {
  margin: 5px 0 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.auto-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--texto-3);
  flex-wrap: wrap;
}

.auto-acoes {
  display: flex;
  gap: 2px;
  flex: none;
}

.link-sutil {
  border: none;
  background: transparent;
  color: var(--primaria);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ---- interruptor liga/desliga ---- */

.interruptor {
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: var(--borda-forte);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.15s;
  margin-top: 2px;
}

.interruptor.ligado {
  background: var(--sucesso);
}

.interruptor-bola {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}

.interruptor.ligado .interruptor-bola {
  left: 19px;
}

.aba-conta {
  margin-left: 5px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
}

/* ---- catálogo ---- */

.cat-grupo {
  margin-bottom: 12px;
}

.cat-grupo-nome {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
  margin: 8px 0 5px;
}

.cat-item {
  padding: 7px 10px;
  border-left: 3px solid var(--primaria);
  background: var(--superficie-2);
  border-radius: 0 var(--r-p) var(--r-p) 0;
  margin-bottom: 4px;
}

.cat-item.futura {
  border-left-color: var(--borda-forte);
  opacity: 0.72;
}

.cat-item-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.cat-item-rotulo {
  font-weight: 600;
  font-size: 12.5px;
}

.cat-item-exemplo {
  font-size: 11.5px;
  color: var(--texto-2);
  font-style: italic;
  margin-top: 2px;
}

.cat-item-nota {
  font-size: 11px;
  color: var(--texto-3);
  margin-top: 3px;
}

/* Regra que vale para todos os quadros: precisa gritar, senão desligar "a
   regra daqui" desliga em todo lugar sem a pessoa perceber. */
.selo-global {
  background: var(--alerta-clara);
  color: var(--alerta);
  font-weight: 700;
}

.selo-novo {
  background: var(--sucesso-clara);
  color: var(--sucesso);
  font-weight: 700;
}

/* O selo de escopo é clicável: é por ele que se muda onde a regra vale. */
.selo-escopo {
  cursor: pointer;
  border: 1px solid transparent;
}

.selo-escopo:hover {
  border-color: var(--borda-forte, var(--borda));
}

/* Contagem ao lado de um título de grupo ou de coluna. */
.contador {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

/* ---- acervo de automações ---- */
/* As regras vêm agrupadas por ONDE valem, com o grupo dizendo quantas são. */

.acervo-cabeca {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
}

.acervo-cabeca h2 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
}

.opcao.desabilitada {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- clientes ---- */

.cli-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cli-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  background: var(--superficie);
  text-align: left;
  cursor: pointer;
}

.cli-item:hover {
  border-color: var(--primaria);
}

.cli-inicial {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--superficie-3);
  color: var(--texto-2);
  font-weight: 700;
  font-size: 13px;
}

.cli-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cli-nome {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 640;
  font-size: 13.5px;
}

.cli-sub {
  font-size: 11.5px;
  color: var(--texto-2);
}

/* A qualificação é o que ela vem buscar: destacada, e pronta para selecionar. */
.cli-qualificacao {
  padding: 11px 13px;
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  background: var(--superficie-2);
  font-size: 13px;
  line-height: 1.55;
  user-select: all;
}

/* Recusa não se mostra igual a autorização: quem bate o olho tem de ver a
   diferença sem ler. */
.cli-qualificacao.recusado {
  background: var(--alerta-clara);
  color: var(--alerta);
  font-weight: 600;
}

.cli-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px 18px;
}

.cli-campo {
  display: flex;
  gap: 7px;
  font-size: 12.5px;
  border-bottom: 1px dotted var(--borda);
  padding-bottom: 3px;
}

.cli-campo-rotulo {
  flex: none;
  min-width: 96px;
  color: var(--texto-2);
}

/* O atalho para a ficha, dentro do cartão. */
.cli-atalho {
  font-weight: 640;
}

/* Parte contrária herdada do quadro: fica apagada, porque é o de sempre. O que
   foi escolhido para AQUELE caso aparece firme — é o que precisa ser notado. */
.mini-btn.sutil-btn {
  opacity: 0.62;
  font-weight: 500;
}

.mini-btn.sutil-btn:hover {
  opacity: 1;
}

/* ---- por quais mãos a tarefa passa ---- */
/* Um procedimento atravessa pessoas — a sênior elabora, a estagiária protocola,
   a controladoria confere. A sequência é a informação mais importante, e tem de
   caber num bate-olho. */

.tarefa-maos {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.tarefa-maos .mao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* "etapa 5 de 5" ao lado do caminho, na lista de tarefas. */
.selo-etapa {
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--superficie-3);
  color: var(--texto-2);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Separador em forma de seta: lê-se como sequência, não como lista. */
.tarefa-maos .seta {
  color: var(--texto-3);
  font-weight: 700;
  font-size: 12px;
}

.tarefa-maos .mao.feita {
  opacity: 0.55;
}

.tarefa-maos .mao.agora {
  background: var(--primaria-clara, var(--superficie-3));
  color: var(--primaria);
  opacity: 1;
}

/* ---- montador ---- */

.auto-editor {
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(280px, 0.85fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 820px) {
  .auto-editor {
    grid-template-columns: 1fr;
  }
}

.auto-editor-previa {
  position: sticky;
  top: 0;
}

.auto-previa {
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--primaria);
  border-radius: var(--r-m);
  padding: 11px 13px;
  margin: 0 0 8px;
  min-height: 90px;
}

.auto-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 7px 0 0 4px;
  padding-left: 10px;
  border-left: 2px dotted var(--borda);
}

/* ---------------------------------------------------------------------------
 * Comentário do robô: o comprido nasce recolhido
 *
 * Ela, em 18/09/2026: "o comentário da intimação limpo, com 'ver orientações'
 * recolhido". A conta do prazo e o texto inteiro da publicação continuam no
 * comentário — são a prova —, mas dobrados, para o comentário seguinte não
 * ficar a quatro telas de distância.
 * ------------------------------------------------------------------------- */

.comentario-texto details {
  margin: 6px 0;
  border-left: 2px solid var(--borda);
  padding-left: 10px;
}

.comentario-texto summary {
  cursor: pointer;
  color: var(--texto-2);
  font-size: 12.5px;
  user-select: none;
}

.comentario-texto summary:hover {
  color: var(--primaria);
}

.comentario-recolhido {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--texto-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
 * Editar texto de várias linhas: com botão de salvar
 *
 * Ela, em 18/09/2026: "botão de salvar ao editar comentário". Sem botão, o
 * único jeito era clicar fora — e quem clica fora acha que está desistindo.
 * ------------------------------------------------------------------------- */

.inline-edit-caixa {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inline-edit-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inline-edit-acoes .sutil {
  font-size: 11.5px;
}

/* ---------------------------------------------------------------------------
 * O "+" entre duas colunas
 *
 * Ela, em 18/09/2026: "coluna nova entre duas colunas". Fica quase invisível
 * até o mouse chegar: num quadro de 25 colunas, 26 botões acesos seriam mais
 * ruído do que ajuda.
 * ------------------------------------------------------------------------- */

.encaixe-lista {
  flex: 0 0 auto;
  align-self: stretch;
  width: 14px;
  margin: 0 -5px;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  background: none;
  border: 0;
  border-radius: var(--r-m);
  color: transparent;
  cursor: pointer;
  transition: color .12s, background .12s;
}

.encaixe-lista:hover,
.encaixe-lista:focus-visible {
  color: var(--primaria);
  background: color-mix(in srgb, var(--primaria) 12%, transparent);
}

/* ---------------------------------------------------------------------------
 * Sub-etapa: o passo dentro do passo
 *
 * Ela, em 18/09/2026: "aquelas questões que a gente deixava as tarefas para a
 * Aline e só marcava ela no último item". O recuo e o fio à esquerda dizem, sem
 * texto, de quem aquele passo é filho.
 * ------------------------------------------------------------------------- */

.sub-etapas {
  margin: 0 0 4px 30px;
  padding-left: 10px;
  border-left: 2px solid var(--borda);
}

.item-sub {
  padding-top: 2px;
  padding-bottom: 2px;
}

.item-sub .item-texto {
  font-size: 13px;
  color: var(--texto-2);
}

/* Sub-etapa não se arrasta sozinha — o cursor tem de dizer isso. */
.item-sub {
  cursor: default;
}

/* ---------------------------------------------------------------------------
 * Consulta periódica
 *
 * Ela: "eu não posso tirar os cartões da lista que eles estão. Só traria o
 * link dos cartões." Por isso a tela é uma LISTA DE LINKS, e cada linha diz
 * onde o cartão está de verdade.
 * ------------------------------------------------------------------------- */

.consulta-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.consulta-historico {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lista-simples {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.consulta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
}

.consulta-item:hover {
  border-color: var(--primaria);
  background: var(--superficie-2);
}

.consulta-item.atrasada {
  border-left: 3px solid var(--perigo, #e05252);
}

.consulta-item.hoje {
  border-left: 3px solid var(--primaria);
}

.consulta-corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.consulta-corpo strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulta-lado {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ponto-quadro {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.selo-atrasado {
  background: color-mix(in srgb, var(--perigo, #e05252) 18%, transparent);
  color: var(--perigo, #e05252);
}

@media (max-width: 720px) {
  .consulta-lado {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * A caixa do WhatsApp
 *
 * Ela: "para a gente não ter que ficar pegando o celular para olhar". Duas
 * colunas, como todo aplicativo de conversa — não por originalidade, mas
 * porque é o formato que todo mundo já sabe usar.
 * ------------------------------------------------------------------------- */

.wpp-tela {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  height: calc(100vh - 210px);
  min-height: 380px;
}

.wpp-lista {
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  background: var(--superficie);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.wpp-busca {
  position: sticky;
  top: 0;
  padding: 8px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.wpp-busca input {
  width: 100%;
}

.wpp-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--borda);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.wpp-linha:hover { background: var(--superficie-2); }
.wpp-linha.ativa { background: color-mix(in srgb, var(--primaria) 12%, transparent); }
.wpp-linha.nova strong { font-weight: 700; }

.wpp-foto {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.wpp-linha-corpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.wpp-linha-topo {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.wpp-previa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}

.wpp-conversa {
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wpp-conversa.vazia {
  align-items: center;
  justify-content: center;
}

.wpp-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
}

.wpp-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpp-balao {
  max-width: 78%;
  padding: 7px 10px;
  border-radius: var(--r-m);
  background: var(--superficie-2);
  align-self: flex-start;
}

/* O que sai do escritório fica do outro lado, como em qualquer conversa. */
.wpp-balao.meu {
  align-self: flex-end;
  background: color-mix(in srgb, var(--primaria) 16%, transparent);
}

.wpp-texto {
  white-space: pre-wrap;
  word-break: break-word;
}

.wpp-rodape { font-size: 11px; margin-top: 3px; }
.wpp-autor { font-size: 11.5px; font-weight: 600; }
.wpp-imagem { max-width: 260px; border-radius: var(--r-s, 6px); display: block; }
.wpp-audio { max-width: 260px; }

.wpp-no-cartao {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.vazio-grande {
  text-align: center;
  padding: 40px 20px;
  color: var(--texto-2);
}

/* Os passos de "ligar o WhatsApp": um de cada vez, numerados. */
.passo h3 {
  font-size: 14px;
  margin: 0 0 6px;
}

.passo {
  margin: 10px 0;
}

.selo-ok {
  background: color-mix(in srgb, var(--sucesso, #17875a) 18%, transparent);
  color: var(--sucesso, #17875a);
}

@media (max-width: 900px) {
  .wpp-tela {
    grid-template-columns: 1fr;
    height: auto;
  }
  .wpp-lista { max-height: 300px; }
}

.auto-param {
  display: grid;
  grid-template-columns: minmax(90px, 34%) 1fr;
  gap: 8px;
  align-items: center;
}

.auto-param-rotulo {
  font-size: 11.5px;
  color: var(--texto-2);
  font-weight: 550;
}

.auto-quando {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.auto-acao-linha {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
}

.auto-acao-n {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primaria-clara);
  color: var(--primaria);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auto-acao-corpo {
  flex: 1;
  min-width: 0;
}

.auto-acao-nome {
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.auto-acao-btns {
  display: flex;
  flex: none;
}

/* ---- histórico ---- */

.auto-hist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 460px;
  overflow: auto;
}

.auto-hist-item {
  padding: 8px 10px;
  border-left: 3px solid var(--sucesso);
  background: var(--superficie-2);
  border-radius: 0 var(--r-p) var(--r-p) 0;
}

.auto-hist-item.falhou {
  border-left-color: var(--perigo);
  background: var(--perigo-clara);
}

.auto-hist-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 11.5px;
}

.auto-hist-quando {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.auto-hist-cartao {
  color: var(--texto-2);
}

.auto-hist-resumo {
  font-size: 11.5px;
  color: var(--texto-2);
  margin-top: 3px;
  line-height: 1.45;
}

.auto-hist-erro {
  font-size: 11.5px;
  color: var(--perigo);
  font-weight: 600;
  margin-top: 3px;
}

/* ============================================================== toast ==== */

.toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px 11px 14px;
  border-radius: var(--r-m);
  background: var(--nav);
  color: #fff;
  box-shadow: var(--sombra-3);
  font-size: 13.5px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.2s, transform 0.2s;
}

.toast.visivel {
  opacity: 1;
  transform: none;
}

.toast-erro {
  background: #b93a3a;
}

.toast-sucesso {
  background: #21774a;
}

.toast span {
  flex: 1;
}

.toast-x {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  padding: 3px;
  border-radius: 5px;
}

.toast-x:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ============================================================== diversos = */

.carregando-tela {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--texto-3);
  gap: 10px;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--borda-forte);
  border-top-color: var(--primaria);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

.estado-vazio {
  text-align: center;
  padding: 46px 20px;
  color: var(--texto-2);
}

.estado-vazio .icon {
  margin: 0 auto 12px;
  color: var(--texto-3);
}

.estado-vazio h3 {
  margin-bottom: 6px;
  color: var(--texto);
  font-size: 15px;
}

.lista-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Caixa de orientação dentro das telas de configuração. */
.destaque-dica {
  margin: 16px 0 0;
  padding: 11px 14px;
  border-left: 3px solid var(--primaria);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--primaria-clara);
  font-size: 13px;
  line-height: 1.5;
}

.destaque-dica.perigo {
  border-left-color: var(--perigo);
  background: var(--perigo-clara);
}

.destaque-dica p {
  margin: 0;
}

.destaque-dica p + p {
  margin-top: 6px;
}

details summary {
  padding: 6px 0;
  font-size: 13.5px;
}

details summary:hover {
  color: var(--primaria);
}

.divisor {
  height: 1px;
  background: var(--borda);
  margin: 14px 0;
}

.rolagem-fina::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--texto-3);
  background-clip: content-box;
}

@media (max-width: 860px) {
  .lateral {
    width: 60px;
  }
  .lateral .logo-texto,
  .lateral .nav-item-texto,
  .lateral .nav-secao,
  .lateral-rodape .nome {
    display: none;
  }
  .nav-item {
    justify-content: center;
  }
  .topo-busca {
    width: auto;
    flex: 1;
  }
}

.login-rodape {
  margin-top: 14px;
  text-align: center;
}

/*
 * O bloco de conferência da intimação.
 *
 * Fica no alto do cartão e com borda de atenção porque é a única coisa ali que
 * está ESPERANDO uma decisão de gente. Depois de confirmado, some.
 */
.auditoria-bloco {
  border: 1px solid var(--alerta);
  border-left-width: 4px;
  border-radius: var(--r-m);
  padding: 12px 14px;
  background: var(--alerta-clara);
}

.auditoria-bloco .secao-titulo {
  color: var(--alerta);
}

/* ============================================== trilha do checklist ======= */

/*
 * As tarefas em sequência, com a atual em destaque. Vem do ProJuris, que ela
 * usava: dentro do processo, ver o caminho e saber em que ponto está.
 *
 * Enrola em várias linhas de propósito. Trilha que rola para o lado esconde o
 * fim do caminho, e o fim é justamente o que ela quer enxergar.
 */
.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  list-style: none;
  margin: 2px 0 10px;
  padding: 0;
}

.trilha-passo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--texto-3);
  padding: 2px 9px 2px 0;
  position: relative;
}

/* A seta entre um passo e o outro. Não aparece depois do último. */
.trilha-passo::after {
  content: "›";
  position: absolute;
  right: 2px;
  color: var(--borda);
  font-size: 13px;
}

.trilha-passo:last-child::after {
  content: none;
}

.trilha-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--borda);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.trilha-passo.feita {
  color: var(--texto-3);
}

.trilha-passo.feita .trilha-marca {
  background: var(--sucesso-clara);
  border-color: var(--sucesso);
  color: var(--sucesso);
}

.trilha-passo.feita .trilha-texto {
  text-decoration: line-through;
}

/*
 * A etapa de agora. Negrito E cor E a bolinha preenchida — três sinais, porque
 * só a cor deixa de fora quem não a distingue.
 */
.trilha-passo.atual {
  color: var(--texto);
  font-weight: 700;
}

.trilha-passo.atual .trilha-marca {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}

.trilha-passo.futura .trilha-marca {
  background: var(--superficie-3);
}

/*
 * O nome da etapa pendente na frente do cartão. Corta com reticências: o
 * cartão é estreito, e o começo do nome já identifica o passo.
 */
.selo-etapa {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--texto-2);
}

/* ====================================================== segundo fator ===== */

.dois-estado {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: var(--superficie-3);
  color: var(--texto-2);
  margin-bottom: 12px;
}

.dois-estado.ligado {
  background: var(--sucesso-clara);
  color: var(--sucesso);
}

.dois-estado .icon {
  flex: none;
  margin-top: 2px;
}

.dois-passos {
  margin: 4px 0 12px;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--texto-2);
  line-height: 1.8;
}

/*
 * O segredo é para ser DIGITADO no celular, olhando da tela. Fonte de largura
 * fixa, corpo grande e espaçamento entre letras: é o que separa um "0" de um
 * "O" na hora de copiar à mão.
 */
.dois-segredo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--borda);
  border-radius: var(--r-m);
  background: var(--superficie-3);
  margin-bottom: 10px;
}

.dois-segredo code {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 1.5px;
  word-break: break-all;
  user-select: all;
}

.dois-codigos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.dois-codigos code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
  padding: 7px 4px;
  border: 1px solid var(--borda);
  border-radius: var(--r-p);
  background: var(--superficie-3);
  user-select: all;
}

.dois-admin {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

.dois-admin h4 {
  margin: 0 0 8px;
}

.linha-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* Aviso genérico dentro de diálogo: fundo de atenção, sem depender da cor. */
.aviso {
  padding: 9px 11px;
  border-radius: var(--r-m);
  background: var(--alerta-clara);
  border-left: 3px solid var(--alerta);
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 10px;
}

/*
 * Campo de código: seis dígitos, nada mais. Grande e espaçado porque é digitado
 * com o celular na outra mão, contra o relógio dos 30 segundos.
 */
.campo-codigo {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
}

@media print {
  /* Imprimir os códigos de recuperação: só eles, sem o programa em volta. */
  body > *:not(.modal-fundo) { display: none !important; }
  .modal-fundo, .modal { position: static !important; box-shadow: none !important; }
  .modal-acoes, .modal-fechar { display: none !important; }

  /*
   * E o relatório de prazos. Os controles somem: no papel, "De / Até / Agrupar
   * / Colunas" é ruído — o que vale é o recorte já aplicado, que está escrito
   * no cabeçalho da saída.
   */
  .relatorio-controles, .relatorio-colunas, .modal .sutil:first-of-type { display: none !important; }
  .relatorio-saida { max-height: none !important; overflow: visible !important; }
  .relatorio-tabela { font-size: 10pt; }
  /* Grupo não se parte entre páginas quando cabe inteiro. */
  .relatorio-grupo { break-inside: avoid; }
  .relatorio-tabela thead { display: table-header-group; }
}

/* ---------------------------------------------------------------------------
   Relatório de prazos do calendário
--------------------------------------------------------------------------- */
.relatorio-controles {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 10px;
}

.relatorio-controles label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.relatorio-colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.relatorio-saida {
  margin-top: 14px;
  max-height: 46vh;
  overflow: auto;
  border-top: 1px solid var(--borda);
  padding-top: 10px;
}

.relatorio-grupo-linha td {
  font-weight: 600;
  font-size: 13px;
  padding-top: 14px !important;
  border-top: none !important;
  color: var(--texto);
}

.relatorio-grupo:first-of-type .relatorio-grupo-linha td { padding-top: 4px !important; }

.relatorio-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.relatorio-tabela th {
  text-align: left;
  font-weight: 600;
  padding: 4px 8px 4px 0;
  color: var(--texto-2);
  white-space: nowrap;
}

.relatorio-tabela td {
  padding: 4px 8px 4px 0;
  border-top: 1px solid var(--borda);
  vertical-align: top;
}

.relatorio-tabela tr.atrasado td { color: #8a2020; }
.relatorio-tabela tr.feito td { color: var(--texto-2); text-decoration: line-through; }

/* Quem responde, no calendário, é clicável: abre a troca de pessoa e de data. */
.cal-quem-clicavel { cursor: pointer; border-radius: 4px; }
.cal-quem-clicavel:hover { outline: 2px solid var(--primaria, #3a8fd9); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
   Contatos de um cadastro — a Sandra do RH, o ramal da junta.
   Linha larga com os botões de ligar e WhatsApp à direita; no celular
   os botões caem para baixo em vez de espremer o nome.
--------------------------------------------------------------------------- */
.contato-linha {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda, #e6e8ec);
}
.contato-novo {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.contato-novo input { flex: 1 1 8rem; min-width: 0; }

/* ---------------------------------------------------------------------------
   Caixa do escritório. Tabela, e não quadro — ninguém arrasta o aluguel por
   colunas. Entrada em verde, saída em vermelho, e o saldo negativo carrega o
   sinal de menos além da cor: cor sozinha não serve para quem não distingue as
   duas, e sinal sozinho passa batido de relance.
--------------------------------------------------------------------------- */
.caixa-filtro,
.caixa-novo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.caixa-novo { padding: 12px; background: var(--fundo-2, #f5f6f8); border-radius: 8px; }
.caixa-novo input[type="text"] { flex: 1 1 10rem; min-width: 0; }
.caixa-totais {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid var(--borda, #e6e8ec);
  border-radius: 8px;
}
.caixa-totais > div { display: flex; flex-direction: column; gap: 2px; }
.caixa-totais .caixa-saldo strong { font-size: 1.35em; }
.caixa-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.caixa-tabela td, .caixa-tabela th { padding: 7px 10px; }
.entrada { color: #17875a; }
.saida { color: #8e2436; }
.caixa-resumo { margin-top: 18px; }
.caixa-resumo summary { cursor: pointer; }
@media (max-width: 720px) {
  .caixa-totais { gap: 12px; }
  .caixa-tabela { display: block; overflow-x: auto; }
}

/* As contas do caixa: onde o dinheiro está. Disponível em destaque, reserva à
   parte — somar tudo faria parecer que há 178 mil para gastar quando há 8,9 mil. */
.caixa-contas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: -6px 0 16px;
}
.caixa-conta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 12px;
  border: 1px solid var(--borda, #e6e8ec);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Caixa — refeito depois de ela dizer que a tela estava confusa.
   Um número grande (o disponível), o resto pequeno, e a análise em sanfona.
--------------------------------------------------------------------------- */
.caixa-topo { margin-bottom: 20px; }
.caixa-principal { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.caixa-principal strong { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.caixa-contas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.caixa-conta {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 7px 14px; border: 1px solid var(--borda, #e6e8ec);
  border-radius: 10px; background: none; cursor: pointer; text-align: left;
  font: inherit; font-variant-numeric: tabular-nums;
}
.caixa-conta:hover { border-color: var(--primaria, #5b5bd6); }
.caixa-conta.velha { border-style: dashed; }
.caixa-conta.mover { justify-content: center; color: var(--sutil, #6b7280); }

.caixa-lancar { padding: 14px; background: var(--fundo-2, #f5f6f8); border-radius: 10px; margin-bottom: 16px; }
.caixa-lancar .linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.caixa-lancar .cresce { flex: 1 1 16rem; min-width: 0; }
.caixa-lancar .valor { flex: 0 0 7rem; }
.caixa-lancar details { margin-top: 10px; }
.caixa-lancar details .linha { margin-top: 8px; }

.caixa-periodo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.caixa-periodo > .sutil { margin-left: auto; }

.caixa-tabela td { padding: 8px 10px; vertical-align: top; }
.caixa-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.caixa-tabela .acoes { white-space: nowrap; text-align: right; }
.caixa-fundo { margin-top: 26px; }
.caixa-fundo details { padding: 8px 0; border-top: 1px solid var(--borda, #e6e8ec); }
.caixa-fundo summary { cursor: pointer; }

@media (max-width: 720px) {
  .caixa-principal strong { font-size: 1.6rem; }
  .caixa-periodo > .sutil { margin-left: 0; width: 100%; }
}

/* A bolinha da categoria: vem ANTES do nome, nunca no lugar dele. Cor sozinha
   não serve para quem não distingue as duas, e a tabela precisa continuar
   legível em preto e branco. */
.ponto-cat {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}

/* ---------------------------------------------------------------------------
   Caixa — abas, previsto e realizado.
   Refeito a partir das referências dela (Astrea e ProJuris): abas em vez de
   tudo empilhado, estado como filtro, categoria em etiqueta colorida, seta no
   lugar da palavra. Cor nunca é o único sinal.
--------------------------------------------------------------------------- */
.cx-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda, #e6e8ec); margin-bottom: 18px; }
.cx-aba {
  padding: 9px 16px; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--sutil, #6b7280); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cx-aba.ativa { color: var(--primaria, #5b5bd6); border-bottom-color: var(--primaria, #5b5bd6); font-weight: 600; }

.cx-topo { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.cx-numero { display: flex; flex-direction: column; gap: 2px; }
.cx-numero strong { font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cx-contas { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.cx-conta {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 6px 12px; border: 1px solid var(--borda, #e6e8ec); border-radius: 9px;
  background: none; cursor: pointer; font: inherit; text-align: left;
  font-variant-numeric: tabular-nums;
}
.cx-conta:hover { border-color: var(--primaria, #5b5bd6); }

.cx-mes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.cx-mes > strong { min-width: 10rem; }
.cx-mes .btn-primario { margin-left: auto; }
.cx-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cx-filtro {
  padding: 5px 12px; border: 1px solid var(--borda, #e6e8ec); border-radius: 999px;
  background: none; cursor: pointer; font: inherit; font-size: .92em;
}
.cx-filtro.ativo { border-color: var(--primaria, #5b5bd6); color: var(--primaria, #5b5bd6); font-weight: 600; }
.cx-filtro.alerta { border-color: #8e2436; color: #8e2436; }
.cx-conta-n { margin-left: 6px; font-weight: 700; }
.cx-resumo-mes { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cx-resumo-mes > a { margin-left: auto; }

.cx-tabela td { padding: 8px 10px; vertical-align: top; }
.cx-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-tabela .cx-check, .cx-tabela .cx-seta { width: 1%; white-space: nowrap; }
.cx-tabela .cx-acoes { white-space: nowrap; text-align: right; }
.cx-seta { font-size: 1.1em; }
/* Linha prevista fica esmaecida; atrasada ganha barra vermelha à esquerda.
   A palavra ATRASADO também aparece escrita, para não depender da cor. */
.cx-linha.pendente td { opacity: .72; }
.cx-linha.atrasado { box-shadow: inset 3px 0 0 #8e2436; }

.cx-etiqueta {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  color: #fff; font-size: .8em; font-weight: 600; white-space: nowrap;
}
.cx-destaque { font-size: 1.6rem; font-weight: 700; margin: 4px 0; }

@media (max-width: 720px) {
  .cx-topo { gap: 14px; }
  .cx-numero strong { font-size: 1.4rem; }
  .cx-mes .btn-primario, .cx-resumo-mes > a { margin-left: 0; }
  .cx-tabela { display: block; overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   E-mail dentro do cartao. A aba "E-mail", com procurar e escrever.
   --------------------------------------------------------------------------- */
.email-bloco { display: flex; flex-direction: column; gap: 12px; }
.email-lista { display: flex; flex-direction: column; gap: 10px; }
.email-item {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--fundo-2);
}
/* O que chegou e ninguem abriu ganha a barra lateral: e o "New" visto de longe. */
.email-item.nao-lido { border-left: 3px solid var(--alerta, #c0392b); }
.email-cabeca { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.email-corpo {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.86rem;
  margin: 6px 0 0;
  max-height: 16rem;
  overflow-y: auto;
  color: var(--texto-2);
}
.email-acoes { display: flex; gap: 12px; margin-top: 6px; }
.email-secao { border-top: 1px solid var(--borda); padding-top: 10px; }
.email-secao > summary { cursor: pointer; font-weight: 600; }
.email-form { display: flex; gap: 8px; margin-top: 8px; }
.email-form > input { flex: 1; }
.email-form-coluna { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.email-achados { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.email-achado {
  border: 1px dashed var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
}
.email-achado > button { margin-top: 6px; }

/* Caixas de e-mail na tela de credenciais. */
.caixa-linha {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid var(--borda);
  padding: 10px 0;
}
.caixa-acoes { display: flex; gap: 10px; flex-shrink: 0; }

/* Conversa de e-mail dentro do cartao. */
.email-conversa { border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.email-conversa-cabeca {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: var(--fundo-2); border: 0; padding: 8px 10px;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.email-conversa-cabeca:hover { background: var(--fundo-3, var(--fundo-2)); }
.email-conversa-corpo { display: flex; flex-direction: column; gap: 8px; }
.email-conversa-corpo:not(:empty) { padding: 8px 10px; }
.email-conversa-corpo .email-item { border: 0; border-left: 3px solid var(--borda); border-radius: 0; }
.email-conversa-corpo .email-item.nao-lido { border-left-color: var(--alerta, #c0392b); }
.email-anexos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.email-anexo {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--borda); border-radius: 6px;
  padding: 3px 8px; font-size: 0.82rem; text-decoration: none; color: inherit;
}
.email-anexo:hover { background: var(--fundo-2); }

/* O e-mail na coluna larga: linhas mais generosas, porque agora ha espaco. */
.cartao-col-principal .email-corpo { max-height: 28rem; font-size: 0.9rem; line-height: 1.55; }
.cartao-col-principal .email-conversa-cabeca { padding: 10px 12px; }
.cartao-col-principal .email-item { padding: 12px 14px; }

/* Responder: destaca o formulario quando ele esta pendurado numa conversa. */
.email-secao.respondendo { border-left: 3px solid var(--primaria, #3a8fd9); padding-left: 10px; }
.email-secao input[type=file] { font-size: 0.85rem; }