/* ==========================================================================
   Bearl Design System
   --------------------------------------------------------------------------
   Camada unica de tokens e componentes base. Carregue ANTES do CSS especifico
   de cada tela (public-admin.css, public-painel.css, public-landing.css), que
   passa a conter so o que e proprio daquela pagina.

   Estrutura do arquivo:
     1. Primitivas       — escalas cruas de cor, tipografia, espaco, raio
     2. Temas            — dark (padrao) e light, ambos em contraste AA
     3. Compatibilidade  — os nomes de token legados apontados para as novas
                           primitivas, para que a marcacao existente mude de
                           cara sem ser reescrita
     4. Base             — reset, tipografia, foco visivel
     5. Componentes      — botao, campo, cartao, tabela, badge, modal, toast,
                           abas, skeleton, barra de progresso

   Sobre contraste: os pares texto/fundo abaixo foram escolhidos para passar
   AA (4.5:1 em texto normal, 3:1 em texto grande e em bordas de controle) nos
   DOIS temas. Ao trocar uma cor, verifique o par — o token mais arriscado e o
   `--bl-text-muted` sobre `--bl-surface-2`, que e o de menor folga.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Primitivas
   -------------------------------------------------------------------------- */
:root {
  /* Marca — indigo profundo com secundario ciano. */
  --bl-brand-50:  #eef0ff;
  --bl-brand-100: #dcdffe;
  --bl-brand-200: #bcc0fd;
  --bl-brand-300: #9a9ffb;
  --bl-brand-400: #7d7ff8;
  --bl-brand-500: #6d5ef5;
  --bl-brand-600: #5a48e0;
  --bl-brand-700: #4736b8;
  --bl-brand-800: #372a8c;
  --bl-brand-900: #241c5c;

  --bl-cyan-300: #67e8f9;
  --bl-cyan-400: #22d3ee;
  --bl-cyan-500: #06b6d4;

  /* Neutros com leve viés frio, para casar com a marca. */
  --bl-gray-0:   #ffffff;
  --bl-gray-25:  #fafbfc;
  --bl-gray-50:  #f4f6f8;
  --bl-gray-100: #e8ebf0;
  --bl-gray-200: #d5dae2;
  --bl-gray-300: #b3bbc7;
  --bl-gray-400: #8b95a5;
  --bl-gray-500: #697386;
  --bl-gray-600: #4d5668;
  --bl-gray-700: #363d4d;
  --bl-gray-800: #232936;
  --bl-gray-850: #1a1f2a;
  --bl-gray-900: #141821;
  --bl-gray-950: #0d1017;
  --bl-gray-1000:#070910;

  /* Semanticas de estado. */
  --bl-green-400: #4ade80;
  --bl-green-500: #22c55e;
  --bl-green-600: #16a34a;
  --bl-amber-400: #fbbf24;
  --bl-amber-500: #f59e0b;
  --bl-amber-600: #d97706;
  --bl-red-400:   #f87171;
  --bl-red-500:   #ef4444;
  --bl-red-600:   #dc2626;
  --bl-blue-400:  #60a5fa;
  --bl-blue-500:  #3b82f6;

  /* Tipografia. */
  --bl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --bl-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas,
                  'Liberation Mono', monospace;

  --bl-text-2xs: 0.6875rem; /* 11px — so para rotulos densos de tabela */
  --bl-text-xs:  0.75rem;   /* 12px */
  --bl-text-sm:  0.8125rem; /* 13px */
  --bl-text-md:  0.875rem;  /* 14px — corpo padrao dos paineis */
  --bl-text-lg:  1rem;      /* 16px — corpo da landing */
  --bl-text-xl:  1.25rem;
  --bl-text-2xl: 1.5rem;
  --bl-text-3xl: 2rem;
  --bl-text-4xl: 2.75rem;

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

  --bl-leading-tight: 1.2;
  --bl-leading-snug: 1.4;
  --bl-leading-normal: 1.6;

  /* Espaco — base 4px. */
  --bl-space-1: 4px;
  --bl-space-2: 8px;
  --bl-space-3: 12px;
  --bl-space-4: 16px;
  --bl-space-5: 20px;
  --bl-space-6: 24px;
  --bl-space-8: 32px;
  --bl-space-10: 40px;
  --bl-space-12: 48px;
  --bl-space-16: 64px;
  --bl-space-20: 80px;

  /* Raio. */
  --bl-radius-xs: 4px;
  --bl-radius-sm: 6px;
  --bl-radius-md: 10px;
  --bl-radius-lg: 14px;
  --bl-radius-xl: 20px;
  --bl-radius-full: 999px;

  /* Movimento — curto o bastante para nao atrasar a leitura. */
  --bl-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --bl-duration-fast: 120ms;
  --bl-duration: 180ms;
  --bl-duration-slow: 280ms;

  /* Camadas. */
  --bl-z-sticky: 100;
  --bl-z-drawer: 200;
  --bl-z-modal: 300;
  --bl-z-toast: 400;

  /* Medidas de layout. */
  --bl-sidebar-width: 244px;
  --bl-sidebar-width-collapsed: 64px;
  --bl-topbar-height: 56px;
  --bl-content-max: 1400px;
}

/* --------------------------------------------------------------------------
   2. Temas
   -------------------------------------------------------------------------- */

/* Dark e o padrao: vale tanto para `[data-theme="dark"]` quanto para a
   ausencia do atributo, para que uma pagina que ainda nao tem o seletor de
   tema continue com a aparencia certa. */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bl-bg: var(--bl-gray-1000);
  --bl-surface: var(--bl-gray-950);
  --bl-surface-2: var(--bl-gray-900);
  --bl-surface-3: var(--bl-gray-850);
  --bl-surface-hover: var(--bl-gray-800);

  --bl-text: #eef1f6;
  --bl-text-muted: #a3adbd;
  --bl-text-subtle: #788293;
  --bl-text-inverse: var(--bl-gray-1000);

  --bl-border: rgba(238, 241, 246, 0.09);
  --bl-border-strong: rgba(238, 241, 246, 0.16);
  --bl-border-focus: var(--bl-brand-400);

  --bl-accent: var(--bl-brand-400);
  --bl-accent-hover: var(--bl-brand-300);
  --bl-accent-muted: rgba(125, 127, 248, 0.14);
  /* Tinta ESCURA sobre o acento, nao branca. No escuro o acento precisa ser
     claro o bastante para servir de link e de anel de foco sobre o fundo
     preto, e branco sobre ele da 3.35:1 — reprova em texto normal. Inverter a
     tinta resolve sem escurecer o acento e quebrar os outros dois usos. */
  --bl-accent-text: var(--bl-gray-1000);

  --bl-success: var(--bl-green-400);
  --bl-success-muted: rgba(74, 222, 128, 0.14);
  --bl-warning: var(--bl-amber-400);
  --bl-warning-muted: rgba(251, 191, 36, 0.14);
  --bl-danger: var(--bl-red-400);
  --bl-danger-muted: rgba(248, 113, 113, 0.14);
  --bl-info: var(--bl-blue-400);
  --bl-info-muted: rgba(96, 165, 250, 0.14);

  --bl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bl-shadow: 0 4px 16px rgba(0, 0, 0, 0.36);
  --bl-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.5);
  --bl-shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.62);
}

[data-theme='light'] {
  color-scheme: light;

  --bl-bg: var(--bl-gray-50);
  --bl-surface: var(--bl-gray-0);
  --bl-surface-2: var(--bl-gray-25);
  --bl-surface-3: var(--bl-gray-100);
  --bl-surface-hover: var(--bl-gray-100);

  --bl-text: var(--bl-gray-900);
  --bl-text-muted: var(--bl-gray-600);
  --bl-text-subtle: var(--bl-gray-500);
  --bl-text-inverse: var(--bl-gray-0);

  --bl-border: var(--bl-gray-200);
  --bl-border-strong: var(--bl-gray-300);
  --bl-border-focus: var(--bl-brand-600);

  --bl-accent: var(--bl-brand-600);
  --bl-accent-hover: var(--bl-brand-700);
  --bl-accent-muted: rgba(90, 72, 224, 0.10);
  --bl-accent-text: #ffffff;

  --bl-success: var(--bl-green-600);
  --bl-success-muted: rgba(22, 163, 74, 0.10);
  --bl-warning: var(--bl-amber-600);
  --bl-warning-muted: rgba(217, 119, 6, 0.10);
  --bl-danger: var(--bl-red-600);
  --bl-danger-muted: rgba(220, 38, 38, 0.10);
  --bl-info: var(--bl-blue-500);
  --bl-info-muted: rgba(59, 130, 246, 0.10);

  --bl-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --bl-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  --bl-shadow-lg: 0 14px 38px rgba(16, 24, 40, 0.12);
  --bl-shadow-xl: 0 26px 64px rgba(16, 24, 40, 0.16);
}

/* --------------------------------------------------------------------------
   3. Compatibilidade com os tokens legados
   --------------------------------------------------------------------------
   O painel admin, o painel do cliente e a landing nasceram com tres
   vocabularios de token diferentes (`--bg`, `--cp-bg`, `--surface`). Apontar
   os tres para as primitivas novas troca a identidade visual das tres telas de
   uma vez, sem tocar nos ~650 pontos de `innerHTML` do admin nem no HTML das
   outras. A migracao para os nomes `--bl-*` acontece tela a tela; enquanto nao
   acontece, nada quebra.
   -------------------------------------------------------------------------- */
:root,
[data-theme='dark'],
[data-theme='light'] {
  /* Painel admin */
  --bg: var(--bl-bg);
  --bg-2: var(--bl-surface);
  --panel: var(--bl-surface-2);
  --panel-2: var(--bl-surface-3);
  --panel-3: var(--bl-surface-hover);
  --ink: var(--bl-text);
  --muted: var(--bl-text-muted);
  --soft: var(--bl-text-subtle);
  --line: var(--bl-border);
  --line-strong: var(--bl-border-strong);
  --accent: var(--bl-accent);
  --accent-2: var(--bl-accent-hover);
  --accent-ink: var(--bl-accent-text);
  --accent-glow: var(--bl-accent-muted);
  --danger: var(--bl-danger);
  --warn: var(--bl-warning);
  --ok: var(--bl-success);
  --info: var(--bl-info);
  --r-sm: var(--bl-radius-sm);
  --r: var(--bl-radius-md);
  --r-lg: var(--bl-radius-lg);
  --shadow: var(--bl-shadow-xl);
  --shadow-card: var(--bl-shadow);
  --shadow-card-hover: var(--bl-shadow-lg);
  --ease: var(--bl-ease);
  --sidebar-width: var(--bl-sidebar-width);

  /* Painel do cliente */
  --cp-bg: var(--bl-bg);
  --cp-bg-2: var(--bl-surface);
  --cp-shell-bg: var(--bl-surface);
  --cp-panel: var(--bl-surface-2);
  --cp-panel-2: var(--bl-surface-3);
  --cp-ink: var(--bl-text);
  --cp-muted: var(--bl-text-muted);
  --cp-soft: var(--bl-text-subtle);
  --cp-line: var(--bl-border);
  --cp-accent: var(--bl-accent);
  --cp-accent-2: var(--bl-accent-hover);
  --cp-accent-ink: var(--bl-accent-text);
  --cp-accent-soft: var(--bl-accent-muted);
  --cp-ok: var(--bl-success);
  --cp-warn: var(--bl-warning);
  --cp-danger: var(--bl-danger);
  --cp-blue: var(--bl-info);
  --cp-purple: var(--bl-brand-300);
  --cp-shadow: var(--bl-shadow);

  /* Landing */
  --surface: var(--bl-surface);
  --surface-2: var(--bl-surface-2);
  --accent-soft: var(--bl-accent-muted);
  --green: var(--bl-success);
  --max: var(--bl-content-max);
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bl-bg);
  color: var(--bl-text);
  font-family: var(--bl-font-sans);
  font-size: var(--bl-text-md);
  line-height: var(--bl-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--bl-weight-semibold);
  line-height: var(--bl-leading-tight);
  letter-spacing: -0.011em;
}

code, pre, kbd, samp { font-family: var(--bl-font-mono); font-size: 0.95em; }

a { color: var(--bl-accent); text-decoration: none; }
a:hover { color: var(--bl-accent-hover); text-decoration: underline; }

/* Foco visivel APENAS por teclado. Um anel de foco que aparece no clique do
   mouse leva o time a remove-lo por completo — e ai o teclado fica sem
   indicacao nenhuma, que e a falha de acessibilidade que este par evita. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--bl-border-focus);
  outline-offset: 2px;
  border-radius: var(--bl-radius-xs);
}

::selection { background: var(--bl-accent-muted); color: var(--bl-text); }

/* Barra de rolagem discreta, sem sumir (sumir esconde a posicao no documento). */
* { scrollbar-width: thin; scrollbar-color: var(--bl-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--bl-border-strong);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: var(--bl-radius-full);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--bl-text-subtle); background-clip: content-box; }

@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;
  }
}

/* --------------------------------------------------------------------------
   5. Componentes
   -------------------------------------------------------------------------- */

/* ---- Botao ---- */
.bl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bl-space-2);
  padding: 0 var(--bl-space-4);
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--bl-radius-sm);
  background: var(--bl-surface-3);
  color: var(--bl-text);
  font: inherit;
  font-size: var(--bl-text-sm);
  font-weight: var(--bl-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--bl-duration-fast) var(--bl-ease),
              border-color var(--bl-duration-fast) var(--bl-ease),
              color var(--bl-duration-fast) var(--bl-ease),
              transform var(--bl-duration-fast) var(--bl-ease);
}
.bl-btn:hover { background: var(--bl-surface-hover); }
.bl-btn:active { transform: translateY(1px); }
.bl-btn[disabled],
.bl-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; transform: none; }

.bl-btn--primary {
  background: var(--bl-accent);
  color: var(--bl-accent-text);
}
.bl-btn--primary:hover { background: var(--bl-accent-hover); }

.bl-btn--ghost { background: transparent; color: var(--bl-text-muted); }
.bl-btn--ghost:hover { background: var(--bl-surface-hover); color: var(--bl-text); }

.bl-btn--outline { background: transparent; border-color: var(--bl-border-strong); }
.bl-btn--outline:hover { background: var(--bl-surface-hover); border-color: var(--bl-accent); }

.bl-btn--danger { background: var(--bl-danger-muted); color: var(--bl-danger); }
.bl-btn--danger:hover { background: var(--bl-danger); color: var(--bl-accent-text); }

.bl-btn--sm { height: 28px; padding: 0 var(--bl-space-3); font-size: var(--bl-text-xs); }
.bl-btn--lg { height: 44px; padding: 0 var(--bl-space-6); font-size: var(--bl-text-md); }
.bl-btn--block { width: 100%; }
.bl-btn--icon { width: 36px; padding: 0; }
.bl-btn--icon.bl-btn--sm { width: 28px; }

/* ---- Campos ---- */
.bl-field { display: flex; flex-direction: column; gap: var(--bl-space-2); }
.bl-label {
  font-size: var(--bl-text-xs);
  font-weight: var(--bl-weight-medium);
  color: var(--bl-text-muted);
}
.bl-input,
.bl-select,
.bl-textarea {
  width: 100%;
  padding: 0 var(--bl-space-3);
  height: 36px;
  border: 1px solid var(--bl-border-strong);
  border-radius: var(--bl-radius-sm);
  background: var(--bl-surface);
  color: var(--bl-text);
  font: inherit;
  font-size: var(--bl-text-sm);
  transition: border-color var(--bl-duration-fast) var(--bl-ease),
              box-shadow var(--bl-duration-fast) var(--bl-ease);
}
.bl-textarea { height: auto; padding: var(--bl-space-3); resize: vertical; min-height: 88px; }
.bl-input::placeholder,
.bl-textarea::placeholder { color: var(--bl-text-subtle); }
.bl-input:focus,
.bl-select:focus,
.bl-textarea:focus {
  border-color: var(--bl-accent);
  box-shadow: 0 0 0 3px var(--bl-accent-muted);
  outline: none;
}
.bl-input[aria-invalid='true'] { border-color: var(--bl-danger); }
.bl-hint { font-size: var(--bl-text-xs); color: var(--bl-text-subtle); }
.bl-error { font-size: var(--bl-text-xs); color: var(--bl-danger); }

/* ---- Cartao ---- */
.bl-card {
  background: var(--bl-surface-2);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-lg);
  box-shadow: var(--bl-shadow-sm);
}
.bl-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bl-space-3);
  padding: var(--bl-space-4) var(--bl-space-5);
  border-bottom: 1px solid var(--bl-border);
}
.bl-card__title { font-size: var(--bl-text-md); font-weight: var(--bl-weight-semibold); }
.bl-card__body { padding: var(--bl-space-5); }

/* ---- Metrica (KPI) ---- */
.bl-stat { display: flex; flex-direction: column; gap: var(--bl-space-1); padding: var(--bl-space-5); }
.bl-stat__label {
  font-size: var(--bl-text-xs);
  color: var(--bl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bl-stat__value {
  font-size: var(--bl-text-2xl);
  font-weight: var(--bl-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--bl-leading-tight);
}
.bl-stat__delta { font-size: var(--bl-text-xs); font-weight: var(--bl-weight-medium); }
.bl-stat__delta--up { color: var(--bl-success); }
.bl-stat__delta--down { color: var(--bl-danger); }

/* ---- Tabela ---- */
.bl-table { width: 100%; border-collapse: collapse; font-size: var(--bl-text-sm); }
.bl-table th {
  padding: var(--bl-space-3) var(--bl-space-4);
  border-bottom: 1px solid var(--bl-border-strong);
  color: var(--bl-text-muted);
  font-size: var(--bl-text-xs);
  font-weight: var(--bl-weight-medium);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bl-table td {
  padding: var(--bl-space-3) var(--bl-space-4);
  border-bottom: 1px solid var(--bl-border);
  vertical-align: middle;
}
.bl-table tbody tr { transition: background var(--bl-duration-fast) var(--bl-ease); }
.bl-table tbody tr:hover { background: var(--bl-surface-3); }
.bl-table--compact td,
.bl-table--compact th { padding: var(--bl-space-2) var(--bl-space-3); }
/* Numeros alinhados a direita e com largura fixa de digito: sem isso, colunas
   de tokens e valores ficam impossiveis de comparar de relance. */
.bl-table .bl-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Badge ---- */
.bl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bl-space-1);
  padding: 2px var(--bl-space-2);
  border-radius: var(--bl-radius-full);
  background: var(--bl-surface-3);
  color: var(--bl-text-muted);
  font-size: var(--bl-text-xs);
  font-weight: var(--bl-weight-medium);
  white-space: nowrap;
}
.bl-badge--success { background: var(--bl-success-muted); color: var(--bl-success); }
.bl-badge--warning { background: var(--bl-warning-muted); color: var(--bl-warning); }
.bl-badge--danger  { background: var(--bl-danger-muted);  color: var(--bl-danger); }
.bl-badge--info    { background: var(--bl-info-muted);    color: var(--bl-info); }
.bl-badge--accent  { background: var(--bl-accent-muted);  color: var(--bl-accent); }

/* Ponto de status. `currentColor` faz o ponto herdar a cor do badge que o
   contem, entao um estado novo so precisa da classe de cor. */
.bl-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--bl-radius-full);
  background: currentColor;
  flex: none;
}

/* ---- Barra de progresso ---- */
.bl-progress {
  height: 6px;
  border-radius: var(--bl-radius-full);
  background: var(--bl-surface-3);
  overflow: hidden;
}
.bl-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--bl-accent);
  transition: width var(--bl-duration-slow) var(--bl-ease);
}
.bl-progress__bar--warning { background: var(--bl-warning); }
.bl-progress__bar--danger { background: var(--bl-danger); }

/* ---- Abas ---- */
.bl-tabs { display: flex; gap: var(--bl-space-1); border-bottom: 1px solid var(--bl-border); }
.bl-tab {
  padding: var(--bl-space-3) var(--bl-space-4);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--bl-text-muted);
  font: inherit;
  font-size: var(--bl-text-sm);
  font-weight: var(--bl-weight-medium);
  cursor: pointer;
  transition: color var(--bl-duration-fast) var(--bl-ease),
              border-color var(--bl-duration-fast) var(--bl-ease);
}
.bl-tab:hover { color: var(--bl-text); }
.bl-tab[aria-selected='true'] { color: var(--bl-accent); border-bottom-color: var(--bl-accent); }

/* ---- Modal ---- */
.bl-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--bl-z-modal);
  display: grid;
  place-items: center;
  padding: var(--bl-space-4);
  background: rgba(7, 9, 16, 0.66);
  backdrop-filter: blur(3px);
}
.bl-modal {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--bl-surface-2);
  border: 1px solid var(--bl-border-strong);
  border-radius: var(--bl-radius-lg);
  box-shadow: var(--bl-shadow-xl);
}
.bl-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bl-space-5);
  border-bottom: 1px solid var(--bl-border);
}
.bl-modal__body { padding: var(--bl-space-5); }
.bl-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--bl-space-2);
  padding: var(--bl-space-4) var(--bl-space-5);
  border-top: 1px solid var(--bl-border);
}

/* ---- Drawer lateral ---- */
.bl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--bl-z-drawer);
  width: min(520px, 100%);
  overflow: auto;
  background: var(--bl-surface-2);
  border-left: 1px solid var(--bl-border-strong);
  box-shadow: var(--bl-shadow-xl);
  animation: bl-slide-in var(--bl-duration-slow) var(--bl-ease);
}
@keyframes bl-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ---- Toast ---- */
.bl-toasts {
  position: fixed;
  right: var(--bl-space-5);
  bottom: var(--bl-space-5);
  z-index: var(--bl-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--bl-space-2);
}
.bl-toast {
  display: flex;
  align-items: center;
  gap: var(--bl-space-3);
  min-width: 260px;
  padding: var(--bl-space-3) var(--bl-space-4);
  background: var(--bl-surface-3);
  border: 1px solid var(--bl-border-strong);
  border-left: 3px solid var(--bl-accent);
  border-radius: var(--bl-radius-sm);
  box-shadow: var(--bl-shadow-lg);
  font-size: var(--bl-text-sm);
  animation: bl-rise var(--bl-duration) var(--bl-ease);
}
.bl-toast--success { border-left-color: var(--bl-success); }
.bl-toast--warning { border-left-color: var(--bl-warning); }
.bl-toast--danger  { border-left-color: var(--bl-danger); }
@keyframes bl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Estados de carregamento e vazio ---- */
.bl-skeleton {
  border-radius: var(--bl-radius-sm);
  background: linear-gradient(90deg,
              var(--bl-surface-3) 25%,
              var(--bl-surface-hover) 37%,
              var(--bl-surface-3) 63%);
  background-size: 400% 100%;
  animation: bl-shimmer 1.4s ease infinite;
}
@keyframes bl-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.bl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bl-space-2);
  padding: var(--bl-space-12) var(--bl-space-5);
  color: var(--bl-text-muted);
  text-align: center;
}
.bl-empty__title { color: var(--bl-text); font-weight: var(--bl-weight-medium); }

/* ---- Utilitarios ---- */
.bl-mono { font-family: var(--bl-font-mono); }
.bl-muted { color: var(--bl-text-muted); }
.bl-subtle { color: var(--bl-text-subtle); }
.bl-nowrap { white-space: nowrap; }
.bl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-row { display: flex; align-items: center; gap: var(--bl-space-3); }
.bl-col { display: flex; flex-direction: column; gap: var(--bl-space-3); }
.bl-grow { flex: 1 1 auto; min-width: 0; }

/* Visivel so para leitor de tela — usado nos rotulos de icone dos paineis. */
.bl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}