/* =====================================================================
   Muvicred UI — tema visual (camada sobre legacy.css)
   ---------------------------------------------------------------------
   Objetivo: aparência profissional, botões com leve relevo (3D suave),
   mobile com cara de app (barra inferior, cards, toques de 48px).
   Não muda markup: reestiliza as classes já usadas pelas páginas.
   Tokens: --lc-*  (espelham o design system Muvicred).
   ===================================================================== */

:root {
    /* Paleta extraída da logo Muvicred: navy #060F5E, azul #1A52F5, cinza #7F8899 */
    --lc-navy-900: #040A45;
    --lc-navy-800: #060F5E;
    --lc-navy-700: #0D1C80;
    --lc-navy-600: #1530A8;
    --lc-blue-600: #1443D1;
    --lc-blue-500: #1A52F5;
    --lc-blue-400: #4F7BFF;
    --lc-blue-100: #DCE5FF;
    --lc-blue-50:  #EEF2FF;
    --lc-slate-900: #10183F;
    --lc-slate-700: #3B4663;
    --lc-slate-500: #7F8899;
    --lc-slate-300: #C2CAD8;
    --lc-slate-200: #DADFEA;
    --lc-slate-100: #ECEFF5;
    --lc-slate-50:  #F5F7FB;
    --lc-green-500: #1A9C5B;
    --lc-green-100: #DDF5E7;
    --lc-red-500:   #E04848;
    --lc-red-100:   #FDE7E7;
    --lc-amber-600: #D9A41E;
    --lc-amber-500: #F2B824;
    --lc-amber-100: #FFF3C2;

    --lc-bg: var(--lc-slate-50);
    --lc-surface: #FFFFFF;
    --lc-sunken: var(--lc-slate-100);
    --lc-text: var(--lc-slate-900);
    --lc-text-2: var(--lc-slate-500);
    --lc-border: var(--lc-slate-200);
    --lc-border-strong: var(--lc-slate-300);
    /* Cores de marca vêm do cadastro do tenant (branding_css_inline sobrescreve
       --cor-primaria/--cor-destaque depois deste arquivo); a logo da Muvicred
       define os valores padrão. */
    --lc-primary: var(--cor-destaque, var(--lc-blue-500));
    --lc-primary-strong: color-mix(in srgb, var(--lc-primary) 85%, #000);
    --lc-primary-soft: color-mix(in srgb, var(--lc-primary) 9%, #fff);
    --lc-navy: var(--cor-primaria, var(--lc-navy-800));
    --lc-accent: var(--lc-blue-400);

    --lc-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --lc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --lc-radius-sm: 10px;
    --lc-radius-md: 14px;
    --lc-radius-lg: 18px;
    --lc-radius-xl: 24px;

    /* Elevação: sombra fria com leve brilho superior (profundidade sem peso) */
    --lc-shadow-card: 0 1px 2px rgba(19,32,63,.04), 0 10px 30px -18px rgba(19,32,63,.22);
    --lc-shadow-card-hover: 0 2px 4px rgba(19,32,63,.06), 0 18px 40px -20px rgba(19,32,63,.30);
    --lc-shadow-float: 0 20px 50px -24px rgba(19,32,63,.45);
    --lc-inset-light: inset 0 1px 0 rgba(255,255,255,.55);

    /* Reaproveita tokens do legacy pra tudo que não for sobrescrito aqui */
    --cor-cinza-fundo: var(--lc-bg);
    --cor-cinza-card: var(--lc-surface);
    --cor-cinza-borda: var(--lc-border);
    --cor-cinza-texto: var(--lc-text-2);
    --cor-texto-principal: var(--lc-text);
    --cor-sucesso: var(--lc-green-500);
    --cor-erro: var(--lc-red-500);
    --cor-alerta: var(--lc-amber-600);
    --raio-borda: var(--lc-radius-sm);
    --raio-borda-grande: var(--lc-radius-lg);
    --sombra-card: var(--lc-shadow-card);
    --sombra-card-hover: var(--lc-shadow-card-hover);
    --altura-topbar: 68px;
    --largura-sidebar: 256px;
}

/* ---------- Base ---------- */
body { background: var(--lc-bg); color: var(--lc-text); font-family: var(--lc-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .card-titulo, .kpi-valor, .login-brand h1 { font-family: var(--lc-font-display); letter-spacing: -.02em; }
h1 { font-size: 28px; font-weight: 800; color: var(--lc-text); line-height: 1.15; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
a { color: var(--lc-primary); }
::selection { background: var(--lc-blue-100); }
:focus-visible { outline: 3px solid rgba(45,91,255,.35); outline-offset: 2px; border-radius: 6px; }

/* ---------- Topbar ---------- */
.topbar {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    color: var(--lc-text);
    border-bottom: 1px solid var(--lc-border);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.topbar-inner { padding: 0 24px; gap: 14px; }
.topbar-marca, .topbar-marca:hover { color: var(--lc-navy); }
.topbar-marca-titulo { font-family: var(--lc-font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.topbar-marca-sub { color: var(--lc-text-2); letter-spacing: .14em; }
.topbar-marca-logo { max-height: 38px; max-width: 200px; width: auto; }
.login-brand img { max-width: 240px !important; max-height: 70px !important; margin-bottom: 18px !important; }
.topbar-marca-logo-placeholder { color: var(--lc-navy); }
.topbar-menu-toggle { color: var(--lc-navy); width: 42px; height: 42px; display: none; align-items: center; justify-content: center; border-radius: 12px; }
.topbar-menu-toggle:hover { background: var(--lc-sunken); }
.header-usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-usuario .badge, .header-usuario .acao-pill { border-radius: 999px; }
.sino-btn { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--lc-navy); background: transparent; }
.sino-btn:hover { background: var(--lc-sunken); }
.sino-badge { background: var(--lc-red-500); box-shadow: 0 0 0 2px #fff; }
.sino-dropdown { border-radius: var(--lc-radius-md); box-shadow: var(--lc-shadow-float); border: 1px solid var(--lc-border); }

/* ---------- Sidebar ---------- */
.sidebar {
    background: linear-gradient(180deg, var(--lc-navy) 0%, color-mix(in srgb, var(--lc-navy) 70%, #000) 100%);
    border-right: 0;
    color: #fff;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}
.sidebar-nav { padding: 10px 10px; gap: 1px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.sidebar-perfil { flex: 0 0 auto; }
.sidebar-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 11px; min-height: 40px;
    color: rgba(255,255,255,.72); font-size: 14px; font-weight: 500;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    border-left: 0;
}
.sidebar-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-item.ativo, .sidebar-item.ativo:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
    color: #fff; font-weight: 600;
    box-shadow: var(--lc-inset-light), 0 6px 16px -10px rgba(0,0,0,.6);
    border-left: 0;
}
.sidebar-item.ativo .sidebar-item-icone { color: #8FB0FF; }
.sidebar-item-icone { color: rgba(255,255,255,.65); display: inline-flex; width: 22px; justify-content: center; }
.sidebar-item-icone svg { width: 20px; height: 20px; }
.sidebar-item-badge { background: rgba(255,255,255,.14); color: #fff; }
.sidebar-perfil { background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.08); padding: 8px 10px; }
.sidebar-perfil-item { padding: 6px 8px; }
.sidebar-perfil-divisor { margin: 6px 0; }
.sidebar-perfil-sair { padding: 8px 12px; min-height: 38px; font-size: 13.5px; }
.sidebar-perfil-item { color: #fff; border-radius: 12px; }
.sidebar-perfil-item:hover, .sidebar-perfil-item.ativo { background: rgba(255,255,255,.08); }
.sidebar-perfil-avatar { background: var(--lc-primary); color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.sidebar-perfil-label { color: #fff; }
.sidebar-perfil-meta { color: rgba(255,255,255,.6); }
.sidebar-perfil-divisor { background: rgba(255,255,255,.08); }
.sidebar-perfil-sair { color: #FFB4B4; border: 1px solid rgba(255,180,180,.25); border-radius: 12px; background: rgba(224,72,72,.10); }
.sidebar-perfil-sair:hover { background: rgba(224,72,72,.22); color: #fff; }
.sidebar-overlay { background: rgba(7,22,63,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* ---------- Main / títulos ---------- */
.main { padding: 28px 32px 48px; }
.titulo-pagina { margin-bottom: 22px; }
.titulo-pagina h1 { margin: 0 0 4px; }
.titulo-pagina-subtitulo { color: var(--lc-text-2); font-size: 14.5px; }
.titulo-pagina-flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card, .bloco, .card-filtros, .card-grafico, .card-resumo-calculo, .card-sugestao, .simulador-card {
    background: var(--lc-surface);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
}
.card { padding: 22px; }
.card-hover:hover { box-shadow: var(--lc-shadow-card-hover); transform: translateY(-1px); }
.card-titulo { font-size: 17px; font-weight: 700; color: var(--lc-text); margin-bottom: 14px; }
.card-explicativo { background: var(--lc-primary-soft); border: 1px solid var(--lc-blue-100); border-radius: var(--lc-radius-md); color: var(--lc-slate-700); }

/* ---------- KPIs ---------- */
.grid-kpi { gap: 16px; }
.kpi {
    position: relative; overflow: hidden;
    padding: 20px 22px 18px;
    border-radius: var(--lc-radius-lg);
    border: 1px solid var(--lc-border);
    background: linear-gradient(180deg, #fff 0%, #FBFCFE 100%);
    box-shadow: var(--lc-shadow-card), var(--lc-inset-light);
}
.kpi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--lc-blue-400), var(--lc-primary));
    border-radius: 0 4px 4px 0;
}
.kpi-label { color: var(--lc-text-2); font-size: 11.5px; letter-spacing: .08em; margin-bottom: 8px; }
.kpi-valor { color: var(--lc-navy); font-size: clamp(20px, 1.75vw, 28px); font-weight: 800; white-space: nowrap; letter-spacing: -.03em; }
.kpi-rodape { color: var(--lc-text-2); }
.mini-kpi { background: var(--lc-sunken); border-radius: var(--lc-radius-md); border: 1px solid var(--lc-border); }
.mini-kpi-valor { color: var(--lc-navy); font-family: var(--lc-font-display); font-weight: 800; }

/* ---------- Botões (relevo 3D suave) ---------- */
.btn {
    font-family: var(--lc-font);
    font-size: 14px; font-weight: 600; letter-spacing: -.005em;
    padding: 11px 18px; min-height: 42px;
    border-radius: 12px;
    border: 1px solid transparent;
    position: relative;
    transition: transform .12s cubic-bezier(.23,1,.32,1), box-shadow .15s ease, background .15s ease, filter .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(2px); }
.btn:disabled, .btn[disabled] { transform: none; filter: saturate(.6); }

.btn-primario {
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--lc-primary) 78%, #fff) 0%, var(--lc-primary) 55%, color-mix(in srgb, var(--lc-primary) 88%, #000) 100%);
    border-color: color-mix(in srgb, var(--lc-primary) 80%, #000);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--lc-primary) 70%, #000), 0 10px 20px -10px color-mix(in srgb, var(--lc-primary) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primario:hover { color: #fff; filter: brightness(1.06); }
.btn-primario:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--lc-primary) 70%, #000), inset 0 1px 0 rgba(255,255,255,.25); }

.btn-destaque {
    color: #fff;
    background: linear-gradient(180deg, #7A9CFF 0%, var(--lc-blue-400) 55%, #3763E8 100%);
    border-color: #2F57D6;
    box-shadow: 0 3px 0 #2447B8, 0 10px 20px -10px rgba(79,123,255,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-destaque:hover { color: #fff; filter: brightness(1.06); }
.btn-destaque:active { box-shadow: 0 1px 0 #2447B8, inset 0 1px 0 rgba(255,255,255,.3); }

.btn-secundario {
    color: var(--lc-navy);
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
    border-color: var(--lc-border-strong);
    box-shadow: 0 2px 0 var(--lc-slate-200), 0 6px 14px -10px rgba(19,32,63,.35), inset 0 1px 0 #fff;
}
.btn-secundario:hover { background: linear-gradient(180deg, #FFFFFF 0%, #EEF2FF 100%); border-color: var(--lc-blue-400); color: var(--lc-primary-strong); }
.btn-secundario:active { box-shadow: 0 0 0 var(--lc-slate-200), inset 0 1px 0 #fff; }

.btn-fantasma { color: var(--lc-slate-700); background: #fff; border-color: var(--lc-border); box-shadow: none; }
.btn-fantasma:hover { background: var(--lc-sunken); color: var(--lc-navy); }

.btn-perigo {
    color: #fff;
    background: linear-gradient(180deg, #F06A6A 0%, var(--lc-red-500) 60%, #C93B3B 100%);
    border-color: #B93333;
    box-shadow: 0 3px 0 #A12C2C, 0 10px 20px -10px rgba(224,72,72,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-perigo:hover { color: #fff; filter: brightness(1.05); }
.btn-perigo:active { box-shadow: 0 1px 0 #A12C2C; }

.btn-pequeno { padding: 7px 12px; min-height: 34px; font-size: 13px; border-radius: 10px; }
.btn-pequeno.btn-primario, .btn-pequeno.btn-destaque, .btn-pequeno.btn-perigo { box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-largo { padding-left: 28px; padding-right: 28px; }
.btn-full { min-height: 48px; font-size: 15px; }

/* Pills de ação em tabelas */
.acao-pill {
    border-radius: 10px; border: 1px solid var(--lc-border-strong);
    background: linear-gradient(180deg, #fff, #F4F6FB);
    box-shadow: 0 1px 0 var(--lc-slate-200); color: var(--lc-navy);
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
.acao-pill:hover { border-color: var(--lc-blue-400); color: var(--lc-primary-strong); box-shadow: 0 2px 0 var(--lc-blue-100); }
.acao-pill:active { transform: translateY(1px); box-shadow: none; }

/* ---------- Formulários ---------- */
.form-grupo label { font-size: 13px; font-weight: 600; color: var(--lc-slate-700); }
.input, .select, .textarea {
    padding: 11px 14px; min-height: 44px;
    font-size: 14.5px;
    border: 1px solid var(--lc-border-strong);
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(19,32,63,.05);
    transition: border-color .15s, box-shadow .15s;
}
.select, select.input { appearance: none; -webkit-appearance: none; padding-right: 40px; min-width: 96px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6785' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--lc-primary); box-shadow: 0 0 0 4px rgba(45,91,255,.16), inset 0 1px 2px rgba(19,32,63,.04); }
.input[readonly], .input:disabled { background: var(--lc-sunken); box-shadow: none; }
.form-grupo .erro-campo { color: var(--lc-red-500); font-weight: 500; }
.input.invalido, .select.invalido { border-color: var(--lc-red-500); box-shadow: 0 0 0 4px rgba(224,72,72,.14); }
.form-acoes { gap: 12px; margin-top: 14px; }
.form-acoes .btn { min-height: 46px; }
.texto-ajuda, .form-grupo .ajuda { color: var(--lc-text-2); }

/* Input de arquivo: vira uma área de toque clara em vez do controle nativo */
input[type="file"] {
    display: block; width: 100%; padding: 12px 14px; min-height: 48px;
    border: 1.5px dashed var(--lc-border-strong); border-radius: 12px; background: var(--lc-sunken);
    color: var(--lc-slate-700); font-size: 14px; cursor: pointer;
}
input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 8px 14px; border: 1px solid var(--lc-border-strong); border-radius: 10px;
    background: linear-gradient(180deg, #fff, #F4F6FB); color: var(--lc-navy); font-weight: 600; font-family: inherit;
    box-shadow: 0 2px 0 var(--lc-slate-200); cursor: pointer;
}
input[type="file"]:hover { border-color: var(--lc-blue-400); background: var(--lc-primary-soft); }
input[type="date"], input[type="month"], input[type="week"], input[type="time"] { font-family: var(--lc-font); }

/* Formulário em 2 colunas (classe opt-in no <form>) */
.lc-form-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.lc-form-2col .form-grupo:has(textarea), .lc-form-2col .form-acoes, .lc-form-2col .alertas-area, .lc-form-2col .card-resumo-calculo, .lc-form-2col > h2, .lc-form-2col > h3, .lc-form-2col > p { grid-column: 1 / -1; }
@media (max-width: 760px) { .lc-form-2col { grid-template-columns: 1fr; } }

/* ---------- Tabelas ---------- */
.tabela-wrapper { border-radius: var(--lc-radius-lg); border: 1px solid var(--lc-border); box-shadow: var(--lc-shadow-card); }
.tabela { font-size: 13.5px; }
.tabela thead th { background: var(--lc-sunken); color: var(--lc-slate-700); font-size: 11px; letter-spacing: .08em; padding: 12px 14px; border-bottom: 1px solid var(--lc-border); }
.tabela tbody td { padding: 12px 14px; border-bottom: 1px solid var(--lc-slate-100); }
.tabela td:first-child, .tabela th:first-child { padding-left: 18px; } .tabela td:last-child, .tabela th:last-child { padding-right: 18px; }
@media (min-width: 769px) {
    .tabela td { max-width: 260px; }
    /* Tabelas com 8+ colunas: mais compactas pra caber em 1440px sem cortar ações */
    .tabela:has(th:nth-child(8)) { font-size: 12.5px; }
    .tabela:has(th:nth-child(8)) thead th, .tabela:has(th:nth-child(8)) tbody td { padding: 9px 8px; }
    .tabela:has(th:nth-child(8)) td[data-label="Nome"], .tabela:has(th:nth-child(8)) td[data-label="Cliente"], .tabela:has(th:nth-child(8)) td[data-label="Vendedor"], .tabela:has(th:nth-child(8)) td[data-label="Banco"] { min-width: 120px; }
    .tabela:has(th:nth-child(8)) .acao-pill { width: 30px; height: 30px; min-height: 30px; padding: 0; }
    .tabela-wrapper { overflow-x: auto; }
    /* Tabela larga: cresce até o conteúdo e rola dentro do card em vez de cortar a última coluna */
    .tabela:has(th:nth-child(8)) { width: 100%; table-layout: auto; }
    .tabela:has(th:nth-child(8)) .tabela-acoes { gap: 4px; }
    .tabela:has(th:nth-child(8)) td[data-label="Cliente"], .tabela:has(th:nth-child(8)) td[data-label="Banco"], .tabela:has(th:nth-child(8)) td[data-label="Vendedor"] { white-space: normal; min-width: 0; max-width: 150px; }
    .tabela:has(th:nth-child(8)) td[data-label="Data"] { white-space: nowrap; }
}
.tabela tbody tr:nth-child(even) td { background: transparent; }
.tabela tbody tr:hover td { background: var(--lc-primary-soft); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela-acoes { display: flex; gap: 6px; align-items: center; }

/* ---------- Badges / alertas ---------- */
.badge { border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: .04em; padding: 4px 10px; }
.badge-sucesso { background: var(--lc-green-100); color: #0B6630; }
.badge-erro { background: var(--lc-red-100); color: #A12C2C; }
.badge-alerta { background: var(--lc-amber-100); color: #8A6A00; }
.badge-info { background: var(--lc-blue-100); color: var(--lc-blue-600); }
.badge-neutro { background: var(--lc-sunken); color: var(--lc-slate-700); }
.badge-destaque { background: var(--lc-navy); color: #fff; }
.alerta { border-radius: var(--lc-radius-md); border-width: 1px; padding: 13px 16px; font-weight: 500; box-shadow: var(--lc-shadow-card); }
.alerta-sucesso { background: var(--lc-green-100); border-color: #B9E8CB; color: #0B6630; }
.alerta-erro { background: var(--lc-red-100); border-color: #F5BDBD; color: #A12C2C; }
.alerta-alerta { background: var(--lc-amber-100); border-color: #F2DE9A; color: #7A5C00; }
.alerta-info { background: var(--lc-blue-50); border-color: var(--lc-blue-100); color: var(--lc-blue-600); }

/* ---------- Estado vazio ---------- */
.lista-vazia, .celula-vazia, .chat-vazio, .sino-vazio {
    color: var(--lc-text-2); font-style: normal;
    background: var(--lc-sunken); border: 1px dashed var(--lc-border-strong);
    border-radius: var(--lc-radius-md); padding: 22px 18px; text-align: center;
}
td.celula-vazia { border-radius: 0; border: 0; background: transparent; }

/* ---------- Paginação, filtros, abas ---------- */
.paginacao .btn, .paginacao a { border-radius: 10px; }
.card-filtros { padding: 18px 20px; }
.barra-busca input.input { padding-left: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat; background-position: 13px center; }
.comissoes-abas, .tabs-meses { gap: 6px; }
.comissao-aba, .tab-mes { border-radius: 999px; padding: 8px 14px; font-weight: 600; border: 1px solid var(--lc-border-strong); background: #fff; color: var(--lc-slate-700); }
.comissao-aba-ativa, .tab-mes.ativo, .tab-mes[aria-current] { background: var(--lc-navy); color: #fff; border-color: var(--lc-navy); box-shadow: 0 6px 14px -8px rgba(11,31,92,.6); }
.progresso { background: var(--lc-sunken); border-radius: 999px; height: 12px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(19,32,63,.08); }
.progresso-barra, .progresso-barra.meta-batida { background: linear-gradient(90deg, var(--lc-blue-400), var(--lc-primary)) !important; color: #fff !important; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- Filtros compactos ---------- */
form.card-filtros, .card-filtros form, .filtros-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.card-filtros .form-grupo .texto-ajuda, .card-filtros .form-grupo .ajuda { position: absolute; top: 100%; left: 0; margin-top: 4px; white-space: nowrap; }
.card-filtros .form-grupo { position: relative; }
.card-filtros:has(.form-grupo .texto-ajuda), .card-filtros:has(.form-grupo .ajuda) { padding-bottom: 40px; }
.card-filtros form > .btn, form.card-filtros > .btn, form.card-filtros > .filtros-acoes, .card-filtros .filtros-acoes, .card-filtros .form-acoes { margin-top: 25px; }
form.card-filtros > .filtros-grid { display: contents; }
form.card-filtros > .btn, form.card-filtros > .filtros-acoes { align-self: flex-start; }
.card-filtros .form-grupo, .filtros-grid .form-grupo { margin-bottom: 0; flex: 1 1 180px; max-width: 260px; }
.card-filtros form > .btn, form.card-filtros > .btn, .filtros-grid > .btn, .card-filtros .filtros-acoes, .card-filtros .form-acoes { flex: 0 0 auto; margin-bottom: 0; }
@media (max-width: 760px) { .card-filtros .form-grupo, .filtros-grid .form-grupo { max-width: none; flex-basis: 100%; } .card-filtros form > .btn { width: 100%; } }
.filtros-acoes { display: flex; gap: 8px; align-items: center; }
.card-filtros .btn, .filtros-acoes .btn { min-height: 44px; }
.tabs-meses, .comissoes-abas, .avisos-tags, .chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs-meses::-webkit-scrollbar, .comissoes-abas::-webkit-scrollbar { display: none; }
.tab-mes, .comissao-aba, .avisos-tag { flex: 0 0 auto; white-space: nowrap; }
.avisos-tag { border-radius: 999px; }
/* Células numéricas e de data nunca quebram */
.tabela td.col-numero, .tabela td.texto-monetario, .tabela th.col-numero,
.tabela td[data-label="CPF"], .tabela td[data-label="Telefone"], .tabela td[data-label="Data"], .tabela td[data-label="Nascimento"],
.tabela td[data-label*="Valor"], .tabela td[data-label*="Contrato"], .tabela td[data-label*="Comiss"], .tabela td[data-label*="Meta"],
.tabela td[data-label="Status"], .tabela td[data-label="Ações"] { white-space: nowrap; }
.tabela-acoes { flex-wrap: nowrap; }
.tabela td:has(.tabela-acoes) { white-space: nowrap; }
.lista-vazia { position: relative; padding-top: 64px !important; text-align: center; }
.lista-vazia::before {
    content: ""; position: absolute; top: 18px; left: 50%; width: 32px; height: 32px; transform: translateX(-50%); opacity: .55;
    background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%237F8899' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8v13H3V8'/><path d='M1 3h22v5H1z'/><path d='M10 12h4'/></svg>");
}
.lista-vazia .btn { margin-top: 12px; }
td.celula-vazia { padding-top: 14px; } td.celula-vazia::before { display: none; }
/* Segmented control (Semana | Mês e afins) */
.segmentado { display: inline-flex; background: var(--lc-sunken); border-radius: 12px; padding: 4px; gap: 2px; border: 1px solid var(--lc-border); }
.segmentado a, .segmentado button { padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--lc-text-2); text-decoration: none; border: 0; background: transparent; }
.segmentado .ativo { background: #fff; color: var(--lc-navy); box-shadow: 0 1px 2px rgba(19,32,63,.12), 0 2px 0 rgba(255,255,255,.6) inset; }

/* ---------- Ranking: identidade única em vez de cores aleatórias ---------- */
.podio-medalha-emoji { display: none; }
.podio-avatar-fallback, .ranking-avatar-mini .podio-avatar-fallback {
    background: linear-gradient(160deg, var(--lc-primary), var(--lc-navy)) !important;
    color: #fff !important; box-shadow: 0 0 0 4px #fff, 0 8px 20px -10px rgba(6,15,94,.6);
}
.podio-card { border-radius: var(--lc-radius-lg); border: 1px solid var(--lc-border); box-shadow: var(--lc-shadow-card); background: #fff; }
.podio-moderno .podio-pos-1, .podio-pos-1 { border-color: var(--lc-primary) !important; box-shadow: 0 0 0 4px var(--lc-primary-soft), var(--lc-shadow-card-hover) !important; background: linear-gradient(180deg, var(--lc-primary-soft), #fff 60%) !important; }
.podio-posicao-numero { display: inline-block; background: var(--lc-sunken); color: var(--lc-navy); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.podio-pos-1 .podio-posicao-numero { background: var(--lc-primary); color: #fff; }
.podio-qtd-vendas { color: var(--lc-text-2); font-size: 13px; margin-top: 6px; white-space: nowrap; }
.podio-tag-voce { margin-left: 6px; }
.progresso-texto, .progresso-info b { white-space: nowrap; }
.progresso { position: relative; height: 18px; }
.progresso-info { gap: 12px; flex-wrap: wrap; } .progresso-info span { white-space: nowrap; }
.progresso-texto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,.94); color: var(--lc-navy) !important; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; box-shadow: 0 1px 2px rgba(19,32,63,.18); line-height: 1.3; }
.ranking-posicao-circle { background: var(--lc-sunken); color: var(--lc-navy); font-weight: 700; }
.ranking-valor { color: var(--lc-navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.ranking-meta-info { color: var(--lc-text-2); font-size: 12.5px; }
.perfil-avatar, .avatar-iniciais, [class*="avatar-fallback"], [class*="avatar-iniciais"] { background: linear-gradient(160deg, var(--lc-primary), var(--lc-navy)) !important; color: #fff !important; }
/* Upload estilizado (app.js troca o controle nativo por botão + nome do arquivo) */
.lc-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1.5px dashed var(--lc-border-strong); border-radius: 12px; background: var(--lc-sunken); cursor: pointer; min-height: 56px; }
.lc-file:hover { border-color: var(--lc-blue-400); background: var(--lc-primary-soft); }
.lc-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.lc-file-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--lc-border-strong); background: linear-gradient(180deg, #fff, #F4F6FB); color: var(--lc-navy); font-weight: 600; font-size: 13.5px; box-shadow: 0 2px 0 var(--lc-slate-200); }
.lc-file-nome { color: var(--lc-text-2); font-size: 13.5px; }
.lc-file.tem-arquivo .lc-file-nome { color: var(--lc-text); font-weight: 600; }

/* ---------- Mural de avisos: paleta da marca em vez de bege/teal ---------- */
.chat-container { background: var(--lc-sunken) !important; background-image: none !important; border-radius: var(--lc-radius-lg); border: 1px solid var(--lc-border); }
.chat-bolha { background: #fff !important; border: 1px solid var(--lc-border) !important; border-radius: 14px !important; box-shadow: var(--lc-shadow-card); }
.chat-bolha::before { display: none !important; }
.chat-autor { color: var(--lc-primary) !important; }
.chat-dia-separador { color: var(--lc-text-2); }
.chat-tag-broadcast, .chat-tag-direto { border-radius: 999px; background: var(--lc-primary-soft); color: var(--lc-primary-strong); }
.avisos-tag-ativa { background: var(--lc-navy) !important; color: #fff !important; border-color: var(--lc-navy) !important; }
/* Mini KPIs (vendas/folha) iguais aos KPIs do dashboard */
.mini-kpi { background: linear-gradient(180deg, #fff 0%, #FBFCFE 100%) !important; border: 1px solid var(--lc-border); box-shadow: var(--lc-shadow-card); border-radius: var(--lc-radius-md); }
.mini-kpi-label { color: var(--lc-text-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
/* Ranking: linha em flex, valor à direita sem quebrar */
.lista-ranking-moderna li { display: flex; align-items: center; gap: 12px; }
.lista-ranking-moderna .ranking-nome-info { display: flex; flex-direction: column; min-width: 0; }
.lista-ranking-moderna .ranking-valor { margin-left: auto; white-space: nowrap; }
.podio-pos-3, .podio-pos-2 { border-color: var(--lc-border) !important; }
/* Abas e badges nunca quebram */
[role="tab"], .aba, .comissao-aba, .tab-mes, .badge, .comissao-aba-badge { white-space: nowrap; }
/* Colunas de nome com largura mínima no desktop */
@media (min-width: 769px) { .tabela td[data-label="Nome"], .tabela td[data-label="Cliente"], .tabela td[data-label="Vendedor"], .tabela td[data-label="Banco"] { min-width: 170px; } }

/* Chips de status/filtro que vinham com border-left inline: viram pílula com ponto de cor */
.btn[style*="border-left"] { border-left-width: 1px !important; border-radius: 999px; padding-left: 14px; position: relative; }
.btn.btn-fantasma[style*="border-left"] { border: 1px solid var(--lc-border-strong) !important; background: #fff; }
.btn[style*="border-left"]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; opacity: .8; }
.card[style*="border-left"] { border-left-width: 1px !important; }
/* Link WhatsApp vira pílula */
.link-whatsapp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--lc-green-100); color: #0B6630 !important; font-weight: 600; font-size: 12.5px; white-space: nowrap; text-decoration: none !important; }
/* Grids de KPI de outras páginas em 2 colunas no mobile */
.mini-kpis, .cards-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
@media (max-width: 1024px) { .mini-kpis, .cards-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .mini-kpi, .cards-resumo .card { padding: 14px; } .cards-resumo .card > div:last-child { font-size: 20px !important; } }

/* Avisos no dashboard: não lidos em azul-claro da marca (não bege) */
.aviso-item { background: var(--lc-primary-soft) !important; border-color: var(--lc-blue-100) !important; border-left: 3px solid var(--lc-primary) !important; border-radius: 12px; }
.aviso-item.lido, .aviso-item.aviso-lido { background: #fff !important; border-left-color: var(--lc-border) !important; }

/* ---------- Rodapé ---------- */
.rodape { margin-top: 40px; color: var(--lc-text-2); }

/* ---------- Login ---------- */
.tela-login {
    background:
        radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--lc-primary) 45%, transparent), transparent 70%),
        radial-gradient(50% 40% at 90% 90%, rgba(127,136,153,.25), transparent 70%),
        linear-gradient(160deg, var(--lc-navy), color-mix(in srgb, var(--lc-navy) 70%, #000));
}
.login-tela { max-width: 440px; }
.login-card {
    padding: 40px 36px 32px;
    border-radius: var(--lc-radius-xl);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--lc-shadow-float), 0 0 0 1px rgba(255,255,255,.08);
}
.login-brand h1 { font-size: 32px; color: var(--lc-navy); letter-spacing: -.02em; }
.login-divisor { background: var(--lc-primary); width: 40px; height: 4px; border-radius: 999px; }
.login-tagline { font-style: normal; color: var(--lc-text-2); font-weight: 500; }
.login-card .btn-full { margin-top: 6px; }
.login-footer { border-top-color: var(--lc-slate-100); }

/* ---------- Barra de abas (mobile, injetada pelo app.js) ---------- */
.lc-tabbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--lc-border);
    box-shadow: 0 -8px 24px -18px rgba(19,32,63,.35);
}
.lc-tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 52px; border-radius: 14px; color: var(--lc-slate-500);
    font-size: 11px; font-weight: 600; text-decoration: none; background: transparent; border: 0;
    -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, transform .12s;
}
.lc-tabbar-item svg { width: 22px; height: 22px; }
.lc-tabbar-item:active { transform: scale(.94); }
.lc-tabbar-item.ativo { color: var(--lc-primary-strong); background: var(--lc-primary-soft); }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1024px) {
    :root { --altura-topbar: 60px; }
    .topbar-inner { padding: 0 12px; gap: 8px; }
    .topbar-menu-toggle { display: inline-flex; }
    .main { padding: 18px 16px calc(88px + env(safe-area-inset-bottom, 0px)); }
    h1 { font-size: 24px; }
    .lc-tabbar { display: flex; gap: 4px; }
    /* Menu lateral aberto: a tabbar sai de cena (mesmo z-index 90 cobria
       "Meu perfil"/"Sair" no rodapé da sidebar). A classe no body vem do
       app.js; o :has() é redundância pra quando a sidebar abre por outro
       caminho. Regras separadas pra um seletor não invalidar o outro. */
    body.sidebar-aberta .lc-tabbar { display: none; }
    body:has(.sidebar.aberto) .lc-tabbar { display: none; }
    .sidebar { width: min(300px, 84vw); border-radius: 0 22px 22px 0; box-shadow: var(--lc-shadow-float); }
    .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .kpi { padding: 16px 16px 14px; }
    .kpi-valor { font-size: 22px; }
    .kpi-label { font-size: 10.5px; margin-bottom: 6px; }
    .card { padding: 18px; border-radius: var(--lc-radius-md); }
    .card-titulo { font-size: 16px; }
    .btn { min-height: 46px; }
    .btn-pequeno { min-height: 38px; }
    .titulo-pagina-flex .btn { width: 100%; }
    .form-acoes { flex-direction: column-reverse; }
    .form-acoes .btn { width: 100%; }
    .input, .select, .textarea { font-size: 16px; } /* evita zoom do iOS */
}

/* Tabelas viram cards abaixo de 768px (app.js grava data-label em cada td) */
@media (max-width: 768px) {
    .tabela-wrapper { border: 0; box-shadow: none; background: transparent; overflow: visible; }
    .tabela.lc-cards { border-collapse: separate; border-spacing: 0 10px; }
    .tabela.lc-cards thead { display: none; }
    .tabela.lc-cards tbody, .tabela.lc-cards tr { display: block; }
    .tabela.lc-cards tr {
        background: var(--lc-surface); border: 1px solid var(--lc-border);
        border-radius: var(--lc-radius-md); box-shadow: var(--lc-shadow-card);
        padding: 6px 14px; margin-bottom: 10px;
    }
    .tabela.lc-cards td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 9px 0; border-bottom: 1px solid var(--lc-slate-100);
        text-align: right; background: transparent !important;
    }
    .tabela.lc-cards td:last-child { border-bottom: 0; }
    .tabela.lc-cards tr { display: flex; flex-direction: column; }
    .tabela.lc-cards td[data-label="Nome"], .tabela.lc-cards td[data-label="Cliente"], .tabela.lc-cards td[data-label="Servidor"], .tabela.lc-cards td[data-label="Nome do servidor"], .tabela.lc-cards td[data-label="Vendedor"]:first-child, .tabela.lc-cards td[data-label="Banco"]:first-child, .tabela.lc-cards td[data-label="Título"] {
        order: -1; display: block; text-align: left; font-weight: 700; font-size: 15.5px; color: var(--lc-navy); padding: 10px 0 8px; white-space: normal;
    }
    .tabela.lc-cards td[data-label="Nome"]::before, .tabela.lc-cards td[data-label="Cliente"]::before, .tabela.lc-cards td[data-label="Servidor"]::before, .tabela.lc-cards td[data-label="Nome do servidor"]::before, .tabela.lc-cards td[data-label="Vendedor"]:first-child::before, .tabela.lc-cards td[data-label="Banco"]:first-child::before, .tabela.lc-cards td[data-label="Título"]::before { display: none; }
    .tabela.lc-cards td[data-label="Nome"] > div, .tabela.lc-cards td[data-label="Cliente"] > div { text-align: left; }
    .tabela.lc-cards td[data-label="Nome"] small, .tabela.lc-cards td[data-label="Cliente"] small, .tabela.lc-cards td[data-label="Cliente"] .texto-secundario { font-weight: 500; color: var(--lc-text-2); font-size: 12.5px; }
    .tabela.lc-cards td:has(.tabela-acoes), .tabela.lc-cards td.col-acoes { order: 99; }
    .tabela.lc-cards .acao-pill, .tabela.lc-cards .tabela-acoes .btn { min-width: 44px; min-height: 44px; }
    .tabela.lc-cards td[data-label="CPF"], .tabela.lc-cards td[data-label="E-mail"], .tabela.lc-cards td[data-label="Telefone"] { word-break: keep-all; overflow-wrap: normal; }
    .tabela.lc-cards td > div, .tabela.lc-cards td > span:not(.badge):not(.acao-pill) { min-width: 0; text-align: right; }
    .tabela.lc-cards td[data-label="Telefone"] { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
    .tabela.lc-cards td[data-label="Telefone"]::before { flex-basis: 100%; }
    .tabela.lc-cards .link-whatsapp { padding: 4px 9px; font-size: 12px; }
    .mini-kpi-valor, .cards-resumo .card > div:last-child { font-size: clamp(16px, 5.2vw, 22px) !important; white-space: nowrap; letter-spacing: -.02em; }
    .tabela.lc-cards td > div br { display: none; }
    .tabela.lc-cards td > div small, .tabela.lc-cards td > div .texto-pequeno, .tabela.lc-cards td > div .texto-secundario { display: block; }
    .tabela.lc-cards td::before {
        content: attr(data-label);
        flex: 0 0 36%; text-align: left;
        font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lc-text-2);
    }
    .tabela.lc-cards td[data-label=""]::before { display: none; }
    .tabela.lc-cards td.col-acoes, .tabela.lc-cards td:has(.tabela-acoes) { justify-content: flex-end; }
    .tabela.lc-cards td.col-acoes::before, .tabela.lc-cards td:has(.tabela-acoes)::before { content: ""; flex: 1; }
    .tabela.lc-cards .tabela-acoes { justify-content: flex-end; flex-wrap: wrap; }
    .tabela.lc-cards td .acao-pill { min-height: 38px; }
    .grid-aniversariantes, .grid-2-colunas, .resumo-grid, .detalhe-grid, .mini-kpis { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .grid-kpi { gap: 10px; }
    .kpi-valor { font-size: 20px; }
    .titulo-pagina { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .acao-pill, .card-hover, .lc-tabbar-item, .sidebar-item { transition: none; }
}

/* =====================================================================
   COMPONENTES (do design system no Figma): sub-abas, skeleton, estados,
   toast, modal de confirmação, ordenação de tabela
   ===================================================================== */
.lc-subtabs { display: flex; gap: 4px; padding: 4px; background: var(--lc-sunken); border-radius: 14px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lc-subtabs::-webkit-scrollbar { display: none; }
/* Há abas escondidas à direita (classe do app.js): fade na borda como pista de rolagem. */
.lc-subtabs.lc-subtabs-overflow {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), rgba(0,0,0,.15) 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), rgba(0,0,0,.15) 100%);
}
.lc-subtab { flex: 1 0 auto; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--lc-text-2); font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.lc-subtab:hover { color: var(--lc-navy); }
.lc-subtab.ativo { background: var(--lc-surface); color: var(--lc-navy); font-weight: 600; box-shadow: var(--lc-shadow-card); }
.lc-subtab:focus-visible { outline: 2px solid var(--lc-primary); outline-offset: 2px; }

.lc-embed { position: relative; border: 1px solid var(--lc-border); border-radius: var(--lc-radius-lg, 16px); overflow: hidden; background: var(--lc-surface); height: calc(100vh - 250px); min-height: 560px; }
.lc-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.lc-embed-skeleton { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; gap: 12px; background: var(--lc-surface); z-index: 1; transition: opacity .25s; }
.lc-embed.carregado .lc-embed-skeleton { opacity: 0; pointer-events: none; }
.lc-skeleton { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--lc-slate-100) 25%, var(--lc-slate-50) 45%, var(--lc-slate-100) 65%); background-size: 400% 100%; animation: lc-shimmer 1.4s ease-in-out infinite; }
@keyframes lc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .lc-skeleton { animation: none; } }

.lc-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--lc-text-2); }
.lc-state-icone { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--lc-primary-soft); color: var(--lc-primary-strong); margin-bottom: 6px; }
.lc-state.erro .lc-state-icone { background: var(--lc-red-100); color: var(--lc-red-500); }
.lc-state h3 { margin: 0; font-size: 17px; color: var(--lc-text); }
.lc-state p { margin: 0; max-width: 420px; font-size: 14px; }
.lc-state .btn { margin-top: 10px; }

.lc-toast-stack { position: fixed; top: calc(var(--altura-topbar, 68px) + 12px); right: 16px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.lc-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--lc-surface); border: 1px solid var(--lc-border); box-shadow: var(--lc-shadow-float); font-size: 14px; color: var(--lc-text); animation: lc-toast-in .22s ease-out; }
.lc-toast.saindo { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.lc-toast-icone { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; }
.lc-toast-sucesso .lc-toast-icone { background: var(--lc-green-100); color: var(--lc-green-500); }
.lc-toast-erro .lc-toast-icone { background: var(--lc-red-100); color: var(--lc-red-500); }
.lc-toast-info .lc-toast-icone { background: var(--lc-primary-soft); color: var(--lc-primary-strong); }
.lc-toast-msg { flex: 1; line-height: 1.4; }
.lc-toast-fechar { flex: 0 0 auto; border: 0; background: transparent; color: var(--lc-text-2); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }
@keyframes lc-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .lc-toast-stack { right: 12px; left: 12px; width: auto; } }

.lc-modal-backdrop { position: fixed; inset: 0; z-index: 1300; background: rgba(6, 15, 94, .45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: lc-fade .18s ease-out; }
.lc-modal { width: min(440px, 100%); background: var(--lc-surface); border-radius: 20px; box-shadow: var(--lc-shadow-float); padding: 24px 22px 20px; animation: lc-pop .2s ease-out; }
.lc-modal h3 { margin: 0 0 8px; font-size: 18px; color: var(--lc-text); }
.lc-modal p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--lc-text-2); white-space: pre-line; }
.lc-modal-acoes { display: flex; gap: 10px; justify-content: flex-end; }
.lc-modal-acoes .btn { min-width: 110px; }
@keyframes lc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lc-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .lc-modal-backdrop { align-items: flex-end; padding: 0; } .lc-modal { border-radius: 22px 22px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .lc-modal-acoes { flex-direction: column-reverse; } .lc-modal-acoes .btn { width: 100%; } }

table.tabela th.lc-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.tabela th.lc-sortable::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--lc-slate-300); vertical-align: middle; }
table.tabela th.lc-sortable[aria-sort="ascending"]::after { border-top: 0; border-bottom: 5px solid var(--lc-primary); }
table.tabela th.lc-sortable[aria-sort="descending"]::after { border-top: 5px solid var(--lc-primary); }
table.tabela th.lc-sortable:hover { color: var(--lc-navy); }

/* ---- Faixa "acessando como vendedor": fica acima do topo fixo e empurra o
   layout, em vez de ficar escondida atrás dele. */
.impersonate-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1150; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; box-sizing: border-box; padding: 8px 16px; }
body:has(.impersonate-banner) { --lc-banner-h: 40px; }
body:has(.impersonate-banner) .topbar { top: var(--lc-banner-h); }
body:has(.impersonate-banner) .sidebar { top: calc(var(--altura-topbar) + var(--lc-banner-h)); }
body:has(.impersonate-banner) .main { margin-top: calc(var(--altura-topbar) + var(--lc-banner-h)); min-height: calc(100vh - var(--altura-topbar) - var(--lc-banner-h)); }
body:has(.impersonate-banner) .lc-toast-stack { top: calc(var(--altura-topbar) + var(--lc-banner-h) + 12px); }
.sidebar-perfil-voltar { color: #FDBA74 !important; font-weight: 700; }
.sidebar-perfil-voltar:hover { color: #fff !important; }
@media (max-width: 1024px) {
  .impersonate-banner { padding-top: calc(8px + env(safe-area-inset-top, 0px)); font-size: 12px !important; }
  body:has(.impersonate-banner) { --lc-banner-h: calc(92px + env(safe-area-inset-top, 0px)); }
  .impersonate-sep { display: none; }
  .impersonate-banner > span { flex-basis: 100%; justify-content: center; }
  body:has(.impersonate-banner) .topbar { top: var(--lc-banner-h); height: var(--altura-topbar); }
  body:has(.impersonate-banner) .main { margin-top: calc(var(--altura-topbar) + var(--lc-banner-h)); }
}

/* Segunda linha de abas (seções dentro de uma aba): mais discreta */
.lc-subtabs-secundaria { background: transparent; padding: 0 2px; margin-top: -6px; gap: 2px; }
.lc-subtabs-secundaria .lc-subtab { font-size: 12.5px; padding: 6px 12px; }
.lc-subtabs-secundaria .lc-subtab.ativo { box-shadow: none; background: var(--lc-blue-100); }

/* Equipe: keep every action inside its cell, including expanded labels. */
.tabela-equipe .tabela-acoes { display: flex; width: 100%; flex-wrap: wrap; gap: 8px; }
.tabela-equipe .tabela-acoes > * { flex: 0 0 auto; }
.tabela-equipe .tabela-acoes .acao-label { display: inline; }
.tabela-equipe .tabela-acoes .acao-pill { padding: 7px 10px; }
@media (min-width: 769px) {
    .tabela-equipe th.col-acoes, .tabela-equipe td.col-acoes { width: 300px; min-width: 240px; max-width: 300px; white-space: normal; }
    .tabela-equipe td:nth-child(2) { overflow-wrap: anywhere; }
}
@media (max-width: 768px) {
    .tabela-equipe.lc-cards td.col-acoes { display: block; white-space: normal; }
    .tabela-equipe.lc-cards td.col-acoes::before { display: none; }
    .tabela-equipe.lc-cards .tabela-acoes { justify-content: flex-start; }
    .tabela-equipe.lc-cards td[data-label="E-mail"] { overflow-wrap: anywhere; }
    .tabela-equipe.lc-cards .tabela-acoes .acao-pill { min-height: 44px; }
}

/* Audit: preserve readable empty states and stack constrained profile controls. */
.perfil-foto-layout > img, .perfil-foto-layout > div { flex-shrink: 0; }
.perfil-foto-layout form { min-width: 0; }
.carteira-periodo { flex-wrap: wrap; }
.carteira-periodo > span { flex-shrink: 0; }
@media (max-width: 768px) {
    .tabela.lc-cards td[colspan] { display: block; width: 100%; text-align: center; }
    .tabela.lc-cards td[colspan]::before { display: none; }
    .tabela.lc-cards td[colspan] > div { text-align: center; }
    .carteira-periodo > span { flex-basis: 100%; }
}
@media (max-width: 600px) {
    .perfil-foto-layout { flex-direction: column; align-items: stretch !important; }
    .perfil-foto-layout > img, .perfil-foto-layout > div { align-self: center; }
    .perfil-foto-layout form { width: 100%; }
}