/* ADA — tema da marca. Sem build step: só sobrescreve variáveis do Bootstrap 5.3. */

/* ===== Fonte Inter (vendorizada em /vendor/inter) ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/inter/inter.woff2') format('woff2');
}

/* ===== Paleta da marca + tokens globais ===== */
:root, [data-bs-theme="light"] {
  /* Paleta oficial da marca (quadro de identidade, 2026-09-10). Cor nova sai
     daqui; hex solto numa regra é o que faz um tema divergir do outro. */
  --ada-blue:      #1964CF;   /* azul profundo — primária: botão, link, ativo */
  --ada-azul:      #2277C9;   /* azul — meio do degradê do logo */
  --ada-ciano:     #28B6E7;   /* ciano — primária no escuro, onde o profundo some */
  --ada-green:     #2EBC71;   /* verde — só preenchimento: como texto sobre branco
                                 dá 2,5:1; texto verde usa o tom escuro #12945C */
  --ada-slate:     #4A4A71;   /* grafite — base do texto secundário */
  --ada-blue-rgb:  25, 100, 207;
  --ada-ciano-rgb: 40, 182, 231;
  --ada-green-rgb: 46, 188, 113;
  /* Degradê do logo, da esquerda pra direita. Nos avatares o meio cai no azul,
     que é onde fica a inicial branca — sobre ciano ou verde ela não se lê. */
  --ada-degrade: linear-gradient(135deg, var(--ada-blue) 0%, var(--ada-azul) 45%, var(--ada-ciano) 80%, var(--ada-green) 100%);
  /* Pasta é amarela porque é assim em todo sistema de arquivos que a pessoa já
     usou — a cor faz o reconhecimento antes da leitura. Fica fora da paleta da
     marca de propósito: aqui ela não representa a ADA, representa "pasta". */
  --ada-pasta:     #D99A00;
  --ada-pasta-rgb: 217, 154, 0;
  --ada-blue-hover:  #1556B3;
  --ada-blue-active: #124A9C;
  /* Tom claro do ciano para texto e traço sobre o marinho do tema escuro. */
  --ada-ciano-claro: #6FCDF0;
  /* DESTAQUE é a cor de texto, ícone, traço e fundo leve "da marca" — o que não
     é preenchimento de botão. No claro é o azul profundo; no escuro vira o ciano
     claro, porque azul profundo sobre marinho some. Botão cheio continua no azul
     profundo nos dois temas: letra branca sobre ciano não passa de 2,4:1. */
  --ada-destaque: var(--ada-blue);
  --ada-destaque-rgb: 25, 100, 207;
  /* Vidro da tela de entrada: moldura translúcida, painel de dentro e campo. */
  --ada-vidro: rgba(255, 255, 255, .4);
  --ada-vidro-borda: rgba(255, 255, 255, .8);
  --ada-vidro-painel: rgba(255, 255, 255, .16);
  --ada-vidro-painel-cheio: #EEF1F6;
  --ada-vidro-campo: #ffffff;
  --ada-vidro-reflexo: rgba(255, 255, 255, .9);
  --ada-esfera-luz: rgba(255, 255, 255, .92);
  /* Barra de navegação (minimalista). */
  --ada-barra: rgba(255, 255, 255, .6);
  --ada-barra-borda: rgba(255, 255, 255, .95);
  --ada-barra-borda-forte: #D9DFEA;
  --ada-barra-texto: #5A6275;

  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bs-primary: var(--ada-blue);
  --bs-primary-rgb: 25, 100, 207;
  --bs-link-color: var(--ada-blue);
  --bs-link-color-rgb: 25, 100, 207;
  --bs-link-hover-color: var(--ada-blue-active);
  --bs-link-hover-color-rgb: 18, 74, 156;
  --bs-border-radius: .625rem;
}

body { font-family: var(--bs-font-sans-serif); }

/* ===== Temas ===== */
[data-bs-theme="light"] {
  --bs-body-bg: #F3F6FB;
  --bs-body-bg-rgb: 243, 246, 251;
  --bs-body-color: #1F2638;
  --bs-secondary-color: rgba(74, 74, 113, .85);
  --bs-border-color: #E2E8F1;
  --bs-tertiary-bg: #ffffff;
}
/* O escuro é o azul-marinho das aplicações da marca, não cinza: o quadro de
   identidade só mostra a ADA sobre marinho. O hex não vem no quadro — estes são
   a aproximação, e ficam aqui para serem afinados num lugar só. */
[data-bs-theme="dark"] {
  /* No escuro o âmbar precisa clarear pra manter contraste com o fundo. */
  --ada-pasta:     #F0B429;
  --ada-pasta-rgb: 240, 180, 41;
  --bs-body-bg: #0B1426;
  --bs-body-bg-rgb: 11, 20, 38;
  --bs-body-color: #DCE3EE;
  --bs-secondary-color: rgba(200, 212, 234, .7);
  --bs-tertiary-bg: #111D33;
  --bs-secondary-bg: #16233D;
  --ada-destaque: var(--ada-ciano-claro);
  --ada-destaque-rgb: 111, 205, 240;
  --ada-escuro-modal: #13213B;
  --ada-escuro-tarjeta: #182843;
  --ada-vidro: rgba(255, 255, 255, .06);
  --ada-vidro-borda: rgba(255, 255, 255, .14);
  --ada-vidro-painel: rgba(10, 18, 34, .2);
  --ada-vidro-painel-cheio: #0E182C;
  --ada-vidro-campo: rgba(255, 255, 255, .07);
  --ada-vidro-reflexo: rgba(255, 255, 255, .12);
  --ada-esfera-luz: rgba(255, 255, 255, .35);
  --ada-barra: rgba(17, 29, 51, .6);
  --ada-barra-borda: rgba(255, 255, 255, .08);
  --ada-barra-borda-forte: rgba(255, 255, 255, .16);
  --ada-barra-texto: rgba(220, 227, 238, .62);
  --bs-primary: var(--ada-ciano);
  --bs-primary-rgb: 40, 182, 231;
  --bs-link-color: #4CC3EC;
  --bs-link-color-rgb: 76, 195, 236;
  --bs-link-hover-color: #8AD8F3;
  --bs-link-hover-color-rgb: 138, 216, 243;
  --bs-border-color: #1F2C45;
}

/* ===== Componentes Bootstrap na cor da marca ===== */
/* Os controles próprios da ADA (busca, seletor, paginação) usam raio 8–10px; o
   padrão do Bootstrap é 6px. Alinhar os botões àquele raio faz a tela parecer um
   sistema só, em vez de peças de duas origens encostadas. */
.btn {
  --bs-btn-border-radius: 9px;
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: .92rem;
  --bs-btn-font-weight: 500;
}
.btn-sm { --bs-btn-border-radius: 7px; --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .82rem; }
.btn-lg { --bs-btn-border-radius: 11px; }

.btn-primary {
  --bs-btn-bg: var(--ada-blue);
  --bs-btn-border-color: var(--ada-blue);
  --bs-btn-hover-bg: var(--ada-blue-hover);
  --bs-btn-hover-border-color: var(--ada-blue-hover);
  --bs-btn-active-bg: var(--ada-blue-active);
  --bs-btn-active-border-color: var(--ada-blue-active);
  --bs-btn-disabled-bg: var(--ada-blue);
  --bs-btn-disabled-border-color: var(--ada-blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--ada-blue);
  --bs-btn-border-color: var(--ada-blue);
  --bs-btn-hover-bg: var(--ada-blue);
  --bs-btn-hover-border-color: var(--ada-blue);
  --bs-btn-active-bg: var(--ada-blue-active);
  --bs-btn-active-border-color: var(--ada-blue-active);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ada-ciano);
  box-shadow: 0 0 0 .2rem rgba(var(--ada-destaque-rgb), .18);
}
.form-control[readonly] { background-color: rgba(74, 74, 113, .06); cursor: not-allowed; }
[data-bs-theme="dark"] .form-control[readonly] { background-color: rgba(255, 255, 255, .05); }
.card { border-color: var(--bs-border-color); }

/* Modal — fundo branco (senão fica apagado no cinza da página) + sombra e backdrop mais fortes */
.modal {
  --bs-modal-bg: var(--bs-tertiary-bg, #fff);
  --bs-modal-border-color: var(--bs-border-color);
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-border-radius: 16px;
}
.modal-content { box-shadow: 0 24px 60px rgba(16, 40, 80, .28); }
.modal-backdrop.show { opacity: .55; }
[data-bs-theme="dark"] .modal { --bs-modal-bg: var(--ada-escuro-modal); }
.form-label { font-weight: 500; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.ada-page-title { font-weight: 700; }
.ada-section-title {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ada-slate);
}

/* ===== Cartões / modo visualização ===== */
.ada-card {
  background: var(--bs-tertiary-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(20, 45, 85, .05);
}
[data-bs-theme="dark"] .ada-card { box-shadow: none; }

/* Título da página: fora do cartão, com respiro pra navbar acima e o cartão abaixo. */
.ada-page-head { margin: .25rem 0 1.5rem; }

/* ===== Listagem: cabeçalho no topo do cartão =====
   Título à esquerda, busca e ação principal à direita, separados dos dados por
   uma linha. O `margin-left:auto` das ações as mantém à direita mesmo quando o
   título quebra pra outra linha no mobile. */
.ada-lista-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1.25rem; flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.ada-lista-titulo { margin: 0; font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em; }
.ada-lista-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-left: auto; }

/* ===== Campo de busca =====
   Input + botão num controle só. O :focus-within acende a moldura inteira, pra
   ler como um componente e não como duas peças encostadas. */
.ada-busca {
  display: flex; align-items: stretch;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ada-busca:hover { border-color: var(--bs-secondary-color); }
.ada-busca:focus-within {
  border-color: var(--ada-destaque);
  box-shadow: 0 0 0 3px rgba(var(--ada-destaque-rgb), .15);
}
.ada-busca-ico {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding-left: .7rem; color: var(--bs-secondary-color);
}
.ada-busca:focus-within .ada-busca-ico { color: var(--ada-destaque); }
.ada-busca-ico svg { width: 15px; height: 15px; }
.ada-busca-input {
  flex: 1 1 auto; min-width: 13rem; width: 100%;
  border: 0; background: transparent; outline: none; box-shadow: none;
  padding: .45rem .6rem; font-size: .9rem; color: var(--bs-body-color);
}
.ada-busca-input::placeholder { color: var(--bs-secondary-color); opacity: .85; }
/* O "x" nativo do input[type=search] some no tema escuro; este o deixa visível
   e do tamanho certo nos dois temas. */
.ada-busca-input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; cursor: pointer; opacity: .45;
  background: currentColor;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
          mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.ada-busca-input::-webkit-search-cancel-button:hover { opacity: .9; }
.ada-busca-btn {
  flex-shrink: 0; border: 0; border-left: 1px solid var(--bs-border-color);
  border-radius: 0 9px 9px 0; background: transparent;
  padding: 0 .95rem; font-size: .88rem; font-weight: 500;
  color: var(--bs-secondary-color); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ada-busca-btn:hover { background: rgba(var(--ada-destaque-rgb), .08); color: var(--ada-destaque); }
.ada-busca-btn:active { background: rgba(var(--ada-destaque-rgb), .14); }

/* ===== Retorno das consultas externas (CNPJ, CEP, CPF) =====
   Ocupa a linha inteira do formulário, não a coluna de um campo — a mensagem é
   sobre o preenchimento todo, e espremida num col-md-4 ela quebrava feio.
   :empty a esconde enquanto não há nada a dizer. */
/* ===== Seletor da ADA (substitui o <select> nativo) =====
   O menu do <select> é desenhado pelo sistema operacional e ignora o tema; este
   é um dropdown do Bootstrap, então segue claro/escuro como o resto da tela. */
.ada-select .ada-select-btn { cursor: pointer; }
.ada-select .ada-select-btn::after { display: none; }  /* a seta já vem do form-select */
.ada-select .ada-select-btn[aria-expanded="true"] {
  border-color: var(--ada-destaque); box-shadow: 0 0 0 3px rgba(var(--ada-destaque-rgb), .15);
}
.ada-select-placeholder { color: var(--bs-secondary-color); }
/* Busca no próprio campo do seletor: aberto, o rótulo some e o cursor fica ali. */
.ada-select-digita { display: none; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.ada-select.buscando .ada-select-digita { display: block; }
/* Só o rótulo do GATILHO: os itens do menu também têm data-rotulo. */
.ada-select.buscando .ada-select-btn > [data-rotulo],
.ada-select.buscando .ada-select-btn > [data-rotulo-multi] { display: none !important; }
.ada-select-menu {
  width: 100%; min-width: max-content; padding: .3rem;
  border-radius: 11px; border-color: var(--bs-border-color);
  box-shadow: 0 8px 24px rgba(20, 45, 85, .13);
  max-height: 17rem; overflow-y: auto;
}
.ada-select-menu .dropdown-item {
  display: flex; align-items: center; gap: .45rem;
  border-radius: 7px; padding: .45rem .55rem; font-size: .92rem;
}
.ada-select-menu .dropdown-item:hover { background: rgba(var(--ada-destaque-rgb), .09); color: var(--ada-destaque); }
.ada-select-menu .dropdown-item.active { background: rgba(var(--ada-destaque-rgb), .13); color: var(--ada-destaque); font-weight: 600; }
.ada-select-check { width: 14px; height: 14px; flex-shrink: 0; display: inline-flex; color: var(--ada-destaque); }
.ada-select-rotulo { flex: 1 1 auto; }
.ada-select-nota { font-size: .78rem; color: var(--bs-secondary-color); }
.ada-select-vazio .ada-select-rotulo { color: var(--bs-secondary-color); }
/* Opção-atalho do seletor (acao: true), ex.: "Cliente eventual": cara de ação. */
.ada-select-menu .ada-select-acao { color: var(--ada-destaque); font-weight: 600; }
.ada-select-acao .ada-select-nota { font-weight: 400; }
.ada-select-acao-ico {
  width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ada-blue); color: #fff;
}
.ada-select-acao-ico svg { width: 12px; height: 12px; }
.ada-select-sep { height: 1px; margin: .3rem .35rem; background: var(--bs-border-color); }

/* ===== Competência: grade de meses num dropdown ===== */
.ada-competencia .ada-competencia-btn { cursor: pointer; }
.ada-competencia .ada-competencia-btn[aria-expanded="true"] {
  border-color: var(--ada-destaque); box-shadow: 0 0 0 3px rgba(var(--ada-destaque-rgb), .15);
}
.ada-competencia-vazio { color: var(--bs-secondary-color); }
.ada-competencia-menu {
  padding: .6rem; min-width: 17rem; border-radius: 12px;
  border-color: var(--bs-border-color); box-shadow: 0 8px 24px rgba(20, 45, 85, .13);
}
.ada-competencia-ano {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.ada-competencia-nav {
  width: 1.9rem; height: 1.9rem; border: 0; border-radius: 7px;
  background: transparent; color: var(--bs-body-color); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.ada-competencia-nav:hover:not(:disabled) { background: rgba(var(--ada-destaque-rgb), .09); color: var(--ada-destaque); }
.ada-competencia-nav:disabled { opacity: .3; cursor: default; }
.ada-competencia-meses { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.ada-mes {
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  padding: .45rem .2rem; font-size: .85rem; font-weight: 500; color: var(--bs-body-color);
}
.ada-mes:hover { background: rgba(var(--ada-destaque-rgb), .09); color: var(--ada-destaque); }
.ada-mes.ativo { background: var(--ada-blue); color: #fff; font-weight: 600; }
.ada-competencia-limpar {
  display: block; width: 100%; margin-top: .5rem; padding: .35rem;
  border: 0; border-top: 1px solid var(--bs-border-color); background: transparent;
  font-size: .82rem; color: var(--bs-secondary-color); cursor: pointer;
}
.ada-competencia-limpar:hover { color: var(--ada-destaque); }

/* ===== Atividades (CNAE) =====
   Lista de linhas em vez de tabela: a estrela marca a principal e dispensa uma
   coluna de cabeçalho só pra dizer "Principal". */
.ada-atividades { display: flex; flex-direction: column; gap: .45rem; }
.ada-atividade-linha { display: flex; align-items: center; gap: .5rem; }
/* A LARGURA fixa fica no rótulo (que não tem fundo), pra coluna do código alinhar
   entre as linhas. A etiqueta lá dentro abraça o próprio texto — com min-width
   nela, virava um retângulo largo com a palavra pequena boiando no meio. */
.ada-principal-escolha { flex-shrink: 0; cursor: pointer; user-select: none; width: 5.4rem; }
.ada-principal-escolha input { position: absolute; opacity: 0; width: 0; height: 0; }
/* A palavra fica sempre visível — acesa na escolhida, apagada nas outras. Assim
   não há símbolo pra decifrar nem cabeçalho de coluna pra explicar.
   Mesma forma da etiqueta da ficha (.ada-atividade-principal): o que se marca no
   formulário é exatamente o que se lê depois, então marcar e ler têm a mesma
   aparência. A pílula azul preenchida pesava mais que o próprio código do CNAE. */
.ada-principal-pill {
  display: inline-block; padding: .12rem .4rem; padding-right: calc(.4rem - .04em); border-radius: 5px;
  background: transparent;   /* não marcada não desenha caixa nenhuma */
  font-size: .67rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color); opacity: .55;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.ada-principal-escolha:hover .ada-principal-pill { opacity: 1; color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .07); }
.ada-principal-escolha input:checked ~ .ada-principal-pill {
  background: rgba(var(--ada-destaque-rgb), .1); color: var(--ada-destaque); opacity: 1;
}
[data-bs-theme="dark"] .ada-principal-escolha input:checked ~ .ada-principal-pill {
  background: rgba(var(--ada-destaque-rgb), .13); color: var(--ada-ciano-claro);
}
.ada-principal-escolha input:focus-visible ~ .ada-principal-pill { outline: 2px solid var(--ada-destaque); outline-offset: 2px; }
.ada-cnae-codigo { width: 8.2rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ada-cnae-desc { flex: 1 1 auto; min-width: 0; }
.ada-atividade-remover {
  width: 2.1rem; height: 2.1rem; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--bs-secondary-color); cursor: pointer;
}
.ada-atividade-remover svg { width: 16px; height: 16px; }
.ada-atividade-remover:hover { background: rgba(220, 53, 69, .1); color: #dc3545; }
/* Recuo até a coluna do código, agora que a etiqueta encolheu. */
.ada-atividade-aviso { margin: .25rem 0 0 5.4rem; font-size: .8rem; color: var(--bs-secondary-color); }
.ada-atividade-aviso:empty { display: none; }
.ada-atividade-aviso.erro { color: #b02a37; }
[data-bs-theme="dark"] .ada-atividade-aviso.erro { color: #ff8b96; }

@media (max-width: 575.98px) {
  .ada-atividade-linha { flex-wrap: wrap; }
  .ada-cnae-codigo { width: 7rem; }
  .ada-cnae-desc { flex: 1 1 100%; order: 3; }
  .ada-atividade-aviso { margin-left: 0; }
}

/* Botão com ícone: flex alinha o SVG ao texto pela caixa, não pela linha de
   base — que é o que fazia o lápis ficar torto e alto demais. */
.ada-btn-ico { display: inline-flex; align-items: center; gap: .45rem; }
.ada-btn-ico svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Par Voltar/ação do topo da ficha, portado do SGF (detail-voltar-btn e
   detail-acoes-btn em routes/vendas/vendas.detail.view.js). Mantém o mesmo
   modelo mental entre os dois sistemas, que é a razão de a ADA seguir as
   convenções de lá. Cor do tinte trocada pelo azul da ADA. */
.ada-voltar-btn, .ada-btn-acao {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 10px; font-size: .85rem; line-height: 1.2; font-weight: 500;
  text-decoration: none; transition: all .2s;
}
.ada-voltar-btn svg, .ada-btn-acao svg { width: 15px; height: 15px; flex-shrink: 0; }

.ada-voltar-btn {
  background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .08);
  color: var(--bs-body-color); padding: 9px 14px;
}
.ada-voltar-btn:hover, .ada-voltar-btn:focus {
  background: rgba(0, 0, 0, .07); border-color: rgba(0, 0, 0, .12); color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ada-voltar-btn { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
[data-bs-theme="dark"] .ada-voltar-btn:hover,
[data-bs-theme="dark"] .ada-voltar-btn:focus { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); }

/* Ação da ficha: azul lavado em vez de preenchido — presente sem gritar ao lado
   do Voltar neutro. */
.ada-btn-acao {
  background: rgba(var(--ada-destaque-rgb), .1); border: 1px solid rgba(var(--ada-destaque-rgb), .2);
  color: var(--ada-destaque); padding: 9px 14px;
}
.ada-btn-acao:hover, .ada-btn-acao:focus, .ada-btn-acao.show {
  background: rgba(var(--ada-destaque-rgb), .2); border-color: rgba(var(--ada-destaque-rgb), .35); color: var(--ada-destaque);
}
/* Sem isto o botão travado ficava idêntico ao clicável — parecia quebrado. */
.ada-btn-acao:disabled, .ada-btn-acao[disabled] {
  background: transparent; border-color: var(--bs-border-color);
  color: var(--bs-secondary-color); opacity: .6; cursor: not-allowed;
}
.ada-btn-acao:disabled:hover, .ada-btn-acao[disabled]:hover {
  background: transparent; border-color: var(--bs-border-color); color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .ada-btn-acao { color: var(--ada-ciano-claro); background: rgba(var(--ada-destaque-rgb), .12); border-color: rgba(var(--ada-destaque-rgb), .22); }
[data-bs-theme="dark"] .ada-btn-acao:hover,
[data-bs-theme="dark"] .ada-btn-acao:focus { background: rgba(var(--ada-destaque-rgb), .2); border-color: rgba(var(--ada-destaque-rgb), .35); color: var(--ada-ciano-claro); }

/* ===== Escolha de empresas (vincular sócio a várias de uma vez) ===== */
.ada-empresas-escolha {
  border: 1px solid var(--bs-border-color); border-radius: 10px;
  max-height: 13rem; overflow-y: auto; padding: .25rem;
}
.ada-empresa-opcao {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 8px; cursor: pointer;
}
.ada-empresa-opcao:hover { background: rgba(var(--ada-destaque-rgb), .06); }
.ada-empresa-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.ada-empresa-marca {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 5px;
  border: 1.5px solid var(--bs-border-color); position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}
.ada-empresa-opcao input:checked ~ .ada-empresa-marca {
  background: var(--ada-blue); border-color: var(--ada-blue);
}
.ada-empresa-opcao input:checked ~ .ada-empresa-marca::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ada-empresa-opcao input:focus-visible ~ .ada-empresa-marca { outline: 2px solid var(--ada-destaque); outline-offset: 2px; }
.ada-empresa-nome { flex: 1 1 auto; font-size: .92rem; }
.ada-empresa-cnpj { font-size: .8rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

/* ===== Marca do escritório (Minha Empresa) =====
   O logo em degradê e o nome grandes marcam esta tela como "a minha empresa".
   Sem isso ela seria idêntica à ficha de um cliente, e o contador abriria uma
   pensando que é a outra. */
.ada-marca {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.ada-marca-logo {
  width: 68px; height: 68px; flex-shrink: 0; border-radius: 18px;
  background: var(--ada-degrade);
  color: #fff; font-size: 2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(var(--ada-destaque-rgb), .28);
}
/* Com logo de verdade, ela entra no lugar da inicial: altura fixa, largura
   livre (logo costuma ser horizontal) e placa branca, porque a logo foi feita
   para fundo claro e a tela pode estar no escuro. */
.ada-marca-imagem {
  height: 72px; width: auto; max-width: 260px; object-fit: contain; flex-shrink: 0;
  background: #fff; border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 8px 14px;
}
.ada-marca-texto { flex: 1 1 14rem; min-width: 0; }
.ada-marca-nome {
  margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; color: var(--bs-body-color);
}
.ada-marca-sub { margin: .2rem 0 0; font-size: .9rem; color: var(--bs-secondary-color); }
.ada-marca-acao { flex-shrink: 0; margin-left: auto; }

@media (max-width: 575.98px) {
  .ada-marca-logo { width: 54px; height: 54px; border-radius: 15px; font-size: 1.6rem; }
  .ada-marca-nome { font-size: 1.25rem; }
  .ada-marca-acao { margin-left: 0; }
}

/* ===== Ficha do cliente (leitura) ===== */
.ada-ficha-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}

/* Situação do cliente na ficha: ponto colorido + palavra. Verde e cinza, sem
   fundo — é um estado, não um alerta. */
.ada-situacao { display: inline-flex; align-items: center; gap: .4rem; }
.ada-situacao::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.ada-situacao.ativa { color: #12945c; }
.ada-situacao.inativa { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .ada-situacao.ativa { color: #4ede9d; }

/* Atividades em modo leitura: código em cima, descrição embaixo em tom fraco.
   Cada item separado por uma linha fina — é mais legível que alinhar tudo em
   colunas num cartão estreito. */
.ada-atividades-leitura { display: flex; flex-direction: column; }
.ada-atividade-item + .ada-atividade-item {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--bs-border-color);
}
.ada-atividade-topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ada-atividade-cod {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: .92rem;
  color: var(--bs-body-color);
  /* O código do CNAE é uma unidade: quebrado em "7420-" e "0/01" deixa de ser
     um número e passa a ser dois. O navegador quebra no hífen e na barra se a
     gente deixar — num cartão de meia largura, deixa. */
  white-space: nowrap;
}
/* Etiqueta leve: cor do texto no azul, fundo só uma insinuação. */
.ada-atividade-principal {
  font-size: .67rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .1);
  padding: .12rem .4rem; padding-right: calc(.4rem - .04em); border-radius: 5px;
}
[data-bs-theme="dark"] .ada-atividade-principal { color: var(--ada-ciano-claro); background: rgba(var(--ada-destaque-rgb), .13); }
.ada-atividade-txt {
  margin: .18rem 0 0; font-size: .87rem; line-height: 1.45;
  color: var(--bs-secondary-color);
}

/* Asterisco de campo obrigatório. */
.ada-obrigatorio { color: #dc3545; font-weight: 700; }
[data-bs-theme="dark"] .ada-obrigatorio { color: #ff8b96; }

.ada-status {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .85rem; line-height: 1.4;
  border-radius: 9px; padding: .55rem .75rem;
  border: 1px solid transparent;
}
.ada-status:empty { display: none; }
.ada-status-ico { flex-shrink: 0; display: inline-flex; margin-top: .05rem; }
.ada-status-ico svg { width: 15px; height: 15px; }
.ada-status a { color: inherit; font-weight: 600; }

.ada-status.carregando,
.ada-status.info { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.ada-status.ok { background: rgba(46, 188, 113, .11); border-color: rgba(46, 188, 113, .25); color: #0f7a4a; }
.ada-status.erro { background: rgba(220, 53, 69, .09); border-color: rgba(220, 53, 69, .22); color: #b02a37; }
.ada-status.aviso { background: rgba(255, 193, 7, .13); border-color: rgba(255, 193, 7, .3); color: #8a6100; }
[data-bs-theme="dark"] .ada-status.ok { color: #4ede9d; }
[data-bs-theme="dark"] .ada-status.erro { color: #ff8b96; }
[data-bs-theme="dark"] .ada-status.aviso { color: #ffce55; }

/* ===== Modal em passos (novo cliente) =====
   Um passo por vez, com os pontinhos no rodapé indicando onde se está — mesma
   ideia do controle de páginas do iPhone. */
.ada-passo[hidden] { display: none; }
.ada-passo-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.15rem; }
.ada-passo-head .ico { width: 22px; height: 22px; color: var(--ada-destaque); flex-shrink: 0; display: inline-flex; margin-top: .1rem; }
.ada-passo-head .ico svg { width: 100%; height: 100%; }
.ada-passo-titulo { margin: 0; font-size: 1rem; font-weight: 600; }
.ada-passo-dica { margin: .1rem 0 0; font-size: .84rem; color: var(--bs-secondary-color); }

.ada-passos-rodape { justify-content: space-between; gap: .75rem; }
.ada-passos-rodape > .btn { min-width: 7.5rem; }
.ada-passos-acoes { display: flex; gap: .5rem; }
.ada-passos-acoes > .btn { min-width: 7.5rem; }
.ada-pontos { display: flex; align-items: center; gap: .45rem; }
.ada-ponto {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--bs-border-color); cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.ada-ponto:hover { background: var(--bs-secondary-color); }
.ada-ponto.ativo { background: var(--ada-destaque); transform: scale(1.28); }
.ada-ponto:focus-visible { outline: 2px solid var(--ada-destaque); outline-offset: 3px; }

@media (max-width: 575.98px) {
  .ada-passos-rodape > .btn { min-width: 0; flex: 1 1 auto; }
  .ada-passos-acoes { flex: 1 1 auto; }
  .ada-passos-acoes > .btn { min-width: 0; flex: 1 1 auto; }
  .ada-pontos { order: -1; width: 100%; justify-content: center; margin-bottom: .35rem; }
}
.ada-lista-corpo { padding: .35rem .6rem; }
.ada-lista-corpo > .table { margin-bottom: 0; }

/* ===== Tabela de listagem =====
   Encosta nas bordas do cartão (a linha separadora atravessa a largura toda) e
   o respiro fica no padding das células. */
.ada-tabela { --bs-table-bg: transparent; }
.ada-tabela > thead > tr > th {
  font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bs-secondary-color); background: transparent;
  padding: .7rem 1.25rem; border-bottom: 1px solid var(--bs-border-color); white-space: nowrap;
}
.ada-tabela > tbody > tr > td { padding: .8rem 1.25rem; border-color: var(--bs-border-color); }
.ada-tabela > tbody > tr:last-child > td { border-bottom: 0; }
.ada-tabela > tbody > tr:hover > td { background: rgba(var(--ada-destaque-rgb), .045); }
[data-bs-theme="dark"] .ada-tabela > tbody > tr:hover > td { background: rgba(var(--ada-destaque-rgb), .06); }

/* Seta de "abrir" no fim da linha: apagada em repouso, acende junto com a linha
   inteira. O nome já é o link — isto é só o alvo maior pra quem mira ali. */
.ada-abrir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 8px;
  color: var(--bs-secondary-color); opacity: .4;
  transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}
.ada-abrir svg { width: 17px; height: 17px; }
.ada-tabela > tbody > tr:hover .ada-abrir { opacity: 1; color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .1); }
.ada-abrir:hover { opacity: 1; color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .16); }
.ada-abrir:focus-visible { opacity: 1; color: var(--ada-destaque); outline: 2px solid var(--ada-destaque); outline-offset: 1px; }

.ada-lista-link { font-weight: 600; color: inherit; text-decoration: none; }
.ada-lista-link:hover { color: var(--ada-destaque); text-decoration: underline; }
.ada-num { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.ada-tag-inativo {
  margin-left: .4rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color);
  border-radius: 5px; padding: .1rem .3rem; vertical-align: 2px;
}
.ada-lista-vazio { text-align: center; color: var(--bs-secondary-color); padding: 3rem 1.25rem; }
.ada-vazio-ico {
  display: inline-flex; width: 40px; height: 40px; margin-bottom: .85rem;
  color: var(--bs-secondary-color); opacity: .35;
}
.ada-vazio-ico svg { width: 100%; height: 100%; stroke-width: 1.4; }
.ada-vazio-titulo { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; color: var(--bs-body-color); }
.ada-vazio-dica { margin: 0 auto; max-width: 32rem; font-size: .88rem; line-height: 1.55; }

/* Cabeçalho clicável de ordenação. A seta fica fraca na coluna que não ordena,
   pra indicar que dá pra clicar sem competir com a coluna ativa. */
.ada-ord { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; }
.ada-ord:hover { color: var(--ada-destaque); }
.ada-ord .seta { display: inline-flex; opacity: .3; }
.ada-ord.ativo { color: var(--ada-destaque); }
.ada-ord.ativo .seta { opacity: 1; }

/* ===== Paginação (rodapé do cartão) ===== */
.ada-paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.25rem; border-top: 1px solid var(--bs-border-color);
}
.ada-paginacao .contagem { font-size: .85rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.ada-pag-nums { display: flex; gap: .25rem; }
.ada-pag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 8px;
  font-size: .85rem; font-weight: 500; text-decoration: none;
  color: var(--bs-body-color); border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
a.ada-pag-btn:hover { background: rgba(var(--ada-destaque-rgb), .09); color: var(--ada-destaque); }
.ada-pag-btn.atual { background: var(--ada-blue); color: #fff; font-weight: 600; }
.ada-pag-btn.inerte { color: var(--bs-secondary-color); opacity: .45; }
.ada-pag-btn.reticencias { min-width: 1.25rem; padding: 0; border: 0; opacity: .7; }

@media (max-width: 575.98px) {
  .ada-lista-topo { padding: .9rem 1rem; align-items: flex-start; }
  .ada-lista-acoes, .ada-lista-acoes .ada-busca { width: 100%; }
  .ada-busca-input { min-width: 0; }
}

.ada-card-head {
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: .85rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.ada-card-head .ico { width: 20px; height: 20px; color: var(--ada-destaque); flex-shrink: 0; display: inline-flex; }
.ada-card-head .ico svg { width: 100%; height: 100%; }
.ada-card-head h2 { font-size: 1rem; font-weight: 600; margin: 0; }
/* Ação do cartão encostada à direita, alinhada ao título. */
.ada-card-head-acao { margin-left: auto; display: flex; gap: .5rem; }

.ada-empresa-avatar {
  width: 60px; height: 60px; border-radius: 15px; flex-shrink: 0;
  background: var(--ada-degrade);
  color: #fff; font-size: 1.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ada-empresa-nome { font-size: 1.4rem; font-weight: 700; color: var(--ada-destaque); line-height: 1.2; }
[data-bs-theme="dark"] .ada-empresa-nome { color: var(--ada-ciano-claro); }

.ada-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 9px; padding: .45rem .75rem; font-size: .9rem; font-weight: 600;
}
/* Chip menor, pra várias na mesma célula de tabela (ex.: empresas de um sócio). */
.ada-chip-sm { padding: .2rem .5rem; font-size: .78rem; font-weight: 500; border-radius: 7px; }
.ada-chip .ico { width: 15px; height: 15px; color: var(--ada-destaque); display: inline-flex; }
.ada-chip .ico svg { width: 100%; height: 100%; }

.ada-dado { margin-bottom: .4rem; }
.ada-dado-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ada-slate); margin-bottom: .2rem;
}
.ada-dado-label .ico { width: 14px; height: 14px; color: var(--ada-destaque); display: inline-flex; }
.ada-dado-label .ico svg { width: 100%; height: 100%; }
.ada-dado-valor { color: var(--bs-body-color); font-weight: 500; }
.ada-dado-valor a { text-decoration: none; color: var(--bs-body-color); }
.ada-dado-valor a:hover { color: var(--ada-destaque); }
.ada-dado-vazio { color: var(--bs-secondary-color); font-weight: 400; }

/* Hub de Equipe e acessos — card com abas (Meu Escritório) */
.ada-hub { display: flex; flex-direction: column; }
.ada-hub-tabs { gap: .2rem; padding: .85rem .85rem 0; border-bottom: 1px solid var(--bs-border-color); flex-wrap: nowrap; }
.ada-hub-tabs .nav-link { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 500; padding: .45rem .7rem; color: var(--bs-secondary-color); border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; white-space: nowrap; }
.ada-hub-tabs .nav-link:hover { color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .05); }
.ada-hub-tabs .nav-link.active { color: var(--ada-destaque); background: transparent; border-bottom-color: var(--ada-destaque); font-weight: 600; }
.ada-tab-count { min-width: 20px; text-align: center; padding: 0 .35rem; font-size: .7rem; font-weight: 700; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 20px; }
.ada-hub-content { flex: 1 1 auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; min-height: 0; }
.ada-hub .tab-pane.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ada-hub-lista { flex: 1 1 auto; overflow-y: auto; }
.ada-lista-item { display: block; padding: .6rem .1rem; text-decoration: none; color: inherit; }
.ada-lista-item + .ada-lista-item { border-top: 1px solid var(--bs-border-color); }
.ada-lista-item:hover .ada-lista-nome { color: var(--ada-destaque); }
.ada-lista-nome { font-weight: 500; }
.ada-lista-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.ada-hub-vazio { text-align: center; color: var(--bs-secondary-color); padding: 1.75rem 0; font-size: .9rem; }
.ada-hub-acao { margin-top: .75rem; }

/* Link de voltar nas páginas de equipe/acessos */
.ada-voltar { display: inline-block; margin-bottom: .35rem; font-size: .82rem; color: var(--bs-secondary-color); text-decoration: none; }
.ada-voltar:hover { color: var(--ada-destaque); }

/* ===== Navbar flutuante no topo (com margem nas bordas) =====
   Minimalista (escolhida entre quatro versões em 2026-09-11): vidro
   translúcido, itens em cinza claro e o ativo marcado por um traço na cor da
   marca — quem aparece na barra é a logo do escritório; os itens não
   disputam com ela. */
.ada-topnav {
  background: var(--ada-barra);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--ada-barra-borda);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(20, 45, 85, .04);
  color: var(--bs-body-color);
  margin: 14px;
  padding: .65rem .75rem;
  position: sticky; top: 14px; z-index: 1030;
}
.ada-topnav > .container-fluid { padding-left: .4rem; padding-right: .4rem; }
/* A barra é translúcida e flutua a 14px do topo: sem isto, o conteúdo rolado
   aparecia na faixa ACIMA dela. Uma faixa da cor do fundo cobre essa margem. */
.ada-topnav::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -15px; right: -15px; top: -15px; height: 15px; background: var(--bs-body-bg);
}
.ada-topnav .navbar-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.2rem; color: var(--ada-destaque); margin-right: .35rem; }
[data-bs-theme="dark"] .ada-topnav .navbar-brand { color: var(--ada-ciano-claro); }
.ada-topnav .navbar-brand svg { width: 32px; height: 32px; }

.ada-topnav .navbar-nav { gap: .1rem; }
.ada-topnav .nav-link {
  display: flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-weight: 500; font-size: .95rem; color: var(--ada-barra-texto);
  border-radius: 0; padding: .6rem .9rem;
  transition: color .15s, box-shadow .15s;
}
.ada-topnav .nav-link .ico { width: 18px; height: 18px; display: inline-flex; opacity: .5; flex-shrink: 0; transition: opacity .15s; }
.ada-topnav .nav-link .ico svg { width: 100%; height: 100%; stroke-width: 1.5; }
.ada-topnav .nav-link:hover { background: transparent; color: var(--bs-body-color); }
.ada-topnav .nav-link:hover .ico { opacity: .8; }
.ada-topnav .nav-link.active { background: transparent; color: var(--bs-body-color); font-weight: 600; }
.ada-topnav .nav-link.active .ico { opacity: 1; color: var(--ada-destaque); }
/* O ativo é só o negrito e o ícone na cor da marca. Um traço embaixo chegou a
   existir e saiu a pedido: com o negrito e o ícone colorido, ele sobrava. */
.ada-topnav .nav-link.disabled { color: var(--bs-secondary-color); opacity: .55; pointer-events: none; }
.ada-nav-soon {
  font-size: .55rem; line-height: 1; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color); padding: .12rem .3rem; border-radius: 5px; margin-left: .3rem;
}

/* Submenu (Clientes -> Empresas/Sócios). O Bootstrap já troca as cores pelo
   data-bs-theme; aqui só alinhamos raio, sombra e o item ativo com o resto. */
.ada-topnav .dropdown-toggle::after { margin-left: .1rem; opacity: .6; }
.ada-topnav .dropdown-menu {
  border-radius: 11px; border-color: var(--bs-border-color); padding: .3rem;
  box-shadow: 0 8px 24px rgba(20, 45, 85, .13); font-size: .88rem; min-width: 11rem;
}
.ada-topnav .dropdown-item {
  display: flex; align-items: center; gap: .5rem;
  border-radius: 7px; padding: .45rem .6rem; font-weight: 500;
}
.ada-topnav .dropdown-item .ico { width: 16px; height: 16px; display: inline-flex; opacity: .8; flex-shrink: 0; }
.ada-topnav .dropdown-item .ico svg { width: 100%; height: 100%; }
.ada-topnav .dropdown-item.active .ico, .ada-topnav .dropdown-item:hover .ico { opacity: 1; }
.ada-topnav .dropdown-item:hover { background: rgba(var(--ada-destaque-rgb), .09); color: var(--ada-destaque); }
.ada-topnav .dropdown-item.active {
  background: rgba(var(--ada-destaque-rgb), .13); color: var(--ada-destaque); font-weight: 600;
}

.ada-topnav-right { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.ada-clock { display: flex; align-items: center; gap: .3rem; color: var(--bs-secondary-color); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ada-clock .ico { display: inline-flex; }
.ada-clock .ico svg { width: 15px; height: 15px; }
.ada-tema-btn {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 8px; padding: .28rem .5rem; cursor: pointer; font-size: 1rem; line-height: 1;
}
.ada-tema-btn:hover { background: rgba(var(--ada-destaque-rgb), .09); }
.ada-user { display: flex; align-items: center; gap: .5rem; }
.ada-user .av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--ada-degrade);
  color: #fff; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ada-user .info { line-height: 1.15; }
.ada-user .info strong { display: block; font-size: .82rem; }
.ada-user .info small { color: var(--bs-secondary-color); font-size: .7rem; }


/* No mobile (navbar colapsado), o lado direito respira */
@media (max-width: 991.98px) {
  .ada-topnav-right { margin-top: .6rem; }
}

/* ===== Conteúdo ===== */
/* O topo é MENOR que os lados: a barra já tem margem própria (14px) e, com o
   vidro translúcido, o título se descola dela sem precisar de muito ar.
   Com 2.25rem, sobravam ~50px entre a barra e o título. */
.ada-main-inner { padding: 1.25rem 1.75rem 1.75rem; width: 100%; }
@media (max-width: 767.98px) { .ada-main-inner { padding: 1.25rem 1rem 1rem; } }

/* ===== Clique para copiar (fichas) — portado do S7 =====
   O padding negativo na margem é o que evita o valor "pular" quando o realce
   aparece: o fundo cresce pra fora, não empurra o texto. */
.ada-copiar {
  cursor: pointer;
  display: inline-block;
  max-width: 100%;
  padding: 1px 5px;
  margin: -1px -5px;
  border-radius: .35rem;
  transition: background .15s;
  word-break: break-word;
}
.ada-copiar:hover { background: rgba(var(--bs-primary-rgb), .10); }
.ada-copiado {
  background: rgba(46, 188, 113, .20) !important;
  animation: adaCopiaFlash .6s ease;
}
@keyframes adaCopiaFlash {
  0%   { background: rgba(46, 188, 113, .38); }
  100% { background: rgba(46, 188, 113, .20); }
}

/* E-mail e site continuam links; a cópia vira botão discreto ao lado. */
.ada-dado-link { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; }
.ada-dado-link a { word-break: break-word; }
.ada-copiar-btn {
  background: none;
  border: 0;
  padding: 2px;
  line-height: 0;
  color: var(--bs-secondary-color);
  border-radius: .35rem;
  opacity: 0;
  cursor: pointer;
  transition: opacity .15s, color .15s, background .15s;
}
.ada-copiar-btn svg { width: 15px; height: 15px; }
.ada-dado-link:hover .ada-copiar-btn,
.ada-copiar-btn:focus-visible { opacity: 1; }
.ada-copiar-btn:hover { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .10); }
.ada-copiar-btn.ada-copiado { opacity: 1; color: var(--ada-green); }

/* Aviso "Copiado" no ponto do clique. */
.ada-copia-aviso {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(.9);
  background: var(--ada-green);
  color: #fff;
  padding: .3rem .6rem;
  border-radius: .5rem;
  font-size: .78rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(46, 188, 113, .4);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.ada-copia-aviso.ada-visivel { opacity: 1; transform: translate(-50%, -16px) scale(1); }

/* ===== Cadastros de apoio em modal (Funções) ===== */
/* O Bootstrap põe overflow-y:auto em .modal-body sempre, e é ele que corta o
   menu de ações da última linha. Aqui o corpo cresce e quem rola é o modal.
   A altura mínima é só respiro: com uma função só o card ficava espremido. */
.ada-cad-corpo {
  overflow: visible;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
}
/* O corte aqui é VISÍVEL de propósito (o menu de três pontinhos da última linha
   sairia cortado), então a tabela que não cabe vaza para fora do cartão em vez
   de rolar. Por isso o modal precisa de largura: o modal-xl do Bootstrap só
   chega a 1140px em tela ≥1200px e, numa janela de 1100, encolhia para 800 e a
   linha da tabela passava da borda. */
.ada-cad-corpo .table-responsive { overflow: visible; }
.ada-cad-dialogo { max-width: min(1140px, calc(100vw - 2rem)); }
/* E, se ainda faltar espaço, quem cede é a etiqueta de módulo: ela quebra em
   duas linhas em vez de empurrar a tabela para fora. */
.ada-cad-modulos .ada-modulo { white-space: normal; }
/* Em janela estreita o modal já não tem os 1140px: a tabela aperta o passo
   (menos respiro nas células, nome com mínimo menor) e "Criado em" sai de cena
   — é a coluna que menos serve para decidir algo, e a largura dela é o que
   sobrava para as outras caberem. A posição dela é sempre a terceira de trás
   para a frente (data, situação, ações), em todos os cadastros de apoio. */
/* Os seletores repetem o "> thead > tr >" da tabela base de propósito: sem isso
   perdem em especificidade para ela (que é quem põe o nowrap e o respiro de
   1,25rem no cabeçalho) e a regra não vale nada. */
@media (max-width: 991.98px) {
  .ada-cad-tabela > thead > tr > th, .ada-cad-tabela > tbody > tr > td { padding-left: .5rem; padding-right: .5rem; }
  .ada-cad-tabela > thead > tr > th:first-child, .ada-cad-tabela > tbody > tr > td:first-child { min-width: 6rem; }
  .ada-cad-tabela > thead > tr > th:nth-last-child(3),
  .ada-cad-tabela > tbody > tr > td:nth-last-child(3) { display: none; }
}
/* No celular sobra o essencial: nome, quantos usam, situação e as ações. O
   resto (módulos, órgão, validade…) está dentro do Editar; a tabela inteira ali
   teria 660px numa tela de 390 e o corte é visível de propósito. */
@media (max-width: 575.98px) {
  .ada-cad-tabela > thead > tr > th:not(:first-child):not(:nth-last-child(-n+2)),
  .ada-cad-tabela > tbody > tr > td:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
  .ada-cad-tabela > thead > tr > th:first-child, .ada-cad-tabela > tbody > tr > td:first-child { min-width: 5rem; }
}

.ada-cad-topo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.ada-cad-topo .ada-busca { flex: 1 1 auto; }
.ada-cad-topo .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.ada-cad-topo .btn svg { width: 16px; height: 16px; }
.ada-cad-filtro { margin-bottom: .9rem; }
.ada-cad-filtro .form-check-label { color: var(--bs-secondary-color); font-size: .9rem; }
/* `word-break: break-word` deixava a coluna do nome caber em UMA LETRA: para o
   navegador, a largura mínima dela passava a ser a de um caractere, e as outras
   colunas (chips de módulo, data) empurravam o nome até virar "Adm inistr ador"
   dentro do modal. Com `overflow-wrap`, a largura mínima volta a ser a palavra
   inteira, e a quebra no meio só acontece se a palavra sozinha não couber. */
.ada-cad-nome { font-weight: 600; overflow-wrap: break-word; }
.ada-cad-tabela th:first-child, .ada-cad-tabela td:first-child { min-width: 8rem; }
.ada-cad-data { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.ada-cad-vazio { color: var(--bs-secondary-color); padding: 1.25rem 0; margin: 0; text-align: center; }
.ada-cad-tabela th:last-child, .ada-cad-tabela td:last-child { width: 1%; }

/* Botão de três pontinhos das ações da linha. */
.ada-acoes-btn {
  background: none;
  border: 0;
  padding: .25rem;
  line-height: 0;
  border-radius: .4rem;
  color: var(--bs-secondary-color);
  transition: background .15s, color .15s;
}
.ada-acoes-btn svg { width: 18px; height: 18px; }
.ada-acoes-btn:hover, .ada-acoes-btn[aria-expanded="true"] {
  background: rgba(var(--bs-primary-rgb), .10);
  color: var(--bs-primary);
}
/* O item de ação é um <button> dentro de <form>: sem isso ele encolhe. */
.dropdown-menu form { margin: 0; }
.dropdown-menu form .dropdown-item { width: 100%; text-align: left; }

/* A busca-filtro não tem botão Buscar; o campo ocupa a caixa toda. */
.ada-busca-filtro .ada-busca-input { border-radius: inherit; }
.ada-cad-modulos { display: flex; flex-wrap: wrap; gap: .3rem; }
.ada-modulo {
  display: inline-block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ada-destaque);
  background: rgba(var(--ada-destaque-rgb), .1);
  padding: .16rem .5rem;
  border-radius: 6px;
  white-space: nowrap;
}
.ada-modulo-todos { color: #12945c; background: rgba(46, 188, 113, .12); }
[data-bs-theme="dark"] .ada-modulo { color: var(--ada-ciano-claro); background: rgba(var(--ada-destaque-rgb), .13); }
[data-bs-theme="dark"] .ada-modulo-todos { color: #4ede9d; background: rgba(78, 222, 157, .14); }
/* A coluna de módulos é a que pode crescer; as outras ficam no tamanho certo. */
.ada-cad-tabela td:nth-child(2), .ada-cad-tabela th:nth-child(2) { width: 1%; }
.ada-cad-tabela td:nth-child(2) { white-space: nowrap; }

/* Legenda de fieldset: <legend> tem tamanho próprio no Bootstrap (~1.3rem) e
   destoava dos rótulos de campo ao lado. */
.ada-legenda {
  float: none;
  width: auto;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: .5rem;
}

/* Módulos como botões de marcar. */
.ada-modulos-escolha { display: flex; flex-wrap: wrap; gap: .5rem; }
.ada-modulo-escolha {
  display: inline-block;
  padding: .4rem .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  font-size: .9rem;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.ada-modulo-escolha:hover { border-color: rgba(var(--bs-primary-rgb), .5); }
.btn-check:checked + .ada-modulo-escolha {
  border-color: var(--ada-destaque);
  background: rgba(var(--ada-destaque-rgb), .1);
  color: var(--ada-destaque);
  font-weight: 500;
}
.btn-check:focus-visible + .ada-modulo-escolha {
  outline: 2px solid rgba(var(--bs-primary-rgb), .5);
  outline-offset: 2px;
}
[data-bs-theme="dark"] .btn-check:checked + .ada-modulo-escolha {
  border-color: var(--ada-ciano-claro); background: rgba(var(--ada-destaque-rgb), .13); color: var(--ada-ciano-claro);
}

/* ==================== SOLICITAÇÕES ==================== */

/* --- topo da tela de trabalho ---
   Tela de trabalho (quadro) não usa o cartão das telas de cadastro: aqui o
   recipiente é a coluna, e uma moldura em volta viraria caixa dentro de caixa.
   Então o título e os filtros ficam direto na página. */
.ada-painel-topo { margin-bottom: 1rem; }
.ada-painel-titulo { font-size: 1.75rem; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.ada-painel-resumo { margin: .3rem 0 0; color: var(--bs-secondary-color); font-size: .9rem; }
.ada-resumo-alerta { color: #c2410c; }
[data-bs-theme="dark"] .ada-resumo-alerta { color: #fb923c; }

/* Uma linha só enquanto couber. O que cede é o campo de busca, que encolhe;
   o "Limpar" aparece e some conforme há filtro, e antes ele empurrava o grupo
   da direita para uma segunda linha alinhada à direita — parecia desalinhado
   porque a linha de cima começa à esquerda. */
.ada-barra-filtros {
  display: flex; align-items: center; flex-wrap: nowrap; gap: .5rem;
  margin-bottom: 1.25rem;
}
/* Os filtros DIVIDEM a linha e encolhem juntos (base 165, mínimo 118): antes
   tinham largura mínima fixa, e o rótulo de dois palavrões ("Todos os
   responsáveis") quebrava em duas linhas dentro da pílula enquanto a barra
   inteira passava da direita da tela. */
.ada-filtro { flex: 1 1 165px; min-width: 140px; }
/* Busca e ação principal vão pra direita da MESMA linha dos filtros. */
.ada-barra-direita { margin-left: auto; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ada-barra-direita .btn-group { flex: 0 0 auto; }
/* A busca é quem cede espaço quando a barra aperta: os filtros têm rótulo fixo,
   ela tem só o texto de exemplo, que já termina em reticências. */
/* Com o texto curto, a busca deixa de ser o campo mais largo da barra: base
   menor e o espaço que sobra vai para os filtros. */
.ada-barra-direita .ada-busca { flex: 0 1 240px; min-width: 130px; }
.ada-vistas { flex: 0 0 auto; }

/* Quando não cabe mais, quebra de propósito: o grupo da direita passa a ocupar
   a linha inteira e começa à esquerda, acompanhando a de cima. */
@media (max-width: 1199.98px) {
  .ada-barra-filtros { flex-wrap: wrap; }
  .ada-barra-direita { margin-left: 0; width: 100%; }
}


.ada-filtro .ada-select-btn { padding-top: .38rem; padding-bottom: .38rem; font-size: .9rem; }
/* O filtro de empresa é o que tem nome comprido: um pouco mais largo. */
.ada-filtro-cliente { flex-basis: 13rem; min-width: 9rem; }
/* Uma linha só dentro da pílula: o que não couber vira reticências. */
.ada-filtro .ada-select-btn { overflow: hidden; }
.ada-filtro .ada-select-btn > [data-rotulo] { max-width: 100%; min-width: 0; }
.ada-select-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Limpar era um link solto no meio de controles com moldura — a única coisa
   sublinhada na barra. Vira botão fantasma da mesma altura dos filtros. */
.ada-limpa-filtro {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem .6rem;
  border: 1px solid transparent; border-radius: .5rem;
  font-size: .85rem; font-weight: 500;
  color: var(--bs-secondary-color); text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.ada-limpa-filtro svg { width: 13px; height: 13px; }
.ada-limpa-filtro:hover {
  color: var(--bs-body-color);
  background: rgba(120, 130, 145, .12);
  border-color: var(--bs-border-color);
}
.ada-limpa-filtro:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px; }

/* Alternar quadro/lista: dois botões colados, o ativo em azul suave. */
.ada-vistas { display: inline-flex; border: 1px solid var(--bs-border-color); border-radius: .55rem; overflow: hidden; }
.ada-vista {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem; font-size: .88rem; font-weight: 500;
  color: var(--bs-secondary-color); text-decoration: none;
  transition: background .15s, color .15s;
}
.ada-vista + .ada-vista { border-left: 1px solid var(--bs-border-color); }
.ada-vista svg { width: 15px; height: 15px; }
.ada-vista:hover { background: rgba(var(--bs-primary-rgb), .07); color: var(--bs-primary); }
.ada-vista.ativa { background: rgba(var(--ada-destaque-rgb), .1); color: var(--ada-destaque); }
[data-bs-theme="dark"] .ada-vista.ativa { background: rgba(var(--ada-destaque-rgb), .13); color: var(--ada-ciano-claro); }

/* --- quadro (kanban) ---
   Três níveis que precisam se distinguir: a página, a bandeja de cada coluna e
   o cartão. Antes os três eram quase o mesmo cinza; agora a bandeja tem borda e
   tom próprio, e o cartão é branco com sombra — a hierarquia vem do contraste,
   não do tamanho. */
.ada-quadro {
  display: grid;
  grid-template-columns: repeat(4, minmax(265px, 1fr));
  gap: 1rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: .5rem;
}
@media (max-width: 991px) { .ada-quadro { grid-template-columns: repeat(4, 285px); } }

/* A bandeja é a coluna inteira, cabeçalho incluído. */
/* Sem bandeja. A coluna é o cabeçalho mais os cartões — o retângulo em volta
   não dizia nada que a posição já não diga, e ainda punha uma moldura cinza
   entre o olho e o conteúdo. Quem agrupa é o espaço; quem nomeia é o título. */
.ada-coluna { position: relative; display: flex; flex-direction: column; min-width: 0; }

.ada-coluna-topo {
  display: flex; align-items: center; gap: .55rem;
  padding: 0 .2rem .7rem;
}

/* A bolinha faz a cor virar sinal sem precisar colorir a palavra inteira. */
.ada-coluna-nome {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--bs-body-color);
}
.ada-coluna-nome::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coluna-cor); flex: 0 0 auto;
}
.ada-coluna.aberta     { --coluna-cor: #8A94A3; }
.ada-coluna.andamento  { --coluna-cor: var(--ada-blue); }
.ada-coluna.aguardando { --coluna-cor: #B45309; }
.ada-coluna.concluida  { --coluna-cor: #12945C; }
[data-bs-theme="dark"] .ada-coluna.aberta      { --coluna-cor: #9AA4B2; }
[data-bs-theme="dark"] .ada-coluna.andamento   { --coluna-cor: var(--ada-ciano-claro); }
[data-bs-theme="dark"] .ada-coluna.aguardando  { --coluna-cor: #FBBF24; }
[data-bs-theme="dark"] .ada-coluna.concluida   { --coluna-cor: #4EDE9D; }

.ada-coluna-conta {
  margin-left: auto;
  font-size: .73rem; font-weight: 600; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
  background: rgba(120, 130, 145, .13);
  border-radius: 999px; padding: .05rem .45rem; min-width: 1.4rem; text-align: center;
}

/* A grade é aqui, em volta dos CARTÕES — não da coluna inteira. O cabeçalho
   fica fora dela, solto sobre a página: assim cada coluna se delimita sem que a
   moldura suba até o topo e vire uma caixa pesada em volta de tudo. */
/* Vidro no sentido da Apple, não do Aero: uma camada translúcida UNIFORME, com
   desfoque forte e um empurrão de saturação — sem degradê de brilho descendo a
   caixa, que é justo o que dava cara de Windows Vista. O que delimita é um fio
   de borda claro por cima de outro neutro finíssimo, e a sombra é larga e quase
   invisível: a placa parece flutuar um milímetro, não ganhar moldura. */
.ada-coluna-corpo {
  display: flex; flex-direction: column; gap: .6rem;
  min-height: 8rem;
  padding: .6rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(17, 24, 39, .045),
    0 10px 26px -20px rgba(17, 24, 39, .28);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}
[data-bs-theme="dark"] .ada-coluna-corpo {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 0 1px rgba(0, 0, 0, .3),
    0 10px 26px -20px rgba(0, 0, 0, .8);
}
/* Coluna com muitos cartões (Aberta com 16) não estica a página: altura fixa
   que acompanha a tela, e rola por dentro. A névoa branca embaixo (.tem-mais,
   ligada pelo script do quadro) avisa que há mais cartões para baixo; some
   quando se chega ao fim. Fica na COLUNA, fora da área que rola, para não
   descer junto com os cartões; pointer-events none para não roubar clique. */
.ada-coluna-corpo {
  max-height: max(22rem, calc(100vh - 17.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ada-coluna::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 3.2rem;
  border-radius: 0 0 1.15rem 1.15rem; pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  opacity: 0; transition: opacity .2s;
}
.ada-coluna.tem-mais::after { opacity: 1; }
/* No escuro, a névoa é da cor do fundo (clara ali sumiria como mancha). */
[data-bs-theme="dark"] .ada-coluna::after { background: linear-gradient(to top, rgba(var(--bs-body-bg-rgb), .92), rgba(var(--bs-body-bg-rgb), 0)); }

/* Coluna vazia: só o texto, sem retângulo tracejado nem fundo. Uma caixa vazia
   desenhada pesa mais na tela do que a informação "não tem nada aqui". */
.ada-coluna-vazia {
  color: var(--bs-secondary-color); font-size: .84rem; text-align: center;
  padding: 1.4rem .5rem; margin: 0; opacity: .7;
}

/* Cartão branco sobre a bandeja: é o contraste que faz ele existir. A faixa da
   esquerda é a cor do setor; listrada quando está atrasada. */
.ada-tarjeta {
  position: relative;
  display: block; text-decoration: none; color: inherit;
  background: #fff;
  border: 1px solid rgba(120, 130, 145, .14);
  border-left: 3px solid transparent;
  border-radius: .75rem;
  padding: .85rem .9rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  transition: box-shadow .16s, transform .12s, border-color .16s;
}
[data-bs-theme="dark"] .ada-tarjeta { background: var(--ada-escuro-tarjeta); border-color: rgba(255, 255, 255, .09); }
.ada-tarjeta:hover {
  box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
  transform: translateY(-2px);
  border-color: rgba(var(--bs-primary-rgb), .35);
}
/* A faixa é SÓ do setor. A listrada com vermelho no atraso ficava suja: duas
   informações disputando o mesmo traço de 3px, e nenhuma das duas legível. O
   atraso já grita na data — vermelha, em negrito e com ícone de alerta. */
.ada-tarjeta[class*="ada-cor-"] { border-left-color: var(--setor-cor); }

.ada-tarjeta-topo { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
/* Setor de nome longo ("Departamento Pessoal") não vaza do cartão: o número
   não encolhe, e a etiqueta termina em "…" (o nome inteiro fica no title). */
.ada-tarjeta-topo { min-width: 0; }
.ada-tarjeta-topo .ada-tarjeta-num { flex-shrink: 0; }
.ada-tarjeta-topo .ada-modulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Etiqueta de setor CORTADA (o script do quadro marca .cortada): ao passar o
   mouse, um balão com o nome inteiro aparece por cima, preso à borda DIREITA
   da etiqueta e crescendo para a esquerda. A etiqueta não sai do lugar — a
   primeira versão a tirava do fluxo, e o cartão pulava. Fundo sólido (cor do
   cartão sob a tinta do setor) para o número não aparecer por trás. */
.ada-tarjeta-topo .ada-modulo-setor { position: relative; z-index: 2; overflow: hidden; }
.ada-tarjeta-topo .ada-modulo-setor.cortada:hover { overflow: visible; color: transparent; }   /* o texto cortado some atrás do balão */
.ada-tarjeta-topo .ada-modulo-setor.cortada:hover::after {
  content: attr(data-nome);
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; white-space: nowrap;
  padding: inherit; border-radius: inherit; font: inherit; color: var(--setor-cor);
  background-color: #fff;
  background-image: linear-gradient(rgba(var(--setor-rgb), .12), rgba(var(--setor-rgb), .12));
  box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}
[data-bs-theme="dark"] .ada-tarjeta-topo .ada-modulo-setor.cortada:hover::after { background-color: var(--ada-escuro-tarjeta); }
/* O número é a identidade da solicitação — é ele que o cliente cita ao
   telefone. Em azul da marca ele vira a âncora do cartão. */
.ada-tarjeta-num {
  font-size: .76rem; font-weight: 700; color: var(--ada-destaque);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
[data-bs-theme="dark"] .ada-tarjeta-num { color: var(--ada-ciano-claro); }
/* Empresa logo abaixo do número, em caixa alta pequena: identifica sem
   competir com o título, que é o que a pessoa vem ler. */
/* A empresa é link e precisa ficar ACIMA do stretched-link do título (que usa
   z-index 1), senão o clique nela abriria a solicitação. */
.ada-tarjeta-cliente {
  position: relative; z-index: 2;
  display: inline-block; max-width: 100%;
  margin-top: .15rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--bs-secondary-color); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.ada-tarjeta-cliente:hover { color: var(--bs-primary); text-decoration: underline; }
/* Com o símbolo (empresa / pessoa física / escritório) na frente, o nome é quem
   leva as reticências — o ícone nunca some. */
.ada-tarjeta-cliente { display: inline-flex; align-items: center; gap: .3rem; }
.ada-tarjeta-cliente > svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .8; }
/* Texto em caixa alta não tem parte que desce abaixo da linha: com a altura de
   linha normal ele fica mais alto que o centro e o ícone parecia caído.
   line-height 1 centraliza as letras de verdade com o ícone. */
.ada-tarjeta-cliente > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; line-height: 1; padding-top: 1px; }
.ada-tarjeta-titulo {
  display: block;
  font-weight: 650; font-size: 1rem; line-height: 1.3; margin-top: .55rem;
  color: inherit; text-decoration: none;
}
.ada-tarjeta:hover .ada-tarjeta-titulo { color: var(--bs-primary); }
.ada-tarjeta-desc {
  margin: .3rem 0 0; font-size: .84rem; line-height: 1.45;
  color: var(--bs-secondary-color);
}
.ada-tarjeta-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .8rem; padding-top: .6rem;
  /* Pontilhado de bolinhas redondas (border dotted sai quadrado e duro):
     bolinha de 1px a cada 5px, na cor cinza bem clara. */
  /* A peça tem 4px de altura para caber a bolinha INTEIRA (com 3px ela saía
     cortada em cima e embaixo e parecia estrela). */
  background-image: radial-gradient(circle at center, rgba(120, 130, 145, .38) 1px, transparent 1.2px);
  background-size: 6px 4px; background-repeat: repeat-x; background-position: left top;
}
.ada-tarjeta-sinais { display: flex; align-items: center; gap: .55rem; row-gap: .2rem; min-width: 0; flex-wrap: wrap; }
/* Coluna estreita: os sinais descem de linha em vez de passar por cima das
   iniciais dos responsáveis (que não encolhem). */
.ada-tarjeta-rodape .ada-donos { flex-shrink: 0; }
/* Quem cuida e a data de entrega, logo abaixo do título. */
.ada-tarjeta-quem { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; font-size: .78rem; color: var(--bs-body-color); }
/* Acima do link que cobre o cartão: é o que deixa o balão com o nome aparecer
   ao passar o mouse na sigla. */
.ada-tarjeta-quem .ada-donos { position: relative; z-index: 2; }
.ada-tarjeta-quem .ada-donos { flex-shrink: 0; }
/* Sem responsável: a bolinha vazia tracejada no lugar das siglas. */
.ada-dono.ada-dono-vazio { background: transparent; border: 1.5px dashed rgba(120, 130, 145, .5); }

[data-bs-theme="dark"] .ada-tarjeta-rodape { background-image: radial-gradient(circle at center, rgba(255, 255, 255, .22) 1px, transparent 1.2px); }
.ada-sinal { display: inline-flex; align-items: center; gap: .28rem; font-size: .77rem; color: var(--bs-secondary-color); }
.ada-sinal svg { width: 13px; height: 13px; }
/* Anexos e comentários do cartão num badge cinza bem leve: contagem, não aviso. */
.ada-sinal-conta { background: rgba(120, 130, 145, .11); border-radius: 999px; padding: .08rem .45rem .08rem .38rem; gap: .22rem; font-size: .72rem; font-variant-numeric: tabular-nums; }
.ada-sinal-conta svg { width: 11px; height: 11px; }
[data-bs-theme="dark"] .ada-sinal-conta { background: rgba(255, 255, 255, .07); }
/* A data no mesmo badge, com o fundo acompanhando a cor do prazo. */
.ada-sinal-conta.perto  { background: rgba(180, 83, 9, .12); }
.ada-sinal-conta.hoje   { background: rgba(194, 65, 12, .13); }
.ada-sinal-conta.atraso { background: rgba(220, 38, 38, .11); }
.ada-sinal.perto  { color: #b45309; font-weight: 500; }
.ada-sinal.hoje   { color: #c2410c; font-weight: 600; }
.ada-sinal.atraso { color: #dc2626; font-weight: 600; }
[data-bs-theme="dark"] .ada-sinal.perto { color: #fbbf24; }
[data-bs-theme="dark"] .ada-sinal.hoje { color: #fb923c; }
[data-bs-theme="dark"] .ada-sinal.atraso { color: #f87171; }

/* --- prazo --- */
.ada-prazo { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 500; color: var(--bs-secondary-color); }
.ada-prazo svg { width: 13px; height: 13px; }
/* Prazo da ficha como botão (abre "Prazo da solicitação"): mesma cara do texto,
   com o lápis e um fundo leve no hover para mostrar que se clica. */
.ada-prazo-btn { background: none; border: 0; padding: .15rem .35rem; margin: -.15rem -.35rem; border-radius: 6px; cursor: pointer; }
.ada-prazo-btn:hover { background: rgba(var(--ada-destaque-rgb), .08); }
.ada-prazo-btn > svg:last-child { opacity: .55; }
.ada-prazo.perto  { color: #b45309; }
.ada-prazo.hoje   { color: #c2410c; font-weight: 600; }
.ada-prazo.atraso { color: #dc2626; font-weight: 600; }
[data-bs-theme="dark"] .ada-prazo.perto { color: #fbbf24; }
[data-bs-theme="dark"] .ada-prazo.hoje { color: #fb923c; }
[data-bs-theme="dark"] .ada-prazo.atraso { color: #f87171; }

/* --- responsável (iniciais) --- */
.ada-dono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(var(--ada-destaque-rgb), .12); color: var(--ada-destaque);
  flex: 0 0 auto;
}
[data-bs-theme="dark"] .ada-dono { background: rgba(var(--ada-destaque-rgb), .15); color: var(--ada-ciano-claro); }

/* --- etiqueta de situação --- */
.ada-estado {
  display: inline-block; font-size: .78rem; font-weight: 500;
  padding: .16rem .5rem; border-radius: 6px; white-space: nowrap;
}
/* Mesma lógica de cor da coluna, pra etiqueta e quadro não contarem histórias
   diferentes sobre o mesmo estado. */
/* Bolinha de situação no seletor da Lista: mesmas cores das colunas do quadro. */
.ada-sit-ponto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: #8A94A3; }
.ada-sit-ponto.andamento  { background: var(--ada-blue); }
.ada-sit-ponto.aguardando { background: #B45309; }
.ada-sit-ponto.concluida  { background: #12945C; }
.ada-sit-ponto.cancelada  { background: transparent; box-shadow: inset 0 0 0 1.5px #8A94A3; }
.ada-sit-ponto.atrasadas  { background: #dc2626; }
[data-bs-theme="dark"] .ada-sit-ponto.andamento  { background: var(--ada-ciano-claro); }
[data-bs-theme="dark"] .ada-sit-ponto.aguardando { background: #FBBF24; }
[data-bs-theme="dark"] .ada-sit-ponto.concluida  { background: #4EDE9D; }
.ada-estado.aberta     { color: var(--ada-slate); background: rgba(120, 130, 145, .14); }
.ada-estado.andamento  { color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .1); }
.ada-estado.aguardando { color: #b45309; background: rgba(180, 83, 9, .11); }
.ada-estado.concluida  { color: #12945c; background: rgba(46, 188, 113, .12); }
.ada-estado.cancelada  { color: var(--bs-secondary-color); background: rgba(120, 130, 145, .13); text-decoration: line-through; }
[data-bs-theme="dark"] .ada-estado.aberta     { color: #cbd5e1; background: rgba(203, 213, 225, .13); }
[data-bs-theme="dark"] .ada-estado.andamento  { color: var(--ada-ciano-claro); background: rgba(var(--ada-destaque-rgb), .13); }
[data-bs-theme="dark"] .ada-estado.aguardando { color: #fbbf24; background: rgba(251, 191, 36, .13); }
[data-bs-theme="dark"] .ada-estado.concluida  { color: #4ede9d; background: rgba(78, 222, 157, .14); }

.ada-linha-atraso td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* --- ficha da solicitação ---
   Hierarquia do topo: o número identifica, o título é o assunto, a descrição é
   o pedido. Os três juntos respondem "o que é isso" antes de qualquer
   histórico. */
.ada-sol-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ada-sol-id { min-width: 0; }
.ada-sol-num {
  font-size: .8rem; font-weight: 700; color: var(--ada-destaque);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
[data-bs-theme="dark"] .ada-sol-num { color: var(--ada-ciano-claro); }
/* O título é o assunto: é ele que a pessoa lê primeiro e repete ao telefone. */
.ada-sol-titulo { font-size: 1.55rem; font-weight: 650; margin: .25rem 0 .35rem; letter-spacing: -.02em; line-height: 1.25; }
.ada-sol-cliente { margin: 0; color: var(--bs-secondary-color); font-size: .92rem; }
.ada-sol-estado { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex: 0 0 auto; }

/* O pedido, separado do cabeçalho por uma linha e anunciado por um rótulo. */
.ada-sol-corpo {
  margin-top: 1.15rem; padding-top: 1.15rem;
  border-top: 1px solid var(--bs-border-color);
}
.ada-sol-rotulo {
  margin: 0 0 .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.ada-sol-pedido {
  margin: 0;
  font-size: 1.02rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
/* Detalhes acompanham a rolagem do histórico. */
@media (min-width: 992px) {
  .ada-sol-lado { position: sticky; top: 1rem; }
}

/* --- linha do tempo ---
   Duas formas, como no S7: evento do sistema é ícone + citação; mensagem de
   gente é avatar com iniciais + balão. Com a mesma forma pros dois, a conversa
   sumia entre as trocas de status. O fio vertical liga tudo e dá a leitura de
   "aconteceu nesta ordem". */
.ada-tempo {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  position: relative;
}
.ada-tempo-item { position: relative; display: flex; gap: .75rem; padding: .55rem 0; }

/* O fio é desenhado POR ITEM, não como um traço único atrás de tudo. Assim ele
   quebra sozinho nos separadores de dia (era o "passando o HOJE") e nunca sobra
   antes do primeiro ícone nem depois do último.
   Ícone = 28px, centro em 14px; o fio tem 2px, então vai de 13 a 15. */
.ada-tempo-item::before {
  content: '';
  position: absolute; left: 13px; top: 0; bottom: 0;
  width: 2px; background: var(--bs-border-color);
}
/* Primeiro do dia começa no centro do ícone; último da lista termina nele. */
.ada-tempo-dia + .ada-tempo-item::before { top: 14px; }
.ada-tempo-item:last-child::before { bottom: auto; height: 14px; }
.ada-tempo-dia + .ada-tempo-item:last-child::before { display: none; }

/* Ícone de sistema e avatar de mensagem precisam da MESMA largura, senão o fio
   passa no centro de um e fora do outro. */
.ada-tempo-ico, .ada-tempo-item > .ada-dono {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
/* Ícone de sistema: contorno leve sobre o fundo do cartão, para o fio "sumir"
   atrás dele em vez de atravessar. */
/* Fundo do cartão, não do corpo da página: o círculo vive dentro do cartão
   branco, e o cinza da página aparecia como mancha. */
.ada-tempo-ico {
  background: var(--bs-tertiary-bg, #fff);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}
.ada-tempo-ico svg { width: 14px; height: 14px; }

.ada-tempo-corpo { min-width: 0; flex: 1 1 auto; padding-top: .15rem; }
.ada-tempo-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: .87rem; }
.ada-tempo-cab strong { font-weight: 600; }
.ada-tempo-hora { color: var(--bs-secondary-color); font-size: .78rem; font-variant-numeric: tabular-nums; }
/* Citação em itálico: é o registro literal do que mudou, não texto de alguém. */
.ada-tempo-cita {
  margin: .15rem 0 0; font-size: .87rem; font-style: italic;
  color: var(--bs-secondary-color);
}
.ada-tempo-cita::before { content: '\201C'; }
.ada-tempo-cita::after  { content: '\201D'; }
.ada-tempo-autor { margin: .1rem 0 0; font-size: .78rem; color: var(--bs-secondary-color); }

/* Separador de dia. */
.ada-tempo-dia { display: flex; align-items: center; padding: .7rem 0 .5rem; }
.ada-tempo-dia span {
  position: relative; z-index: 1;
  background: var(--bs-tertiary-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: .12rem .6rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .03em;
  color: var(--bs-secondary-color);
}

/* Mensagem de gente: avatar + balão com fundo. */
/* O avatar tinha fundo translúcido e o fio passava POR DENTRO dele. Aqui a cor
   vira uma camada de imagem sobre um fundo sólido: mantém o tom e fica opaco. */
.ada-tempo-msg > .ada-dono {
  margin-top: .1rem;
  background-color: var(--bs-tertiary-bg, #fff);
  background-image: linear-gradient(rgba(var(--ada-destaque-rgb), .14), rgba(var(--ada-destaque-rgb), .14));
}
.ada-tempo-msg.interna > .ada-dono {
  background-image: linear-gradient(rgba(180, 83, 9, .15), rgba(180, 83, 9, .15));
}
.ada-balao {
  flex: 1 1 auto; min-width: 0;
  background: rgba(var(--bs-primary-rgb), .06);
  border: 1px solid rgba(var(--bs-primary-rgb), .12);
  border-radius: .2rem .7rem .7rem .7rem;
  padding: .6rem .8rem;
}
.ada-balao-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0 0 .2rem; font-size: .85rem; }
.ada-balao-cab strong { font-weight: 650; }
.ada-balao-txt { margin: 0; font-size: .93rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/* Nota interna: mesmo balão, cor de aviso — quem lê precisa ver sem pensar que
   aquilo não sai para o cliente. */
.ada-tempo-msg.interna .ada-balao {
  background: rgba(180, 83, 9, .07);
  border-color: rgba(180, 83, 9, .18);
}
.ada-tempo-msg.interna > .ada-dono { color: #b45309; }
[data-bs-theme="dark"] .ada-tempo-msg.interna .ada-balao { background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .2); }
[data-bs-theme="dark"] .ada-tempo-msg.interna > .ada-dono { color: #fbbf24; }

.ada-evento-selo {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600; color: #b45309;
  background: rgba(180, 83, 9, .12); padding: .08rem .38rem; border-radius: 5px;
}
.ada-evento-selo svg { width: 11px; height: 11px; }
[data-bs-theme="dark"] .ada-evento-selo { color: #fbbf24; background: rgba(251, 191, 36, .14); }

.ada-tempo-total {
  text-align: center; font-size: .78rem; color: var(--bs-secondary-color);
  margin: 0 0 1rem;
}

/* Escrever no histórico: bloco próprio, separado do que já aconteceu. */
.ada-comentar {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1.25rem;
}
.ada-comentar-rodape { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .7rem; }
.ada-espera { margin-top: .75rem; padding-left: 1.5rem; }

/* Aceitar é a ação principal de uma solicitação recém-chegada, então é botão
   cheio, ao lado dos botões de contorno da ficha. */
.ada-btn-aceitar { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.ada-btn-aceitar svg { width: 15px; height: 15px; }

/* ===== Dica (tooltip do Bootstrap com a cara da ADA) ===== */
.tooltip {
  --bs-tooltip-bg: #16213A;
  --bs-tooltip-color: #fff;
  --bs-tooltip-border-radius: .45rem;
  --bs-tooltip-font-size: .78rem;
  --bs-tooltip-padding-x: .55rem;
  --bs-tooltip-padding-y: .3rem;
  --bs-tooltip-opacity: 1;
  font-family: var(--bs-font-sans-serif);
  font-weight: 500;
}
[data-bs-theme="dark"] .tooltip { --bs-tooltip-bg: #E6ECF5; --bs-tooltip-color: #0B1426; }

/* Título de grupo dentro de um cartão: separa dois assuntos sem virar outro
   cartão, que é o que criava caixa dentro de caixa. */
.ada-resumo-grupo {
  margin: 1.3rem 0 .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* ===== Cores de setor =====
   Cada cor define dois tokens: o traço cheio e o RGB para os fundos leves.
   Definir os dois aqui, e não no HTML, é o que deixa o tema escuro trocar a
   paleta inteira numa regra só. */
.ada-cor-azul     { --setor-cor: #1964CF; --setor-rgb:  25, 100, 207; }
.ada-cor-ciano    { --setor-cor: #28B6E7; --setor-rgb:  40, 182, 231; }
.ada-cor-teal     { --setor-cor: #1EB8B7; --setor-rgb:  30, 184, 183; }
.ada-cor-verde    { --setor-cor: #12945C; --setor-rgb:  18, 148,  92; }
.ada-cor-laranja  { --setor-cor: #C2410C; --setor-rgb: 194,  65,  12; }
.ada-cor-vermelho { --setor-cor: #DC2626; --setor-rgb: 220,  38,  38; }
.ada-cor-roxo     { --setor-cor: #7C3AED; --setor-rgb: 124,  58, 237; }
.ada-cor-rosa     { --setor-cor: #DB2777; --setor-rgb: 219,  39, 119; }
.ada-cor-cinza    { --setor-cor: #5A6471; --setor-rgb:  90, 100, 113; }

[data-bs-theme="dark"] .ada-cor-azul     { --setor-cor: #7AAEF7; --setor-rgb: 122, 174, 247; }
[data-bs-theme="dark"] .ada-cor-ciano    { --setor-cor: #6FD0F0; --setor-rgb: 111, 208, 240; }
[data-bs-theme="dark"] .ada-cor-teal     { --setor-cor: #5FD8D7; --setor-rgb:  95, 216, 215; }
[data-bs-theme="dark"] .ada-cor-verde    { --setor-cor: #4EDE9D; --setor-rgb:  78, 222, 157; }
[data-bs-theme="dark"] .ada-cor-laranja  { --setor-cor: #FB923C; --setor-rgb: 251, 146,  60; }
[data-bs-theme="dark"] .ada-cor-vermelho { --setor-cor: #F87171; --setor-rgb: 248, 113, 113; }
[data-bs-theme="dark"] .ada-cor-roxo     { --setor-cor: #A78BFA; --setor-rgb: 167, 139, 250; }
[data-bs-theme="dark"] .ada-cor-rosa     { --setor-cor: #F472B6; --setor-rgb: 244, 114, 182; }
[data-bs-theme="dark"] .ada-cor-cinza    { --setor-cor: #9AA4B2; --setor-rgb: 154, 164, 178; }

/* A faixa do cartão passa a ser a cor do setor. */
.ada-tarjeta[class*="ada-cor-"] { border-left-color: var(--setor-cor); }
/* Atrasada continua se distinguindo: a faixa vira listrada, então o cartão
   guarda a cor do setor E grita o atraso, sem os dois brigarem pelo mesmo pixel. */
.ada-tarjeta { position: relative; }

/* Etiqueta do setor com a cor dele. */
.ada-modulo-setor { color: var(--setor-cor); background: rgba(var(--setor-rgb), .12); }

/* Bolinha da cor na lista de setores. */
.ada-cor-ponto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--setor-cor); margin-right: .5rem; vertical-align: middle;
}

/* Escolha da cor no formulário. */
.ada-cores { display: flex; flex-wrap: wrap; gap: .5rem; }
.ada-cor-escolha {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid transparent;
  transition: border-color .15s, transform .1s;
}
.ada-cor-escolha span { width: 20px; height: 20px; border-radius: 50%; background: var(--setor-cor); }
.ada-cor-escolha:hover { transform: scale(1.08); }
.btn-check:checked + .ada-cor-escolha { border-color: var(--setor-cor); }
.btn-check:focus-visible + .ada-cor-escolha { outline: 2px solid rgba(var(--setor-rgb), .5); outline-offset: 2px; }

/* Cores novas da paleta de setor. */
.ada-cor-lima    { --setor-cor: #4D7C0F; --setor-rgb:  77, 124,  15; }
.ada-cor-amarelo { --setor-cor: #A16207; --setor-rgb: 161,  98,   7; }
.ada-cor-indigo  { --setor-cor: #4338CA; --setor-rgb:  67,  56, 202; }
[data-bs-theme="dark"] .ada-cor-lima    { --setor-cor: #A3E635; --setor-rgb: 163, 230,  53; }
[data-bs-theme="dark"] .ada-cor-amarelo { --setor-cor: #FACC15; --setor-rgb: 250, 204,  21; }
[data-bs-theme="dark"] .ada-cor-indigo  { --setor-cor: #818CF8; --setor-rgb: 129, 140, 248; }

/* Cor já tomada por outro setor: some do alcance, mas continua visível pra
   mostrar que a paleta não é maior do que parece. */
.ada-cor-escolha.tomada { opacity: .3; cursor: not-allowed; }
.ada-cor-escolha.tomada:hover { transform: none; }

/* Placeholder que não cabe termina em reticências em vez de ser cortado no
   meio da palavra. Reticências, e não desbotamento: um gradiente sobre o campo
   apagaria também o que a pessoa digita. */
.ada-busca-input::placeholder { text-overflow: ellipsis; }

/* Iniciais menores, para caber dentro de item de menu e do botão do seletor. */
.ada-dono.mini { width: 21px; height: 21px; font-size: .6rem; margin-right: .45rem; }
.ada-select-btn [data-rotulo] { display: inline-flex; align-items: center; }
/* A bolinha da situação encostava na palavra dentro do botão fechado (no menu,
   o espaço vem do gap do item). */
.ada-select-btn [data-rotulo] .ada-sit-ponto { margin-right: .4rem; }
.dropdown-item .ada-dono { flex: 0 0 auto; }

/* ===== Arrastar cartão entre colunas ===== */
.ada-tarjeta[draggable="true"] { cursor: grab; }
.ada-tarjeta[draggable="true"]:active { cursor: grabbing; }
/* O cartão some da origem enquanto é arrastado: quem marca o lugar é a vaga,
   que segue o cursor. Deixá-lo visível mostraria o mesmo cartão em dois
   lugares ao mesmo tempo. */
.ada-tarjeta.arrastando { display: none; }

/* A vaga: o espaço que os outros cartões abrem para receber o que vem. */
.ada-tarjeta-vaga {
  border: 2px dashed rgba(var(--bs-primary-rgb), .35);
  background: rgba(var(--bs-primary-rgb), .04);
  border-radius: .75rem;
  flex: 0 0 auto;
}
/* Com a vaga dentro, o "Nada aqui" sai de cena. */
.ada-coluna-corpo.com-vaga .ada-coluna-vazia { display: none; }
/* Coluna alvo: contorno tracejado na cor dela, pra dizer "solta aqui" sem
   empurrar o conteúdo (borda interna, não externa). */
.ada-coluna.alvo .ada-coluna-corpo {
  border-color: var(--coluna-cor);
  outline: 2px dashed var(--coluna-cor);
  outline-offset: -5px;
}
/* O que vai mudar, em destaque: sem isso a pessoa lê três campos sem lembrar
   qual cartão soltou. */
.ada-mover-alvo {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.15rem; padding: .6rem .75rem;
  background: rgba(120, 130, 145, .08);
  border-radius: .6rem;
  font-size: .92rem; color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ada-mover-alvo { background: rgba(255, 255, 255, .05); }
.ada-mover-seta { color: var(--bs-secondary-color); }
.ada-mover-alvo strong { color: var(--ada-destaque); }
[data-bs-theme="dark"] .ada-mover-alvo strong { color: var(--ada-ciano-claro); }
/* O bloco da espera separado do de responsável, quando os dois aparecem. */
[data-mover-espera]:not([hidden]) {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1rem;
}

/* Intervalo abertura → prazo. A seta é o que diz "período" sem gastar palavra. */
.ada-periodo { font-variant-numeric: tabular-nums; }
.ada-periodo-seta { margin: 0 .3rem; opacity: .55; }
/* Atraso não é só cor: ganha o ícone de alerta, para quem não distingue
   vermelho de cinza continuar recebendo o aviso. */
.ada-sinal.atraso svg { color: currentColor; }

/* ===== Acessibilidade =====
   O cartão inteiro é clicável pelo stretched-link do título, mas o foco do
   teclado ficava só no texto do título. Aqui o contorno acompanha o cartão,
   então quem navega por Tab vê onde está. */
.ada-tarjeta:focus-within {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.ada-tarjeta .stretched-link:focus-visible { outline: none; }

/* A empresa é texto pequeno em caixa alta: precisa de mais contraste que o
   cinza padrão pra passar nos 4.5:1 de texto pequeno. */
.ada-tarjeta-cliente { color: #5c6675; }
[data-bs-theme="dark"] .ada-tarjeta-cliente { color: #a8b2c1; }

/* Quem pediu menos movimento no sistema não recebe o cartão pulando. */
@media (prefers-reduced-motion: reduce) {
  .ada-tarjeta, .ada-cor-escolha, .ada-copiar, .ada-copia-aviso, .ada-acoes-btn {
    transition: none;
  }
  .ada-tarjeta:hover, .ada-cor-escolha:hover { transform: none; }
  .ada-copiado { animation: none; }
}

/* ===== Caixa de escrever no histórico ===== */
.ada-escrever {
  position: relative;
  min-height: 5.5rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.ada-escrever:focus-within {
  border-color: rgba(var(--bs-primary-rgb), .5);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}
/* resize: none de propósito. O canto de redimensionar do navegador fica no
   mesmo ponto do botão de enviar — os dois brigavam pelo mesmo pixel, e ao
   estreitar a janela o campo encolhia abaixo da altura do botão. Altura fixa e
   rolagem interna são previsíveis; o campo nunca colapsa. */
.ada-escrever textarea {
  display: block; width: 100%;
  min-height: 5.5rem;
  background: none; border: 0; outline: none; resize: none;
  padding: .7rem 3.2rem .7rem .85rem;
  font-size: .95rem; line-height: 1.5; color: var(--bs-body-color);
  border-radius: .75rem;
}
.ada-escrever textarea::placeholder { color: var(--bs-secondary-color); }

/* Avião no canto, como num chat: escrever e enviar no mesmo lugar.
   Sem position absolute: quem posiciona é .ada-escrever-acoes, que segura o
   clipe e o avião lado a lado. Absoluto aqui tirava o botão da fila e ele
   ficava POR CIMA do clipe, escondendo o anexo. */
.ada-enviar {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--ada-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.ada-enviar svg { width: 16px; height: 16px; }
.ada-enviar:hover { background: var(--ada-blue-hover); }
.ada-enviar:active { transform: scale(.94); }
.ada-enviar:focus-visible { outline: 2px solid var(--ada-destaque); outline-offset: 2px; }

/* Dois estados, não meia frase: a chave antiga dizia "O cliente vê" e, quando
   desligada, deixava a pessoa deduzir o resto. Aqui cada estado se nomeia. */
.ada-visivel {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .6rem; padding: .3rem .6rem;
  border: 1px solid var(--bs-border-color); border-radius: 999px;
  font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ada-visivel svg { width: 14px; height: 14px; }
.ada-visivel > span { display: inline-flex; align-items: center; gap: .35rem; }
.ada-visivel .ada-visivel-nao { display: none; }
.btn-check:checked + .ada-visivel {
  color: var(--ada-destaque); border-color: rgba(var(--ada-destaque-rgb), .35); background: rgba(var(--ada-destaque-rgb), .08);
}
.btn-check:not(:checked) + .ada-visivel {
  color: #b45309; border-color: rgba(180, 83, 9, .35); background: rgba(180, 83, 9, .08);
}
.btn-check:not(:checked) + .ada-visivel .ada-visivel-sim { display: none; }
.btn-check:not(:checked) + .ada-visivel .ada-visivel-nao { display: inline-flex; }
.btn-check:focus-visible + .ada-visivel { outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px; }
[data-bs-theme="dark"] .btn-check:checked + .ada-visivel { color: var(--ada-ciano-claro); border-color: rgba(var(--ada-destaque-rgb),.35); background: rgba(var(--ada-destaque-rgb),.12); }
[data-bs-theme="dark"] .btn-check:not(:checked) + .ada-visivel { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.12); }

/* ===== Anexos ===== */
.ada-escrever-acoes {
  position: absolute; right: .5rem; bottom: .5rem;
  display: flex; align-items: center; gap: .35rem;
}
.ada-anexar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bs-secondary-color); cursor: pointer;
  transition: background .15s, color .15s;
}
.ada-anexar svg { width: 17px; height: 17px; }
.ada-anexar:hover { background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
.ada-anexar:focus-within { outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px; }

/* Nomes do que foi escolhido, antes de enviar. */
.ada-escolhidos {
  list-style: none; margin: 0; padding: .1rem .85rem .7rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.ada-escolhidos li {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; color: var(--ada-destaque);
  background: rgba(var(--ada-destaque-rgb), .1); border-radius: 6px; padding: .12rem .3rem .12rem .45rem;
  max-width: 100%;
}
.ada-escolhidos li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O "x" que tira o arquivo antes de enviar. */
.ada-escolhido-tirar {
  border: 0; background: transparent; padding: 0; line-height: 0; color: inherit; opacity: .6;
  display: inline-flex; flex-shrink: 0;
}
.ada-escolhido-tirar svg { width: 13px; height: 13px; }
.ada-escolhido-tirar:hover { opacity: 1; }
[data-bs-theme="dark"] .ada-escolhidos li { color: var(--ada-ciano-claro); background: rgba(var(--ada-destaque-rgb), .13); }

/* Anexos já enviados, dentro do balão. */
.ada-anexos { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ada-anexo {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .6rem;
  background: var(--bs-tertiary-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  text-decoration: none; color: inherit;
  max-width: 100%;
  transition: border-color .15s, background .15s;
}
.ada-anexo:hover { border-color: rgba(var(--bs-primary-rgb), .45); color: var(--bs-primary); }
.ada-anexo svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--bs-secondary-color); }
.ada-anexo-nome { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ada-anexo-tam { font-size: .75rem; color: var(--bs-secondary-color); flex: 0 0 auto; margin-left: auto; }

/* Alternador de ordem do histórico: mesmo componente do Quadro/Lista, menor,
   encaixado no cabeçalho do cartão. */
.ada-vistas-sm .ada-vista { padding: .25rem .55rem; font-size: .8rem; }
.ada-tempo-mais { text-align: center; margin: 0 0 .5rem; font-size: .85rem; }
.ada-tempo-mais a { text-decoration: none; }
.ada-tempo-mais a:hover { text-decoration: underline; }

/* A caixa do histórico rola por dentro: a página não cresce e a caixa de
   escrever fica sempre à mão, por mais longo que seja o histórico. */
.ada-tempo-caixa {
  max-height: 55vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .4rem;
  margin-bottom: .5rem;
}
.ada-tempo-caixa .ada-tempo { margin-bottom: 0; }
.ada-tempo-carregando {
  text-align: center; font-size: .8rem; color: var(--bs-secondary-color);
  margin: 0 0 .5rem; padding: .3rem 0;
}

/* Coluna que o fluxo não alcança: some o convite, aparece o "não pode". */
.ada-coluna.barrado { opacity: .5; }
.ada-coluna.barrado .ada-coluna-corpo { outline: 2px dashed rgba(120, 130, 145, .45); outline-offset: -5px; }

/* ===== Menu flutuante de responsável ===== */
.ada-menu-dono { min-width: 15rem; padding: .4rem; }
/* Responsáveis da ficha, no desenho dos apps de hoje: cartão branco, cantos
   largos, sombra macia e sem borda; linha com hover leve; quem está marcado não
   ganha faixa colorida — só o círculo azul cheio com o tique, à direita.
   A caixinha real fica escondida (teclado e leitor de tela). */
.ada-menu-pessoas.dropdown-menu {
  min-width: 18rem; width: max-content; max-width: min(26rem, calc(100vw - 2rem)); max-height: 21rem; overflow-y: auto; padding: .4rem;
  background: #fff; border: 0; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 14px 34px -8px rgba(15, 23, 42, .2);
}
[data-bs-theme="dark"] .ada-menu-pessoas.dropdown-menu { background: var(--ada-escuro-tarjeta); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 34px -8px rgba(0, 0, 0, .6); }
.ada-menu-pessoas .ada-multi-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 9px; margin: 0;
  font-size: .9rem; font-weight: 450; color: var(--bs-body-color); background: transparent;
  transition: background-color .12s;
}
.ada-menu-pessoas .ada-multi-item:hover { background: rgba(120, 130, 145, .09); color: var(--bs-body-color); }
.ada-menu-pessoas .ada-multi-item .ada-dono { width: 26px; height: 26px; font-size: .66rem; }
/* O nome nunca encosta no círculo: respiro fixo à direita (e reticências se não couber). */
.ada-menu-pessoas .ada-menu-nome { padding-right: 1rem; }
.ada-menu-pessoas .ada-cor-ponto { width: 10px; height: 10px; margin: 0 .35rem 0 .2rem; flex-shrink: 0; }
.ada-menu-pessoas .ada-menu-marca {
  margin-left: auto; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px rgba(120, 130, 145, .35); color: transparent;
  transition: background-color .12s, box-shadow .12s;
}
.ada-menu-pessoas .ada-menu-marca svg { width: 11px; height: 11px; }
.ada-menu-pessoas .ada-multi-item:has(input:checked) .ada-menu-marca { background: var(--ada-blue); box-shadow: none; color: #fff; }
.ada-menu-pessoas .ada-multi-item:has(input:focus-visible) { outline: 2px solid rgba(var(--ada-destaque-rgb), .45); outline-offset: -2px; }

.ada-menu-aviso { margin: .35rem .55rem .15rem; font-size: .78rem; color: #b02a37; }
[data-bs-theme="dark"] .ada-menu-aviso { color: #ff8b96; }
.ada-menu-titulo {
  margin: .2rem .55rem .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.ada-menu-dono form { margin: 0; }
.ada-menu-dono .dropdown-item {
  display: flex; align-items: center; gap: .1rem;
  width: 100%; text-align: left;
  border-radius: .45rem; padding: .4rem .55rem;
}
.ada-menu-nome { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ada-menu-check { display: inline-flex; color: var(--ada-destaque); }
.ada-menu-check svg { width: 15px; height: 15px; }
.ada-menu-dono .dropdown-item.active { background: rgba(var(--bs-primary-rgb), .1); color: var(--ada-destaque); font-weight: 500; }
.ada-menu-dono .dropdown-item.active .ada-menu-check { color: var(--ada-destaque); }
[data-bs-theme="dark"] .ada-menu-dono .dropdown-item.active { background: rgba(var(--ada-destaque-rgb), .13); color: var(--ada-ciano-claro); }
[data-bs-theme="dark"] .ada-menu-check { color: var(--ada-ciano-claro); }

/* Linha da espera: onde parou e quando volta. */
.ada-espera-linha {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: .5rem 0 0;
  font-size: .78rem; font-weight: 500;
  color: #b45309;
  background: rgba(180, 83, 9, .1);
  padding: .16rem .45rem; border-radius: 6px;
}
.ada-espera-linha svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ada-espera-linha.vencida { color: #b91c1c; background: rgba(220, 38, 38, .11); font-weight: 600; }
[data-bs-theme="dark"] .ada-espera-linha { color: #fbbf24; background: rgba(251, 191, 36, .13); }
[data-bs-theme="dark"] .ada-espera-linha.vencida { color: #f87171; background: rgba(248, 113, 113, .14); }
.ada-sol-estado .ada-espera-linha { margin-top: .1rem; }

/* ===== Usuário no canto da barra ===== */
.ada-usuario { margin-left: auto; }
.ada-usuario-btn {
  background: none; border: 0; padding: 0; line-height: 0;
  border-radius: 50%;
  transition: box-shadow .15s;
}
.ada-usuario-btn:hover { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15); }
.ada-usuario-btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.ada-usuario-ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  background: transparent; border: 1px solid var(--ada-barra-borda-forte); color: var(--ada-barra-texto);
}
.ada-usuario-menu { min-width: 15rem; width: max-content; max-width: calc(100vw - 2rem); padding: .4rem; }
/* Nome, e-mail e tempo de sessão numa linha cada: o menu cresce até caber (e só
   corta com reticências se passar da tela, no celular). */
.ada-usuario-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 7px; }
.ada-usuario-menu .dropdown-item > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--bs-secondary-color); }
.ada-usuario-menu .dropdown-item:hover > svg { color: inherit; }
.ada-usuario-cab > *, .ada-usuario-sessao { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ada-usuario-cab { margin: .35rem .6rem .3rem; display: flex; flex-direction: column; gap: .1rem; }
.ada-usuario-cab strong { font-size: .92rem; }
.ada-usuario-cab span { font-size: .8rem; color: var(--bs-secondary-color); word-break: break-all; }
.ada-usuario-menu .dropdown-item { border-radius: .45rem; padding: .4rem .6rem; }
.ada-usuario-menu .dropdown-item.disabled { cursor: not-allowed; }

/* ==================== PAINEL (tela inicial) ==================== */

/* --- números do topo ---
   Cartões cheios de cor, com ícone: antes eram cinco cartões brancos iguais, e
   o número só ganhava sentido depois de ler o rótulo. A cor carrega a urgência
   (vermelho cobra hoje, âmbar cobra decisão, azul é a fila, cinza está parado
   esperando terceiro, verde é o que já saiu) e o ícone carrega o assunto. */
.ada-estats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem; margin-bottom: 1rem;
}
.ada-estat {
  --estat-cor: #64748B;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .9rem 1rem 1rem;
  border-radius: 1rem;
  background: var(--estat-cor);
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
a.ada-estat:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px var(--estat-cor);
  filter: saturate(1.08);
}
.ada-estat-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
/* O ícone num disco translúcido: o branco cheio brigaria com o número, que é
   quem deve ser lido primeiro. */
.ada-estat-ico {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255, 255, 255, .22);
}
.ada-estat-ico svg { width: 18px; height: 18px; }
.ada-estat-num {
  font-size: 2rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ada-estat-rotulo { font-size: .82rem; font-weight: 500; opacity: .92; }

.ada-estat.atraso  { --estat-cor: #DC3F3F; }
.ada-estat.alerta  { --estat-cor: #D68110; }
.ada-estat.aberto  { --estat-cor: var(--ada-blue); }
.ada-estat.espera  { --estat-cor: #64748B; }
.ada-estat.ok      { --estat-cor: #12945C; }

/* Compacta: os mesmos cartões DENTRO do cartão da agenda, onde a largura é a de
   uma coluna e não a da tela. Os cinco continuam lado a lado enquanto couberem;
   abaixo disso quebram em duas linhas, como já faziam soltos. */
.ada-estats.compacto {
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: .5rem; margin-bottom: 1.1rem;
}
/* Cartão CLARO com a cor no ícone e no número, em vez do bloco todo colorido:
   assim o número pode ser grande e escuro (é ele que se lê primeiro) e o rótulo
   volta a um corpo legível. Referência enviada pelo usuário.
   `display: contents` no topo desfaz o agrupamento do HTML e deixa ícone,
   rótulo e número serem irmãos: ícone + rótulo na primeira linha, número
   sozinho embaixo, ocupando a largura toda. */
.ada-estats.compacto .ada-estat {
  /* flex-direction volta a ROW: o cartão grande é coluna, e em coluna o
     "flex: 0 0 100%" do número vira ALTURA, não largura. */
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
  /* Altura fixa e as duas linhas afastadas: rótulo de uma linha e de duas
     linhas deixavam os números em alturas diferentes na mesma fileira. */
  min-height: 108px; align-content: space-between;
  padding: .7rem .8rem .75rem; border-radius: .9rem;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}
.ada-estats.compacto .ada-estat-topo { display: contents; }
.ada-estats.compacto .ada-estat-ico {
  order: 1; width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, var(--estat-cor) 14%, transparent);
  color: var(--estat-cor);
}
.ada-estats.compacto .ada-estat-ico svg { width: 15px; height: 15px; }
.ada-estats.compacto .ada-estat-rotulo {
  /* base 0 e min-width 0: o rótulo QUEBRA dentro da linha do ícone em vez de
     descer para uma linha só dele — senão "Aguardando" ficava embaixo do ícone
     e "Em atraso" ao lado, na mesma fileira. */
  order: 2; flex: 1 1 0; min-width: 0;
  font-size: .82rem; font-weight: 600; line-height: 1.15; opacity: 1;
  color: var(--bs-body-color);
}
.ada-estats.compacto .ada-estat-num {
  order: 3; flex: 0 0 100%;
  font-size: 2rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--estat-cor);
}
/* Zero: nada de cor. O número fica cinza e o cartão, calado. */
.ada-estats.compacto .ada-estat.vazio { background: var(--bs-tertiary-bg, #fff); }
.ada-estats.compacto .ada-estat.vazio .ada-estat-num { color: var(--bs-secondary-color); opacity: 1; }
.ada-estats.compacto .ada-estat.vazio .ada-estat-rotulo { color: var(--bs-secondary-color); }
.ada-estats.compacto a.ada-estat:hover {
  color: var(--bs-body-color);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--estat-cor) 45%, var(--bs-border-color));
  box-shadow: 0 6px 16px -10px var(--estat-cor);
  filter: none;
}
[data-bs-theme="dark"] .ada-estats.compacto .ada-estat { background: rgba(255, 255, 255, .04); }

/* Zero fica neutro: "0 em atraso" é notícia boa e não pode gritar em vermelho.
   Sem cor e sem link — clicar levaria a uma tela vazia. */
.ada-estat.vazio {
  background: var(--bs-tertiary-bg, #fff);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
  box-shadow: none;
}
.ada-estat.vazio .ada-estat-ico { background: rgba(120, 130, 145, .12); }
.ada-estat.vazio .ada-estat-num { color: var(--bs-body-color); opacity: .45; }
[data-bs-theme="dark"] .ada-estat.vazio { background: rgba(255, 255, 255, .04); }

/* --- calendário --- */
.ada-cal-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ada-cal-mes { font-size: 1.1rem; font-weight: 650; margin: 0; }
.ada-cal-mes span { color: var(--bs-secondary-color); font-weight: 500; }
.ada-cal-nav { display: flex; align-items: center; gap: .25rem; }
.ada-cal-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: .45rem;
  color: var(--bs-secondary-color); text-decoration: none;
  transition: background .15s, color .15s;
}
.ada-cal-nav a:hover { background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
.ada-cal-nav a svg { width: 16px; height: 16px; }
.ada-cal-hoje { width: auto !important; padding: 0 .6rem; font-size: .82rem; font-weight: 500; }

.ada-cal-semana, .ada-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
/* Trava a largura: um calendário mensal não fica melhor esticado, só mais
   espalhado. Sobrando espaço na coluna, ele fica centralizado. */
.ada-cal-semana, .ada-cal-grade { max-width: 330px; margin-left: auto; margin-right: auto; }
.ada-cal-semana {
  margin-bottom: .35rem;
  font-size: .72rem; font-weight: 600; color: var(--bs-secondary-color); text-align: center;
}
/* Altura fixa, não proporção. Com aspect-ratio 1:1 a célula crescia junto com
   a largura da coluna: numa tela grande cada dia virava um quadrado de 90px e
   o calendário tomava a tela inteira. */
/* Uma célula, um número, sempre no mesmo lugar. Nada de elemento extra dentro:
   era o ponto embaixo do número que subia o 24 e torcia a linha. */
.ada-dia {
  display: flex; align-items: center; justify-content: center;
  /* 30px em vez de 38: com seis semanas o calendário ficava alto demais e
     empurrava a agenda ao lado. */
  height: 30px;
  border-radius: .5rem;
  font-size: .88rem; color: var(--bs-body-color); text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background .15s, box-shadow .15s;
}
.ada-dia.fora { visibility: hidden; }
a.ada-dia:hover { box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), .35); }

/* Dia com prazo: fundo e número na cor do setor. */
.ada-dia.tem {
  background: rgba(var(--setor-rgb), .16);
  color: var(--setor-cor);
  font-weight: 650;
}
/* Hoje é anel, não fundo — assim compõe com a cor do setor em vez de brigar. */
.ada-dia.hoje { font-weight: 700; box-shadow: inset 0 0 0 2px var(--ada-destaque); }
[data-bs-theme="dark"] .ada-dia.hoje { box-shadow: inset 0 0 0 2px var(--ada-ciano-claro); }
.ada-dia.hoje:not(.tem) { color: var(--ada-destaque); }
[data-bs-theme="dark"] .ada-dia.hoje:not(.tem) { color: var(--ada-ciano-claro); }
/* Dia escolhido: sólido, para não haver dúvida de qual está filtrando. */
.ada-dia.ativo { background: var(--ada-blue); color: #fff; font-weight: 700; box-shadow: none; }
.ada-cal-vazio { margin: 1rem 0 0; text-align: center; font-size: .85rem; color: var(--bs-secondary-color); }

/* --- agenda --- */
.ada-agenda { list-style: none; margin: 0; padding: 0; }
.ada-agenda-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color);
}
.ada-agenda-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ada-agenda-cor { width: 3px; align-self: stretch; border-radius: 2px; background: var(--setor-cor); flex: 0 0 auto; }
.ada-agenda-corpo { min-width: 0; flex: 1 1 auto; }
.ada-agenda-titulo {
  display: block; font-weight: 600; font-size: .9rem; color: inherit; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ada-agenda-titulo:hover { color: var(--bs-primary); }
.ada-agenda-sub { margin: .1rem 0 0; font-size: .78rem; color: var(--bs-secondary-color); }
/* As siglas de quem cuida não encolhem nem quebram: ficam entre o nome da
   empresa e o badge do prazo. */
/* Na agenda as siglas ficam LADO A LADO, não empilhadas: no cartão do quadro a
   sobreposição economiza a largura que falta, aqui só cortava as letras. */
.ada-agenda-item .ada-donos { flex: 0 0 auto; gap: .2rem; }
.ada-agenda-item .ada-donos .ada-dono + .ada-dono { margin-left: 0; }
/* Prédio antes do nome da empresa, como no cartão do quadro. */
.ada-agenda-predio {
  display: inline-flex; vertical-align: -2px; margin-right: .3rem;
  width: 13px; height: 13px; opacity: .75;
}
.ada-agenda-predio svg { width: 100%; height: 100%; }
/* O quando num badge, com o fundo acompanhando a cor do prazo — a mesma peça
   do rodapé do cartão do quadro (.ada-sinal-conta), para as duas telas falarem
   a mesma língua. */
.ada-agenda-quando {
  font-size: .74rem; color: var(--bs-secondary-color); white-space: nowrap; flex: 0 0 auto;
  background: rgba(120, 130, 145, .11); border-radius: 999px; padding: .14rem .55rem;
  font-variant-numeric: tabular-nums;
}
.ada-agenda-quando.perto { color: #b45309; font-weight: 500; background: rgba(180, 83, 9, .12); }
.ada-agenda-quando.hoje { color: #c2410c; font-weight: 600; background: rgba(194, 65, 12, .13); }
.ada-agenda-quando.atraso { color: #dc2626; font-weight: 600; background: rgba(220, 38, 38, .11); }
[data-bs-theme="dark"] .ada-agenda-quando { background: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .ada-agenda-quando.perto { color: #fbbf24; }
[data-bs-theme="dark"] .ada-agenda-quando.hoje { color: #fb923c; }
[data-bs-theme="dark"] .ada-agenda-quando.atraso { color: #f87171; }

/* --- aniversários --- */
.ada-nivers { list-style: none; margin: 0; padding: 0; }
.ada-nivers-item { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.ada-nivers-dia {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 650; font-variant-numeric: tabular-nums;
  background: rgba(120, 130, 145, .1); color: var(--bs-secondary-color);
}
.ada-nivers-item.hoje .ada-nivers-dia { background: rgba(46, 188, 113, .14); color: #12945c; }
.ada-nivers-nome { margin: 0; font-size: .9rem; font-weight: 500; }
.ada-nivers-origem { margin: 0; font-size: .76rem; color: var(--bs-secondary-color); }

/* Contraste da barra de filtros.
   Os controles usavam --bs-body-bg, que é o MESMO cinza do fundo da página:
   sobre o cartão branco de um modal isso dá contraste, mas solto na página eles
   sumiam. Aqui, e só aqui, eles ficam brancos com borda mais definida. */
.ada-barra-filtros .ada-busca,
.ada-barra-filtros .ada-select .ada-select-btn,
.ada-barra-filtros .ada-vistas {
  background: var(--bs-tertiary-bg, #fff);
  border-color: rgba(120, 130, 145, .28);
}
.ada-barra-filtros .ada-vista:not(.ativa) { background: var(--bs-tertiary-bg, #fff); }
.ada-barra-filtros .ada-vista + .ada-vista { border-left-color: rgba(120, 130, 145, .28); }
.ada-barra-filtros .ada-busca-btn { border-left-color: rgba(120, 130, 145, .28); }
.ada-barra-filtros .ada-busca:focus-within,
.ada-barra-filtros .ada-select-btn:focus-visible {
  border-color: rgba(var(--bs-primary-rgb), .5);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}
[data-bs-theme="dark"] .ada-barra-filtros .ada-busca,
[data-bs-theme="dark"] .ada-barra-filtros .ada-select .ada-select-btn,
[data-bs-theme="dark"] .ada-barra-filtros .ada-vistas,
[data-bs-theme="dark"] .ada-barra-filtros .ada-vista:not(.ativa) {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}

/* ===== Portal do cliente (/portal/:token) =====
   Página pública, sem navbar: quem abre este link não tem sistema pra navegar.
   Coluna estreita e centrada porque só existe uma tarefa na tela — e formulário
   largo demais faz o olho varrer o vazio entre rótulo e campo. */
/* Medidas do celular como BASE; a tela grande é que ganha media query. É o
   inverso do resto do sistema, e de propósito: o escritório usa computador, o
   cliente abre este link no telefone.
   env(safe-area-inset-*) é o recorte do aparelho (notch, barra do indicador de
   home) — sem isso, no iPhone o rodapé fica embaixo da barra do sistema. */
.ada-portal-main {
  padding: 1.5rem .75rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(.75rem, env(safe-area-inset-right, 0px));
  width: 100%;
}
@media (min-width: 576px) {
  .ada-portal-main { padding: 2.5rem 1rem calc(3rem + env(safe-area-inset-bottom, 0px)); }
}
.ada-portal { max-width: 40rem; margin: 0 auto; }
/* A ficha precisa de mais largura que o formulário: são duas colunas. O
   formulário continua estreito de propósito — campo largo demais faz o olho
   varrer o vazio entre rótulo e caixa. */
.ada-portal.larga { max-width: 64rem; }

.ada-portal-topo {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.5rem;
}
.ada-portal-marca {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-primary);
}
.ada-portal-marca svg { width: 22px; height: 22px; }
/* Com logo, ela abre o portal sozinha e a empresa vai embaixo. Altura fixa e
   largura livre: logo horizontal e quadrada convivem sem deformar. */
.ada-portal-topo.com-logo { flex-direction: column; align-items: flex-start; gap: .45rem; }
.ada-portal-logo { height: 46px; width: auto; max-width: 70%; object-fit: contain; display: block; }
[data-bs-theme="dark"] .ada-portal-logo { background: #fff; border-radius: 10px; padding: 5px 10px; height: 50px; }
.ada-powered-pe { text-align: center; margin: .6rem 0 0; }
.ada-portal-escritorio { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
/* A empresa vem abaixo, menor: serve pra pessoa conferir que abriu o link
   certo, não é o assunto da tela. */
.ada-portal-empresa { font-size: .84rem; color: var(--bs-secondary-color); }

.ada-portal-card { padding: 1.15rem; }
.ada-portal-titulo { font-size: 1.25rem; font-weight: 700; margin: 0 0 .35rem; }
@media (min-width: 576px) {
  .ada-portal-card { padding: 1.75rem; }
  .ada-portal-titulo { font-size: 1.3rem; }
}
.ada-portal-dica {
  font-size: .9rem; line-height: 1.55; color: var(--bs-secondary-color);
  margin: 0 0 1.25rem;
}
.ada-portal-rodape {
  margin: 1.25rem 0 0; text-align: center;
  font-size: .8rem; color: var(--bs-secondary-color);
}

/* Isca de robô: fora da tela, mas sem display:none — preenchedor automático
   ignora o que está escondido de vez. */
.ada-isca {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Recibo: o número é o que a pessoa vai citar depois, então é o maior
   elemento da tela e dá pra copiar num clique. */
.ada-portal-ok { text-align: center; }
.ada-portal-ok-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: .85rem;
  border-radius: 50%;
  background: rgba(46, 188, 113, .12);
  color: var(--ada-green);
}
.ada-portal-ok-ico svg { width: 28px; height: 28px; }
.ada-portal-numero {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--bs-primary);
  margin-bottom: .25rem;
}
.ada-portal-assunto { font-size: .95rem; margin: 0 0 1.5rem; }

/* ===== Cartão do link, na aba Solicitações da empresa ===== */
.ada-link-cartao {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem; margin-bottom: 1rem;
}
.ada-link-ico {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-primary);
}
.ada-link-ico svg { width: 18px; height: 18px; }
.ada-link-texto { min-width: 0; flex: 1 1 auto; }
.ada-link-titulo { font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; color: var(--bs-secondary-color); }
/* O link é longo e não pode empurrar os botões pra fora do cartão. */
.ada-link-url {
  font-size: .9rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ada-link-sub { font-size: .85rem; color: var(--bs-secondary-color); }

/* ===== Triagem: solicitação que chegou pelo portal sem tipo =====
   Marcador com borda tracejada, não etiqueta cheia: é falta de dado, não
   atributo. Se tivesse a mesma forma da etiqueta de setor, "Classificar"
   passaria por nome de setor no quadro. */
.ada-modulo-triar {
  background: transparent;
  border: 1px dashed rgba(180, 83, 9, .5);
  color: #B45309;
}
[data-bs-theme="dark"] .ada-modulo-triar { border-color: rgba(251, 191, 36, .45); color: #FBBF24; }

/* Ação encostada no valor do campo (o lápis do Tipo). Só ganha cor no hover:
   parada, ela não pode competir com o dado. */
.ada-dado-editar {
  border: 0; background: transparent; padding: 0 .25rem;
  color: var(--bs-secondary-color); opacity: .5;
  line-height: 1; vertical-align: middle;
}
.ada-dado-editar svg { width: 14px; height: 14px; }
.ada-dado-editar:hover { opacity: 1; color: var(--bs-primary); }

.ada-modal-dica {
  font-size: .88rem; line-height: 1.5; color: var(--bs-secondary-color);
  margin: 0 0 1rem;
}

/* Anexar no portal: área tracejada em vez do botão nativo do navegador, que
   muda de cara em cada sistema e ignora o tema. Larga de propósito — no
   celular quase todo anexo é foto, e alvo pequeno erra o dedo. */
.ada-portal-anexar {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .85rem 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 10px;
  color: var(--bs-secondary-color); font-size: .9rem;
  cursor: pointer;
}
.ada-portal-anexar:hover {
  border-color: rgba(var(--bs-primary-rgb), .55);
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .04);
}
.ada-portal-anexar svg { width: 18px; height: 18px; }
/* A lista de escolhidos nasceu dentro da caixa de escrever da ficha, com recuo
   pra encostar no texto; fora dela é um bloco solto e o recuo desalinharia. */
.ada-escolhidos-solto { padding: .5rem 0 0; }

/* ===== Área de arquivos (empresa e sócio) ===== */
.ada-arq-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.ada-arq-acoes { display: flex; align-items: center; gap: .5rem; }

/* Trilha: o caminho é navegação, não título — por isso texto miúdo e o nome da
   pasta aberta em peso maior, que é onde o olho para. */
.ada-trilha { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; min-width: 0; }
.ada-trilha-item {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .45rem; border-radius: 7px;
  font-size: .9rem; color: var(--bs-secondary-color); text-decoration: none;
}
.ada-trilha-item svg { width: 15px; height: 15px; }
a.ada-trilha-item:hover { background: rgba(120, 130, 145, .1); color: var(--bs-primary); }
.ada-trilha-item.atual { color: var(--bs-body-color); font-weight: 600; }
.ada-trilha-sep { display: inline-flex; color: var(--bs-secondary-color); opacity: .5; }
.ada-trilha-sep svg { width: 13px; height: 13px; }

.ada-arq-lista { list-style: none; margin: 0; padding: 0; }
.ada-arq-linha {
  display: flex; align-items: center; gap: .5rem;
  border-top: 1px solid var(--bs-border-color);
}
.ada-arq-linha:first-child { border-top: 0; }
/* O alvo é a linha inteira: mira de um item de lista não pode ser só o texto. */
.ada-arq-alvo {
  display: flex; align-items: center; gap: .7rem;
  flex: 1 1 auto; min-width: 0;
  padding: .7rem .3rem; text-decoration: none; color: inherit; border-radius: 8px;
}
a.ada-arq-alvo:hover { background: rgba(120, 130, 145, .07); }
.ada-arq-ico {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(120, 130, 145, .12); color: var(--bs-secondary-color);
}
.ada-arq-ico svg { width: 18px; height: 18px; }
/* Cor por tipo: numa lista longa, a forma e o tom acham o arquivo antes da
   leitura do nome. Pasta em azul da marca porque é o que se navega. */
.ada-arq-ico.pasta    { background: rgba(var(--ada-pasta-rgb), .15); color: var(--ada-pasta); }
.ada-arq-ico.pdf      { background: rgba(200, 60, 60, .12); color: #C83C3C; }
.ada-arq-ico.imagem   { background: rgba(30, 184, 183, .14); color: #128F8E; }
.ada-arq-ico.planilha { background: rgba(46, 188, 113, .13); color: #12945C; }
[data-bs-theme="dark"] .ada-arq-ico.pdf      { color: #F08585; }
[data-bs-theme="dark"] .ada-arq-ico.imagem   { color: #4EDEDD; }
[data-bs-theme="dark"] .ada-arq-ico.planilha { color: #4EDE9D; }

.ada-arq-nome {
  font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A meta vai pra direita e some antes do nome quando falta espaço: tamanho e
   data ajudam, mas o nome é o que identifica. */
.ada-arq-meta {
  margin-left: auto; flex: 0 0 auto;
  font-size: .8rem; color: var(--bs-secondary-color);
}
@media (max-width: 575.98px) { .ada-arq-meta { display: none; } }

.ada-modulo-visivel {
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(46, 188, 113, .12); color: #12945C;
}
.ada-modulo-visivel svg { width: 13px; height: 13px; }
[data-bs-theme="dark"] .ada-modulo-visivel { background: rgba(78, 222, 157, .14); color: #4EDE9D; }

.ada-arq-vazio {
  text-align: center; padding: 2.5rem 1rem;
  color: var(--bs-secondary-color); font-size: .9rem;
}
.ada-arq-vazio-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: .6rem;
  border-radius: 12px; background: rgba(120, 130, 145, .1);
}
.ada-arq-vazio-ico svg { width: 24px; height: 24px; }

/* ===== Ladrilhos: pasta e arquivo lado a lado =====
   É assim que se olha um diretório em qualquer sistema — pelo ícone, não pela
   linha de texto. As colunas se acomodam sozinhas à largura; o mínimo de 150px
   é o que cabe um nome de arquivo de contabilidade sem virar duas linhas. */
.ada-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.ada-tile {
  position: relative;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  background: var(--bs-body-bg);
  transition: border-color .12s, background .12s, transform .12s;
}
.ada-tile:hover { border-color: rgba(var(--bs-primary-rgb), .35); background: rgba(var(--bs-primary-rgb), .04); }
.ada-tile-alvo {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .3rem; padding: 1rem .6rem .8rem;
  text-decoration: none; color: inherit;
}
.ada-tile-ico {
  width: 46px; height: 46px; margin-bottom: .15rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(120, 130, 145, .12); color: var(--bs-secondary-color);
}
.ada-tile-ico svg { width: 24px; height: 24px; }
.ada-tile-ico.pasta    { background: rgba(var(--ada-pasta-rgb), .15); color: var(--ada-pasta); }
.ada-tile-ico.pdf      { background: rgba(200, 60, 60, .12); color: #C83C3C; }
.ada-tile-ico.imagem   { background: rgba(30, 184, 183, .14); color: #128F8E; }
.ada-tile-ico.planilha { background: rgba(46, 188, 113, .13); color: #12945C; }
[data-bs-theme="dark"] .ada-tile-ico.pdf      { color: #F08585; }
[data-bs-theme="dark"] .ada-tile-ico.imagem   { color: #4EDEDD; }
[data-bs-theme="dark"] .ada-tile-ico.planilha { color: #4EDE9D; }

/* Nome em até duas linhas e o resto reticências: cortar em uma linha esconde
   demais num nome como "Certidão negativa federal.pdf". */
.ada-tile-nome {
  font-size: .88rem; font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.ada-tile-meta { font-size: .76rem; color: var(--bs-secondary-color); }

/* Os três pontinhos ficam no canto, apagados, e acendem no hover ou quando o
   menu está aberto — presentes o tempo todo seriam vinte pontinhos disputando
   atenção com os nomes. No toque não há hover, então lá ficam sempre visíveis. */
.ada-tile-acoes { position: absolute; top: .3rem; right: .3rem; }
.ada-tile-acoes .ada-acoes-btn { opacity: 0; transition: opacity .12s; }
.ada-tile:hover .ada-tile-acoes .ada-acoes-btn,
.ada-tile-acoes .ada-acoes-btn:focus-visible,
.ada-tile-acoes .ada-acoes-btn[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .ada-tile-acoes .ada-acoes-btn { opacity: .7; } }

.ada-tile-selo {
  position: absolute; top: .45rem; left: .45rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: rgba(46, 188, 113, .14); color: #12945C;
}
.ada-tile-selo svg { width: 13px; height: 13px; }
[data-bs-theme="dark"] .ada-tile-selo { background: rgba(78, 222, 157, .16); color: #4EDE9D; }

/* ===== Lixeira =====
   Faixa própria, separada do conteúdo por espaço e não por linha: ela não é
   mais um item da lista, é outro assunto. Fechada por padrão e sem cor de
   alerta — desfazer engano é rotina, não emergência. */
.ada-lixeira {
  margin-top: 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  background: rgba(120, 130, 145, .05);
}
.ada-lixeira-cab {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  border: 0; background: transparent; text-align: left;
  padding: .7rem .85rem; border-radius: 12px;
}
.ada-lixeira-cab:hover:not(:disabled) { background: rgba(120, 130, 145, .07); }
.ada-lixeira.vazia .ada-lixeira-cab { cursor: default; opacity: .6; }
.ada-lixeira-ico {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: rgba(120, 130, 145, .13); color: var(--bs-secondary-color);
}
.ada-lixeira-ico svg { width: 16px; height: 16px; }
.ada-lixeira-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ada-lixeira-txt strong { font-size: .9rem; font-weight: 600; }
.ada-lixeira-sub { font-size: .78rem; color: var(--bs-secondary-color); }
/* A seta gira ao abrir: é o sinal de que ali tem mais coisa. */
.ada-lixeira-chevron {
  margin-left: auto; display: inline-flex; color: var(--bs-secondary-color);
  transition: transform .18s;
}
.ada-lixeira-chevron svg { width: 16px; height: 16px; }
.ada-lixeira-cab[aria-expanded="true"] .ada-lixeira-chevron { transform: rotate(90deg); }
.ada-lixeira-nota {
  font-size: .8rem; color: var(--bs-secondary-color);
  margin: 0; padding: 0 .85rem .6rem;
}
.ada-lixeira .ada-tiles { padding: 0 .85rem .85rem; }
/* Item na lixeira: apagado e com o nome riscado, pra não se confundir com o que
   está válido logo acima. */
.ada-tile.excluido { background: transparent; border-style: dashed; }
.ada-tile.excluido .ada-tile-alvo { padding-bottom: .4rem; }
.ada-tile.excluido .ada-tile-ico { opacity: .55; }
.ada-tile.excluido .ada-tile-nome { text-decoration: line-through; opacity: .7; }
.ada-tile-restaurar { padding: 0 .6rem .7rem; }

/* Documentos liberados, no portal do cliente. */
.ada-portal-subtitulo { font-size: 1.05rem; font-weight: 700; margin: 0 0 .3rem; }
.ada-portal-doc {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .3rem; text-decoration: none; color: inherit; border-radius: 8px;
}
.ada-portal-doc:hover { background: rgba(120, 130, 145, .07); }

/* Mover: a lista de destinos é de botões, não um seletor — escolher o destino É
   a ação, e com <select> seriam três cliques pro que aqui é um. O recuo mostra
   a hierarquia sem desenhar linhas de árvore. */
.ada-destinos { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.ada-destino {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  border: 0; background: transparent; text-align: left;
  padding: .5rem .4rem; border-radius: 8px;
  padding-left: calc(.4rem + var(--nivel, 0) * 1.25rem);
}
.ada-destino:hover { background: rgba(var(--bs-primary-rgb), .08); }
.ada-destino .ada-arq-ico { width: 30px; height: 30px; }
.ada-destino .ada-arq-ico svg { width: 16px; height: 16px; }

/* Arrastar arquivo/pasta. O ladrilho some do lugar (fica fantasma) e o destino
   ganha contorno tracejado: sem sinal de destino, soltar vira aposta. */
.ada-tile[draggable="true"] { cursor: grab; }
.ada-tile.arrastando { opacity: .35; }
.ada-tile.solta-alvo {
  outline: 2px dashed rgba(var(--bs-primary-rgb), .6);
  outline-offset: -2px;
  background: rgba(var(--bs-primary-rgb), .07);
  border-color: rgba(var(--bs-primary-rgb), .5);
}
.ada-trilha-item.solta-alvo {
  outline: 2px dashed rgba(var(--bs-primary-rgb), .6);
  outline-offset: 1px;
  background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary);
}

/* Menu de ações da linha (três pontinhos), com ícone em cada item. O ícone é
   sinal, não decoração: numa lista de cinco ações a forma diferencia antes da
   leitura — "Mandar pra lixeira" com a lixeira ao lado se distingue de "Mover"
   sem precisar ler as duas.
   A classe é obrigatória e não vale pra todo .dropdown-menu de propósito: a
   barra de navegação, o seletor da ADA e o menu de responsável já têm espaçamento
   próprio, e uma regra genérica aqui (mesma especificidade, mais abaixo no
   arquivo) passaria por cima dos três sem ninguém notar. */
.ada-menu-acoes .dropdown-item {
  display: flex; align-items: center; gap: .55rem;
}
.ada-menu-acoes .dropdown-item > svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  opacity: .6;
}
.ada-menu-acoes .dropdown-item:hover > svg,
.ada-menu-acoes .dropdown-item:focus > svg { opacity: 1; }
/* Item destrutivo já é vermelho pelo text-danger; o ícone herda por
   currentColor e não pode ficar mais apagado que a palavra. */
.ada-menu-acoes .dropdown-item.text-danger > svg { opacity: .85; }

/* Contagem regressiva da lixeira. Vermelha só na última semana: alarme aceso o
   mês inteiro deixa de ser alarme. */
.ada-tile-meta.urgente { color: #C83C3C; font-weight: 600; }
[data-bs-theme="dark"] .ada-tile-meta.urgente { color: #F08585; }

/* ===== Portal: acompanhar as solicitações ===== */
.ada-portal-lista { list-style: none; margin: 0; padding: 0; }
.ada-portal-sol {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem .6rem; border-radius: 10px;
  text-decoration: none; color: inherit;
  border-top: 1px solid var(--bs-border-color);
}
.ada-portal-lista li:first-child .ada-portal-sol { border-top: 0; }
.ada-portal-sol:hover { background: rgba(120, 130, 145, .07); color: inherit; }
.ada-portal-sol-topo { display: flex; align-items: center; gap: .5rem; }
.ada-portal-sol-num {
  font-size: .82rem; font-weight: 700; color: var(--bs-primary);
  font-variant-numeric: tabular-nums;
}
.ada-portal-sol-titulo { font-weight: 500; }
.ada-portal-sol-meta { font-size: .78rem; color: var(--bs-secondary-color); }

/* Situação em palavra, não em bolinha: o cliente não conhece o fluxo interno e
   precisa da frase. "Esperando você" ganha destaque porque é a única que pede
   ação de quem está lendo. */
.ada-portal-sit {
  font-size: .75rem; font-weight: 600; border-radius: 999px;
  padding: .1rem .5rem; background: rgba(120, 130, 145, .14);
  color: var(--bs-secondary-color);
}
.ada-portal-sit.andando { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); }
.ada-portal-sit.ok      { background: rgba(18, 148, 92, .13); color: #12945C; }
.ada-portal-sit.espera  { background: rgba(180, 83, 9, .13); color: #B45309; }
.ada-portal-sit.espera-voce {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #D68110; color: #fff;
}
.ada-portal-sit.espera-voce svg { width: 13px; height: 13px; }
[data-bs-theme="dark"] .ada-portal-sit.ok     { background: rgba(78, 222, 157, .15); color: #4EDE9D; }
[data-bs-theme="dark"] .ada-portal-sit.espera { background: rgba(251, 191, 36, .15); color: #FBBF24; }

/* Cabeçalho da ficha, fora dos cartões: identifica a página inteira. */
.ada-portal-cab { margin-bottom: 1.1rem; }
.ada-portal-cab-linha { display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem; }
/* Tamanho do título fica com as regras de tela, mais abaixo — uma medida, um lugar. */
.ada-portal-cab .ada-portal-titulo { line-height: 1.2; margin-bottom: .35rem; }
.ada-portal-cab .ada-portal-prazo { margin-bottom: 0; }
.ada-portal-prazo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--bs-secondary-color); margin: 0 0 1rem;
}
.ada-portal-prazo svg { width: 15px; height: 15px; }
.ada-portal-prazo.atraso { color: #C83C3C; font-weight: 600; }
[data-bs-theme="dark"] .ada-portal-prazo.atraso { color: #F08585; }

/* Os dados em pares: no celular viram uma coluna sozinhos, sem media query. */
/* Na coluna estreita os dados viram uma lista de pares, não uma grade: com
   duas colunas de 160px o valor quebrava no meio ("Processo de alteração de /
   contrato social"). Fica embaixo do pedido, separado por um fio — é
   referência, não é o assunto. */
.ada-portal-dados {
  display: flex; flex-direction: column; gap: .7rem;
  margin: 1.1rem 0 0; padding-top: .95rem;
  border-top: 1px solid var(--bs-border-color);
}
.ada-portal-dados dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; color: var(--bs-secondary-color); font-weight: 600; }
.ada-portal-dados dd { margin: 0; font-size: .92rem; line-height: 1.35; }
.ada-portal-pedido { white-space: pre-wrap; margin: 0; line-height: 1.6; }

/* O chamado do escritório: é a razão de a pessoa ter aberto o link. Fica fora
   do cartão, entre a ficha e a conversa, pra não passar batido. */
.ada-portal-chamado {
  display: flex; align-items: flex-start; gap: .7rem;
  margin-top: 1rem; padding: .9rem 1rem;
  border-radius: 12px;
  background: rgba(214, 129, 16, .1);
  border: 1px solid rgba(214, 129, 16, .3);
  color: #8A5208;
}
.ada-portal-chamado svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; }
.ada-portal-chamado p { font-size: .88rem; }
[data-bs-theme="dark"] .ada-portal-chamado { background: rgba(251, 191, 36, .1); color: #FBBF24; }

/* ===== Conversa, no formato de aplicativo de mensagem =====
   A do cliente à direita e em azul, a do escritório à esquerda e em cinza — é
   o que todo mundo já sabe ler sem explicação. Falas seguidas da mesma pessoa
   viram um bloco, e o rabinho do balão aparece só na última: é isso que faz
   parecer conversa em vez de lista de cartões. */
.ada-portal-tempo {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .12rem;
}
.ada-portal-msg {
  display: flex; flex-direction: column;
  max-width: 78%;
  margin-top: .5rem;             /* respiro entre blocos de fala */
}
.ada-portal-msg.seguida { margin-top: .12rem; }   /* dentro do bloco, quase encostadas */
.ada-portal-msg.minha { align-self: flex-end; align-items: flex-end; }
.ada-portal-msg.deles { align-self: flex-start; align-items: flex-start; }

.ada-portal-autor {
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  color: var(--bs-secondary-color);
  margin: 0 .7rem .15rem;
}

/* 18px de raio é a geometria do balão de mensagem. O canto do lado de quem
   fala fica quadrado na última do bloco — é o "rabinho" sem desenhar rabinho. */
.ada-portal-balao {
  padding: .5rem .8rem;
  border-radius: 18px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ada-portal-msg.deles .ada-portal-balao {
  background: rgba(120, 130, 145, .14);
  color: var(--bs-body-color);
}
.ada-portal-msg.minha .ada-portal-balao {
  background: var(--ada-blue);
  color: #fff;
}
.ada-portal-msg.minha.fecha .ada-portal-balao { border-bottom-right-radius: 5px; }
.ada-portal-msg.deles.fecha .ada-portal-balao { border-bottom-left-radius: 5px; }
[data-bs-theme="dark"] .ada-portal-msg.deles .ada-portal-balao { background: rgba(255, 255, 255, .1); }

.ada-portal-balao-txt { margin: 0; white-space: pre-wrap; line-height: 1.4; font-size: .95rem; }

/* A hora aparece uma vez por bloco, embaixo e miúda: em cada mensagem ela
   competia com o texto; nenhuma vez e ninguém sabe quando foi. */
.ada-portal-hora {
  font-size: .7rem; color: var(--bs-secondary-color);
  margin: .15rem .7rem 0;
}

/* Anexo dentro do balão azul: o cartão branco de sempre não teria contraste,
   então ele vira um vidro claro sobre o azul. */
.ada-portal-msg.minha .ada-anexo {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.ada-portal-msg.minha .ada-anexo svg,
.ada-portal-msg.minha .ada-anexo-tam { color: rgba(255, 255, 255, .8); }
.ada-portal-msg.minha .ada-anexo:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.ada-portal-balao .ada-anexos { margin-top: .35rem; margin-bottom: 0; }
.ada-portal-balao-txt + .ada-anexos { margin-top: .45rem; }

/* Separador de dia. Agora ele carrega a data de tudo o que vem abaixo, então
   é o único lugar onde a data aparece — as etiquetas mostram só a hora. */
.ada-portal-dia {
  align-self: center; margin: 1.1rem 0 .5rem;
}
.ada-portal-dia span {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* Marco do sistema como ETIQUETA: um bloco fechado e centralizado, que se lê
   como carimbo. Os fios de antes desenhavam uma grade horizontal a cada linha
   e disputavam atenção com os balões da conversa. */
.ada-portal-marco { display: flex; justify-content: center; margin: .3rem 0; }
.ada-portal-etiqueta {
  display: inline-flex; align-items: center; gap: .4rem;
  max-width: 88%;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(120, 130, 145, .1);
  font-size: .76rem; font-weight: 500; line-height: 1.35;
  color: var(--bs-secondary-color);
  text-align: left;
}
.ada-portal-etiqueta svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .75; }
.ada-portal-etiqueta-hora {
  flex: 0 0 auto; opacity: .7; font-variant-numeric: tabular-nums;
  padding-left: .15rem;
}
[data-bs-theme="dark"] .ada-portal-etiqueta { background: rgba(255, 255, 255, .08); }

/* "Esperando você" é a única etiqueta que pede ação de quem está lendo: ela
   ganha a cor do aviso, as outras ficam neutras. */
.ada-portal-etiqueta.chama {
  background: rgba(214, 129, 16, .13);
  color: #8A5208;
}
[data-bs-theme="dark"] .ada-portal-etiqueta.chama { background: rgba(251, 191, 36, .14); color: #FBBF24; }

.ada-portal-responder { margin-top: 1.25rem; }
.ada-portal-responder-acoes {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap;             /* no celular, "Anexar" desce e o botão fica inteiro */
  margin-top: .6rem;
}
.ada-portal-responder-acoes .btn { flex: 1 1 auto; }
@media (min-width: 576px) { .ada-portal-responder-acoes .btn { flex: 0 0 auto; } }
.ada-portal-anexar.compacto {
  width: auto; padding: .5rem .8rem; font-size: .85rem;
}

/* ===== Portal: a porta de entrada =====
   Escrito do celular pra cima, não o contrário: a regra base é a do telefone e
   a tela grande é que ganha media query. É onde o cliente abre o link.
   No telefone, cada porta é uma LINHA inteira com a seta à direita — o formato
   que o polegar acerta e que o aparelho já ensinou. Lado a lado numa tela de
   440px elas ficavam com 190px cada e a frase quebrava em quatro linhas. */
.ada-portal-portas {
  display: grid; grid-template-columns: 1fr;
  gap: .6rem;
}
.ada-porta {
  display: flex; align-items: center; gap: .85rem;
  padding: .95rem 1rem;
  border-radius: 14px;
  background: var(--bs-tertiary-bg, #fff);
  border: 1px solid var(--bs-border-color);
  text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .15s, border-color .15s, background .12s;
}
/* Toque não tem hover: o retorno é o afundar no :active. */
.ada-porta:active { transform: scale(.985); background: rgba(120, 130, 145, .06); }
.ada-porta:hover {
  color: inherit;
  border-color: rgba(var(--bs-primary-rgb), .45);
}
.ada-porta-txt { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.ada-porta strong { font-size: 1rem; }
.ada-porta-txt span { font-size: .84rem; color: var(--bs-secondary-color); line-height: 1.4; }
.ada-porta-ico {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(120, 130, 145, .12); color: var(--bs-secondary-color);
}
.ada-porta-ico svg { width: 20px; height: 20px; }
.ada-porta-seta { flex: 0 0 auto; display: inline-flex; color: var(--bs-secondary-color); opacity: .55; }
.ada-porta-seta svg { width: 18px; height: 18px; }
/* A porta primária é abrir: é o que este link existe pra fazer. */
.ada-porta.primaria { border-color: rgba(var(--bs-primary-rgb), .35); }
.ada-porta.primaria .ada-porta-ico { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); }
[data-bs-theme="dark"] .ada-porta { background: rgba(255, 255, 255, .04); }

/* Da largura de tablet pra cima há espaço pra elas virarem dois cartões. */
@media (min-width: 640px) {
  .ada-portal-portas { grid-template-columns: 1fr 1fr; gap: .85rem; }
  .ada-portal-portas.uma { grid-template-columns: 1fr; }
  .ada-porta {
    flex-direction: column; align-items: flex-start; gap: .3rem;
    padding: 1.4rem 1.2rem; border-radius: 16px;
  }
  .ada-porta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -12px rgba(16, 24, 40, .3); }
  .ada-porta-ico { width: 44px; height: 44px; margin-bottom: .5rem; }
  .ada-porta-ico svg { width: 22px; height: 22px; }
  .ada-porta strong { font-size: 1.05rem; }
  .ada-porta-txt span { font-size: .85rem; }
  .ada-porta-seta { display: none; }   /* cartão não precisa de seta: ele todo é o alvo */
}

/* O chamado vira link quando está na entrada: ele é o atalho pro que importa. */
.ada-portal-chamado-link { text-decoration: none; margin-bottom: 1rem; margin-top: 0; }
.ada-portal-chamado-link:hover { filter: brightness(.98); }
.ada-portal-recibo-acoes { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* A conversa do portal rola por dentro. Altura em vh e não em rem: no celular
   deitado 26rem tomaria a tela inteira, e a caixa de escrever — que é o que a
   pessoa veio usar — sairia de vista. */
.ada-portal-tempo-caixa {
  max-height: min(60vh, 30rem);
  min-height: 12rem;
  overflow-y: auto;
  margin: 0 -.35rem;
  padding: .2rem .35rem;
  overscroll-behavior: contain;   /* rolagem não escapa pra página ao chegar no fim */
}


/* ===== Portal no celular =====
   É onde o cliente vai abrir o link — quase sempre no telefone, muitas vezes
   segurando com uma mão. O respiro generoso do desktop vira desperdício aqui:
   1.75rem de cada lado comem metade da largura útil de uma tela de 360px. */
/* Ainda escrito do celular pra cima: aqui ficam os valores de telefone que não
   couberam nas regras de cima, e o que muda na tela grande vem no min-width. */
.ada-portal-cab .ada-portal-titulo { font-size: 1.3rem; }
.ada-portal-numero { font-size: 1.35rem; }
/* Balão largo: com 85% sobrava uma faixa inútil à direita no telefone, e o
   texto quebrava cedo demais. */
.ada-portal-balao { max-width: 92%; }
.ada-portal-marco-txt { max-width: 100%; font-size: .72rem; }
.ada-portal-marco-quando { width: 100%; }   /* a hora desce em vez de espremer a frase */
.ada-portal-tempo-caixa { max-height: 55vh; }
.ada-portal-anexar { padding: .7rem .8rem; font-size: .85rem; }

@media (min-width: 576px) {
  .ada-portal-cab .ada-portal-titulo { font-size: 1.55rem; }
  .ada-portal-numero { font-size: 1.6rem; }
  .ada-portal-balao { max-width: 85%; }
  .ada-portal-marco-txt { max-width: 78%; font-size: .74rem; }
  .ada-portal-marco-quando { width: auto; }
  .ada-portal-tempo-caixa { max-height: min(60vh, 30rem); }
  .ada-portal-anexar { padding: .85rem 1rem; font-size: .9rem; }
}

/* Faixa de avisos do portal. Fica abaixo das portas e não em cima: pedir
   permissão antes de a pessoa ver pra que serve o lugar é o que faz todo mundo
   apertar "bloquear" por reflexo — e bloqueio não se desfaz sem ir nas
   configurações do navegador. */
.ada-portal-avisos {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 1rem; padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px dashed var(--bs-border-color);
  background: var(--bs-tertiary-bg, #fff);
}
.ada-portal-avisos-ico {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary);
}
.ada-portal-avisos-ico svg { width: 18px; height: 18px; }
.ada-portal-avisos-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ada-portal-avisos-txt strong { font-size: .92rem; }
.ada-portal-avisos-txt span { font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.4; }
.ada-portal-avisos .btn { flex: 0 0 auto; }
/* Ligado: borda cheia e verde discreto — estado, não alarme. */
.ada-portal-avisos.ligado {
  border-style: solid;
  border-color: rgba(18, 148, 92, .35);
  background: rgba(18, 148, 92, .05);
}
.ada-portal-avisos.ligado .ada-portal-avisos-ico { background: rgba(18, 148, 92, .12); color: #12945C; }
[data-bs-theme="dark"] .ada-portal-avisos { background: rgba(255, 255, 255, .04); }
@media (max-width: 419.98px) {
  .ada-portal-avisos { flex-wrap: wrap; }
  .ada-portal-avisos .btn { width: 100%; }
}

/* ===== Faixa "adicionar à tela de início" =====
   Presa embaixo, como no S7: é oferta, não conteúdo — não pode empurrar o que
   a pessoa veio ler. Fica acima da barra do indicador de home do iPhone. */
.ada-instalar {
  /* No fluxo, logo depois do conteúdo — e não presa ao fim da tela. Fixa, ela
     ficava a meia tela de distância do que a página mostra quando o conteúdo é
     curto: parecia de outro lugar. Aqui ela é o último item da página, que é o
     que ela é. */
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: .45rem .8rem;
  margin-top: 1.25rem;
  padding: .95rem 1rem;
  background: var(--bs-tertiary-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  box-shadow: 0 4px 16px -10px rgba(16, 24, 40, .3);
}
[data-bs-theme="dark"] .ada-instalar { background: var(--bs-tertiary-bg); }
.ada-instalar-ico { border-radius: 12px; flex: 0 0 auto; }
.ada-instalar-txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ada-instalar-txt strong { font-size: .92rem; line-height: 1.3; }
.ada-instalar-txt span { font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.4; }
/* O X é discreto e no canto: recusar tem que ser fácil, mas não é o assunto. */
.ada-instalar-x {
  position: absolute; top: .5rem; right: .5rem;
  border: 0; background: transparent; padding: .25rem;
  color: var(--bs-secondary-color); opacity: .6; line-height: 0;
}
.ada-instalar-x:hover { opacity: 1; }
.ada-instalar-x svg { width: 16px; height: 16px; }
/* Botão na terceira coluna no computador; no telefone desce e ocupa a linha. */
.ada-instalar .btn { grid-column: 3; }
@media (max-width: 479.98px) {
  .ada-instalar { grid-template-columns: auto 1fr; }
  .ada-instalar .btn { grid-column: 1 / -1; width: 100%; margin-top: .2rem; }
}
/* Passo a passo do iPhone. Uma ação por linha, com o número num disco: é uma
   sequência a executar com o aparelho na mão, não um parágrafo a ler. Separado
   do texto de cima por um fio — dali pra baixo é instrução. */
.ada-instalar-passos {
  grid-column: 1 / -1; list-style: none;
  margin: .8rem 0 0; padding: .75rem 0 0;
  border-top: 1px solid var(--bs-border-color);
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .86rem; line-height: 1.35;
}
.ada-instalar-passos li { display: flex; align-items: center; gap: .55rem; }
.ada-instalar-num {
  width: 20px; height: 20px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(120, 130, 145, .15); color: var(--bs-secondary-color);
  font-size: .72rem; font-weight: 700;
}
/* O nome do botão do iPhone, com o ícone dele: é o que a pessoa procura na
   tela, então aparece igual ao que ela vai ver. */
.ada-instalar-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .4rem; border-radius: 6px; white-space: nowrap;
  background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary);
  font-weight: 600;
}
.ada-instalar-chip svg { width: 13px; height: 13px; }


/* Seções da entrada do portal. O respiro entre elas é o que separa os assuntos:
   antes eram três blocos encostados no topo e meia tela vazia embaixo. */
.ada-portal-secao { margin-top: 1.5rem; }
.ada-portal-secao-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin: 0 .2rem .5rem;
}
.ada-portal-secao-topo h2 {
  margin: 0; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color);
}
.ada-portal-secao-topo a { font-size: .82rem; text-decoration: none; }
/* Cartão de lista respira menos por dentro: quem manda no espaço é a distância
   entre as seções, não o acolchoado de cada uma. */
.ada-portal-secao .ada-portal-card { padding: .35rem .7rem; }
.ada-portal-portas { margin-top: 1.25rem; }

/* ===== Tela de entrada ===== */
/* Ver a senha: o botão fica dentro do campo, e o campo abre espaço pra ele —
   sobreposto, ele cobriria o fim do que a pessoa digitou. */
.ada-senha { position: relative; }
.ada-senha .form-control { padding-right: 2.75rem; }
.ada-senha-olho {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
  border: 0; background: transparent; padding: .35rem;
  color: var(--bs-secondary-color); opacity: .65; line-height: 0;
  border-radius: 7px;
}
.ada-senha-olho:hover, .ada-senha-olho.ativo { opacity: 1; color: var(--bs-primary); }
.ada-senha-olho svg { width: 18px; height: 18px; }

/* ===== Cabeçalho de ficha (empresa) =====
   Cabeçalho e abas dentro de UMA superfície. Solto sobre o fundo da página ele
   parecia sem lugar — e as abas, que pertencem a ele, flutuavam por conta. A
   aba ativa aterra no fio de baixo desta caixa, que é o que amarra as duas
   coisas num objeto só. Classe própria (e não .ada-hub) porque aquela já é de
   outra tela. */
.ada-ficha-hub {
  background: var(--bs-tertiary-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  margin-bottom: 1rem;
  overflow: hidden;             /* a aba ativa não vaza pelo canto arredondado */
}
[data-bs-theme="dark"] .ada-ficha-hub { background: rgba(255, 255, 255, .03); }

.ada-topo-ficha {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.15rem 1.25rem 1rem;
}
.ada-topo-logo {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary);
}
.ada-topo-logo svg { width: 23px; height: 23px; }
.ada-topo-txt { min-width: 0; flex: 1 1 auto; }
/* Nome e situação na mesma linha, a situação empurrada pra direita: ela é um
   estado do registro, não um dado a mais na fila do CNPJ e do e-mail. */
.ada-topo-linha { display: flex; align-items: center; gap: .75rem; }
.ada-topo-linha h1 {
  font-size: 1.22rem; font-weight: 700; line-height: 1.25; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ada-topo-linha .ada-situacao { margin-left: auto; flex: 0 0 auto; }
.ada-topo-fantasia {
  margin: .05rem 0 0; font-size: .85rem; color: var(--bs-secondary-color);
}
/* Os dados em linha, com um fio entre eles. Quebram pra linha seguinte quando
   não couberem, em vez de esticar o cabeçalho pra fora da tela. */
.ada-topo-dados {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .15rem 0;
  margin-top: .3rem;
}
.ada-topo-dado {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .86rem; color: var(--bs-secondary-color);
  min-width: 0; padding-right: .8rem;
}
.ada-topo-dado + .ada-topo-dado {
  padding-left: .8rem; border-left: 1px solid var(--bs-border-color);
}
.ada-topo-dado svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .8; }
.ada-topo-dado a { text-decoration: none; }
.ada-topo-dado a:hover { text-decoration: underline; }
/* O botão de copiar aparece no hover, como nas fichas. */
.ada-topo-dado .ada-copiar-btn { opacity: 0; transition: opacity .12s; }
.ada-topo-dado:hover .ada-copiar-btn,
.ada-topo-dado .ada-copiar-btn:focus-visible { opacity: 1; }

/* As abas encostadas na base da caixa: sem fio próprio (a borda da caixa já
   faz esse papel) e com rolagem lateral no celular, em vez de encavalar. */
.ada-ficha-hub .ada-hub-tabs {
  border-bottom: 0;
  padding: 0 .75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ada-ficha-hub .ada-hub-tabs::-webkit-scrollbar { display: none; }

@media (max-width: 575.98px) {
  .ada-topo-ficha { gap: .75rem; padding: 1rem 1rem .85rem; align-items: flex-start; }
  .ada-topo-logo { width: 40px; height: 40px; border-radius: 11px; }
  .ada-topo-logo svg { width: 20px; height: 20px; }
  .ada-topo-linha { flex-wrap: wrap; gap: .35rem; }
  .ada-topo-linha h1 { font-size: 1.05rem; white-space: normal; }
  .ada-topo-linha .ada-situacao { margin-left: 0; }
  /* Empilhados no celular: lado a lado, CNPJ e e-mail não caberiam sem cortar
     o e-mail no meio — e e-mail cortado não serve pra nada. */
  .ada-topo-dado { padding-right: 0; }
  .ada-topo-dado + .ada-topo-dado { padding-left: 0; border-left: 0; }
  .ada-topo-dados { flex-direction: column; align-items: flex-start; gap: .1rem; }
}

/* Atividades em duas colunas quando o cartão ocupa a linha inteira: uma coluna
   só, na largura toda, deixava a descrição curta com meio metro de vazio à
   direita. O separador vira vertical entre as colunas. */
@media (min-width: 768px) {
  .ada-atividades-leitura.larga {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem;
  }
  .ada-atividades-leitura.larga .ada-atividade-item + .ada-atividade-item { margin-top: 0; }
  .ada-atividades-leitura.larga .ada-atividade-item {
    padding: .55rem 0; border-top: 1px solid var(--bs-border-color);
  }
  /* As duas primeiras (uma de cada coluna) não levam fio em cima. */
  .ada-atividades-leitura.larga .ada-atividade-item:nth-child(1),
  .ada-atividades-leitura.larga .ada-atividade-item:nth-child(2) { border-top: 0; padding-top: 0; }
}

/* Pessoa no lugar da logo: iniciais num disco, como a barra faz com o usuário.
   Distingue de relance a ficha de gente da ficha de empresa. */
.ada-topo-logo.pessoa {
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
  font-size: 1rem; font-weight: 700; letter-spacing: .02em;
}

/* ===== Obrigações: a grade do fechamento ===== */
/* A competência manda na tela toda, então ela é o maior elemento da barra. */
.ada-comp { display: flex; align-items: center; gap: .15rem; }
.ada-comp-nome {
  font-size: 1rem; font-weight: 600; min-width: 9.5rem; text-align: center;
}
.ada-comp-seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--bs-secondary-color); text-decoration: none;
}
.ada-comp-seta:hover { background: rgba(120, 130, 145, .12); color: var(--bs-primary); }
.ada-comp-seta svg { width: 16px; height: 16px; }
.ada-comp-resumo { display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.ada-comp-conta { color: var(--bs-secondary-color); }
.ada-comp-conta strong { color: var(--bs-body-color); font-size: .95rem; }
.ada-comp-atraso {
  display: inline-flex; align-items: center; gap: .25rem;
  color: #C83C3C; font-weight: 600;
}
.ada-comp-atraso svg { width: 14px; height: 14px; }
[data-bs-theme="dark"] .ada-comp-atraso { color: #F08585; }
.ada-barra-espaco { flex: 1 1 auto; }
.ada-busca-grade { max-width: 15rem; }

/* A grade. Coluna da empresa fixa na horizontal: com dez obrigações a tabela
   rola, e rolar perdendo de vista de quem é a linha é o defeito clássico. */
.ada-grade { margin: 0; }
.ada-grade th, .ada-grade td { border-color: var(--bs-border-color); }
.ada-grade thead th {
  vertical-align: bottom; padding: .8rem .6rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg, #fff);
}
.ada-grade-canto, .ada-grade-empresa {
  position: sticky; left: 0; z-index: 2;
  background: var(--bs-tertiary-bg, #fff);
  min-width: 13rem; max-width: 18rem;
}
[data-bs-theme="dark"] .ada-grade thead th,
[data-bs-theme="dark"] .ada-grade-canto,
[data-bs-theme="dark"] .ada-grade-empresa { background: var(--bs-tertiary-bg); }
.ada-grade-canto {
  z-index: 3;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color);
}
.ada-grade-empresa {
  font-weight: 500; font-size: .9rem; padding: .5rem .6rem;
  border-right: 1px solid var(--bs-border-color);
}
.ada-grade-empresa a { color: inherit; text-decoration: none; }
.ada-grade-empresa a:hover { color: var(--bs-primary); }

/* Coluna da obrigação: nome, regra embaixo e o atalho de marcar todas. A faixa
   de cor no topo é a do setor, o mesmo código de cor do quadro. */
.ada-grade-col {
  min-width: 8.5rem; text-align: center;
  border-top: 3px solid var(--setor-cor, var(--bs-border-color));
}
.ada-grade-col-nome { display: block; font-size: .85rem; font-weight: 600; line-height: 1.25; }
.ada-grade-col-sub { display: block; font-size: .72rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.ada-grade-col-todos { margin-top: .35rem; }
.ada-grade-todos {
  display: inline-flex; align-items: center; gap: .2rem;
  border: 0; background: transparent; padding: .1rem .3rem; border-radius: 6px;
  font-size: .7rem; color: var(--bs-secondary-color); opacity: 0;
  transition: opacity .12s;
}
.ada-grade-todos svg { width: 12px; height: 12px; }
/* Só no hover da coluna: um botão "todas" aceso em cada coluna seria dez
   convites a marcar tudo por engano. */
.ada-grade-col:hover .ada-grade-todos { opacity: 1; }
.ada-grade-todos:hover { background: rgba(18, 148, 92, .12); color: #12945C; }

.ada-grade-celula { text-align: center; padding: .35rem .4rem; position: relative; }
.ada-grade-celula.vazia { color: var(--bs-secondary-color); opacity: .35; }
.ada-grade tbody tr:hover td, .ada-grade tbody tr:hover th { background: rgba(120, 130, 145, .05); }
.ada-grade-form { display: inline; }

/* A marca da célula: o estado é a cor e o ícone; a data é o detalhe. Verde
   entregue, âmbar a fazer, vermelho vencido — nada de texto pra ler em 240
   células. */
.ada-celula-marca {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 1px solid transparent; border-radius: 999px;
  padding: .2rem .5rem; font-size: .75rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: transform .1s, background .12s;
}
.ada-celula-marca svg { width: 13px; height: 13px; }
.ada-celula-marca:active { transform: scale(.94); }
.ada-celula-marca.feita { background: rgba(18, 148, 92, .13); color: #12945C; }
.ada-celula-marca.pendente { background: rgba(120, 130, 145, .12); color: var(--bs-secondary-color); }
.ada-celula-marca.atrasada { background: rgba(200, 60, 60, .12); color: #C83C3C; }
.ada-celula-marca.feita:hover { background: rgba(18, 148, 92, .22); }
.ada-celula-marca.pendente:hover { background: rgba(18, 148, 92, .16); color: #12945C; }
.ada-celula-marca.atrasada:hover { background: rgba(200, 60, 60, .2); }
[data-bs-theme="dark"] .ada-celula-marca.feita { background: rgba(78, 222, 157, .15); color: #4EDE9D; }
[data-bs-theme="dark"] .ada-celula-marca.atrasada { background: rgba(240, 133, 133, .15); color: #F08585; }
.ada-grade-nota {
  position: absolute; top: .15rem; right: .15rem;
  color: var(--bs-secondary-color); opacity: .5;
}
.ada-grade-nota svg { width: 11px; height: 11px; }

/* Escolha das empresas no modal: mesma pílula das permissões do nível. */
.ada-empresas-escolha {
  display: flex; flex-wrap: wrap; gap: .4rem;
  max-height: 22rem; overflow-y: auto;
}
.ada-empresa-escolha { display: contents; }
.ada-chip-botao { border: 1px solid var(--bs-border-color); background: transparent; cursor: pointer; }
.ada-chip-botao:hover { border-color: rgba(var(--bs-primary-rgb), .5); color: var(--bs-primary); }

/* Pilha de responsáveis: as iniciais sobrepostas, como em toda lista de
   participantes. A sobreposição é o que faz caber três num canto de cartão. */
.ada-donos { display: inline-flex; align-items: center; }
.ada-donos .ada-dono + .ada-dono { margin-left: -8px; }
.ada-donos .ada-dono { border: 2px solid var(--bs-tertiary-bg, #fff); }
[data-bs-theme="dark"] .ada-donos .ada-dono { border-color: var(--bs-tertiary-bg); }
.ada-dono.mais {
  background: rgba(120, 130, 145, .18); color: var(--bs-secondary-color);
  font-size: .68rem;
}

/* Botão de marcar com a pessoa: as iniciais dentro da pílula, pra ela ter a
   mesma cara do avatar que aparece no cartão depois. */
.ada-escolha-pessoa { display: inline-flex; align-items: center; gap: .4rem; }
.ada-escolha-pessoa .ada-dono { width: 20px; height: 20px; font-size: .62rem; }
.btn-check:checked + .ada-escolha-pessoa .ada-dono {
  background: rgba(255, 255, 255, .25); color: #fff;
}
/* O menu de responsáveis agora tem formulário dentro: precisa de largura e de
   não fechar ao primeiro clique (data-bs-auto-close="outside" no botão). */
.ada-menu-larga { min-width: 20rem; padding: .75rem; }
.ada-menu-larga .ada-menu-titulo { padding: 0 0 .5rem; }
.ada-menu-form .ada-modulos-escolha { max-height: 14rem; overflow-y: auto; }
/* Contador no botão da ficha: dois responsáveis não cabem escritos ali. */
.ada-btn-conta {
  min-width: 18px; padding: 0 .3rem; border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary);
  font-size: .7rem; font-weight: 700;
}

/* Marca na barra. A imagem tem 3x a altura exibida (96px → 30px) pra ficar
   nítida em tela de alta densidade. Um fio separa a marca dos módulos: sem
   ele, o símbolo parece o primeiro item do menu.
   Nome próprio (.ada-topo-marca) de propósito: .ada-marca já é o cabeçalho de
   Minha Empresa, e dividir a classe fez a borda desta virar um parêntese
   (herdou o canto arredondado de outra regra) e deformou o cabeçalho de lá. */
.ada-topo-marca {
  align-self: center;              /* o container da barra não centraliza sozinho */
  display: inline-flex; align-items: center;
  padding: 0 .9rem 0 .35rem; margin-right: .5rem;
  border-right: 1px solid var(--bs-border-color);
}
/* A logo do escritório em destaque: altura fixa, largura livre até um teto —
   logo é horizontal ou quadrada, e esticar uma pra caber na outra deforma. */
.ada-barra-logo { height: 38px; width: auto; max-width: 200px; object-fit: contain; display: block; transition: transform .15s; }
.ada-topo-marca:hover .ada-barra-logo { transform: scale(1.03); }
/* Uma logo só por escritório (decisão do produto), feita pra fundo claro. No
   escuro ela vai sobre uma placa clara em vez de sumir — letra escura de logo
   sobre marinho não se lê, e não dá pra adivinhar a cor de cada logo. */
[data-bs-theme="dark"] .ada-barra-logo { background: #fff; border-radius: 9px; padding: 4px 8px; height: 40px; }
.ada-barra-nome { font-weight: 700; font-size: 1.05rem; color: var(--ada-destaque); letter-spacing: -.01em; white-space: nowrap; }

/* "powered by Contpalm": assinatura do produto, não navegação. Pequena e
   apagada de propósito — quem está em destaque é o escritório. */
.ada-powered {
  font-size: .68rem; letter-spacing: .02em; white-space: nowrap;
  color: var(--bs-secondary-color); opacity: .75; user-select: none;
}
.ada-powered strong { font-weight: 700; letter-spacing: 0; }
.ada-powered + .ada-usuario { margin-left: .9rem; }
/* Só na BARRA ele some no celular (a barra recolhe e não há onde caber); na
   entrada e no portal ele fica. */
@media (max-width: 991.98px) { .ada-topnav .ada-powered { display: none; } }
.ada-topo-marca:hover img { transform: scale(1.06); }
/* No celular a barra recolhe e o fio ficaria solto ao lado do botão do menu. */
@media (max-width: 991.98px) {
  .ada-topo-marca { border-right: 0; padding-right: .35rem; margin-right: 0; }
}
/* O token de borda do escuro é quase a cor da barra: o fio sumia. */
[data-bs-theme="dark"] .ada-topo-marca { border-right-color: rgba(255, 255, 255, .14); }

/* Grade: a coluna da empresa tem largura própria e o que sobra vai para as
   obrigações — com uma obrigação só, a tabela esticada dava metade da largura
   a um nome de empresa. E o topo de todas as colunas tem a mesma espessura:
   só a da obrigação levava a faixa de 3px, e o cabeçalho ficava desnivelado.
   Sem setor, a faixa é transparente em vez de uma barra cinza que parece erro. */
.ada-grade-canto, .ada-grade-empresa { width: 16rem; }
.ada-grade-canto { border-top: 3px solid transparent; }
.ada-grade-col { border-top-color: var(--setor-cor, transparent); }

/* ===== Marca do escritório (cartão e modal em Minha Empresa) ===== */
.ada-marca-previa {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: .9rem; border-radius: 12px;
  background: #fff; border: 1px dashed var(--bs-border-color);
}
.ada-marca-previa-img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.ada-cor-linha { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.ada-cor-amostra { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex-shrink: 0; }
.ada-marca-envio { display: flex; flex-direction: column; gap: .7rem; }
.ada-cores-sugeridas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.ada-cores-sugeridas:empty { display: none; }
.ada-cor-sugestao {
  width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .12s, box-shadow .12s;
}
.ada-cor-sugestao:hover { transform: scale(1.08); }
.ada-cor-sugestao.ativa { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-body-color); }
/* O "padrão" leva um risco em diagonal: é a ausência de cor própria, não uma cor. */
.ada-cor-sugestao.padrao { position: relative; overflow: hidden; }
.ada-cor-sugestao.padrao::after {
  content: ''; position: absolute; left: -20%; right: -20%; top: 50%; height: 2px;
  background: rgba(255, 255, 255, .85); transform: rotate(-45deg);
}
.ada-cor-campo { display: flex; align-items: center; gap: .5rem; }
.ada-cor-campo .form-control { max-width: 10rem; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.ada-cor-campo .form-control::placeholder { text-transform: none; }
.ada-cor-seletor {
  width: 42px; height: 38px; padding: 3px; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--bs-border-color); border-radius: 9px; background: var(--bs-body-bg);
}
.ada-marca-amostra {
  display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: .8rem 1rem;
  border-radius: 12px; background: var(--bs-body-bg);
}
.ada-marca-amostra-texto { font-weight: 600; font-size: .92rem; }

/* Escolha de escritório (mesma pessoa em mais de um), depois da senha. */
.ada-entrar-opcoes { display: flex; flex-direction: column; gap: .5rem; }
.ada-entrar-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; padding: .85rem 1rem; text-align: left; font-weight: 600;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: 12px; cursor: pointer;
}
.ada-entrar-opcao:hover { border-color: rgba(var(--ada-destaque-rgb), .45); color: var(--ada-destaque); }
.ada-entrar-opcao svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ===== Acessos do cliente (ficha da empresa, aba Solicitações) ===== */
.ada-acessos { list-style: none; margin: 0; padding: 0; }
.ada-acesso {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 36px auto;
  align-items: center; gap: .85rem; padding: .7rem 0;
  border-top: 1px solid var(--bs-border-color);
}
.ada-acesso:first-child { border-top: 0; padding-top: 0; }
.ada-acesso-ini {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700; background: rgba(var(--ada-destaque-rgb), .12); color: var(--ada-destaque);
}
.ada-acesso-nome { font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.ada-acesso-email { font-size: .84rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ada-acesso-mais {
  font-size: .68rem; font-weight: 700; padding: .05rem .35rem; border-radius: 6px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color);
}
.ada-acesso-estado { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; font-size: .86rem; }
.ada-acesso-estado small { font-size: .74rem; color: var(--bs-secondary-color); }
.ada-acesso-convite { color: #b45309; font-weight: 500; }
.ada-acesso-convite.vencido { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .ada-acesso-convite { color: #fbbf24; }
.ada-acesso-copiar .ada-copiar-btn { opacity: 1; }
@media (max-width: 575.98px) {
  .ada-acesso { grid-template-columns: auto minmax(0, 1fr) 36px auto; }
  .ada-acesso-estado { grid-column: 2 / 3; grid-row: 2; align-items: flex-start; }
}

/* Portal com cliente logado: quem é e como sair, discreto no topo. */
.ada-portal-quem {
  display: flex; align-items: center; justify-content: flex-end; gap: .9rem;
  font-size: .84rem; color: var(--bs-secondary-color); margin-bottom: .9rem;
}
.ada-portal-quem span { font-weight: 600; color: var(--bs-body-color); margin-right: auto; }
.ada-portal-quem a { color: var(--ada-destaque); text-decoration: none; }
.ada-portal-quem form { margin: 0; }
.ada-portal-quem button { background: none; border: 0; padding: 0; color: var(--ada-destaque); font: inherit; cursor: pointer; }


/* ===== Tela de entrada de vidro (entrar, convite, escolher escritório) =====
   Prefixo .ada-login e não .ada-porta: .ada-porta já é o botão grande do
   portal do cliente, e dividir o nome pintou um fundo branco atrás do vidro.
   Um cartão de vidro no centro. O vidro só aparece se houver algo atrás para
   desfocar — por isso o fundo tem anéis e uma esfera que passa por trás do
   cartão. Tudo desenhado com a cor do escritório (--ada-blue-rgb e
   --ada-ciano-rgb vêm de utils/marca), sem imagem. */
.ada-login-fundo {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 18%, rgba(var(--ada-ciano-rgb), .16), transparent 70%),
    radial-gradient(50% 50% at 88% 88%, rgba(var(--ada-blue-rgb), .16), transparent 70%),
    linear-gradient(160deg, var(--bs-tertiary-bg) 0%, var(--bs-body-bg) 60%);
}
/* Anel de vidro: um aro claro com uma faixa da cor da marca dentro dele, como
   reflexo em cromado. É um gradiente radial, não borda — borda não tem brilho. */
.ada-login-anel {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side,
    transparent 76%,
    var(--ada-vidro-reflexo) 81%,
    rgba(var(--ada-blue-rgb), .22) 87%,
    rgba(var(--ada-ciano-rgb), .16) 92%,
    var(--ada-vidro-reflexo) 96%,
    transparent 100%);
  filter: blur(1px);
}
.ada-login-anel.a1 { width: 78vmax; height: 78vmax; left: -34vmax; top: -38vmax; }
.ada-login-anel.a2 { width: 70vmax; height: 70vmax; right: -30vmax; bottom: -40vmax; }
.ada-login-anel.a3 { width: 42vmax; height: 42vmax; right: -12vmax; top: -20vmax; opacity: .8; }

.ada-login {
  position: relative; z-index: 1;
  min-height: calc(100vh - 5.5rem); min-height: calc(100dvh - 5.5rem);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; overflow: clip;      /* a esfera não pode abrir rolagem lateral no celular */
  padding-block: 1rem;
}
.ada-login-caixa { position: relative; width: 100%; max-width: 25rem; }
.ada-login-esfera {
  position: absolute; z-index: 0; width: 13rem; height: 13rem; right: -6rem; top: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    var(--ada-esfera-luz) 0%, var(--ada-esfera-luz) 10%,
    rgba(var(--ada-ciano-rgb), .45) 48%,
    rgba(var(--ada-blue-rgb), .6) 80%,
    rgba(var(--ada-blue-rgb), .8) 100%);
  box-shadow: 0 30px 60px rgba(var(--ada-blue-rgb), .22), inset -14px -20px 40px rgba(var(--ada-blue-rgb), .3);
}
.ada-login-vidro {
  position: relative; z-index: 1; padding: 10px; border-radius: 30px;
  background: var(--ada-vidro);
  border: 1px solid var(--ada-vidro-borda);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 30px 80px rgba(var(--ada-blue-rgb), .14), 0 2px 8px rgba(15, 25, 45, .05),
              inset 0 1px 0 var(--ada-vidro-reflexo);
}
.ada-login-painel { border-radius: 22px; padding: 2.4rem 1.6rem 1.3rem; background: var(--ada-vidro-painel); }
/* Sem desfoque (navegador antigo) ou para quem pede menos transparência: vidro
   vira superfície cheia, legível do mesmo jeito. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ada-login-vidro { background: var(--ada-vidro-painel-cheio); }
}
@media (prefers-reduced-transparency: reduce) {
  .ada-login-vidro, .ada-login-painel { background: var(--ada-vidro-painel-cheio); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.ada-login-cabeca { text-align: center; margin-bottom: 1.7rem; }
.ada-login-logo { height: 50px; width: auto; max-width: 220px; object-fit: contain; display: inline-block; margin-bottom: 1.3rem; }
[data-bs-theme="dark"] .ada-login-logo { background: #fff; border-radius: 12px; padding: 6px 12px; height: 56px; }
.ada-login-escritorio {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ada-destaque); margin-bottom: .6rem;
}
.ada-login-titulo { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .5rem; }
.ada-login-sub { font-size: .88rem; color: var(--bs-secondary-color); margin: 0; line-height: 1.5; }

.ada-login-form { display: flex; flex-direction: column; gap: 1rem; }
.ada-login-campo label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .4rem; }
.ada-login .form-control {
  height: 48px; border-radius: 13px; border: 1px solid transparent;
  background: var(--ada-vidro-campo); box-shadow: 0 1px 2px rgba(15, 25, 45, .06);
  padding-inline: 1rem; font-size: .95rem;
}
.ada-login .form-control::placeholder { color: var(--bs-secondary-color); opacity: .6; }
.ada-login .form-control:focus {
  border-color: rgba(var(--ada-destaque-rgb), .5);
  box-shadow: 0 0 0 4px rgba(var(--ada-destaque-rgb), .14);
}
.ada-login .ada-senha .form-control { padding-right: 2.9rem; }
.ada-login .ada-senha-olho { right: .55rem; }
.ada-login .alert { border-radius: 13px; font-size: .88rem; padding: .7rem .9rem; margin-bottom: 1rem; }

/* O botão: pílula inteira, só com o texto. */
.ada-login-botao {
  display: flex; width: 100%; margin-top: .7rem;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.ada-login-rotulo {
  flex: 1; height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  background: var(--ada-blue); color: #fff; transition: background .15s;
}
.ada-login-botao:hover .ada-login-rotulo { background: var(--ada-blue-hover); }
.ada-login-botao:active .ada-login-rotulo { background: var(--ada-blue-active); }
.ada-login-botao:focus-visible { outline: none; }
.ada-login-botao:focus-visible .ada-login-rotulo { box-shadow: 0 0 0 3px var(--ada-vidro-painel-cheio), 0 0 0 5px var(--ada-destaque); }

.ada-login-pe { margin-top: 1.9rem; text-align: center; }
.ada-login-ajuda { font-size: .8rem; color: var(--bs-secondary-color); margin: 0; }
.ada-login-pe .ada-powered { margin: .55rem 0 0; }
.ada-login .ada-entrar-opcao { background: var(--ada-vidro-campo); border-color: transparent; box-shadow: 0 1px 2px rgba(15, 25, 45, .06); border-radius: 13px; }

@media (max-width: 575.98px) {
  .ada-login { min-height: calc(100dvh - 4rem); }
  .ada-login-painel { padding: 2rem 1.2rem 1.2rem; }
  .ada-login-titulo { font-size: 1.75rem; }
  .ada-login-esfera { width: 9rem; height: 9rem; right: -4.5rem; top: 30%; }
}

/* Rótulo com uma ação ao lado ("Esqueci minha senha" alinhado à direita). */
.ada-login-titulo-campo { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; }
.ada-login-titulo-campo label { margin-bottom: 0 !important; }
.ada-login-link { font-size: .8rem; font-weight: 500; color: var(--ada-destaque); text-decoration: none; }
.ada-login-link:hover { text-decoration: underline; }
.ada-login-pe .ada-login-link { font-size: .84rem; }

/* O código de 6 dígitos: grande, espaçado e no centro — lido do e-mail e
   digitado de uma vez, como num banco. */
.ada-login .form-control.ada-login-codigo {
  height: 58px; text-align: center; font-size: 1.6rem; font-weight: 700;
  letter-spacing: .55em; padding-left: calc(1rem + .55em); font-variant-numeric: tabular-nums;
}
.ada-login .form-control.ada-login-codigo::placeholder { letter-spacing: .55em; opacity: .25; }

/* Critérios da senha forte: cada um acende quando a senha atende. */
.ada-senha-regras {
  list-style: none; margin: -.35rem 0 0; padding: .7rem .85rem; border-radius: 13px;
  background: rgba(var(--ada-destaque-rgb), .05);
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem;
  font-size: .76rem; color: var(--bs-secondary-color);
}
.ada-senha-regras li { display: flex; align-items: center; gap: .4rem; line-height: 1.3; transition: color .15s; }
.ada-senha-regras li::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .55; transition: all .15s;
}
.ada-senha-regras li.ok { color: #12945C; }
.ada-senha-regras li.ok::before {
  opacity: 1; border-color: #12945C; background: #12945C
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 9px no-repeat;
}
[data-bs-theme="dark"] .ada-senha-regras li.ok { color: #4EDE9D; }
[data-bs-theme="dark"] .ada-senha-regras li.ok::before { border-color: #4EDE9D; background-color: #1f9d63; }
@media (max-width: 400px) { .ada-senha-regras { grid-template-columns: 1fr; } }

/* ===== Entrada em etapas (e-mail → senha → código) ===== */
.ada-login-voltar {
  display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1rem;
  font-size: .84rem; color: var(--bs-secondary-color); text-decoration: none;
}
.ada-login-voltar svg { width: 15px; height: 15px; }
.ada-login-voltar:hover { color: var(--ada-destaque); }
/* Com o "Voltar", a cabeça fica alinhada à esquerda, como no S7. */
.ada-login-cabeca:has(.ada-login-voltar) { text-align: left; }
.ada-login-cabeca:has(.ada-login-voltar) .ada-login-logo { display: block; margin-inline: auto; }

/* O e-mail já conferido, fixo, com "Alterar". */
.ada-login-conta {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
  padding: .7rem .9rem; border-radius: 13px; background: var(--ada-vidro-campo);
  box-shadow: 0 1px 2px rgba(15, 25, 45, .06); font-size: .9rem; font-weight: 600;
}
.ada-login-conta svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ada-destaque); }
.ada-login-conta span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ada-login-conta a { font-size: .8rem; font-weight: 500; color: var(--bs-secondary-color); text-decoration: none; }
.ada-login-conta a:hover { color: var(--ada-destaque); }

/* Aviso dentro do vidro: triângulo + frase, na cor do caso. */
.ada-login-aviso {
  display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem;
  padding: .75rem .9rem; border-radius: 13px; font-size: .86rem; font-weight: 500; line-height: 1.4;
}
.ada-login-aviso svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .05rem; }
.ada-login-aviso.erro { color: #B42318; background: rgba(220, 38, 38, .08); border: 1px solid rgba(220, 38, 38, .2); }
.ada-login-aviso.atencao { color: #92400E; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .25); }
.ada-login-aviso.ok { color: #0F7A4A; background: rgba(46, 188, 113, .1); border: 1px solid rgba(46, 188, 113, .25); }
[data-bs-theme="dark"] .ada-login-aviso.erro { color: #FCA5A5; background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .25); }
[data-bs-theme="dark"] .ada-login-aviso.atencao { color: #FCD34D; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .25); }
[data-bs-theme="dark"] .ada-login-aviso.ok { color: #6EE7B7; background: rgba(78, 222, 157, .1); border-color: rgba(78, 222, 157, .25); }

/* "Esqueceu a senha?" / "Reenviar código": um link que é formulário. */
.ada-login-esqueci { margin-top: 1.1rem; text-align: center; }
.ada-login-esqueci button.ada-login-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: .86rem; }

/* O código em seis caixas. */
.ada-login-digitos { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.ada-login .ada-login-digito {
  height: 56px; width: 100%; text-align: center; font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums; border-radius: 13px; border: 1px solid transparent;
  background: var(--ada-vidro-campo); color: var(--bs-body-color);
  box-shadow: 0 1px 2px rgba(15, 25, 45, .06); outline: none; padding: 0;
}
.ada-login .ada-login-digito:focus { border-color: rgba(var(--ada-destaque-rgb), .5); box-shadow: 0 0 0 4px rgba(var(--ada-destaque-rgb), .14); }
@media (max-width: 400px) { .ada-login-digitos { gap: .35rem; } .ada-login .ada-login-digito { height: 50px; font-size: 1.3rem; } }

/* Ícone quadrado do escritório (Minha Empresa › Marca). */
.ada-marca-icone { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); padding: 3px; }
.ada-marca-icone-linha { display: flex; align-items: center; gap: .9rem; }
.ada-marca-icone-previa {
  width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: #fff; border: 1px dashed var(--bs-border-color);
}
.ada-marca-icone-previa .ada-marca-icone { width: 48px; height: 48px; box-shadow: none; }

/* ===== Processos (modelo: etapas e documentos pedidos) ===== */
.ada-proc-titulo { font-size: 1.4rem; font-weight: 700; margin: 0 0 .25rem; letter-spacing: -.01em; }
.ada-proc-sub { margin: 0; font-size: .9rem; color: var(--bs-secondary-color); }
.ada-proc-apres {
  margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; line-height: 1.5;
  background: rgba(var(--ada-destaque-rgb), .05); border-left: 3px solid rgba(var(--ada-destaque-rgb), .5);
  white-space: pre-line;
}
.ada-proc-apres span {
  display: block; margin-bottom: .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ada-destaque);
}
.ada-proc-inativos { display: flex; justify-content: flex-end; margin: 0 0 .6rem; font-size: .86rem; }

.ada-proc-etapas, .ada-proc-docs { list-style: none; margin: 0; padding: 0; }
.ada-proc-etapa, .ada-proc-doc {
  display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0;
  border-top: 1px solid var(--bs-border-color);
}
.ada-proc-etapa:first-child, .ada-proc-doc:first-child { border-top: 0; }
.ada-proc-etapa.inativa, .ada-proc-doc.inativa { opacity: .55; }
.ada-proc-num {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; background: rgba(var(--ada-destaque-rgb), .1); color: var(--ada-destaque);
}
.ada-proc-doc-ico { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); }
.ada-proc-doc-ico svg { width: 18px; height: 18px; }
.ada-proc-texto { flex: 1; min-width: 0; }
.ada-proc-nome { font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.ada-proc-meta { font-size: .8rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.ada-proc-meta a { color: var(--ada-destaque); text-decoration: none; display: inline-flex; align-items: center; gap: .2rem; }
.ada-proc-meta a svg { width: 13px; height: 13px; }
.ada-proc-instr { font-size: .84rem; margin-top: .15rem; color: var(--bs-body-color); opacity: .85; }
.ada-proc-obrig { font-size: .68rem; font-weight: 600; padding: .1rem .4rem; border-radius: 6px; color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .1); }
.ada-proc-obrig.opcional { color: var(--bs-secondary-color); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }
.ada-proc-grupo + .ada-proc-grupo { margin-top: 1rem; }
.ada-proc-grupo-titulo {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bs-secondary-color); padding-bottom: .35rem; border-bottom: 1px solid var(--bs-border-color);
}
.ada-proc-setas { display: flex; flex-direction: column; gap: 2px; }
.ada-proc-setas form { margin: 0; line-height: 0; }
.ada-proc-seta {
  width: 24px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent;
  color: var(--bs-secondary-color); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ada-proc-seta svg { width: 15px; height: 15px; }
.ada-proc-seta:hover:not(:disabled) { background: rgba(var(--ada-destaque-rgb), .1); color: var(--ada-destaque); }
.ada-proc-seta:disabled { opacity: .25; cursor: default; }

/* ===== Senha gerada (Colaboradores): mostrada uma vez, para copiar ===== */
.ada-senha-gerada-dica { color: var(--bs-secondary-color); margin-bottom: 1rem; }
.ada-senha-gerada-linha {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .9rem; border: 1px solid var(--bs-border-color); border-radius: 12px;
}
.ada-senha-gerada-linha + .ada-senha-gerada-linha { margin-top: .5rem; }
.ada-senha-gerada-dados { display: flex; flex-direction: column; min-width: 0; }
.ada-senha-gerada-rotulo { font-size: .75rem; color: var(--bs-secondary-color); }
.ada-senha-gerada-valor { font-weight: 600; color: var(--bs-body-color); overflow-wrap: anywhere; }
code.ada-senha-gerada-valor { font-size: 1.1rem; letter-spacing: .04em; background: none; padding: 0; }
.ada-senha-gerada-linha .ada-copiar-btn { opacity: 1; flex-shrink: 0; }

/* Visualizador de documento no portal (PDF/imagem sobre a lista). */
.ada-visualizar .modal-content { height: calc(100vh - 3.5rem); }
.ada-visualizar .modal-header { gap: .5rem; }
.ada-visualizar .modal-title { flex: 1; min-width: 0; font-size: 1rem; }
.ada-visualizar-baixar {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; color: var(--bs-secondary-color);
}
.ada-visualizar-baixar:hover { color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .1); }
.ada-visualizar-baixar svg { width: 18px; height: 18px; }
.ada-visualizar-corpo { padding: 0; flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); overflow: auto; }
.ada-visualizar-corpo iframe { width: 100%; height: 100%; border: 0; }
.ada-visualizar-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Link de abertura (ficha da empresa): copiar é a ação principal do cartão. */
.ada-link-copiar { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.ada-link-copiar svg { width: 15px; height: 15px; }
.ada-link-copiar.ada-copiado { background: var(--ada-green); border-color: var(--ada-green); }
.ada-link-url.ada-copiar { display: block; margin: 0 -5px; }

/* ===== Tarefas: as duas formas de ver (Grade do mês / Por empresa) ===== */
.ada-tarefas-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ada-tarefas-topo .ada-painel-titulo { margin-bottom: 0; }
.ada-visoes {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px;
  background: rgba(120, 130, 145, .12);
}
.ada-visoes-item {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 8px;
  font-size: .85rem; font-weight: 500; color: var(--bs-secondary-color); text-decoration: none;
}
.ada-visoes-item svg { width: 15px; height: 15px; }
.ada-visoes-item:hover { color: var(--bs-body-color); }
.ada-visoes-item.ativo {
  background: var(--bs-body-bg); color: var(--ada-destaque); font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 25, 45, .12);
}
[data-bs-theme="dark"] .ada-visoes-item.ativo { background: var(--bs-tertiary-bg); }

/* Dentro da empresa: meses nas colunas (mais estreitas que as de obrigação) e
   a cor do setor na borda da linha da obrigação. */
.ada-grade-ano .ada-grade-mes { min-width: 5.2rem; }
.ada-grade-ano .ada-grade-mes a { color: inherit; text-decoration: none; }
.ada-grade-ano .ada-grade-mes a:hover { color: var(--ada-destaque); }
.ada-grade-ano .ada-grade-mes.atual { border-top-color: var(--ada-blue); color: var(--ada-destaque); }
.ada-grade-ano .ada-grade-empresa[class*="ada-cor-"] { box-shadow: inset 3px 0 0 var(--setor-cor); }
.ada-grade-ano .ada-grade-empresa { min-width: 11rem; }

/* ===== Portal do cliente com a barra da equipe ===== */
.ada-portal.com-barra { max-width: 64rem; }
.ada-portal-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ada-portal-cabeca .ada-painel-titulo { margin: 0; }
.ada-portal-cabeca .btn { display: inline-flex; align-items: center; gap: .35rem; }
.ada-portal-cabeca .btn svg { width: 16px; height: 16px; }
.ada-portal-barra-empresa {
  font-size: .8rem; font-weight: 600; color: var(--ada-barra-texto, var(--bs-secondary-color));
  max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-right: 1rem; padding-right: 1rem; border-right: 1px solid var(--bs-border-color);
}
@media (max-width: 991.98px) {
  .ada-portal-barra-empresa { display: block; max-width: none; border: 0; padding: .4rem 0; margin: 0; }
}
.ada-portal-socios { list-style: none; margin: 0; padding: 0; }
.ada-portal-socios li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color); }
.ada-portal-socios li:last-child { border-bottom: 0; }

/* Acesso de sócio no cartão "Acessos ao portal": etiqueta leve ao lado do nome. */
.ada-acesso-socio { margin-left: .4rem; font-size: .68rem; padding: .1rem .45rem; vertical-align: middle; }

/* No Início a faixa de instalar vem logo abaixo da saudação: sem o respiro de
   cima (que é de quando ela fecha a página) e com o de baixo, só quando aparece. */
.ada-instalar-painel .ada-instalar { margin-top: 0; margin-bottom: 1rem; }

/* ===== Sino de notificações (barra da equipe) ===== */
.ada-sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: .35rem; border-radius: 50%;
  color: var(--ada-barra-texto, var(--bs-secondary-color)); text-decoration: none;
}
.ada-sino svg { width: 20px; height: 20px; }
.ada-sino:hover, .ada-sino.ativo { color: var(--ada-destaque); background: rgba(var(--ada-destaque-rgb), .08); }
.ada-sino-n {
  position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #D92D20; color: #fff; font-size: .68rem; font-weight: 700;
  line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bs-body-bg);
}

/* ===== Notificações: pedidos de ação em arquivo ===== */
.ada-pedidos { list-style: none; margin: 0; padding: 0; }
.ada-pedido {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--bs-border-color);
}
.ada-pedido:last-child { border-bottom: 0; }
.ada-pedido.novo { background: rgba(var(--ada-destaque-rgb), .05); margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem; border-radius: 10px; }
.ada-pedido-texto { min-width: 0; font-size: .92rem; }
.ada-pedido-sub { font-size: .8rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.ada-pedido-motivo { font-size: .85rem; color: var(--bs-secondary-color); font-style: italic; margin-top: .3rem; }
.ada-pedido-acoes { display: flex; gap: .4rem; flex-shrink: 0; align-items: center; }
.ada-pedido-sit { font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: rgba(120,130,145,.14); color: var(--bs-secondary-color); white-space: nowrap; }
.ada-pedido-sit.aprovado { background: rgba(18,148,92,.12); color: #12945C; }
.ada-pedido-sit.recusado, .ada-pedido-sit.falhou { background: rgba(217,45,32,.1); color: #B42318; }
[data-bs-theme="dark"] .ada-pedido-sit.aprovado { color: #4ADE80; }
[data-bs-theme="dark"] .ada-pedido-sit.recusado, [data-bs-theme="dark"] .ada-pedido-sit.falhou { color: #F97066; }
@media (max-width: 575.98px) { .ada-pedido { flex-direction: column; } }

/* Ladrilho de arquivo que a pessoa não pode abrir: vira botão de pedir. */
button.ada-tile-alvo { border: 0; background: transparent; width: 100%; font: inherit; color: inherit; }
button.ada-tile-alvo .ada-tile-meta svg { width: 12px; height: 12px; vertical-align: -1px; }

/* Permissão de arquivo com ícone (olho, lápis, lixeira) no modal do nível. */
/* Fio entre dois grupos de escolha na mesma linha (Empresa/Pessoa física · Fixo/Eventual). */
.ada-escolha-sep { align-self: stretch; width: 1px; margin: .2rem .35rem; background: var(--bs-border-color); }
.ada-modulo-com-ico { display: inline-flex; align-items: center; gap: .35rem; }
.ada-modulo-com-ico svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Cartão de lista sem título (o título já está fora dele): a busca à direita. */
.ada-lista-topo-so-acoes { justify-content: flex-end; }

/* ===== Obrigações: o mês no topo do cartão ===== */
.ada-mes { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.ada-mes-nome {
  margin: 0 .25rem; font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em;
  min-width: 9.5rem; text-align: center;
}
.ada-mes-nome span { font-weight: 500; color: var(--bs-secondary-color); }
.ada-mes-seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-secondary-color); text-decoration: none;
}
.ada-mes-seta:hover { color: var(--ada-destaque); border-color: rgba(var(--ada-destaque-rgb), .4); background: rgba(var(--ada-destaque-rgb), .06); }
.ada-mes-seta svg { width: 16px; height: 16px; }
.ada-mes-atual { margin-left: .5rem; font-size: .82rem; font-weight: 600; color: var(--ada-destaque); text-decoration: none; }
.ada-mes-atual:hover { text-decoration: underline; }
.ada-mes-topo .ada-grade thead th { border-top: 0; }

/* Obrigação que o cliente acompanha: olho discreto no cabeçalho da coluna. */
.ada-grade-col-olho { display: inline-flex; margin-left: .3rem; color: var(--ada-destaque); vertical-align: -2px; }
.ada-grade-col-olho svg { width: 13px; height: 13px; }
/* Portal: legenda das marcas da grade. */
.ada-portal-legenda { display: flex; gap: .5rem; flex-wrap: wrap; }
.ada-portal-legenda .ada-celula-marca { cursor: default; }
/* No portal a grade do ano tem que caber os 12 meses sem rolar na largura comum. */
.ada-portal .ada-grade-ano .ada-grade-mes { min-width: 4rem; }
.ada-portal .ada-grade-ano .ada-grade-empresa { min-width: 9rem; }

/* Busca dentro do seletor: fica presa no topo enquanto a lista rola. */
.ada-select-nada { padding: .5rem .6rem; font-size: .85rem; color: var(--bs-secondary-color); }

/* Seletor de vários (responsáveis): caixinha + iniciais + nome em cada linha. */
.ada-multi-item { cursor: pointer; }
.ada-multi-item .form-check-input { flex-shrink: 0; }
.ada-select-multi [data-rotulo-multi] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aviso de sessão encerrando (views/sessaoTempo): a contagem é o que se lê primeiro. */
.ada-sessao-tempo-num {
  font-size: 2.6rem; font-weight: 700; line-height: 1; margin: 0 0 .6rem;
  color: var(--ada-destaque); font-variant-numeric: tabular-nums;
}
.ada-sessao-tempo { max-width: 25rem; }
.ada-sessao-tempo-acoes { justify-content: center; flex-wrap: nowrap; gap: .5rem; }
.ada-sessao-tempo-acoes > * { margin: 0; }
.ada-sessao-tempo-acoes form { margin: 0; }

/* Anel do tempo de sessão em volta do avatar (views/topbar anelSessao). O
   trilho quase some; o que resta vai na cor de destaque e fica vermelho no
   último minuto. Começa no topo (rotate -90) e esvazia no sentido do relógio. */
.ada-usuario-btn { position: relative; }
.ada-sessao-anel {
  position: absolute; left: -4px; top: -4px; width: 42px; height: 42px;
  transform: rotate(-90deg) scaleY(-1); pointer-events: none; overflow: visible;
}
.ada-sessao-anel circle { fill: none; stroke-width: 2; }
.ada-sessao-anel .trilho { stroke: rgba(120, 130, 145, .18); }
.ada-sessao-anel .resta { stroke: var(--ada-destaque); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .2s; }
.ada-sessao-anel.acabando .resta { stroke: #dc3545; }
.ada-usuario-sessao { margin: 0 .6rem .35rem; font-size: .78rem; color: var(--bs-secondary-color); }
.ada-usuario-sessao strong { font-variant-numeric: tabular-nums; color: var(--bs-body-color); }

/* Carteira: uma linha por cliente. Nome longo termina em "…" (o nome inteiro
   fica no title e na ficha); regime e cidade não quebram. Muita razão social
   em duas linhas deixava a lista pesada de ler. */
.ada-tabela-carteira td:first-child { max-width: 0; width: 42%; }
.ada-tabela-carteira .ada-lista-link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ada-tabela-carteira .ada-chip,
.ada-tabela-carteira td:nth-child(4) { white-space: nowrap; }

/* Lista do "@" no campo de escrever do histórico. */
.ada-escrever { position: relative; }
.ada-mencao-lista {
  /* Acima da caixa de escrever, nunca por cima do que se digita. */
  position: absolute; left: 0; right: 0; bottom: calc(100% + .35rem); z-index: 5;
  list-style: none; margin: 0; padding: .3rem; max-height: 12rem; overflow-y: auto;
  background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 12px 28px -10px rgba(15, 23, 42, .25);
}
[data-bs-theme="dark"] .ada-mencao-lista { background: var(--ada-escuro-tarjeta); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px -10px rgba(0,0,0,.6); }
.ada-mencao-item { padding: .4rem .55rem; border-radius: 8px; font-size: .9rem; cursor: pointer; }
.ada-mencao-item.marcado, .ada-mencao-item:hover { background: rgba(var(--ada-destaque-rgb), .1); color: var(--ada-destaque); }

/* Agenda do Início: abas (Solicitações / Obrigações) e as setas de página. */
.ada-agenda-abas { margin-left: auto; }
.ada-agenda-abas .ada-visoes-item { border: 0; background: transparent; font: inherit; }
.ada-agenda-pag { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.ada-agenda-pag .contagem { font-size: .8rem; color: var(--bs-secondary-color); }