/*!
 * Ligna UI v1.0.0 · 2Safe Ligna
 * Design system noite + azul Ligna + violeta. Tokens, base e componentes.
 * Uso: <link rel="stylesheet" href="ligna-ui.css"> + <script src="ligna-ui.js" defer></script>
 * Tema: claro por padrão, escuro automático pelo sistema. Fixe com <html data-theme="light|dark">.
 */
/* discador: o @import do Google Fonts saiu; as fontes vêm de static/fonts (app.css) */

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  /* paleta: noite (base de confiança) */
  --lg-noite-50: #F2F5FA;
  --lg-noite-100: #E6EAF2;
  --lg-noite-200: #C8D1E2;
  --lg-noite-300: #9FADC8;
  --lg-noite-400: #6F82A6;
  --lg-noite-500: #4A5E85;
  --lg-noite-600: #2F4469;
  --lg-noite-700: #1F3559;
  --lg-noite-800: #13294C;
  --lg-noite-900: #0C1D38;
  --lg-noite-950: #071226;
  /* paleta: azul Ligna (ação) */
  --lg-azul-50: #EEF4FF;
  --lg-azul-100: #DCE8FF;
  --lg-azul-200: #B9D1FF;
  --lg-azul-300: #8AB3FF;
  --lg-azul-400: #5590FF;
  --lg-azul-500: #1E6FFF;
  --lg-azul-600: #145BE0;
  --lg-azul-700: #1048B5;
  --lg-azul-800: #0F3A8C;
  --lg-azul-900: #0E2E6B;
  /* paleta: violeta (IA e destaque) */
  --lg-violeta-50: #F5F0FF;
  --lg-violeta-100: #EBE1FE;
  --lg-violeta-200: #D6C3FD;
  --lg-violeta-300: #B898FA;
  --lg-violeta-400: #9A6BF6;
  --lg-violeta-500: #7A3DF0;
  --lg-violeta-600: #662AD9;
  --lg-violeta-700: #5420B3;
  --lg-violeta-800: #431B8C;
  --lg-violeta-900: #33166A;
  /* paleta: ciano (canais, sinal) */
  --lg-ciano-50: #E8F9FF;
  --lg-ciano-100: #CCF3FF;
  --lg-ciano-200: #99E7FF;
  --lg-ciano-300: #5CD8FF;
  --lg-ciano-400: #00C2FF;
  --lg-ciano-500: #00A6E0;
  --lg-ciano-600: #0086B8;
  --lg-ciano-700: #006A92;
  --lg-ciano-800: #00516F;
  --lg-ciano-900: #003C52;
  /* paleta: cinza (com viés noite) */
  --lg-cinza-50: #F6F7FA;
  --lg-cinza-100: #EDF0F5;
  --lg-cinza-200: #DDE2EB;
  --lg-cinza-300: #C0C7D5;
  --lg-cinza-400: #959FB4;
  --lg-cinza-500: #6B7690;
  --lg-cinza-600: #4E5974;
  --lg-cinza-700: #36405A;
  --lg-cinza-800: #1F283E;
  --lg-cinza-900: #111A2C;
  --lg-branco: #FFFFFF;

  /* gradiente da marca: só no símbolo, em faixas e em destaques de IA, nunca em texto corrido */
  --lg-gradient: linear-gradient(115deg, #00C2FF 0%, #1E6FFF 45%, #7A3DF0 100%);

  /* papéis (use estes nos componentes) */
  --lg-bg: #F6F7FA;
  --lg-surface: #FFFFFF;
  --lg-surface-2: #F2F5FA;
  --lg-surface-inverse: #13294C;
  --lg-border: #DDE2EB;
  --lg-border-strong: #C0C7D5;
  --lg-text: #111A2C;
  --lg-text-2: #4E5974;
  --lg-text-3: #6B7690;
  --lg-text-inverse: #FFFFFF;
  --lg-brand: #13294C;
  --lg-brand-hover: #1F3559;
  --lg-on-brand: #FFFFFF;
  --lg-brand-soft: #E6EAF2;
  --lg-brand-text: #13294C;
  --lg-accent: #145BE0;
  --lg-accent-hover: #1048B5;
  --lg-on-accent: #FFFFFF;
  --lg-accent-soft: #DCE8FF;
  --lg-accent-text: #1048B5;
  --lg-ai: #7A3DF0;
  --lg-ai-hover: #662AD9;
  --lg-on-ai: #FFFFFF;
  --lg-ai-soft: #EBE1FE;
  --lg-ai-text: #5420B3;
  --lg-focus: #1E6FFF;
  --lg-overlay: rgba(7, 18, 38, .55);

  /* semânticas */
  --lg-success: #17804A;
  --lg-success-bg: #E2F4EA;
  --lg-warning: #B4500A;
  --lg-warning-bg: #FDEEE3;
  --lg-danger: #C42B2B;
  --lg-danger-hover: #A82222;
  --lg-danger-bg: #FCE9E9;
  --lg-info: #00749F;
  --lg-info-bg: #E3F6FD;

  /* logo */
  --lg-logo-a: #13294C;
  --lg-logo-b: #1E6FFF;

  /* tipografia */
  --lg-font-display: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --lg-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --lg-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --lg-text-xs: .75rem;
  --lg-text-sm: .875rem;
  --lg-text-md: 1rem;
  --lg-text-lg: 1.125rem;
  --lg-text-xl: 1.25rem;
  --lg-text-2xl: 1.5rem;
  --lg-text-3xl: 1.875rem;
  --lg-text-4xl: 2.375rem;
  --lg-text-5xl: 3.25rem;

  /* espaçamento (base 4px) */
  --lg-space-1: 4px;
  --lg-space-2: 8px;
  --lg-space-3: 12px;
  --lg-space-4: 16px;
  --lg-space-5: 20px;
  --lg-space-6: 24px;
  --lg-space-8: 32px;
  --lg-space-10: 40px;
  --lg-space-12: 48px;
  --lg-space-16: 64px;
  --lg-space-20: 80px;

  /* raios */
  --lg-radius-sm: 6px;
  --lg-radius-md: 10px;
  --lg-radius-lg: 14px;
  --lg-radius-xl: 20px;
  --lg-radius-pill: 999px;

  /* sombras */
  --lg-shadow-sm: 0 1px 2px rgba(12, 29, 56, .08);
  --lg-shadow-md: 0 6px 18px -6px rgba(12, 29, 56, .18);
  --lg-shadow-lg: 0 24px 48px -16px rgba(12, 29, 56, .30);

  /* controles */
  --lg-control-sm: 36px;
  --lg-control-md: 44px;
  --lg-control-lg: 52px;

  /* movimento e camadas */
  --lg-dur: 160ms;
  --lg-ease: cubic-bezier(.2, .7, .2, 1);
  --lg-z-popover: 1000;
  --lg-z-modal: 1100;
  --lg-z-toast: 1200;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-bg: #070F1F;
    --lg-surface: #0D1830;
    --lg-surface-2: #0A1428;
    --lg-surface-inverse: #E6EAF2;
    --lg-border: #1F2D4A;
    --lg-border-strong: #314366;
    --lg-text: #E9EEF7;
    --lg-text-2: #A9B5CC;
    --lg-text-3: #8592AC;
    --lg-text-inverse: #13294C;
    --lg-brand: #34507F;
    --lg-brand-hover: #3F5D8F;
    --lg-on-brand: #FFFFFF;
    --lg-brand-soft: #16264A;
    --lg-brand-text: #C8D1E2;
    --lg-accent: #145BE0;
    --lg-accent-hover: #1E6FFF;
    --lg-on-accent: #FFFFFF;
    --lg-accent-soft: #0F2557;
    --lg-accent-text: #8AB3FF;
    --lg-ai: #7A3DF0;
    --lg-ai-hover: #8B55F3;
    --lg-on-ai: #FFFFFF;
    --lg-ai-soft: #251645;
    --lg-ai-text: #B898FA;
    --lg-focus: #5590FF;
    --lg-overlay: rgba(2, 6, 16, .7);
    --lg-success: #4CC383;
    --lg-success-bg: #10301F;
    --lg-warning: #F39256;
    --lg-warning-bg: #3A1F0E;
    --lg-danger: #F07070;
    --lg-danger-hover: #F48A8A;
    --lg-danger-bg: #3A1414;
    --lg-info: #5CD8FF;
    --lg-info-bg: #0A2A3A;
    --lg-logo-a: #FFFFFF;
    --lg-logo-b: #1E6FFF;
    --lg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --lg-shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .6);
    --lg-shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --lg-bg: #070F1F;
  --lg-surface: #0D1830;
  --lg-surface-2: #0A1428;
  --lg-surface-inverse: #E6EAF2;
  --lg-border: #1F2D4A;
  --lg-border-strong: #314366;
  --lg-text: #E9EEF7;
  --lg-text-2: #A9B5CC;
  --lg-text-3: #8592AC;
  --lg-text-inverse: #13294C;
  --lg-brand: #34507F;
  --lg-brand-hover: #3F5D8F;
  --lg-on-brand: #FFFFFF;
  --lg-brand-soft: #16264A;
  --lg-brand-text: #C8D1E2;
  --lg-accent: #145BE0;
  --lg-accent-hover: #1E6FFF;
  --lg-on-accent: #FFFFFF;
  --lg-accent-soft: #0F2557;
  --lg-accent-text: #8AB3FF;
  --lg-ai: #7A3DF0;
  --lg-ai-hover: #8B55F3;
  --lg-on-ai: #FFFFFF;
  --lg-ai-soft: #251645;
  --lg-ai-text: #B898FA;
  --lg-focus: #5590FF;
  --lg-overlay: rgba(2, 6, 16, .7);
  --lg-success: #4CC383;
  --lg-success-bg: #10301F;
  --lg-warning: #F39256;
  --lg-warning-bg: #3A1F0E;
  --lg-danger: #F07070;
  --lg-danger-hover: #F48A8A;
  --lg-danger-bg: #3A1414;
  --lg-info: #5CD8FF;
  --lg-info-bg: #0A2A3A;
  --lg-logo-a: #FFFFFF;
  --lg-logo-b: #1E6FFF;
  --lg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --lg-shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .6);
  --lg-shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* =========================================================
   2. BASE (opt-in: classe .lg-base no <body>)
   ========================================================= */
.lg-base {
  margin: 0;
  background: var(--lg-bg);
  color: var(--lg-text);
  font: 400 var(--lg-text-md)/1.6 var(--lg-font-body);
  -webkit-font-smoothing: antialiased;
}
.lg-base *, .lg-base *::before, .lg-base *::after { box-sizing: border-box; }
[class^="lg-"], [class*=" lg-"] { box-sizing: border-box; }
[hidden]:is([class^="lg-"], [class*=" lg-"]) { display: none !important; }
.lg-base :where(h1, h2, h3, h4, h5) { font-family: var(--lg-font-display); color: var(--lg-text); margin: 0; text-wrap: balance; }
.lg-base :where(p) { margin: 0; }
.lg-base :focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lg-base *, .lg-base *::before, .lg-base *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* tipografia */
.lg-display { font: 700 var(--lg-text-5xl)/1.05 var(--lg-font-display); letter-spacing: -.02em; color: var(--lg-text); text-wrap: balance; }
.lg-h1 { font: 700 var(--lg-text-4xl)/1.12 var(--lg-font-display); letter-spacing: -.015em; color: var(--lg-text); text-wrap: balance; }
.lg-h2 { font: 700 var(--lg-text-3xl)/1.18 var(--lg-font-display); letter-spacing: -.01em; color: var(--lg-text); text-wrap: balance; }
.lg-h3 { font: 600 var(--lg-text-2xl)/1.25 var(--lg-font-display); color: var(--lg-text); }
.lg-h4 { font: 600 var(--lg-text-xl)/1.3 var(--lg-font-display); color: var(--lg-text); }
.lg-lead { font-size: var(--lg-text-lg); line-height: 1.6; color: var(--lg-text-2); }
.lg-body { font: 400 var(--lg-text-md)/1.6 var(--lg-font-body); }
.lg-small { font-size: var(--lg-text-sm); }
.lg-caption { font-size: var(--lg-text-xs); color: var(--lg-text-3); }
.lg-eyebrow { font: 600 var(--lg-text-xs)/1.4 var(--lg-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-accent-text); }
.lg-muted { color: var(--lg-text-2); }
.lg-num { font-variant-numeric: tabular-nums; }
.lg-money { font: 600 1em var(--lg-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lg-code { font: 400 .9em var(--lg-font-mono); background: var(--lg-surface-2); border: 1px solid var(--lg-border); border-radius: var(--lg-radius-sm); padding: 1px 6px; }
.lg-link { color: var(--lg-brand-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lg-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.lg-link:hover { color: var(--lg-accent-text); }
.lg-divider { border: 0; border-top: 1px solid var(--lg-border); margin: var(--lg-space-6) 0; }

/* ícones */
.lg-icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.lg-icon svg { width: 100%; height: 100%; }

/* =========================================================
   3. BOTÕES
   ========================================================= */
.lg-btn {
  --_bg: var(--lg-accent); --_fg: var(--lg-on-accent); --_bd: transparent; --_bg-h: var(--lg-accent-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lg-space-2);
  min-height: var(--lg-control-md); padding: 0 var(--lg-space-5);
  border: 1.5px solid var(--_bd); border-radius: var(--lg-radius-md);
  background: var(--_bg); color: var(--_fg);
  font: 600 var(--lg-text-md)/1 var(--lg-font-display); white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; position: relative;
  transition: background var(--lg-dur) var(--lg-ease), border-color var(--lg-dur), color var(--lg-dur), transform var(--lg-dur), box-shadow var(--lg-dur);
}
.lg-btn:hover { background: var(--_bg-h); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 2px; }
.lg-btn--secondary { --_bg: var(--lg-brand); --_fg: var(--lg-on-brand); --_bg-h: var(--lg-brand-hover); }
.lg-btn--outline { --_bg: transparent; --_fg: var(--lg-brand-text); --_bd: var(--lg-border-strong); --_bg-h: var(--lg-brand-soft); }
.lg-btn--ghost { --_bg: transparent; --_fg: var(--lg-brand-text); --_bg-h: var(--lg-brand-soft); }
.lg-btn--danger { --_bg: var(--lg-danger); --_fg: #fff; --_bg-h: var(--lg-danger-hover); }
.lg-btn--sm { min-height: var(--lg-control-sm); padding: 0 var(--lg-space-4); font-size: var(--lg-text-sm); border-radius: var(--lg-radius-sm); }
.lg-btn--lg { min-height: var(--lg-control-lg); padding: 0 var(--lg-space-8); font-size: var(--lg-text-lg); }
.lg-btn--block { display: flex; width: 100%; }
.lg-btn--icon { padding: 0; width: var(--lg-control-md); }
.lg-btn--icon.lg-btn--sm { width: var(--lg-control-sm); }
.lg-btn:disabled, .lg-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.lg-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.lg-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid var(--_fg); border-right-color: transparent; animation: lg-gira .7s linear infinite; }
.lg-btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--lg-space-2); }

/* =========================================================
   4. CAMPOS
   ========================================================= */
.lg-field { display: grid; gap: 6px; min-width: 0; }
.lg-label { font: 600 var(--lg-text-sm)/1.3 var(--lg-font-body); color: var(--lg-text); }
.lg-label__opt { font-weight: 400; color: var(--lg-text-3); margin-left: 4px; }
.lg-label__req { color: var(--lg-danger); margin-left: 2px; }
.lg-help { font-size: var(--lg-text-xs); line-height: 1.4; color: var(--lg-text-3); margin: 0; }
.lg-help--error { color: var(--lg-danger); font-weight: 500; }
.lg-help--success { color: var(--lg-success); font-weight: 500; }

.lg-input, .lg-textarea, .lg-select-native {
  width: 100%; min-height: var(--lg-control-md); padding: 0 var(--lg-space-4);
  border: 1.5px solid var(--lg-border-strong); border-radius: var(--lg-radius-md);
  background: var(--lg-surface); color: var(--lg-text);
  font: 400 var(--lg-text-md)/1.4 var(--lg-font-body);
  transition: border-color var(--lg-dur), box-shadow var(--lg-dur);
  appearance: none; -webkit-appearance: none;
}
.lg-textarea { padding: var(--lg-space-3) var(--lg-space-4); min-height: 104px; resize: vertical; }
.lg-input::placeholder, .lg-textarea::placeholder { color: var(--lg-text-3); }
.lg-input:hover, .lg-textarea:hover, .lg-select-native:hover { border-color: var(--lg-cinza-500); }
.lg-input:focus, .lg-textarea:focus, .lg-select-native:focus { outline: none; border-color: var(--lg-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 40%, transparent); }
.lg-input[aria-invalid="true"], .lg-textarea[aria-invalid="true"], .lg-field--error .lg-input, .lg-field--error .lg-textarea { border-color: var(--lg-danger); }
.lg-input[aria-invalid="true"]:focus, .lg-field--error .lg-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-danger) 25%, transparent); }
.lg-input:disabled, .lg-textarea:disabled, .lg-select-native:disabled { background: var(--lg-surface-2); color: var(--lg-text-3); cursor: not-allowed; border-style: dashed; }
.lg-input[readonly] { background: var(--lg-surface-2); }
.lg-input--sm { min-height: var(--lg-control-sm); font-size: var(--lg-text-sm); }
.lg-input--lg { min-height: var(--lg-control-lg); font-size: var(--lg-text-lg); }

.lg-select-native {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236C7790' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* grupo com prefixo, sufixo ou ícone */
.lg-input-group { display: flex; align-items: stretch; min-height: var(--lg-control-md); border: 1.5px solid var(--lg-border-strong); border-radius: var(--lg-radius-md); background: var(--lg-surface); transition: border-color var(--lg-dur), box-shadow var(--lg-dur); min-width: 0; }
.lg-input-group:hover { border-color: var(--lg-cinza-500); }
.lg-input-group:focus-within { border-color: var(--lg-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 40%, transparent); }
.lg-input-group .lg-input { border: 0; box-shadow: none; background: transparent; min-height: 0; min-width: 0; flex: 1; }
.lg-input-group__affix { display: flex; align-items: center; padding: 0 var(--lg-space-3) 0 var(--lg-space-4); color: var(--lg-text-2); font: 600 var(--lg-text-sm) var(--lg-font-display); white-space: nowrap; }
.lg-input-group__affix + .lg-input { padding-left: 0; }
.lg-input-group .lg-input + .lg-input-group__affix { padding: 0 var(--lg-space-4) 0 var(--lg-space-2); }
.lg-input-group__affix .lg-icon { color: var(--lg-text-3); }
.lg-field--error .lg-input-group, .lg-input-group:has([aria-invalid="true"]) { border-color: var(--lg-danger); }

/* checkbox e radio */
.lg-check { display: inline-flex; align-items: flex-start; gap: var(--lg-space-3); cursor: pointer; font-size: var(--lg-text-md); line-height: 1.4; color: var(--lg-text); }
.lg-check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--lg-border-strong); border-radius: 5px; background: var(--lg-surface) center/14px no-repeat; cursor: pointer; transition: background-color var(--lg-dur), border-color var(--lg-dur); }
.lg-check input[type="radio"] { border-radius: 50%; }
.lg-check input:hover { border-color: var(--lg-brand); }
.lg-check input:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 2px; }
.lg-check input:checked { background-color: var(--lg-brand); border-color: var(--lg-brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.lg-check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 4px var(--lg-surface); }
.lg-check input:indeterminate { background-color: var(--lg-brand); border-color: var(--lg-brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.lg-check input:disabled { opacity: .5; cursor: not-allowed; }
.lg-check:has(input:disabled) { color: var(--lg-text-3); cursor: not-allowed; }
.lg-check small { display: block; color: var(--lg-text-3); font-size: var(--lg-text-sm); }
.lg-checks { display: grid; gap: var(--lg-space-3); border: 0; margin: 0; padding: 0; min-width: 0; }
.lg-checks legend { padding: 0; margin-bottom: var(--lg-space-2); }

/* switch */
.lg-switch { display: inline-flex; align-items: center; gap: var(--lg-space-3); cursor: pointer; color: var(--lg-text); line-height: 1.4; }
.lg-switch input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: var(--lg-radius-pill); background: var(--lg-border-strong); cursor: pointer; transition: background var(--lg-dur); }
.lg-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--lg-dur) var(--lg-ease); }
.lg-switch input:checked { background: var(--lg-brand); }
.lg-switch input:checked::after { transform: translateX(18px); }
.lg-switch input:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 2px; }
.lg-switch input:disabled { opacity: .5; cursor: not-allowed; }

/* slider */
.lg-range { --_p: 50%; width: 100%; appearance: none; -webkit-appearance: none; height: 24px; background: transparent; cursor: pointer; margin: 0; }
.lg-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--lg-accent) var(--_p), var(--lg-border) var(--_p)); }
.lg-range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--lg-border); }
.lg-range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--lg-accent); }
.lg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--lg-surface); border: 3px solid var(--lg-brand); box-shadow: var(--lg-shadow-sm); }
.lg-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--lg-surface); border: 3px solid var(--lg-brand); }
.lg-range:focus-visible { outline: none; }
.lg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-accent) 45%, transparent); }

/* controle segmentado (rádios) */
.lg-segmented { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--lg-radius-md); background: var(--lg-surface-2); border: 1px solid var(--lg-border); max-width: 100%; overflow-x: auto; }
.lg-segmented label { position: relative; flex: 1; }
.lg-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.lg-segmented span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 var(--lg-space-4); border-radius: 7px; font: 600 var(--lg-text-sm) var(--lg-font-display); color: var(--lg-text-2); cursor: pointer; white-space: nowrap; transition: background var(--lg-dur), color var(--lg-dur); }
.lg-segmented span:hover { color: var(--lg-text); }
.lg-segmented input:checked + span { background: var(--lg-brand); color: var(--lg-on-brand); box-shadow: var(--lg-shadow-sm); }
.lg-segmented input:focus-visible + span { outline: 2px solid var(--lg-focus); outline-offset: 1px; }

/* =========================================================
   5. POPOVER, SELECT, MENU, DATA
   ========================================================= */
.lg-popover {
  position: absolute; z-index: var(--lg-z-popover); top: calc(100% + 6px); left: 0; min-width: 100%;
  padding: 6px; border-radius: var(--lg-radius-lg); border: 1px solid var(--lg-border);
  background: var(--lg-surface); color: var(--lg-text); box-shadow: var(--lg-shadow-lg);
  animation: lg-surge var(--lg-dur) var(--lg-ease);
}
.lg-popover[data-align="end"] { left: auto; right: 0; }
.lg-popover[data-side="top"] { top: auto; bottom: calc(100% + 6px); }

/* select personalizado */
.lg-select { position: relative; min-width: 0; }
.lg-select__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lg-space-2); width: 100%;
  min-height: var(--lg-control-md); padding: 0 var(--lg-space-3) 0 var(--lg-space-4);
  border: 1.5px solid var(--lg-border-strong); border-radius: var(--lg-radius-md);
  background: var(--lg-surface); color: var(--lg-text); font: 400 var(--lg-text-md) var(--lg-font-body); text-align: left; cursor: pointer;
}
.lg-select__trigger:hover { border-color: var(--lg-cinza-500); }
.lg-select__trigger:focus-visible, .lg-select__trigger[aria-expanded="true"] { outline: none; border-color: var(--lg-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 40%, transparent); }
.lg-select__trigger[data-placeholder] .lg-select__value { color: var(--lg-text-3); }
.lg-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-select__trigger .lg-icon { color: var(--lg-text-3); transition: transform var(--lg-dur); }
.lg-select__trigger[aria-expanded="true"] .lg-icon { transform: rotate(180deg); }
.lg-select__trigger:disabled { background: var(--lg-surface-2); color: var(--lg-text-3); cursor: not-allowed; border-style: dashed; }
.lg-select [aria-invalid="true"] + .lg-select__trigger, .lg-field--error .lg-select__trigger { border-color: var(--lg-danger); }
.lg-listbox { max-height: 264px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.lg-option { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-space-3); padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: var(--lg-text-md); }
.lg-option[data-active] { background: var(--lg-brand-soft); }
.lg-option[aria-selected="true"] { font-weight: 600; color: var(--lg-brand-text); }
.lg-option[aria-selected="true"]::after { content: ""; width: 16px; height: 16px; flex: none; background: var(--lg-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.lg-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.lg-option small { color: var(--lg-text-3); font-weight: 400; }

/* menu de ações */
.lg-menu { position: relative; display: inline-block; }
.lg-menu > .lg-popover { min-width: 220px; }
.lg-menu__item { display: flex; align-items: center; gap: var(--lg-space-3); width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--lg-text); font: 500 var(--lg-text-sm) var(--lg-font-body); text-align: left; text-decoration: none; cursor: pointer; }
.lg-menu__item .lg-icon { color: var(--lg-text-3); }
.lg-menu__item:hover, .lg-menu__item:focus-visible { background: var(--lg-brand-soft); outline: none; }
.lg-menu__item--danger, .lg-menu__item--danger .lg-icon { color: var(--lg-danger); }
.lg-menu__item--danger:hover, .lg-menu__item--danger:focus-visible { background: var(--lg-danger-bg); }
.lg-menu__item kbd { margin-left: auto; font: 400 var(--lg-text-xs) var(--lg-font-mono); color: var(--lg-text-3); }
.lg-menu__label { padding: 8px 12px 4px; font: 600 var(--lg-text-xs) var(--lg-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--lg-text-3); }
.lg-menu__sep { height: 1px; margin: 6px 4px; background: var(--lg-border); border: 0; }

/* seletor de data */
.lg-date { position: relative; min-width: 0; }
.lg-date .lg-input-group { cursor: text; }
.lg-date__btn { display: flex; align-items: center; justify-content: center; width: 42px; border: 0; background: none; color: var(--lg-text-2); cursor: pointer; border-radius: 0 8px 8px 0; }
.lg-date__btn:hover { color: var(--lg-brand-text); background: var(--lg-brand-soft); }
.lg-cal { width: 300px; min-width: 0; max-width: calc(100vw - 32px); padding: var(--lg-space-3); }
.lg-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-space-2); margin-bottom: var(--lg-space-2); }
.lg-cal__title { font: 600 var(--lg-text-md) var(--lg-font-display); text-transform: capitalize; }
.lg-cal__nav { display: flex; gap: 2px; }
.lg-cal__nav button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--lg-text-2); cursor: pointer; }
.lg-cal__nav button:hover { background: var(--lg-brand-soft); color: var(--lg-text); }
.lg-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.lg-cal__dow { font: 600 var(--lg-text-xs) var(--lg-font-display); color: var(--lg-text-3); padding: 6px 0; text-transform: uppercase; }
.lg-cal__day { height: 36px; border: 0; border-radius: 8px; background: none; color: var(--lg-text); font: 500 var(--lg-text-sm) var(--lg-font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.lg-cal__day:hover { background: var(--lg-brand-soft); }
.lg-cal__day:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: -2px; }
.lg-cal__day[data-outside] { color: var(--lg-text-3); opacity: .55; }
.lg-cal__day[data-today] { box-shadow: inset 0 0 0 1.5px var(--lg-accent); }
.lg-cal__day[aria-selected="true"] { background: var(--lg-brand); color: var(--lg-on-brand); font-weight: 700; }
.lg-cal__day:disabled { opacity: .3; cursor: not-allowed; background: none; }
.lg-cal__foot { display: flex; justify-content: space-between; margin-top: var(--lg-space-2); padding-top: var(--lg-space-2); border-top: 1px solid var(--lg-border); }

/* =========================================================
   6. NAVEGAÇÃO
   ========================================================= */
/* abas */
.lg-tabs { min-width: 0; }
.lg-tabs__list { display: flex; gap: var(--lg-space-1); border-bottom: 1px solid var(--lg-border); overflow-x: auto; scrollbar-width: none; }
.lg-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--lg-space-2); padding: var(--lg-space-3) var(--lg-space-4); border: 0; background: none; color: var(--lg-text-2); font: 600 var(--lg-text-md) var(--lg-font-display); cursor: pointer; white-space: nowrap; }
.lg-tab::after { content: ""; position: absolute; left: var(--lg-space-3); right: var(--lg-space-3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background var(--lg-dur); }
.lg-tab:hover { color: var(--lg-text); }
.lg-tab[aria-selected="true"] { color: var(--lg-brand-text); }
.lg-tab[aria-selected="true"]::after { background: var(--lg-accent); }
.lg-tab:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: -2px; border-radius: 8px; }
.lg-tab .lg-badge { font-size: 11px; }
.lg-tabs__panel { padding-top: var(--lg-space-5); }
.lg-tabs__panel:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 4px; border-radius: 4px; }
.lg-tabs--pills .lg-tabs__list { border: 0; gap: var(--lg-space-2); }
.lg-tabs--pills .lg-tab { border-radius: var(--lg-radius-pill); padding: var(--lg-space-2) var(--lg-space-4); background: var(--lg-surface-2); font-size: var(--lg-text-sm); }
.lg-tabs--pills .lg-tab::after { display: none; }
.lg-tabs--pills .lg-tab[aria-selected="true"] { background: var(--lg-brand); color: var(--lg-on-brand); }

/* barra de navegação */
.lg-navbar { display: flex; align-items: center; gap: var(--lg-space-6); min-height: 68px; padding: 0 var(--lg-space-6); background: var(--lg-surface); border-bottom: 1px solid var(--lg-border); position: relative; }
.lg-navbar--inverse { background: var(--lg-noite-800); border-color: transparent; --lg-text: #fff; --lg-text-2: rgba(255,255,255,.75); --lg-brand-soft: rgba(255,255,255,.1); --lg-brand-text: #fff; --lg-logo-a: #fff; }
.lg-navbar__brand { display: flex; align-items: center; flex: none; }
.lg-navbar__brand img, .lg-navbar__brand svg { height: 26px; width: auto; display: block; }
.lg-navbar__links { display: flex; align-items: center; gap: var(--lg-space-1); margin: 0 auto 0 0; padding: 0; list-style: none; }
.lg-navbar__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; color: var(--lg-text-2); font: 500 var(--lg-text-md) var(--lg-font-display); text-decoration: none; background: none; border: 0; cursor: pointer; }
.lg-navbar__link:hover { color: var(--lg-text); background: var(--lg-brand-soft); }
.lg-navbar__link[aria-current="page"] { color: var(--lg-text); box-shadow: inset 0 -3px 0 var(--lg-accent); border-radius: 8px 8px 0 0; }
.lg-navbar__actions { display: flex; align-items: center; gap: var(--lg-space-2); margin-left: auto; }
.lg-navbar__toggle { display: none; }
@media (max-width: 760px) {
  .lg-navbar { gap: var(--lg-space-3); padding: 0 var(--lg-space-4); flex-wrap: wrap; }
  .lg-navbar__toggle { display: inline-flex; }
  .lg-navbar__links { display: none; order: 9; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: 0 0 var(--lg-space-3); margin: 0; }
  .lg-navbar[data-open] .lg-navbar__links { display: flex; }
  .lg-navbar__actions .lg-btn:not(.lg-navbar__toggle) { display: none; }
}

/* migalhas */
.lg-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--lg-text-sm); color: var(--lg-text-3); }
.lg-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.lg-breadcrumb li + li::before { content: "/"; color: var(--lg-border-strong); }
.lg-breadcrumb a { color: var(--lg-text-2); text-decoration: none; }
.lg-breadcrumb a:hover { color: var(--lg-brand-text); text-decoration: underline; }
.lg-breadcrumb [aria-current="page"] { color: var(--lg-text); font-weight: 600; }

/* paginação */
.lg-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lg-pagination a, .lg-pagination button, .lg-pagination span { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--lg-text-2); font: 600 var(--lg-text-sm) var(--lg-font-display); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.lg-pagination a:hover, .lg-pagination button:hover { border-color: var(--lg-border); color: var(--lg-text); }
.lg-pagination [aria-current="page"] { background: var(--lg-brand); color: var(--lg-on-brand); border-color: var(--lg-brand); }
.lg-pagination [aria-disabled="true"], .lg-pagination :disabled { opacity: .4; pointer-events: none; }
.lg-pagination span { cursor: default; }

/* etapas */
.lg-stepper { display: flex; gap: var(--lg-space-2); margin: 0; padding: 0; list-style: none; counter-reset: lg-passo; overflow-x: auto; }
.lg-stepper li { flex: 1; min-width: 110px; display: grid; gap: 8px; counter-increment: lg-passo; font: 600 var(--lg-text-sm)/1.3 var(--lg-font-display); color: var(--lg-text-3); }
.lg-stepper li::before { content: ""; height: 4px; border-radius: 4px; background: var(--lg-border); }
.lg-stepper li > span::before { content: counter(lg-passo) ". "; }
.lg-stepper li[data-state="done"] { color: var(--lg-text-2); }
.lg-stepper li[data-state="done"]::before { background: var(--lg-brand); }
.lg-stepper li[aria-current="step"] { color: var(--lg-text); }
.lg-stepper li[aria-current="step"]::before { background: var(--lg-accent); }

/* =========================================================
   7. FEEDBACK
   ========================================================= */
/* alerta */
.lg-alert { --_c: var(--lg-info); --_bg: var(--lg-info-bg); display: flex; gap: var(--lg-space-3); align-items: flex-start; padding: var(--lg-space-4); border-radius: var(--lg-radius-md); background: var(--_bg); color: var(--lg-text); border: 1px solid color-mix(in srgb, var(--_c) 28%, transparent); }
.lg-alert > .lg-icon { color: var(--_c); margin-top: 1px; }
.lg-alert__body { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--lg-text-sm); }
.lg-alert__title { font: 600 var(--lg-text-md) var(--lg-font-display); }
.lg-alert__close { flex: none; border: 0; background: none; color: var(--lg-text-2); cursor: pointer; padding: 2px; border-radius: 6px; }
.lg-alert__close:hover { background: color-mix(in srgb, var(--_c) 15%, transparent); }
.lg-alert--success { --_c: var(--lg-success); --_bg: var(--lg-success-bg); }
.lg-alert--warning { --_c: var(--lg-warning); --_bg: var(--lg-warning-bg); }
.lg-alert--danger { --_c: var(--lg-danger); --_bg: var(--lg-danger-bg); }

/* toast */
.lg-toasts { position: fixed; z-index: var(--lg-z-toast); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--lg-space-2); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.lg-toast { --_c: var(--lg-brand); pointer-events: auto; display: flex; gap: var(--lg-space-3); align-items: flex-start; padding: var(--lg-space-4); border-radius: var(--lg-radius-lg); background: var(--lg-surface); color: var(--lg-text); border: 1px solid var(--lg-border); box-shadow: var(--lg-shadow-lg); animation: lg-entra .25s var(--lg-ease); }
.lg-toast > .lg-icon { color: var(--_c); margin-top: 1px; }
.lg-toast__body { flex: 1; min-width: 0; font-size: var(--lg-text-sm); color: var(--lg-text-2); }
.lg-toast__body b { display: block; color: var(--lg-text); font: 600 var(--lg-text-md) var(--lg-font-display); }
.lg-toast__close { border: 0; background: none; color: var(--lg-text-3); cursor: pointer; padding: 2px; border-radius: 6px; }
.lg-toast--success { --_c: var(--lg-success); }
.lg-toast--warning { --_c: var(--lg-warning); }
.lg-toast--danger { --_c: var(--lg-danger); }
.lg-toast--info { --_c: var(--lg-info); }
.lg-toast[data-saindo] { animation: lg-sai .2s var(--lg-ease) forwards; }

/* modal (use <dialog class="lg-modal">) */
.lg-modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--lg-radius-xl); background: var(--lg-surface); color: var(--lg-text); box-shadow: var(--lg-shadow-lg); overflow: auto; }
.lg-modal::backdrop { background: var(--lg-overlay); backdrop-filter: blur(2px); }
.lg-modal[open] { animation: lg-surge .2s var(--lg-ease); }
.lg-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lg-space-4); padding: var(--lg-space-6) var(--lg-space-6) 0; }
.lg-modal__title { font: 700 var(--lg-text-xl)/1.3 var(--lg-font-display); margin: 0; }
.lg-modal__body { padding: var(--lg-space-4) var(--lg-space-6); color: var(--lg-text-2); }
.lg-modal__footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--lg-space-2); padding: var(--lg-space-4) var(--lg-space-6) var(--lg-space-6); }
.lg-modal--drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(420px, 100vw); border-radius: var(--lg-radius-xl) 0 0 var(--lg-radius-xl); }
.lg-modal--drawer[open] { animation: lg-desliza .25s var(--lg-ease); }

/* tooltip: data-lg-tooltip="texto" (o JS liga o aria-describedby) */
[data-lg-tooltip] { position: relative; }
.lg-tooltip { position: fixed; z-index: var(--lg-z-toast); max-width: 240px; padding: 6px 10px; border-radius: 8px; background: var(--lg-noite-950); color: #fff; font: 500 var(--lg-text-xs)/1.4 var(--lg-font-body); pointer-events: none; box-shadow: var(--lg-shadow-md); animation: lg-surge .12s var(--lg-ease); }

/* progresso */
.lg-progress { --value: 0; height: 8px; border-radius: 99px; background: var(--lg-border); overflow: hidden; }
.lg-progress > span { display: block; height: 100%; width: calc(var(--value) * 1%); border-radius: inherit; background: var(--lg-accent); transition: width .4s var(--lg-ease); }
.lg-progress--brand > span { background: var(--lg-brand); }
.lg-progress--success > span { background: var(--lg-success); }
.lg-spinner { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--lg-border); border-top-color: var(--lg-accent); animation: lg-gira .8s linear infinite; }
.lg-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.lg-skeleton { display: block; border-radius: var(--lg-radius-sm); background: linear-gradient(90deg, var(--lg-border) 25%, var(--lg-surface-2) 50%, var(--lg-border) 75%) 0 0/200% 100%; animation: lg-brilho 1.4s linear infinite; min-height: 12px; }

/* =========================================================
   8. DADOS
   ========================================================= */
.lg-badge { --_c: var(--lg-text-2); --_bg: var(--lg-surface-2); display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--lg-radius-pill); background: var(--_bg); color: var(--_c); font: 600 var(--lg-text-xs)/1.6 var(--lg-font-display); white-space: nowrap; border: 1px solid color-mix(in srgb, var(--_c) 18%, transparent); }
.lg-badge--brand { --_c: var(--lg-brand-text); --_bg: var(--lg-brand-soft); }
.lg-badge--accent { --_c: var(--lg-on-accent); --_bg: var(--lg-accent); border-color: transparent; }
.lg-badge--success { --_c: var(--lg-success); --_bg: var(--lg-success-bg); }
.lg-badge--warning { --_c: var(--lg-warning); --_bg: var(--lg-warning-bg); }
.lg-badge--danger { --_c: var(--lg-danger); --_bg: var(--lg-danger-bg); }
.lg-badge--info { --_c: var(--lg-info); --_bg: var(--lg-info-bg); }
.lg-badge--ai { --_c: var(--lg-ai-text); --_bg: var(--lg-ai-soft); }
.lg-badge--ai::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.lg-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* status de parcela */
.lg-status { --_c: var(--lg-text-2); display: inline-flex; align-items: center; gap: 6px; font: 600 var(--lg-text-sm) var(--lg-font-display); color: var(--_c); white-space: nowrap; }
.lg-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.lg-status--pago { --_c: var(--lg-success); }
.lg-status--aberto { --_c: var(--lg-info); }
.lg-status--vence-hoje { --_c: var(--lg-accent-text); }
.lg-status--atrasado { --_c: var(--lg-danger); }
.lg-status--renegociado { --_c: var(--lg-brand-text); }

/* chip */
.lg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--lg-radius-pill); border: 1px solid var(--lg-border-strong); background: var(--lg-surface); color: var(--lg-text); font: 500 var(--lg-text-sm) var(--lg-font-body); cursor: pointer; }
.lg-chip:hover { border-color: var(--lg-brand); }
.lg-chip[aria-pressed="true"] { background: var(--lg-brand-soft); border-color: var(--lg-brand); color: var(--lg-brand-text); font-weight: 600; }
.lg-chip__remove { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; border: 0; border-radius: 50%; background: none; color: var(--lg-text-3); cursor: pointer; }
.lg-chip__remove:hover { background: var(--lg-border); color: var(--lg-text); }
.lg-chips { display: flex; flex-wrap: wrap; gap: var(--lg-space-2); }

/* avatar */
.lg-avatar { --_s: 40px; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); border-radius: 50%; background: var(--lg-brand-soft); color: var(--lg-brand-text); font: 600 calc(var(--_s) * .38) var(--lg-font-display); overflow: hidden; }
.lg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lg-avatar--sm { --_s: 32px; }
.lg-avatar--lg { --_s: 56px; }
.lg-avatar--accent { background: var(--lg-accent); color: var(--lg-on-accent); }
.lg-avatars { display: flex; }
.lg-avatars .lg-avatar + .lg-avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--lg-surface); }

/* cartão */
.lg-card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--lg-radius-lg); background: var(--lg-surface); border: 1px solid var(--lg-border); color: var(--lg-text); }
.lg-card--raised { border-color: transparent; box-shadow: var(--lg-shadow-md); }
.lg-card--interactive { cursor: pointer; transition: border-color var(--lg-dur), box-shadow var(--lg-dur), transform var(--lg-dur); }
.lg-card--interactive:hover { border-color: var(--lg-border-strong); box-shadow: var(--lg-shadow-md); transform: translateY(-2px); }
.lg-card--inverse { background: var(--lg-noite-800); border-color: var(--lg-noite-800); color: #fff; --lg-text: #fff; --lg-text-2: rgba(255,255,255,.75); --lg-text-3: rgba(255,255,255,.6); --lg-border: rgba(255,255,255,.14); }
.lg-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lg-space-3); padding: var(--lg-space-5) var(--lg-space-5) 0; }
.lg-card__title { font: 600 var(--lg-text-lg)/1.3 var(--lg-font-display); margin: 0; }
.lg-card__body { padding: var(--lg-space-4) var(--lg-space-5); flex: 1; color: var(--lg-text-2); }
.lg-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--lg-space-2); padding: var(--lg-space-4) var(--lg-space-5); border-top: 1px solid var(--lg-border); }

/* indicador (número em destaque) */
.lg-stat { display: grid; gap: 4px; }
.lg-stat__label { font-size: var(--lg-text-sm); color: var(--lg-text-2); }
.lg-stat__value { font: 700 var(--lg-text-3xl)/1.1 var(--lg-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--lg-text); }
.lg-stat__delta { font: 600 var(--lg-text-sm) var(--lg-font-display); color: var(--lg-success); }
.lg-stat__delta--down { color: var(--lg-danger); }

/* tabela */
.lg-table-wrap { overflow-x: auto; border: 1px solid var(--lg-border); border-radius: var(--lg-radius-lg); background: var(--lg-surface); }
.lg-table { width: 100%; border-collapse: collapse; font-size: var(--lg-text-sm); color: var(--lg-text); }
.lg-table th { padding: 12px 16px; text-align: left; font: 600 var(--lg-text-xs) var(--lg-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--lg-text-3); background: var(--lg-surface-2); border-bottom: 1px solid var(--lg-border); white-space: nowrap; }
.lg-table td { padding: 14px 16px; border-bottom: 1px solid var(--lg-border); vertical-align: middle; }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table tbody tr:hover { background: var(--lg-surface-2); }
.lg-table .lg-num, .lg-table [data-num] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-table--compact td { padding: 9px 16px; }
.lg-table--zebra tbody tr:nth-child(even) { background: var(--lg-surface-2); }

/* acordeão (use <details class="lg-accordion">) */
.lg-accordion { border-bottom: 1px solid var(--lg-border); }
.lg-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-space-4); padding: var(--lg-space-4) 0; font: 600 var(--lg-text-md) var(--lg-font-display); color: var(--lg-text); cursor: pointer; list-style: none; }
.lg-accordion > summary::-webkit-details-marker { display: none; }
.lg-accordion > summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--lg-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6FFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat; transition: transform var(--lg-dur); }
.lg-accordion[open] > summary::after { transform: rotate(45deg); }
.lg-accordion > summary:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 2px; border-radius: 6px; }
.lg-accordion > :not(summary) { padding-bottom: var(--lg-space-4); color: var(--lg-text-2); margin: 0; }

/* estado vazio */
.lg-empty { display: grid; justify-items: center; gap: var(--lg-space-3); padding: var(--lg-space-10) var(--lg-space-6); text-align: center; border: 1.5px dashed var(--lg-border-strong); border-radius: var(--lg-radius-lg); color: var(--lg-text-2); }
.lg-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--lg-accent-soft); color: var(--lg-accent-text); }
.lg-empty__icon .lg-icon { width: 28px; height: 28px; }
.lg-empty b { font: 600 var(--lg-text-lg) var(--lg-font-display); color: var(--lg-text); }

/* utilitários de layout */
.lg-stack { display: grid; gap: var(--lg-space-4); }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lg-space-3); }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--lg-space-4); }
.lg-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* animações */
@keyframes lg-gira { to { transform: rotate(360deg); } }
@keyframes lg-surge { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes lg-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes lg-sai { to { opacity: 0; transform: translateX(24px); } }
@keyframes lg-desliza { from { transform: translateX(100%); } }
@keyframes lg-brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .lg-popover, .lg-toast, .lg-modal[open], .lg-tooltip { animation: none; }
  .lg-skeleton { animation: none; }
}

/* =========================================================
   LIGNA: componentes de contact center
   ========================================================= */

/* botão de IA: só para ações feitas pela IA (sugerir resposta, resumir ligação) */
.lg-btn--ai { --_bg: var(--lg-ai); --_fg: var(--lg-on-ai); --_bg-h: var(--lg-ai-hover); }

/* faixa de gradiente da marca (topo de cartões de destaque, cabeçalho de painel) */
.lg-gradient-bar { height: 4px; border-radius: 99px; background: var(--lg-gradient); }
.lg-card--glow { position: relative; overflow: hidden; }
.lg-card--glow::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--lg-gradient); }

/* status do operador e do contato */
.lg-status--disponivel { --_c: var(--lg-success); }
.lg-status--em-ligacao { --_c: var(--lg-accent-text); }
.lg-status--em-conversa { --_c: var(--lg-ai-text); }
.lg-status--pausa { --_c: var(--lg-warning); }
.lg-status--offline { --_c: var(--lg-text-3); }
.lg-status--em-ligacao::before { animation: lg-pulso 1.6s var(--lg-ease) infinite; }
@keyframes lg-pulso { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); } }

/* canal: bloco com ícone, como na identidade (telefone, WhatsApp, SMS, RCS, e-mail, URA, chatbot) */
.lg-canais { display: flex; flex-wrap: wrap; gap: var(--lg-space-3); }
.lg-canal { --_c: var(--lg-brand-text); display: inline-grid; justify-items: center; gap: 6px; min-width: 76px; padding: 12px 10px 10px; border: 1px solid var(--lg-border); border-radius: var(--lg-radius-lg); background: var(--lg-surface); color: var(--lg-text-2); font: 600 var(--lg-text-xs)/1.2 var(--lg-font-display); cursor: pointer; transition: border-color var(--lg-dur), box-shadow var(--lg-dur), transform var(--lg-dur) var(--lg-ease); }
.lg-canal .lg-icon { width: 26px; height: 26px; padding: 8px; box-sizing: content-box; border-radius: 12px; background: var(--lg-brand-soft); color: var(--_c); }
.lg-canal:hover { border-color: var(--lg-border-strong); transform: translateY(-1px); }
.lg-canal[aria-pressed="true"] { border-color: var(--lg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 22%, transparent); color: var(--lg-text); }
.lg-canal[aria-pressed="true"] .lg-icon { background: var(--lg-accent); color: var(--lg-on-accent); }
.lg-canal:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 2px; }
.lg-canal--escuro { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.lg-canal--escuro .lg-icon { background: rgba(255,255,255,.08); color: #fff; }

/* barra de ligação do operador */
.lg-callbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lg-space-3) var(--lg-space-4); padding: var(--lg-space-3) var(--lg-space-4); border-radius: var(--lg-radius-lg); background: var(--lg-noite-800); color: #fff; }
.lg-callbar__who { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.lg-callbar__who b { font: 600 var(--lg-text-md) var(--lg-font-display); }
.lg-callbar__who small { color: rgba(255,255,255,.72); font-size: var(--lg-text-xs); }
.lg-callbar__timer { font: 500 var(--lg-text-lg) var(--lg-font-mono); font-variant-numeric: tabular-nums; color: var(--lg-ciano-300); }
.lg-callbar .lg-btn--ghost { --_fg: #fff; --_bg-h: rgba(255,255,255,.1); }
.lg-callbar .lg-status { --_c: var(--lg-ciano-300); }

/* sugestão da IA ao operador */
.lg-ai-hint { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: var(--lg-space-4); border-radius: var(--lg-radius-lg); background: var(--lg-ai-soft); color: var(--lg-text); border: 1px solid color-mix(in srgb, var(--lg-ai) 22%, transparent); }
.lg-ai-hint > .lg-icon { grid-row: span 2; width: 22px; height: 22px; color: var(--lg-ai-text); }
.lg-ai-hint b { font: 600 var(--lg-text-sm) var(--lg-font-display); color: var(--lg-ai-text); }
.lg-ai-hint p { margin: 0; font-size: var(--lg-text-sm); }