/* ============================================================
   KWARA — Brand Design Tokens
   Plataforma EDI SaaS · "kũara" (tupi-guarani) = Sol
   Use estas variáveis em qualquer template Jinja/CSS do Kwara.
   ============================================================ */

:root {
  /* -------- Cores-âncora da marca (o gradiente "Kuara Sunset") -------- */
  --kwara-blue:    #2563EB;  /* azul  · identidade tech, cor base   */
  --kwara-purple:  #7C4DF0;  /* roxo                                */
  --kwara-magenta: #D9469F;  /* magenta                             */
  --kwara-amber:   #F59E0B;  /* âmbar · o "calor" do sol            */
  --kwara-ink:     #1E212A;  /* tinta do texto / wordmark           */

  /* -------- Gradiente primário (logo, destaques, headers) -------- */
  --kwara-gradient-sunset: linear-gradient(
    135deg,
    var(--kwara-blue)    0%,
    var(--kwara-purple) 38%,
    var(--kwara-magenta) 68%,
    var(--kwara-amber) 100%
  );

  /* -------- Superfícies e texto (tema claro) — apoio, ajuste à sua UI -------- */
  --kwara-bg:            #F4F7FC;  /* fundo geral (azul bem claro) */
  --kwara-surface:       #FFFFFF;  /* cards                        */
  --kwara-surface-alt:   #EEF2F9;  /* superfície secundária        */
  --kwara-text-primary:  #1E212A;
  --kwara-text-secondary:#5A6472;
  --kwara-text-muted:    #8A93A3;
  --kwara-border:        #E3E8F0;

  /* -------- Bolhas do historico de chamado (Design System, R16) --------
     O AUTOR define cor e borda; nenhuma tela pinta balao a mao. Valores
     do componente TicketMessage do kit. */
  /* Botao de cancelar (kit: variante `cancel`) - so texto em repouso,
     pill cinza-escuro no hover. */
  --kwara-cancel-fg:        #1E212A;
  --kwara-cancel-hover-bg:  #495057;
  --kwara-cancel-hover-fg:  #FFFFFF;
  --kwara-msg-client-bg:      #EEF4FF;
  --kwara-msg-client-border:  #D6E4FF;
  --kwara-msg-team-bg:        rgba(114, 9, 183, 0.06);
  --kwara-msg-team-border:    rgba(114, 9, 183, 0.25);
  --kwara-msg-internal-bg:    rgba(255, 193, 7, 0.18);
  --kwara-msg-internal-border:rgba(255, 193, 7, 0.45);

  /* -------- Estados semânticos (apoio) -------- */
  --kwara-success: #1D9E75;
  --kwara-warning: #F59E0B;
  --kwara-danger:  #E24B4A;
  --kwara-info:    #2563EB;

  /* -------- Tipografia -------- */
  /* Poppins é a fonte da marca (usada no logo). Importe via Google Fonts. */
  --kwara-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --kwara-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Mono (DS tokens/typography.css): codigos e identificadores (R42). */
  --kwara-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --kwara-weight-regular: 400;
  --kwara-weight-medium:  500;  /* peso do wordmark "kwara"        */
  --kwara-weight-bold:    600;

  /* -------- Raio de canto -------- */
  --kwara-radius-sm:  8px;
  --kwara-radius-md:  12px;
  --kwara-radius-lg:  16px;
  --kwara-radius-xl:  20px;
  --kwara-radius-tile: 28%;  /* squircle dos ícones de módulo    */

  /* -------- Sombra sutil (cards) -------- */
  --kwara-shadow-sm: 0 1px 2px rgba(30, 33, 42, 0.06);
  --kwara-shadow-md: 0 6px 20px rgba(30, 33, 42, 0.08);

  /* -------- Tokens do DS usados pelo kwara-ui.css (QA da ADR-111 F1) --------
     Copiados sem edicao de .claude/skills/kwara-design/tokens/: sem eles o
     .kw-alerta e a .kw-modal caiam no fallback claro do kwara-ui.css e
     ficavam ilegiveis nos temas escuros. Gate: test_kwara_ui_tokens_definidos. */
  /* shape.css */
  --kwara-shadow-card: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.05);
  --kwara-glass-surface: rgba(255, 255, 255, 0.65);
  --kwara-glass-surface-strong: rgba(255, 255, 255, 0.9);
  --kwara-glass-border: rgba(255, 255, 255, 0.8);
  --kwara-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* colors.css */
  --kwara-filter-hover-bg: rgba(13, 110, 253, 0.08);
  --kwara-skeleton-base: #E6EBF3;
  --kwara-skeleton-highlight: #F5F7FB;
  /* typography.css */
  --kwara-text-sm: 0.9rem;
  /* gradients.css (icone de cabecalho de pagina por modulo) */
  --kwara-grad-blue: linear-gradient(135deg, #0d6efd, #0dcaf0);
  --kwara-grad-purple: linear-gradient(135deg, #6610f2, #d63384);
  --kwara-grad-orange: linear-gradient(135deg, #fd7e14, #ffc107);
  --kwara-grad-dark: linear-gradient(135deg, #212529, #5d6770);
  --kwara-grad-teal: linear-gradient(135deg, #0ca678, #fad1a5);
  --kwara-grad-support: linear-gradient(135deg, #7209b7, #d6249f);
  --kwara-grad-cadeia: linear-gradient(135deg, #2b6cb0, #38a169);
  --kwara-grad-webedi: linear-gradient(135deg, #0d6efd, #20c997);
}

/* -------- Tema escuro --------
   [data-bs-theme="dark"] (não um [data-theme] genérico) porque é o atributo
   que o projeto já usa de verdade: templates/base.html define
   `data-bs-theme="{{ tema_bs_theme }}"` no <html> (ADR-046) e static/css/
   style.css já segue essa mesma convenção em todo o resto do CSS. */
[data-bs-theme="dark"] {
  --kwara-bg:            #0F1420;
  --kwara-surface:       #161C2A;
  --kwara-surface-alt:   #1E2636;
  --kwara-text-primary:  #F5F7FA;
  --kwara-text-secondary:#A9B2C2;
  --kwara-text-muted:    #6B7688;
  --kwara-border:        #2A3547;

  /* Bolhas do historico de chamado (R16) — variante escura do kit. */
  --kwara-cancel-fg:        #F5F7FA;
  --kwara-cancel-hover-bg:  #ADB5BD;
  --kwara-cancel-hover-fg:  #0F1420;
  --kwara-msg-client-bg:      rgba(37, 99, 235, 0.12);
  --kwara-msg-client-border:  rgba(37, 99, 235, 0.28);
  --kwara-msg-team-bg:        rgba(214, 36, 159, 0.10);
  --kwara-msg-team-border:    rgba(214, 36, 159, 0.30);
  --kwara-msg-internal-bg:    rgba(255, 193, 7, 0.14);
  --kwara-msg-internal-border:rgba(255, 193, 7, 0.40);

  /* Tokens do DS usados pelo kwara-ui.css, variante escura (shape.css e colors.css). */
  --kwara-glass-surface: rgba(22, 28, 42, 0.74);
  --kwara-glass-surface-strong: rgba(30, 38, 54, 0.92);
  --kwara-glass-border: rgba(255, 255, 255, 0.1);
  --kwara-skeleton-base: #1E2636;
  --kwara-skeleton-highlight: #2A3547;
}

/* ============================================================
   Utilitários prontos
   ============================================================ */

/* Fundo com o gradiente da marca */
.kwara-gradient-bg { background: var(--kwara-gradient-sunset); }

/* Texto preenchido com o gradiente (títulos de destaque) */
.kwara-gradient-text {
  background: var(--kwara-gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tile de ícone no estilo dos módulos (squircle + gradiente + glifo branco) */
.kwara-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--kwara-radius-tile);
  background: var(--kwara-gradient-sunset);
  color: #FFFFFF;
}

/* Card padrão */
.kwara-card {
  background: var(--kwara-surface);
  border: 1px solid var(--kwara-border);
  border-radius: var(--kwara-radius-lg);
  box-shadow: var(--kwara-shadow-sm);
}

/* Selo de categoria (R39, componente CategoryTag do Design System,
   .claude/skills/kwara-design/components/selos-de-categoria/CategoryTag.jsx)
   -- diz O QUE o item é (tipo de empresa/canal/papel, Unidade afetada),
   nunca COMO ele está (isso é selo de estado/R14, pill colorida, outra
   classe). Contorno cinza, cantos de 8px, ícone; sem emoji, sem bg-white.
   1º uso no produto: coluna "Unidade" da Auditoria (ADR-111 F1). */
.kw-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--kwara-border);
  background: var(--kwara-surface);
  color: var(--kwara-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.kw-category-tag i {
  font-size: 0.85rem;
  flex-shrink: 0;
}
.kw-category-tag-context {
  font-weight: 500;
  color: var(--kwara-text-muted);
}

/* Estado vazio canônico (R37, decisão do PO 01/10/2026) - macro
   estado_vazio() em templates/_macros_estados_vazios.html. Sempre no
   lugar da lista, com a altura que ela teria (min-height via style
   inline, por instância). 1º uso no produto: tabela de Auditoria
   (ADR-111 F1). */
.kw-estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2.5rem 1.5rem;
  width: 100%;
}
.kw-estado-vazio-compacto {
  padding: 1.5rem 1rem;
}
.kw-estado-vazio-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 0.4rem;
}
.kw-estado-vazio-titulo {
  margin: 0;
  font-weight: 600;
  font-family: var(--kwara-font-display, inherit);
  color: var(--kwara-text-primary);
}
.kw-estado-vazio-texto {
  margin: 0;
  max-width: 420px;
  font-size: var(--kwara-text-sm, 0.85rem);
  line-height: 1.5;
  color: var(--kwara-text-secondary);
}
.kw-estado-vazio-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem;
}

/* Calendario do Kwara (R30, decisao do PO 01/10/2026) - montado por
   static/js/kw_date_range_field.js dentro do mount point que
   render_filtro_data() ja tinha (antes para o Flatpickr). 1o uso no
   produto: filtro de Data/Hora da tela de Auditoria (ADR-111 F1). */
.kw-calendario {
  /* QA M2: empilha presets, De/Ate e a caixa do mes (o mount e `d-flex`,
     que os colocava lado a lado e estourava o cartao: 41px em 320, 6px de
     cada lado em 390). Sem rolagem horizontal. */
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.kw-calendario > * { min-width: 0; max-width: 100%; }
@media (min-width: 768px) {
  /* popover do desktop: largura propria (sem o 100% do celular). */
  .kw-calendario { min-width: 280px; }
}
.kw-calendario-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 4px;
}
.kw-calendario-chip {
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
  border-radius: 50px;
  border: 1px solid var(--kwara-border);
  background: var(--kwara-surface);
  color: var(--kwara-text-primary);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}
.kw-calendario-chip:hover {
  border-color: #0d6efd;
  color: #0d6efd;
}
.kw-calendario-gatilhos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.kw-calendario-gatilho {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--kwara-border);
  background: var(--kwara-surface);
  cursor: pointer;
}
.kw-calendario-gatilho.ativo {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}
.kw-calendario-gatilho-rotulo {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kwara-text-secondary);
  display: block;
}
.kw-calendario-gatilho.ativo .kw-calendario-gatilho-rotulo {
  color: #0d6efd;
}
.kw-calendario-gatilho-valor {
  font-size: 0.9rem;
  color: var(--kwara-text-primary);
  display: block;
}
.kw-calendario-seta {
  color: var(--kwara-text-muted);
  flex-shrink: 0;
}
.kw-calendario-caixa {
  background: var(--kwara-surface);
  border: 1px solid var(--kwara-border);
  border-radius: 16px;
  padding: 6px 10px 10px;
  margin-top: 10px;
}
.kw-calendario-nav {
  display: flex;
  align-items: center;
}
.kw-calendario-seta-mes {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--kwara-text-primary);
  font-size: 0.95rem;
}
.kw-calendario-seta-mes:hover {
  background: var(--kwara-surface-alt);
}
.kw-calendario-mes-atual {
  flex: 1;
  text-align: center;
  font-size: 0.88rem;
  text-transform: capitalize;
}
.kw-calendario-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--kwara-text-muted);
  margin: 4px 0;
}
.kw-calendario-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 2px;
}
.kw-calendario-celula {
  display: flex;
  justify-content: center;
  background: transparent;
  border-radius: 0;
}
.kw-calendario-meio,
.kw-calendario-ponta-ini,
.kw-calendario-ponta-fim {
  background: rgba(13, 110, 253, 0.1);
}
.kw-calendario-ponta-ini {
  border-radius: 20px 0 0 20px;
}
.kw-calendario-ponta-fim {
  border-radius: 0 20px 20px 0;
}
.kw-calendario-celula button {
  width: 100%;
  max-width: 38px;
  aspect-ratio: 1;
  height: auto;
  padding: 0;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--kwara-text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.kw-calendario-celula button.kw-calendario-hoje {
  border-color: #0d6efd;
}
.kw-calendario-celula button.kw-calendario-selecionado {
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
}
.kw-calendario-dica {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--kwara-text-secondary);
  text-align: center;
}

/* Folha inferior de filtros (R27, decisao do PO 01/10/2026, revisada no
   mesmo dia) - montada por static/js/kw_filter_sheet.js. So visivel no
   celular (mesmo breakpoint do offcanvas generico, 767.98px); no
   desktop o circulo nunca aparece e o script nao move nada (os
   .filtro-portal continuam nas colunas, dropdowns normais). 1o uso no
   produto: tela de Auditoria (ADR-111 F1). */
.kw-filtro-circulo {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1070;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--kwara-border);
  background: var(--kwara-surface);
  color: var(--kwara-text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.kw-filtro-circulo-contador {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #0d6efd;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--kwara-surface);
}
/* Camada aberta esconde o circulo (R24): outro modal Bootstrap ja em
   cima, ou a propria folha aberta. */
body.modal-open .kw-filtro-circulo,
body.kw-filter-sheet-aberta .kw-filtro-circulo {
  display: none !important;
}
@media (max-width: 767.98px) {
  .kw-filtro-circulo { display: inline-flex; }
}

.kw-filter-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(15, 20, 32, 0.45);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.2s var(--kwara-ease-out, ease);
}
.kw-filter-sheet-overlay.aberta {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .kw-filter-sheet-overlay { transition: none; }
}
.kw-filter-sheet {
  width: 100%;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  background: var(--kwara-surface);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(16px);
  transition: transform 0.25s var(--kwara-ease-out, ease);
}
.kw-filter-sheet-overlay.aberta .kw-filter-sheet {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .kw-filter-sheet { transition: none; transform: none; }
}
.kw-filter-sheet-handle-area {
  flex-shrink: 0;
  touch-action: none;
  cursor: grab;
}
.kw-filter-sheet-pegador {
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--kwara-border);
  margin: 8px auto 0;
}
.kw-filter-sheet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 20px;
}
.kw-filter-sheet-header b {
  min-width: 0;
  font-family: var(--kwara-font-display, inherit);
  font-weight: 600;
  font-size: 1.05rem;
}
.kw-filter-sheet-fechar {
  margin-left: auto;
  flex-shrink: 0; /* QA: o X (44px) nunca sai da tela, nem em 320px */
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #dc3545;
  font-size: 1rem;
  cursor: pointer;
}
.kw-filter-sheet-body {
  overflow-y: auto;
  padding: 4px 16px 12px;
  flex: 1;
  background: var(--kwara-bg);
}
.kw-filter-sheet-secao {
  margin-bottom: 14px;
}
.kw-filter-sheet-secao-titulo {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kwara-text-secondary);
  margin-bottom: 6px;
}
.kw-filter-sheet-footer {
  flex-shrink: 0;
  padding: 10px 16px 16px;
  border-top: 1px solid var(--kwara-border);
  background: var(--kwara-surface);
}
.kw-filter-sheet-recap {
  margin-bottom: 10px;
}
.kw-filter-sheet-recap-titulo {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kwara-text-secondary);
  margin-bottom: 6px;
}
.kw-filter-sheet-recap-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.kw-filter-sheet-recap-pills .badge {
  flex-shrink: 0;
}
.kw-filter-sheet-footer .btn {
  min-height: 48px;
}

/* Dentro da folha (R27): "nunca dropdown dentro da folha" - a lista de
   opcoes de um filtro multivalor (render_filtro_select multiplo=true)
   fica SEMPRE expandida (nunca atras de um 2o toggle); o nome do filtro
   aparece UMA vez so, no titulo da secao (h6). */
.kw-dentro-da-folha label.form-label {
  /* R27 (QA): o titulo da secao (h6, vindo de data-filtro-label) JA diz o
     nome do filtro; o <label> do macro (visivel so no desktop) repetia o
     mesmo texto. Uma vez so, em cima. */
  display: none !important;
}
/* Valor longo de opcao (ex.: nome de Unidade) na folha: reticencias; o valor
   completo fica no title/aria do botao (macro render_filtro_select). */
.kw-dentro-da-folha .dropdown-item { min-width: 0; overflow: hidden; }
.kw-dentro-da-folha .dropdown-item .kw-filtro-rotulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kw-dentro-da-folha [data-kw-dropdown-portal] > button[data-bs-toggle="dropdown"] {
  display: none !important;
}
.kw-dentro-da-folha [data-kw-dropdown-portal] > ul.dropdown-menu {
  position: static !important;
  display: block !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-height: none !important;
}

/* R45 (ADR-111 Adendo, 03/10/2026): troca de vista dentro da folha "Menu"
   do celular (Menu <-> "Módulos disponíveis", kw_navbar_mobile.js) -
   mesmas animações kwaraEntraDireita/kwaraEntraEsquerda do Design System
   (navbar-celular.card.html), nomeadas em kebab-case pra bater com o
   resto deste arquivo. */
@keyframes kwara-entra-direita {
  from { transform: translateX(36%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes kwara-entra-esquerda {
  from { transform: translateX(-36%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.kwara-entra-direita, .kwara-entra-esquerda {
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}
.kwara-entra-direita { animation-name: kwara-entra-direita; }
.kwara-entra-esquerda { animation-name: kwara-entra-esquerda; }
@media (prefers-reduced-motion: reduce) {
  .kwara-entra-direita, .kwara-entra-esquerda { animation: none !important; }
}

/* R46 / M4 (QA m4): menus glass (Ajuda e suporte, sino, menu do usuario,
   seletor de modulo...) entram com fade + deslocamento curto. Usa a
   propriedade `translate` (separada de `transform`) porque o Popper
   posiciona o menu por `transform`; animar `transform` brigaria com ele.
   "Reduzir movimento" desliga. */
@keyframes kwara-menu-entra {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
.dropdown-menu.dropdown-glass.show,
.dropdown-menu.kw-menu-fade.show {
  /* `backwards` (nao `both`): `forwards` deixaria `translate: 0` permanente,
     e qualquer translate/transform vira bloco de contencao pra filhos fixed. */
  animation: kwara-menu-entra .18s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu.dropdown-glass.show,
  .dropdown-menu.kw-menu-fade.show { animation: none; }
}

/* kwara-tokens-estado.css · tokens de estado e de categoria para o PRODUTO (item 17).
   Colar no fim de static/css/kwara-tokens.css. Fonte: tokens/colors.css do design
   system; mudou lá, copie de novo. Os 4 temas: Amanhecer e Meio-dia usam :root;
   Entardecer e Meia-noite ligam data-bs-theme="dark" no <html> (ADR-046).

   --kwara-fb-*   ícone e círculo de feedback (passo da trilha, linha do tempo). Iguais nos 4 temas, ≥ 3:1 como ícone.
   --kwara-text-* texto e ícone pequeno de estado (selo, erro de campo). ≥ 4,5:1 sobre superfície, alternativa e fundo tingido.
   --kwara-cat-*  categoria (sino, fonte da linha do tempo). ≥ 3:1 do ícone sobre o círculo -bg.
   --kwara-serie-* séries de gráfico (R77), lidas pelo kw_grafico.js. ≥ 3:1 sobre superfície e alternativa.
   Nunca o hex no template: test_cores_fixas.py falha com os hex de estado e de categoria fora deste arquivo. */
:root {
  /* Firme × previsão da Inteligência (R57) */
  --kwara-firme-bg: rgba(13, 110, 253, 0.08);
  --kwara-firme-borda: #0d6efd;
  --kwara-alta: #0a58ca;
  --kwara-baixa: #b35400;
  --kwara-fb-success: #198754;
  --kwara-fb-danger: #dc3545;
  --kwara-fb-warning: #fd7e14;
  --kwara-fb-info: #0d6efd;
  --kwara-fb-success-bg: rgba(25, 135, 84, 0.15);
  --kwara-fb-danger-bg: rgba(220, 53, 69, 0.15);
  --kwara-fb-warning-bg: rgba(253, 126, 20, 0.15);
  --kwara-fb-info-bg: rgba(13, 110, 253, 0.15);

  --kwara-text-danger: #b02a37;
  --kwara-text-warning: #856404;
  --kwara-text-success: #146c43;
  --kwara-text-info: #0a58ca;
  --kwara-text-cyan: #087990;
  --kwara-meter-cyan: #0dcaf0;
  --kwara-link: #2563EB;
  --kwara-link-hover: #7848EC;

  --kwara-cat-programacao: #0d6efd;
  --kwara-cat-programacao-bg: rgba(13, 110, 253, 0.10);
  --kwara-cat-erro: #dc3545;
  --kwara-cat-erro-bg: rgba(220, 53, 69, 0.10);
  --kwara-cat-chamado: #7209b7;
  --kwara-cat-chamado-bg: rgba(114, 9, 183, 0.10);
  --kwara-cat-acesso: #b35400;
  --kwara-cat-acesso-bg: rgba(179, 84, 0, 0.12);
  --kwara-cat-retido: #9a6700;
  --kwara-cat-retido-bg: rgba(154, 103, 0, 0.12);
  /* Relógio da sessão (R42): iguais nos 4 temas. */
  --kwara-sessao-aviso: #ffc107;
  --kwara-sessao-aviso-texto: #212529;
  --kwara-sessao-critico: #dc3545;
  --kwara-cat-operacao: #198754;
  --kwara-cat-operacao-bg: rgba(25, 135, 84, 0.12);
  --kwara-serie-1: #7209b7;
  --kwara-serie-2: #0d6efd;
  --kwara-serie-3: #b35400;
  --kwara-serie-4: #198754;
  --kwara-serie-5: #c2185b;
  --kwara-serie-6: #0b7285;
  --kwara-grafico-eixo: var(--kwara-text-secondary);
  --kwara-grafico-grade: var(--kwara-border);
  --kwara-grafico-tooltip-bg: var(--kwara-surface);
  --kwara-grafico-tooltip-borda: var(--kwara-border);
  --kwara-grafico-tooltip-texto: var(--kwara-text-primary);
}
[data-bs-theme="dark"] {
  --kwara-firme-bg: rgba(110, 168, 254, 0.12);
  --kwara-firme-borda: #6ea8fe;
  --kwara-alta: #8bb9fe;
  --kwara-baixa: #fd9a4a;
  --kwara-text-danger: #f1707b;
  --kwara-text-warning: #f5c451;
  --kwara-text-success: #5cd69a;
  --kwara-text-info: #8bb9fe;
  --kwara-text-cyan: #6edff6;
  --kwara-link: #8bb9fe;
  --kwara-link-hover: #b79cff;

  --kwara-cat-programacao: #6ea8fe;
  --kwara-cat-programacao-bg: rgba(110, 168, 254, 0.16);
  --kwara-cat-erro: #f1707b;
  --kwara-cat-erro-bg: rgba(241, 112, 123, 0.16);
  --kwara-cat-chamado: #c084fc;
  --kwara-cat-chamado-bg: rgba(192, 132, 252, 0.16);
  --kwara-cat-acesso: #fd7e14;
  --kwara-cat-acesso-bg: rgba(253, 126, 20, 0.16);
  --kwara-cat-retido: #f5c451;
  /* Feedback no escuro (item F) */
  --kwara-fb-success: #3fbf7f;
  --kwara-fb-danger: #f1707b;
  --kwara-fb-warning: #fd9a4a;
  --kwara-fb-info: #6ea8fe;
  --kwara-fb-success-bg: rgba(63, 191, 127, 0.16);
  --kwara-fb-danger-bg: rgba(241, 112, 123, 0.16);
  --kwara-fb-warning-bg: rgba(253, 154, 74, 0.16);
  --kwara-fb-info-bg: rgba(110, 168, 254, 0.16);
  --kwara-cat-retido-bg: rgba(245, 196, 81, 0.16);
  --kwara-cat-operacao: #3fbf7f;
  --kwara-cat-operacao-bg: rgba(63, 191, 127, 0.16);
  --kwara-serie-1: #c77dff;
  --kwara-serie-2: #6ea8fe;
  --kwara-serie-3: #fd9a4a;
  --kwara-serie-4: #3fbf7f;
  --kwara-serie-5: #f06595;
  --kwara-serie-6: #3bc9db;
}