/*==============================================================================
  AgendaZ — Workspace

  Os componentes que faltavam para uma tela de trabalho densa: cabeçalho de
  página com indicadores, barra de ferramentas, alternador de visualização e
  gaveta de filtros.

  Tudo aqui lê apenas tokens semânticos (`--w-*`). Nenhuma cor, raio, sombra ou
  duração escrita à mão — é o que faz o tema escuro sair de graça e o que o
  TemaEscuroTest cobra.

  Por que uma folha nova em vez de crescer `componentes.css`: estes são os
  blocos das telas de trabalho (funil, listagens), e mantê-los juntos torna
  óbvio o que se pode reaproveitar ao migrar a próxima tela.
==============================================================================*/

/*==============================================================================
  1. CABEÇALHO DE PÁGINA

  Título à esquerda, indicadores colados nele, ações à direita. Os indicadores
  ficam na mesma linha do título de propósito: "quantos" e "quanto" são parte
  da identidade da tela, não um cartão à parte que empurraria o trabalho para
  baixo da dobra.
==============================================================================*/

.w-pagehead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--w-space-3) var(--w-space-4);
    margin-bottom: var(--w-space-4);
}

.w-pagehead__id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--w-space-2) var(--w-space-3);
    min-width: 0;
}

.w-pagehead__title {
    margin: 0;
    font-size: var(--w-text-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--w-text-primary);
    letter-spacing: -0.01em;
}

/* Indicador de cabeçalho: número em destaque, rótulo discreto ao lado. */
.w-pagehead__stat {
    display: inline-flex;
    align-items: baseline;
    gap: var(--w-space-1);
    font-size: var(--w-text-sm);
    color: var(--w-text-secondary);
    white-space: nowrap;
}

.w-pagehead__stat b {
    font-size: var(--w-text-md);
    font-weight: 700;
    color: var(--w-text-primary);
}

/* Separador entre indicadores — um ponto, não uma barra: pesa menos. */
.w-pagehead__stat + .w-pagehead__stat::before {
    content: "·";
    margin-right: var(--w-space-2);
    color: var(--w-text-disabled);
}

.w-pagehead__actions {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    margin-left: auto;
}

@media (max-width: 640px) {
    .w-pagehead__actions { margin-left: 0; width: 100%; }
    .w-pagehead__actions > * { flex: 1; justify-content: center; }
}

/*==============================================================================
  2. BARRA DE FERRAMENTAS

  Busca, filtros e ordenação à esquerda; ações à direita. A ordem não é estética:
  à esquerda fica o que muda o que se vê, à direita o que muda os dados. Quem
  procura não corre risco de clicar em algo que escreve.
==============================================================================*/

.w-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--w-space-2);
    padding: var(--w-space-2);
    margin-bottom: var(--w-space-3);
    background: var(--w-surface-raised);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
}

.w-toolbar__spacer { flex: 1 1 auto; }

/* Campo de busca: cresce até um limite. Solto, esticava a barra inteira e as
   ações da direita saltavam de lugar a cada largura de tela. */
.w-toolbar__search {
    position: relative;
    flex: 1 1 240px;
    max-width: 340px;
    min-width: 160px;
}

.w-toolbar__search input {
    width: 100%;
    height: 34px;
    padding: 0 var(--w-space-3) 0 calc(var(--w-space-8) + var(--w-space-1));
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    background: var(--w-surface-sunken);
    border: 1px solid transparent;
    border-radius: var(--w-radius-md);
    transition: border-color var(--w-duration-fast) var(--w-ease-out),
        background-color var(--w-duration-fast) var(--w-ease-out);
}

.w-toolbar__search input::placeholder { color: var(--w-text-tertiary); }

.w-toolbar__search input:focus {
    outline: none;
    background: var(--w-surface);
    border-color: var(--w-border-focus);
    box-shadow: var(--w-shadow-focus);
}

.w-toolbar__search i,
.w-toolbar__search svg {
    position: absolute;
    top: 50%;
    left: var(--w-space-3);
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    font-size: 14px;
    color: var(--w-text-tertiary);
    pointer-events: none;
}

/* Botão da barra: altura igual à da busca, para a linha não serrilhar. */
.w-tbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-2);
    height: 34px;
    padding: 0 var(--w-space-3);
    font-family: inherit;
    font-size: var(--w-text-sm);
    font-weight: 600;
    color: var(--w-text-secondary);
    background: transparent;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
        border-color var(--w-duration-fast) var(--w-ease-out),
        color var(--w-duration-fast) var(--w-ease-out);
}

.w-tbtn:hover {
    color: var(--w-text-primary);
    background: var(--w-surface-hover);
    border-color: var(--w-border-strong);
}

.w-tbtn:focus-visible {
    outline: none;
    box-shadow: var(--w-shadow-focus);
}

.w-tbtn i { font-size: 15px; }

/* Ligado = há filtro aplicado. Precisa ser óbvio: uma lista filtrada que parece
   completa faz a pessoa concluir que os dados sumiram. */
.w-tbtn.is-on {
    color: var(--w-accent);
    background: var(--w-accent-subtle);
    border-color: var(--w-accent);
}

.w-tbtn--primary {
    color: var(--w-accent-contrast);
    background: var(--w-accent);
    border-color: var(--w-accent);
}

.w-tbtn--primary:hover {
    color: var(--w-accent-contrast);
    background: var(--w-accent-hover);
    border-color: var(--w-accent-hover);
}

/* Select vestido de botão: o rótulo é o próprio valor escolhido, então a
   ordenação atual se lê sem abrir nada. O `appearance: none` tira a seta
   nativa, que brigaria com o ícone à esquerda. */
.w-tbtn__select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 170px;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-overflow: ellipsis;
}

.w-tbtn__select:focus { outline: none; }

/* Contador de filtros ativos, dentro do próprio botão. */
.w-tbtn__count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: var(--w-text-2xs);
    font-weight: 700;
    line-height: 1;
    color: var(--w-accent-contrast);
    background: var(--w-accent);
    border-radius: var(--w-radius-full);
}

.w-tbtn.is-on .w-tbtn__count {
    color: var(--w-accent);
    background: var(--w-surface);
}

@media (max-width: 640px) {
    .w-toolbar__search { max-width: none; flex-basis: 100%; }
    .w-toolbar__spacer { display: none; }

    /* O rótulo sai e fica o ícone: em 390px de largura, seis botões com texto
       viram três linhas de barra antes de o trabalho começar. */
    .w-tbtn--collapse span { display: none; }
    .w-tbtn--collapse { padding: 0 var(--w-space-2); }
}

/*==============================================================================
  3. ALTERNADOR DE VISUALIZAÇÃO

  Lista / Funil. Um grupo de botões que se comporta como um controle só — o
  estado selecionado é a própria pastilha, não uma borda a mais.
==============================================================================*/

.w-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--w-surface-sunken);
    border-radius: var(--w-radius-md);
}

.w-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-2);
    height: 30px;
    padding: 0 var(--w-space-3);
    font-family: inherit;
    font-size: var(--w-text-sm);
    font-weight: 600;
    color: var(--w-text-secondary);
    background: transparent;
    border: 0;
    border-radius: calc(var(--w-radius-md) - 2px);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
        color var(--w-duration-fast) var(--w-ease-out);
}

.w-segmented__item:hover { color: var(--w-text-primary); }

.w-segmented__item.is-active {
    color: var(--w-accent);
    background: var(--w-surface);
    box-shadow: var(--w-shadow-xs);
}

.w-segmented__item:focus-visible {
    outline: none;
    box-shadow: var(--w-shadow-focus);
}

@media (max-width: 640px) {
    .w-segmented__item span { display: none; }
    .w-segmented__item { padding: 0 var(--w-space-3); }
}

/*==============================================================================
  4. GAVETA

  Painel flutuante para filtros e detalhes. Sobrepõe o conteúdo em vez de
  empurrá-lo: o quadro atrás continua no lugar, e quem filtra não perde a
  referência do que estava olhando.

  Fechada, fica fora do fluxo (`visibility`), não só transparente — invisível
  mas clicável é um defeito que só aparece quando alguém reclama que "o quadro
  travou".
==============================================================================*/

.w-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--w-z-drawer);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--w-duration-normal) var(--w-ease-out),
        visibility var(--w-duration-normal);
}

.w-drawer.is-open {
    visibility: visible;
    opacity: 1;
}

.w-drawer__scrim {
    position: absolute;
    inset: 0;
    background: var(--w-overlay);
}

.w-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(400px, 100vw);
    height: 100%;
    background: var(--w-surface-overlay);
    border-left: 1px solid var(--w-border);
    box-shadow: var(--w-shadow-xl);
    transform: translateX(16px);
    transition: transform var(--w-duration-normal) var(--w-ease-out);
}

.w-drawer.is-open .w-drawer__panel { transform: translateX(0); }

/* Ancorada ao centro, como no painel de filtros da referência: útil quando a
   gaveta é curta e ficaria perdida numa coluna de 900px de altura. */
.w-drawer--float .w-drawer__panel {
    top: var(--w-space-16);
    right: var(--w-space-6);
    height: auto;
    max-height: calc(100vh - var(--w-space-16) * 2);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl);
    overflow: hidden;
}

@media (max-width: 640px) {
    .w-drawer--float .w-drawer__panel {
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 88vh;
        border-radius: var(--w-radius-xl) var(--w-radius-xl) 0 0;
    }
}

.w-drawer__head {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-4);
    border-bottom: 1px solid var(--w-border);
}

.w-drawer__title {
    margin: 0;
    font-size: var(--w-text-md);
    font-weight: 700;
    color: var(--w-text-primary);
}

.w-drawer__close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    color: var(--w-text-tertiary);
    background: transparent;
    border: 0;
    border-radius: var(--w-radius-md);
    cursor: pointer;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
        color var(--w-duration-fast) var(--w-ease-out);
}

.w-drawer__close:hover {
    color: var(--w-text-primary);
    background: var(--w-surface-hover);
}

.w-drawer__body {
    flex: 1;
    min-height: 0;
    padding: var(--w-space-4);
    overflow-y: auto;
}

/* O rodapé é fixo: numa gaveta com dez campos, um botão "Filtrar" no fim da
   rolagem é um botão que a pessoa não encontra. */
.w-drawer__foot {
    display: flex;
    gap: var(--w-space-2);
    padding: var(--w-space-3) var(--w-space-4);
    background: var(--w-surface-overlay);
    border-top: 1px solid var(--w-border);
}

.w-drawer__foot > * { flex: 1; }

/* Campos da gaveta — rótulo pequeno acima, controle logo abaixo. */
.w-drawer__field { margin-bottom: var(--w-space-4); }

.w-drawer__field > label {
    display: block;
    margin-bottom: var(--w-space-1);
    font-size: var(--w-text-xs);
    font-weight: 700;
    color: var(--w-text-secondary);
}

.w-drawer__field select,
.w-drawer__field input {
    width: 100%;
    height: 36px;
    padding: 0 var(--w-space-3);
    font-family: inherit;
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
}

.w-drawer__field select:focus,
.w-drawer__field input:focus {
    outline: none;
    border-color: var(--w-border-focus);
    box-shadow: var(--w-shadow-focus);
}

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

/*==============================================================================
  5. COLUNA DO QUADRO — "carregar mais"

  Mora aqui, e não em `crm.css`, porque é o par visual da paginação por coluna
  que esta folha introduziu. Fica no pé da coluna, discreto: é navegação, não
  uma ação sobre os dados.
==============================================================================*/

.crm-coluna__mais {
    width: 100%;
    margin-top: var(--w-space-2);
    padding: var(--w-space-2);
    font-family: inherit;
    font-size: var(--w-text-xs);
    font-weight: 600;
    color: var(--w-text-secondary);
    background: transparent;
    border: 1px dashed var(--w-border-strong);
    border-radius: var(--w-radius-md);
    cursor: pointer;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
        color var(--w-duration-fast) var(--w-ease-out);
}

.crm-coluna__mais:hover:not(:disabled) {
    color: var(--w-text-primary);
    background: var(--w-surface-hover);
}

.crm-coluna__mais:disabled {
    color: var(--w-text-disabled);
    cursor: progress;
}

/*==============================================================================
  6. PESO CONTRA O `formularios.css`

  Aquela folha normaliza TODO campo dentro de `.w-main` — `.w-main select` e
  `.w-main input[type="search"]` —, e é isso que dá a um formulário antigo a
  mesma borda de um novo sem ninguém precisar tocá-lo. Só que a barra de
  ferramentas não quer essa borda: a busca é um campo afundado e a ordenação é
  um botão com texto.

  A saída não é ordem de carga — `.w-main input[type="search"]` (0,2,1) ganharia
  de qualquer jeito. É empatar no peso aqui, uma vez só e com o motivo escrito,
  em vez de espalhar `!important` pela barra.
==============================================================================*/

.w-main .w-toolbar__search input[type="search"] {
    min-height: 34px;
    padding: 0 var(--w-space-3) 0 calc(var(--w-space-8) + var(--w-space-1));
    font-size: var(--w-text-sm);
    background: var(--w-surface-sunken);
    border: 1px solid transparent;
    border-radius: var(--w-radius-md);
}

.w-main .w-toolbar__search input[type="search"]:focus {
    background: var(--w-surface);
    border-color: var(--w-border-focus);
}

.w-main .w-tbtn__select {
    min-height: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Na gaveta o campo continua sendo campo — só a altura precisa bater com a do
   resto do painel. */
.w-main .w-drawer__field select,
.w-main .w-drawer__field input {
    min-height: 36px;
}

/*==============================================================================
  7. MENU NO TOPO

  O menu do sistema tem dois lugares possíveis: a faixa de cima (padrão) ou a
  coluna da esquerda. Quem escolhe é quem usa, pelo botão da barra.

  O markup é o mesmo nos dois modos — o mesmo `<aside>`, a mesma lista, o mesmo
  JavaScript de submenu. Aqui só se muda onde ele pousa. Foi de propósito:
  manter duas árvores de menu garantiria que um dia elas discordassem, e o
  defeito apareceria como "o item some do topo mas continua na lateral".

  No topo o ganho é largura. Uma coluna fixa de 262px custa uma coluna inteira
  do funil num notebook, e as telas densas do sistema — quadro, listagens,
  inbox — vivem de espaço horizontal.
==============================================================================*/

.w-shell[data-menu='topo'] {
    /* O menu ocupa a esquerda da faixa superior; o conteúdo toma a largura
       inteira logo abaixo.

       Quem tem largura fixa é a BARRA DA DIREITA, não o menu. Era o contrário,
       e o resultado aparecia em toda tela de notebook: o menu media o próprio
       conteúdo — 1089px, independentemente da janela — e a barra ficava com o
       resto. Numa janela de 1024px o resto era ZERO, e busca, sino, idioma,
       tema e avatar simplesmente não existiam para quem usava.

       Invertido, a barra sempre cabe inteira e o menu recebe o que sobra. O que
       não couber nele não é desenhado por baixo da barra: vai para o item de
       reticências, que o `MenuExcedente` do app.js enche medindo esta largura. */
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
        'sidebar topbar'
        'main main';
}

/* A faixa inteira é uma peça só: barra e menu com o mesmo fundo, sem costura
   visível entre eles. A cor é a da sidebar — nenhum tom novo entra na paleta. */
.w-shell[data-menu='topo'] .w-sidebar,
.w-shell[data-menu='topo'] .w-topbar {
    background: var(--w-sidebar-solid);
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.w-shell[data-menu='topo'] .w-sidebar {
    flex-direction: row;
    align-items: center;
    gap: var(--w-space-3);
    height: var(--w-topbar-height);
    padding-right: var(--w-space-2);
    /* Visível, e não escondido: é por aqui que os submenus saem da faixa. */
    overflow: visible;
    min-width: 0;
}

/* A marca continua, compacta, e continua levando ao começo do sistema. */
.w-shell[data-menu='topo'] .w-sidebar__top {
    height: auto;
    padding: 0 var(--w-space-2) 0 var(--w-space-4);
    border: 0;
    flex: none;
}

.w-shell[data-menu='topo'] .w-sidebar__collapse { display: none; }

/* `overflow: visible`, e nunca `auto`.

   A tentação aqui é deixar a faixa rolar na horizontal quando o menu não cabe.
   Não dá: `overflow-x: auto` obriga o eixo Y a virar `auto` também, e o
   resultado é que todo submenu — que é um painel absoluto — fica recortado na
   altura da barra. O menu simplesmente não abria.

   Quem resolve a falta de espaço é o esconde-rótulos mais abaixo. */
.w-shell[data-menu='topo'] .w-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Colados, os itens leem como um bloco só e a pessoa erra o alvo. O respiro
       entre eles é o que separa uma opção da seguinte. */
    gap: var(--w-space-2);
    padding: 0;
    margin: 0;
    min-width: 0;
    overflow: visible;
}

/* Os rótulos de seção ("CADASTROS", "FINANCEIRO") são organizadores de uma
   coluna vertical. Deitados viram ruído entre os itens. */
.w-shell[data-menu='topo'] .w-menu__section { display: none; }

/*------------------------------------------------------------------------------
  O que não coube

  A barra do topo tem uma linha só, e a quantidade de itens cresce com o
  sistema. Antes o excesso empurrava os ícones da direita — busca, sino, tema,
  avatar — para fora da tela: a pessoa perdia o acesso a eles sem entender por
  quê, porque nada indicava que havia mais coisa.

  Agora o que sobra vem para um item discreto de reticências. Quem enche é o
  JavaScript, medindo a largura que sobrou; o CSS só desenha.
------------------------------------------------------------------------------*/

/* Na lateral ele nunca aparece: lá a lista rola, e não falta espaço. */
.w-menu__mais { display: none; }

.w-shell[data-menu='topo'] .w-menu__mais { display: block; }

.w-shell[data-menu='topo'] .w-menu__mais[hidden] { display: none; }

/* Dentro do painel de "Mais", um grupo deixa de ser um menu flutuante e vira
   uma lista aberta: um segundo painel saindo de dentro do primeiro seria uma
   caçada de ponteiro, e no toque não abriria de jeito nenhum. */
.w-shell[data-menu='topo'] .w-menu__mais .w-menu__sub .w-menu__sub {
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--w-space-3);
    margin: var(--w-space-1) 0 var(--w-space-2);
    background: none;
    border: 0;
    border-left: 1px solid var(--w-border);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* O botão do grupo, ali dentro, é só um rótulo: a lista já está aberta abaixo
   dele, e o acordeão não teria o que fechar. */
.w-shell[data-menu='topo'] .w-menu__mais .w-menu__sub > .w-menu__group > .w-menu__row {
    cursor: default;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.w-shell[data-menu='topo'] .w-menu__mais .w-menu__sub > .w-menu__group > .w-menu__row .w-menu__chevron {
    display: none;
}

/* O painel abre para a esquerda: o item fica na ponta direita da barra, e um
   painel alinhado à esquerda dele sairia da tela. */
.w-shell[data-menu='topo'] .w-menu__mais > .w-menu__sub {
    left: auto;
    right: 0;
    min-width: 264px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
}

/* Dentro do painel, os itens de ajuda voltam a ter nome.

   Na barra eles são só ícone — "Atendimento" e "Tutoriais (Vídeos)" comeriam o
   espaço dos módulos que a pessoa usa o dia inteiro, e o nome aparece no hover.
   Guardados aqui dentro, porém, dois ícones soltos no fim de uma lista escrita
   não dizem nada: não há o que adivinhar nem onde passar o mouse. */
.w-shell[data-menu='topo'] .w-menu__mais .w-menu__item--ajuda .w-menu__label {
    display: block;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: inherit;
    white-space: normal;
}

.w-shell[data-menu='topo'] .w-menu__item,
.w-shell[data-menu='topo'] .w-menu__group {
    position: relative;
    flex: none;
}

.w-shell[data-menu='topo'] .w-menu > .w-menu__item > .w-menu__row,
.w-shell[data-menu='topo'] .w-menu > .w-menu__group > .w-menu__row {
    height: 34px;
    padding: 0 var(--w-space-3);
    margin: 0;
    border-radius: var(--w-radius-md);
    white-space: nowrap;
}

/*------------------------------------------------------------------------------
  Submenus

  O mesmo `<ul class="w-menu__sub">` que na lateral desce em acordeão aqui cai
  como painel flutuante. O JavaScript não muda: continua sendo a classe
  `is-open` no grupo que abre e fecha.
------------------------------------------------------------------------------*/

.w-shell[data-menu='topo'] .w-menu__sub {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--w-z-dropdown);
    display: block;
    min-width: 232px;
    max-height: none;
    padding: var(--w-space-2);
    margin: 0;
    background: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
    overflow: hidden;

    /* Fechado é invisível E fora do alcance do ponteiro: só opacidade deixaria
       um painel transparente capturando cliques por cima da tela. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--w-duration-fast) var(--w-ease-out),
        transform var(--w-duration-fast) var(--w-ease-out),
        visibility var(--w-duration-fast);
}

.w-shell[data-menu='topo'] .w-menu__group.is-open > .w-menu__sub {
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Perto da borda direita o painel abre para dentro, senão sairia da tela. */
.w-shell[data-menu='topo'] .w-menu__group:nth-last-child(-n+3) > .w-menu__sub {
    left: auto;
    right: 0;
}

.w-shell[data-menu='topo'] .w-menu__sub .w-menu__row {
    height: 34px;
    padding: 0 var(--w-space-3);
    margin: 0;
    color: var(--w-text-secondary);
    border-radius: var(--w-radius-md);
    white-space: nowrap;
}

.w-shell[data-menu='topo'] .w-menu__sub .w-menu__row:hover {
    color: var(--w-text-primary);
    background: var(--w-surface-hover);
}

.w-shell[data-menu='topo'] .w-menu__sub .w-menu__row.is-active {
    color: var(--w-accent);
    background: var(--w-accent-subtle);
}

/* Dentro do painel claro os marcadores da lateral não fazem sentido. */
.w-shell[data-menu='topo'] .w-menu__sub .w-menu__row::before { display: none; }

/*------------------------------------------------------------------------------
  A barra da direita, sobre fundo escuro
------------------------------------------------------------------------------*/

.w-shell[data-menu='topo'] .w-topbar { padding-left: 0; }

/* Sem hambúrguer no topo: o menu já está à vista. */
.w-shell[data-menu='topo'] .w-topbar__toggle,
.w-shell[data-menu='topo'] .w-topbar__meta,
.w-shell[data-menu='topo'] .w-topbar__timer { display: none; }

/* Cada filho é reescrito, e não remapeado por token: um `--w-text-primary`
   branco no cabeçalho vazaria para os menus suspensos, que são filhos dele e
   têm fundo claro — texto branco em painel branco. */
.w-shell[data-menu='topo'] .w-topbar__action { color: var(--w-sidebar-fg); }

.w-shell[data-menu='topo'] .w-topbar__action:hover {
    color: var(--w-sidebar-fg-strong);
    background: rgba(255, 255, 255, 0.12);
}

.w-shell[data-menu='topo'] .w-busca__gatilho {
    max-width: 240px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

.w-shell[data-menu='topo'] .w-busca__gatilho:hover {
    color: var(--w-sidebar-fg-strong);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
}

.w-shell[data-menu='topo'] .w-busca__atalho {
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.12);
    border-color: transparent;
}

.w-shell[data-menu='topo'] .w-user__name { color: var(--w-sidebar-fg-strong); }
.w-shell[data-menu='topo'] .w-user__mail { color: rgba(255, 255, 255, 0.62); }
.w-shell[data-menu='topo'] .w-user:hover { background: rgba(255, 255, 255, 0.12); }

/* Nome e e-mail saem e fica o avatar: são ~150px que o menu precisa mais.
   Quem está logado já sabe quem é, e o dado segue no menu do perfil. */
@media (max-width: 1600px) {
    .w-shell[data-menu='topo'] .w-user__info { display: none; }
}

/*------------------------------------------------------------------------------
  O botão que troca os modos
------------------------------------------------------------------------------*/

.w-menu-modo__topo,
.w-menu-modo__lado { width: 18px; height: 18px; }

/* Mostra o ícone do modo para onde a pessoa VAI, não do modo em que está: o
   botão anuncia o resultado do clique. */
.w-shell[data-menu='topo'] .w-menu-modo__topo { display: none; }
.w-shell[data-menu='lado'] .w-menu-modo__lado { display: none; }

/*------------------------------------------------------------------------------
  Celular

  Numa faixa de 390px não cabe menu horizontal nenhum. O modo topo volta a ser
  a gaveta lateral que já existe — o mesmo comportamento do modo lateral, com o
  mesmo botão de hambúrguer.
------------------------------------------------------------------------------*/

@media (max-width: 900px) {
    .w-shell[data-menu='topo'] {
        grid-template-columns: 1fr;
        grid-template-areas:
            'topbar'
            'main';
    }

    .w-shell[data-menu='topo'] .w-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        flex-direction: column;
        align-items: stretch;
        width: var(--w-sidebar-width);
        height: 100%;
        padding-right: 0;
        overflow: hidden auto;
        transform: translateX(-100%);
        transition: transform var(--w-duration-normal) var(--w-ease-out);
    }

    .w-shell[data-menu='topo'][data-sidebar='open'] .w-sidebar { transform: none; }

    .w-shell[data-menu='topo'] .w-sidebar__top { height: var(--w-topbar-height); }
    .w-shell[data-menu='topo'] .w-menu { flex-direction: column; align-items: stretch; padding: var(--w-space-2); }
    .w-shell[data-menu='topo'] .w-menu__section { display: block; }
    .w-shell[data-menu='topo'] .w-topbar { padding-left: var(--w-space-3); }

    /* O botão do menu é branco: a barra do topo é escura, e a cor herdada
       (`--w-text-secondary`, pensada para barra clara) desenhava um ícone
       cinza-escuro quase invisível — a alça do menu sumia justamente onde ela
       é a única forma de navegar. */
    .w-shell[data-menu='topo'] .w-topbar__toggle {
        display: grid;
        color: var(--w-sidebar-fg-strong);
    }

    .w-shell[data-menu='topo'] .w-topbar__toggle:hover {
        color: var(--w-sidebar-fg-strong);
        background: rgba(255, 255, 255, 0.14);
    }

    /* De volta ao acordeão: painel flutuante dentro de uma gaveta estreita
       abriria por cima do próprio menu. */
    .w-shell[data-menu='topo'] .w-menu__sub {
        position: static;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        transform: none;
    }

    .w-shell[data-menu='topo'] .w-menu__group:not(.is-open) > .w-menu__sub { display: none; }

    /* E o texto volta a ser o da gaveta.

       No computador o submenu é um painel claro flutuando sobre a página, e a
       cor dele vem da paleta de superfície clara. Na gaveta do celular esse
       mesmo submenu passa a viver dentro da faixa azul-escura do menu — e o
       cinza de texto sobre superfície clara, ali, some no fundo. Era o que
       acontecia: os itens de primeiro nível brancos e os submenus quase
       ilegíveis, logo abaixo deles.

       As cores são as mesmas dos itens de primeiro nível da lateral: nenhum
       tom novo entra na paleta. */
    .w-shell[data-menu='topo'] .w-menu__sub .w-menu__row {
        color: var(--w-sidebar-fg);
    }

    .w-shell[data-menu='topo'] .w-menu__sub .w-menu__row:hover,
    .w-shell[data-menu='topo'] .w-menu__sub .w-menu__row:focus-visible {
        color: var(--w-sidebar-fg-strong);
        background: rgba(255, 255, 255, 0.08);
    }

    .w-shell[data-menu='topo'] .w-menu__sub .w-menu__row.is-active {
        color: var(--w-sidebar-fg-strong);
        background: rgba(255, 255, 255, 0.14);
    }
}

/* A marca encolhe para o símbolo: são ~120px que os itens do menu aproveitam
   melhor do que o logotipo escrito. */
@media (max-width: 1700px) {
    .w-shell[data-menu='topo'] .az-logo.w-sidebar__brand--completa { display: none; }
    .w-shell[data-menu='topo'] .az-logo.w-sidebar__brand--simbolo { display: inline-flex; }
}

/*------------------------------------------------------------------------------
  Fazendo os nomes caberem

  Os rótulos ficam. Um menu de ícones mudos obriga a pessoa a caçar com o
  ponteiro o que antes ela lia — e são dez itens. Quem cede espaço é o resto da
  barra, nesta ordem: primeiro o logotipo (vira símbolo), depois a busca (vira
  ícone, e continua no Ctrl+K), depois o nome do usuário (fica o avatar).

  Só no celular o menu deixa de ser uma faixa: vira a gaveta lateral que o
  sistema já tem, onde nome e ícone cabem juntos numa lista vertical.
------------------------------------------------------------------------------*/

.w-shell[data-menu='topo'] .w-menu > .w-menu__item > .w-menu__row,
.w-shell[data-menu='topo'] .w-menu > .w-menu__group > .w-menu__row {
    gap: var(--w-space-2);
    padding: 0 var(--w-space-2);
    font-size: var(--w-text-sm);
}

.w-shell[data-menu='topo'] .w-menu__icon { width: 18px; height: 18px; flex: none; }

/* Nada na direita encolhe.

   Sem isto o flex espremia o botão de busca até ~20px: uma pílula alta e
   estreita, sem espaço para a lupa dentro. Parecia um campo quebrado. */
.w-shell[data-menu='topo'] .w-busca__gatilho,
.w-shell[data-menu='topo'] .w-topbar__action,
.w-shell[data-menu='topo'] .w-idioma,
.w-shell[data-menu='topo'] .w-sino,
.w-shell[data-menu='topo'] .w-user { flex: none; }

/* 1780px, e não 1500: o menu com respiro entre os itens ficou mais largo, e a
   caixa de busca escrita era o que empurrava idioma, tema e perfil para fora da
   tela. A lupa guarda a mesma função, e o Ctrl+K continua sendo o caminho de
   quem usa o sistema todo dia. */
@media (max-width: 1780px) {
    /* A busca vira lupa. O atalho continua valendo, e é o que ela anunciava. */
    .w-shell[data-menu='topo'] .w-busca__rotulo,
    .w-shell[data-menu='topo'] .w-busca__atalho { display: none; }

    .w-shell[data-menu='topo'] .w-busca__gatilho {
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 1500px) {
    /* Último aperto antes do celular: rótulos menores e espaçamento mínimo.
       Os nomes continuam escritos — o que encolhe é a folga em volta deles. */
    .w-shell[data-menu='topo'] .w-menu > .w-menu__item > .w-menu__row,
    .w-shell[data-menu='topo'] .w-menu > .w-menu__group > .w-menu__row {
        gap: 6px;
        padding: 0 6px;
        font-size: var(--w-text-xs);
    }

    .w-shell[data-menu='topo'] .w-menu__icon { width: 16px; height: 16px; }

    .w-shell[data-menu='topo'] .w-menu > .w-menu__group > .w-menu__row .w-menu__chevron { display: none; }
    .w-shell[data-menu='topo'] .w-idioma__curto { display: none; }
}

/*------------------------------------------------------------------------------
  Telas estreitas: aperta a folga, não a lista

  São sete controles de 34px na barra. Com a folga padrão eles somam 346px —
  mais do que cabe num aparelho de 320px, e o último ficava para fora da tela.
  Pior: como a barra é uma coluna do grid, a largura dela empurrava a PÁGINA
  inteira, criando rolagem lateral em todo o sistema.

  A folga é o que dá para ceder. Esconder um ícone tiraria da pessoa o acesso ao
  que ele abre — e ela não teria como saber que ele existia.

  A especificidade acompanha a das regras acima de propósito: escritas como
  `.w-topbar` simples, elas perdiam para a regra do modo topo e não valiam nada.
------------------------------------------------------------------------------*/

@media (max-width: 420px) {
    .w-topbar,
    .w-shell[data-menu='topo'] .w-topbar {
        gap: var(--w-space-1);
        padding-left: var(--w-space-2);
        padding-right: var(--w-space-2);
    }
}

@media (max-width: 360px) {
    .w-topbar,
    .w-shell[data-menu='topo'] .w-topbar {
        gap: 2px;
        padding-left: var(--w-space-1);
        padding-right: var(--w-space-1);
    }

    /* No limite, os alvos encolhem um pouco. 30px continua sendo um alvo
       aceitável para o dedo — abaixo disso, não seria. */
    .w-topbar__toggle,
    .w-topbar__action,
    .w-busca__gatilho,
    .w-sino__gatilho,
    .w-idioma__gatilho {
        width: 30px;
        height: 30px;
    }
}

/*------------------------------------------------------------------------------
  Suporte e ajuda, no canto

  São três links de socorro — atendimento, chat e tutoriais. Na coluna vertical
  eles cabem escritos; deitados, os nomes ("Fale com a gente", "Tutoriais
  (Vídeos)") comem o espaço dos módulos que a pessoa usa o dia inteiro.

  Aqui eles encostam à direita e ficam só no ícone, com o nome aparecendo ao
  passar o ponteiro. É a única exceção ao "o nome fica" — e é deliberada: são
  os itens que não fazem parte do trabalho, e os três ícones (balão, fone,
  interrogação) já se explicam.
------------------------------------------------------------------------------*/

/* Ficam em seguida, na mesma linha — sem empurrão para a borda.

   Tentei encostá-los à direita com `margin-left: auto` e o efeito foi pior do
   que nenhum: a faixa do menu encolhe até o conteúdo, então não existe folga
   para empurrar, e os ícones acabavam desenhados para fora dela, por baixo do
   fundo da barra de cima. Sumiam da tela. Aqui eles só seguem os demais. */
.w-shell[data-menu='topo'] .w-menu__item--ajuda { flex: none; }

/* Um fio separa o trabalho do socorro. */
.w-shell[data-menu='topo'] .w-menu__item--ajuda:first-of-type {
    margin-left: var(--w-space-2);
    padding-left: var(--w-space-2);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.w-shell[data-menu='topo'] .w-menu__item--ajuda > .w-menu__row { position: relative; }

/* Estes dois também dizem o próprio nome — todo item do menu diz. Só quando a
   faixa aperta é que eles voltam a ser ícone, e são eles os escolhidos porque
   são o socorro, não o trabalho do dia.

   1700px é onde a conta fecha: abaixo disso, "Atendimento" e "Tutoriais
   (Vídeos)" somados empurravam o idioma e o perfil para fora da tela. */
@media (max-width: 1700px) {
    .w-shell[data-menu='topo'] .w-menu__item--ajuda .w-menu__label {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: var(--w-space-2);
        padding: var(--w-space-2) var(--w-space-3);
        border-radius: var(--w-radius-md);
        background: var(--w-sidebar-solid);
        box-shadow: var(--w-shadow-lg);
        color: var(--w-sidebar-fg-strong);
        font-size: var(--w-text-sm);
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
        z-index: var(--w-z-dropdown);
    }

    .w-shell[data-menu='topo'] .w-menu__item--ajuda > .w-menu__row:hover .w-menu__label,
    .w-shell[data-menu='topo'] .w-menu__item--ajuda > .w-menu__row:focus-visible .w-menu__label { display: block; }
}

/* O destaque do item de atendimento é desenhado para a coluna; deitado, vira
   um bloco pesado no meio da faixa. */
.w-shell[data-menu='topo'] .w-menu__item--destaque > .w-menu__row {
    background: transparent;
    border: 0;
}

/*==============================================================================
  8. A PÁGINA OCUPA A LARGURA INTEIRA

  O conteúdo era centralizado num limite fixo (`--w-content-max`). Fazia sentido
  para texto corrido; para este sistema, não: quadro, listagens, inbox e
  relatórios são telas de dados, e sobrava faixa vazia dos dois lados de um
  monitor enquanto a tabela rolava na horizontal por falta de espaço.

  Vale para os dois modos de menu — a largura é da página, não do menu.
==============================================================================*/

.w-page {
    max-width: none;
    padding: var(--w-space-5) var(--w-space-6);
}

@media (max-width: 900px) {
    .w-page { padding: var(--w-space-4); }
}

@media (max-width: 575px) {
    /* No celular cada pixel lateral é conteúdo que cabe. */
    .w-page { padding: var(--w-space-3); }
}

/* Os containers do Bootstrap trazem um teto próprio (`container-xxl` para em
   1320px) e uma calha que, somada à da página, dobra a margem lateral. Dentro
   do shell quem manda na largura é a página. */
.w-page > .container,
.w-page > .container-sm,
.w-page > .container-md,
.w-page > .container-lg,
.w-page > .container-xl,
.w-page > .container-xxl,
.w-page > .container-fluid {
    max-width: none;
    padding-inline: 0;
}

/*------------------------------------------------------------------------------
  Respiro entre os controles da direita

  Busca, sino, idioma, modo do menu, tema e perfil ficavam ombro a ombro: seis
  ícones parecidos a 12px de distância leem como uma faixa contínua, e o
  ponteiro erra o alvo. Afastados, cada um volta a ser um botão.
------------------------------------------------------------------------------*/

.w-shell[data-menu='topo'] .w-topbar {
    gap: var(--w-space-4);
    padding-right: var(--w-space-5);
}

/* O grupo da direita respira mais que a média da barra, porque é onde a
   densidade de ícones é maior. */
.w-shell[data-menu='topo'] .w-sino,
.w-shell[data-menu='topo'] .w-idioma,
.w-shell[data-menu='topo'] .w-topbar__action { margin-inline: 2px; }

@media (max-width: 1500px) {
    .w-shell[data-menu='topo'] .w-topbar {
        gap: var(--w-space-3);
        padding-right: var(--w-space-3);
    }

    .w-shell[data-menu='topo'] .w-sino,
    .w-shell[data-menu='topo'] .w-idioma,
    .w-shell[data-menu='topo'] .w-topbar__action { margin-inline: 0; }
}

/* Os ícones do Tabler são bem mais finos que os do Font Awesome com a mesma
   altura de fonte — a mesma barra com os dois conjuntos parecia ter dois pesos.
   Um ponto a mais devolve o equilíbrio. */
.w-toolbar .w-tbtn i,
.w-toolbar__search i { font-size: 16px; }

/*==============================================================================
  9. GAVETA DE CADASTRO

  Herda a moldura da janela do CRM (`.crm-janela`) — mesma borda, mesma entrada
  pela direita, mesmo rodapé grudado no pé. O que muda aqui é só o conteúdo: em
  vez de um formulário escrito à mão, entra a tela de cadastro que já existe.
==============================================================================*/

.w-crud .crm-janela__caixa { max-width: 46rem; }

.w-crud__carregando {
    padding: var(--w-space-8) 0;
    text-align: center;
    color: var(--w-text-tertiary);
    font-size: var(--w-text-sm);
}

/* A tela de cadastro traz a própria calha e o próprio fundo, pensados para uma
   página inteira. Dentro da gaveta isso vira moldura sobre moldura. */
.w-crud .crm-janela__corpo > [data-pagina-conteudo],
.w-crud .crm-janela__corpo .container,
.w-crud .crm-janela__corpo .container-fluid,
.w-crud .crm-janela__corpo .container-xxl {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* O cartão que envolve o formulário na página perde a borda aqui: a gaveta já é
   a caixa. */
.w-crud .crm-janela__corpo > .fx,
.w-crud .crm-janela__corpo > .lz,
.w-crud .crm-janela__corpo .fx-cartao,
.w-crud .crm-janela__corpo .card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* Barra de ações do formulário colada no pé da gaveta — é a mesma promessa que
   a janela do CRM faz: o botão de salvar nunca fica escondido na rolagem. */
.w-crud .crm-janela__corpo .fx-acoes,
.w-crud .crm-janela__corpo .fx__acoes,
.w-crud .crm-janela__corpo .w-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: var(--w-space-4) calc(var(--w-space-5) * -1) 0;
    padding: var(--w-space-3) var(--w-space-5);
    background: var(--w-surface);
    border-top: 1px solid var(--w-border);
}

/*------------------------------------------------------------------------------
  Dentro da gaveta: o formulário ocupa tudo

  A tela de cadastro foi desenhada para uma página inteira — traz a própria
  calha, o próprio cartão e a própria moldura. Dentro da gaveta isso vira caixa
  dentro de caixa, e o formulário acaba estreito no meio de um painel largo.

  Aqui a moldura é a gaveta; o conteúdo encosta nas bordas dela.
------------------------------------------------------------------------------*/

.w-crud .crm-janela__corpo .fx,
.w-crud .crm-janela__corpo > form,
.w-crud .crm-janela__corpo > div {
    width: 100%;
    max-width: none;
}

.w-crud .crm-janela__corpo .fx { padding: 0; }

/* O cartão perde a borda: a gaveta já é a caixa. O cabeçalho dele fica — é
   quem explica o que se está preenchendo. */
.w-crud .crm-janela__corpo .fx-card {
    padding: 0;
    margin: 0 0 var(--w-space-5);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.w-crud .crm-janela__corpo .fx-card + .fx-card {
    padding-top: var(--w-space-5);
    border-top: 1px solid var(--w-border);
}

/* Dois campos por linha continuam cabendo na largura da gaveta; abaixo disso
   viram um por linha, senão o rótulo quebra em três linhas e o campo encolhe
   a ponto de não caber o que se digita. */
.w-crud .crm-janela__corpo .fx-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .w-crud .crm-janela__corpo .fx-grade { grid-template-columns: minmax(0, 1fr); }
}

.w-crud .crm-janela__corpo .fx-campo input,
.w-crud .crm-janela__corpo .fx-campo select,
.w-crud .crm-janela__corpo .fx-campo textarea,
.w-crud .crm-janela__corpo .form-control,
.w-crud .crm-janela__corpo .form-select { width: 100%; }

/* O "Voltar" da página não faz sentido aqui: a saída é fechar a gaveta, e o
   botão levava para fora dela, descartando o que estava preenchido. */
.w-crud .crm-janela__corpo .fx-voltar { display: none; }

/*------------------------------------------------------------------------------
  Dentro da gaveta: a tabela cabe

  As listas dentro do painel vinham com rolagem horizontal própria, e a última
  coluna — justamente a dos botões — ficava escondida atrás da borda. Quem
  precisava editar tinha de descobrir que havia uma barra ali.

  A saída não é alargar a gaveta: é deixar o texto quebrar. Uma célula de duas
  linhas é lida; uma coluna fora da tela, não.
------------------------------------------------------------------------------*/

.w-crud .crm-janela__corpo .table-responsive {
    overflow: visible;
    width: 100%;
}

/*
  O empilhamento do design system, aqui sem depender da largura da JANELA.

  `tabelas.css` já sabe transformar cada linha num cartão rótulo/valor — mas a
  regra mora num `@media (max-width: 60rem)`, que mede a janela. A gaveta tem
  46rem dentro de um monitor de 1920: a janela é larga, a faixa não, e a tabela
  continuava saindo pela direita.

  As declarações abaixo são as mesmas de lá, valendo por estarem dentro da
  gaveta. É repetição, e é deliberada: a alternativa seria trocar o `@media` por
  `@container` no arquivo original e, onde nenhum contêiner estivesse
  declarado, o empilhamento do celular simplesmente deixaria de acontecer.
*/

.w-crud .crm-janela__corpo .w-tabela--empilha {
    display: block;
    font-size: var(--w-text-sm);
}

.w-crud .crm-janela__corpo .w-tabela--empilha thead {
    /* Fora da tela, mas ainda no documento: o leitor de tela continua
       encontrando o cabeçalho. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.w-crud .crm-janela__corpo .w-tabela--empilha tbody,
.w-crud .crm-janela__corpo .w-tabela--empilha tr,
.w-crud .crm-janela__corpo .w-tabela--empilha td {
    display: block;
    width: auto;
}

.w-crud .crm-janela__corpo .w-tabela--empilha tr {
    margin: 0 0 var(--w-space-3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    overflow: hidden;
}

.w-crud .crm-janela__corpo .w-tabela--empilha tr:last-child { margin-bottom: 0; }

.w-crud .crm-janela__corpo .w-tabela--empilha td {
    display: flex;
    gap: var(--w-space-4);
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: var(--w-space-2) var(--w-space-3);
    border-bottom: 1px solid var(--w-border-subtle);
    text-align: right;
    white-space: normal;
}

.w-crud .crm-janela__corpo .w-tabela--empilha td:last-child {
    border-bottom: 0;
    width: auto;
    text-align: right;
}

.w-crud .crm-janela__corpo .w-tabela--empilha td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: var(--w-text-2xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
    text-align: left;
}

/* Campo dentro da célula ocupa o espaço que sobrou do rótulo — é o caso da
   tabela de preços por moeda, onde cada linha tem quatro campos. */
.w-crud .crm-janela__corpo .w-tabela--empilha td input,
.w-crud .crm-janela__corpo .w-tabela--empilha td select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
}

.w-crud .crm-janela__corpo table {
    width: 100%;
    table-layout: auto;
    font-size: var(--w-text-sm);
}

.w-crud .crm-janela__corpo th,
.w-crud .crm-janela__corpo td {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-inline: var(--w-space-2);
    vertical-align: middle;
}

/* A coluna de ações não quebra: dois botões empilhados um sobre o outro
   parecem duas linhas diferentes da tabela. */
.w-crud .crm-janela__corpo td:last-child,
.w-crud .crm-janela__corpo th:last-child {
    white-space: nowrap;
    width: 1%;
    text-align: right;
}

/* Botões de ação compactos, para caberem ao lado do conteúdo em vez de
   empurrá-lo para fora. */
.w-crud .crm-janela__corpo td:last-child .btn,
.w-crud .crm-janela__corpo td:last-child .lz-btn,
.w-crud .crm-janela__corpo td:last-child .fx-btn {
    padding: 4px 10px;
    font-size: var(--w-text-xs);
}

/*------------------------------------------------------------------------------
  Dentro da gaveta: o formulário ocupa tudo

  A tela de cadastro foi desenhada para uma página inteira — traz a própria
  calha, o próprio cartão e a própria moldura. Dentro da gaveta isso vira caixa
  dentro de caixa, e o formulário acaba estreito no meio de um painel largo.

  Aqui a moldura é a gaveta; o conteúdo encosta nas bordas dela.
------------------------------------------------------------------------------*/

.w-crud .crm-janela__corpo .fx,
.w-crud .crm-janela__corpo > form,
.w-crud .crm-janela__corpo > div {
    width: 100%;
    max-width: none;
}

.w-crud .crm-janela__corpo .fx { padding: 0; }

/* O cartão perde a borda: a gaveta já é a caixa. O cabeçalho dele fica — é
   quem explica o que se está preenchendo. */
.w-crud .crm-janela__corpo .fx-card {
    padding: 0;
    margin: 0 0 var(--w-space-5);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.w-crud .crm-janela__corpo .fx-card + .fx-card {
    padding-top: var(--w-space-5);
    border-top: 1px solid var(--w-border);
}

/* Dois campos por linha continuam cabendo na largura da gaveta; abaixo disso
   viram um por linha, senão o rótulo quebra em três linhas e o campo encolhe
   a ponto de não caber o que se digita. */
.w-crud .crm-janela__corpo .fx-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .w-crud .crm-janela__corpo .fx-grade { grid-template-columns: minmax(0, 1fr); }
}

.w-crud .crm-janela__corpo .fx-campo input,
.w-crud .crm-janela__corpo .fx-campo select,
.w-crud .crm-janela__corpo .fx-campo textarea,
.w-crud .crm-janela__corpo .form-control,
.w-crud .crm-janela__corpo .form-select { width: 100%; }

/* O "Voltar" da página não faz sentido aqui: a saída é fechar a gaveta, e o
   botão levava para fora dela, descartando o que estava preenchido. */
.w-crud .crm-janela__corpo .fx-voltar { display: none; }

/*------------------------------------------------------------------------------
  Dentro da gaveta: a tabela cabe

  As listas dentro do painel vinham com rolagem horizontal própria, e a última
  coluna — justamente a dos botões — ficava escondida atrás da borda. Quem
  precisava editar tinha de descobrir que havia uma barra ali.

  A saída não é alargar a gaveta: é deixar o texto quebrar. Uma célula de duas
  linhas é lida; uma coluna fora da tela, não.
------------------------------------------------------------------------------*/

.w-crud .crm-janela__corpo .table-responsive {
    overflow: visible;
    width: 100%;
}

/*
  O empilhamento do design system, aqui sem depender da largura da JANELA.

  `tabelas.css` já sabe transformar cada linha num cartão rótulo/valor — mas a
  regra mora num `@media (max-width: 60rem)`, que mede a janela. A gaveta tem
  46rem dentro de um monitor de 1920: a janela é larga, a faixa não, e a tabela
  continuava saindo pela direita.

  As declarações abaixo são as mesmas de lá, valendo por estarem dentro da
  gaveta. É repetição, e é deliberada: a alternativa seria trocar o `@media` por
  `@container` no arquivo original e, onde nenhum contêiner estivesse
  declarado, o empilhamento do celular simplesmente deixaria de acontecer.
*/

.w-crud .crm-janela__corpo .w-tabela--empilha {
    display: block;
    font-size: var(--w-text-sm);
}

.w-crud .crm-janela__corpo .w-tabela--empilha thead {
    /* Fora da tela, mas ainda no documento: o leitor de tela continua
       encontrando o cabeçalho. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.w-crud .crm-janela__corpo .w-tabela--empilha tbody,
.w-crud .crm-janela__corpo .w-tabela--empilha tr,
.w-crud .crm-janela__corpo .w-tabela--empilha td {
    display: block;
    width: auto;
}

.w-crud .crm-janela__corpo .w-tabela--empilha tr {
    margin: 0 0 var(--w-space-3);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    overflow: hidden;
}

.w-crud .crm-janela__corpo .w-tabela--empilha tr:last-child { margin-bottom: 0; }

.w-crud .crm-janela__corpo .w-tabela--empilha td {
    display: flex;
    gap: var(--w-space-4);
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: var(--w-space-2) var(--w-space-3);
    border-bottom: 1px solid var(--w-border-subtle);
    text-align: right;
    white-space: normal;
}

.w-crud .crm-janela__corpo .w-tabela--empilha td:last-child {
    border-bottom: 0;
    width: auto;
    text-align: right;
}

.w-crud .crm-janela__corpo .w-tabela--empilha td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: var(--w-text-2xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
    text-align: left;
}

/* Campo dentro da célula ocupa o espaço que sobrou do rótulo — é o caso da
   tabela de preços por moeda, onde cada linha tem quatro campos. */
.w-crud .crm-janela__corpo .w-tabela--empilha td input,
.w-crud .crm-janela__corpo .w-tabela--empilha td select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
}

.w-crud .crm-janela__corpo table {
    width: 100%;
    table-layout: auto;
    font-size: var(--w-text-sm);
}

.w-crud .crm-janela__corpo th,
.w-crud .crm-janela__corpo td {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-inline: var(--w-space-2);
    vertical-align: middle;
}

/* A coluna de ações não quebra: dois botões empilhados um sobre o outro
   parecem duas linhas diferentes da tabela. */
.w-crud .crm-janela__corpo td:last-child,
.w-crud .crm-janela__corpo th:last-child {
    white-space: nowrap;
    width: 1%;
    text-align: right;
}

/* Botões de ação compactos, para caberem ao lado do conteúdo em vez de
   empurrá-lo para fora. */
.w-crud .crm-janela__corpo td:last-child .btn,
.w-crud .crm-janela__corpo td:last-child .lz-btn,
.w-crud .crm-janela__corpo td:last-child .fx-btn {
    padding: 4px 10px;
    font-size: var(--w-text-xs);
}

/*==============================================================================
  10. A EXPLICAÇÃO DA TELA SAI DA FRENTE

  Cada tela do CRM abre com título e uma frase explicando para que ela serve. A
  frase é boa e precisa continuar existindo — mas ocupa uma linha inteira mais a
  margem, e somada à faixa de números e à fileira de abas empurrava o trabalho
  para baixo da dobra num notebook.

  Aqui ela vira um balão preso a um "?" ao lado do título: some da altura da
  página e continua a um passo do ponteiro. O texto segue no HTML — traduzido,
  lido por leitor de tela e encontrável pela busca da página.

  Tudo depende de `:has()`. Onde ele não existir, nenhuma destas regras vale e a
  tela volta a mostrar a frase como sempre mostrou — que é o pior caso
  aceitável, e não uma tela quebrada.
==============================================================================*/

.crm-topo:has(> div > h1 + p) > div { position: relative; }

.crm-topo > div > h1:has(+ p) {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-2);
}

/* O "?" é o que anuncia que há explicação. Sem ele, o texto teria sumido. */
.crm-topo > div > h1:has(+ p)::after {
    content: "?";
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: var(--w-text-xs);
    font-weight: 700;
    line-height: 1;
    color: var(--w-text-tertiary);
    background: var(--w-surface-sunken);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-full);
    cursor: help;
    transition: color var(--w-duration-fast) var(--w-ease-out),
        background-color var(--w-duration-fast) var(--w-ease-out);
}

.crm-topo > div:hover > h1:has(+ p)::after,
.crm-topo > div:focus-within > h1:has(+ p)::after {
    color: var(--w-accent);
    background: var(--w-accent-subtle);
    border-color: var(--w-accent);
}

.crm-topo > div:has(> h1 + p) > h1 + p {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--w-z-dropdown);

    /* `width: max-content` é o que faz o balão respirar. Sem ele o texto se
       espremia na largura do título — o bloco que serve de referência para o
       posicionamento é estreito, e `max-width` sozinho não alarga nada. */
    width: max-content;
    max-width: min(34rem, 60vw);
    margin: 0;
    padding: var(--w-space-3) var(--w-space-4);
    background: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    line-height: 1.55;

    /* Fora do alcance do ponteiro enquanto fechado: um balão transparente por
       cima do título roubaria o clique das abas logo abaixo. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--w-duration-fast) var(--w-ease-out),
        transform var(--w-duration-fast) var(--w-ease-out),
        visibility var(--w-duration-fast);
}

.crm-topo > div:has(> h1 + p):hover > h1 + p,
.crm-topo > div:has(> h1 + p):focus-within > h1 + p {
    visibility: visible;
    opacity: 1;
    transform: none;
}

@media (max-width: 640px) {
    /* No celular não há ponteiro para pousar, e a largura já obriga o texto a
       quebrar de qualquer jeito: a frase volta a ser frase. */
    .crm-topo > div:has(> h1 + p) > h1 + p {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        max-width: none;
        margin-top: 4px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .crm-topo > div > h1:has(+ p)::after { display: none; }
}

/*------------------------------------------------------------------------------
  Dentro da gaveta: todo formulário vira a mesma grade

  As telas de cadastro têm idades diferentes e cada uma escolheu suas colunas —
  `col-md-3` aqui, `col-md-4` ali, `col-md-2` para um campo curto. Numa página
  larga isso passa; numa faixa de 46rem vira degrau: campos de tamanhos
  diferentes, rótulos quebrando e botões fora da linha.

  Aqui a grade é uma só. `auto-fit` com piso de 200px acomoda três colunas na
  gaveta larga, duas na média e uma no estreito, sem que nenhuma tela precise
  ser reescrita.
------------------------------------------------------------------------------*/

.w-crud .crm-janela__corpo .row {
    display: grid;

    /* Duas colunas, fixas. Não `auto-fit`: com ele a mesma tela mudava de duas
       para três colunas conforme a largura sobrasse, e campos que o formulário
       pensou lado a lado apareciam em linhas diferentes. Duas colunas é o que
       a maioria das telas já desenhou, e é o que cabe com folga em 46rem. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--w-space-4);
    margin: 0;
    align-items: start;
}

@media (max-width: 1100px) {
    /* Gaveta estreita: uma coluna, senão o rótulo quebra em três linhas e o
       campo fica menor que o texto que vai receber. */
    .w-crud .crm-janela__corpo .row { grid-template-columns: minmax(0, 1fr); }
}

.w-crud .crm-janela__corpo .row > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Campo que precisa da linha inteira continua tendo: textarea e endereço não
   cabem numa coluna de 200px sem ficarem ridículos.

   O `col-12` só vale como "linha inteira" quando está sozinho. Em
   `col-12 col-md-3` ele é a regra do celular — e tratá-lo como largura cheia
   empilhava todos os campos um por linha, que foi exatamente o defeito. */
.w-crud .crm-janela__corpo .row > [class*="col-"]:has(textarea),
.w-crud .crm-janela__corpo .row > [class~="col-12"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]) {
    grid-column: 1 / -1;
}

.w-crud .crm-janela__corpo .form-group,
.w-crud .crm-janela__corpo .mb-3 { margin-bottom: 0; }

/* Rótulo de campo vira bloco — mas só o que É rótulo.

   Um `<label>` que envolve o próprio controle (interruptor, caixa de seleção,
   chip) não é rótulo acima de nada: é o controle inteiro. Tratá-lo como bloco
   empilhava o texto sobre o trilho do interruptor e cortava as palavras —
   "Ganho" virava "(  nho". */
.w-crud .crm-janela__corpo label:not(:has(input)):not(:has(select)):not(:has(textarea)) {
    display: block;
    margin-bottom: 4px;
    font-size: var(--w-text-xs);
    font-weight: 600;
    color: var(--w-text-secondary);
}

/* Interruptores e chips mantêm a própria forma: controle e texto lado a lado. */
.w-crud .crm-janela__corpo label:has(input) {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-2);
}

/*------------------------------------------------------------------------------
  A barra de botões, sempre no pé e sempre na mesma linha
------------------------------------------------------------------------------*/

/* `w-crud__rodape` é posto pelo JavaScript na barra que contém o botão de
   gravar. Estilizar pela classe original grudaria no pé TODAS as barras da
   tela — a de grupos tem dezenove. */
.w-crud .crm-janela__corpo .w-crud__rodape {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
    justify-content: flex-end;
    margin: var(--w-space-5) calc(var(--w-space-5) * -1) 0;
    padding: var(--w-space-3) var(--w-space-5);
    background: var(--w-surface);
    border-top: 1px solid var(--w-border);
}

/* O que era outro formulário — "Excluir", tipicamente — encosta à esquerda.
   Ao lado do botão de salvar, um botão de apagar é um acidente esperando
   acontecer. */
.w-crud .crm-janela__corpo .w-crud__acao-extra {
    margin: 0 auto 0 0;
    display: inline-flex;
}

@media (max-width: 640px) {
    .w-crud .crm-janela__corpo .w-crud__rodape {
        /* Empilhados e largos: no telefone o alvo do dedo vale mais que a
           economia de altura. */
        justify-content: stretch;
    }

    .w-crud .crm-janela__corpo .w-crud__rodape > * { flex: 1 1 100%; }

    .w-crud .crm-janela__corpo .w-crud__acao-extra { margin: 0; }
}

/* Enquanto o servidor responde.

   A gaveta só fecha quando o cadastro entra, e entre o clique e a confirmação
   passa um segundo em que nada muda na tela. Sem sinal, a reação natural é
   clicar de novo — e o segundo clique cadastra duas vezes. */
.w-crud__salvando {
    position: relative;
    padding-left: calc(var(--w-space-6) + var(--w-space-1));
    cursor: progress;
    opacity: 0.85;
}

.w-crud__salvando::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--w-space-3);
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: w-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .w-crud__salvando::before { animation-duration: 2s; }
}

/*------------------------------------------------------------------------------
  Campo com botão colado (input-group)

  O `width: 100%` que faz todo campo ocupar a coluna quebra o `input-group` do
  Bootstrap: o campo toma a linha inteira e o botão — o "X" que remove um
  atributo, a lupa que busca — é empurrado para a linha de baixo, como se fosse
  outro controle.

  Aqui o campo volta a ser elástico e o botão volta para o lado dele.
------------------------------------------------------------------------------*/

.w-crud .crm-janela__corpo .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.w-crud .crm-janela__corpo .input-group > .form-control,
.w-crud .crm-janela__corpo .input-group > input,
.w-crud .crm-janela__corpo .input-group > select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.w-crud .crm-janela__corpo .input-group > .btn,
.w-crud .crm-janela__corpo .input-group > button,
.w-crud .crm-janela__corpo .input-group > .input-group-text {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

/*==============================================================================
  11. O TÍTULO DA TELA VIRA UMA ORELHA NA MARGEM

  Cada tela do CRM abria com título e uma frase de explicação. Somados à faixa
  de números e à fileira de abas, empurravam o trabalho para baixo da dobra: a
  pessoa chegava no Inbox e via cabeçalho, não conversa.

  O título sai do fluxo e vira uma etiqueta vertical colada à margem esquerda —
  presente para quem procurar, invisível para quem já sabe onde está. A
  explicação continua junto dela, num balão que abre ao passar o ponteiro.

  Tudo depende de `:has()`. Onde ele não existir, nenhuma destas regras vale e a
  tela volta a mostrar título e frase como sempre mostrou.
==============================================================================*/

/* A etiqueta fica FORA do conteúdo, não por cima dele.

   Presa em `left: 0`, ela cobria a primeira pastilha de número e a primeira
   aba. A página abre uma calha do tamanho dela — e só nas telas que têm
   etiqueta. */
.w-page:has(.crm-topo > div > h1) { padding-left: calc(var(--w-space-6) + 42px); }

@media (max-width: 900px) {
    .w-page:has(.crm-topo > div > h1) { padding-left: var(--w-space-4); }
}

@media (max-width: 575px) {
    .w-page:has(.crm-topo > div > h1) { padding-left: var(--w-space-3); }
}

/* A faixa deixa de ocupar altura; o que sobra nela — botões de ação, quando a
   tela tem — continua no lugar, alinhado à direita. */
.crm-topo:has(> div > h1) {
    min-height: 0;
    margin-bottom: 0;
    justify-content: flex-end;
}

.crm-topo:has(> div > h1) > div:has(> h1) {
    position: fixed;
    left: 0;
    top: calc(var(--w-topbar-height) + var(--w-space-8));
    z-index: var(--w-z-sticky);

    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: var(--w-space-3) 5px;

    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-left: 0;
    border-radius: 0 var(--w-radius-md) var(--w-radius-md) 0;
    box-shadow: var(--w-shadow-sm);
}

/* Texto de baixo para cima: é como se lê uma etiqueta na borda de uma pasta. */
.crm-topo:has(> div > h1) > div > h1 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0;
    font-size: var(--w-text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
    white-space: nowrap;
}

.crm-topo:has(> div > h1) > div:hover > h1 { color: var(--w-text-primary); }

/* A explicação, no balão. O contêiner continua horizontal de propósito: dentro
   de um bloco rotacionado, "esquerda" e "direita" trocam de lado e posicionar o
   balão viraria adivinhação. */
.crm-topo:has(> div > h1) > div > h1 + p {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    z-index: var(--w-z-dropdown);

    width: max-content;
    max-width: min(30rem, 60vw);
    margin: 0;
    padding: var(--w-space-3) var(--w-space-4);

    background: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    line-height: 1.55;
    text-align: left;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-4px);
    transition: opacity var(--w-duration-fast) var(--w-ease-out),
        transform var(--w-duration-fast) var(--w-ease-out),
        visibility var(--w-duration-fast);
}

.crm-topo:has(> div > h1) > div:hover > h1 + p,
.crm-topo:has(> div > h1) > div:focus-within > h1 + p {
    visibility: visible;
    opacity: 1;
    transform: none;
}

@media (max-width: 900px) {
    /* No celular a margem esquerda é conteúdo: a etiqueta sairia por cima da
       tela. O título volta a ser título, curto, no alto da página. */
    .crm-topo:has(> div > h1) { justify-content: space-between; }

    .crm-topo:has(> div > h1) > div:has(> h1) {
        position: static;
        display: block;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .crm-topo:has(> div > h1) > div > h1 {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: var(--w-text-lg);
        letter-spacing: normal;
        text-transform: none;
        color: var(--w-text-primary);
    }

    .crm-topo:has(> div > h1) > div > h1 + p {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        max-width: none;
        margin-top: 4px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        font-size: var(--w-text-sm);
    }
}

/*------------------------------------------------------------------------------
  Painel de permissões dentro da gaveta

  A tela de grupos põe os módulos em duas colunas quando a janela é larga. A
  gaveta tem 46rem dentro de uma janela larga: a regra dispara, cada coluna fica
  com uns 150px e "CRM · Conexão do WhatsApp" vira "C…". Uma coluna só.
------------------------------------------------------------------------------*/

.w-crud .crm-janela__corpo .gf-modulos { grid-template-columns: 1fr; }

/* O painel rola dentro de si; com a gaveta rolando também, ficavam duas barras
   concorrendo e o teto de 30rem cortava a lista pela metade. */
.w-crud .crm-janela__corpo .gf-modulos {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

/* As seções do formulário perdem a moldura: a gaveta já é a caixa. */
.w-crud .crm-janela__corpo .gf-card {
    padding: 0;
    margin: 0 0 var(--w-space-5);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.w-crud .crm-janela__corpo .gf-card + .gf-card {
    padding-top: var(--w-space-5);
    border-top: 1px solid var(--w-border);
}

/*==============================================================================
  12. CAMPO DE SENHA

  Antes: um campo, e abaixo dele dois botões cinzas separados por uma barra
  vertical solta na tela — que, além de feio, não funcionavam, porque o script
  deles ficava fora da `@section` e era descartado pelo layout.

  Agora o olho mora dentro do campo, onde todo mundo já procura por ele, e
  gerar é uma ação ao lado. A força da senha aparece embaixo, em uma linha.
==============================================================================*/

.w-senha {
    display: flex;
    align-items: stretch;
    gap: var(--w-space-2);
}

.w-senha__campo {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Espaço à direita para o olho não sentar em cima do que se digita. */
.w-senha__campo .form-control { padding-right: 42px; }

.w-senha__olho {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--w-text-tertiary);
    background: transparent;
    border: 0;
    border-radius: var(--w-radius-sm);
    cursor: pointer;
    transition: color var(--w-duration-fast) var(--w-ease-out),
        background-color var(--w-duration-fast) var(--w-ease-out);
}

.w-senha__olho:hover {
    color: var(--w-text-primary);
    background: var(--w-surface-hover);
}

.w-senha__olho svg { width: 17px; height: 17px; }

.w-senha__gerar {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-2);
    flex: none;
    padding: 0 var(--w-space-3);
    font-family: inherit;
    font-size: var(--w-text-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--w-accent);
    background: var(--w-accent-subtle);
    border: 1px solid transparent;
    border-radius: var(--w-radius-md);
    cursor: pointer;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
        border-color var(--w-duration-fast) var(--w-ease-out);
}

.w-senha__gerar:hover {
    background: var(--w-surface);
    border-color: var(--w-accent);
}

.w-senha__gerar svg { width: 16px; height: 16px; }

.w-senha__gerar:focus-visible,
.w-senha__olho:focus-visible {
    outline: none;
    box-shadow: var(--w-shadow-focus);
}

/* A força da senha: uma linha, e só quando há o que dizer. */
.w-senha__dica {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: var(--w-text-xs);
    font-weight: 600;
}

.w-senha__dica::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--w-radius-full);
    background: currentColor;
}

.w-senha__dica.e-fraca { color: var(--w-danger); }
.w-senha__dica.e-media { color: var(--w-warning); }
.w-senha__dica.e-forte { color: var(--w-success); }

@media (max-width: 480px) {
    /* O botão inteiro embaixo: lado a lado, sobra campo para três letras. */
    .w-senha { flex-wrap: wrap; }
    .w-senha__campo { flex-basis: 100%; }
    .w-senha__gerar { flex: 1 1 100%; justify-content: center; height: 38px; }
}

/* Gaveta larga: para o formulário de agendamento, que traz calendário e grade
   de horários. Em 46rem a grade vira uma coluna e escolher um horário passa a
   custar rolagem. */
.w-crud--largo .crm-janela__caixa { max-width: 62rem; }

@media (max-width: 1200px) {
    .w-crud--largo .crm-janela__caixa { max-width: 92vw; }
}

/*==============================================================================
  13. O RETORNO DA AÇÃO

  Cadastrou, editou, excluiu: a resposta chega aqui, no meio da tela. Antes era
  um toast no canto, que some sozinho, e um bloco vermelho no alto da página
  para os erros — que numa tela longa nascia fora da vista e fazia parecer que
  o botão não tinha funcionado.

  A cor vem do que aconteceu, e só na marca redonda do topo: pintar a caixa
  inteira de verde ou vermelho grita mais do que informa.
==============================================================================*/

.w-resultado {
    position: fixed;
    inset: 0;
    /* Acima da gaveta: o aviso responde ao que foi feito DENTRO dela, e uma
       gaveta que continua aberta por cima da resposta esconde a resposta. */
    z-index: calc(var(--w-z-modal) + 50);
    display: grid;
    place-items: center;
    padding: var(--w-space-4);
    animation: w-resultado-entra var(--w-duration-fast) var(--w-ease-out);
}

.w-resultado.esta-saindo { animation: w-resultado-sai var(--w-duration-fast) var(--w-ease-out) forwards; }

@keyframes w-resultado-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes w-resultado-sai { to { opacity: 0; } }

.w-resultado__fundo {
    position: absolute;
    inset: 0;
    background: var(--w-overlay);
    backdrop-filter: blur(2px);
}

.w-resultado__caixa {
    position: relative;
    width: 100%;
    max-width: 27rem;
    padding: var(--w-space-8) var(--w-space-6) var(--w-space-6);
    text-align: center;
    background: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl);
    box-shadow: var(--w-shadow-xl);
    animation: w-resultado-sobe var(--w-duration-normal) var(--w-ease-spring);
}

@keyframes w-resultado-sobe {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .w-resultado,
    .w-resultado__caixa { animation: none; }
}

/* A marca redonda: é ela que diz, antes de qualquer palavra, se deu certo. */
.w-resultado__marca {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--w-space-4);
    border-radius: var(--w-radius-full);
}

.w-resultado__marca svg { width: 26px; height: 26px; }

.w-resultado--ok .w-resultado__marca { color: var(--w-success); background: var(--w-success-bg); }
.w-resultado--erro .w-resultado__marca { color: var(--w-danger); background: var(--w-danger-bg); }
.w-resultado--atencao .w-resultado__marca { color: var(--w-warning); background: var(--w-warning-bg); }

.w-resultado__titulo {
    margin: 0 0 var(--w-space-2);
    font-size: var(--w-text-lg);
    font-weight: 700;
    color: var(--w-text-primary);
}

.w-resultado__texto {
    margin: 0;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    line-height: 1.6;
}

/* Um erro por linha, alinhados à esquerda: lista centralizada não se lê. */
.w-resultado__lista {
    margin: var(--w-space-3) 0 0;
    padding: var(--w-space-3) var(--w-space-4);
    list-style: none;
    text-align: left;
    background: var(--w-surface-sunken);
    border-radius: var(--w-radius-md);
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    max-height: 14rem;
    overflow-y: auto;
}

.w-resultado__lista li {
    display: flex;
    gap: var(--w-space-2);
    padding: 3px 0;
}

.w-resultado__lista li::before {
    content: "•";
    color: var(--w-danger);
    flex: none;
}

.w-resultado__botao {
    width: 100%;
    margin-top: var(--w-space-5);
    padding: 11px var(--w-space-5);
    font-family: inherit;
    font-size: var(--w-text-sm);
    font-weight: 600;
    color: var(--w-accent-contrast);
    background: var(--w-accent);
    border: 0;
    border-radius: var(--w-radius-md);
    cursor: pointer;
    transition: background-color var(--w-duration-fast) var(--w-ease-out);
}

.w-resultado__botao:hover { background: var(--w-accent-hover); }

.w-resultado__botao:focus-visible {
    outline: none;
    box-shadow: var(--w-shadow-focus);
}

/*==============================================================================
  14. TODAS AS GAVETAS NO MESMO PADRÃO

  A gaveta de cadastro, a janela do CRM e a de nova oportunidade passaram a ser
  a mesma peça: encostada à direita, altura inteira da tela, cabeçalho com
  título e "x", conteúdo rolando no meio e a barra de Salvar/Cancelar grudada
  no pé — sem sobra de página embaixo dela.

  O que variava antes era só o caminho por onde cada uma nasceu: uma é `<div>`
  própria, outra é modal do Bootstrap. A aparência não tem por que lembrar isso.
==============================================================================*/

/* Altura inteira, sem sobra. `100dvh` e não `100vh`: no celular a barra do
   navegador entra e sai, e com `vh` o rodapé da gaveta ficava escondido atrás
   dela justamente na hora de salvar. */
.crm-janela,
.w-crud { height: 100dvh; }

.crm-janela__caixa {
    height: 100dvh;
    max-height: 100dvh;
}

/* O corpo é quem rola; topo e rodapé ficam. */
.crm-janela__corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/*------------------------------------------------------------------------------
  A modal de oportunidade, com a mesma moldura
------------------------------------------------------------------------------*/

.modal-dialog.crm-modal--gaveta {
    height: 100dvh;
    max-height: 100dvh;
}

.crm-modal--gaveta .modal-content {
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.crm-modal--gaveta .modal-header {
    flex: none;
    padding: var(--w-space-4) var(--w-space-5);
    border-bottom: 1px solid var(--w-border);
}

.crm-modal--gaveta .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--w-space-5);
}

.crm-modal--gaveta .modal-footer {
    flex: none;
    gap: var(--w-space-2);
    padding: var(--w-space-3) var(--w-space-5);
    margin: 0;
}

/* O "x" alinhado ao título, e não colado na borda de cima da tela. */
.crm-modal--gaveta .btn-close {
    margin: 0;
    align-self: center;
}

/*------------------------------------------------------------------------------
  O conteúdo de qualquer tela, dentro de qualquer gaveta

  As telas foram desenhadas para a página inteira: trazem cabeçalho próprio,
  abas, calha e, às vezes, duas colunas. Numa faixa de 46rem isso vira caixa
  dentro de caixa e coluna dentro de coluna.
------------------------------------------------------------------------------*/

.w-crud .crm-janela__corpo .crm-topo,
.w-crud .crm-janela__corpo .fx-topo,
.w-crud .crm-janela__corpo .lz-topo {
    /* O título já está no alto da gaveta; repetido dentro, vira eco. */
    display: none;
}

.w-crud .crm-janela__corpo .crm-subabas {
    margin: 0 0 var(--w-space-4);
    overflow-x: auto;
    scrollbar-width: none;
}

.w-crud .crm-janela__corpo .crm-subabas::-webkit-scrollbar { display: none; }

/* Uma coluna: a tela de etapas põe o formulário ao lado da lista, e lado a
   lado dentro da gaveta cada metade fica com 300px. */
.w-crud .crm-janela__corpo .crm-etapas-grade,
.w-crud .crm-janela__corpo .crm-colunas,
.w-crud .crm-janela__corpo .crm-duas { grid-template-columns: minmax(0, 1fr); }

/* Dica flutuante não cabe numa faixa estreita: vira `title` do navegador, que
   se posiciona sozinho. */
.w-crud .crm-janela__corpo [data-bs-toggle="tooltip"]::after,
.w-crud .crm-janela__corpo .crm-dica__balao { display: none; }

/* A barra de ações da ficha do CRM também grude no pé. */
.w-crud .crm-janela__corpo .crm-ficha__acoes {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-2);
    justify-content: flex-end;
    margin: var(--w-space-5) calc(var(--w-space-5) * -1) 0;
    padding: var(--w-space-3) var(--w-space-5);
    background: var(--w-surface);
    border-top: 1px solid var(--w-border);
}

/*------------------------------------------------------------------------------
  Quando o próprio formulário é a gaveta

  Na gaveta de nova oportunidade, o filho direto da caixa é o `<form>` — o
  cabeçalho, o corpo e o rodapé estão dentro dele. Sem dizer que o formulário
  também é uma coluna flexível, a altura para no conteúdo: o corpo não ganha a
  sobra, não recebe rolagem, e o formulário fica preso mostrando só o começo,
  com o rodapé por cima do resto.
------------------------------------------------------------------------------*/

.crm-janela__caixa > form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.crm-janela__caixa > form > .crm-janela__topo,
.crm-janela__caixa > form > .crm-form__rodape { flex: none; }

.crm-janela__caixa > form > .crm-janela__corpo,
.crm-janela__caixa > form > .crm-form__corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* O rodapé encosta no pé da gaveta, com a mesma borda das outras. */
.crm-janela__caixa > form > .crm-form__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-3);
    justify-content: space-between;
    padding: var(--w-space-3) var(--w-space-5);
    background: var(--w-surface);
    border-top: 1px solid var(--w-border);
}

.crm-janela__caixa > form > .crm-form__rodape .crm-form__acoes {
    display: flex;
    gap: var(--w-space-2);
    margin-left: auto;
}

/* Gaveta larga para o formulário de oportunidade: dois campos por linha só
   cabem com folga a partir daí. */
.crm-janela--largo .crm-janela__caixa { max-width: 46rem; }

/*==============================================================================
  15. MENUZINHO DA BARRA

  "Ordenar" e "Colunas" abrem um painel pequeno ancorado no próprio botão — não
  uma gaveta lateral. São escolhas de exibição, resolvidas em um clique e
  fechadas: mandar a pessoa a um painel de tela inteira para inverter uma ordem
  custaria mais do que a decisão vale.
==============================================================================*/

.w-menuzinho { position: relative; display: inline-flex; }

.w-menuzinho__painel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--w-z-dropdown);
    min-width: 232px;
    padding: var(--w-space-3);
    background: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
}

/* Perto da borda direita o painel abre para dentro. */
.w-toolbar > .w-menuzinho:nth-last-child(-n+3) .w-menuzinho__painel { left: auto; right: 0; }

.w-menuzinho__titulo {
    margin: 0 0 var(--w-space-2);
    font-size: var(--w-text-xs);
    font-weight: 700;
    color: var(--w-text-secondary);
}

.w-menuzinho__select {
    width: 100%;
    height: 34px;
    padding: 0 var(--w-space-3);
    font-family: inherit;
    font-size: var(--w-text-sm);
    color: var(--w-text-primary);
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
}

/* O sentido da ordem: dois lados de um mesmo controle, não dois botões. */
.w-menuzinho__sentido {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    margin-top: var(--w-space-2);
    padding: 3px;
    background: var(--w-surface-sunken);
    border-radius: var(--w-radius-md);
}

.w-menuzinho__sentido button {
    flex: 1;
    padding: 5px var(--w-space-2);
    font-family: inherit;
    font-size: var(--w-text-xs);
    font-weight: 600;
    color: var(--w-text-secondary);
    background: transparent;
    border: 0;
    border-radius: calc(var(--w-radius-md) - 3px);
    cursor: pointer;
}

.w-menuzinho__sentido button.is-on {
    color: var(--w-text-primary);
    background: var(--w-surface);
    box-shadow: var(--w-shadow-xs);
}

.w-menuzinho__sentido span { color: var(--w-text-tertiary); font-size: var(--w-text-xs); }

/*------------------------------------------------------------------------------
  A lista de colunas
------------------------------------------------------------------------------*/

.w-menuzinho__painel--alto { min-width: 248px; }

.w-menuzinho__lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--w-accent) 45%, transparent) transparent;
}

.w-menuzinho__lista label {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: 5px 6px;
    font-size: var(--w-text-sm);
    color: var(--w-text-secondary);
    border-radius: var(--w-radius-sm);
    cursor: pointer;
}

.w-menuzinho__lista label:hover { background: var(--w-surface-hover); }
.w-menuzinho__lista input { accent-color: var(--w-accent); }

.w-menuzinho__restaurar {
    width: 100%;
    margin-top: var(--w-space-2);
    padding: 7px;
    font-family: inherit;
    font-size: var(--w-text-xs);
    font-weight: 600;
    color: var(--w-text-secondary);
    background: transparent;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md);
    cursor: pointer;
}

.w-menuzinho__restaurar:hover { color: var(--w-text-primary); background: var(--w-surface-hover); }

/*------------------------------------------------------------------------------
  A lupa da busca de contatos

  `formularios.css` normaliza `.w-main input[type="search"]` com peso maior que
  a regra da própria busca, e a calha da esquerda se perdia: a lupa ficava
  desenhada por cima da palavra "Buscar", como se fosse borrão.

  Aqui o peso empata e o campo volta a ter espaço para o ícone.
------------------------------------------------------------------------------*/

.w-main .fn-contatos__busca input[type="search"] {
    min-height: 34px;
    padding: 0 var(--w-space-3) 0 34px;
    font-size: var(--w-text-sm);
    background: var(--w-surface-sunken);
    border: 1px solid transparent;
    border-radius: var(--w-radius-md);
}

.w-main .fn-contatos__busca input[type="search"]:focus {
    background: var(--w-surface);
    border-color: var(--w-border-focus);
}

/* A lupa fica acima do campo e fora do alcance do ponteiro, senão clicar nela
   não põe o cursor no texto. */
.fn-contatos__busca svg {
    z-index: 1;
    pointer-events: none;
}