* { box-sizing: border-box; margin: 0; padding: 0; }

/* [hidden] TEM que esconder.

   O navegador traz `[hidden] { display: none }` na folha dele, e QUALQUER
   regra de autor com classe vence essa -- entao um `display: flex` num
   componente desliga o atributo `hidden` sem avisar ninguem.

   Foi o que aconteceu com a busca dentro do filtro de Cliente: o JS marcava
   `item.hidden = true` nas opcoes que nao batiam, o atributo ia pro DOM, e
   `.filtro-multi-item { display: flex }` mantinha tudo na tela. Digitar
   "trans" nao filtrava nada, e como a carteira e de transporte quase toda
   a lista casava por acaso -- o bug passou despercebido.

   Fica global, e nao so no filtro: o proximo componente com display proprio
   cairia na mesma armadilha. */
[hidden] { display: none !important; }

/* Azul de marca (cor principal da Rodo Union) como cor de destaque em toda
   a UI -- links/acoes de texto usam o mesmo azul (#2f6fed), entao a marca e
   o "isso e clicavel" ficam no mesmo tom de proposito, sem soar
   inconsistente. Paleta estendida com neutros/sombras/raio de borda como
   tokens (--sombra-*, --raio-*) pra dar profundidade e consistencia sem
   precisar repetir os mesmos valores em cada regra. */
:root {
    --azul-marca: #2f6fed;
    --azul-marca-escuro: #2358c9;
    --azul-escuro: #16224a;
    --azul-escuro-2: #1e2f63;
    --azul-claro: #e8f0fe;

    --cinza-50: #f7f8fa;
    --cinza-100: #eef0f4;
    --cinza-200: #e2e5eb;
    --cinza-300: #d1d5db;
    --cinza-500: #6b7280;
    --cinza-700: #374151;
    --cinza-900: #1a1f2b;

    --verde: #16803c;
    --verde-bg: #dcf5e3;
    --amarelo: #8a6d0a;
    --amarelo-bg: #fdf3d0;
    --laranja: #a1520f;
    --laranja-bg: #fde2cc;
    --vermelho: #a12626;
    --vermelho-bg: #fbdcdc;

    --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sombra-2: 0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.05);
    --sombra-3: 0 8px 24px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.05);
    --raio: 12px;
    --raio-peq: 8px;
    --raio-pill: 999px;

    /* Escala de espacamento: usar estes em vez de numeros soltos mantem o
       ritmo vertical igual em telas escritas em epocas diferentes. */
    --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem;
    --e5: 1.5rem; --e6: 2rem; --e7: 3rem;

    /* Borda de foco unica pra todo controle -- acessibilidade e
       previsibilidade no teclado. */
    --foco: 0 0 0 3px rgba(47, 111, 237, 0.22);

    /* TOKENS SEMANTICOS. As telas usam estes; os --cinza-* acima sao a
       PALETA, que nao muda. E a separacao que faz o tema escuro ser uma
       troca de valores em vez de uma segunda folha de estilo. */
    --fundo: var(--cinza-50);
    --superficie: #ffffff;
    --superficie-2: var(--cinza-50);
    --borda: var(--cinza-200);
    --borda-fraca: var(--cinza-100);
    --texto: var(--cinza-900);
    --texto-fraco: var(--cinza-500);
    --texto-medio: var(--cinza-700);
}

/* TEMA ESCURO.

   So os tokens mudam -- nenhuma regra de componente foi duplicada. Os
   neutros sao invertidos com um leve azul (cinza puro em tela grande cansa),
   e as cores de estado ganham fundo translucido em vez do pastel claro, que
   sobre fundo escuro vira mancha.

   `[data-tema]` no <html> vence a preferencia do sistema: quem escolheu na
   barra quis aquilo, em qualquer maquina. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) { color-scheme: dark; }
}
:root[data-tema="escuro"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --tooltip-fundo: #2a3446; --tooltip-texto: #eef2f8; --tooltip-borda: #3d4a61;
        --fundo: #0f1420;
        --superficie: #171d2b;
        --superficie-2: #1e2534;
        --borda: #2b3446;
        --borda-fraca: #232b3a;
        --texto: #e8ecf4;
        --texto-fraco: #9aa5b8;
        --texto-medio: #c3cbd9;
        --azul-claro: #1c2c50;
        --verde-bg: #14311f; --amarelo-bg: #33290c; --laranja-bg: #3a230f; --vermelho-bg: #3a1a1a;
        --verde: #4ade80; --amarelo: #fbbf24; --laranja: #fb923c; --vermelho: #f87171;
        --azul-marca: #5b8dff; --azul-marca-escuro: #7ea4ff;
        --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
        --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.35);
        --sombra-3: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
}
:root[data-tema="escuro"] {
    --tooltip-fundo: #2a3446; --tooltip-texto: #eef2f8; --tooltip-borda: #3d4a61;
    --fundo: #0f1420;
    --superficie: #171d2b;
    --superficie-2: #1e2534;
    --borda: #2b3446;
    --borda-fraca: #232b3a;
    --texto: #e8ecf4;
    --texto-fraco: #9aa5b8;
    --texto-medio: #c3cbd9;
    --azul-claro: #1c2c50;
    --verde-bg: #14311f; --amarelo-bg: #33290c; --laranja-bg: #3a230f; --vermelho-bg: #3a1a1a;
    --verde: #4ade80; --amarelo: #fbbf24; --laranja: #fb923c; --vermelho: #f87171;
    --azul-marca: #5b8dff; --azul-marca-escuro: #7ea4ff;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.35);
    --sombra-3: 0 8px 24px rgba(0, 0, 0, 0.45);
}

body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    line-height: 1.55;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* NUMERO DE LARGURA FIXA em tudo que e valor.

   E a mudanca que mais muda a leitura deste sistema. Com numeral
   proporcional, "R$ 1.111.111,11" ocupa menos largura que "R$ 8.888.888,88"
   e os digitos de duas linhas seguidas nao caem na mesma coluna -- comparar
   magnitude vira leitura caractere a caractere. Com tabular-nums todo
   digito tem a mesma largura, as casas se alinham sozinhas e a diferenca
   entre milhar e milhao aparece pelo COMPRIMENTO, que e como se le uma
   coluna de dinheiro. */
.painel-card h2, .tabela-padrao td, .tabela-padrao th,
.painel-secundario, .num, .badge, input[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--texto); line-height: 1.25; }
h2 { font-size: 1.05rem; font-weight: 650; color: var(--texto); letter-spacing: -0.01em; }

a { transition: color 0.15s ease; }
button, input, select, textarea { font-family: inherit; }

/* Navbar horizontal no topo (o Leo preferiu assim depois de ver a sidebar
   experimental) -- brand + links (com icone) + usuario, tudo numa linha.
   No mobile os links/usuario recolhem num dropdown abaixo do toggle
   (ver media query). */
.navbar {
    background: var(--azul-escuro);
    color: #fff; padding: 0.55rem 1.6rem; display: flex; align-items: center; gap: 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky; top: 0; z-index: 50;
}
.navbar-brand {
    font-weight: 700; font-size: 1.12rem; color: #fff; text-decoration: none;
    display: flex; align-items: center; letter-spacing: -0.01em;
}
.navbar-logo { height: 36px; max-width: 170px; object-fit: contain; }
.navbar-toggle {
    display: none; background: none; border: none; color: #fff; font-size: 1.4rem;
    cursor: pointer; padding: 0.2rem 0.5rem; line-height: 1; margin-left: auto;
}

.navbar-links { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.navbar-links a, .navbar-user a {
    display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none;
    color: #b9c2da; padding: 0.5rem 0.85rem; border-radius: 999px;
    font-size: 0.88rem; font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.navbar-links a svg, .navbar-user a svg { flex-shrink: 0; opacity: 0.85; }
.navbar-links a:hover, .navbar-user a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.navbar-links a.navbar-ativo {
    color: #fff; font-weight: 600; background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.navbar-links a.navbar-ativo svg { opacity: 1; }

.navbar-user { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.navbar-user-nome { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.6rem; }
.navbar-user-avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--azul-marca);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: 0.76rem; font-weight: 700;
}

.container { max-width: 1320px; margin: 0 auto; padding: var(--e6) 1.6rem; }

/* Paginas com tabelas largas (ex: Resseguro, com ate 10 colunas) usam essa
   classe (via o block "container_class" que a pagina sobrescreve) no lugar
   de .container, pra ganhar mais espaco horizontal. */
.container-largo { max-width: 1800px; margin: 0 auto; padding: var(--e6) 1.6rem; box-sizing: border-box; }

.flash-container { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.flash {
    padding: 0.75rem 1rem; border-radius: var(--raio-peq); font-size: 0.9rem;
    border-left: 3px solid transparent; box-shadow: var(--sombra-1);
}
.flash-success { background: var(--verde-bg); color: var(--verde); border-left-color: var(--verde); }
.flash-danger { background: var(--vermelho-bg); color: var(--vermelho); border-left-color: var(--vermelho); }
.flash-warning { background: var(--amarelo-bg); color: var(--amarelo); border-left-color: var(--amarelo); }
.flash-info { background: var(--azul-claro); color: var(--azul-marca-escuro); border-left-color: var(--azul-marca); }
.flash-credencial { background: var(--azul-claro); color: var(--azul-marca-escuro); font-family: "Cascadia Code", Consolas, monospace; font-weight: 600; border-left-color: var(--azul-marca); }

.login-box {
    max-width: 360px; margin: 4rem auto; background: var(--superficie);
    padding: 2.2rem 2rem; border-radius: 14px; box-shadow: var(--sombra-3);
    border: 1px solid var(--borda-fraca);
}
.login-box h1 { font-size: 1.4rem; margin-bottom: 0.2rem; color: var(--azul-escuro); }
.login-logo { display: block; max-height: 80px; max-width: 100%; margin: 0 auto 0.2rem; object-fit: contain; }
.subtitulo { color: var(--texto-fraco); margin-bottom: 1.5rem; font-size: 0.9rem; }

form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--texto-medio); margin: 0.9rem 0 0.35rem; }
/* Marca campo obrigatorio com um * ao lado do label, sem precisar mexer
   em cada template -- so funciona quando o input vem logo depois do label
   (padrao ja usado em todo o projeto). */
form label:has(+ input[required])::after,
form label:has(+ select[required])::after,
form label:has(+ textarea[required])::after {
    content: " *"; color: var(--vermelho);
}
form input, form select, form textarea {
    width: 100%; padding: 0.58rem 0.75rem; border: 1px solid var(--borda);
    border-radius: var(--raio-peq); font-size: 0.95rem; background: var(--superficie);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form input:focus, form select:focus, form textarea:focus {
    outline: none; border-color: var(--azul-marca);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
}
form textarea { min-height: 70px; resize: vertical; }

.btn {
    display: inline-block; padding: 0.62rem 1.15rem; border-radius: var(--raio-peq);
    text-decoration: none; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn-primary { background: var(--azul-marca); color: #fff; margin-top: 1.2rem; box-shadow: 0 1px 2px rgba(47, 111, 237, 0.35); }
.btn-primary:hover { background: var(--azul-marca-escuro); }
.btn-primary:active { transform: translateY(1px); }
.btn-secundario { background: var(--superficie); color: var(--texto-medio); margin-top: 1.2rem; margin-left: 0.5rem; border: 1px solid var(--borda); }
.btn-secundario:hover { background: var(--superficie-2); border-color: var(--texto-fraco); }

.page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--e5); gap: var(--e4); flex-wrap: wrap;
}
.page-header h1 { margin: 0; }
/* botao no cabecalho da pagina nao carrega o margin-top que ele tem dentro
   de formulario */
.page-header .btn { margin-top: 0; margin-left: 0; }

.area-arvore, .area-filhos { list-style: none; padding-left: 0; }
.area-filhos { padding-left: 1.5rem; border-left: 2px solid var(--cinza-200); margin-top: 0.5rem; }
.area-item { margin-bottom: 0.6rem; }
.area-card {
    background: var(--superficie); padding: 0.8rem 1.1rem; border-radius: var(--raio-peq);
    display: flex; gap: 1rem; align-items: center; box-shadow: var(--sombra-2);
    border: 1px solid var(--borda-fraca);
}
.area-nome { font-weight: 600; }
.area-responsavel { color: var(--texto-fraco); font-size: 0.85rem; }
.area-editar { margin-left: auto; font-size: 0.8rem; color: var(--azul-marca); text-decoration: none; }

.painel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 0.85rem; }

/* Donut de status (Dashboard) + lista ao lado -- flex-wrap sozinho ja
   resolve o empilhamento no mobile, sem precisar de media query extra. */
.visao-geral-coluna { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.grafico-donut-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.visao-geral-lista { flex: 1; min-width: 150px; }

.grafico-linha-wrap { position: relative; height: 240px; }
/* CARD DE INDICADOR -- rotulo em cima, numero embaixo.

   O HTML vem com o numero primeiro (<h2>) e o rotulo depois (.vazio); a
   ORDEM VISUAL e invertida aqui por `order`, sem tocar em 60 telas. Ler o
   rotulo antes do numero e o que faz diferenca quando ha 6 cards lado a
   lado e voce esta procurando UM: com o numero primeiro, a varredura e por
   posicao decorada; com o rotulo primeiro, e por leitura.

   A borda azul no topo saiu: ela estava em TODO card, entao nao destacava
   nada -- so somava ruido. Destaque agora e semantico (ver .painel-card
   com cor no proprio numero). */
.painel-card {
    background: var(--superficie); padding: 1.15rem 1.25rem; border-radius: var(--raio);
    box-shadow: var(--sombra-1);
    border: 1px solid var(--borda);
    display: flex; flex-direction: column; gap: 0.1rem;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.painel-card:hover { box-shadow: var(--sombra-2); border-color: var(--cinza-300); }
.painel-card h2 {
    /* O VALOR QUEBRA; O QUE NAO PODE PARTIR SE PROTEGE SOZINHO.
    
       Aqui havia `white-space: nowrap`, posto pra "R$ 3.338.919,27" nao
       partir depois do "R$". So que ele valia pra TODO valor de card, e
       cortava o que nao era moeda: em 06/10/2026 o Leo achou o CNPJ
       ("08.728.238/0001-4") e a atividade principal ("Locacao de automoveis
       sem cor") truncados na tela do cliente.
    
       Quinta vez que um limite global morde um caso que ele nao conhecia --
       a licao do nome do cliente, que so parou de cortar quando o teto
       saiu, e nao quando o numero aumentou.
    
       Agora o espaco duro de `fmt_currency` protege a moeda, e o resto
       quebra. `anywhere` porque CNPJ e placa nao tem espaco pra quebrar:
       sem ele, a linha estoura em vez de partir. */
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    white-space: normal; overflow-wrap: anywhere;
    line-height: 1.2; margin: 0.15rem 0 0;
    color: var(--texto); font-weight: 700; letter-spacing: -0.03em;
}

/* A INVERSAO SO VALE PRO CARD DE INDICADOR.
   
   Quarta vez que isto morde, sempre do mesmo jeito: a lista de exclusao
   nasceu curta e um card novo caiu nela por engano. Ja aconteceu com
   grafico (titulo foi pro rodape), com badge no h2 (texto cortado) e com
   botao (o "Baixar Excel" subiu pro topo e o titulo desceu pro fim).
   
   O criterio real e simples: card de INDICADOR tem um NUMERO no h2 e nada
   mais dentro. Qualquer conteudo estruturado -- grafico, tabela, lista -- ou
   qualquer ACAO -- link, botao, formulario -- significa que o h2 ali e
   TITULO, e titulo fica em cima.

   Card de indicador e so texto: um numero e um rotulo. Card que tem
   grafico, tabela ou lista dentro tem o titulo em cima POR DESENHO, e
   inverter ali jogava o titulo pro rodape e o grafico pro topo -- foi o que
   aconteceu com a "Segmentacao da Carteira por Atividade" em 30/09/2026.
   
   O `:not(:has(...))` e o que separa os dois: quem tem conteudo estruturado
   dentro fica como esta. */
.painel-card:not(:has(canvas, table, ul, ol, a, button, form, input, .painel-grid, .visao-geral-coluna, .grafico-donut-wrap)):not(:has(> p.vazio ~ p.vazio)) > h2 {
    order: 2;
}
.painel-card:not(:has(canvas, table, ul, ol, a, button, form, input, .painel-grid, .visao-geral-coluna, .grafico-donut-wrap)):not(:has(> p.vazio ~ p.vazio)) > .vazio {
    order: 1;
    font-size: 0.74rem; font-weight: 650; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--texto-fraco); line-height: 1.35;
}
.painel-card:not(:has(canvas, table, ul, ol, a, button, form, input, .painel-grid, .visao-geral-coluna, .grafico-donut-wrap)):not(:has(> p.vazio ~ p.vazio)) > .painel-secundario {
    order: 3; margin-top: 0.4rem;
}
/* dentro do card o tooltip nao herda o caixa-alta -- o ⓘ em versalete fica
   deformado */
.painel-card > .vazio .tem-tooltip { text-transform: none; letter-spacing: 0; }

/* H2 QUE CONTEM BADGE NAO E VALOR.

   O `white-space: nowrap` existe pra "R$ 3.338.919,27" nao partir depois do
   "R$". Mas no Fechamento Mensal o h2 do card e um BADGE com frase inteira
   -- "307 parcela(s) com vencimento no mes" -- e o nowrap cortava o texto na
   borda do card. Ali quebrar linha e o certo. */
.painel-card h2:has(.badge) { white-space: normal; font-size: 1rem; }
.painel-card .badge { white-space: normal; text-align: left; }

/* CARD DE PROSA NAO E CARD DE INDICADOR.

   A inversao (rotulo em cima, numero embaixo) assume h2 = NUMERO e
   .vazio = ROTULO. Num card que explica alguma coisa em varios paragrafos
   -- "Status na Seguradora", no detalhe da apolice -- ela transformava o
   texto inteiro em versalete cinza e o titulo ia parar no rodape.

   Essa foi a SEXTA vez que a heuristica mordeu (titulo de grafico, badge
   dentro do h2, botao no card, teste de cobertura, acoes, e agora prosa).
   O sinal que separa os dois casos de vez: card de indicador tem UM
   rotulo; card de prosa tem varios paragrafos. */
.painel-card:has(> p.vazio ~ p.vazio) > h2,
.painel-card:has(canvas, table, ul, ol, a, button, form, input, .painel-grid, .visao-geral-coluna, .grafico-donut-wrap) > h2 {
    font-size: 1rem; white-space: normal; letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.subnav-grupos { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.subnav-grupo {
    background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra-2);
    border: 1px solid var(--borda-fraca);
    padding: 1rem 1.15rem; flex: 1 1 220px;
}
.subnav-titulo {
    display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    color: var(--azul-marca); letter-spacing: 0.06em; margin-bottom: 0.75rem;
}
.subnav-grupo a {
    display: block; font-size: 0.88rem; color: var(--texto-medio); text-decoration: none;
    padding: 0.4rem 0.1rem; border-radius: 6px; transition: color 0.15s ease, padding-left 0.15s ease;
}
.subnav-grupo a:hover { color: var(--azul-marca); padding-left: 0.3rem; }

/* Sub-bloco dentro de um subnav-grupo (ex: separar "Planilha de Comissao"
   de "Relatorios Oficiais da Seguradora" dentro de "Operacao") -- mais
   discreto que .subnav-titulo, com linha divisoria acima. */
.subnav-subtitulo {
    display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    color: #a3aab8; letter-spacing: 0.04em;
    margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--cinza-100);
}

/* Titulo de secao: a linha inteira azul competia com o conteudo. Agora a
   marca e um tracinho curto e o texto ganha o peso. */
.secao-titulo {
    font-size: 0.95rem; font-weight: 700; color: var(--texto);
    margin: var(--e6) 0 var(--e3);
    padding-bottom: var(--e2); border-bottom: 1px solid var(--borda);
    text-transform: none; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 0.55rem;
}
.secao-titulo::before {
    content: ""; width: 3px; height: 1em; border-radius: 2px;
    background: var(--azul-marca); flex-shrink: 0;
}

.lista-demandas, .lista-projetos { list-style: none; }
.demanda-item, .projeto-item {
    padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--borda-fraca);
    display: flex; justify-content: space-between; font-size: 0.9rem; gap: 0.5rem;
    border-radius: 6px; transition: background-color 0.12s ease;
}
.demanda-item:hover, .projeto-item:hover { background: var(--superficie-2); }
.demanda-atrasada .demanda-titulo { color: var(--vermelho); }
.demanda-status { color: var(--texto-fraco); font-size: 0.8rem; }
.vazio { color: var(--texto-fraco); font-size: 0.9rem; }

/* Tooltip explicativo (indicador do Painel/Carteira) -- so CSS, sem JS,
   texto vem do atributo data-tooltip. */
.tem-tooltip { position: relative; cursor: help; border-bottom: 1px dotted var(--cinza-500); display: inline-block; }
.tem-tooltip::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 130%; left: 0;
    background: var(--tooltip-fundo, var(--cinza-900)); color: var(--tooltip-texto, #fff);
    padding: 0.6rem 0.8rem; border-radius: 8px;
    border: 1px solid var(--tooltip-borda, transparent);
    font-size: 0.78rem; font-weight: 400; line-height: 1.35; width: 240px;
    text-align: left; white-space: normal;
    opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
    z-index: 30; pointer-events: none; box-shadow: var(--sombra-3);
}
.tem-tooltip:hover::after { opacity: 1; visibility: visible; }

.tabela-padrao {
    width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie);
    border-radius: var(--raio); box-shadow: var(--sombra-1);
    border: 1px solid var(--borda);
    overflow: hidden;
}
.tabela-padrao th, .tabela-padrao td {
    text-align: left; padding: 0.55rem 0.85rem; font-size: 0.85rem;
    border-bottom: 1px solid var(--borda-fraca);
    vertical-align: middle; line-height: 1.4;
}

/* CELULA DE TEXTO LONGO em tabela larga: uma linha so, com reticencias e o
   texto inteiro no title.

   Sem isso, "TRANSPORTADORA MZ DE PINHALZINHO LTDA" quebrava em tres linhas
   e a linha da tabela passava de 150px -- numa tabela de 1.100 apolices
   isso e rolagem pura. As colunas sao escolhidas sozinhas no base.html, e
   so em tabela larga: numa tabela de 3 colunas quebrar linha esta certo. */
.tabela-padrao td.cel-longa {
    max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 24ch cortava o nome do cliente na metade da carteira: a mediana e 32
   caracteres e o p90 e 43. Dentro do container-largo cabe mais, e o Leo
   abriu o chamado assim -- "as informacoes estao todas cortadas, nao
   consigo ver os dados inteiro sem ter que entrar na apolice". */

/* Celula que nao pode ser cortada NUNCA, por mais estreita que fique: um
   periodo de vigencia pela metade ("01/09/2026 -> 01/09/2...") nao informa
   nada, e esconder o ano e pior que empurrar a coluna. */
.tabela-padrao td.nao-quebra { white-space: nowrap; max-width: none; }

/* CABECALHO QUE ACOMPANHA A ROLAGEM.

   Tabela de apolice passa de 1.100 linhas. Sem isto, depois da primeira
   tela voce esta olhando numeros sem saber de que coluna sao -- e volta ao
   topo pra conferir, toda vez. */
.tabela-padrao thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--superficie-2);
    font-weight: 700; color: var(--texto-medio);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
/* a sombra so aparece quando a tabela ja rolou, pra o cabecalho "descolar" */
.tabela-padrao thead th::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--cinza-200);
}

.tabela-padrao tbody tr { transition: background-color 0.1s ease; }
.tabela-padrao tbody tr:hover { background: var(--azul-claro); }
.tabela-padrao tbody tr:last-child td { border-bottom: none; }

/* COLUNA NUMERICA: alinhada a DIREITA.

   Valor alinhado a esquerda obriga a ler digito a digito pra comparar
   linhas; alinhado a direita, a unidade fica sempre na mesma coluna e a
   magnitude salta pelo comprimento. As colunas sao detectadas sozinhas no
   base.html -- nenhuma tela precisou ser alterada. */
.tabela-padrao th.col-num, .tabela-padrao td.col-num { text-align: right; }
/* moeda nunca quebra: "R$ 694.964,00" partido em duas linhas desalinha a
   coluna inteira e dobra a altura da linha */
.tabela-padrao td.col-num, .tabela-padrao th.col-num {
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* negativo em vermelho, sem precisar de classe no template */
.tabela-padrao td.col-num.negativo { color: var(--vermelho); }

/* linha de TOTAL destacada */
.tabela-padrao tfoot td, .tabela-padrao tr.linha-total td {
    background: var(--superficie-2); font-weight: 700;
    border-top: 2px solid var(--cinza-200); border-bottom: none;
}

/* ACOES da linha: pilulas discretas em vez de links azuis colados */
/* nowrap de proposito: com wrap, quatro acoes numa coluna estreita
   empilhavam em quatro linhas e a linha da tabela ia a 143px. A tabela ja
   rola na horizontal -- e ela que deve ceder, nao a altura da linha. */
.tabela-acoes { display: flex; gap: 0.25rem; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
/* Sem `width: 1%` aqui: a celula de acoes E o proprio flex container, e o
   1% fazia ela medir 27px enquanto os quatro links, em nowrap, transbordavam
   por cima das colunas vizinhas -- badge de STATUS e link "editar" um em
   cima do outro. O nowrap sozinho ja segura tudo numa linha, e o navegador
   dimensiona a coluna pelo conteudo. */
.tabela-padrao td:has(.tabela-acoes), .tabela-padrao td.tabela-acoes { white-space: nowrap; }
.tabela-acoes form { display: inline; }
.tabela-acoes a, .tabela-acoes .link-botao {
    font-size: 0.78rem; padding: 0.25rem 0.55rem; border-radius: var(--raio-pill);
    color: var(--texto-medio); text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tabela-acoes a:hover, .tabela-acoes .link-botao:hover {
    background: var(--superficie); color: var(--azul-marca); border-color: var(--cinza-300);
    text-decoration: none;
}

.link-botao {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--azul-marca); font-size: 0.85rem; text-decoration: none; font-weight: 500;
}
.link-botao:hover { text-decoration: underline; color: var(--azul-marca-escuro); }

.paginacao {
    display: flex; align-items: center; justify-content: center; gap: 1.2rem;
    margin-top: 1.4rem; font-size: 0.88rem; color: var(--texto-fraco);
}
.paginacao a { color: var(--azul-marca); text-decoration: none; }
.paginacao a:hover { text-decoration: underline; }

.filtros-form {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1.3rem;
    background: var(--superficie); padding: 0.9rem 1rem; border-radius: var(--raio-peq);
    border: 1px solid var(--borda-fraca); box-shadow: var(--sombra-1);
}
.filtros-form select { width: auto; padding: 0.45rem 0.6rem; }
/* .filtro-select e o mesmo rotulo em linha do .filtro-checkbox, pra um
   filtro de TRES estados (ex: APV todas/sem/so), que caixa de marcar nao
   comporta. Compartilham a regra de proposito: sao a mesma coisa na tela. */
.filtro-checkbox, .filtro-select { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: normal; margin: 0; }
.filtro-checkbox input { width: auto; }
.filtro-select select { font-size: 0.9rem; }

.linha-atrasada td { color: var(--vermelho); }

.tarefas-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.3rem; }
.tarefas-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tarefas-tabs a {
    color: var(--texto-medio); text-decoration: none; font-size: 0.88rem; font-weight: 600;
    padding: 0.48rem 0.95rem; border-radius: 999px; background: var(--superficie);
    box-shadow: var(--sombra-1); border: 1px solid var(--borda-fraca);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.tarefas-tabs a:hover { border-color: var(--azul-marca); }
.tarefas-tabs a.tarefas-tab-ativa { background: var(--azul-marca); color: #fff; border-color: var(--azul-marca); box-shadow: 0 1px 2px rgba(47, 111, 237, 0.35); }
.tarefas-tab-contagem { opacity: 0.75; font-weight: 400; margin-left: 0.2rem; }

.lista-tarefas { list-style: none; background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra-2); border: 1px solid var(--borda-fraca); overflow: hidden; }
.tarefa-item { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--borda-fraca); transition: background-color 0.12s ease; }
.tarefa-item:hover { background: var(--superficie-2); }
.tarefa-item:last-child { border-bottom: none; }
.tarefa-check-form { margin-top: 0.15rem; }
.tarefa-check {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cinza-300);
    background: var(--superficie); cursor: pointer; padding: 0; flex-shrink: 0; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tarefa-check:hover { border-color: var(--azul-marca); background: var(--azul-claro); }
.tarefa-corpo { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.tarefa-titulo { color: var(--texto); text-decoration: none; font-size: 0.95rem; font-weight: 600; }
.tarefa-titulo:hover { color: var(--azul-marca); }
.tarefa-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: 0.8rem; color: var(--texto-fraco); }
.tarefa-prazo-atrasado { color: var(--vermelho); font-weight: 600; }
.tarefa-atrasada .tarefa-titulo { color: var(--vermelho); }

.tarefa-check-marcado { background: var(--azul-marca); border-color: var(--azul-marca); position: relative; }
.tarefa-check-marcado::after {
    content: "✓"; color: #fff; font-size: 12px; font-weight: 700; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1;
}

.quick-add-form { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.quick-add-input {
    flex: 1; border: 1px solid var(--borda); border-radius: var(--raio-peq); padding: 0.6rem 0.85rem;
    font-size: 0.9rem; font-family: inherit; background: var(--superficie); box-shadow: var(--sombra-1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quick-add-input:focus { border-color: var(--azul-marca); outline: none; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15); }
.quick-add-input::placeholder { color: #9aa1ad; }

.tarefa-detalhe-topo { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.campo-inline-form { display: inline-block; }
.tarefa-detalhe-titulo-input {
    font-size: 1.5rem; font-weight: 700; border: none; outline: none; width: 100%;
    padding: 0.3rem 0.4rem; margin-left: -0.4rem; background: transparent;
    font-family: inherit; color: var(--texto); border-radius: 6px;
}
.tarefa-detalhe-titulo-input:hover, .tarefa-detalhe-titulo-input:focus { background: var(--superficie-2); }
.tarefa-detalhe-notas {
    width: 100%; min-height: 260px; border: none; outline: none; resize: vertical;
    font-family: inherit; font-size: 0.95rem; line-height: 1.6; padding: 0.5rem 0.4rem;
    margin-left: -0.4rem; background: transparent; color: var(--texto); border-radius: 6px;
}
.tarefa-detalhe-notas::placeholder { color: #9aa1ad; }
.tarefa-detalhe-notas:hover, .tarefa-detalhe-notas:focus { background: var(--superficie-2); }

.pill-input, .pill-select {
    border: 1px solid var(--borda); border-radius: 999px; padding: 0.32rem 0.75rem;
    font-size: 0.8rem; color: var(--texto-medio); background: var(--superficie); cursor: pointer; font-family: inherit;
    transition: border-color 0.15s ease;
}
.pill-input:hover, .pill-select:hover { border-color: var(--azul-marca); }
.tarefa-detalhe-rodape {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--cinza-100);
}

/* Badge com um ponto colorido na frente: a cor sozinha exclui quem nao a
   distingue, e num sistema com 4 estados parecidos o ponto tambem ajuda a
   varrer a coluna. */
/* Badge com um ponto colorido na frente: a cor sozinha exclui quem nao a
   distingue, e num sistema com quatro estados parecidos o ponto tambem
   ajuda a varrer a coluna de cima a baixo. */
.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--raio-pill); white-space: nowrap;
    font-size: 0.71rem; font-weight: 700; background: var(--cinza-100); color: var(--texto-medio);
    text-transform: uppercase; letter-spacing: 0.03em;
    border: 1px solid currentColor;
}
.badge::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.badge-status-aberta { background: var(--azul-claro); color: var(--azul-marca-escuro); }
.badge-status-em_andamento { background: var(--amarelo-bg); color: var(--amarelo); }
.badge-status-concluida { background: var(--verde-bg); color: var(--verde); }
.badge-status-atrasada, .badge-status-cancelada { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-status-planejado { background: var(--cinza-100); color: var(--texto-medio); }
.badge-status-pausado { background: var(--amarelo-bg); color: var(--amarelo); }
.badge-status-concluido { background: var(--verde-bg); color: var(--verde); }
.badge-status-cancelado { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-status-em_desenvolvimento { background: var(--cinza-100); color: var(--texto-medio); }
.badge-status-ativo { background: var(--verde-bg); color: var(--verde); }
.badge-status-descontinuado { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-status-finalizado { background: var(--cinza-100); color: var(--texto-medio); }
.badge-status-vencida { background: var(--amarelo-bg); color: var(--amarelo); }
.badge-prioridade-baixa { background: var(--cinza-100); color: var(--texto-medio); }
.badge-prioridade-media { background: var(--azul-claro); color: var(--azul-marca-escuro); }
.badge-prioridade-alta { background: var(--amarelo-bg); color: var(--amarelo); }
.badge-prioridade-urgente { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-tipo-alcada { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-tipo-negocio { background: var(--azul-claro); color: var(--azul-marca-escuro); }
.badge-tipo-tecnologia { background: #efe4fc; color: #6b21a8; }

.barra-progresso {
    width: 100px; height: 8px; background: var(--cinza-200); border-radius: 999px;
    overflow: hidden; display: inline-block; vertical-align: middle;
}
.barra-progresso-preenchida { height: 100%; background: var(--azul-marca); transition: width 0.2s ease; }
.barra-progresso-preenchida.barra-normal { background: var(--verde); }
.barra-progresso-preenchida.barra-atencao { background: #d4a017; }
.barra-progresso-preenchida.barra-alerta { background: var(--laranja); }
.barra-progresso-preenchida.barra-critico { background: var(--vermelho); }
.barra-progresso-gatilho { width: 220px; height: 14px; }

.badge-status-normal { background: var(--verde-bg); color: var(--verde); }
.badge-status-atencao { background: var(--amarelo-bg); color: var(--amarelo); }
.badge-status-alerta { background: var(--laranja-bg); color: var(--laranja); }
.badge-status-critico { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-status-sem_informação { background: var(--cinza-100); color: var(--texto-medio); }
.progresso-texto { margin-left: 0.5rem; font-size: 0.8rem; color: var(--texto-fraco); }

.lista-5w2h { display: grid; grid-template-columns: 160px 1fr; row-gap: 0.6rem; column-gap: 1rem; }
.lista-5w2h dt { font-weight: 600; color: var(--texto-fraco); font-size: 0.85rem; }
.lista-5w2h dd { font-size: 0.95rem; }

.form-inline { display: flex; gap: 0.6rem; align-items: center; }
.form-inline select { width: auto; }

.timeline { list-style: none; margin-top: 1.2rem; }
.timeline-item { padding: 0.8rem 0; border-bottom: 1px solid var(--borda-fraca); }
.timeline-item:last-child { border-bottom: none; }
.timeline-item p { white-space: pre-line; }
.timeline-meta { display: flex; gap: 0.7rem; align-items: center; font-size: 0.8rem; color: var(--texto-fraco); margin-bottom: 0.3rem; }
.timeline-tipo { background: var(--cinza-100); padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.timeline-mudanca_status .timeline-tipo { background: var(--azul-claro); color: var(--azul-marca-escuro); }
.timeline-decisao_reuniao .timeline-tipo { background: var(--amarelo-bg); color: var(--amarelo); }
.timeline-edicao .timeline-tipo { background: #efe4fc; color: #6b21a8; }
.timeline-comentario_externo .timeline-tipo { background: var(--verde-bg); color: var(--verde); }

.anexo-item { margin-top: 0.4rem; font-size: 0.85rem; }
.anexo-item a { color: var(--azul-marca); text-decoration: none; }
.anexo-item a:hover { text-decoration: underline; }
.anexo-tamanho { color: var(--texto-fraco); font-size: 0.78rem; }

.link-compartilhado {
    display: inline-block; background: var(--cinza-100); padding: 0.35rem 0.65rem; border-radius: 6px;
    font-size: 0.85rem; word-break: break-all;
}

.link-voltar {
    display: inline-block; margin-bottom: 1.1rem; color: var(--texto-fraco); text-decoration: none; font-size: 0.85rem;
    font-weight: 600;
}
.link-voltar:hover { color: var(--azul-marca); }

/* Breakpoint separado (mais largo) so pra navbar: com a logo + 6 links + area
   do usuario, o menu horizontal precisa de ~1200px pra caber numa linha so
   -- sem isso ele quebraria em 2 linhas de forma feia em tablet/notebook
   menor, em vez do dropdown limpo do hamburguer. O resto do layout (grid de
   cards, tabela) so precisa mesmo virar coluna unica numa tela bem estreita
   (celular), por isso o breakpoint deles continua em 700px, mais abaixo. */
@media (max-width: 1150px) {
    .navbar { flex-wrap: wrap; }
    .navbar-brand { order: 0; }
    .navbar-toggle { display: block; order: 1; }

    /* Os links e a area do usuario recolhem num dropdown abaixo da barra,
       escondido por padrao, aberto via o hamburguer (.navbar-toggle). "order"
       mantem o hamburguer sempre na 1a linha ao lado da logo -- sem ele, o
       botao (que vem depois dos links no HTML) pularia pra baixo da lista
       aberta, ja que ela ocupa 100% da largura e forca a quebra de linha. */
    .navbar-links, .navbar-user {
        display: none; flex-direction: column; align-items: flex-start; width: 100%;
        margin-left: 0; margin-top: 0.5rem; gap: 0.15rem;
    }
    .navbar-links { order: 2; }
    .navbar-user { order: 3; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }
    .navbar-links.aberto, .navbar-user.aberto { display: flex; }
    .navbar-links a, .navbar-user a { width: 100%; border-radius: 6px; }
}

@media (max-width: 700px) {
    .painel-grid { grid-template-columns: 1fr; }
    .lista-5w2h { grid-template-columns: 1fr; }

    .container { padding: 1.2rem 0.8rem; }
    .container-largo { padding: 1.2rem 0.8rem; }

    /* Tabelas largas viram scrollaveis na horizontal em vez de vazar da tela. */
    .tabela-padrao { display: block; overflow-x: auto; }

    .form-inline { flex-wrap: wrap; }
    .barra-progresso-gatilho { max-width: 100%; }
}

/* --------------------------------------------------------------------
   Filtro de multipla selecao (ver app/templates/_filtros.html)
   -------------------------------------------------------------------- */
.filtro-multi { position: relative; min-width: 11rem; }
.filtro-multi > summary {
    position: relative;
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: baseline; gap: 0.35rem;
    padding: 0.45rem 1.5rem 0.45rem 0.6rem;
    border: 1px solid var(--borda); border-radius: var(--raio-peq);
    background: var(--superficie);
    font-size: 0.9rem; white-space: nowrap;
}
/* A seta era um SVG com a cor embutida no data-uri -- no tema escuro ela
   ficava cinza-claro sobre fundo escuro. Desenhada em CSS ela herda
   currentColor e acompanha o tema sozinha. */
.filtro-multi > summary::after {
    content: ""; position: absolute; right: 0.6rem; top: 50%;
    width: 0; height: 0; margin-top: -2px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--texto-fraco);
    transition: transform 0.15s ease;
}
.filtro-multi[open] > summary::after { transform: rotate(180deg); }
.filtro-multi > summary::-webkit-details-marker { display: none; }
.filtro-multi > summary:hover { border-color: var(--azul-marca); }
.filtro-multi[open] > summary { border-color: var(--azul-marca); }
.filtro-multi-rotulo { color: var(--texto-fraco); }
.filtro-multi-resumo { color: var(--texto); font-weight: 600; }
.filtro-multi-lista {
    position: absolute; z-index: 30; top: calc(100% + 2px); left: 0;
    min-width: 100%; max-width: 22rem; max-height: 17rem; overflow-y: auto;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-peq); box-shadow: var(--sombra-2); padding: 0.3rem;
}
.filtro-multi-item {
    display: flex; align-items: center; gap: 0.45rem; margin: 0;
    padding: 0.32rem 0.45rem; border-radius: var(--raio-peq);
    font-size: 0.88rem; font-weight: normal; cursor: pointer; white-space: nowrap;
}
.filtro-multi-item:hover { background: var(--superficie-2); }
.filtro-multi-item input { width: auto; margin: 0; flex-shrink: 0; }
.filtro-multi-item span { overflow: hidden; text-overflow: ellipsis; }

.form-excel { display: inline; margin: 0; }
.btn-excel::before { content: "\2193\00a0"; }
.filtro-multi-busca {
    width: 100%; margin-bottom: 0.3rem; padding: 0.35rem 0.5rem;
    border: 1px solid var(--borda); border-radius: var(--raio-peq);
    font-size: 0.85rem;
}

/* Dashboard de totais da Subscricao. Grid propria, em vez de reusar a do
   .painel-grid, porque sao 7 cards e precisam cair 4 + 3 numa tela normal:
   a primeira linha e volume e dinheiro, a segunda e razao. auto-FILL (e nao
   auto-fit) e o que segura isso -- com auto-fit os 3 da segunda linha
   esticariam pra ocupar a largura toda e ficariam maiores que os 4 de cima. */
.painel-subscricao { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem; margin-bottom: 1.1rem; }
.painel-subscricao .painel-card { padding: 0.9rem 1rem; }
.painel-subscricao .painel-card h2 { font-size: 1.25rem; margin-bottom: 0.15rem; }
.painel-subscricao .vazio { margin: 0; font-size: 0.82rem; }
.painel-secundario { margin: 0.35rem 0 0; font-size: 0.74rem; color: var(--texto-fraco); line-height: 1.35; }


/* ─────────────── ajustes do usuario: tema e densidade ─────────────── */

.navbar-ajuste {
    background: none; border: none; cursor: pointer; color: #b9c2da;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.45rem; border-radius: var(--raio-pill); line-height: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.navbar-ajuste:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* o icone mostrado e o do tema que o clique VAI aplicar, nao o atual --
   botao de acao diz o que faz, nao onde voce esta */
.navbar-ajuste .icone-escuro { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .navbar-ajuste .icone-claro { display: none; }
    :root:not([data-tema="claro"]) .navbar-ajuste .icone-escuro { display: inline; }
}
:root[data-tema="escuro"] .navbar-ajuste .icone-claro { display: none; }
:root[data-tema="escuro"] .navbar-ajuste .icone-escuro { display: inline; }
:root[data-tema="claro"] .navbar-ajuste .icone-claro { display: inline; }
:root[data-tema="claro"] .navbar-ajuste .icone-escuro { display: none; }

/* DENSIDADE COMPACTA: cabem ~40% mais linhas por tela.

   Nao e so padding menor -- a fonte tambem desce um ponto. Encolher so o
   espaco deixa o texto grande demais pro espaco e a linha fica apertada em
   vez de compacta. */
:root[data-densidade="compacto"] .tabela-padrao th,
:root[data-densidade="compacto"] .tabela-padrao td {
    padding: 0.3rem 0.65rem; font-size: 0.8rem;
}
:root[data-densidade="compacto"] .painel-card { padding: 0.8rem 0.95rem; }
:root[data-densidade="compacto"] .painel-card h2 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
:root[data-densidade="compacto"] .container,
:root[data-densidade="compacto"] .container-largo { padding-top: var(--e4); }
:root[data-densidade="compacto"] .badge { font-size: 0.66rem; padding: 0.1rem 0.45rem; }

/* No tema escuro o hover da linha em azul-claro some; aqui ele clareia. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .tabela-padrao tbody tr:hover { background: var(--superficie-2); }
}
:root[data-tema="escuro"] .tabela-padrao tbody tr:hover { background: var(--superficie-2); }

/* Campo de formulario no escuro: o fundo branco fixo cegaria. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) form input,
    :root:not([data-tema="claro"]) form select,
    :root:not([data-tema="claro"]) form textarea,
    :root:not([data-tema="claro"]) .filtro-multi-busca {
        background: var(--superficie-2); color: var(--texto); border-color: var(--borda);
    }
}
:root[data-tema="escuro"] form input,
:root[data-tema="escuro"] form select,
:root[data-tema="escuro"] form textarea,
:root[data-tema="escuro"] .filtro-multi-busca {
    background: var(--superficie-2); color: var(--texto); border-color: var(--borda);
}

/* ------------------------------------------------------------------ */
/* Secao dobravel + alerta de secao                                    */
/*                                                                     */
/* "A tela de fechamento mensal esta muito grande, nao precisa ter     */
/* esses relatorios em baixo" (Leo, 05/10/2026). Apagar resolveria o   */
/* tamanho e perderia a funcao. Dobrar resolve os dois -- mas dobrar   */
/* sozinho vira ESCONDER, e foi exatamente esconder que deixou um      */
/* buraco de comissao passar um mes sem ninguem ver. Por isso cada     */
/* dobra carrega o numero no proprio cabecalho e abre sozinha quando   */
/* pede acao (o `open` condicional no template).                      */
/* ------------------------------------------------------------------ */
summary.secao-titulo { cursor: pointer; list-style: none; }
summary.secao-titulo::-webkit-details-marker { display: none; }
summary.secao-titulo:hover { color: var(--azul-marca-escuro); }
summary.secao-titulo::after {
    content: "▸"; margin-left: 0.6rem; color: var(--texto-fraco);
    font-size: 0.8rem; flex-shrink: 0; transition: transform 0.12s ease;
}
details[open] > summary.secao-titulo::after { transform: rotate(90deg); }
.secao-resumo {
    font-weight: 500; font-size: 0.8rem; color: var(--texto-fraco);
    font-variant-numeric: tabular-nums; margin-left: auto;
}
.secao-dobravel { margin-bottom: var(--e4); }
.secao-dobravel[open] { padding-bottom: var(--e3); }

.alerta-secao {
    padding: 0.7rem 0.95rem; border-radius: var(--raio-peq); font-size: 0.88rem;
    border-left: 3px solid transparent; line-height: 1.5; margin: 0;
}
.alerta-secao-atencao {
    background: var(--amarelo-bg); color: var(--amarelo); border-left-color: var(--amarelo);
}
.alerta-secao-ok {
    background: var(--verde-bg); color: var(--verde); border-left-color: var(--verde);
}


/* ------------------------------------------------------------------ */
/* TABELA LARGA DEMAIS PRA JANELA                                      */
/*                                                                     */
/* "As informacoes estao todas cortadas, nao consigo ver os dados      */
/* inteiro sem ter que entrar na apolice. Alem disso, ela esta         */
/* completamente desalinhada." (Leo, 05/10/2026, tela de Apolices.)    */
/*                                                                     */
/* Sao 12 colunas uteis -- nenhuma delas e dispensavel, e cortar texto */
/* pra fazer caber foi exatamente o que gerou a reclamacao. A saida    */
/* nao e esconder coluna: e a rolagem ficar DENTRO da tabela, com a    */
/* primeira coluna fixa, pra nunca se perder de qual apolice e a       */
/* linha. A pagina inteira para de rolar de lado junto.                */
/* ------------------------------------------------------------------ */
.tabela-rolavel {
    overflow-x: auto; max-width: 100%;
    border-radius: var(--raio); box-shadow: var(--sombra-1);
    border: 1px solid var(--borda); background: var(--superficie);
}
.tabela-rolavel > .tabela-padrao { margin-top: 0; }
/* A borda, o raio e o recorte passam pro embrulho, e a tabela abre mao do
   `overflow: hidden` dela.
   NAO e cosmetica: um ancestral com `overflow: hidden` e um container de
   rolagem, e `position: sticky` se prende a ELE em vez de se prender ao
   embrulho que rola de verdade. Com o hidden na tabela, a coluna fixa
   simplesmente nao fixava -- rolava pra fora junto com o resto, que foi
   exatamente o que a primeira tentativa fez. */
.tabela-rolavel > .tabela-fixa-1a {
    overflow: visible; border: 0; border-radius: 0; box-shadow: none;
}

.tabela-fixa-1a th:first-child, .tabela-fixa-1a td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--superficie);
}
.tabela-fixa-1a thead th:first-child { z-index: 3; background: var(--superficie-2); }
.tabela-fixa-1a tbody tr:hover td:first-child { background: var(--superficie-2); }
/* Uma borda marca onde a coluna fixa termina -- sem ela o texto que
   passa por baixo parece pertencer a ela. */
.tabela-fixa-1a th:first-child::after, .tabela-fixa-1a td:first-child::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0;
    width: 1px; background: var(--borda);
}

/* NOME DO CLIENTE: a coluna que o Leo mais le, e a que mais cortava.
   O p90 dos nomes da carteira e 43 caracteres e o maior tem 60 --
   "TRANSPORTADORA MZ DE PINHALZINHO LTDA" morria no meio. Teto proprio,
   maior que o das outras colunas; o que passar de 48 ainda corta, mas ai
   e nome que nao cabe em tela nenhuma e o title mostra inteiro. */
.tabela-padrao td.cel-cliente {
    /* SEM TETO. O nome do cliente nao e cortado, ponto.
       Primeiro foram 24ch, depois 34ch, depois 48ch -- e
       "COOPEREXTREMA COOPERATIVA DE TRANS E LOGISTICA DE E" tem 50. Perseguir
       o maior nome com um numero e perder sempre: o proximo cliente tem um
       nome maior.
       A tabela ja rola dentro do proprio quadro, com a coluna da apolice
       fixa (.tabela-rolavel + .tabela-fixa-1a), entao deixar a coluna crescer
       custa rolagem lateral -- e rolar e melhor que nao poder ler. */
    white-space: nowrap; max-width: none; overflow: visible;
}

/* Coluna de texto medio (produto): cabe o nome do produto inteiro sem
   roubar a largura que o nome do cliente precisa. */
.tabela-padrao td.cel-media {
    max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* A VIDA DA APOLICE: linha do tempo                                   */
/*                                                                     */
/* "Nao consigo entender a vida da apolice do jeito que esta" (Leo,    */
/* 05/10/2026). A tela mostrava seis caixas de totais e quatro         */
/* tabelas -- tudo estava la, e mesmo assim nao dava pra responder "o  */
/* que aconteceu com essa apolice?". Total nao conta historia; ordem   */
/* conta.                                                              */
/* ------------------------------------------------------------------ */
.linha-do-tempo { list-style: none; margin: 0.8rem 0 0; padding: 0; position: relative; }
.linha-do-tempo .evento {
    display: grid;
    grid-template-columns: 6.2rem 1.1rem 1fr;
    align-items: start; gap: 0 0.6rem;
    padding: 0.5rem 0;
}
.evento-data {
    font-size: 0.78rem; color: var(--texto-fraco);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    padding-top: 0.1rem; text-align: right;
}
/* O fio que liga os eventos sai da propria marca, nao de um ::before do
   container -- assim ele acompanha a altura real de cada linha. */
.evento-marca { position: relative; align-self: stretch; }
.evento-marca::before {
    content: ""; position: absolute; left: 50%; top: 0.45rem;
    width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
    background: var(--texto-fraco); z-index: 1;
}
.evento-marca::after {
    content: ""; position: absolute; left: 50%; top: 0.45rem; bottom: -0.5rem;
    width: 2px; margin-left: -1px; background: var(--borda);
}
.linha-do-tempo .evento:last-child .evento-marca::after { display: none; }
.evento-dinheiro .evento-marca::before { background: var(--verde); }
.evento-risco .evento-marca::before { background: var(--vermelho); }
.evento-contrato .evento-marca::before { background: var(--azul-marca); }

.evento-corpo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.evento-corpo strong { font-size: 0.92rem; }
.evento-valor { font-variant-numeric: tabular-nums; font-weight: 600; }
.evento-dinheiro .evento-valor { color: var(--verde); }
.evento-risco .evento-valor { color: var(--vermelho); }
/* O detalhe ocupa a linha inteira: em tela estreita ele ficaria espremido
   entre o valor e a etiqueta, e e justamente ele que explica o evento. */
.evento-detalhe { flex-basis: 100%; font-size: 0.8rem; color: var(--texto-fraco); }

.badge-fonte {
    background: var(--superficie-2); color: var(--texto-fraco);
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Subtitulo do cabecalho da apolice: cliente, produto e vigencia numa
   linha so, porque sao eles que identificam a apolice -- o numero
   sozinho nao diz de quem e. */
.apolice-subtitulo { margin: 0; font-size: 0.92rem; color: var(--texto-medio); }
.apolice-subtitulo .vazio { display: inline; }

/* Nota de rodape dentro de uma definicao: explica o campo sem competir
   com o valor dele. Antes esse texto vinha solto no meio do card e o CSS
   o promovia a titulo. */
.lista-5w2h .nota {
    display: block; font-size: 0.76rem; color: var(--texto-fraco);
    line-height: 1.4; margin-top: 0.15rem;
}

@media (max-width: 640px) {
    .linha-do-tempo .evento { grid-template-columns: 1.1rem 1fr; }
    .evento-data { grid-column: 2; text-align: left; }
    .evento-marca { grid-row: 1 / span 2; }
    .evento-corpo { grid-column: 2; }
}

/* Atalhos do dashboard: ate tres telas que a pessoa abre todo dia. */
.atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; }
.atalhos-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.atalhos-editor > summary { cursor: pointer; list-style: none; display: inline-block; }
.atalhos-editor > summary::-webkit-details-marker { display: none; }
.atalhos-form { margin-top: 0.5rem; max-width: 30rem; }
.atalhos-opcoes { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }