:root {
    /* Cor do sistema: padrao do tema "roxo", trocada pela escolhida em Configuracoes → Empresa (js/tema.js). */
    --app-primaria: #6C5CE7;
    --app-primaria-escura: #5145AD;
    /* Cor principal em "r, g, b" para os tons translúcidos; trocada junto com o tema. */
    --app-primaria-rgb: 108, 92, 231;
    --app-rosa: #E84393;
    --app-verde: #00B894;
    --app-amarelo: #FDCB6E;
    --app-vermelho: #D63031;
    --app-azul: #0984E3;
    --app-fundo: #F4F5FB;
    --app-texto: #2D3436;
    --app-cinza: #7a8290;
    --app-borda: #e6e8f0;
    --topbar-h: 60px;
    --sidebar-w: 250px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--app-fundo);
    color: var(--app-texto);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

.btn-primary {
    --bs-btn-bg: var(--app-primaria);
    --bs-btn-border-color: var(--app-primaria);
    --bs-btn-hover-bg: var(--app-primaria-escura);
    --bs-btn-hover-border-color: var(--app-primaria-escura);
    --bs-btn-active-bg: var(--app-primaria-escura);
    --bs-btn-disabled-bg: var(--app-primaria);
    --bs-btn-disabled-border-color: var(--app-primaria);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-primaria);
    --bs-btn-border-color: var(--app-primaria);
    --bs-btn-hover-bg: var(--app-primaria);
    --bs-btn-hover-border-color: var(--app-primaria);
    --bs-btn-active-bg: var(--app-primaria);
}
.text-primary { color: var(--app-primaria) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--app-primaria);
    box-shadow: 0 0 0 .2rem rgba(var(--app-primaria-rgb), .15);
}
a { color: var(--app-primaria); }
.form-check-input:checked { background-color: var(--app-primaria); border-color: var(--app-primaria); }
.form-check-input:focus { border-color: var(--app-primaria); box-shadow: 0 0 0 .2rem rgba(var(--app-primaria-rgb), .15); }
.nav-tabs .nav-link:not(.active), .nav-pills .nav-link:not(.active) { color: var(--app-primaria); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-primaria); }
.pagination { --bs-pagination-color: var(--app-primaria); --bs-pagination-active-bg: var(--app-primaria); --bs-pagination-active-border-color: var(--app-primaria); }

/* Escolha do tema em Configurações → Empresa */
.tema-opcoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.tema-opcao { cursor: pointer; text-align: center; font-size: .78rem; color: var(--app-cinza); width: 64px; }
.tema-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.tema-opcao .amostra {
    display: block; width: 40px; height: 40px; margin: 0 auto .3rem; border-radius: 50%;
    border: 3px solid #fff; box-shadow: 0 0 0 1px var(--app-borda);
}
.tema-opcao input:checked + .amostra { box-shadow: 0 0 0 2px var(--app-texto); }
.tema-opcao input:checked ~ span:last-child { color: var(--app-texto); font-weight: 600; }
.tema-opcao input:focus-visible + .amostra { outline: 2px solid var(--app-texto); outline-offset: 2px; }
.tema-opcao input:disabled ~ * { cursor: default; }

/* ---------- LOGIN ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--app-primaria) 0%, var(--app-primaria-escura) 100%);
}
.login-card {
    background: #fff;
    border-radius: 18px;
    padding: 2.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
}
.login-brand { text-align: center; margin-bottom: 1.75rem; }
.login-logo {
    width: 64px; height: 64px; margin: 0 auto .85rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--app-primaria), var(--app-primaria-escura));
    color: #fff; font-weight: 700; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}
.login-brand h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.login-brand p { color: var(--app-cinza); margin: .25rem 0 0; font-size: .875rem; }
.marca-empresa {
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--app-borda);
    text-align: center; color: var(--app-cinza);
}
.marca-empresa small { display: block; font-size: .7rem; margin-bottom: .4rem; }
.marca-empresa img { max-width: 180px; height: auto; }
.login-dica {
    margin: 1.25rem 0 0; text-align: center;
    font-size: .75rem; color: var(--app-cinza);
}

/* ---------- ESTRUTURA ---------- */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
    background: linear-gradient(90deg, var(--app-primaria), var(--app-primaria-escura));
    display: flex; align-items: center; gap: .5rem;
    padding: 0 1rem; z-index: 1040; color: #fff;
}
.topbar-brand {
    color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem;
    display: flex; align-items: center; gap: .5rem;
}
.topbar-logo {
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(255, 255, 255, .2);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.btn-perfil {
    color: #fff; border: 0; background: rgba(255, 255, 255, .12);
    border-radius: 30px; padding: .3rem .75rem .3rem .3rem;
    display: flex; align-items: center; gap: .5rem; font-size: .85rem;
}
.btn-perfil:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--app-primaria-escura); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.badge-whatsapp {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--app-verde); color: #fff; text-decoration: none;
    border-radius: 20px; padding: .3rem .7rem; font-size: .78rem; font-weight: 600;
}
.badge-whatsapp:hover { color: #fff; filter: brightness(1.08); }
.badge-whatsapp.d-none { display: none !important; }

.sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
    width: var(--sidebar-w); background: #fff;
    border-right: 1px solid var(--app-borda);
    overflow-y: auto; z-index: 1035;
    display: flex; flex-direction: column;
    transition: transform .25s ease;
}
.sidebar .nav { padding: .75rem .6rem; flex: 1; }
.sidebar .nav-link {
    color: var(--app-texto); border-radius: 10px;
    padding: .6rem .8rem; margin-bottom: 2px;
    display: flex; align-items: center; gap: .65rem; font-weight: 500;
}
.sidebar .nav-link i { font-size: 1.05rem; width: 20px; color: var(--app-cinza); }
.sidebar .nav-link:hover { background: color-mix(in srgb, var(--app-primaria) 8%, #fff); color: var(--app-primaria); }
.sidebar .nav-link:hover i { color: var(--app-primaria); }
.sidebar .nav-link.ativo { background: var(--app-primaria); color: #fff; }
.sidebar .nav-link.ativo i { color: #fff; }
.sidebar-secao {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--app-cinza); padding: 1rem .8rem .35rem; font-weight: 700;
}
.sidebar-rodape {
    padding: .75rem 1rem; border-top: 1px solid var(--app-borda);
    color: var(--app-cinza); text-align: center;
}
.sidebar-marca { display: block; max-width: 140px; height: auto; margin: 0 auto .35rem; }
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
    z-index: 1030; display: none;
}
.conteudo {
    margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + 1.25rem) 1.25rem 2.5rem;
    min-height: 100vh;
}

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 30px rgba(0, 0, 0, .15); }
    .sidebar.aberta { transform: translateX(0); }
    .sidebar-backdrop.visivel { display: block; }
    .conteudo { margin-left: 0; padding-left: .85rem; padding-right: .85rem; }
}

/* ---------- COMPONENTES ---------- */
.pagina-titulo {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    margin-bottom: 1.25rem;
}
.pagina-titulo h2 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.pagina-titulo .acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.card {
    border: 1px solid var(--app-borda); border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.card-header {
    background: #fff; border-bottom: 1px solid var(--app-borda);
    font-weight: 600; border-radius: 14px 14px 0 0 !important;
}

.kpi { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; }
.kpi-icone {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
}
.kpi-valor { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.kpi-rotulo { font-size: .78rem; color: var(--app-cinza); }
.bg-primaria { background: var(--app-primaria); }
.bg-rosa { background: var(--app-rosa); }
.bg-verde { background: var(--app-verde); }
.bg-amarelo { background: var(--app-amarelo); }
.bg-vermelho { background: var(--app-vermelho); }
.bg-azul { background: var(--app-azul); }

.table { --bs-table-hover-bg: color-mix(in srgb, var(--app-primaria) 4%, #fff); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--app-cinza); border-bottom: 2px solid var(--app-borda);
    white-space: nowrap; font-weight: 700;
}
.tabela-scroll { overflow-x: auto; }

.badge-status { font-size: .72rem; padding: .32em .65em; border-radius: 20px; font-weight: 600; }
.st-Aberta { background: #fff2d8; color: #92650a; }
.st-Fechada { background: #e6f6e9; color: #1d7a33; }
.st-Aberto { background: #e2f8f1; color: #0b7a5f; }
.st-Fechado { background: #f0f0f0; color: #555; }
.st-Pendente { background: #fff2d8; color: #92650a; }
.st-Pago { background: #e6f6e9; color: #1d7a33; }
.st-Vencido { background: #ffe5e5; color: #b02a2a; }
.st-Cancelada { background: #ffe5e5; color: #b02a2a; }
.st-Processando { background: #e3f0ff; color: #0b5ed7; }
.st-Autorizada { background: #e6f6e9; color: #1d7a33; }
.st-Rejeitada { background: #ffe5e5; color: #b02a2a; }
.st-Descartada { background: #f0f0f0; color: #555; }

.vazio { text-align: center; color: var(--app-cinza); padding: 2.5rem 1rem; }
.vazio i { font-size: 2.25rem; display: block; margin-bottom: .5rem; opacity: .45; }

.lista-selecao { max-height: 320px; overflow-y: auto; }
.lista-selecao .item {
    padding: .55rem .7rem; border-radius: 8px; cursor: pointer;
    display: flex; justify-content: space-between; gap: .5rem;
}
.lista-selecao .item:hover { background: color-mix(in srgb, var(--app-primaria) 8%, #fff); }

.filtro-barra {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem;
}
.filtro-barra .form-control, .filtro-barra .form-select { min-width: 150px; }

.paginacao { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

@media print {
    .topbar, .sidebar, .pagina-titulo .acoes, .filtro-barra, .filtro-vendas { display: none !important; }
    #abas-rel, .paginacao, .card-header .btn { display: none !important; }
    /* Botoes de acao (pagar, editar, excluir...) nao tem informacao no papel. */
    .conteudo .btn { display: none !important; }
    /* Abas, caixas de selecao e icones dos indicadores sao da tela: no papel so ocupam espaco
       (com 4 indicadores por linha o icone empurrava o valor para fora do cartao). */
    .conteudo .nav-pills, .conteudo .form-check-input, .conteudo .kpi-icone { display: none !important; }
    .kpi { padding: .6rem .75rem; }
    /* Meio gutter das .row g-3 (margens negativas), senao as bordas dos cartoes saem da pagina. */
    .conteudo { margin: 0; padding: 0 .5rem; min-height: 0; }
    /* O Chart.js fixa a largura do canvas em px pela tela e nao redimensiona ao imprimir:
       reduz proporcionalmente para caber na pagina em vez de cortar o grafico. */
    canvas { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 9cm; margin: 0 auto; }
    .card:has(canvas), .col-lg-3 > .card { break-inside: avoid; }
    /* Linha flex com grafico: quando o cartao e empurrado para a proxima pagina o Chrome nao recalcula
       a altura da coluna e o canvas vaza por tras do conteudo seguinte. Empilha em bloco e solta o h-100. */
    .row:has(canvas) { display: block; }
    .row:has(canvas) > [class*="col-"] { width: 100%; max-width: 100%; margin-bottom: 1rem; }
    .row:has(canvas) > [class*="col-"]:last-child { margin-bottom: 0; }
    .h-100 { height: auto !important; }
    .card-header { break-after: avoid; }
    /* Indicadores 4 por linha, como na tela. */
    .row > .col-6.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .row > .col-lg-4:has(> .card > .kpi) { flex: 0 0 33.333%; max-width: 33.333%; }
    /* Grades de cartoes: 2 por linha e cartao nunca partido entre paginas. */
    #area-lista.row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
    #area-lista.row > [class*="col-"] > .card { break-inside: avoid; }
    .kpi-valor { font-size: 1.05rem; }
    /* No papel nao ha rolagem: as tabelas mostram todas as linhas e colunas. */
    .tabela-scroll { overflow: visible !important; max-height: none !important; }
    .tabela-scroll table { font-size: .66rem; }
    .tabela-scroll .table > :not(caption) > * > * { padding: .2rem .25rem; white-space: normal; }
    .tabela-scroll .table thead th { font-size: .6rem; letter-spacing: 0; white-space: normal; }
    .tabela-scroll .table > :not(caption) > * > .text-end { white-space: nowrap; }
    /* O Chrome imprime sem fundo por padrao: texto branco sobre faixa ou selo colorido sumiria. */
    .badge, .foto-cliente, .kpi-icone { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- AJUDA E SOBRE ---------- */
.sidebar-versao { display: block; font-size: .8rem; color: var(--app-cinza); text-decoration: none; }
.sidebar-versao:hover { color: var(--app-primaria); }

.ajuda-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ajuda-indice { position: sticky; top: calc(var(--topbar-h) + 1rem); max-height: calc(100vh - var(--topbar-h) - 2rem); display: flex; flex-direction: column; }
.ajuda-lista { overflow-y: auto; padding: 0 .5rem .5rem; }
.ajuda-item {
    display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem;
    border-radius: 8px; color: var(--app-texto); text-decoration: none; font-weight: 500;
}
.ajuda-item i:first-child { color: var(--app-cinza); width: 18px; }
.ajuda-item:hover { background: color-mix(in srgb, var(--app-primaria) 8%, #fff); color: var(--app-primaria); }
.ajuda-item.ativo { background: var(--app-primaria); color: #fff; }
.ajuda-item.ativo i { color: #fff; }
.ajuda-titulo { font-size: 1.3rem; font-weight: 700; margin: 0; }
.ajuda-secao { margin-top: 1.25rem; line-height: 1.6; }
.ajuda-secao h5 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.ajuda-secao ol, .ajuda-secao ul { padding-left: 1.25rem; margin-bottom: .5rem; }
.ajuda-secao li { margin-bottom: .25rem; }
.ajuda-dica, .ajuda-atencao {
    display: flex; gap: .6rem; padding: .65rem .85rem; border-radius: 10px; margin: .5rem 0; font-size: .85rem;
}
.ajuda-dica { background: color-mix(in srgb, var(--app-primaria) 8%, #fff); color: var(--app-primaria-escura); }
.ajuda-atencao { background: #fff4dd; color: #8a5a00; }

.sobre-capa {
    display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem;
    background: linear-gradient(135deg, var(--app-primaria), var(--app-primaria-escura)); color: #fff; border: 0;
}
.sobre-capa .login-logo { background: rgba(255, 255, 255, .2); flex: 0 0 auto; }
.sobre-capa h3 { font-weight: 700; }
.sobre-versao {
    display: inline-block; margin-top: .5rem; padding: .2rem .7rem; border-radius: 20px;
    background: rgba(255, 255, 255, .2); font-size: .78rem; font-weight: 600;
}
.sobre-linha {
    display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
    border-bottom: 1px dashed var(--app-borda);
}
.sobre-linha:last-child { border-bottom: 0; }
.sobre-linha span { color: var(--app-cinza); }
.sobre-linha strong { text-align: right; font-weight: 600; word-break: break-word; }

@media (max-width: 991.98px) {
    .ajuda-layout { grid-template-columns: 1fr; }
    .ajuda-indice { position: static; max-height: 320px; }
}

@media print {
    .ajuda-indice { display: none !important; }
    .ajuda-layout { display: block; }
}

/* ---------- LICENCA ---------- */
.aviso-licenca {
    display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
    padding: .6rem .9rem; border-radius: 10px; text-decoration: none;
    background: #fff6e0; color: #7a5300; border: 1px solid #f5d68a;
}
.aviso-licenca:hover { color: #5c3f00; background: #fff0c8; }
.aviso-licenca.bloqueio { background: #fdecec; color: #8a1f1f; border-color: #f2b8b8; }
.aviso-licenca i { font-size: 1.1rem; }
.licenca-codigo {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em;
    background: var(--app-fundo); border: 1px dashed var(--app-borda); border-radius: 8px; padding: .35rem .6rem;
    display: inline-block; word-break: break-all;
}
.licenca-capa { display: flex; align-items: center; gap: 1rem; }
.licenca-capa .icone {
    width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.7rem; flex: 0 0 auto;
}
.licenca-capa .icone.ok { background: #e3f8f2; color: var(--app-verde); }
.licenca-capa .icone.alerta { background: #fff6e0; color: #c58a00; }
.licenca-capa .icone.erro { background: #fdecec; color: var(--app-vermelho); }
@media print { .aviso-licenca { display: none !important; } }

/* ---------- Fotos (usuario e cadastros) ---------- */
.foto-cliente {
    --tam: 64px;
    width: var(--tam); height: var(--tam); flex: 0 0 var(--tam);
    border-radius: 50%; overflow: hidden;
    background: var(--app-primaria-escura); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--tam) * .36); font-weight: 700;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--app-borda);
}
.foto-cliente img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Logomarca da empresa ---------- */
.logo-preview {
    width: 180px; height: 90px; flex: 0 0 180px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--app-borda); border-radius: 10px; padding: .4rem; background: #fff;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empresa { height: 44px; max-width: 160px; object-fit: contain; }
.foto-cliente.clicavel { cursor: zoom-in; }

.antes-depois { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ad-quadro { margin: 0; min-width: 0; }
.ad-quadro figcaption {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--app-cinza); margin-bottom: .25rem;
}
.ad-foto {
    height: 340px; width: 100%;
    border-radius: 10px; overflow: hidden;
    background: var(--app-fundo); border: 1px solid var(--app-borda);
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.ad-foto img { width: 100%; height: 100%; object-fit: contain; }
.ad-foto[data-ad-foto] { cursor: zoom-in; }
.ad-upload { cursor: pointer; border-style: dashed; margin: 0; }
.ad-upload:hover { border-color: var(--app-primaria); }

.visualizador-imagem {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, .88); cursor: zoom-out;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem;
}
.visualizador-imagem img { max-width: 100%; max-height: calc(100% - 3rem); object-fit: contain; border-radius: 6px; }
.visualizador-imagem .legenda { color: #fff; margin-top: .75rem; font-size: .9rem; }
.visualizador-imagem .btn-close { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 576px) { .ad-foto { height: 220px; } }
.foto-cliente.foto-lista { box-shadow: none; }

/* ---------- Gestão de clientes e suporte ---------- */
.st-EmAtendimento { background: #e3f0ff; color: #0b5ed7; }
.st-AguardandoCliente { background: #fff2d8; color: #92650a; }
.st-Resolvido { background: #e6f6e9; color: #1d7a33; }
.st-Cancelado { background: #f0f0f0; color: #777; text-decoration: line-through; }
.st-AguardandoAtendente { background: #ffe5e5; color: #b02a2a; }
.st-Encerrada { background: #f0f0f0; color: #555; }

.badge-prioridade { font-size: .7rem; padding: .25em .6em; border-radius: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pr-Baixa { background: #eef1f4; color: #5f6b78; }
.pr-Normal { background: #e3f0ff; color: #0b5ed7; }
.pr-Alta { background: #fff0d4; color: #a35c00; }
.pr-Urgente { background: #d63031; color: #fff; }

.badge-cor {
    --cor: #7a8290;
    display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600;
    padding: .28em .65em; border-radius: 20px;
    background: color-mix(in srgb, var(--cor) 14%, #fff); color: color-mix(in srgb, var(--cor) 75%, #000);
}
.badge-cor::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }
.ponto-cor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }

.sla-vencido { color: var(--app-vermelho); font-weight: 600; }
.linha-destaque { box-shadow: inset 3px 0 0 var(--app-vermelho); }
.aguardando-equipe { box-shadow: inset 3px 0 0 var(--app-amarelo); }

/* Pipeline (kanban) */
.kanban { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .75rem; align-items: flex-start; }
.kanban-coluna {
    flex: 0 0 270px; background: #eef0f7; border-radius: 12px; display: flex; flex-direction: column;
    max-height: calc(100vh - var(--topbar-h) - 190px);
}
.kanban-cabecalho { padding: .6rem .75rem; border-top: 4px solid var(--cor, var(--app-primaria)); border-radius: 12px 12px 0 0; }
.kanban-cabecalho .titulo { font-weight: 700; display: flex; justify-content: space-between; gap: .5rem; }
.kanban-cabecalho .total { font-size: .75rem; color: var(--app-cinza); }
.kanban-lista { padding: .5rem; overflow-y: auto; flex: 1; min-height: 80px; }
.kanban-lista.sobre { background: color-mix(in srgb, var(--app-primaria) 10%, #eef0f7); border-radius: 0 0 12px 12px; }
.kanban-cartao {
    background: #fff; border-radius: 10px; padding: .6rem .7rem; margin-bottom: .5rem; cursor: grab;
    border: 1px solid var(--app-borda); box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.kanban-cartao:active { cursor: grabbing; }
.kanban-cartao.arrastando { opacity: .45; }
.kanban-cartao .cliente { font-weight: 600; }
.kanban-cartao .meta { font-size: .75rem; color: var(--app-cinza); display: flex; justify-content: space-between; gap: .5rem; margin-top: .25rem; }

/* Linha do tempo */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--app-borda); }
.timeline li { position: relative; padding: 0 0 1rem 1.75rem; }
.timeline li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid var(--cor, var(--app-primaria));
}

/* Conversa (chamados e chat) */
.conversa { display: flex; flex-direction: column; gap: .75rem; }
.msg { max-width: 85%; border-radius: 14px; padding: .6rem .85rem; background: #fff; border: 1px solid var(--app-borda); }
.msg .autor { font-size: .75rem; font-weight: 700; color: var(--app-cinza); display: flex; gap: .5rem; justify-content: space-between; }
.msg .texto { margin-top: .2rem; white-space: normal; overflow-wrap: anywhere; }
.msg.cliente { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.equipe { align-self: flex-end; background: color-mix(in srgb, var(--app-primaria) 9%, #fff); border-color: color-mix(in srgb, var(--app-primaria) 25%, #fff); border-bottom-right-radius: 4px; }
.msg.interna { align-self: flex-end; background: #fff8e1; border: 1px dashed #e0b84a; }
.msg.sistema { align-self: center; background: transparent; border: 0; color: var(--app-cinza); font-size: .8rem; text-align: center; padding: .1rem; }
.msg .anexos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.anexo-link {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .2rem .55rem;
    border-radius: 8px; background: var(--app-fundo); border: 1px solid var(--app-borda); text-decoration: none; cursor: pointer;
}

/* Chat da equipe */
.chat-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; height: calc(100vh - var(--topbar-h) - 130px); min-height: 420px; }
.chat-fila { overflow-y: auto; }
.chat-item { padding: .65rem .8rem; border-bottom: 1px solid var(--app-borda); cursor: pointer; }
.chat-item:hover { background: color-mix(in srgb, var(--app-primaria) 5%, #fff); }
.chat-item.ativo { background: color-mix(in srgb, var(--app-primaria) 12%, #fff); }
.chat-item .ultima { font-size: .78rem; color: var(--app-cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-painel { display: flex; flex-direction: column; min-height: 0; }
.chat-mensagens { flex: 1; overflow-y: auto; padding: 1rem; background: var(--app-fundo); }
.chat-digitando { font-size: .78rem; color: var(--app-cinza); min-height: 1.2rem; padding: 0 1rem; }
.chat-envio { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--app-borda); }
.chat-envio textarea { resize: none; }
.online-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--app-verde); }
@media (max-width: 991.98px) {
    .chat-layout { grid-template-columns: 1fr; height: auto; }
    .chat-fila { max-height: 260px; }
    .chat-painel { height: 70vh; }
}

/* Agenda */
.agenda-dia { margin-bottom: 1rem; }
.agenda-dia h6 { font-weight: 700; color: var(--app-cinza); text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; }
.agenda-dia.hoje h6 { color: var(--app-primaria); }
.atividade { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem .8rem; border-bottom: 1px solid var(--app-borda); }
.atividade:last-child { border-bottom: 0; }
.atividade .hora { font-weight: 700; min-width: 52px; }
.atividade.concluida { opacity: .55; }
.atividade.concluida .titulo { text-decoration: line-through; }

/* Base de conhecimento */
.conteudo-artigo img { max-width: 100%; height: auto; }
.conteudo-artigo pre { background: var(--app-fundo); padding: .75rem; border-radius: 8px; }
.editor-html { min-height: 280px; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.progresso-envio { height: 8px; }