/* ============================================================================
   TOKENS — Design System Benel
   ============================================================================
   Carregue SEMPRE nesta ordem, no <head>:

     1. Bootstrap 5.3 (CDN)
     2. bootstrap-icons (CDN)
     3. tokens.css                    <- este arquivo
     4. partials/theme_vars.php       <- sobrescreve a marca conforme a empresa
     5. css/dark-mode.css
     6. assets/css/dashboard-ui.css
     7. CSS específico da página

   REGRA: nenhum valor de cor, espaçamento, raio ou sombra escrito solto no CSS
   de componente. Se precisar de um valor novo, crie o token aqui.
   ============================================================================ */

:root {
  /* ================================================================== MARCA
     A paleta vem do logo. Contando os pixels opacos de assets/images/logo.png,
     65% deles são #15004D — que em HSL é hsl(256, 100%, 15%). Gerando uma
     rampa limpa nesse matiz, o passo 900 cai em #14004D: o logo É o passo 900
     da própria escala. Todo o resto abaixo é derivado disso.

     Os números em cada linha são a razão de contraste contra branco (WCAG).
     4.5:1 é o mínimo para texto normal; 3:1 para texto grande e componentes. */
  --brand-50:  #f5f3fc;
  --brand-100: #ebe5fa;
  --brand-200: #d2c5f7;
  --brand-300: #b39df1;  /*  2.33:1 — só decorativo / borda            */
  --brand-400: #8c6ce5;  /*  3.89:1 — texto grande, ícone              */
  --brand-500: #6b43db;  /*  6.09:1 — link no dark mode                */
  --brand-600: #4e21ca;  /*  8.77:1 — AÇÃO: botão, link, foco          */
  --brand-700: #3a12a5;  /* 11.60:1 — hover da ação                    */
  --brand-800: #26077e;  /* 14.85:1 — active / pressed                 */
  --brand-900: #15004d;  /* 18.44:1 — ESTRUTURA: sidebar, topbar (logo)*/
  --brand-950: #0e0033;  /* 19.69:1 — sidebar no dark mode             */

  /* Os dois papéis da marca. theme_vars.php sobrescreve ambos por empresa,
     lendo empresa.cor_primaria / cor_secundaria do banco.

       primary   = ESTRUTURA. Grandes áreas cromáticas: sidebar, topbar.
                   Escura de propósito — é moldura, não chama atenção.
       secondary = INTERAÇÃO. O que o usuário clica: botão, link, anel de foco.

     Separar os dois é o que permite a sidebar ser #15004D (quase preta, ótima
     como moldura) sem que o botão primário fique quase preto também. */
  --brand-primary: #15004d;
  --brand-secondary: #4e21ca;
  --brand-surface-light: #ffffff;

  /* Alias legível: no CSS de componente, "interactive" diz o que a cor faz. */
  --brand-interactive: var(--brand-secondary);

  /* --------------------------------------------------------- ACENTOS
     Verde e amarelo da bandeira, que aparecem no logo.

     ATENÇÃO ao amarelo: 1.33:1 contra branco — ilegível como texto em fundo
     claro. Contra o navy da marca são 13.84:1. Por isso ele existe só para
     usar SOBRE a sidebar (barra do item ativo). Nunca como texto no branco,
     nunca como fundo de botão. Para "sucesso" em texto, use --color-success. */
  --accent-yellow: #fedf00;  /* SOMENTE sobre --brand-900 / sidebar */
  --accent-green:  #009b3a;  /* 3.65:1 — ícone e borda, não texto   */

  /* ------------------------------------------------------------- NEUTROS
     Escala slate. */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  /* ------------------------------------------------------------ SEMÂNTICA
     Estado, não decoração. Um botão "salvar" usa --color-primary; um badge
     "ativo" usa --color-success. Todos verificados >= 4.5:1 contra branco,
     porque estas cores carregam TEXTO. */
  --color-primary: var(--brand-interactive);
  --color-secondary: var(--gray-600);
  --color-success: #047a2e;  /* 5.49:1 — verde da bandeira escurecido p/ texto */
  --color-warning: #8a6100;  /* 5.54:1 */
  --color-danger:  #a5162c;  /* 7.63:1 */
  --color-info:    #0b6bb8;  /* 5.51:1 */

  /* Pares para dark mode: no escuro a relação inverte e a cor precisa clarear. */
  --color-success-dark: #4ade80;
  --color-warning-dark: #fbbf24;
  --color-danger-dark:  #f87171;
  --color-info-dark:    #60a5fa;

  /* Semáforo de progresso */
  --progress-low: var(--color-danger);
  --progress-mid: var(--color-warning);
  --progress-high: var(--color-success);

  /* ------------------------------------------------------------------ FAROL
     Posição de preço na comparação: 1º menor é verde, 2º amarelo, 3º em diante
     vermelho. Herdado do sistema legado, onde a cor era escrita inline no JS.
     Diferente da semântica acima, aqui o par é fundo + texto sobre esse fundo,
     porque o farol pinta a célula inteira. Contraste do texto sobre o próprio
     fundo: 10.5:1, 6.8:1 e 7.3:1. */
  --farol-1-bg: #d0e8d8;
  --farol-1-fg: #0a4a1e;
  --farol-2-bg: #fff9c4;
  --farol-2-fg: #7a5c00;
  --farol-3-bg: #fdecea;
  --farol-3-fg: #a0200e;
  /* Contorno do ganhador. Fica por cima da cor de posição em vez de substituí-la:
     é assim que se enxerga "escolhi o terceiro colocado" num override. */
  --farol-ganhador: #0a4a1e;

  /* ---------------------------------------------------- ACENTO POR MÓDULO
     Cor de ícone por módulo do menu. Ao criar um módulo, acrescente um token
     aqui em vez de escrever o hex na folha do componente. */
  --module-1: #047a2e; /* verde   */
  --module-2: #0b6bb8; /* azul    */
  --module-3: #4e21ca; /* roxo    */
  --module-4: #0e7490; /* ciano   */
  --module-5: #0f766e; /* teal    */
  --module-6: #c2410c; /* laranja */
  --module-7: #be185d; /* rosa    */

  /* ---------------------------------------------------------- SUPERFÍCIES
     Valores de light mode. O bloco .dark-mode troca os mesmos nomes, então
     componente nenhum precisa saber em que tema está. */
  /* Os *-light vêm de theme_vars.php (cor escolhida pela empresa). Custom
     property resolve na hora do uso, então funciona mesmo aquele arquivo
     carregando depois deste. O segundo valor é o padrão sem empresa. */
  --page-bg: var(--page-bg-light, #f6f5fb);   /* leve tintura da marca, não cinza puro */
  --surface-bg: var(--surface-bg-light, #ffffff);
  --surface-muted: var(--surface-muted-light, #f1f5f9);
  --surface-raised: var(--surface-raised-light, #ffffff);
  --border-color: var(--gray-200);
  --border-strong: var(--gray-300);
  --text-primary: var(--gray-800);
  --text-secondary: var(--gray-600);
  /* Não é --gray-500: sobre o fundo tingido da página o slate-500 dá 4.40:1,
     logo abaixo do mínimo de 4.5:1 da WCAG AA. Este dá 4.79:1. Texto "mudo"
     ainda é texto — metadado, contagem, dica — e precisa ser legível. */
  --text-muted: #5f6e85;
  --text-on-brand: #ffffff;

  /* ------------------------------------------------------------- SIDEBAR */
  --sidebar-bg: var(--brand-primary);
  --sidebar-text: rgba(255, 255, 255, 0.95);
  --sidebar-text-muted: rgba(255, 255, 255, 0.72);
  --sidebar-active-bg: rgba(255, 255, 255, 0.12);
  --sidebar-active-bar: var(--accent-yellow); /* 13.84:1 sobre o navy */
  --sidebar-group-label: rgba(255, 255, 255, 0.5);
  --sidebar-width: 72px;
  --sidebar-width-expanded: 248px;
  --topbar-height: 52px;

  /* ------------------------------------------------------------ ESPAÇAMENTO
     Escala de 4px. Use os tokens; não escreva 13px porque "ficou melhor". */
  --space-0: 0;
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem;  /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */

  /* ------------------------------------------------------------------ RAIO */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* botões e inputs */
  --radius-lg: 12px;  /* painéis         */
  --radius-xl: 14px;  /* cards           */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------------- SOMBRA
     Três níveis de elevação e um anel de foco. Nada além disso.
     A sombra é tingida de marca em vez de preto puro: sombra neutra sobre
     fundo tingido parece suja. */
  --shadow-sm: 0 1px 3px rgba(21, 0, 77, 0.06), 0 1px 2px rgba(21, 0, 77, 0.04);
  --shadow-md: 0 4px 12px rgba(21, 0, 77, 0.08);
  --shadow-lg: 0 12px 32px rgba(21, 0, 77, 0.14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-interactive) 30%, transparent);
  --shadow-drawer: 4px 0 24px rgba(21, 0, 77, 0.18);
  --card-shadow: var(--shadow-sm);

  /* ------------------------------------------------------------ TIPOGRAFIA
     Corpo em 14px. A escala anterior era 13px "deliberadamente densa"; 14px
     é o padrão de leitura confortável sem custar densidade relevante nas
     tabelas — o cabeçalho segue em 11px, que é o que define a altura da linha.
     Sem webfont na área interna: menos requisição, zero CLS. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11px — metadado                       */
  --text-xs: 0.75rem;    /* 12px — cabeçalho de tabela, maiúsculas */
  --text-sm: 0.8125rem;  /* 13px — auxiliar                       */
  --text-base: 0.875rem; /* 14px — CORPO PADRÃO                   */
  --text-md: 0.9375rem;  /* 15px — ênfase                         */
  --text-lg: 1.0625rem;  /* 17px                                  */
  --text-xl: 1.25rem;    /* 20px — título de página               */
  --text-2xl: 1.75rem;   /* 28px — valor de card de estatística   */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --tracking-tight: -0.011em;  /* títulos         */
  --tracking-tighter: -0.02em; /* números grandes */
  --tracking-wide: 0.05em;     /* rótulos em caixa alta */

  /* ---------------------------------------------------------------- CAMADAS
     Use os tokens; um z-index de 99999 no meio do CSS quebra modal e dropdown. */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 999;
  --z-sidebar: 1000;
  --z-dropdown: 1010;
  --z-modal: 1050;
  --z-toast: 1100;

  /* -------------------------------------------------------------- MOVIMENTO
     Movimento comunica causa: o que aparece por ação sua entra rápido; o que
     o sistema decide sozinho entra devagar. Tudo abaixo de 300ms — animação
     longa em ferramenta de trabalho vira espera.
     Todo movimento é desligado no bloco prefers-reduced-motion mais abaixo. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-instant: 90ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 300ms;

  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* Skeleton: o brilho precisa ser visível no claro e no escuro. */
  --skeleton-bg: var(--gray-200);
  --skeleton-shine: rgba(255, 255, 255, 0.65);
}

/* ---------------------------------------------------------------------------
   DARK MODE
   Só troca superfícies, texto e o brilho do skeleton. Marca, espaçamento,
   raio e tipografia não mudam.
   --------------------------------------------------------------------------- */
.dark-mode {
  --page-bg: var(--page-bg-dark, #0d0722);
  --surface-bg: var(--surface-bg-dark, #171233);
  --surface-muted: var(--surface-muted-dark, #1f1940);
  --surface-raised: var(--surface-raised-dark, #211a45);
  --border-color: #302a52;
  --border-strong: #423b66;
  --text-primary: #ece9f5;
  --text-secondary: #b6b0cc;
  --text-muted: #8f88a8;

  --sidebar-bg: var(--brand-950);
  --sidebar-active-bg: rgba(255, 255, 255, 0.1);

  /* No escuro o link precisa clarear para manter contraste com a superfície. */
  --brand-interactive: var(--brand-400);
  --color-success: var(--color-success-dark);
  --color-warning: var(--color-warning-dark);
  --color-danger: var(--color-danger-dark);
  --color-info: var(--color-info-dark);

  /* Farol no escuro: o fundo tênue vira um tom escuro da mesma matiz e o texto
     clareia, senão verde-claro sobre superfície escura fica ilegível. */
  --farol-1-bg: #10331f;
  --farol-1-fg: #4ade80;
  --farol-2-bg: #3a2f05;
  --farol-2-fg: #fbbf24;
  --farol-3-bg: #3a1218;
  --farol-3-fg: #f87171;
  --farol-ganhador: #4ade80;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  --skeleton-bg: #241d49;
  --skeleton-shine: rgba(255, 255, 255, 0.07);
}

/* ---------------------------------------------------------------------------
   BREAKPOINTS
   Os mesmos do Bootstrap 5. CSS não permite variável em @media, então estes
   são os valores canônicos:
       sm  576px      md  768px      lg  992px      xl 1200px      xxl 1400px
   Use exatamente estes. Para "abaixo de", use max-width: 767.98px.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

a {
  color: var(--brand-interactive);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--brand-700); }

/* Foco visível em tudo que recebe teclado — requisito de acessibilidade e
   condição para o sistema ser utilizável sem mouse. */
:focus-visible {
  outline: 2px solid var(--brand-interactive);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------- BOOTSTRAP
   Rethematiza o Bootstrap pelas variáveis DELE, nunca com !important. */
.btn {
  --bs-btn-font-size: var(--text-base);
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-font-weight: var(--weight-medium);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--duration-instant) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--brand-interactive);
  --bs-btn-border-color: var(--brand-interactive);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand-300);
  --bs-btn-disabled-border-color: var(--brand-300);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-interactive);
  --bs-btn-border-color: var(--brand-300);
  --bs-btn-hover-bg: var(--brand-interactive);
  --bs-btn-hover-border-color: var(--brand-interactive);
  --bs-btn-active-bg: var(--brand-700);
}
.btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); }
.btn-danger  { --bs-btn-bg: var(--color-danger);  --bs-btn-border-color: var(--color-danger); }

.form-control, .form-select {
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  border-color: var(--border-strong);
  background-color: var(--surface-bg);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-interactive);
  box-shadow: var(--shadow-focus);
  background-color: var(--surface-bg);
  color: var(--text-primary);
}
.form-label { font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.form-text  { font-size: var(--text-xs); color: var(--text-secondary); }

.card {
  --bs-card-bg: var(--surface-bg);
  --bs-card-border-color: var(--border-color);
  --bs-card-border-radius: var(--radius-xl);
  --bs-card-color: var(--text-primary);
}

/* Respeita quem pediu menos movimento no sistema operacional. Obrigatório:
   movimento pode causar enjoo e desorientação reais. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   UTILITÁRIOS DO DESIGN SYSTEM
   Componentes reutilizáveis que não existem no Bootstrap.
   --------------------------------------------------------------------------- */

/* ------------------------------------------- Card de estatística */
.ds-stat-card {
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ds-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ds-stat-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}
.ds-stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
}
.ds-stat-value--success { color: var(--color-success); }
.ds-stat-value--danger  { color: var(--color-danger); }
.ds-stat-value--warning { color: var(--color-warning); }

.ds-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------ Tabela */
/* Toda tabela larga rola no PRÓPRIO contêiner. A página nunca rola na
   horizontal — regra de docs/ui-ux.md. */
.ds-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  margin-bottom: 0;
}
.ds-table thead th {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  padding: var(--space-3);
  white-space: nowrap;
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-bg));
  border: 0;
  position: sticky;
  top: 0;
  z-index: var(--z-base);
}
.ds-table tbody td {
  padding: var(--space-3);
  vertical-align: middle;
  border-color: var(--border-color);
  color: var(--text-primary);
}
.ds-table tbody tr {
  transition: background-color var(--transition-fast);
}
.ds-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-interactive) 5%, transparent);
}
/* Números alinhados à direita e com dígitos de largura fixa: coluna de preço
   só é comparável de relance se os dígitos alinharem verticalmente. */
.ds-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------- Faixa de status no card */
/* Barra fina no topo do card de KPI, na cor do estado que ele conta. Sem ela os
   quatro cards ficam idênticos e é preciso ler cada rótulo para se localizar. */
/* Dois nomes de classe de propósito: dashboard-ui.css declara `border` (atalho)
   em .dashboard-card e é carregada depois desta folha, então um seletor de uma
   classe só perderia por ordem de cascata. */
.dashboard-card.dashboard-card--secondary,
.dashboard-card.dashboard-card--warning,
.dashboard-card.dashboard-card--success,
.dashboard-card.dashboard-card--danger,
.dashboard-card.dashboard-card--primary {
  border-top-width: 3px;
  border-top-style: solid;
}
.dashboard-card.dashboard-card--secondary { border-top-color: var(--gray-400); }
.dashboard-card.dashboard-card--warning   { border-top-color: var(--color-warning); }
.dashboard-card.dashboard-card--success   { border-top-color: var(--color-success); }
.dashboard-card.dashboard-card--danger    { border-top-color: var(--color-danger); }
.dashboard-card.dashboard-card--primary   { border-top-color: var(--brand-interactive); }

/* --------------------------------------------------------- Farol */
/* Pinta a célula de preço pela posição na comparação daquele item. Aplicado no
   <td> (não no <input>) para que o rótulo "herda X" da cascata acompanhe a cor.
   O !important é necessário: css/dark-mode.css força background-color em todo
   td de tabela, e sem ele o farol some no tema escuro. */
.farol-1,
.farol-2,
.farol-3 {
  transition: background-color var(--transition-fast);
}
/* Estas regras só vencem porque css/dark-mode.css passou a excluir as células
   de farol das suas próprias regras de td (ver o :not([class*="farol-"]) lá).
   Antes o farol saía invisível: apenas o `outline` aparecia, porque era a única
   propriedade que aquela folha não declarava. */
.farol-1 { background-color: var(--farol-1-bg) !important; color: var(--farol-1-fg) !important; }
.farol-2 { background-color: var(--farol-2-bg) !important; color: var(--farol-2-fg) !important; }
.farol-3 { background-color: var(--farol-3-bg) !important; color: var(--farol-3-fg) !important; }

/* O campo editável dentro da célula fica transparente para deixar o farol passar,
   mas volta a ter fundo próprio no foco, para não se perder quem está digitando. */
.farol-1 .form-control,
.farol-2 .form-control,
.farol-3 .form-control {
  background-color: transparent;
  color: inherit;
  font-weight: var(--weight-semibold);
}
.farol-1 .form-control:focus,
.farol-2 .form-control:focus,
.farol-3 .form-control:focus {
  background-color: var(--surface-bg);
  color: var(--text-primary);
}

/* Ganhador: contorno por cima da cor de posição, nunca no lugar dela. É o que
   torna visível um override no 2º ou 3º colocado. */
.farol-ganhador {
  outline: 2.5px solid var(--farol-ganhador);
  outline-offset: -2px;
}

/* Legenda das três cores. Sem ela o usuário tem de deduzir o código. */
.farol-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-2xs);
}
.farol-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill, 999px);
  font-weight: var(--weight-semibold);
}
.farol-chip--1 { background: var(--farol-1-bg); color: var(--farol-1-fg); }
.farol-chip--2 { background: var(--farol-2-bg); color: var(--farol-2-fg); }
.farol-chip--3 { background: var(--farol-3-bg); color: var(--farol-3-fg); }
.farol-chip--unico { background: var(--surface-muted); color: var(--text-secondary); border: 1px dashed var(--border-strong); }

/* Preço único: não houve disputa, então não há posição a informar. Fica sem cor
   de farol e com contorno tracejado — ausência de comparação é uma informação,
   e pintar de verde diria "melhor preço" sobre uma cotação que ninguém contestou. */
.farol-unico {
  background-color: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
  outline: 1px dashed var(--border-strong);
  outline-offset: -2px;
}
.farol-unico .form-control {
  background-color: transparent;
  color: inherit;
}
.farol-unico .form-control:focus {
  background-color: var(--surface-bg);
  color: var(--text-primary);
}

/* Daltonismo e impressão em preto e branco: a cor sozinha não pode ser o único
   canal de informação (docs/ui-ux.md). O numeral da posição acompanha. */
.farol-pos {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  opacity: 0.75;
}

/* ------------------------------------------------- Estado vazio */
.ds-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--text-secondary);
}
.ds-empty__icon {
  font-size: 2.4rem;
  opacity: 0.35;
  display: block;
  margin-bottom: var(--space-2);
  color: var(--brand-interactive);
}
.ds-empty__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}
.ds-empty__hint {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* -------------------------------------------- Carregando / skeleton */
.ds-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40vh;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Skeleton em vez de spinner onde a FORMA do conteúdo é previsível (tabela,
   card). Ele responde "o que está vindo", não só "espere" — e evita o salto
   de layout quando o conteúdo chega. Spinner fica para espera de forma
   desconhecida. */
.ds-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-bg);
  border-radius: var(--radius-sm);
  display: inline-block;
  width: 100%;
  height: 1em;
  vertical-align: middle;
}
.ds-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: ds-shimmer 1.4s infinite;
}
@keyframes ds-shimmer {
  100% { transform: translateX(100%); }
}
.ds-skeleton--text  { height: 0.8em; border-radius: var(--radius-xs); }
.ds-skeleton--sm    { width: 40%; }
.ds-skeleton--md    { width: 65%; }
.ds-skeleton--pill  { height: 1.4em; border-radius: var(--radius-pill); width: 72px; }
.ds-skeleton--circle{ width: 32px; height: 32px; border-radius: var(--radius-circle); }

/* prefers-reduced-motion já zera a animação acima; o bloco fica visível como
   uma barra estática, que continua comunicando "carregando". */

/* --------------------------------------- Entrada de conteúdo */
/* Fade curto ao trocar o conteúdo de uma listagem: sinaliza que algo mudou
   sem piscar a tela. */
.ds-fade-in {
  animation: ds-fade-in var(--duration-base) var(--ease-out);
}
@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}