/*
 * Exceção controlada de composição UIkit (ADR-003, "último caso").
 * Toda classe aqui é nomeada, documentada, e existe só porque o UIkit
 * puro não tem um primitivo equivalente - nunca reimplementa algo que
 * uk-* já resolve (ex.: nada de reimplementar uk-card, uk-nav, uk-table,
 * uk-label aqui). Proposto em 2026-07-25 durante a construção do shell
 * (CORE-V6-002/003/006) e ampliado no mesmo dia com os componentes
 * CORE-V6-012/014 - aprovado formalmente pelo Everton em 2026-07-26
 * ("Está tudo aprovado!"), ver ADR-003.
 *
 * Cada classe só usa tokens de public/assets/core/css/tokens.css, nunca
 * valor solto.
 */

/* Base - cor/fonte padrão da aplicação inteira, a partir dos tokens
   (equivalente ao reset que o UIkit espera que o projeto forneça). */
body {
  background: var(--core-bg);
  color: var(--core-ink);
  font-family: var(--core-font-sans);
  font-size: var(--core-text-base);
}

/* Sidebar - UIkit não tem componente de sidebar; uk-nav cuida da lista,
   isso aqui é só o "chassi" (largura, cor de fundo, layout).
   Comportamento diferente por tamanho de tela (achado 2026-07-25,
   faltava isso - sidebar fixa de 260px sobrava tela pequena):
   - Desktop (>=960px, breakpoint @m do UIkit): sidebar embutida no
     layout, empurra o conteúdo; "recolhida" = largura zero.
   - Mobile (<960px): sidebar vira painel sobreposto (overlay),
     escondida por padrão, não ocupa espaço do conteúdo; abre por
     cima ao clicar no menu hamburguer. */
.core-sidebar {
  width: var(--core-sidebar-w);
  flex-shrink: 0;
  background: var(--core-sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: var(--core-space-4) 0;
  /* overflow-x: hidden (não overflow: hidden) - "hidden" nos dois
     eixos também bloqueava a rolagem vertical, escondendo os últimos
     grupos de navegação sempre que a lista era mais alta que a tela
     (achado real no mobile - "Design system" cortado, sem scroll). */
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.2s ease-in-out, transform 0.2s ease-in-out;
}

@media (min-width: 960px) {
  /* Estado recolhido no desktop - alternado pelo botão de menu na
     navbar via JS próprio (ver _scripts.php). */
  .core-sidebar-collapsed {
    width: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 959px) {
  .core-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1020;
    transform: translateX(-100%);
    box-shadow: var(--core-shadow-lg);
  }

  /* Seletor composto (duas classes) de propósito - especificidade
     maior que o `.core-sidebar` sozinho acima, pra garantir que ganha
     independente da ordem no arquivo. */
  .core-sidebar.core-sidebar-visible-mobile {
    transform: translateX(0);
  }

  /* Fundo escurecido atrás da sidebar aberta no mobile - toque fora
     fecha (ver _scripts.php). */
  .core-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1010;
  }

  .core-sidebar-backdrop.core-sidebar-visible-mobile {
    display: block;
  }

  /* Botão de fechar dentro da própria sidebar, só aparece no mobile. */
  .core-sidebar-close {
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--core-space-4);
    margin-bottom: var(--core-space-2);
  }

  .core-sidebar-close a {
    color: var(--core-sidebar-ink);
  }
}

@media (min-width: 960px) {
  /* Escondido no desktop - só faz sentido no fluxo mobile (overlay). */
  .core-sidebar-close,
  .core-sidebar-backdrop {
    display: none;
  }
}

/* Dropdowns da navbar (anúncios/mensagens/usuário) no mobile - a
   largura fixa do UIkit (uk-navbar-dropdown-width-2 = 400px) estoura
   qualquer tela menor que isso, forçando o texto a quebrar palavra por
   palavra. Trava numa largura segura, sempre menor que a tela.
   !important necessário aqui: o JS do UIkit calcula e escreve
   left/width como style inline no elemento em tempo real (posicionamento
   dinâmico do Drop) - uma regra de classe comum nunca ganharia de um
   style inline, então esse é o único jeito de garantir a largura
   segura nesse breakpoint específico. */
@media (max-width: 480px) {
  .uk-navbar-dropdown {
    width: calc(100vw - 32px) !important;
    max-width: 360px;
    left: auto !important;
    right: 16px !important;
  }
}

/* Margem lateral mínima no mobile (CORE-V6-055) - pedido do Everton
   depois de ver o painel no celular ("os componentes ficaram
   estreitos, coloca eles com o mínimo de margem entre as laterais,
   somente no mobile"). Dois espaços somavam até 90px de desperdício
   lateral (dois lados) numa tela de ~320-375px: o `uk-padding-small`
   do `<main>` (15px) + o padding padrão do `uk-card-body` nativo do
   UIkit (30px, todo cartão/painel do sistema usa essa classe). Reduz
   só abaixo do breakpoint pequeno do UIkit (`@s`, <640px) - acima
   disso, sem nenhuma mudança (pedido explícito: "somente no mobile").
   Só o eixo horizontal muda ("margem entre as laterais") - vertical
   fica como já era. */
@media (max-width: 639px) {
  .core-main-content {
    padding-left: var(--core-space-2);
    padding-right: var(--core-space-2);
  }

  .uk-card-body {
    padding-left: var(--core-space-2);
    padding-right: var(--core-space-2);
  }
}

/* CORE-V6-259 - o bloco da marca tem fundo branco PRÓPRIO e altura
   mínima fixa, pra ficar sempre do mesmo tamanho (pedido do Everton).
   Antes o branco vinha na própria imagem, então o retângulo mudava de
   forma conforme a proporção da logo carregada.

   `margin` no lugar do `padding` lateral: com padding o branco iria de
   ponta a ponta da barra; com margem ele forma um cartão alinhado com
   os grupos do menu logo abaixo.

   E a cor do texto DEIXA de ser branca. Este é o único bloco claro de
   uma barra escura, e o nome da empresa — que aparece quando não há
   logo — sumiria no fundo. */
.core-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  margin: 0 var(--core-space-4) var(--core-space-5);
  padding: var(--core-space-2);
  background: #fff;
  border-radius: var(--core-radius-md);
  color: var(--core-ink);
  font-weight: var(--core-weight-semibold);
  font-size: var(--core-text-lg);
  letter-spacing: 0.02em;
  text-align: center;
}

/* Agrupamento visual de cada seção de nav (Principal/Dados) - uk-nav
   sozinho não agrupa em "cartão" com fundo próprio. */
.core-sidebar-group {
  margin: 0 var(--core-space-2) var(--core-space-3);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--core-radius-md);
  padding: var(--core-space-2);
}

.core-sidebar-group-label {
  padding: var(--core-space-1) var(--core-space-2);
  margin-bottom: var(--core-space-1);
  background: var(--core-sidebar-cta-bg);
  border-radius: var(--core-radius-sm);
  color: var(--core-sidebar-ink-hover);
  font-size: var(--core-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.core-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--core-space-2);
  padding: var(--core-space-2);
  color: var(--core-sidebar-ink);
  text-decoration: none;
  font-size: var(--core-text-md);
  border-radius: var(--core-radius-sm);
}

.core-sidebar-link:hover {
  color: var(--core-sidebar-ink-hover);
  text-decoration: none;
}

/* Destaque verde claro no item ativo (CORE-V6-101, pedido do Everton) -
   opacidade mais alta que o `--core-success-tint` padrão (pensado pra
   superfície branca) porque a sidebar é escura - em 0.12 ficava
   imperceptível aqui. Borda à esquerda reforça o destaque sem
   depender só da cor de fundo. */
.core-sidebar-link-active,
.core-sidebar-link-active:hover {
  color: var(--core-sidebar-ink-active);
  background: rgba(28, 187, 140, 0.25);
  border-left: 3px solid var(--core-success);
  padding-left: calc(var(--core-space-2) - 3px);
}

.core-sidebar-link-icon {
  display: flex;
  width: 16px;
  flex-shrink: 0;
}

/* Subgrupo colapsável dentro de um grupo da sidebar (CORE-V6-083,
   pedido do Everton com referência visual de outro sistema - pill
   com ícone + chevron, itens filho indentados por baixo). Terceira
   rodada: as duas primeiras tentativas (título só com texto/cor,
   depois texto maior+bold com itens empurrados via padding) usavam
   `uk-nav-header` estático - trocado pelo nav aninhado nativo do
   UIkit (`uk-nav-parent-icon` + `.uk-parent` + `uk-nav-sub`, ver
   `_sidebar.php`), que já resolve indentação (`ul.uk-nav-sub` nativo,
   15px) e o ícone de chevron sozinho (injetado pelo próprio
   componente Nav, `UIkit.nav()` em `_scripts.php` - nunca reimplementa
   o que o UIkit já dá de graça, ADR-003). Só o "pill" (fundo/raio) e
   o tema de cor pro fundo escuro da sidebar são nossos. */
.core-sidebar-parent-link {
  display: flex;
  align-items: center;
  gap: var(--core-space-2);
  padding: var(--core-space-2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--core-radius-md);
  color: var(--core-sidebar-ink);
  text-decoration: none;
  font-size: var(--core-text-md);
  font-weight: var(--core-weight-semibold);
}

.core-sidebar-parent-link:hover {
  color: var(--core-sidebar-ink-hover);
  text-decoration: none;
}

/* Navbar - uk-navbar estiliza a lista de itens, isso aqui é só a barra
   externa (altura fixa, sombra própria do token). */
.core-navbar {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--core-space-4);
  background: var(--core-surface);
  box-shadow: var(--core-shadow-navbar);
}

/* Avatar com iniciais - UIkit não tem componente de avatar. */
.core-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--core-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--core-text-sm);
  font-weight: var(--core-weight-semibold);
  flex-shrink: 0;
}

/* uk-label cobre success/warning/danger nativamente; info e neutro não
   têm modificador nativo no UIkit. */
.core-label-info {
  background-color: var(--core-info-tint);
  color: var(--core-info);
}

.core-label-neutral {
  background-color: var(--core-neutral-tint);
  color: var(--core-ink-soft);
}

.core-label-primary {
  background-color: rgba(59, 125, 221, 0.12);
  color: var(--core-primary);
}

/* Ícone dentro de uk-label/core-label (CORE-V6-041, classe visual de
   notificação) - uk-label não foi desenhado pra combinar com ícone,
   sem isso o SVG fica desalinhado com o texto e colado nele. */
.uk-label svg,
.core-label-info svg {
  vertical-align: -2px;
  margin-right: 4px;
}

/* Rótulo com largura fixa + alinhado à esquerda (CORE-V6-057) - uk-label
   nativo não tem variante de largura fixa (cresce pelo conteúdo, cada
   um um tamanho); pedido do Everton pra grupos empilhados de rótulos
   (legenda, coluna de status) escanearem melhor em coluna. Largura
   calculada pro maior rótulo comum ("Sucesso" + ícone) com folga. */
.core-label-fixed {
  display: inline-flex;
  align-items: center;
  width: 110px;
  text-align: left;
}

/* Variante colorida do avatar (círculo com ícone), usada no atalho de
   sino de Notificações na navbar (CORE-V6-041) - mesma base do
   .core-avatar, uma por classe visual de notificação. */
.core-avatar-aviso {
  background: var(--core-info);
}

.core-avatar-alerta {
  background: var(--core-warning);
  color: #212529;
}

.core-avatar-sucesso {
  background: var(--core-success);
}

.core-avatar-perigo {
  background: var(--core-danger);
}

/* Badge de contagem sobre o sino - UIkit não tem indicador de badge
   posicionado sobre um ícone. */
.core-notifications-bell {
  position: relative;
}

.core-badge-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--core-danger);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* Linha divisória entre seções empilhadas (cards de estatística,
   gráfico, tabela) dentro do mesmo card de conteúdo - uk-margin-divider
   não existe nesta versão do UIkit, então isso é a alternativa. */
.core-divider-top {
  border-top: 1px solid var(--core-line);
  padding-top: var(--core-space-4);
}

/* Menu do usuário - um pouco maior que o padrão do uk-nav-large,
   pedido explícito do Everton (2026-07-25). */
.core-user-menu-nav > li > a {
  font-size: var(--core-text-md);
  padding: var(--core-space-2) var(--core-space-3);
}

/* Quadrado de ícone tintado dos cards de estatística do painel - sem
   equivalente nativo no UIkit. */
.core-stat-icon {
  width: 44px;
  height: 44px;
  /* 8px hardcoded conforme o handoff aprovado (Dashboard.html) - mais
     arredondado de propósito que a escala padrão de raio (--core-radius-md
     é só 3.2px), diferença deliberada só neste componente. */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Atalhos rápidos do Painel (CORE-V6-211, pedido do Everton) - o card
   de estatística vira link clicável, ícone + rótulo lado a lado numa
   linha só. */
.core-dashboard-shortcut {
  align-items: center;
  color: var(--core-ink);
  display: flex;
  gap: var(--core-space-3);
  text-decoration: none;
}

.core-dashboard-shortcut:hover {
  border-color: var(--core-primary);
  color: var(--core-primary);
  text-decoration: none;
}

/*
 * Tema - mapeia cor/fundo dos componentes NATIVOS do UIkit (uk-card,
 * uk-navbar-dropdown, uk-table, uk-input, uk-button, uk-alert) para os
 * nossos tokens. Isso não é "reimplementar" UIkit (nenhuma classe nova,
 * nenhuma mudança de estrutura/comportamento) - é só troca de cor, a
 * mesma coisa que qualquer projeto UIkit precisa fazer pra sair do
 * branco/preto padrão da distribuição pro tema próprio. Sem isso, um
 * componente nativo (ex. uk-card-default) fica sempre branco mesmo
 * quando o chassi (core-*) muda de tema - foi o que causou o
 * "fundo errado" visto em 2026-07-25.
 */
.uk-card-default {
  background-color: var(--core-surface);
  color: var(--core-ink);
}

.uk-navbar-dropdown {
  background: var(--core-surface);
  color: var(--core-ink);
}

.uk-nav-header {
  color: var(--core-ink-faint);
}

.uk-nav-default > li > a {
  color: var(--core-ink);
}

.uk-nav-divider {
  border-top-color: var(--core-line);
}

.uk-table {
  color: var(--core-ink);
}

.uk-table th {
  color: var(--core-ink-soft);
}

.uk-table-divider > tr:not(:first-child),
.uk-table-divider > :not(:first-child) > tr,
.uk-table-divider > :first-child > tr:not(:first-child) {
  border-top-color: var(--core-line);
}

.uk-input,
.uk-select,
.uk-textarea {
  background-color: var(--core-surface);
  color: var(--core-ink);
  border-color: var(--core-line-strong);
}

.uk-button-default {
  background-color: var(--core-surface);
  color: var(--core-ink);
  border-color: var(--core-line-strong);
}

.uk-text-meta,
.uk-text-muted {
  color: var(--core-ink-soft);
}

/* Upload de arquivo (CORE-V6-012) - uk-placeholder não tem estado
   nativo de "arrastando por cima"; só o destaque de borda/fundo
   durante o dragover é exceção, o resto é uk-placeholder puro. */
.core-dropzone-active {
  border-color: var(--core-primary);
  background-color: var(--core-info-tint);
}

/* Timeline (CORE-V6-014) - UIkit não tem primitivo de linha do tempo;
   linha vertical conectando marcadores via ::before do item. */
.core-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.core-timeline-item {
  position: relative;
  padding-left: var(--core-space-4);
  padding-bottom: var(--core-space-4);
}

.core-timeline-item:last-child {
  padding-bottom: 0;
}

.core-timeline-item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: -4px;
  width: 2px;
  background: var(--core-line);
}

.core-timeline-item:last-child::before {
  display: none;
}

.core-timeline-marker {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--core-primary);
}

/* Calendário mensal (CORE-V6-050) - grid é uk-table puro; só o destaque
   do dia atual não tem equivalente nativo no UIkit.
   `table-layout: fixed` na tabela (não só largura no <td>) é o que
   garante as 7 colunas realmente iguais - achado real: sem isso, o
   algoritmo de layout "auto" do navegador mede cada coluna pelo
   conteúdo mais largo dela (ex. o rótulo "Renovação de contrato" num
   dia só), e como só o <td> tinha `width` (nunca o <th> do cabeçalho),
   cabeçalho e corpo descasavam - colunas vazias ficavam estreitas,
   a coluna do evento mais comprido esticava sozinha, cabeçalho não
   acompanhava. */
/* Largura mínima (CORE-V6-054) - achado real no mobile: `uk-table`
   nativo já força `width: 100%`; combinado com `table-layout: fixed`
   acima, a tabela nunca "transborda" - ela sempre espreme as 7 colunas
   pra caber exatamente na tela, não importa o quão estreita, e o
   `uk-overflow-auto` que já envolve a tabela nunca chega a ativar
   rolagem (não há overflow real pra rolar). Resultado: em telas
   estreitas, rótulo de evento truncava pra 1 letra ilegível em vez de
   mostrar um pedaço legível do texto. `min-width` faz a tabela
   realmente transbordar abaixo desse ponto, ativando a rolagem
   horizontal de verdade (mesmo padrão já usado em qualquer tabela
   larga do sistema, ex. `Components/data_table`) - 90px por coluna
   (630px / 7) é o mínimo que ainda cabe o número do dia + um pedaço
   legível de rótulo antes de truncar. */
.core-calendar-table {
  table-layout: fixed;
  min-width: 630px;
}

.core-calendar-table td {
  vertical-align: top;
  height: 64px;
  overflow-wrap: break-word;
}

.core-calendar-today {
  background-color: var(--core-info-tint);
  border-radius: var(--core-radius-sm);
}

/* Borda da grade (CORE-V6-050) - pedido do Everton depois de ver a
   tela ("coloca uma borda nessa tabela de datas e no título"). `uk-table`
   nativo não tem variante de grade completa (só `uk-table-divider`,
   linha horizontal entre linhas) - aqui cada célula (cabeçalho e corpo)
   ganha borda própria, e a tabela toda uma borda externa fechando o
   contorno. */
.core-calendar-table,
.core-calendar-table th,
.core-calendar-table td {
  border: 1px solid var(--core-line);
}

/* Linha abaixo do título do mês (CORE-V6-050) - mesmo pedido acima,
   separa "Julho de 2026" do grid abaixo. */
.core-calendar-title {
  border-bottom: 1px solid var(--core-line);
  padding-bottom: var(--core-space-2);
}

/* Rótulo de evento não pode estourar a célula do dia (achado real,
   ADR-003) - `uk-label` nativo não trunca sozinho (é inline-block,
   cresce pelo conteúdo). Truncamento com reticências só dentro do
   calendário (seletor escopado a `.core-calendar-table`, nunca muda
   `uk-label` em nenhum outro lugar do sistema) - o texto completo
   continua acessível via o tooltip (`uk-tooltip`) que já existe em
   cima de cada rótulo. */
.core-calendar-table .uk-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Painel com borda (CORE-V6-050) - `uk-card-default` nativo já dá
   sombra, mas nenhuma variante nativa do UIkit tem borda; composição
   em cima do card nativo (nunca reimplementa `uk-card`), só acrescenta
   o traço. Nasceu no Dashboard (calendário/vendas), e depois de ver o
   resultado o Everton pediu pra aplicar em todo painel do sistema
   ("ficou muito elegante essa div com borda e sombra, aplique isso
   para todos esses cards") - virou o padrão de "painel" do
   catálogo (`uk-card uk-card-default uk-card-body core-panel-bordered`),
   documentado no Showcase (`/showcase`). */
.core-panel-bordered {
  border: 1px solid var(--core-line);
}

/* Título do acordeão (CORE-V6-039, ajustado CORE-V6-050) - tema em
   cima do uk-accordion-title nativo; o indicador +/- em si é 100%
   nativo do UIkit (<span uk-accordion-icon> na view), a animação de
   abrir/fechar já vem de fábrica, nada nosso aqui. Fundo diferenciado
   no cabeçalho (cinza sutil, `--core-surface-2`) - pedido do Everton
   depois de ver o modelo v2 do UIkit ("o heading tendo uma cor de
   fundo diferente, o resto tá legal") - mantido tudo que já existia
   (fonte maior, linha inferior de destaque, cor no hover), só virou
   caixa com fundo/raio em vez de só sublinhado. */
.uk-accordion-title {
  font-size: var(--core-text-xl);
  font-weight: var(--core-weight-normal);
  color: var(--core-ink);
  background-color: var(--core-surface-2);
  border-bottom: 2px solid var(--core-primary);
  border-radius: var(--core-radius-md);
  padding: var(--core-space-3) var(--core-space-4);
}

.uk-accordion-title:hover {
  color: var(--core-primary);
}

/* Árvore de catálogo hierárquico (CORE-V6-067/071, Centro de Custo/
   Conta Contábil, ADR-013) - grupo vira uk-accordion nativo, folha
   vira linha de uk-table (ambos primitivos do UIkit); só o
   espaçamento da linha de título/ações não tem equivalente nativo. */
.core-tree-node {
  display: flex;
  align-items: center;
  gap: var(--core-space-2);
}

/* Título menor só dentro da árvore de catálogo (CORE-V6-071b) - o
   `--core-text-xl` padrão do uk-accordion-title (bom pra Grupos, uma
   dúzia de itens no máximo) ficava grande demais com várias dezenas
   de grupos empilhados aqui; pedido do Everton depois de ver a tela
   ("coloca esses títulos menores"). Escopado à árvore
   (`.core-tree-accordion`) - não muda o tamanho em `/grupos`. */
.core-tree-accordion .uk-accordion-title {
  font-size: var(--core-text-md);
  padding: var(--core-space-2) var(--core-space-3);
}

/* Faixa cinza do cabeçalho do grupo ocupando a linha toda, POR BAIXO
   dos botões de ação também (CORE-V6-079, pedido do Everton - primeira
   tentativa só esticou o `<a>` e deixou os botões "de fora", fundo
   branco atrás deles; a faixa precisa envolver a linha inteira, botões
   inclusive). O fundo/borda que antes vivia só no `<a>.uk-accordion-title`
   move pra o wrapper da linha inteira (`.core-tree-node-header`); o
   `<a>` fica sem fundo próprio (senão criava um "degrau" visível de
   fundo cinza sobre fundo cinza) e ainda cresce (`flex: 1 1 auto`)
   pra manter a área de clique do accordion grande. Escopado à árvore
   (`.core-tree-accordion`), mesmo motivo do bloco acima - não muda
   `/grupos`. */
.core-tree-accordion .core-tree-node-header {
  background-color: var(--core-surface-2);
  border-bottom: 2px solid var(--core-primary);
  border-radius: var(--core-radius-md);
  padding: var(--core-space-2) var(--core-space-3);
}

.core-tree-accordion .core-tree-node-header > a.uk-accordion-title {
  flex: 1 1 auto;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Thumbnail da logo da empresa (CORE-V6-080, pedido do Everton -
   "não é nada muito grande") - sem equivalente uk-* pra limitar
   dimensão de imagem, só `object-fit` puro. */
.core-empresa-logo-preview {
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  background-color: var(--core-surface-2);
  padding: var(--core-space-1);
}

/* Título de modal em destaque (CORE-V6-081, pedido do Everton - "achei
   essa modal confusa... no título coloque um background color azul
   pra destacar") - sem equivalente uk-* pra título de modal colorido.
   `#fff` é valor literal (não token) de propósito: não existe token de
   "cor de texto sobre fundo colorido" em tokens.css hoje, e branco
   sobre `--core-primary` já é exatamente o que `uk-button-primary`
   usa em todo o sistema (nativo do próprio UIkit) - mantém
   consistência com o que já existe em vez de inventar mais um token
   pra um único uso. */
.core-modal-title-highlight {
  background-color: var(--core-primary);
  color: #fff;
  padding: var(--core-space-3) var(--core-space-4);
  border-radius: var(--core-radius-md);
  margin-bottom: var(--core-space-4);
}

/* Título de seção em destaque (CORE-V6-090, pedido do Everton - "coloca
   um background azul no título das tabelas, ocupando a largura toda" -
   generalizado como padrão de design system pra qualquer tela que
   precise dividir conteúdo em blocos titulados, não só a de Contas
   Bancárias/Cartões que originou o pedido). Mesmo par de tokens de
   `.core-modal-title-highlight` acima (`--core-primary` + branco
   literal) - `display: block` garante a largura cheia mesmo em
   elementos inline por padrão (`h3`, `h4`). */
.core-section-title {
  display: block;
  background-color: var(--core-primary);
  color: #fff;
  padding: var(--core-space-2) var(--core-space-4);
  border-radius: var(--core-radius-md);
  margin: 0 0 var(--core-space-3) 0;
}

/* Editor de texto rico minimalista (CORE-V6-086,
   `Components/rich_text_editor.php`) - `contenteditable` puro, sem
   biblioteca externa (UIkit não tem componente de rich text, ADR-003).
   Área editável tematizada igual a um `uk-input` (mesma borda/raio/
   padding) pra parecer parte do mesmo formulário, já que
   `contenteditable` não herda nenhum estilo de campo nativo. */
.core-richtext-toolbar {
  display: flex;
  gap: var(--core-space-1);
  margin-bottom: var(--core-space-1);
}

.core-richtext-editor {
  min-height: 6rem;
  padding: var(--core-space-2);
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  background-color: var(--core-surface);
  color: var(--core-ink);
  font-size: var(--core-text-base);
  overflow-y: auto;
}

.core-richtext-editor:focus {
  outline: none;
  border-color: var(--core-primary);
}

/* Cabeçalho de coluna ordenável (CORE-V6-088, `Components/data_table.php`,
   pedido do Everton como padrão de design system) - `<th>` vira link,
   sem sublinhado, mesma cor do texto padrão de cabeçalho (herda do
   `<th>` nativo). Indicador ↕/▲/▼ como texto puro (não SVG) de
   propósito - é só uma pista visual pequena, não precisa de mais um
   ícone no catálogo. */
.core-sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--core-space-1);
  color: inherit;
  text-decoration: none;
}

.core-sort-link:hover {
  color: var(--core-primary);
  text-decoration: none;
}

.core-sort-icon {
  font-size: var(--core-text-sm);
  color: var(--core-ink-faint);
}

.core-sort-icon-active {
  color: var(--core-primary);
}

/* Borda entre colunas (CORE-V6-094, pedido do Everton - "coloque
   bordas nas tabelas, entre colunas") - `uk-table-divider` nativo do
   UIkit só risca ENTRE LINHAS, não existe variante nativa pra separar
   colunas; acrescenta o traço vertical em cima de `Components/data_table`,
   design system inteiro (toda tabela do sistema usa esse componente).
   Sem borda depois da última coluna de cada linha, senão duplicaria o
   traço externo do card que já envolve a tabela. */
.core-table-column-divider th:not(:last-child),
.core-table-column-divider td:not(:last-child) {
  border-right: 1px solid var(--core-line);
}

/* Kanban da Esteira Comercial (CORE-V6-100, ADR-017) - colunas fixas
   (sem arrastar-e-soltar nesta entrega - transição de etapa acontece
   por botão dentro da modal do card, mesmo padrão de confirmação já
   usado no resto do sistema). Card clicável (cursor + hover) abre a
   modal de detalhe/ação. */
.core-kanban-panel {
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  overflow: hidden;
}

.core-kanban-header {
  display: flex;
  align-items: center;
  gap: var(--core-space-2);
  padding: var(--core-space-3) var(--core-space-4);
  margin: 0;
}

/* Uma cor por coluna (CORE-V6-100, pedido do Everton - "cores
   diferentes e ícones pra cada kanban") - mesma progressão de
   severidade já usada nos badges de status (`uk-label-warning`/
   `uk-label-danger`) - Pedido é neutro, Fatura é atenção (separação em
   andamento), Pagamento é o que mais precisa de olho (saldo em
   aberto). `--core-warning` é claro demais pra texto branco (falha de
   contraste) - usa `--core-ink` nesse caso, os outros dois usam branco. */
.core-kanban-header--pedido {
  background-color: var(--core-primary);
  color: #fff;
}

.core-kanban-header--fatura {
  background-color: var(--core-warning);
  color: var(--core-ink);
}

.core-kanban-header--pagamento {
  background-color: var(--core-danger);
  color: #fff;
}

.core-kanban-column {
  display: flex;
  flex-direction: column;
  gap: var(--core-space-2);
  height: 600px;
  overflow-y: auto;
  padding: var(--core-space-3);
  background-color: var(--core-surface-2);
}

.core-kanban-card {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.core-kanban-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Modal larga (CORE-V6-099, pedido do Everton - "aumenta a largura
   dessa modal, me dá nervoso ver os campos apertados") - substitui
   `uk-modal-container` (nativo do UIkit, mas travado em 1200px fixos)
   sempre que o formulário tem muito campo lado a lado. Uso desktop-
   first de propósito ("majoritariamente trabalharemos via notebook
   e/ou monitor" - Everton) - em tela pequena ainda cabe (`max-width:
   100%` do próprio `.uk-modal-dialog` nativo continua valendo).

   O teto vai dentro do `min()` e NÃO num `max-width` próprio: o UIkit
   declara `.uk-modal-dialog { max-width: 100% !important }`, então
   qualquer `max-width` nosso aqui é ignorado. Escrito como `max-width`
   entre o CORE-V6-099 e o CORE-V6-126, o teto de 1600px nunca valeu -
   em monitor acima de ~1684px a modal seguia crescendo com o `95vw`
   (achado ao medir a largura renderizada no CORE-V6-126). */
.core-modal-wide {
  width: min(95vw, 1600px);
}

/* Meio-termo entre a modal padrão do UIkit (600px, apertada demais pro
   formulário de Pedido com tabela de itens) e a `.core-modal-wide`
   acima (CORE-V6-126, pedido do Everton: "o modal pode ser um pouco
   mais largo" - um pouco, não 1600px). */
.core-modal-medium {
  width: min(90vw, 1100px);
}

/* Modal de detalhe do Pedido (CORE-V6-132, pedido do Everton - "a
   largura ficou muito grande pode reduzir uns 20%"). Era
   `.core-modal-wide` (1600px), a mesma classe do cadastro de Cliente -
   reduzir ali também encolheria uma tela sem reclamação nenhuma, então
   virou classe própria em vez de editar a compartilhada. 1600 * 0,8 =
   1280, 95vw * 0,8 = 76vw. */
.core-modal-wide-pedido {
  width: min(76vw, 1280px);
}

/* Modal de Produto (CORE-V6-138, pedido do Everton - "deixa esse modal
   de produtos 20% mais largo... para ficar mais alinhado", com a
   tabela de Fornecedores por produto do CORE-V6-106 apertada na
   largura padrão do UIkit). Modal padrão do UIkit é 600px - 600 * 1,2 =
   720px.

   CORE-V6-252 - mais 30% (pedido do Everton: "deixe ela mais larga, 30%
   mais larga"): 720 * 1,3 = 936px. O `min()` com `95vw` entrou junto -
   a largura fixa anterior estourava a tela em notebook pequeno, e o
   `max-width` que o UIkit poria por cima é `!important` e nunca valeu
   (mesmo achado do CORE-V6-126, documentado na `.core-modal-wide`). */
.core-modal-wide-produto {
  width: min(95vw, 936px);
}

/* Fluxo de Caixa agrupado por Centro de Custo (CORE-V6-117, pedido do
   Everton - "faz um accordion bonito agrupando por centros de custo").

   `table-layout: fixed` + largura fixa da 1ª coluna é o que faz as
   colunas de mês ALINHAREM entre um grupo e outro e com o consolidado
   do rodapé. Sem isso, cada tabela dimensiona sozinha e os 12 meses
   ficam tortos de um accordion pro outro - foi o detalhe que separava
   "várias tabelas soltas" de uma matriz que se lê de cima a baixo. */
.core-fc-table {
  table-layout: fixed;
  min-width: 1100px;
}

.core-fc-table th:first-child,
.core-fc-table td:first-child {
  width: 260px;
}

/* Cabeçalho de cada centro de custo - mais discreto que o
   `.core-section-title` (faixa azul cheia), que aqui competiria com o
   conteúdo repetido 8 vezes na tela. */
.core-fc-accordion-title {
  display: flex;
  align-items: center;
  gap: var(--core-space-2);
  background-color: var(--core-surface-2);
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  padding: var(--core-space-2) var(--core-space-3);
  font-size: var(--core-text-md);
  font-weight: var(--core-weight-semibold);
  color: var(--core-ink);
}

.core-fc-accordion-title:hover {
  border-color: var(--core-line-strong);
}

.core-fc-accordion-count {
  margin-left: auto;
  font-weight: var(--core-weight-normal);
}

/* Subtotal do grupo e saldo consolidado - fundo neutro pra separar da
   leitura das linhas de obrigação sem depender só de negrito. */
.core-fc-subtotal th {
  background-color: var(--core-neutral-tint);
}

.core-fc-total td {
  background-color: var(--core-neutral-tint);
  font-weight: var(--core-weight-semibold);
}

/* Baixa estornada (CORE-V6-133) - a linha continua na tabela (ledger
   imutável, nunca some), riscada e apagada pra ficar óbvio que aquele
   valor não conta mais pro que foi recebido. */
.core-baixa-estornada td {
  color: var(--core-ink-soft);
  text-decoration: line-through;
}

/* CORE-V6-214 - o downgrade do pacote visual (CORE-V6-200 a 210) levou
   junto a regra dessas duas classes, mas o CÓDIGO que as usa é de
   commits POSTERIORES (CORE-V6-212/213, histórico do cliente + link
   pra abrir proposta/pedido/atendimento) e continua de pé - restaura só
   a regra, sem trazer de volta o resto do pacote visual. */
.core-table-row-link {
  color: var(--core-ink);
  font-weight: var(--core-weight-semibold);
  text-decoration: none;
}

.core-table-row-link:hover {
  color: var(--core-primary);
  text-decoration: underline;
}

/* Cabeçalho discreto para blocos operacionais dentro de uma view (usado
   pela seção "Histórico" da ficha do cliente, CORE-V6-212). */
/* CORE-V6-247 (pedido do Everton - "coloca também para todos os títulos
   uma cor de destaque e uma fonte um pouco maior").

   Título de card/seção, num lugar só: `detail_card`, `section_card` e o
   cabeçalho do `data_table` usam esta mesma classe. Sem ela, "um pouco
   maior" viraria três decisões independentes que divergem na primeira
   tela nova.

   O azul é o `--core-primary`, o mesmo acento que a marca já usa - não
   entra cor nova no sistema. */
.core-card-titulo {
  color: var(--core-primary);
  font-size: var(--core-text-lg);
  font-weight: var(--core-weight-semibold);
}

/* O título do `detail_card` é o NOME do registro (o cliente, o worker),
   não um rótulo de seção - ele é o topo da hierarquia da página e fica
   um degrau acima dos títulos de seção abaixo dele. Só a COR é
   compartilhada. */
.uk-card-title.core-card-titulo {
  font-size: var(--core-text-xl);
}

/* CORE-V6-247 - aqui existiu `.core-content-section-title`, a barra
   cinza que ficava SOLTA acima do painel branco. O `CORE-V6-246` moveu
   todos os títulos pra dentro da moldura (`Components/section_card` e o
   cabeçalho do `data_table`), e nenhuma view usa mais esta classe.

   Removida em vez de mantida "por precaução": CSS órfão é convite pra
   alguém reencontrar o padrão antigo e reintroduzi-lo sem saber que foi
   substituído - mesmo raciocínio do dead code removido no CORE-V6-242. */

/* CORE-V6-218 - lista de resultados da caixa de busca de Produto na
   modal de Orçamento/Pedido (substitui o <select> do CORE-V6-150).
   Fica no fluxo normal do documento (não é `position: absolute`) de
   propósito - a caixa fica dentro de uma tabela com `uk-overflow-auto`
   (rolagem horizontal em telas estreitas), e um dropdown flutuante
   ficaria cortado pelo `overflow` do ancestral; abrir a lista empurra a
   linha pra baixo em vez disso. */
.core-produto-picker-results {
  background-color: var(--core-surface);
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  margin-top: var(--core-space-1);
  max-height: 9rem;
  overflow-y: auto;
}

.core-produto-picker-option {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: var(--core-space-1) var(--core-space-2);
  text-align: left;
  width: 100%;
}

.core-produto-picker-option:hover,
.core-produto-picker-option:focus {
  background-color: var(--core-surface-2);
}

.core-produto-picker-empty {
  margin: 0;
  padding: var(--core-space-1) var(--core-space-2);
}

/* CORE-V6-220 - variante verde de botão (UIkit só vem com
   default/primary/secondary/danger, sem "success"). Mesmo token
   `--core-success` que `uk-label-success` já usa noutro contexto (rótulo
   "Concluído" em Atendimentos), mesma estrutura de
   `.uk-button-primary`/`.uk-button-danger` (fundo sólido, texto branco,
   borda transparente). */
.core-button-success {
  background-color: var(--core-success);
  border: 1px solid transparent;
  color: #fff;
}

.core-button-success:hover,
.core-button-success:focus {
  color: #fff;
  opacity: 0.9;
}

/* ==========================================================================
   CORE-V6-223 - modal de detalhe da Proposta (achado do Everton: "essa
   modal está sem graça... título e valor com tamanho/cor parecidos, o
   botão de visualizar a proposta não tem cor, a seção próxima ação
   faltou embelezamento, na timeline falta acabamento e distanciamento
   do título Histórico"). Tudo escopado em `.core-proposta-*` - a
   `.core-timeline` base continua servindo as outras 2 telas que a usam
   (Components/timeline.php, PedidoKanban/_detalhe_modal.php) sem
   mudança.
   ========================================================================== */

/* Subtítulo do cabeçalho: menor e mais leve que o `<h2>` ao lado - antes
   os dois competiam pelo mesmo peso visual. */
.core-modal-subtitulo {
  font-size: var(--core-text-base);
  opacity: 0.85;
}

/* CORE-V6-225 (achado do Everton - "o cabeçalho sinto que falta algo,
   use o que o codex fez de referência"). No mockup aprovado o título
   vem precedido de uma marca quadrada com a sigla do documento ("PV" =
   Proposta de Venda) - é o que dava identidade ao cabeçalho. Aqui ela
   fica sobre o azul do cabeçalho, então usa branco translúcido em vez
   do tint claro do mockup. */
.core-modal-marca {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--core-radius-md);
  display: flex;
  flex-shrink: 0;
  font-size: var(--core-text-base);
  font-weight: var(--core-weight-semibold);
  height: 2.5rem;
  justify-content: center;
  letter-spacing: 0.04em;
  width: 2.5rem;
}

/* Faixa de resumo (Valor/Validade/Responsável) - rótulo pequeno e
   apagado EM CIMA, valor grande e forte EMBAIXO. */
.core-modal-resumo {
  background-color: var(--core-surface-2);
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  margin-bottom: var(--core-space-3);
  padding: var(--core-space-3);
}

/* CORE-V6-245 - a TIPOGRAFIA do resumo (rótulo pequeno em caixa alta +
   valor grande) chamava-se `core-modal-resumo-label/valor`, mas já era
   usada fora de modal em três telas. Renomeada pra `core-resumo-*`:
   nome que descreve o que é, não onde nasceu.

   O container `.core-modal-resumo` acima MANTÉM o nome de propósito:
   ele é mesmo específico de modal (fundo cinza, borda, margem própria).
   Fora de modal o bloco entra no painel branco padrão do sistema
   (`uk-card uk-card-default uk-card-body core-panel-bordered`), e só a
   tipografia é compartilhada. */
.core-resumo-label {
  color: var(--core-ink-soft);
  display: block;
  font-size: var(--core-text-sm);
  letter-spacing: 0.04em;
  margin-bottom: var(--core-space-1);
  text-transform: uppercase;
}

.core-resumo-valor {
  color: var(--core-ink);
  display: block;
  font-size: var(--core-text-md);
  font-weight: var(--core-weight-semibold);
}

/* O valor em dinheiro é o número que o olho procura primeiro. */
.core-resumo-valor--destaque {
  color: var(--core-primary);
  font-size: var(--core-text-lg);
}

/* "Visualizar proposta comercial" - era um link de texto sem cor nenhuma
   no meio do bloco; vira um alvo clicável óbvio, com ícone à esquerda e
   seta à direita indicando que leva a outro lugar. */
.core-proposta-link-comercial {
  align-items: center;
  background-color: var(--core-primary-tint);
  border: 1px solid transparent;
  border-radius: var(--core-radius-md);
  color: var(--core-primary);
  display: flex;
  gap: var(--core-space-3);
  margin-bottom: var(--core-space-4);
  padding: var(--core-space-3);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.core-proposta-link-comercial:hover,
.core-proposta-link-comercial:focus {
  border-color: var(--core-primary);
  color: var(--core-primary);
  text-decoration: none;
}

.core-proposta-link-comercial-icone {
  align-items: center;
  display: flex;
}

.core-proposta-link-comercial-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.core-proposta-link-comercial-texto small {
  color: var(--core-ink-soft);
  font-size: var(--core-text-sm);
}

.core-proposta-link-comercial-seta {
  align-items: center;
  display: flex;
  opacity: 0.6;
}

/* Cada seção (Próxima ação / Histórico) vira um bloco delimitado, em vez
   de texto solto separado por `<hr>`. */
.core-modal-secao {
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  margin-bottom: var(--core-space-3);
  padding: var(--core-space-3);
}

.core-modal-secao-cabecalho {
  border-bottom: 1px solid var(--core-line);
  gap: var(--core-space-2);
  margin-bottom: var(--core-space-3);
  padding-bottom: var(--core-space-2);
}

/* CORE-V6-225 (achado do Everton - "coloca um título maior na seção
   histórico" / "a seção Próxima ação também precisa de cor e títulos um
   pouco maiores"). Maiúsculas com espaçamento entre letras é o
   tratamento do mockup aprovado ("PRÓXIMA AÇÃO", "HISTÓRICO DA
   PROPOSTA") - dá presença ao título sem precisar de corpo grande
   competindo com os dados. */
/* CORE-V6-229 (achado do Everton - "coloque alguma cor nesses títulos de
   seções") - eram da mesma cor do texto do formulário, então não
   marcavam onde uma seção termina e a outra começa. Cor da marca + a
   barra à esquerda dão o corte visual sem precisar de fundo colorido em
   cada bloco (que competiria com a seção de destaque). */
.core-modal-secao-titulo {
  border-left: 3px solid var(--core-primary);
  color: var(--core-primary);
  font-size: var(--core-text-lg);
  font-weight: var(--core-weight-semibold);
  letter-spacing: 0.06em;
  padding-left: var(--core-space-2);
  text-transform: uppercase;
}

/* A seção de ação ganha fundo e borda na cor da marca - é ela que pede
   uma decisão do usuário, então precisa se destacar do Histórico
   (leitura passiva) logo abaixo. */
.core-modal-secao--destaque {
  background-color: var(--core-primary-tint);
  border-color: transparent;
}

.core-modal-secao--destaque .core-modal-secao-cabecalho {
  border-bottom-color: var(--core-line-strong);
}

.core-modal-secao--destaque .core-modal-secao-titulo {
  color: var(--core-primary);
}

/* Ação já agendada: era uma linha de texto solta acima do formulário;
   vira um chip no cabeçalho da seção, onde se lê de relance. */
.core-proposta-acao-chip {
  background-color: var(--core-primary-tint);
  color: var(--core-primary);
  white-space: normal;
}

.core-proposta-acao-botoes {
  gap: var(--core-space-2);
  margin-top: var(--core-space-3);
}

/* Feedback do "Agendar ação"/"Marcar como concluída" sem recarregar a
   página (CORE-V6-223) - ocupa o espaço à esquerda dos botões. */
.core-proposta-acao-aviso {
  flex: 1;
  text-align: left;
}

/* O pedido explícito era "distanciamento do título Histórico com a
   timeline" - o cabeçalho da seção já dá o respiro; aqui só o alinhamento
   do primeiro marcador com o texto ao lado. */
.core-proposta-timeline .core-timeline-item {
  padding-bottom: var(--core-space-3);
}

.core-proposta-timeline .core-timeline-content {
  padding-top: 0;
}

.core-proposta-historico-vazio {
  margin: 0;
}

/* ==========================================================================
   CORE-V6-226 - documento de Proposta Comercial em A4 (achado do
   Everton: "ela precisa ser algo mais formal, uma pré-invoice" + "não
   temos o botão da invoice A4 para PDF"). Referência: a tela /invoice
   do mockup aprovado do Codex.

   Este bloco é o único do sistema que desenha um DOCUMENTO (algo que
   sai da tela e vai pro cliente), não uma tela de operação - por isso
   tem fundo branco fixo, medidas em milímetro e regras de impressão.
   ========================================================================== */
.core-doc-body {
  background-color: var(--core-bg);
  margin: 0;
  padding: var(--core-space-4) var(--core-space-3);
}

.core-doc-toolbar {
  margin: 0 auto var(--core-space-3);
  max-width: 210mm;
}

/* 210mm = largura útil de uma folha A4. O documento tem a proporção
   real da folha já na tela, pra não haver surpresa entre o que se vê e
   o que sai impresso. */
.core-doc {
  background-color: #fff;
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  /* `border-box` é essencial aqui: sem ele o padding de 16mm soma POR
     FORA dos 210mm e o documento aparece na tela com ~916px em vez dos
     ~794px de um A4 de verdade - ou seja, a prévia mentiria sobre o que
     vai sair impresso. */
  box-sizing: border-box;
  box-shadow: var(--core-shadow-md);
  color: #1a1a1a;
  /* Corpo de DOCUMENTO, não de tela: 14px com entrelinha curta. Com o
     corpo de tela (16px), uma proposta de 3 itens já estourava a
     primeira folha - e proposta curta caindo em 2 páginas passa
     impressão de desleixo justamente no papel que vai pro cliente. */
  font-size: var(--core-text-base);
  line-height: 1.45;
  margin: 0 auto;
  max-width: 210mm;
  /* CORE-V6-231 (achado do Everton - "a visão do PDF antes de mandar
     imprimir não está representando a altura do A4, quero que fique em
     proporção igual"). A largura já era 210mm, mas a altura acompanhava
     o conteúdo - uma proposta curta virava um retângulo baixo, sem cara
     de folha. Com `min-height: 297mm` a prévia tem a proporção real do
     papel, e sobra branco embaixo exatamente como sobraria impresso.
     Documento mais longo que uma folha continua crescendo (vira 2
     páginas de verdade na impressão). */
  min-height: 297mm;
  padding: 16mm;
  /* Origem das marcas de folha do paginador (CORE-V6-235) - elas são
     posicionadas em relação a esta caixa. */
  position: relative;
  /* CORE-V6-234 - coluna flex pra que o rodapé possa ser empurrado pro
     fim da folha (`margin-top: auto` nele), em vez de colar logo abaixo
     do último conteúdo. */
  display: flex;
  flex-direction: column;
}

.core-doc-header {
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: var(--core-space-3);
}

.core-doc-marca {
  font-size: var(--core-text-xl);
  font-weight: var(--core-weight-semibold);
  letter-spacing: 0.04em;
}

.core-doc-tipo {
  color: var(--core-ink-soft);
  font-size: var(--core-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.core-doc-numero {
  font-size: var(--core-text-md);
  font-weight: var(--core-weight-semibold);
}

/* CORE-V6-232 - logo da empresa no lugar do nome escrito. `width: auto`
   pra que logo larga ou alta caiba igual sem distorcer - o cadastro
   aceita qualquer proporção.

   CORE-V6-233 (achado do Everton - "coloca essa logo maior, ficou bem
   pequena no pdf"): os limites eram 22mm x 70mm. A logo cadastrada é
   1536x1024 (proporção 1.5, mais larga que alta), então quem limitava
   era a ALTURA - ela caía pra 124x83px, bem abaixo dos 70mm de largura
   disponíveis. Subindo a altura, a largura acompanha sozinha.

   Segunda rodada: 36mm ficou grande demais ("diminui um pouco"). 28mm
   é o meio-termo entre os 22mm iniciais e aquele exagero. */
.core-doc-logo {
  display: block;
  max-height: 28mm;
  max-width: 90mm;
  width: auto;
}

.core-doc-emissao {
  color: var(--core-ink-soft);
  font-size: var(--core-text-sm);
  margin-top: var(--core-space-1);
}

/* Proponente / Cliente lado a lado, e Condições / Totais no fechamento.
   CSS grid puro - o documento não carrega o JS do UIkit (ver nota na
   view), então `uk-grid` não funcionaria aqui. */
.core-doc-partes,
.core-doc-fechamento {
  display: grid;
  gap: var(--core-space-3);
  grid-template-columns: 1fr 1fr;
}

/* CORE-V6-235 (pedido do Everton - "afaste um pouco aquela linha azul e
   a seção do proponente e cliente daquela linha cinza") - a régua do
   cabeçalho encostava no topo dos blocos de Proponente/Cliente. */
.core-doc-partes {
  margin-top: var(--core-space-4);
}

/* CORE-V6-234 (achado do Everton - "o valor não pode ficar quebrado de
   linha com o R$, aumente a largura da seção total da proposta") - eram
   34%, e "R$ 3.093,65" quebrava entre o símbolo e o número dentro da
   caixa. A largura maior resolve o caso normal; o `nowrap` em
   `.core-doc-num` garante que valor nenhum quebre, por mais longo que
   seja. */
.core-doc-fechamento {
  grid-template-columns: 1fr minmax(0, 46%);
  margin-top: var(--core-space-3);
}

/* Numa folha estreita (ou impressão em papel menor) os pares voltam a
   empilhar em vez de espremer. */
@media (max-width: 600px) {
  .core-doc-partes,
  .core-doc-fechamento {
    grid-template-columns: 1fr;
  }
}

.core-doc-parte {
  border-left: 3px solid var(--core-primary);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: var(--core-space-3);
}

.core-doc-parte-rotulo,
.core-doc-secao-rotulo {
  color: var(--core-ink-soft);
  font-size: var(--core-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.core-doc-secao-cabecalho {
  margin: var(--core-space-4) 0 var(--core-space-1);
}

/* CORE-V6-234 - o UIkit dá `margin-top: 20px` e `margin-bottom: 20px`
   a toda `.uk-table`. Somado ao `margin` do `.core-doc-secao-cabecalho`
   seguinte, dava 11,6mm de vão ENTRE seções, e as três seções sozinhas
   comiam 54mm da folha - o documento estourava o A4 em 4mm e emitia uma
   segunda página com um filete de conteúdo.

   Quem manda no espaço entre seções é o cabeçalho da seção; a tabela
   pertence ao cabeçalho acima dela, então não abre espaço por conta
   própria. Uma origem só pro espaçamento, em vez de duas se somando. */
.core-doc-tabela {
  margin-top: 0;
  margin-bottom: var(--core-space-2);
}

/* Cabeçalho escuro da tabela - é o que dá cara de documento formal em
   vez de listagem de sistema. */
.core-doc-tabela thead th {
  background-color: #1a2b45;
  color: #fff;
  font-size: var(--core-text-sm);
  letter-spacing: 0.06em;
  padding: var(--core-space-2);
  text-transform: uppercase;
}

.core-doc-tabela td {
  border-bottom: 1px solid var(--core-line);
  padding: var(--core-space-2);
  vertical-align: middle;
}

/* Coluna de número alinha dígito com dígito. `nowrap` porque valor
   monetário partido entre "R$" e o número é erro de leitura, não só
   feiura (CORE-V6-234). */
.core-doc-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* CORE-V6-235 - mesma marcação azul de `.core-doc-parte`, pra que
   Condições leia como par visual de Proponente/Cliente e não como texto
   solto no pé da folha. */
.core-doc-condicoes-caixa {
  background-color: var(--core-primary-tint);
  border-left: 3px solid var(--core-primary);
  border-radius: 0 var(--core-radius-md) var(--core-radius-md) 0;
  padding: var(--core-space-3);
}

.core-doc-condicoes {
  display: grid;
  gap: 0.35rem var(--core-space-3);
  grid-template-columns: auto 1fr;
  margin: var(--core-space-2) 0 0;
}

.core-doc-condicoes dt {
  color: var(--core-ink-soft);
}

.core-doc-condicoes dd {
  font-weight: var(--core-weight-semibold);
  margin: 0;
}

/* CORE-V6-235 - observação agora é seção com rótulo, largura cheia. */
.core-doc-observacoes {
  border-top: 1px solid var(--core-line);
  display: block;
  margin-top: var(--core-space-3);
  padding-top: var(--core-space-2);
}

.core-doc-observacoes-texto {
  margin: var(--core-space-1) 0 0;
}

.core-doc-totais {
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  display: flex;
  flex-direction: column;
  /* Sem `overflow: hidden` o fundo escuro do total final vaza sobre o
     raio da borda e a quina fica quadrada. */
  overflow: hidden;
}

.core-doc-totais-linha {
  display: flex;
  /* O `gap` é o conserto do achado do Everton: com `space-between` sozinho
     e tipografia grande, rótulo e valor ficavam ENCOSTADOS quando não
     sobrava folga na caixa ("Total da propostaR$ 3.093,65"). O `gap`
     garante distância mínima mesmo sem espaço livre. */
  gap: var(--core-space-3);
  justify-content: space-between;
  padding: var(--core-space-2) var(--core-space-3);
}

.core-doc-totais-linha + .core-doc-totais-linha {
  border-top: 1px solid var(--core-line);
}

/* Mesmo azul-marinho do cabeçalho das tabelas - fecha o documento com a
   cor que ele já usa, em vez de introduzir uma nova. */
.core-doc-total-final {
  align-items: baseline;
  background-color: #1a2b45;
  color: #fff;
}

.core-doc-total-rotulo {
  font-size: var(--core-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.core-doc-total-final .core-doc-num {
  font-size: var(--core-text-lg);
  font-weight: var(--core-weight-semibold);
}

/* `margin-top: auto` dentro do flex column empurra o rodapé pro fim da
   folha (CORE-V6-234, pedido do Everton) - antes ele colava logo abaixo
   do último conteúdo, deixando um vazio esquisito embaixo dele. */
.core-doc-rodape {
  border-top: 1px solid var(--core-line);
  color: var(--core-ink-soft);
  font-size: var(--core-text-sm);
  gap: var(--core-space-2);
  margin-top: auto;
  padding-top: var(--core-space-2);
}

/* Impressão: some tudo que é controle de tela e o documento ocupa a
   folha inteira, sem sombra/borda/margem de visualização. */
@media print {
  /* A margem da folha passa a ser do `@page`, não do padding do
     elemento - é o mecanismo que a impressora respeita, e evita que o
     conteúdo caia na área não imprimível da borda do papel. */
  @page {
    margin: 16mm;
    size: A4;

    /* CORE-V6-234/235 - aqui existiu um `@bottom-right` com
       `counter(page)/counter(pages)`. Foi REMOVIDO: o Chrome aceita a
       regra (guarda no CSSOM e descarta uma caixa inventada no mesmo
       teste), mas não a desenha - o papel saiu sem número nenhum.
       Aceitar não é renderizar, e o teste de CSSOM não distingue as
       duas coisas. O paginador passou a ser calculado em JS na própria
       view do documento, onde dá pra medir o resultado. */
  }

  .core-doc-toolbar {
    display: none;
  }

  /* CORE-V6-235 - o navegador NÃO imprime cor de fundo por padrão (a
     caixa "Gráficos de plano de fundo" do diálogo vem desmarcada). Onde
     o texto é branco sobre fundo escuro, isso imprime BRANCO NO BRANCO -
     o cabeçalho das tabelas e o total sumiriam do papel que vai pro
     cliente. `print-color-adjust: exact` obriga a imprimir o fundo.

     Só nos elementos em que a cor é LEGIBILIDADE, não decoração: forçar
     no documento inteiro gastaria tinta à toa. */
  .core-doc-tabela thead th,
  .core-doc-total-final,
  .core-doc-condicoes-caixa {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .core-doc-body {
    background-color: #fff;
    padding: 0;
  }

  .core-doc {
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    /* CORE-V6-231/234 - o `min-height: 297mm` da tela NÃO pode vir pra
       cá: o `@page` já reserva 16mm de margem de cada lado, sobrando
       ~265mm de área útil, e um elemento de 297mm dentro de 265mm
       transborda e emite uma SEGUNDA FOLHA EM BRANCO.

       Mas zerar também não serve: sem altura mínima, o rodapé cola logo
       abaixo do último conteúdo em vez de ir pro fim da folha. A medida
       certa é a área útil: 264mm (1mm a menos que os 265 disponíveis,
       folga contra arredondamento de sub-pixel). Assim o flex empurra o
       rodapé pro fim da página impressa, exatamente como na tela, e sem
       estourar pra uma segunda folha.

       Preferi isto a `position: fixed` no rodapé (que repetiria em toda
       página) porque fixo exige reservar espaço na mão e corre risco de
       o conteúdo passar por baixo dele - no papel, isso é irreversível. */
    min-height: 264mm;
    padding: 0;
  }

  /* Uma linha de item nunca deve ser partida entre duas folhas. */
  .core-doc-tabela tr {
    break-inside: avoid;
  }
}

/* CORE-V6-227 (achado do Everton - "o campo valor não está com a
   máscara de moeda... isso é definido na hora que a proposta é criada
   com base na moeda"). Prefixo de moeda dentro do campo, usando o
   `uk-form-icon` do próprio UIkit como posicionamento - ele já reserva
   40px à esquerda e empurra o texto do input. O default dele é cinza
   claro (pensado pra ícone decorativo); aqui o símbolo é INFORMAÇÃO
   (distingue R$ de US$), então precisa de contraste de texto normal.
   `pointer-events: none` pra que clicar no símbolo caia no campo. */
.core-moeda-simbolo {
  color: var(--core-ink-soft);
  font-size: var(--core-text-sm);
  font-weight: var(--core-weight-semibold);
  pointer-events: none;
}

/* CORE-V6-227 - bloco de total da modal de orçamento/pedido. Era texto
   solto alinhado à direita; vira caixa destacada, porque é o número que
   fecha a negociação. Mesmo tratamento da caixa de totais do documento
   A4 (`.core-doc-totais`). */
/* CORE-V6-252 - contadores ao lado do titulo da pagina. Espacamento
   proprio pra nao colar no titulo nem entre si. */
.core-page-contadores {
  display: inline-flex;
  gap: var(--core-space-2);
}

/* CORE-V6-256 - o Everton pediu os contadores maiores. O `uk-label` do
   UIkit e dimensionado pra caber DENTRO de uma celula de tabela; no
   cabecalho da pagina ele fica miudo demais pra ser lido de relance,
   que e a unica funcao dele ali. So aqui dentro - o badge da tabela
   continua com o tamanho original. */
.core-page-contadores .uk-label {
  font-size: 0.8125rem;
  padding: 5px 12px;
  line-height: 1.5;
}

/* ============================================================
   CORE-V6-251 - Toast / notificacao
   ============================================================

   Achado do Everton: "esse badge ta feio, e um quadrado cinza com letras
   estranhas. ele tem que vir da direita para esquerda, ter um botao de X
   fundo branco com sombra em volta e um icone de acordo com o tipo de
   alerta".

   O diagnostico: o toast NUNCA teve estilo nosso. Saia com o visual cru
   do UIkit - fundo `#f8f8f8` e `font-size: 1.25rem`, que e o texto
   grande demais que ele chamou de "letras estranhas". O componente
   existia desde o CORE-V6-013 e passou despercebido porque toast some
   sozinho em 5 segundos.

   Tudo abaixo sobrescreve o tema nativo do UIkit - a marcacao continua
   sendo 100% dele (`UIkit.notification()`), so o vestuario e nosso. */

.uk-notification {
  width: 22rem;
}

/* O cartao: branco, cantos arredondados, sombra - nao mais o retangulo
   cinza. A cor do TIPO entra como faixa a esquerda (abaixo), em vez de
   tingir o fundo inteiro: fundo colorido com texto escuro e o que
   deixava a leitura ruim. */
.uk-notification-message {
  align-items: flex-start;
  background: var(--core-surface);
  border-radius: var(--core-radius-md);
  box-shadow: var(--core-shadow-navbar);
  color: var(--core-ink);
  display: flex;
  font-size: var(--core-text-base);
  gap: var(--core-space-2);
  line-height: var(--core-leading-base);
  padding: var(--core-space-3);
  padding-right: var(--core-space-5);
}

/* "Da direita para esquerda" (pedido do Everton) - o UIkit anima
   opacidade e altura, nunca deslocamento horizontal. */
@keyframes core-toast-entra {
  from {
    opacity: 0;
    transform: translateX(120%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.uk-notification-top-right .uk-notification-message,
.uk-notification-bottom-right .uk-notification-message {
  animation: core-toast-entra 0.28s ease-out;
}

/* Quem pediu pra reduzir movimento nao ganha animacao - so aparece. */
@media (prefers-reduced-motion: reduce) {
  .uk-notification-top-right .uk-notification-message,
  .uk-notification-bottom-right .uk-notification-message {
    animation: none;
  }
}

/* A faixa lateral e o icone carregam a cor do tipo. O icone herda
   `currentColor`, entao basta colorir o container. */
.core-toast-icone {
  display: flex;
  flex-shrink: 0;
  line-height: 1;
}

.core-toast-texto {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.uk-notification-message-success {
  border-left: 3px solid var(--core-success);
}

.uk-notification-message-success .core-toast-icone {
  color: var(--core-success);
}

.uk-notification-message-danger {
  border-left: 3px solid var(--core-danger);
}

.uk-notification-message-danger .core-toast-icone {
  color: var(--core-danger);
}

.uk-notification-message-warning {
  border-left: 3px solid var(--core-warning);
}

.uk-notification-message-warning .core-toast-icone {
  color: var(--core-warning);
}

.uk-notification-message-primary {
  border-left: 3px solid var(--core-primary);
}

.uk-notification-message-primary .core-toast-icone {
  color: var(--core-primary);
}

/* O X: circulo branco com sombra em volta (pedido do Everton). O nativo
   e um "x" de texto sem area clicavel decente, escondido ate o hover. */
.uk-notification-close {
  align-items: center;
  background: var(--core-surface);
  border: 1px solid var(--core-line);
  border-radius: 50%;
  box-shadow: var(--core-shadow-md);
  color: var(--core-ink-soft);
  display: flex;
  height: 1.5rem;
  justify-content: center;
  opacity: 1;
  right: var(--core-space-2);
  top: var(--core-space-2);
  width: 1.5rem;
}

.uk-notification-close:hover,
.uk-notification-close:focus {
  color: var(--core-ink);
}

/* CORE-V6-250 - a data prevista de entrega, ao lado do prazo em dias.
   Discreta de proposito: o prazo e a promessa; a data e a leitura dela. */
.core-doc-previsao {
  color: var(--core-ink-soft);
}

/* CORE-V6-235 - paginador. O número da última folha vive no rodapé; as
   folhas intermediárias recebem uma marca posicionada no fim de cada
   uma (só existem quando o documento passa de uma folha). */
.core-doc-paginador {
  font-variant-numeric: tabular-nums;
}

.core-doc-marca-folha {
  color: var(--core-ink-soft);
  font-size: var(--core-text-sm);
  font-variant-numeric: tabular-nums;
  position: absolute;
  right: 0;
  /* Na tela o documento é uma folha contínua: mostrar a marca de quebra
     no meio dela confundiria. Ela existe pro papel. */
  display: none;
}

@media print {
  .core-doc-marca-folha {
    display: block;
  }
}

/* CORE-V6-240 (ADR-029) - quarto tom do `Components/badge`, para o farol
   da venda. O UIkit só traz success/warning/danger; "em andamento" não é
   nenhum dos três.

   Nome PRÓPRIO, e não um `.uk-label.core-label-info` por cima da classe
   que já existe: `.core-label-info` é o chip claro usado nos blocos do
   Painel e na tela de Notificações, e sobrescrevê-la só quando
   acompanhada de `uk-label` faria a mesma classe significar duas coisas
   conforme o vizinho. Badge sólido ao lado de `uk-label-success` e
   `uk-label-danger` precisa do mesmo peso visual que eles. */
.core-badge-info {
  background-color: var(--core-info);
  color: #fff;
}

/* CORE-V6-240 - a fila de marcadores do farol. */
.core-farol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--core-space-1);
}

/* CORE-V6-239 (decisão do Everton - "deixa destacado de vermelho o campo
   de observação interna").

   O vermelho aqui não é erro nem perigo - é ADVERTÊNCIA de destino: o
   que se escreve de um lado vai pro papel do cliente, do outro não. A
   diferença precisa ser vista antes de digitar, não descoberta depois
   de imprimir. Daí marcar o campo inteiro (borda + fundo), e não só o
   rótulo. */
.core-textarea-interna {
  background-color: var(--core-danger-tint);
  border-color: var(--core-danger);
}

.core-textarea-interna:focus {
  background-color: var(--core-surface);
  border-color: var(--core-danger);
}

/* Os dois avisos ao lado do rótulo dizem o DESTINO em palavras - cor
   sozinha não informa quem não distingue vermelho de cinza. */
.core-obs-aviso-cliente,
.core-obs-aviso-interna {
  border-radius: var(--core-radius-sm);
  font-size: var(--core-text-sm);
  font-weight: var(--core-weight-normal);
  margin-left: var(--core-space-1);
  padding: 0.1rem 0.4rem;
  text-transform: none;
}

.core-obs-aviso-cliente {
  background-color: var(--core-primary-tint);
  color: var(--core-primary);
}

.core-obs-aviso-interna {
  background-color: var(--core-danger-tint);
  color: var(--core-danger);
}

/* CORE-V6-235 - rótulo de linha fixa (Frete/Deslocamento) na modal.
   Não é campo digitável, então NÃO pode parecer um: peso de rótulo, sem
   moldura de input. O que se digita ali do lado é só o valor. */
.core-pedido-linha-fixa-rotulo {
  color: var(--core-ink);
  font-weight: var(--core-weight-semibold);
}

.core-modal-total {
  background-color: var(--core-surface-2);
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius-md);
  margin-bottom: var(--core-space-3);
  padding: var(--core-space-2) var(--core-space-3);
}

/* ============================================================
   CORE-V6-259 - Acoes da tabela (Components/table_actions)
   ============================================================
   A classe existia no HTML desde o CORE-V6-224 e nunca teve regra
   nenhuma: os botoes eram elementos inline soltos. Enquanto coubessem
   numa linha, ninguem notou - a coluna e estreita e o navegador
   separava por espaco em branco.

   Quando quebram (tela menor, zoom, ou 4+ acoes como na lista de
   Propostas), o espaco em branco NAO vale entre linhas, e um botao
   encostava no de cima. Achado do Everton na tela de Pedidos.

   `gap` resolve os dois eixos de uma vez - e continua valendo se
   amanha uma linha tiver seis acoes. */
.core-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--core-space-1);
  justify-content: flex-end;
}

/* ============================================================
   CORE-V6-259 - Cabecalho da tabela (pedido do Everton)
   ============================================================
   Fundo azul com texto branco em TODA tabela do sistema - a regra
   mora no `Components/data_table`, entao nasce aplicada em todas de
   uma vez.

   O `!important` no `th` existe por um motivo concreto, nao por
   preguica: o `uk-table` do UIkit define `color` no `th` com
   especificidade propria, e sem isso o texto continuaria cinza sobre
   o azul - ilegivel.

   Os tres seletores de link/icone existem porque o cabeçalho tem
   coluna ordenavel: sem eles, o rotulo vira link azul-escuro sobre
   fundo azul, e a seta de ordenacao some. */
.core-table-header-primary thead th {
  background: var(--core-primary);
  color: #fff !important;
}

.core-table-header-primary thead th .core-sort-link,
.core-table-header-primary thead th .core-sort-icon,
.core-table-header-primary thead th .core-sort-icon-active {
  color: #fff;
}

/* O hover precisa de um alvo proprio: `--core-primary` sobre
   `--core-primary` nao mudaria nada. */
.core-table-header-primary thead th .core-sort-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* A divisoria entre colunas do cabecalho, que no fundo claro era uma
   linha cinza, precisa clarear pra continuar visivel sobre o azul. */
.core-table-header-primary.core-table-column-divider thead th:not(:last-child) {
  border-right-color: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   CORE-V6-259 - Nota explicativa fixa (Components/nota_ajuda)
   ============================================================
   Pedido do Everton: bloco fixo, azul claro, explicando o conceito da
   tela com exemplo. Reusa `--core-primary-tint`, o mesmo fundo das
   secoes de modal - a pessoa ja aprendeu que aquele azul claro quer
   dizer "isto aqui e explicacao, nao e dado". */
.core-nota-ajuda {
  display: flex;
  gap: var(--core-space-2);
  align-items: flex-start;
  background-color: var(--core-primary-tint);
  border-left: 3px solid var(--core-primary);
  border-radius: var(--core-radius-sm);
  padding: var(--core-space-2) var(--core-space-3);
  margin-top: var(--core-space-2);
  font-size: var(--core-text-sm);
  line-height: 1.55;
  color: var(--core-ink-soft);
}

.core-nota-ajuda-icone {
  color: var(--core-primary);
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}

/* Os exemplos quebram em coluna no estreito e ficam lado a lado no
   largo - sao pares curtos, e enfileirar economiza altura no topo da
   pagina, que e onde o espaco e mais disputado. */
.core-nota-ajuda-exemplos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--core-space-1) var(--core-space-3);
  margin-top: var(--core-space-1);
}

.core-nota-ajuda-exemplo strong {
  color: var(--core-primary);
}

/* ============================================================
   CORE-V6-259 - Modal de Empresa
   ============================================================
   As duas modais (ver e editar) usavam a largura padrao do UIkit,
   600px. No formulario de edicao, com campos em duas colunas, isso
   deixava tudo espremido - achado do Everton. 600 * 1,3 = 780. */
.core-modal-empresa {
  width: min(90vw, 780px);
}

/* Ficha de leitura (a modal "ver empresa").

   O problema, nas palavras do Everton: "isso parece ate um caminhao de
   japones, tudo igual". O `uk-description-list` do UIkit nao distingue
   rotulo de valor - os dois saem no mesmo cinza, no mesmo peso, e a
   pessoa tem que ler tudo pra achar o que procura.

   O rotulo fica pequeno e em cor de apoio; o VALOR ganha o contraste,
   porque e ele que a pessoa veio ler. O par tambem ganha respiro entre
   si, pra que a leitura em diagonal encontre blocos e nao uma parede. */
.core-ficha-dados dt {
  font-size: var(--core-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--core-primary);
  margin-bottom: 2px;
}

.core-ficha-dados dd {
  font-size: 0.9375rem;
  color: var(--core-ink);
  margin: 0 0 var(--core-space-3) 0;
}

/* CORE-V6-259 - a logo no topo da barra lateral. A imagem se ajusta a
   largura disponivel e nunca estoura a barra; `max-height` evita que
   uma logo alta empurre o menu pra baixo. A barra e escura, entao logo
   com fundo branco precisa respirar - dai o padding e o raio. */
/* O fundo branco passou a ser do BLOCO (`.core-sidebar-brand`), não da
   imagem: assim o retângulo branco tem sempre o mesmo tamanho, em vez
   de acompanhar a proporção da logo carregada. Aqui a imagem só se
   ajusta dentro dele. */
.core-sidebar-logo {
  display: block;
  max-width: 100%;
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   CORE-V6-259 - Filtros de periodo do Painel
   ============================================================
   `gap` no lugar de margem em cada filho: sao botoes, rotulos e campos
   de tamanhos diferentes, e a linha quebra em tela menor - com margem,
   a quebra deixaria espacamento irregular entre as linhas. */
.core-painel-filtros-linha {
  gap: var(--core-space-2);
}

/* Separa os atalhos rapidos do periodo especifico: sao duas formas de
   escolher a mesma coisa, e sem a divisa parecem uma fila so. */
.core-painel-filtros-separador {
  width: 1px;
  align-self: stretch;
  background: var(--core-line);
  margin: 0 var(--core-space-1);
}

.core-painel-filtros-rotulo {
  color: var(--core-ink-soft);
  font-size: var(--core-text-sm);
}

/* Largura suficiente pro formato dd/mm/aaaa do campo de data, sem
   esticar e roubar espaco dos botoes. */
.core-painel-filtros-data {
  width: 9.5rem;
}

/* Numero em coluna alinha pela virgula quando os digitos tem a mesma
   largura - sem isso, a comparacao visual entre linhas do card de
   familia fica torta. */
.core-valor-numerico {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* CORE-V6-259 - a lista de vendas por familia rola dentro do card, com
   a mesma altura do grafico ao lado (pedido do Everton). A altura vem
   do canvas (120px) mais o respiro do topo do plugin de rotulo; sem o
   limite, o card estica conforme o numero de familias e desalinha da
   coluna da esquerda.

   `overflow-y: auto` e nao `scroll`: com poucas familias a barra nem
   aparece, e uma barra de rolagem inerte sugere que ha mais conteudo
   escondido quando nao ha. */
.core-painel-familia-lista {
  max-height: 218px;
  overflow-y: auto;
}

/* CORE-V6-259 - titulo dos cards do Painel (pedido do Everton: "coloca
   tambem um destaque nos titulos desses cards").

   Reusa o tratamento que as secoes de modal ja usam desde o
   CORE-V6-225 - barra na cor da marca, maiusculas espacadas - em vez de
   inventar um terceiro estilo de titulo. Quem ja abriu uma modal do
   sistema reconhece o padrao.

   O corpo fica menor que o da modal: no Painel estes titulos convivem
   com os numeros grandes dos indicadores, e repetir o tamanho da modal
   faria dois pesos disputarem a mesma tela. */
.core-card-titulo {
  border-left: 3px solid var(--core-primary);
  color: var(--core-primary);
  font-weight: var(--core-weight-semibold);
  letter-spacing: 0.05em;
  padding-left: var(--core-space-2);
  text-transform: uppercase;
}

/* O complemento do titulo (o periodo, no card de familia) NAO entra em
   maiusculas nem na cor da marca: e informacao de apoio, e competir com
   o titulo derrotaria o proposito do destaque. */
.core-card-titulo .uk-text-meta {
  color: var(--core-ink-soft);
  letter-spacing: normal;
  text-transform: none;
}

/* CORE-V6-260 - a barra de meta fica VERDE quando o alvo foi batido.
   O `uk-progress` do UIkit tem uma cor so; o verde e o mesmo sinal que
   o badge de percentual ao lado ja usa, entao a barra e o numero contam
   a mesma historia sem o usuario precisar comparar. */
.core-progress-atingida::-webkit-progress-value {
  background-color: var(--core-success);
}

.core-progress-atingida::-moz-progress-bar {
  background-color: var(--core-success);
}

/* CORE-V6-260 - tabela em matriz (Metas): a celula do mes e mesclada
   por rowspan e ganha destaque, porque virou o rotulo de um GRUPO e nao
   mais o de uma linha. Sem isso o mes mesclado parece uma celula comum
   que por acaso ficou alta. */
.core-matriz-grupo {
  font-weight: var(--core-weight-semibold);
  color: var(--core-primary);
  vertical-align: middle;
  background-color: var(--core-primary-tint);
}

/* A divisoria entre grupos e mais forte que a entre linhas do mesmo
   grupo - o `uk-table-divider` do UIkit trata todas igual, e ai a
   matriz vira uma lista continua de novo. */
.core-matriz-inicio-grupo > td {
  border-top: 2px solid var(--core-line);
}

/* CORE-V6-260 - Insights e Atalhos na mesma linha. Os dois blocos
   precisam da MESMA altura pra linha parecer uma linha; sem isso o card
   de insight (com tres linhas de texto) fica mais alto que os atalhos
   (uma linha) e o conjunto desalinha. `uk-height-match` nao serve
   aqui porque os cards estao em grids diferentes. */
/* (a altura minima fixa foi removida: os atalhos passaram a esticar ate
   a altura do card de insight via flex, seja ela qual for) */

/* O atalho, agora mais alto, centraliza icone e texto na vertical e
   empilha os dois - horizontal demais num card de 132px de altura
   deixa o conteudo encostado no topo com um vazio embaixo. */
.core-dashboard-shortcut.core-atalho-vertical {
  flex-direction: column;
  justify-content: center;
  gap: var(--core-space-2);
  font-weight: var(--core-weight-semibold);
}